@charset "UTF-8";

/* =====================================================================
   NARROW SCREENS: a track minimum is a minimum, not a floor
   =====================================================================
   Every auto-fit grid in this file was written as
   repeat(auto-fit, minmax(NNNpx, 1fr)), which reads as "no track narrower
   than NNN". On a 320px phone the usable width inside a card is about 235,
   so a 250 or 280 minimum forced the track wider than the box that held it
   and the card overflowed — on Swara, Tantra, Chakra, Kaarya, Ghatana and
   Swasthya alike, and worse the deeper the nesting went.

   All of them are now minmax(min(NNNpx, 100%), 1fr): the same minimum while
   there is room for it, and the container's own width when there is not.
   Nothing changes above the width where each grid already fitted.
   ===================================================================== */
/* LITE uses the website's typefaces: Red Hat Display for everything, Red Hat Mono
   for figures, Marcellus for the wordmark, Tiro for Devanagari (index.html) */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Red+Hat+Mono:wght@400;500&family=Marcellus&family=Tiro+Devanagari+Hindi&display=swap');

/* ---- tokens : brass instrument at night (default) ------------------- */
:root {
  --ground:#0A0C12; --ground-2:#070910;
  --panel:#12151F;  --panel-2:#171B27;
  --rule:#262B3A;   --rule-soft:#1C2130;
  --ink:#E6DFCE;    --ink-2:#B9B3A3;   --dim:#857F6E;
  --brass:#C9A227;  --brass-hi:#F0D57E; --brass-dim:#6B571A;
  --sindoor:#D9482F; --jade:#4E9B7F;
  /* Ida's colour. It was referenced in six places — the swara ring, the day
     strip, the lean bars, the deviation card and the kapha dosha — but never
     defined, so every one of them fell back to transparent whenever Ida was
     the answer. Pingala has always been --sindoor, so the bug only showed on
     half the readings. */
  --soma:#7A6BA8;
  --fire:#B4432C; --earth:#8A7A38; --air:#4E7A93; --water:#5A5FA0;
  --glow:0 0 22px rgba(201,162,39,.28);
  --dial-face:#0C0F17; --dial-face-2:#0A0D14; --plate:#0B0E15; --cart:#101420;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --display:'Marcellus', 'Times New Roman', serif;
  --body:'Alegreya Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --deva:'Tiro Devanagari Hindi', 'Nirmala UI', serif;
}
/* parchment, for viewers whose system asks for light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:#E9E1CE; --ground-2:#DED4BC;
    --panel:#F4EEDE;  --panel-2:#EDE5D0;
    --rule:#C6B896;   --rule-soft:#D8CCAF;
    --ink:#1E1A12;    --ink-2:#4A4232;   --dim:#7A6E56;
    --brass:#8A6A12;  --brass-hi:#6A5000; --brass-dim:#C4B183;
    --sindoor:#A8341C; --jade:#2F6B52; --soma:#4A3E78;
    --fire:#9A3A24; --earth:#6E6128; --air:#3A5F76; --water:#454A86;
    --glow:0 0 18px rgba(138,106,18,.18);
    --dial-face:#F6F1E2; --dial-face-2:#EFE7D3; --plate:#EFE8D6; --cart:#F7F2E4;
    --shadow:0 14px 34px rgba(90,72,30,.18);
  }
}
:root[data-theme="light"] {
  --ground:#E9E1CE; --ground-2:#DED4BC;
  --panel:#F4EEDE;  --panel-2:#EDE5D0;
  --rule:#C6B896;   --rule-soft:#D8CCAF;
  --ink:#1E1A12;    --ink-2:#4A4232;   --dim:#7A6E56;
  --brass:#8A6A12;  --brass-hi:#6A5000; --brass-dim:#C4B183;
  --sindoor:#A8341C; --jade:#2F6B52;
  --fire:#9A3A24; --earth:#6E6128; --air:#3A5F76; --water:#454A86;
  --glow:0 0 18px rgba(138,106,18,.18);
  --dial-face:#F6F1E2; --dial-face-2:#EFE7D3; --plate:#EFE8D6; --cart:#F7F2E4;
  --shadow:0 14px 34px rgba(90,72,30,.18);
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:var(--display); font-weight:400; text-wrap:balance; margin:0; letter-spacing:.01em; }
.deva { font-family:var(--deva); }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
a { color:var(--brass); }
:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }

/* The layout is designed down to 320px — the narrowest width any mainstream
   phone reports — and every tab and sub-pane is verified clean there. Below
   it the only real devices are fold cover screens at 280, where a dozen rows
   built round fixed label columns start to clip. Rather than chase those to
   a width almost nobody reads on, the page keeps its 320 layout and pans,
   which is what the dial inside it has always done: a predictable sideways
   scroll instead of unpredictable clipping. */
.wrap { max-width:1500px; min-width:0; margin:0 auto; padding:0 22px 80px; }
/* LITE has no floor width: it is laid out down to a 280px fold cover screen,
   and test/lite-responsive.mjs holds it there. */
@media (max-width:359px) { .wrap { padding-left:12px; padding-right:12px; } }


/* ---- masthead -------------------------------------------------------- */
.mast {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 26px;
  padding:22px 0 16px; border-bottom:1px solid var(--rule);
  margin-bottom:26px;
}
.mast .mark {
  font-family:var(--display); font-size:26px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-hi);
}
.mast .mark span { color:var(--dim); }
.mast .sub { font-size:13px; color:var(--dim); letter-spacing:.04em; }
.mast .spacer { flex:1 1 auto; }
.chip {
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--rule); border-radius:2px; padding:4px 9px;
}

/* ---- intake form ----------------------------------------------------- */
.intake {
  background:var(--panel); border:1px solid var(--rule); border-radius:3px;
  padding:22px 24px 24px; margin-bottom:28px; box-shadow:var(--shadow);
}
.intake h2 { font-size:19px; margin-bottom:4px; }
.intake .lede { color:var(--dim); font-size:14px; margin:0 0 18px; max-width:62ch; }
.fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(168px, 100%), 1fr)); gap:14px 16px; align-items:end; }
label { display:block; }
.lbl {
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); margin-bottom:6px;
}
input, select {
  width:100%; background:var(--ground-2); color:var(--ink);
  border:1px solid var(--rule); border-radius:2px; padding:9px 10px;
  font-family:var(--mono); font-size:14px;
}
input:focus, select:focus { border-color:var(--brass); }
.row-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:18px; }
button.go {
  font-family:var(--display); font-size:15px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--brass); color:#12100A; border:0; border-radius:2px;
  padding:11px 26px; cursor:pointer;
}
button.go:hover { background:var(--brass-hi); }
button.ghost {
  font-family:var(--body); font-size:13px; background:transparent; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:2px; padding:9px 15px; cursor:pointer;
}
button.ghost:hover { border-color:var(--brass); color:var(--brass-hi); }
.err { color:var(--sindoor); font-size:13px; min-height:1.2em; }

/* ---- stage ----------------------------------------------------------- */
.stage { display:grid; grid-template-columns:1fr; gap:24px; }
/* the plate is the page: one full-width column */
.stage { max-width:1340px; margin:0 auto; }

.dialbox { position:relative; }
.dialbox svg { width:100%; height:auto; display:block; filter:drop-shadow(0 22px 46px rgba(0,0,0,.5)); }
:root[data-theme="light"] .dialbox svg,
:root:not([data-theme="dark"]) .dialbox svg { filter:none; }

.railcard {
  background:var(--panel); border:1px solid var(--rule); border-radius:3px;
  padding:14px 16px 16px; margin-bottom:16px;
}
.railcard h3 {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--rule-soft);
}
.kv { display:flex; justify-content:space-between; gap:12px; padding:3px 0; font-size:13.5px; }
.kv .k { color:var(--dim); }
.kv .v { font-family:var(--mono); font-size:12.5px; text-align:right; font-variant-numeric:tabular-nums; }
.kv .v.big { font-size:15px; color:var(--brass-hi); }

.ticker { font-family:var(--mono); font-size:28px; color:var(--brass-hi); letter-spacing:.04em;
  font-variant-numeric:tabular-nums; line-height:1.15; }
.ticker .sec { color:var(--sindoor); }
.tsub { font-size:12px; color:var(--dim); font-family:var(--mono); letter-spacing:.08em; }

.bar { height:5px; background:var(--rule-soft); border-radius:3px; overflow:hidden; margin:6px 0 2px; }
.bar > i { display:block; height:100%; background:var(--brass); }

.dashaline { display:flex; align-items:baseline; gap:8px; padding:5px 0; border-bottom:1px solid var(--rule-soft); }
.dashaline:last-child { border-bottom:0; }
.dashaline .lv { font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--dim); width:34px; }
.dashaline .nm { font-family:var(--display); font-size:16px; }
.dashaline .rg { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-2); }

/* ---- controls -------------------------------------------------------- */
.controls {
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
  background:var(--panel); border:1px solid var(--rule); border-radius:3px;
  padding:11px 14px; margin-top:16px;
}
.controls .lbl { margin:0 }
.ttrow { display:flex; align-items:center; gap:12px; flex:1 1 100%; min-width:0; flex-wrap:wrap; }
.ttrow input[type=range] { flex:1 1 160px; min-width:0; }
.ttread { font-size:11px; color:var(--dim); white-space:nowrap; flex:0 0 auto; text-align:right; }
#timemachine.away { border-color:var(--sindoor); }
#tt-when { font-size:12px; padding:6px 8px; }
.seg { display:flex; border:1px solid var(--rule); border-radius:2px; overflow:hidden; }
.seg button {
  background:transparent; border:0; color:var(--ink-2); cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; padding:6px 10px;
}
.seg button[aria-pressed="true"] { background:var(--brass); color:#12100A; }
input[type=range] { accent-color:var(--brass); }

/* ---- tabbed sheet ---------------------------------------------------- */
.sheet { margin-top:34px; border-top:1px solid var(--rule); padding-top:22px; }
.tabs { display:flex; flex-wrap:wrap; gap:2px; margin-bottom:18px; }
.tabs button {
  background:transparent; border:1px solid transparent; border-bottom-color:var(--rule);
  color:var(--dim); cursor:pointer; padding:8px 14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
}
.tabs button[aria-selected="true"] {
  color:var(--brass-hi); border-color:var(--rule); border-bottom-color:transparent;
  background:var(--panel);
}
.pane { display:none; }
.pane.on { display:block; }
.pane h3 { font-size:17px; margin-bottom:4px; }
.pane .note { color:var(--dim); font-size:13px; margin:0 0 16px; max-width:78ch; }

.tablewrap { overflow-x:auto; border:1px solid var(--rule); border-radius:3px; background:var(--panel); }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { padding:7px 11px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--rule-soft); }
th {
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); background:var(--panel-2); position:sticky; top:0;
}
td.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--panel-2); }
.retro { color:var(--sindoor); }
.ok { color:var(--jade); }

.chartgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px, 100%), 1fr)); gap:18px; }
.chartgrid figure { margin:0; background:var(--panel); border:1px solid var(--rule); border-radius:3px; padding:12px; }
.chartgrid figcaption {
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); text-align:center; margin-bottom:8px;
}
.chartgrid svg { width:100%; height:auto; display:block; }

.cardgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px, 100%), 1fr)); gap:16px; }
.pending { border-left:2px solid var(--sindoor); padding-left:12px; color:var(--dim); font-size:13px; }

.dashacols { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(215px, 100%), 1fr)); gap:14px; }
.dcol { background:var(--panel); border:1px solid var(--rule); border-radius:3px; padding:11px 13px; }
.dcol h4 {
  font-family:var(--display); font-size:15px; margin:0 0 3px;
  display:flex; justify-content:space-between; align-items:baseline;
}
.dcol h4 em { font-style:normal; font-family:var(--mono); font-size:10px; color:var(--dim); }
.dcol .span { font-family:var(--mono); font-size:10.5px; color:var(--ink-2);
  border-bottom:1px solid var(--rule-soft); padding-bottom:6px; margin-bottom:6px; }
.dcol ol { list-style:none; margin:0; padding:0; }
.dcol li { display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; padding:2px 0; color:var(--ink-2); }
.dcol li.now { color:var(--brass-hi); }
.dcol.now { border-color:var(--brass); box-shadow:var(--glow); }

/* The ring legend. It used to sit directly against whatever came next, with
   six pixels of row gap, so the last line ran into the card below it. It is a
   block of its own now: its own rule above, real breathing room in the rows,
   and a margin under it. */
.legend { display:flex; flex-wrap:wrap; gap:9px 20px; margin:22px 0 28px; padding-top:16px;
  border-top:1px solid var(--rule); font-size:12px; line-height:1.6; color:var(--dim); }
.legend span { display:inline-flex; align-items:baseline; gap:5px; }
.legend b { color:var(--ink-2); font-weight:500; }

footer.colophon {
  margin-top:44px; padding-top:18px; border-top:1px solid var(--rule);
  color:var(--dim); font-size:12.5px;
}
.colo-notes { display:flex; flex-wrap:wrap; gap:8px 24px; }

/* The refusals belong where the reading is, not only on a legal page. */
.colo-warn {
  margin:18px 0 0; max-width:86ch; font-size:12.5px; line-height:1.8; color:var(--dim);
}
.colo-warn b { color:var(--ink-2); font-weight:500; }

.colo-brand {
  margin-top:20px; padding-top:16px; border-top:1px solid var(--rule-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
}
.colo-by { color:var(--dim); }
.colo-by a { color:var(--brass-hi); text-decoration:none; border-bottom:1px solid var(--brass-dim); }
.colo-by a:hover { color:var(--ink); }
.colo-legal { display:flex; flex-wrap:wrap; gap:18px; }
.colo-legal a { color:var(--ink-2); text-decoration:none; }
.colo-legal a:hover { color:var(--brass-hi); }
.colo-copy { color:var(--dim); margin-left:auto; }
@media (max-width:640px) { .colo-copy { margin-left:0; } }

@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }


/* ---- plate ------------------------------------------------------------ */
/* A tap on the plate is an inspection, never a text selection: without
   this, tapping a rashi name highlights it in blue and a slightly long
   press brings up the copy bar instead of the description. */
.dialbox svg { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.dialbox svg .hot { cursor:help; }
/* A marker is a shape the eye reads as solid — a hollow ring, a dashed
   penumbral disc, a strength arc — but SVG hit-tests an unfilled circle on its
   outline only, so the pointer fell through the middle and the card opened
   only on the rim. Inside a marker group, a circle answers across its whole
   disc. Scoped to circles INSIDE a tip group: the bezel is itself a tip circle
   of r484 and must stay a line, or it would swallow the plate. */
.dialbox svg g[data-tip] circle:not([pointer-events="none"]) { pointer-events:visible; }
@media (hover: hover) {
  .dialbox svg .hot:hover { filter:brightness(1.45) saturate(1.15); }
}

#tip {
  position:fixed; z-index:60; display:none; pointer-events:none;
  max-width:430px; background:var(--panel); color:var(--ink);
  border:1px solid var(--brass-dim); border-radius:3px; padding:10px 13px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
}
:root[data-theme="light"] #tip { box-shadow:0 10px 26px rgba(90,72,30,.22); }
#tip b {
  display:block; font-family:var(--display); font-size:15px; font-weight:400;
  color:var(--brass-hi); margin-bottom:5px; letter-spacing:.02em;
}
#tip span {
  display:block; font-family:var(--mono); font-size:11.5px; line-height:1.55;
  color:var(--ink-2);
}
#tip span + span { margin-top:1px; }

.vargasel-wrap { display:flex; align-items:center; gap:8px; }
.vargasel-wrap select { width:auto; min-width:176px; padding:6px 8px; font-size:12px; }

.vargagrid { grid-template-columns:repeat(auto-fit,minmax(min(196px, 100%), 1fr)); }
.vargagrid figcaption { font-size:9px; letter-spacing:.1em; }
.vcap {
  font-family:var(--mono); font-size:9.5px; color:var(--dim);
  text-align:center; margin-top:6px; letter-spacing:.06em;
}

.dcol.sel { outline:1px solid var(--brass-dim); }
.dcol { cursor:pointer; }
.dcol:hover { border-color:var(--brass-dim); }

.prose { max-width:70ch; }
.prose h4 {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin:22px 0 6px;
}
.prose h4:first-child { margin-top:0; }
.prose p { margin:0; font-size:15px; line-height:1.65; color:var(--ink-2); }

.hint {
  font-family:var(--mono); font-size:11px; color:var(--dim);
  letter-spacing:.06em; margin-top:12px;
}

/* on a phone the plate stays legible and scrolls sideways inside its own box */
@media (max-width:820px) {
  .dialbox { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .dialbox svg { min-width:900px; }
  .wrap { padding:0 12px 60px; }
}

/* ---- person bar & entry ------------------------------------------------ */
.personbar {
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
  background:var(--panel); border:1px solid var(--rule); border-left:2px solid var(--brass);
  border-radius:3px; padding:12px 16px; margin-bottom:20px;
}
.personbar[hidden] { display:none; }
.pb-who { flex:1 1 auto; min-width:180px; }
.pb-name { font-family:var(--display); font-size:21px; color:var(--brass-hi); letter-spacing:.03em; }
.pb-meta { font-family:var(--mono); font-size:11.5px; color:var(--dim); letter-spacing:.04em; }
.pb-switch { display:flex; align-items:center; gap:8px; }
.pb-switch select { width:auto; min-width:150px; padding:6px 8px; font-size:12px; }

.intake summary h2 { display:inline; }

/* A second block of fields under the birth ones: where the person is
   watching from. Same grid, but ruled off, because it answers a different
   question and is optional — the birth block above is not. */
.fieldrow {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(168px, 100%), 1fr));
  gap:14px 16px; align-items:end;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--rule-soft);
}
.fieldrow button.ghost { width:100%; }
/* The date said back in words. It is an <output>, not an input: nothing is
   typed here, it only removes the ambiguity from what was. */
.dtread {
  display:block; font-family:var(--mono); font-size:13px; color:var(--ink);
  background:var(--ground-2); border:1px solid var(--rule); border-radius:2px;
  padding:10px 12px; min-height:39px; line-height:1.45;
}
.dtwide { grid-column:span 3; }
@media (max-width:720px) { .dtwide { grid-column:auto; } }
#f-lagnaspread b { color:var(--sindoor); font-weight:600; }
.hererow-note { color:var(--dim); font-size:13px; margin:8px 0 0; max-width:78ch; }
.hererow-note b { color:var(--ink-2); font-weight:600; }

.optrow { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-top:14px; }
.check { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); cursor:pointer; }
.check input { width:auto; margin:0; }
.placehint { font-family:var(--mono); font-size:11.5px; color:var(--dim); }
.placehint.warn { color:var(--sindoor); }
.placehint.ok { color:var(--jade); }

.saved { margin-top:18px; padding-top:14px; border-top:1px solid var(--rule-soft); }
.saved[hidden] { display:none; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chip-person {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--ground-2); border:1px solid var(--rule); border-radius:2px;
  padding:6px 8px 6px 11px; font-size:13px; color:var(--ink);
}
.chip-person button.open {
  background:none; border:0; color:inherit; cursor:pointer; font:inherit; padding:0; text-align:left;
}
.chip-person button.open:hover { color:var(--brass-hi); }
.chip-person .sub { font-family:var(--mono); font-size:10.5px; color:var(--dim); }
.chip-person button.del {
  background:none; border:0; color:var(--dim); cursor:pointer; font-size:15px; line-height:1; padding:0 2px;
}
.chip-person button.del:hover { color:var(--sindoor); }
.chip-person.on { border-color:var(--brass); }

.emptystate {
  background:var(--panel); border:1px dashed var(--rule); border-radius:3px;
  padding:34px 28px; text-align:center;
}
.emptystate[hidden] { display:none; }
.emptystate h2 { font-size:22px; color:var(--brass-hi); margin-bottom:8px; }
.emptystate p { color:var(--dim); font-size:14.5px; max-width:60ch; margin:0 auto; line-height:1.6; }
button.linkish {
  background:none; border:0; padding:0; font:inherit; color:var(--brass);
  text-decoration:underline; cursor:pointer;
}
button.linkish:hover { color:var(--brass-hi); }

/* ---- dial standalone, readouts below ---------------------------------- */
.platearea { display:block; }
.livecards {
  display:grid; grid-template-columns:1fr; gap:14px; margin-top:16px;
}
@media (min-width:820px) { .livecards { grid-template-columns:repeat(3,1fr); } }
.lcard {
  background:var(--panel); border:1px solid var(--rule); border-radius:3px;
  padding:14px 16px 16px;
}
.lcard h3 {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--rule-soft);
}
.lcard .ticker { font-size:30px; }
.dline {
  position:relative; display:flex; align-items:baseline; gap:8px;
  padding:4px 0 7px; border-bottom:1px solid var(--rule-soft);
}
.dline .lv { font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--dim); width:74px; }
.dline .nm { font-family:var(--display); font-size:15px; }
.dline .rg { margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-2); }
.dline > i { position:absolute; left:0; bottom:0; height:2px; display:block; opacity:.75; }

/* ---- the three live cards, drawn -------------------------------------
   Each card leads with one large thing — the clock and the Moon, the running
   maha, the verdict — and everything under it is a bar, a chip or a glyph.
   The type sizes step down hard on purpose: at a glance the eye should get
   the headline, and only on a second pass the five limbs under it. */
.lchead { display:flex; align-items:flex-start; gap:12px; justify-content:space-between; }
.lchtime { min-width:0; }
.lchtime .tsub { line-height:1.5; }
.lchmoon { display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto; cursor:help; }
.lcmoon { display:block; filter:drop-shadow(0 0 4px color-mix(in srgb, var(--brass-hi) 20%, transparent)); }
.lcpaksha { font:600 8.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lcnotlive { font:600 9px/1 var(--mono); letter-spacing:.14em; color:var(--sindoor);
  border:1px solid var(--sindoor); border-radius:2px; padding:4px 6px; margin-top:10px; text-align:center; }

.lclimbs { margin-top:12px; display:flex; flex-direction:column; gap:1px; }
.lclimb {
  display:grid; grid-template-columns:minmax(0,54px) minmax(0,1fr); gap:2px 10px;
  align-items:baseline; padding:5px 0 6px; border-bottom:1px solid var(--rule-soft); cursor:help;
}
.lclimb:last-child { border-bottom:0; }
.lcln { font:600 8.5px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lclv { font-family:var(--display); font-size:14.5px; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.lclv em { font-style:normal; color:var(--brass); font-size:13px; }
.lclbar { grid-column:2; height:3px; border-radius:2px; background:var(--rule-soft); overflow:hidden; margin-top:3px; }
.lclbar.empty { background:none; height:0; margin:0; }
.lclbar i { display:block; height:100%; border-radius:2px; opacity:.85; }

.lcnow { display:flex; gap:8px; margin-top:12px; }
.lcnowb {
  flex:1 1 0; min-width:0; background:var(--panel-2); border:1px solid var(--rule-soft);
  border-radius:3px; padding:7px 9px; font-family:var(--display); font-size:14px; color:var(--ink);
  overflow-wrap:anywhere; cursor:help;
}
.lcnowb i { display:block; font:600 8.5px/1.4 var(--mono); font-style:normal;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }

/* Vimshottari: five spans, each drawn part spent */
.lcvims { display:flex; flex-direction:column; gap:6px; }
.lcvrow { display:grid; grid-template-columns:64px minmax(0,1fr) 34px; gap:8px; align-items:center; cursor:help; }
.lcvlv { font:600 8.5px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.lcvbar {
  position:relative; display:block; height:22px; border-radius:3px; overflow:hidden;
  background:var(--panel-2); border:1px solid var(--rule-soft);
}
.lcvbar i { position:absolute; inset:0 auto 0 0; display:block; opacity:.28; }
.lcvbar b {
  position:relative; display:flex; align-items:center; gap:5px; height:100%;
  padding:0 8px; font-family:var(--display); font-weight:400; font-size:13.5px; color:var(--ink);
  white-space:nowrap;
}
.lcvgl { font-size:12px; }
.lcvpct { font:400 11px/1 var(--mono); color:var(--ink-2); text-align:right; }
.lcvpct em { font-style:normal; font-size:8.5px; color:var(--dim); }

.lcends { display:flex; gap:8px; margin-top:10px; }
.lcends span { flex:1 1 0; min-width:0; font:400 11px/1.3 var(--mono); color:var(--ink-2); }
.lcends i { display:block; font:600 8.5px/1.6 var(--mono); font-style:normal;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }

.lcvakri { margin-top:12px; padding-top:10px; border-top:1px solid var(--rule-soft);
  display:flex; flex-direction:column; gap:6px; }
.lcvktitle { font:600 8.5px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--brass); }
.lcvkrow { display:flex; align-items:center; flex-wrap:wrap; gap:5px; cursor:help; }
.lcvklab { font:600 8.5px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); width:34px; flex:0 0 auto; }
.lcvknone { font:400 11px/1 var(--mono); color:var(--dim); }
.lcgraha {
  display:inline-flex; align-items:center; justify-content:center; min-height:20px;
  gap:4px; padding:0 9px; border-radius:999px; line-height:1;
  background:color-mix(in srgb, var(--gc) 14%, transparent); border:1px solid color-mix(in srgb, var(--gc) 40%, transparent);
  font-size:11.5px; color:var(--ink);
}
.lcgraha i { font-style:normal; font-size:11px; color:var(--gc); }

/* Pragati: verdict, needle, then one meter per scale of time */
.pgverdict { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pgscore { font:400 12.5px/1 var(--mono); border:1px solid; border-radius:999px; padding:5px 9px; flex:0 0 auto; }
.pggloss { margin-top:4px; line-height:1.5; letter-spacing:.02em; font-family:inherit; font-size:12.5px; color:var(--ink-2); }
.pgscales { margin-top:12px; display:flex; flex-direction:column; gap:1px; }
/* the label column was 56px and "MINUTE" with its count chip measures 61 */
.pgsrow { display:grid; grid-template-columns:minmax(0,64px) minmax(0,1fr) 54px; gap:9px; align-items:center;
  padding:6px 0 7px; border-bottom:1px solid var(--rule-soft); cursor:help; }
.pgsrow:last-child { border-bottom:0; }
.pgsname { font:600 8.5px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); min-width:0; display:flex; align-items:center; gap:5px; }
.pgsname em { display:inline-flex; align-items:center; justify-content:center; min-height:16px;
  font:400 8.5px/1 var(--mono); font-style:normal; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:999px; padding:0 6px; letter-spacing:0; }
.pgsbar { position:relative; height:6px; border-radius:3px; background:var(--panel-2); }
.pgsbar::after { content:''; position:absolute; left:50%; top:-2px; width:1px; height:10px; background:var(--rule); }
.pgsbar i { position:absolute; top:0; height:100%; border-radius:3px; }
.pgsn { font:600 9px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; text-align:right; }

.lcard.pragati { border-left:2px solid var(--rule); }
.lcard.pragati.strong { border-left-color:var(--jade); }
.lcard.pragati.mixed { border-left-color:var(--brass); }
.lcard.pragati.testing { border-left-color:var(--sindoor); }
.lcard .verdict {
  font-family:var(--display); font-size:27px; letter-spacing:.1em; line-height:1.1;
}
.gauge {
  position:relative; height:6px; border-radius:3px; margin:10px 0 4px;
  background:linear-gradient(90deg, var(--sindoor), var(--brass), var(--jade)); opacity:.35;
}
.gauge > i {
  position:absolute; top:-3px; width:3px; height:12px; border-radius:1px;
  transform:translateX(-50%);
}
.gaugeends {
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--dim);
}

/* pragati's terms, grouped by the scale of time they move on */
.pgscale { font:600 9.5px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--brass-dim, var(--dim));
  margin:12px 0 4px; }
.pgrow { display:grid; grid-template-columns:minmax(0, 1fr) 64px; gap:2px 10px; align-items:center;
  padding:5px 0 6px; border-bottom:1px solid var(--rule-soft); }
.pgname { font-size:12.5px; color:var(--ink); min-width:0; }
.pgname em { font:400 10px/1 var(--mono); font-style:normal; color:var(--dim); }
.pgbar { position:relative; height:6px; border-radius:3px; background:var(--panel-2, var(--rule-soft)); }
.pgbar::after { content:''; position:absolute; left:50%; top:-2px; width:1px; height:10px; background:var(--rule); }
.pgbar i { position:absolute; top:0; height:100%; border-radius:3px; }
.pgnote { grid-column:1 / -1; font-size:11.5px; line-height:1.4; overflow-wrap:anywhere; }
.pgparts { grid-column:1 / -1; display:flex; flex-direction:column; gap:1px; font-size:11px; line-height:1.35; overflow-wrap:anywhere; }

.readoutbox { margin-top:16px; overflow-x:auto; }
.readoutbox svg { width:100%; height:auto; display:block; min-width:900px; }

/* the docked inspector replaces the floating pin */
.inspector {
  background:var(--panel); border:1px solid var(--brass-dim); border-radius:3px;
  padding:14px 16px; margin-top:16px;
}
.inspector[hidden] { display:none; }

/* THE SHEET
   What a tap opens on a phone. The docked panel sits under the dial, which
   on a small screen is somewhere below the fold: tapping something at the
   top of the plate would open a description you cannot see. Fixed to the
   bottom of the viewport it is always exactly where the answer is expected,
   it cannot be scrolled away from its subject, and it has room for a close
   target big enough to hit. Capped at 52vh so the dial stays visible behind
   it, and it scrolls internally when the text is long. */
.inspector.sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  margin:0; border-radius:10px 10px 0 0;
  border:1px solid var(--brass-dim); border-bottom:none;
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  max-height:52vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-shadow:0 -14px 40px rgba(0,0,0,.55);
  animation:sheetup .16s ease-out;
}
:root[data-theme="light"] .inspector.sheet { box-shadow:0 -12px 32px rgba(90,72,30,.26); }
@keyframes sheetup { from { transform:translateY(14px); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .inspector.sheet { animation:none; } }
/* A grab bar, so it reads as something that can be got rid of. */
.inspector.sheet h4::before {
  content:""; position:absolute; left:50%; top:-7px; transform:translateX(-50%);
  width:38px; height:3px; border-radius:2px; background:var(--brass-dim); opacity:.7;
}
.inspector.sheet h4 { position:relative; padding-top:4px; }
.inspector.sheet h4 button {
  min-width:44px; min-height:44px; margin:-10px -10px -10px 0;
  display:inline-flex; align-items:center; justify-content:center;
}
.inspector h4 {
  font-family:var(--display); font-size:18px; font-weight:400; color:var(--brass-hi);
  margin:0 0 8px; display:flex; align-items:baseline; gap:12px;
}
.inspector h4 button {
  margin-left:auto; background:none; border:0; color:var(--dim); cursor:pointer; font-size:17px;
}
.inspector h4 button:hover { color:var(--sindoor); }
.inspector p {
  font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--ink-2); margin:0 0 2px;
}

/* ---- quiet mode: rashi, bhava, grahas, lagna and the hands, nothing else */
#plate.quiet #ring-nak,
#plate.quiet #ring-maha,
#plate.quiet #ring-antar,
#plate.quiet #ring-chakra,
#plate.quiet #lyr-transit,
#plate.quiet #lyr-sav,
#plate.quiet #lyr-chog,
#plate.quiet #lyr-paksha,
#plate.quiet #lyr-dasha-now,
#plate.quiet #lyr-chakra-active,
#plate.quiet #lyr-chakra-gochara { display:none; }

/* ---- phase panel: opened by clicking a patch on the Jeevan band -------- */
.phasehit { cursor: pointer; }
.phasehit:hover { fill: var(--brass-hi); fill-opacity: .10; }

.phasepanel {
  margin: 18px 0 0; padding: 18px 22px 22px;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--panel); box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.phasehead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.phasehead .verdict {
  font: 600 17px/1.2 var(--mono); letter-spacing: .16em;
}
.phasehead .tsub {
  margin-top: 5px; font: 400 12px/1.5 var(--mono); color: var(--dim);
  letter-spacing: .04em;
}
.phasepanel .cardgrid { margin-top: 14px; }
.phasepanel .railcard h3 { letter-spacing: .06em; }
@media (max-width: 720px) {
  .phasepanel { padding: 14px; }
  .phasehead { flex-direction: column; gap: 10px; }
}

/* ---- swara · the nadi cycle ------------------------------------------- */
.swarabox {
  margin: 18px 0 0; padding: 18px 22px 22px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--panel);
}
.swarahead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.swarahead h3 { margin: 0; }
.swarahead .tsub {
  margin-top: 5px; font: 400 11.5px/1.5 var(--mono); color: var(--dim); letter-spacing: .04em;
}
.nadichip {
  display: inline-flex; align-items: baseline; gap: 6px;
  font: 600 12px/1 var(--mono); letter-spacing: .08em; color: var(--nc);
}
.nadichip i { font: 400 10px/1 var(--mono); font-style: normal; color: var(--dim); letter-spacing: .06em; }
.swarabtns { display: flex; gap: 8px; flex-wrap: wrap; }
.swarabtns button {
  flex: 1 1 0; min-width: 84px; padding: 9px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font: 600 12px/1.1 var(--mono); letter-spacing: .08em;
  color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--rule); border-radius: 2px; cursor: pointer;
}
.swarabtns button i { font: 400 9.5px/1 var(--mono); font-style: normal; color: var(--dim); }
.swarabtns button:hover { border-color: var(--brass); background: var(--panel); }
.railcard.wide { grid-column: 1 / -1; }
#f-here[aria-invalid="true"] { border-color: var(--sindoor); }
@media (max-width: 720px) { .swarabox { padding: 14px; } }

/* ---- kaarya · the window list ------------------------------------------ */
#kaarya-sel { min-width: 210px; max-width: 280px; flex: 0 0 auto; }
.kwin {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 6px 8px; margin-bottom: 4px; border-radius: 2px;
  background: var(--panel-2); border-left: 2px solid var(--rule);
}
.kwin.top { border-left-color: var(--jade); background: var(--panel); }
.kwin .kt { font: 600 12.5px/1 var(--mono); letter-spacing: .04em; color: var(--ink);
  white-space: nowrap; min-width: 96px; }
.kwin.top .kt { color: var(--jade); }
.kwin .kd { font: 400 11px/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.kwin .ks { margin-left: auto; font: 400 10.5px/1 var(--mono); color: var(--dim); white-space: nowrap; }
.kwin .kq { font: 400 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.kwin .kq-excellent { color: var(--jade); }
.kwin .kq-good { color: var(--brass); }
.kwin .kq-workable { color: var(--dim); }
.kwin.good { border-left-color: var(--brass); }

/* ---- intake fields: native controls brought into the theme -------------- */
/* color-scheme is what makes Chrome draw its date and time pickers, the
   spinners and the calendar glyph dark instead of a white system panel. */
.fields input, .fields select, #f-here, #kaarya-sel, #ghatana-sel, #vargasel, .controls input {
  color-scheme: dark;
}
.fields input[type="date"], .fields input[type="time"] { font-family: var(--mono); letter-spacing: .04em; }
.fields input[type="date"]::-webkit-calendar-picker-indicator,
.fields input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(28%) saturate(560%) hue-rotate(2deg);
  cursor: pointer; opacity: .75;
}
.fields input[type="date"]::-webkit-calendar-picker-indicator:hover,
.fields input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.fields input[type="number"]::-webkit-outer-spin-button,
.fields input[type="number"]::-webkit-inner-spin-button { opacity: .5; }

/* every <select> in the app gets the same chevron and ground */
select, #f-ayan, #vargasel, #kaarya-sel, #ghatana-sel {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%),
                    linear-gradient(135deg, var(--brass) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
select option { background: var(--panel); color: var(--ink); }

.lbl .auto {
  font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--jade); border: 1px solid var(--jade); border-radius: 2px;
  padding: 0 3px; margin-left: 5px; opacity: .75;
}

/* ---- the themed combobox ------------------------------------------------ */
.combopop {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  margin-top: 3px; max-height: 268px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--brass-dim); border-radius: 3px;
  box-shadow: 0 14px 38px rgba(0,0,0,.55);
}
.comborow {
  padding: 7px 11px; cursor: pointer; border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 2px;
}
.comborow:last-child { border-bottom: 0; }
.comborow .cbmain { font: 500 13px/1.25 var(--body); color: var(--ink); }
.comborow .cbsub { font: 400 10.5px/1.2 var(--mono); color: var(--dim); letter-spacing: .03em; }
.comborow:hover, .comborow.on { background: var(--panel-2); }
.comborow.on .cbmain { color: var(--brass-hi); }
.combopop::-webkit-scrollbar { width: 9px; }
.combopop::-webkit-scrollbar-thumb { background: var(--brass-dim); border-radius: 4px; }
.combopop::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   Chrome — settings left, person right, sections below the dial.
   The dial itself is untouched; everything here is around it.
   ===================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 12px 0 13px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft);
  /* --bg has never existed; the token is --ground. An unknown custom
     property makes the whole gradient invalid, so the sticky topbar has
     been fully transparent and the dial scrolled up through the title. */
  background: linear-gradient(var(--ground) 74%, transparent);
  backdrop-filter: blur(8px);
}
.tb-side { display: flex; align-items: center; min-width: 0; }
.tb-side.end { justify-content: flex-end; }

/* ---- the brand lockup: mark, wordmark, and the build beneath it ---- */
.topbar .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar .logomark {
  width: 30px; height: 30px; flex: 0 0 auto; display: block; color: var(--brass);
}
.topbar .logomark .needle { color: var(--brass-hi); }
.topbar .btext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.topbar .mark {
  font: 400 21px/1 var(--display); letter-spacing: .05em; color: var(--brass-hi);
}
.topbar .mark span { color: var(--dim); }
/* the ephemeris line reads as a caption under the wordmark, not a pill */
.topbar .chip {
  border: 0; padding: 0; border-radius: 0; background: none;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--brass-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- controls -----------------------------------------------------
   One control, three weights. Home and Settings were two identical
   floating boxes with no relationship to each other; they are a single
   segmented group now, divided by a hairline. Person carries brass
   because it is the one action the page is actually for. */
.ctl {
  display: inline-flex; align-items: center; gap: 8px; height: 34px;
  padding: 0 13px; border: 0; background: none; color: var(--ink-2);
  cursor: pointer; text-decoration: none;
  font: 500 11.5px/1 var(--body); letter-spacing: .11em; text-transform: uppercase;
  transition: color .16s, background .16s;
}
.ctl svg { flex: 0 0 auto; opacity: .85; transition: opacity .16s }
.ctl:hover { color: var(--brass-hi); background: rgba(201,162,39,.07); }
.ctl:hover svg { opacity: 1 }
.ctl:focus-visible {
  outline: 1px solid var(--brass); outline-offset: -1px; color: var(--brass-hi);
}
.ctl[aria-expanded="true"] {
  color: var(--brass-hi); background: rgba(201,162,39,.12);
}

.ctlgroup {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--panel); overflow: hidden;
}
.ctlgroup:hover { border-color: var(--rule); }
.ctlgroup .ctl + .ctl { box-shadow: inset 1px 0 0 var(--rule); }

.ctl.primary {
  border: 1px solid var(--brass-dim); border-radius: 3px;
  background: rgba(201,162,39,.10); color: var(--brass-hi);
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.ctl.primary svg { opacity: 1 }
.ctl.primary:hover {
  background: rgba(201,162,39,.2); border-color: var(--brass);
  box-shadow: 0 0 20px rgba(201,162,39,.16);
}
.ctl.primary[aria-expanded="true"] {
  background: rgba(201,162,39,.24); border-color: var(--brass);
}
.ctl .ibl { text-transform: uppercase; }
/* the way to the website (the user, 2026-09-25): the arrow home in a browser tab, a globe in the installed app
   (html.lkc-app, set by the header's own script) */
.ctl-site .i-site, .ctl-site .l-site { display: none; }
.lkc-app .ctl-site .i-back, .lkc-app .ctl-site .l-back { display: none; }
.lkc-app .ctl-site .i-site { display: block; }
.lkc-app .ctl-site .l-site { display: inline; }
@media (prefers-reduced-motion: reduce) { .ctl, .ctl svg { transition: none } }
/* Labels hold until 640px — the same boundary the bar used before. Below it
   the controls go to icons only; every one carries a title and the drawers
   they open are titled too. */
@media (max-width: 640px) {
  .ctl { height: 32px; padding: 0 11px; gap: 0; }
  .ctl .ibl { display: none; }
}

.drawer {
  border: 1px solid var(--brass-dim); border-radius: 3px;
  background: var(--panel); padding: 0 0 4px; margin-bottom: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.drawer[hidden] { display: none; }
.drawerhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid var(--rule);
}
.drawerhead h2 { font: 400 17px/1 var(--display); letter-spacing: .05em; color: var(--brass-hi); margin: 0; }
.drawerfoot { padding: 4px 18px 14px; }
.drawer .controls { margin: 0; border: 0; border-radius: 0; background: transparent; }
.drawer .intake { margin: 0; border: 0; background: transparent; }
.drawer .personbar { margin: 0 18px 4px; }

/* the name, directly under the dial */
.wholine { text-align: center; margin: 22px 0 4px; }
.wholine .pb-name {
  font: 400 30px/1.15 var(--display); letter-spacing: .02em; color: var(--ink); margin: 0;
}
.wholine .pb-meta {
  font: 400 12px/1.5 var(--mono); letter-spacing: .06em; color: var(--dim); margin-top: 5px;
}

/* each readout band gets its own box now, so they can be placed separately */
.bandbox { margin-top: 16px; overflow-x: auto; }
.bandbox { width: 100%; }
.bandbox svg { width: 100%; height: auto; display: block; }

/* the section bar */
/* ---- the seven sections -------------------------------------------------
   These are the top level of the whole app and they were seven words in a row
   with a hairline under one of them — lighter than the numbered pills of the
   sub-navigation inside each panel, so the hierarchy read backwards: the
   smaller thing looked like the bigger one.

   They are plates now, seated in a recessed strip: a hairline mark drawn in
   the same language as the dial, the roman name, and the section's own name
   in Devanagari beneath it. The selected plate is lifted onto the panel
   colour with a brass top edge, and nothing else on the page looks like this
   — which is the whole job of a top-level tab bar. The sub-navs keep their
   numbered pills, so the two levels can never be mistaken for each other. */
.navbar {
  display: flex; gap: 2px; margin: 26px 0 18px; padding: 3px;
  background: var(--ground-2); border: 1px solid var(--rule); border-radius: 5px;
  overflow-x: auto; scrollbar-width: thin;
}
.navbar button {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 9px;
  padding: 9px 12px 8px; border: 1px solid transparent; border-radius: 3px;
  background: transparent; color: var(--dim); cursor: pointer; white-space: nowrap;
  text-align: left; transition: background .14s, color .14s, border-color .14s;
}
.navico {
  flex: 0 0 auto; width: 21px; height: 21px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.25;
  stroke-linecap: round; stroke-linejoin: round; opacity: .85;
}
.navlab {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font: 500 13px/1 var(--body); letter-spacing: .06em;
}
.navlab em {
  font: 400 10.5px/1 var(--deva); font-style: normal; letter-spacing: 0;
  color: var(--dim); opacity: .85;
}
.navbar button:hover { color: var(--ink); background: var(--panel); border-color: var(--rule); }
.navbar button:hover .navlab em { color: var(--ink-2); }
.navbar button:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
/* The selected plate carries its own colour rather than a bright hairline
   along its top edge: a brass-tinted surface, brass-edged all round. A line
   on one boundary is a small signal a reader has to look for; a lit plate is
   the one they see without looking. */
.navbar button[aria-selected="true"] {
  color: var(--brass-hi);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brass) 30%, var(--panel)) 0%,
    color-mix(in srgb, var(--brass) 15%, var(--panel)) 100%);
  border-color: var(--brass-dim);
  box-shadow: 0 1px 10px color-mix(in srgb, var(--brass) 24%, transparent);
}
.navbar button[aria-selected="true"] .navico { opacity: 1; stroke-width: 1.45; }
.navbar button[aria-selected="true"] .navlab em { color: var(--brass-hi); opacity: .8; }
.navsec { display: none; }
.navsec.on { display: block; }
.navsec .sheet { margin-top: 0; }

/* Kaal Yatra sits under the name, always available rather than behind a tab */
.wholine + .controls { margin-top: 14px; }

/* The stage is a grid with its own 24px gap, so the nav bar's bottom margin and
   the panel's top margin were stacking on top of it — about 116px of dead space
   between the tabs and their cards. Let the grid gap do the spacing alone. */
.navbar { margin: 26px 0 0; }
.navsec > .swarabox { margin-top: 0; }
.navsec > .bandbox:first-child { margin-top: 0; }

/* =====================================================================
   Mobile
   ===================================================================== */
/* Grid and flex items default to min-width:auto, so they refuse to shrink
   below their content. That defeated .dialbox's own overflow-x:auto — the
   plate is deliberately 900px wide and scrollable on a phone, but the box
   around it grew to 900 instead of staying at the viewport and scrolling. */
.stage > * { min-width: 0; }
.wrap > * { min-width: 0; }

@media (max-width: 820px) {
  .topbar { padding: 9px 0 10px; gap: 10px; margin-bottom: 12px; }
  .topbar .mark { font-size: 18px; }
  .topbar .logomark { width: 25px; height: 25px; }
  .topbar .chip { display: none; }          /* the ephemeris line moves to Settings */
  .drawerfoot { display: flex; gap: 10px; align-items: center; }

  .wholine .pb-name { font-size: 23px; }
  .wholine .pb-meta { font-size: 11px; }

  .navbar { margin-top: 18px; }
  .navbar button { flex: 0 0 auto; padding: 8px 10px; gap: 7px; }
  .navlab { font-size: 12px; letter-spacing: .04em; }
  .navico { width: 18px; height: 18px; }

  .swarabox { padding: 14px 13px 16px; }
  .drawer .controls { padding: 12px 13px; }
  .fields { grid-template-columns: 1fr 1fr; }
  .row-actions { flex-wrap: wrap; }

  /* the readout bands are wide strips; let them scroll rather than shrink
     to illegibility, the same bargain the plate makes */
  .bandbox { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bandbox svg { min-width: 720px; }
  /* the twelve Kundali tabs scroll rather than stacking five rows deep */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; padding-bottom: 4px; }
  .tabs button { flex: 0 0 auto; white-space: nowrap; }

  /* the plate scrolls in its own box; say so once, quietly */
  .platearea { position: relative; }
  .platearea::after {
    content: 'drag the dial sideways'; position: absolute; right: 4px; bottom: -14px;
    font: 400 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
    color: var(--dim); opacity: .55; pointer-events: none;
  }
}



@media (max-width: 480px) {
  .fields { grid-template-columns: 1fr; }
  /* Six section tabs came to 362px against a 361px phone — one pixel over,
     so Swasthya sat half-cut behind a scrollbar nobody would think to drag.
     Trimming the padding and the gap lets all six sit in view at 360. */
  /* The settings row is a flat wrapping flex list of label, control, label,
     control. On a phone a label wraps to the end of one line while the
     control it names wraps to the next, so every label reads as belonging
     to the group above it — ORIENTATION appeared to label the varga menu.
     One pair per row keeps each label with what it names. Reset is the one
     control without a label of its own, so it is sent to the second column
     explicitly rather than being taken for one.

     Scoped to the drawer: Kaal Yatra shares the .controls class, and a
     max-content first column there sizes to the whole -1yr..+1yr strip,
     which shoved the date field right off the screen. */
  #drawer-settings .controls { display: grid; grid-template-columns: max-content minmax(0, 1fr); }
  #drawer-settings .controls > * { justify-self: start; min-width: 0; }
  #drawer-settings .controls > .ghost { grid-column: 2; }

  /* Below 400px even the trimmed tabs run past the edge, and .navbar hides
     the rest behind a scrollbar. Wrapping shows all six instead; where they
     already fit on one line, wrap changes nothing. */
  /* below 400px the strip wraps, and the Devanagari line is dropped rather
     than let the plates squeeze to nothing */
  .navbar { gap: 1px; flex-wrap: wrap; overflow-x: visible; }
  .navlab em { display: none; }
  .navico { width: 16px; height: 16px; }

  /* Eight jump buttons cannot share one line on a small phone, and .seg
     hides its own overflow — +1 yr was cut off with no way to reach it. */
  #timemachine .seg { flex-wrap: wrap; }
  .navbar button { padding: 8px 7px; gap: 5px; }
  .navlab { font-size: 11.5px; letter-spacing: .03em; }
  .wholine .pb-name { font-size: 20px; }
}

/* a way back to the site from inside the instrument */
/* .homebtn folded into .ctl — it was a near-copy of .iconbtn */

/* ---- demo mode: the dial alone, for embedding on the home page ---------- */
:root[data-demo] body { padding: 0; background: transparent; }
:root[data-demo] .topbar,
:root[data-demo] .wholine,
:root[data-demo] #timemachine,
:root[data-demo] #livecards,
:root[data-demo] .bandbox,
:root[data-demo] #navbar,
:root[data-demo] .navsec,
:root[data-demo] .colophon,
:root[data-demo] .drawer,
:root[data-demo] #emptystate,
:root[data-demo] .phasepanel { display: none !important; }
:root[data-demo] .wrap { padding: 0; max-width: none; }
:root[data-demo] .stage { gap: 0; max-width: none; }
:root[data-demo] .platearea::after { content: none; }
:root[data-demo] .dialbox { overflow: visible; }
:root[data-demo] .dialbox svg { min-width: 0; }

/* ---- reading a score at a glance ---------------------------------------
   Kaarya, Ghatana and Swasthya were columns of number-and-sentence rows:
   every value present, none of it graspable without reading. These give the
   same numbers a shape — the text stays, the bar carries the magnitude. */

/* a signed contribution: zero in the middle, help right, hindrance left */
/* the last column was 34px and a three-figure number with a sign needs 38 */
.vrow { display:grid; grid-template-columns:minmax(0,1fr) 84px minmax(0,42px); gap:10px;
  align-items:center; padding:7px 0; border-top:1px solid var(--rule-soft); }
.vrow:first-of-type { border-top:0; }
.vrow .vlab { font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.vrow .vnum { font-family:var(--mono); font-size:12.5px; text-align:right; }
.vtrack { position:relative; height:8px; background:var(--panel); border:1px solid var(--rule); }
.vtrack::before { content:''; position:absolute; left:50%; top:-2px; bottom:-2px;
  width:1px; background:var(--rule); }
.vfill { position:absolute; top:0; bottom:0; }
.vfill.pos { left:50%; background:var(--jade); }
.vfill.neg { right:50%; background:var(--sindoor); }

/* a 0..max meter with the qualifying bar marked on it */
/* These are used inside .vmeter and also on their own — the dasha chain and
   the scoreboard stack bare tracks. Scoping them to .vmeter meant the bar
   silently vanished wherever the wrapper was not used. */
.vmeter { margin:10px 0 2px; }
.vmtrack { position:relative; height:14px; background:var(--panel);
  border:1px solid var(--rule); overflow:hidden; }
.vmfill { position:absolute; left:0; top:0; bottom:0; }
.vmbar { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--brass-hi); }
.vmlabels { display:flex; justify-content:space-between; gap:10px; margin-top:5px;
  font-family:var(--mono); font-size:10.5px; color:var(--dim); }

/* a day as a strip, with the windows marked on it */
.vstrip { position:relative; height:22px; background:var(--panel);
  border:1px solid var(--rule); margin:8px 0 4px; }
.vseg { position:absolute; top:0; bottom:0; }
.vseg.excellent { background:var(--jade); }
.vseg.good      { background:rgba(78,155,127,.62); }
.vseg.workable  { background:rgba(133,127,110,.5); }
.vnow { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--brass-hi); }
.vscale { display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px; color:var(--dim); }

/* significators and other short facts, as chips rather than sentences */
.vchips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
.vchip { display:inline-flex; align-items:center; gap:6px; padding:4px 9px;
  border:1px solid var(--rule); background:var(--panel);
  font-family:var(--mono); font-size:11px; color:var(--ink-2); }
.vchip b { font-weight:500; color:var(--brass-hi); }
.vchip b.chiplab { font-weight:400; color:var(--dim); }
.vchip .vg { font-size:13px; }

/* The chakra column. It is drawn as a column on purpose: Sahasrara at the
   top of the card, Muladhara at its foot, with a hairline standing behind
   the dots for the sushumna they sit on. The bar for each is its activation,
   and the marker on every bar is the same threshold, so the eye can see the
   climb stop without reading a number. */
.chcol { position:relative; display:flex; flex-direction:column; gap:5px;
         margin:4px 0 2px; padding-left:14px; }
.chcol::before { content:''; position:absolute; left:5px; top:7px; bottom:7px;
                 width:1px; background:var(--rule); }
.chrow { display:grid; align-items:center; gap:9px;
         grid-template-columns:12px minmax(76px,1.05fr) minmax(0,2fr) 30px; }
.chdot { width:9px; height:9px; border-radius:50%; margin-left:-9px;
         box-shadow:0 0 0 2px var(--panel); }
.chname { min-width:0; font-size:12.5px; line-height:1.25; color:var(--ink-2); }
.chname .deva { font-size:11px; color:var(--dim); }
.chname em { display:block; font-style:normal; font-family:var(--mono);
             font-size:9.5px; letter-spacing:.06em; color:var(--dim);
             line-height:1.3; }
.chrow.lit .chname { color:var(--brass-hi); }
.chnum { font-family:var(--mono); font-size:12.5px; text-align:right; }
.chnum em { display:block; font-style:normal; font-size:9px; color:var(--dim); }

/* A key for the day chart. Three colours mean three nadis and the hairline
   means the present moment; without saying so the chart is decorative. */
.chlegend { display:flex; flex-wrap:wrap; gap:5px 14px; margin:9px 0 0;
            font-family:var(--mono); font-size:10px; letter-spacing:.05em;
            color:var(--dim); }
.chlegend span { display:inline-flex; align-items:center; gap:6px; }
.chlegend i { width:10px; height:10px; flex:0 0 auto; border-radius:1px; }
.chlegend i.rule { width:2px; height:13px; background:var(--ink); }
.chlegend .chlegend-h { color:var(--ink-2); }

/* The four model axes, side by side. Swasthya is where every model in
   the app meets, so the controls sit above the reading they govern
   rather than on three other tabs. */
.modelbar { display:flex; flex-wrap:wrap; gap:10px 18px; margin:0 0 12px;
            padding:12px 14px; border:1px solid var(--rule);
            border-radius:3px; background:var(--panel-2); }
.modelbar > div { display:flex; flex-direction:column; gap:5px; min-width:0; }
.mblab { font-family:var(--mono); font-size:10px; letter-spacing:.14em;
         text-transform:uppercase; color:var(--dim); }
.modelbar .seg { flex-wrap:wrap; }
@media (max-width:560px) { .modelbar { gap:10px 12px; } .modelbar > div { flex:1 1 100%; } }

/* The present moment on the day chart. Brass is Sushumna here, so the
   marker is bone instead, and it carries a cap because a hairline alone
   disappears among ninety-six columns. */
.chnow { position:absolute; top:-5px; bottom:-4px; width:2px; background:var(--ink); }
.chnow::after { content:''; position:absolute; left:-2px; top:-4px;
                border:3px solid transparent; border-top-color:var(--ink); }
@media (max-width:430px) {
  .chrow { grid-template-columns:12px minmax(min(62px, 100%), 1fr) minmax(0,1.35fr) 26px; gap:7px; }
  .chname { font-size:11.5px; }
  .chname .deva { display:none; }
  .chname em { font-size:9px; }
}

/* hour-of-day histogram, for the breath log */
.vhist { display:flex; align-items:flex-end; gap:4px; height:66px; margin:8px 0 2px; }
.vhist > div { flex:1; display:flex; flex-direction:column; height:100%; gap:4px; min-width:0; }
.vhist .vhtrk { flex:1; display:flex; align-items:flex-end; min-height:0; }
.vhist i { display:block; width:100%; background:var(--brass-dim); }
.vhist i.hot { background:var(--sindoor); }
.vhist em { font-style:normal; font-family:var(--mono); font-size:9.5px;
  color:var(--dim); text-align:center; }

/* ---- Tantra · sadhana ---------------------------------------------------- */
.sdtabs { flex-wrap:wrap; }
.sdtabs button { white-space:nowrap; }
.sdbar { display:inline-block; vertical-align:middle; width:100%; height:9px; }
.sdsigned { display:inline-block; vertical-align:middle; width:100%; height:9px; }
.sdtable { width:100%; border-collapse:collapse; font-size:12.5px; margin:6px 0; }
.sdtable th { text-align:left; font:400 10.5px/1.4 var(--mono); letter-spacing:.06em; color:var(--dim);
  border-bottom:1px solid var(--rule); padding:4px 6px 4px 0; }
.sdtable td { padding:4px 6px 4px 0; border-bottom:1px solid var(--rule); vertical-align:middle; }
.sdtable td em { font-style:normal; font-family:var(--mono); font-size:11px; color:var(--dim); margin-left:4px; display:inline-block; min-width:34px; }
.sdtable td .sdbar { width:calc(100% - 44px); }
/* a narrow card must shrink its table, never be pushed wider by it */
.sdtable th, .sdtable td { overflow-wrap:anywhere; }
.sdscroll { max-width:100%; overflow-x:auto; }
.sdtable tr.sdon td { background:var(--panel-2); }
.sdgraha td:nth-child(2), .sdgraha td:nth-child(3), .sdgraha td:nth-child(4) { width:22%; white-space:nowrap; }
.sdgraha td .sdbar, .sdgraha td .sdsigned { width:70%; }
.sdrow { display:grid; grid-template-columns:minmax(80px,auto) 1fr 44px; gap:8px; align-items:center;
  font-size:12.5px; padding:3px 0; }
.sdrow em { font-style:normal; font-family:var(--mono); font-size:11.5px; text-align:right; }
.sdline { margin:8px 0 0; font-size:11.5px; }
.sdhint { margin:6px 0 0; font-size:11px; }
.sdstep { border-top:1px solid var(--rule); padding:10px 0; }
.sdstep:first-of-type { border-top:0; }
.sdstephead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sdnum { display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center;
  border:1px solid var(--brass); border-radius:50%; font:600 11px/1 var(--mono); color:var(--brass-hi); }
.sdmin { margin-left:auto; font:500 12px/1 var(--mono); color:var(--brass-hi); }
.sddose { font:500 12.5px/1.5 var(--mono); color:var(--ink); margin:6px 0 0; }
.sdwhy { margin:6px 0 0 18px; padding:0; font-size:12px; color:var(--ink-2); }
.sdwhy li { margin:2px 0; }
.sddetails { margin:8px 0 0; }
.sddetails summary { cursor:pointer; font-size:12.5px; color:var(--ink-2); }
.sdform { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(150px, 100%), 1fr)); gap:8px 12px; margin:8px 0 0; }
.sdform label { display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--dim); }
.sdform input, .sdform select { font:13px/1.3 var(--body); padding:4px 6px; background:var(--panel);
  color:var(--ink); border:1px solid var(--rule); border-radius:2px; min-width:0; }
.sdform label.sdcheck, .sdconds label.sdcheck { flex-direction:row; align-items:center; gap:6px; color:var(--ink-2); font-size:12px; }
/* the measurements card: one labelled box per setting */
.sdfields { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(148px, 100%), 1fr)); gap:10px; }
.sdfield { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid var(--rule); border-radius:4px;
  background:var(--panel); min-width:0; }
.sdflab { font:600 10.5px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brass-hi); }
.sdfield select, .sdfield input, .sdmval input { width:100%; min-width:0; padding:7px 8px; font-size:13.5px; background:var(--ground-2); }
.sdfdoes { font-size:11.5px; line-height:1.45; color:var(--dim); }
.sdmeasures { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap:10px; }
.sdmeasure { display:flex; flex-direction:column; gap:8px; padding:12px 14px; border:1px solid var(--rule); border-left:3px solid var(--brass);
  border-radius:4px; background:var(--panel); min-width:0; }
.sdmeasure.ok { border-left-color:var(--jade); }
.sdmhead { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.sdmstat { font:500 11px/1.3 var(--mono); color:var(--brass); }
.sdmeasure.ok .sdmstat { color:var(--jade); }
.sdmval { display:flex; align-items:center; gap:8px; }
.sdmval input { max-width:120px; font:600 20px/1.2 var(--mono); padding:6px 8px; }
.sdmval em { font:400 12px/1.3 var(--mono); font-style:normal; color:var(--ink-2); }
.sdmbtn { align-self:flex-start; padding:8px 14px; border:1px solid var(--jade); border-radius:3px; background:var(--panel-2);
  color:var(--ink); font:600 12.5px/1 var(--body); cursor:pointer; }
.sdmbtn:hover { background:var(--jade); color:#0B0E15; }
.sdcount { margin-left:6px; color:var(--ink-2); letter-spacing:.02em; text-transform:none; font-weight:400; }
.sdconds { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap:8px; }
.sdcond { position:relative; display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--rule); border-radius:4px;
  background:var(--panel); font-size:13px; line-height:1.35; color:var(--ink-2); cursor:pointer; min-width:0; }
.sdcond:hover { border-color:var(--brass); }
.sdcond input { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.sdcond .sdbox { display:inline-flex; width:18px; height:18px; flex:none; align-items:center; justify-content:center;
  border:1px solid var(--dim); border-radius:3px; font:700 12px/1 var(--mono); color:#0B0E15; }
.sdcond.on { border-color:var(--sindoor); color:var(--ink); background:var(--panel-2); }
.sdcond.on .sdbox { background:var(--sindoor); border-color:var(--sindoor); }
.sdcond input:focus-visible + .sdbox { outline:2px solid var(--brass); outline-offset:2px; }
.sdpick { padding:2px 6px; font-size:12.5px; }
.swarabtns button[disabled] { opacity:.45; cursor:not-allowed; }
.swarabtns button[aria-pressed="true"] { border-color:var(--brass); background:var(--panel-2); }
.sdguide { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(8,9,14,.72); padding:16px; }
.sdguide[hidden] { display:none; }

/* ---- Swara · the minute model as a ring ---------------------------------- */
.swmgrid { display:grid; grid-template-columns:minmax(220px, 360px) minmax(0, 1fr); gap:18px; align-items:start; }
.swmringbox, .swmside { min-width:0; }
.swmring { width:100%; height:auto; display:block; }
.swmkey { display:flex; flex-wrap:wrap; gap:4px 10px; justify-content:center; font:400 10.5px/1.4 var(--mono);
  color:var(--ink-2); margin-top:4px; }
.swmkey i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px; vertical-align:-1px; }
.swmkey .swmdim { color:var(--dim); flex-basis:100%; text-align:center; }
.swmnow { font-size:13px; color:var(--ink); margin-bottom:2px; overflow-wrap:anywhere; }
.swmsub { font:400 10.5px/1.4 var(--mono); letter-spacing:.08em; color:var(--dim); margin:10px 0 4px; text-transform:uppercase; }
.swmg { display:grid; grid-template-columns:76px minmax(0, 1fr) minmax(0, max-content); gap:8px; align-items:center;
  padding:3px 0; font-size:12px; }
.swmg .vtrack, .swmg .vmtrack { width:100%; }
.swml { color:var(--dim); font:400 11px/1.3 var(--mono); }
.swmv { font:500 11.5px/1.3 var(--mono); text-align:right; white-space:nowrap; }
.swmh { margin:12px 0 6px; font:600 11px/1.3 var(--mono); letter-spacing:.1em; color:var(--dim); text-transform:uppercase; }
/* the terms, three groups side by side so the card stays short */
.swmterms { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap:0 24px; align-items:start; }
.swmcol { min-width:0; }
.swmcol .swmh { margin-top:4px; }
.swmnote { margin:0 0 6px; font-size:11.5px; }
.swmterms .vrow { grid-template-columns:minmax(0, 1fr) 72px minmax(0,46px); }
.swmsum { margin:10px 0 4px; padding:8px 10px; border:1px solid var(--rule); border-radius:2px;
  font-size:11.5px; line-height:1.55; color:var(--ink-2); overflow-wrap:anywhere; }
.swmsum > div + div { margin-top:5px; }
.swmsum .swmdim { color:var(--dim); }
/* ---- Swara · three patterns: the standard, yours, your breath -------------- */
.swdot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:0; flex:none; }
.swsub { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font:600 10.5px/1.4 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); margin:14px 0 8px; }
.swsub span { text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-2); }
.swchecks { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap:10px; }
.swcheck { padding:10px 12px; border:1px solid var(--rule); border-left:3px solid var(--rule); border-radius:4px; background:var(--panel); min-width:0; }
.swcheck.on { border-left-color:var(--jade); }
.swcheck.off { border-left-color:var(--sindoor); }
.swcheck.open { border-color:var(--brass-hi); border-left-color:var(--brass-hi); box-shadow:inset 0 0 0 1px var(--brass-hi); }
.swcheck.missed { opacity:.7; }
.swchead { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px; }
.swchead b { font:600 11px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brass-hi); }
.swchead span { font:400 11.5px/1.3 var(--mono); color:var(--ink-2); }
.swcrow { display:flex; align-items:center; gap:2px; font-size:12.5px; color:var(--ink); padding:2px 0; min-width:0; overflow-wrap:anywhere; }
.swcrow em { font-style:normal; font:400 11px/1 var(--mono); color:var(--dim); margin-left:6px; }
.swclab { width:62px; flex:none; font:400 10.5px/1.3 var(--mono); color:var(--dim); }
.swcdim { color:var(--dim); }
.swcstate { margin-top:6px; font:600 11px/1.3 var(--mono); color:var(--ink-2); }
.swcheck.on .swcstate { color:var(--jade); } .swcheck.off .swcstate { color:var(--sindoor); } .swcheck.open .swcstate { color:var(--brass-hi); }
.swopen { margin:0 0 12px; padding:10px 12px; border:1px solid var(--brass-hi); border-radius:4px; background:var(--panel-2); font-size:13px; color:var(--ink); }
.swruns { display:flex; flex-wrap:wrap; gap:6px; }
.swrun { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:50%; border:1px dashed var(--rule);
  font:600 11px/1 var(--mono); color:var(--dim); }
.swrun.on { border:1px solid var(--jade); background:rgba(78,155,127,.18); color:var(--ink); }
.swrun.off { border:1px solid var(--sindoor); background:rgba(192,57,43,.2); color:var(--ink); }
.swtiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap:8px; margin:4px 0 0; }
.swtiles.two { grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.swtiles.four { grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.swtile { display:flex; flex-direction:column; gap:3px; padding:9px 11px; border:1px solid var(--rule); border-radius:4px; background:var(--panel); min-width:0; }
.swtile b { font:600 16px/1.2 var(--mono); color:var(--ink); overflow-wrap:anywhere; }
.swtiles.four .swtile b { font:600 14.5px/1.3 var(--body); }
.swtiles.four .swtile span { font-size:13px; color:var(--ink-2); }
.swtile span { font-size:11.5px; line-height:1.4; color:var(--dim); }
.swsplit { display:flex; height:22px; border-radius:4px; overflow:hidden; background:var(--panel-2); border:1px solid var(--rule); }
.swsplit span { display:flex; align-items:center; justify-content:center; font:600 11px/1 var(--mono); color:#0B0E15; min-width:0; }
.swsplit.empty span { flex:1; color:var(--dim); font-weight:400; }
.swlegend { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:4px 14px; margin:8px 0 0; font-size:12px; color:var(--ink-2); }
.swlegend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.swlegend b { color:var(--ink); font-weight:600; }
.swlevels { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap:12px; }
.swlevel { padding:12px 14px; border:1px solid var(--rule); border-radius:4px; background:var(--panel); font-size:13px; line-height:1.5; color:var(--ink); min-width:0; }
.swlevel p { margin:0 0 8px; }
.swlhead { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin:0 0 8px; }
.swlhead span { display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--brass);
  font:600 11px/1 var(--mono); color:var(--brass-hi); align-self:center; }
.swlhead b { font-size:14px; }
.swlhead em { font-style:normal; font:400 11px/1.3 var(--mono); color:var(--dim); }
.swfix { display:flex; gap:12px; padding:10px 12px; border:1px solid var(--jade); border-radius:4px; background:var(--panel-2); }
.swfixico { font-size:26px; line-height:1; color:var(--jade); flex:none; }
.swfixrow { margin-top:8px; }
.swtimer { display:inline-block; padding:5px 10px; border:1px solid var(--brass-hi); border-radius:3px; font:600 14px/1 var(--mono); color:var(--brass-hi); }
.swtimer.done { border-color:var(--jade); color:var(--jade); }
.swweeks { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; align-items:end; }
.swweek { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; }
.swweek.thin { opacity:.45; }
.swwbar { position:relative; width:26px; height:64px; border-radius:4px; background:var(--panel-2); overflow:hidden; }
.swwbar i { position:absolute; left:0; right:0; bottom:0; background:var(--sindoor); border-radius:4px; }
.swweek b { font:600 12px/1 var(--mono); color:var(--ink); }
.swweek em { font-style:normal; font:400 10px/1.3 var(--mono); color:var(--dim); text-align:center; }
.swstrips { display:flex; flex-direction:column; gap:6px; margin:6px 0 12px; }
.swsrow { display:grid; grid-template-columns:62px minmax(0, 1fr); gap:10px; align-items:center; }
.swsrow > span { font:400 10.5px/1.2 var(--mono); color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.swsrow .vstrip { height:16px; }
.vstrip.swdiff { height:10px; }
.swthree { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap:8px; }
.swthr { display:flex; flex-direction:column; gap:3px; padding:8px 10px; border:1px solid var(--rule); border-radius:4px; font-size:12px; color:var(--ink-2); min-width:0; }
.swthr b { font:600 10.5px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--brass-hi); }
.swthr em { font-style:normal; font:400 11px/1.3 var(--mono); color:var(--jade); }
.swthr.differs { border-color:var(--brass); }
.swthr.differs em { color:var(--brass-hi); }
.swwhy { margin:8px 0 0 18px; padding:0; font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.swwhy li span:first-child { font-family:var(--mono); }
/* the plain cards */
.swbig { display:flex; align-items:center; gap:18px; margin:0 0 12px; }
.swnose { width:110px; height:auto; flex:none; }
.swbigtext { min-width:0; }
.swbigline { font:500 22px/1.25 var(--display, var(--body)); color:var(--ink); }
.swbigline b { font-weight:700; letter-spacing:.02em; }
.swbigsub { margin-top:6px; font-size:14px; line-height:1.5; color:var(--ink-2); }
.swbigname { margin-top:4px; font:400 11px/1.3 var(--mono); color:var(--dim); letter-spacing:.06em; }
.swsteps { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap:8px; }
.swsteps > div { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--rule); border-radius:4px; background:var(--panel);
  font-size:13px; line-height:1.45; color:var(--ink); }
.swsteps b { display:inline-flex; width:22px; height:22px; flex:none; align-items:center; justify-content:center; border-radius:50%;
  border:1px solid var(--brass); font:600 11px/1 var(--mono); color:var(--brass-hi); }
.swverdict { display:flex; align-items:center; gap:12px; margin:12px 0 0; padding:10px 12px; border:1px solid var(--rule); border-radius:4px;
  background:var(--panel-2); font-size:13.5px; line-height:1.5; color:var(--ink); }
.swverdict .swnose { width:54px; }
.swverdict.on { border-color:var(--jade); }
.swverdict.off { border-color:var(--sindoor); }
.swscore { margin:0 0 10px; }
.swagrees { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 6px; }
.swagree { display:inline-flex; align-items:center; padding:4px 9px; border:1px solid var(--rule); border-radius:12px; font-size:12px; line-height:1.3; color:var(--ink-2); }
.swagree.yes { border-color:var(--jade); color:var(--ink); }
.swagree.no { border-color:var(--brass); }
@media (max-width: 640px) {
  .swbig { gap:12px; }
  .swnose { width:72px; }
  .swbigline { font-size:18px; }
  .swsrow { grid-template-columns:minmax(0,48px) minmax(0, 1fr); gap:6px; }
  .swrun { width:30px; height:30px; }
}

/* ---- the plain cards on Kaarya, Ghatana and Swasthya ------------------------ */
.kypick { display:flex; flex-direction:column; gap:4px; min-width:220px; }
.kypick span { font:600 10.5px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brass-hi); }
.kyverdict { display:flex; align-items:center; gap:14px; padding:12px 14px; margin:0 0 12px; border:1px solid var(--rule); border-left-width:4px;
  border-radius:4px; background:var(--panel); }
.kybadge { display:inline-flex; width:40px; height:40px; flex:none; align-items:center; justify-content:center; border-radius:50%;
  font:700 20px/1 var(--body); color:#0B0E15; }
.kybig { font:600 20px/1.25 var(--display, var(--body)); }
.kysub { margin-top:4px; font-size:13.5px; line-height:1.5; color:var(--ink-2); }
.kytiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap:10px; }
.kytile { padding:10px 12px; border:1px solid var(--rule); border-top:3px solid var(--brass-hi); border-radius:4px; background:var(--panel); min-width:0; }
.kytile.up { border-top-color:var(--jade); } .kytile.down { border-top-color:var(--sindoor); }
.kyhead { display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.kyhead b { font-size:14px; color:var(--ink); }
.kyhead span { font:600 11px/1.3 var(--mono); letter-spacing:.04em; }
.kytile p { margin:6px 0 4px; font-size:13px; line-height:1.5; color:var(--ink); }
.kytile em { font-style:normal; font-size:11px; color:var(--dim); }
.kyreasons { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.kyreasons li { display:flex; gap:8px; align-items:baseline; font-size:12.5px; line-height:1.45; color:var(--ink-2); overflow-wrap:anywhere; }
.kyreasons.plainwhy li::before { content:'•'; color:var(--brass-hi); }
.kyv { flex:none; min-width:30px; text-align:center; padding:1px 5px; border-radius:3px; font:600 11px/1.4 var(--mono); color:#0B0E15; }
.kyv.up { background:var(--jade); } .kyv.down { background:var(--sindoor); }
.kylist { display:flex; flex-direction:column; gap:6px; margin:10px 0 0; }
.kyrow { display:grid; grid-template-columns:minmax(110px, auto) minmax(0, 1fr) auto auto; gap:6px 14px; align-items:center; padding:9px 12px;
  border:1px solid var(--rule); border-left:3px solid var(--rule); border-radius:4px; background:var(--panel); font-size:13px; color:var(--ink); }
.kyrow.excellent { border-left-color:var(--jade); } .kyrow.good { border-left-color:var(--brass); }
.kyrow.top { box-shadow:inset 0 0 0 1px var(--jade); background:var(--panel-2); }
.kyq { font:600 11px/1.3 var(--mono); letter-spacing:.04em; color:var(--brass-hi); }
.kyrow.excellent .kyq, .kyrow.top .kyq { color:var(--jade); }
.kyt { font:600 13.5px/1.3 var(--mono); }
.kyt em { font-style:normal; font:400 11px/1 var(--mono); color:var(--dim); margin-left:4px; }
.kyd { font-size:12px; color:var(--ink-2); white-space:nowrap; }
.kys { font:400 11.5px/1.3 var(--mono); color:var(--dim); white-space:nowrap; text-align:right; }
.ghplanets { display:flex; flex-wrap:wrap; gap:6px; }
.ghplanet { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--rule); border-radius:14px; font-size:13px; color:var(--ink); }
.shverdict { margin:12px 0 0; padding:10px 12px; border:1px solid var(--rule); border-left-width:4px; border-radius:4px; background:var(--panel-2); }
.shverdict > b { font-size:15px; }
.shverdict p { margin:6px 0; font-size:13px; line-height:1.5; color:var(--ink); }
.shmeter { margin:8px 0; }
.plainfold > summary { font-size:13px; color:var(--ink-2); padding:2px 0; }
@media (max-width: 640px) {
  .kyrow { grid-template-columns:minmax(0, 1fr) auto; }
  .kyrow .kyd { grid-column:1; } .kyrow .kys { grid-column:2; }
  .kybig { font-size:17px; }
}

/* ---- the plain cards on Chakra and Muhurta --------------------------------- */
.chsk { font:400 11px/1 var(--mono); color:var(--dim); }
.chpcol { display:flex; flex-direction:column; gap:8px; }
.chprow { display:grid; grid-template-columns:18px minmax(150px, 1.1fr) minmax(0, 2fr) 92px; gap:10px; align-items:center;
  padding:8px 10px; border:1px solid var(--rule); border-radius:4px; background:var(--panel); }
.chpdot { width:16px; height:16px; border-radius:50%; }
.chpname { min-width:0; font-size:14px; color:var(--ink); line-height:1.3; }
.chpname em { display:block; font-style:normal; font-size:12px; color:var(--dim); }
.chpbar { display:block; min-width:0; }
.chpbar .vmtrack { display:block; position:relative; width:100%; }
.chpbar em { display:block; margin-top:3px; font-style:normal; font-size:11px; color:var(--dim); }
.chpword { display:flex; flex-direction:column; align-items:flex-end; font:600 11.5px/1.2 var(--mono); }
.chpword b { font:600 17px/1.1 var(--mono); color:var(--ink); }
/* inside a Kundali sheet pane the pane's own heading and note sizes must not reach the plain cards */
.pane .cardgrid.swfull .railcard > h3 { font-size:10px; margin-bottom:10px; }
.pane .cardgrid.swfull .note { max-width:none; margin:0; }
.pane .cardgrid.swfull .note.sdline { margin:8px 0 0; font-size:11.5px; }
.mulvl { font-style:normal; font-size:11.5px; color:var(--dim); margin-left:2px; }
.mustrip { height:26px; }
.mustrip .mulane { position:absolute; left:0; right:0; }
.mustrip .mulane:first-child { top:0; height:50%; }
.mustrip .mulane:nth-child(2) { bottom:0; height:50%; }
.mulab { font:600 10px/1.3 var(--mono) !important; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-hi) !important; }
@media (max-width: 640px) {
  .chprow { grid-template-columns:14px minmax(0, 1fr) 70px; }
  .chprow .chpbar { grid-column:1 / -1; }
}

/* ---- the Kundali section in plain words ------------------------------------- */
.tabs button small { display:block; margin-top:3px; font-size:9px; letter-spacing:.06em; text-transform:none; color:var(--dim); opacity:.8; }
.paneintro { margin:0 0 16px; padding:10px 14px; border:1px solid var(--rule); border-left:3px solid var(--brass-hi); border-radius:4px; background:var(--panel); }
.paneintro > b { display:block; font:600 10px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--brass-hi); margin-bottom:4px; }
.paneintro p { margin:0; font-size:13.5px; line-height:1.6; color:var(--ink); max-width:92ch; }
.kpplanets { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:10px; }
.kpplanet { padding:10px 12px; border:1px solid var(--rule); border-radius:4px; background:var(--panel); min-width:0; }
.kphead { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.kpgl { font-size:18px; line-height:1; }
.kphead b { font-size:15px; color:var(--ink); }
.kpcond { margin-left:auto; font:600 11px/1.3 var(--mono); }
.kpwhere { margin-top:6px; font-size:13px; color:var(--ink); }
.kpwhat { margin-top:3px; font-size:12px; line-height:1.45; color:var(--dim); }
.kpguide { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap:8px; }
.kpgo { display:flex; flex-direction:column; gap:3px; text-align:left; padding:10px 12px; border:1px solid var(--rule); border-radius:4px;
  background:var(--panel); color:var(--ink); cursor:pointer; font:inherit; }
.kpgo:hover { border-color:var(--brass); }
.kpgo b { font-size:13.5px; color:var(--brass-hi); }
.kpgo span { font-size:12px; color:var(--dim); line-height:1.4; }

/* ---- the plain Tantra tab ---------------------------------------------------- */
.sdsk { font:400 11px/1 var(--mono); color:var(--dim); letter-spacing:.02em; }
.sdlib > summary { font-size:13.5px; padding:4px 0; }
.lpcol { display:flex; flex-direction:column; gap:6px; }
.lprow { display:grid; grid-template-columns:16px minmax(160px, 1.4fr) repeat(3, minmax(min(90px, 100%), 1fr)); gap:10px; align-items:center;
  padding:8px 10px; border:1px solid var(--rule); border-radius:4px; background:var(--panel); }
.lpname { min-width:0; font-size:14px; color:var(--ink); }
.lpname em { display:block; font-style:normal; font-size:12px; color:var(--dim); }
/* these sit in a flex row; without a basis the column collapsed to the width
   of its label and the 15px figure inside it spilled out */
.lpfact { display:flex; flex-direction:column; flex:0 1 auto; min-width:0; font-size:11px; color:var(--dim); }
.lpfact b { font-size:15px; color:var(--ink); font-weight:600; }
.lpgods { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap:8px; }
.lpgod { display:flex; flex-direction:column; gap:3px; padding:9px 11px; border:1px solid var(--rule); border-radius:4px; background:var(--panel); font-size:13px; color:var(--ink); }
.lpgod.live { border-color:var(--brass-hi); box-shadow:inset 0 0 0 1px var(--brass-hi); }
.lpgod span:not(.deva) { font-size:12px; color:var(--ink-2); }
.lpgod em { font-style:normal; font:600 11px/1.3 var(--mono); }
@media (max-width: 640px) {
  /* the name spans every column here, so the three facts fell onto the next
     row starting at column 1 — the 14px dot gutter — and each was squeezed to
     fourteen pixels. They get the name's own column instead, one to a line. */
  .lprow { grid-template-columns:14px minmax(0, 1fr); gap:6px 8px; }
  .lprow .lpname { grid-column:2 / -1; }
  .lprow .lpfact { grid-column:2 / -1; flex-direction:row; align-items:baseline; gap:5px; }
  .lprow .lpfact b { font-size:13px; }
}

/* why your rhythm differs */
.lwrow { margin:0 0 8px; padding:10px 12px; border:1px solid var(--rule); border-left:4px solid var(--rule); border-radius:4px; background:var(--panel); }
.lwhead { display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.lwhead b { font-size:14px; color:var(--ink); }
.lwhead span { font:600 11.5px/1.3 var(--mono); color:var(--ink-2); }
.lwrow p { margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--ink); }
.lwcauses { margin:10px 0 0; padding:10px 12px; border:1px dashed var(--rule); border-radius:4px; }
.lwcauses > b { font-size:13.5px; color:var(--ink); }
.lwnow { margin:0 0 12px; padding:12px 14px; border:2px solid var(--rule); border-radius:5px; background:var(--panel-2); }
.lwnowhead { font-size:13.5px; line-height:1.5; color:var(--ink); }
.lwnow p { margin:8px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink); }
.lwbadge { display:inline-block; margin-right:6px; padding:1px 7px; border-radius:3px; font:700 10px/1.6 var(--mono); letter-spacing:.1em; color:#0B0E15; vertical-align:1px; }
.lwspec { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0 0; }
.lwspec span { font:600 10.5px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brass-hi); margin-right:4px; }
.lwspec em { font-style:normal; padding:4px 10px; border:1px solid var(--rule); border-radius:14px; font-size:13px; color:var(--ink); background:var(--panel); }
.lwrow.now { box-shadow:inset 0 0 0 1px var(--brass-hi); background:var(--panel-2); }
.lwrow.dim { opacity:.62; }
.kyrow.grpast { opacity:.5; }

/* the Swara panel: one card to a row, each the full width */
.cardgrid.swfull { grid-template-columns:minmax(0, 1fr); }

/* ---- Tantra · the tap-through breath check ------------------------------- */
.sdwizard { margin:6px 0 0; }
.sdprog { height:4px; background:var(--panel); border:1px solid var(--rule); border-radius:2px; overflow:hidden; margin:0 0 10px; }
.sdprog span { display:block; height:100%; background:var(--jade); transition:width .2s; }
.sdq { padding:10px 0; border-top:1px solid var(--rule); }
.sdq:first-of-type { border-top:0; }
.sdqhead { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); }
.sdqn { display:inline-flex; width:22px; height:22px; flex:none; align-items:center; justify-content:center; border-radius:50%;
  border:1px solid var(--brass); font:600 11px/1 var(--mono); color:var(--brass-hi); }
.sdq.done .sdqn { background:var(--jade); border-color:var(--jade); color:#0B0E15; }
.sdqhint { margin:4px 0 8px 30px; font-size:12px; }
.sdtiles { display:flex; flex-wrap:wrap; gap:8px; margin-left:30px; }
.sdtile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:84px; padding:8px 10px;
  background:var(--panel); border:1px solid var(--rule); border-radius:4px; color:var(--ink-2); cursor:pointer;
  font:500 12px/1.2 var(--body); }
.sdtile:hover { border-color:var(--brass); color:var(--ink); }
.sdtile.on { border-color:var(--jade); background:var(--panel-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--jade); }
.sdico { width:30px; height:30px; display:block; }
.sdsummary { margin:10px 0 0; padding:8px 10px; border:1px dashed var(--rule); border-radius:3px; font-size:12.5px; color:var(--ink-2); }
.sdsaved { margin:0 0 12px; padding:10px 12px; border:1px solid var(--jade); border-radius:3px; color:var(--ink);
  background:var(--panel-2); font-size:13px; }
.sdsaved.warn { border-color:var(--brass); }
.sdlead { font-size:13.5px; line-height:1.55; color:var(--ink); margin:0 0 10px; }
.sdsub { font:600 10.5px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin:14px 0 8px; }
.sdsave { border-color:var(--jade) !important; }
.sdstrip { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 12px; font-size:12px; color:var(--dim); }
.sdstrip span { display:inline-flex; align-items:center; gap:6px; }
.sdstrip i { display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; border-radius:50%;
  border:1px solid var(--rule); font:600 10px/1 var(--mono); font-style:normal; }
.sdstrip span.on { color:var(--ink); font-weight:600; }
.sdstrip span.on i { border-color:var(--brass-hi); color:var(--brass-hi); }
.sdstrip span.done i { background:var(--jade); border-color:var(--jade); color:#0B0E15; }
.sdstrip b { color:var(--rule); font-weight:400; }
.sdbeforeafter { display:grid; grid-template-columns:52px minmax(0, 1fr) 44px; gap:6px 10px; align-items:center; margin:6px 0 10px; font-size:12.5px; color:var(--dim); }
.sdbeforeafter b { font-family:var(--mono); color:var(--ink); text-align:right; }

/* step cards */
.sdkcard { border:1px solid var(--rule); border-radius:4px; padding:12px 14px; margin:10px 0; background:var(--panel); }
.sdkhead { display:flex; align-items:center; gap:10px; }
.sdkico { display:inline-flex; width:40px; height:40px; flex:none; align-items:center; justify-content:center; border-radius:50%;
  background:var(--panel-2); color:var(--brass-hi); }
.sdkico.k-pranayama { color:var(--jade); } .sdkico.k-asana { color:#8E6FB0; } .sdkico.k-bandha { color:#CC6A2B; }
.sdkico.k-dharana { color:#D4A017; } .sdkico.k-dhyana { color:#3E8CB0; } .sdkico.k-japa { color:#C0392B; }
/* a practice name is one long unbreakable run of mono with letter-spacing on
   it; at 320px there is nowhere for it to break and it ran out of its row */
.sdkhead { flex-wrap:wrap; }
.sdkname { flex:1 1 140px; min-width:0; font-size:14.5px; color:var(--ink); overflow-wrap:anywhere; }
.sdkkind { overflow-wrap:anywhere; }
.sdkkind { font:400 11px/1.4 var(--mono); color:var(--dim); letter-spacing:.04em; }
.sdplay { flex:none; padding:7px 12px; border:1px solid var(--jade); border-radius:3px; background:var(--panel-2); color:var(--ink);
  font:600 12px/1 var(--body); cursor:pointer; }
.sdplay:hover { background:var(--jade); color:#0B0E15; }
.sdkdoes { margin:10px 0 6px; font-size:13.5px; line-height:1.5; color:var(--ink); }
.sdklab { display:block; font:600 10.5px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brass-hi); margin:6px 0 2px; }
.sdkwhy ul { margin:2px 0 0 18px; padding:0; font-size:13px; line-height:1.5; color:var(--ink-2); }
.sdkfacts { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.sdfact { display:flex; flex-direction:column; gap:2px; padding:6px 10px; border:1px solid var(--rule); border-radius:3px; font-size:12.5px; color:var(--ink); }
.sdfact b { font:600 10px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.sdkcare { margin:8px 0 0; font-size:12px; color:var(--brass); }

/* the day ring */
.sdringgrid { display:grid; grid-template-columns:minmax(240px, 400px) minmax(0, 1fr); gap:18px; align-items:center; }
.sdring { width:100%; height:auto; display:block; }
.sdlegs { display:flex; flex-direction:column; gap:6px; }
.sdleg { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); }
.sdleg i { width:12px; height:12px; border-radius:2px; flex:none; }
.sdleg b { font-family:var(--mono); color:var(--ink); }

/* your state */
.sdstate { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:18px; align-items:center; }
.sdbal { display:flex; align-items:center; gap:12px; }
.sdbal b { font-size:15px; color:var(--ink); }
.sddonut { width:90px; height:90px; flex:none; }
.sdmeters { display:flex; flex-direction:column; gap:10px; }
.sdmeter { display:grid; grid-template-columns:62px minmax(0, 1fr) 62px; gap:8px; align-items:center; font-size:12px; color:var(--dim); }
.sdmeter span:last-child { text-align:right; }
.sdmtrack { position:relative; height:8px; border-radius:4px; background:linear-gradient(90deg, var(--soma), var(--rule) 50%, var(--sindoor)); opacity:.9; }
.sdmtrack i { position:absolute; top:-4px; width:4px; height:16px; margin-left:-2px; border-radius:2px; box-shadow:0 0 0 2px var(--panel); }
.sdels { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
.sdel { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; border:1px solid var(--rule); border-radius:4px; text-align:center; font-size:12px; }
.sdel.low { border-color:var(--brass); }
.sdel b { color:var(--ink); font-size:12.5px; }
.sdel span { color:var(--dim); font-size:11px; }
.sdel em { font-style:normal; font:600 9.5px/1.2 var(--mono); color:var(--brass-hi); text-transform:uppercase; }
.sdelbar { position:relative; width:10px; height:44px; border-radius:5px; background:var(--panel-2); overflow:hidden; }
.sdelbar i { position:absolute; left:0; right:0; bottom:0; border-radius:5px; }
.sdtwo { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:18px; }
.sdchs { display:flex; flex-direction:column; gap:5px; }
.sdch { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); }
.sdch i { width:14px; height:14px; border-radius:50%; flex:none; }
.sdch.need span { color:var(--ink); font-weight:600; }
.sdch em { font-style:normal; font:600 9.5px/1.2 var(--mono); color:var(--brass-hi); text-transform:uppercase; }
.sdpls { display:flex; flex-wrap:wrap; gap:8px; }
.sdpl { display:flex; flex-direction:column; padding:6px 10px; border:1px solid; border-radius:3px; font-size:13px; }
.sdpl small { color:var(--dim); font-size:11px; }
@media (max-width: 640px) {
  .sdringgrid, .sdstate, .sdtwo { grid-template-columns:1fr; }
  .sdels { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .sdkhead { flex-wrap:wrap; }
}
@media (max-width: 640px) {
  .sdtiles, .sdqhint { margin-left:0; }
  .sdtile { min-width:72px; flex:1 1 72px; }
}
@media (max-width: 640px) {
  .swmgrid { grid-template-columns:1fr; }
  .swmringbox { max-width:290px; margin:0 auto; }
}
.sdguidebox { width:min(460px,100%); background:var(--panel); border:1px solid var(--brass-dim);
  border-radius:4px; padding:20px 22px; text-align:center; }
.sdguidebox h3 { margin:0 0 6px; }
.sdphase { font:600 20px/1.3 var(--mono); letter-spacing:.06em; color:var(--brass-hi); margin:16px 0 4px; min-height:26px; }
.sdsecs { font:600 54px/1.1 var(--mono); color:var(--ink); margin:4px 0 12px; font-variant-numeric:tabular-nums; }
.sdguidebox .sdbar { height:8px; }
.sdguidebox .swarabtns { justify-content:center; }
@media (max-width: 640px) {
  .sdrow { grid-template-columns:minmax(70px,auto) 1fr 38px; }
  .sdgraha th:nth-child(4), .sdgraha td:nth-child(4) { display:none; }
  .sdsecs { font-size:42px; }
}

.kpem { font-style:normal; font-weight:600; color:var(--ink); }
.lwtrio { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:10px 0 0; }
.lwtri { padding:8px 10px; border:1px solid var(--rule); border-radius:4px; background:var(--panel); min-width:0; }
.lwtri > span { display:block; font:600 10.5px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.lwtri > b { display:flex; align-items:center; gap:6px; margin:4px 0 2px; font-size:14px; color:var(--ink); }
.lwtri > em { display:block; font-style:normal; font-size:11.5px; line-height:1.35; color:var(--dim); }
.lwtri.off { border-color:var(--sindoor); }
.lwtri.same { border-color:var(--jade); }
.lwtri.tilt { border-style:dashed; }
.lwtri.none > b { color:var(--dim); }
.swbigideal { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12.5px; color:var(--ink-2); }
@media (max-width: 560px) { .lwtrio { grid-template-columns:1fr; } }
.swlogs, .sdrecs { margin:10px 0 0; border:1px solid var(--rule); border-radius:5px; background:var(--panel-2); }
.swlogs > summary, .sdrecs > summary { cursor:pointer; padding:8px 12px; font:600 12.5px/1.4 var(--sans); color:var(--ink); list-style:none; }
.swlogs > summary::-webkit-details-marker, .sdrecs > summary::-webkit-details-marker { display:none; }
.swlogs > summary::before, .sdrecs > summary::before { content:'\25B8'; display:inline-block; margin-right:7px; color:var(--dim); transition:transform .15s; }
.swlogs[open] > summary::before, .sdrecs[open] > summary::before { transform:rotate(90deg); }
.swlogs > summary span, .sdrecs > summary span { color:var(--dim); font-weight:400; }
.swloglist { list-style:none; margin:0; padding:0 12px 4px; }
.swloglist li { display:flex; align-items:center; gap:8px; padding:5px 0; border-top:1px solid var(--rule); font-size:13px; color:var(--ink); }
.swloglist li:first-child { border-top:0; }
.swloglist li > span { flex:1; min-width:0; color:var(--dim); font-size:12px; }
.swloglist.plain li > b { min-width:64px; }
.swlogx { flex:none; width:24px; height:24px; padding:0; border:1px solid var(--rule); border-radius:4px; background:var(--panel);
  color:var(--dim); font:400 15px/1 var(--sans); cursor:pointer; }
.swlogx:hover { border-color:var(--sindoor); color:var(--sindoor); }
.swlogbtns { display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px 0; }
.swlogbtn { padding:6px 12px; border:1px solid var(--rule); border-radius:4px; background:var(--panel); color:var(--ink);
  font:500 12px/1.3 var(--sans); cursor:pointer; }
.swlogbtn:hover { border-color:var(--brass); }
.swlogbtn.danger:hover { border-color:var(--sindoor); color:var(--sindoor); }
.swlogbtn.armed { border-color:var(--sindoor); background:var(--sindoor); color:#0B0E15; font-weight:700; }
.swlogs .note, .sdrecs .note { padding:0 12px 10px; }
.sdtable td .swlogx { width:22px; height:22px; font-size:13px; }
.lwlevels { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(168px, 100%), 1fr)); gap:10px; margin:12px 0 0; }
.lwlev { border:1px solid var(--rule); border-radius:5px; background:var(--panel-2); padding:10px 12px; min-width:0; }
.lwlevhead { font:600 11px/1.3 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--brass-hi); margin-bottom:7px; }
.lwlevhead .deva { font-family:var(--deva); letter-spacing:0; text-transform:none; color:var(--dim); margin-left:5px; }
.lwlev ul { list-style:none; margin:0; padding:0; }
.lwlev li { position:relative; padding:4px 0 4px 12px; font-size:12.5px; line-height:1.5; color:var(--ink); border-top:1px solid var(--rule-soft); }
.lwlev li:first-child { border-top:0; }
.lwlev li::before { content:'·'; position:absolute; left:2px; color:var(--brass); }
.lwbal { margin:8px 0 0; }
.lwbalrow { border-left:3px solid var(--rule); padding:8px 12px; margin:0 0 8px; background:var(--panel-2); border-radius:0 4px 4px 0; }
.lwbalrow.over { border-left-color:var(--sindoor); }
.lwbalrow.under { border-left-color:var(--soma); }
.lwbalrow p { margin:5px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.lwdur { margin:12px 0 0; padding:10px 12px; border:1px solid var(--rule); border-left-width:3px; border-radius:0 4px 4px 0; background:var(--panel-2); }
.lwdur p { margin:6px 0 0; font-size:13px; line-height:1.55; color:var(--ink); }
.lwdur p i { color:var(--ink-2); }
/* the ranked reading: which level is loudest, and the one line the
   reader's own minutes stand behind */
.lwtop {
  margin:12px 0 0; padding:9px 12px; border-left:3px solid var(--brass);
  background:var(--panel-2); border-radius:0 4px 4px 0;
}
.lwtoptag { display:block; font:600 8.5px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.lwtop b { display:block; font-family:var(--display); font-size:15px; line-height:1.3; color:var(--ink); margin:2px 0 3px; }
.lwtop em { font-style:normal; font-size:11px; color:var(--dim); font-family:var(--mono); }
.lwlev.lead { border-color:var(--brass); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass) 22%, transparent); }
.lwleadtag { float:right; font:600 8px/1.5 var(--mono); letter-spacing:.12em; color:var(--brass); }
.lwlevmeter { display:block; height:3px; border-radius:2px; background:var(--rule-soft); margin-top:6px; overflow:hidden; }
.lwlevmeter i { display:block; height:100%; border-radius:2px; opacity:.9; }
.lwlev li.lwown { padding-left:16px; }
.lwlev li.lwown::before { content:none; }
.lwdot { position:absolute; left:2px; top:11px; width:6px; height:6px; border-radius:50%; }
.lwelt {
  display:inline-flex; align-items:center; justify-content:center; min-height:16px;
  font:400 9px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--rule); border-radius:999px; padding:0 6px; margin-left:4px; color:var(--dim);
}
.lwthin { margin-top:10px; font-size:11.5px; line-height:1.5; }
.lwmore summary { font:600 9.5px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); cursor:pointer; padding:6px 0 0; }

@media (max-width: 760px) { .lwlevels { grid-template-columns:1fr; } }
/* --- the Tantra tab's alignment layer --- */
.alscore { display:flex; align-items:center; gap:16px; margin:12px 0 0; }
.alscore > div { flex:1; min-width:0; }
.alscore b { font-size:15px; color:var(--ink); }
.alscore .tag { display:inline-block; margin-top:6px; }
.alparts { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap:10px; margin:14px 0 0; }
.alpart { border:1px solid var(--rule); border-radius:4px; padding:8px 10px; background:var(--panel-2); min-width:0; }
.alpart em { display:block; margin-top:5px; font-style:normal; font-size:11.5px; line-height:1.4; color:var(--dim); }
.alels { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; margin:8px 0 0; }
.alel { border:1px solid var(--rule); border-radius:4px; padding:7px 8px; text-align:center; background:var(--panel); }
.alel.on { border-color:var(--brass); }
.alel b { display:block; font-size:12.5px; color:var(--ink); }
.alel span { font:600 12px/1.4 var(--mono); color:var(--dim); }
.alrow { border-left:3px solid var(--rule); padding:9px 12px; margin:0 0 9px; background:var(--panel-2); border-radius:0 4px 4px 0; }
.alhead { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13.5px; color:var(--ink); }
.alhead span { font-size:11.5px; color:var(--dim); }
.albars, .alchbars { display:grid; grid-template-columns:auto 1fr auto 1fr; align-items:center; gap:5px 8px; margin:7px 0 0; }
.allab { font:600 10px/1.3 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--dim); }
.alstage { border:1px solid var(--rule); border-left-width:3px; border-radius:0 4px 4px 0; padding:10px 12px; margin:0 0 10px; background:var(--panel-2); }
.alstage.now { border-left-color:var(--brass-hi); background:var(--panel); }
.alstage.done { border-left-color:var(--jade); opacity:.75; }
.alstage.later { opacity:.62; }
.alstage p { margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--ink-2); }
.altest { margin-top:8px; padding-top:7px; border-top:1px solid var(--rule); font-size:12.5px; color:var(--ink-2); }
.altest b { color:var(--brass-hi); }
.alspark { display:flex; align-items:flex-end; gap:2px; height:70px; margin:10px 0 4px; padding:0 2px;
  border-bottom:1px solid var(--rule); }
.alspark span { flex:1; min-width:2px; border-radius:1px 1px 0 0; }
.alch { border:1px solid var(--rule); border-radius:4px; padding:9px 12px; margin:0 0 9px; background:var(--panel-2); }
.alch.weak { border-color:var(--sindoor); }
.alchead { display:flex; align-items:baseline; gap:8px; font-size:13.5px; color:var(--ink); }
.alchead .chsk { color:var(--dim); }
.alchead span:last-child { margin-left:auto; }
.alchfoot { display:flex; justify-content:space-between; gap:10px; margin-top:7px; font-size:11.5px; color:var(--dim); }
.alchfoot em { font-style:normal; color:var(--brass); text-align:right; }
@media (max-width: 700px) {
  .alels { grid-template-columns:repeat(2, 1fr); }
  .albars, .alchbars { grid-template-columns:auto 1fr; }
  .alchfoot { flex-direction:column; gap:4px; }
  .alchfoot em { text-align:left; }
}
.alobj { border-color:var(--brass); }
.alobjrow { display:flex; align-items:center; gap:16px; }
.alobjrow > div { flex:1; min-width:0; }
.alobjrow p { margin:4px 0 8px; font-size:13.5px; line-height:1.55; color:var(--ink); }
@media (max-width: 560px) { .alobjrow { flex-direction:column; align-items:flex-start; } }
.algate { margin-top:9px; padding-top:8px; border-top:1px dashed var(--rule); }
.algate em { display:block; margin-top:4px; font-style:normal; font-size:11.5px; line-height:1.45; color:var(--dim); }
.alprac li { padding:6px 0; border-top:1px solid var(--rule-soft); }
.alprac li:first-child { border-top:0; }
.alwhy { margin-top:3px; font-size:11.5px; line-height:1.45; color:var(--dim); }
.vempty { position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; color:var(--dim); letter-spacing:.02em; }
.lwpin { border-left:3px solid var(--rule); padding:9px 12px; margin:0 0 9px; background:var(--panel-2); border-radius:0 4px 4px 0; }
.lwpin p { margin:5px 0 0; font-size:13px; line-height:1.5; color:var(--ink); }
.lwpin .lwhead b { font:600 13px/1.4 var(--mono); }
.lwwhy { margin-top:3px; font-size:11.5px; line-height:1.45; color:var(--dim); }
/* --- the Swara panel's four sections --- */
.swnav { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding:0 0 12px; border-bottom:1px solid var(--rule); }
.swnav button { display:flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid var(--rule); border-radius:14px;
  background:var(--panel); color:var(--ink-2); font:500 12px/1.3 var(--sans); cursor:pointer; }
.swnav button:hover { border-color:var(--brass); color:var(--ink); }
.swnav button b { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%;
  background:var(--brass-dim); color:var(--dial-face-2); font:700 10px/1 var(--mono); }
.swsec { display:flex; align-items:flex-start; gap:12px; margin:22px 0 4px; padding:0 0 8px; border-bottom:1px solid var(--rule); scroll-margin-top:16px; }
.swsec:first-of-type { margin-top:2px; }
.swsec .swsecn { flex:none; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-top:2px;
  border-radius:50%; background:var(--brass); color:var(--dial-face-2); font:700 13px/1 var(--mono); }
.swsec h4 { margin:0; font:600 15.5px/1.3 var(--sans); color:var(--ink); letter-spacing:.01em; }
.swsec p { margin:3px 0 0; font-size:12.5px; line-height:1.5; color:var(--dim); }
@media (max-width: 560px) { .swnav button { font-size:11.5px; padding:5px 9px; } .swsec h4 { font-size:14.5px; } }
.swnav button[aria-pressed="true"] { border-color:var(--brass); background:var(--panel-2); color:var(--ink); font-weight:600; }
.swnav button[aria-pressed="true"] b { background:var(--brass-hi); }
/* --- "What it means": the two gaps, drawn --- */
.lwgaps { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:12px 0 0; }
.lwgap { position:relative; padding:11px 13px; border:1px solid var(--rule); border-radius:5px; background:var(--panel-2); }
.lwgap.on { border-color:var(--brass); background:var(--panel); }
.lwgaptag { font:700 9.5px/1.3 var(--mono); letter-spacing:.12em; color:var(--dim); }
.lwgap.imm .lwgaptag { color:var(--sindoor); }
.lwgap.long .lwgaptag { color:var(--soma); }
.lwgap b { display:block; margin:4px 0 1px; font:600 21px/1.1 var(--mono); color:var(--ink); }
.lwgapt { display:block; font-size:12.5px; line-height:1.4; color:var(--ink-2); }
.lwgap em { display:block; margin-top:4px; font-style:normal; font-size:11.5px; color:var(--dim); }
.lwnowrow { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0 0; padding:10px 12px;
  border:1px solid var(--rule); border-radius:5px; background:var(--panel-2); }
.lwnowrow.off { border-color:var(--brass); }
.lwnowcells { display:flex; flex-wrap:wrap; gap:14px; flex:1; min-width:0; }
.lwnc { display:flex; align-items:center; gap:5px; font-size:13px; color:var(--ink); }
.lwnc em { font-style:normal; font:600 9.5px/1.3 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--dim); }
.lwnc .lwdim { font-style:normal; color:var(--dim); }
.lwnowat { font-size:11.5px; color:var(--dim); }
.lwpair { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin:16px 0 0; }
.lwpair .railcard { margin:0; }
.lwfigs { display:flex; gap:18px; margin:4px 0 10px; }
.lwfigs span { display:flex; flex-direction:column; font-size:11px; color:var(--dim); }
.lwfigs b { font:600 18px/1.1 var(--mono); color:var(--ink); }
.lwstrip { margin:0 0 12px; }
.lwstrip .vstrip { height:14px; }
.lwpin { border-left:3px solid var(--rule); padding:8px 11px; margin:0 0 8px; background:var(--panel-2); border-radius:0 4px 4px 0; }
.lwpinhead { display:flex; justify-content:space-between; gap:8px; font:600 12px/1.4 var(--mono); color:var(--ink); }
.lwpinhead span { font-weight:400; color:var(--dim); }
.lwpinbody { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:5px 0 0; font-size:12.5px; color:var(--ink); }
.lwarrow { font:600 10px/1 var(--mono); color:var(--dim); }
.lwel { margin-left:auto; padding:2px 8px; border:1px solid var(--rule); border-radius:10px; font-size:11px; color:var(--brass-hi); }
.lwchips { display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 0; }
.lwchips em { font-style:normal; padding:3px 9px; border:1px solid var(--rule); border-radius:12px; font-size:11.5px; color:var(--ink-2); background:var(--panel); }
.lwbars { margin:4px 0 12px; }
.lwbar { margin:0 0 9px; }
.lwbar.on .lwbarhead b::after { content:'leading'; margin-left:7px; padding:1px 6px; border:1px solid var(--rule);
  border-radius:9px; font:600 9px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.lwbarhead { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; margin:0 0 4px; }
.lwbarhead span { color:var(--dim); font-family:var(--mono); font-size:11.5px; }
.lwbar em { display:block; margin-top:3px; font-style:normal; font-size:11px; color:var(--dim); }
.lwico { width:14px; height:14px; fill:currentColor; margin-right:6px; vertical-align:-2px; }
.lwlevels { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(168px, 100%), 1fr)); gap:10px; margin:12px 0 0; }
.lwlev { border:1px solid var(--rule); border-radius:5px; background:var(--panel-2); padding:9px 11px; min-width:0; }
.lwlevhead { display:flex; align-items:center; font:600 10.5px/1.3 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--brass-hi); margin-bottom:6px; }
.lwlev ul { list-style:none; margin:0; padding:0; }
.lwlev li { position:relative; padding:4px 0 4px 11px; font-size:12px; line-height:1.45; color:var(--ink); border-top:1px solid var(--rule-soft); }
.lwlev li:first-child { border-top:0; }
.lwlev li::before { content:'·'; position:absolute; left:2px; color:var(--brass); }
.lwmore > summary { margin-top:5px; font-size:11px; color:var(--brass); cursor:pointer; }
.lwmore ul { margin-top:3px; }
@media (max-width: 860px) { .lwpair, .lwgaps { grid-template-columns:1fr; } .lwlevels { grid-template-columns:1fr; } }
/* the one card on the Swara panel that asks the reader to DO something */
.railcard.swaction { background:linear-gradient(180deg, color-mix(in srgb, var(--brass) 12%, var(--panel)) 0%, var(--panel) 68%);
  border-color:var(--brass); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass) 22%, transparent); }
.railcard.swaction > h3 { color:var(--brass-hi); }
.railcard.swaction .swsteps > div { background:var(--panel-2); }
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .railcard.swaction { background:var(--panel-2); border-color:var(--brass); }
}
/* --- the Tantra panes, in the Swara panel's shapes --- */
.alhero { display:flex; align-items:center; gap:16px; margin:12px 0 10px; flex-wrap:wrap; }
/* a 280px floor inside a card that is 235 wide on a 320px phone: the tiles
   ran past the edge of the page and took the card with them */
.alherotiles { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; flex:1 1 min(280px, 100%); min-width:0; }
.sdsubhead { display:flex; align-items:baseline; gap:10px; margin:6px 0 -4px; padding:0 2px; }
.sdsubhead b { font:600 12.5px/1.4 var(--sans); color:var(--brass-hi); letter-spacing:.02em; }
.sdsubhead span { font-size:11.5px; color:var(--dim); }
.alstage { position:relative; margin-left:14px; }
.alstage::before { content:''; position:absolute; left:-14px; top:14px; width:9px; height:9px; border-radius:50%;
  background:var(--rule); box-shadow:0 0 0 3px var(--panel); }
.alstage::after { content:''; position:absolute; left:-10px; top:23px; bottom:-12px; width:1px; background:var(--rule); }
.alstage:last-of-type::after { display:none; }
.alstage.done::before { background:var(--jade); }
.alstage.now::before { background:var(--brass-hi); box-shadow:0 0 0 3px var(--panel), 0 0 0 5px color-mix(in srgb, var(--brass-hi) 30%, transparent); }
@media (max-width: 620px) { .alherotiles { grid-template-columns:1fr; } }
/* --- "Did it work?": the four-step wizard --- */
.sdsteps4 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; list-style:none; margin:12px 0 14px; padding:0; counter-reset:none; }
.sdsteps4 li { position:relative; padding:9px 11px 9px 40px; border:1px solid var(--rule); border-radius:5px;
  background:var(--panel-2); min-width:0; opacity:.55; }
.sdsteps4 li.on { opacity:1; border-color:var(--brass); background:var(--panel); }
.sdsteps4 li.done { opacity:.85; border-color:var(--jade); }
.sdsteps4 li b { display:block; font:600 12.5px/1.3 var(--sans); color:var(--ink); }
.sdsteps4 li em { display:block; margin-top:2px; font-style:normal; font-size:11px; line-height:1.4; color:var(--dim); }
.sdstepn { position:absolute; left:10px; top:10px; display:inline-flex; align-items:center; justify-content:center;
  width:21px; height:21px; border-radius:50%; background:var(--rule); color:var(--ink-2); font:700 11px/1 var(--mono); }
.sdsteps4 li.on .sdstepn { background:var(--brass-hi); color:#0B0E15; }
.sdsteps4 li.done .sdstepn { background:var(--jade); color:#0B0E15; }
.sdstepbox { margin:14px 0 0; padding:12px 13px; border:1px solid var(--rule); border-radius:6px; background:var(--panel-2); }
.sdstephead { position:relative; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; padding-left:30px; margin-bottom:10px; }
.sdstephead .sdstepn { position:absolute; left:0; top:-1px; }
.sdstephead b { font:600 13.5px/1.4 var(--sans); color:var(--ink); }
.sdstephead em { font-style:normal; font-size:11.5px; color:var(--dim); }
.sdmodes { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap:10px; }
.sdmode { display:block; text-align:left; padding:11px 13px; border:1px solid var(--rule); border-radius:6px;
  background:var(--panel); color:var(--ink); cursor:pointer; }
.sdmode:hover { border-color:var(--brass); }
.sdmode[aria-pressed="true"] { border-color:var(--brass-hi); background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--brass-hi); }
.sdmodeico { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; margin-bottom:6px;
  border-radius:50%; background:var(--panel-2); color:var(--brass-hi); }
.sdmode b { display:block; font:600 13.5px/1.35 var(--sans); }
.sdmode em { display:block; margin-top:3px; font-style:normal; font-size:11.5px; line-height:1.45; color:var(--dim); }
.sdnowdo { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap:10px; margin:12px 0 0; }
.sdnowwhat { padding:9px 11px; border:1px solid var(--rule); border-radius:5px; background:var(--panel-2); }
.sdnowwhat b { display:block; margin-top:3px; font-size:13px; line-height:1.4; color:var(--ink); }
button.sdsave { background:var(--brass); border-color:var(--brass); color:#0B0E15; font-weight:600; }
button.sdsave:hover { background:var(--brass-hi); border-color:var(--brass-hi); }
@media (max-width: 720px) { .sdsteps4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.sdmodeline { margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--dim); }
.sdmodeline b { color:var(--ink-2); }
.sdmodeline .linkish { font-size:12.5px; }
.sdhist td { white-space:nowrap; }
.sdhy { color:var(--jade); font-weight:700; }
.sdhn { color:var(--sindoor); font-weight:700; }
.sdhq { color:var(--dim); }
/* --- planet remedies, drawn --- */
.sdgtoks { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(92px, 100%), 1fr)); gap:8px; margin:12px 0 0; }
.sdgtok { display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 6px; border:1px solid var(--rule);
  border-radius:7px; background:var(--panel-2); color:var(--ink); cursor:pointer; }
.sdgtok:hover { border-color:var(--brass); }
.sdgtok.on { border-color:var(--brass-hi); background:var(--panel); box-shadow:inset 0 0 0 1px var(--brass-hi); }
.sdgring { position:relative; display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; }
.sdneed { position:absolute; inset:0; width:40px; height:40px; }
.sdgring i { font-style:normal; font-size:17px; line-height:1; }
.sdgtok b { font:600 11.5px/1.3 var(--sans); }
.sdgtok em { font-style:normal; font-size:10px; line-height:1.3; }
.sdgsum { display:flex; align-items:center; gap:14px; margin:10px 0 12px; }
.sdgbig { font-size:38px; line-height:1; }
.sdgsum b { font:600 15px/1.3 var(--sans); }
.sdgsum p { margin:3px 0 0; font-size:12.5px; color:var(--dim); }
.sdlimbs { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap:10px; }
.sdlimb { padding:10px 12px; border:1px solid var(--rule); border-radius:6px; background:var(--panel-2); min-width:0; }
/* the glyph inside measures about 30, so a 26px circle clipped it on every
   screen — it was only visible once something narrow made it obvious */
.sdlimbico { display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; margin-bottom:6px;
  flex:none; border-radius:50%; background:var(--panel); color:var(--brass-hi); }
.sdlimb b { display:block; font:600 10.5px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.sdlimb > span { display:block; margin-top:3px; font-size:13px; line-height:1.45; color:var(--ink); }
.sdlimb em { display:block; margin-top:3px; font-style:normal; font-size:11.5px; line-height:1.45; color:var(--dim); }

/* ====================================================================
   The Chakra panel's whole-net pages — the column drawn as a column,
   the 114 points on a figure and in a table, the full reading, and the
   before/after of a sitting. The pill nav and the numbered head are the
   Swara panel's own (.swnav/.swsec); everything below is this layer's.
   ==================================================================== */
.chsplit { display:grid; grid-template-columns:minmax(180px, 240px) minmax(0, 1fr); gap:16px; align-items:start; margin:10px 0 14px; }
@media (max-width: 720px) { .chsplit { grid-template-columns:1fr; } }
.chspinewrap, .chbodywrap { border:1px solid var(--rule); border-radius:6px; background:var(--panel-2); padding:6px; }
.chspine, .chbody { display:block; width:100%; height:auto; }
.chsplitside { min-width:0; }
.chsplitside .swtiles { margin:0 0 10px; }

.c14dot { display:inline-block; width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.chcard { border:1px solid var(--rule); border-radius:6px; background:var(--panel); padding:11px 13px; margin:0 0 10px; cursor:pointer; }
.chcard.lit { border-color:var(--brass-hi); background:var(--panel-2); }
.chcardhead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.chcardhead b { font-size:14px; color:var(--ink); }
.chcardhead .deva { font-size:12px; color:var(--dim); }
.chcardhead em { font-style:normal; font:400 11px/1 var(--mono); color:var(--dim); }
.chcardhead .chpct { margin-left:auto; font:600 13px/1 var(--mono); color:var(--brass); }
.chbars { display:grid; grid-template-columns:54px minmax(0,1fr) 54px minmax(0,1fr); gap:7px; align-items:center; margin:9px 0 8px; }
.chfacts { display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 6px; }
.chfacts span { font-size:11.5px; color:var(--ink-2); }
.chfacts .chsk { margin-left:5px; }
.chfacts i { display:block; font:600 9.5px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); font-style:normal; }
.chknot { margin:6px 0 0; font-size:11.5px; color:var(--brass-hi); }
.chletters { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0; }
.chletters span { font-family:var(--deva); font-size:13px; color:var(--ink-2); border:1px solid var(--rule);
  border-radius:3px; padding:1px 5px; background:var(--panel-2); }
.chtable td:last-child { text-align:right; font-family:var(--mono); }
.chtable tr.chwheel { background:var(--panel-2); }

.chgrids { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap:14px; margin-top:12px; }
.chbrow { display:grid; grid-template-columns:74px minmax(0,1fr) 96px; gap:8px; align-items:center; margin:0 0 7px; }
.chbrow span { font-size:11.5px; color:var(--ink-2); }
.chbrow em { font-style:normal; font:400 10.5px/1.3 var(--mono); color:var(--dim); text-align:right; }

.chtop { border:1px solid var(--rule); border-left-width:3px; border-radius:0 5px 5px 0; padding:9px 12px; margin:0 0 9px; background:var(--panel); }
.chtophead { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.chtophead b { font-size:13.5px; }
.chtophead span { font:400 11px/1 var(--mono); color:var(--dim); }
.chtop p { margin:5px 0 6px; font-size:12px; color:var(--ink-2); }
.chlvls { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap:8px; margin:0 0 7px; }
.chlvl { font-size:11.5px; line-height:1.45; color:var(--ink-2); }
.chlvl i { display:block; font:600 9.5px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); font-style:normal; }
.chprac { display:flex; flex-wrap:wrap; gap:6px; }
.chprac em { font-style:normal; font-size:11px; color:var(--brass); border:1px solid var(--rule);
  border-radius:999px; padding:2px 9px; background:var(--panel-2); }

/* ---- did it work ---------------------------------------------------- */
.chverdict { display:flex; flex-direction:column; gap:4px; border:1px solid var(--rule); border-left-width:3px;
  border-radius:0 5px 5px 0; padding:10px 13px; margin:0 0 12px; background:var(--panel-2); }
.chverdict b { font-size:14px; color:var(--ink); }
.chverdict span { font-size:12px; line-height:1.5; color:var(--ink-2); }
.chverdict.good { border-left-color:var(--jade); }
.chverdict.bad { border-left-color:var(--sindoor); }
.chzshift { margin:10px 0 0; }
.chzrow { display:grid; grid-template-columns:minmax(96px, 150px) minmax(0,1fr) 44px 62px; gap:9px; align-items:center; margin:0 0 6px; }
.chzname { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2); }
.chzname i { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.chzbar { position:relative; display:block; height:9px; background:var(--panel-2); border:1px solid var(--rule); border-radius:2px; }
.chzbar::before { content:''; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--rule); }
.chzbar i { position:absolute; top:0; bottom:0; display:block; border-radius:2px; }
.chzrow em { font-style:normal; font:600 11px/1 var(--mono); color:var(--ink-2); text-align:right; }
.chzway { font:400 10px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--dim); text-align:right; }
.chzway.eased { color:var(--jade); }
.chzway.heavier { color:var(--sindoor); }
.chzway.soft { opacity:.5; }
.chodds { font:400 11px/1 var(--mono); color:var(--ink-2); }
.chodds.good { color:var(--jade); }
.chodds.bad { color:var(--sindoor); }
.chodds.dim { color:var(--dim); }
.chsitrow { border:1px solid var(--rule); border-radius:5px; background:var(--panel); padding:9px 11px; margin:0 0 9px; }
.chsitrow.chctl { background:var(--panel-2); border-style:dashed; }
.chsithead { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.chsithead b { font-size:12.5px; }
.chsithead span { font:400 11px/1 var(--mono); color:var(--dim); }
.chsithead em { margin-left:auto; font-style:normal; font:600 11.5px/1 var(--mono); color:var(--dim); }
.chsithead em.good { color:var(--jade); }
.chsithead em.bad { color:var(--sindoor); }
.chsit { display:block; width:100%; max-width:330px; height:auto; margin:6px 0 2px; }
.sdtable tr.dimrow { opacity:.6; }

/* ---- the three patterns, and the two gaps they make ------------------- */
.chpats { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap:10px; margin:12px 0; }
.chpat { border:1px solid var(--rule); border-left-width:3px; border-radius:0 5px 5px 0; padding:9px 12px; background:var(--panel); }
.chpat[data-off] { opacity:.55; border-left-color:var(--rule) !important; }
.chpat b { display:block; font-size:11.5px; color:var(--dim); font-weight:600; letter-spacing:.03em; }
.chpat > span { display:flex; align-items:center; gap:6px; margin:4px 0 3px; font-size:13.5px; color:var(--ink); }
.chpat em { display:block; font-style:normal; font-size:11px; line-height:1.45; color:var(--dim); }
.chgapcard.long { border-top:2px solid var(--brass-hi); }
.chgapcard.now { border-top:2px solid var(--soma); }
.chgapcard.total { border-top:2px solid var(--rule); }
.chgap { border:1px solid var(--rule); border-radius:5px; background:var(--panel); padding:9px 12px; margin:0 0 9px; }
.chgaphead { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.chgaphead b { font-size:13px; }
.chgaphead > span { font-size:11.5px; color:var(--dim); }
.chgaphead em { margin-left:auto; font-style:normal; font:400 11px/1 var(--mono); color:var(--dim); }
.chgaphead .chgapd { flex:0 0 auto; margin-left:0; font:600 12px/1 var(--mono); color:var(--sindoor); }
.chgap .note { margin:5px 0 7px; }

/* ---- what to practise ------------------------------------------------- */
.chkri { border:1px solid var(--rule); border-radius:5px; background:var(--panel); padding:10px 12px; margin:0 0 10px; }
.chkrihead { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:7px; }
.chkrihead b { font-size:13.5px; }
.chkrihead em { margin-left:auto; font-style:normal; font:600 11px/1 var(--mono); color:var(--brass); }
.chcaution { margin:6px 0 0; font-size:11.5px; line-height:1.5; color:var(--sindoor); }
.chkpts { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap:8px; margin-top:8px; }
.chkpts span { font-size:11.5px; color:var(--ink-2); }
.chkpts i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; }
.chkpts em { font-style:normal; font-family:var(--mono); color:var(--brass); }
.chkpts small { color:var(--dim); font-size:10.5px; line-height:1.4; }
ol.chplan { margin:8px 0 10px; }

/* ---- one sitting, before and after ------------------------------------ */
.chsitrow { display:block; }
.chsithead { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:baseline;
  padding-bottom:7px; border-bottom:1px solid var(--rule); }
.chsithead em i { display:block; font-style:normal; font:400 9.5px/1.4 var(--mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); text-align:right; }
.chsitbody { display:grid; grid-template-columns:minmax(220px, 320px) minmax(0, 1fr); gap:14px; align-items:center; margin-top:8px; }
@media (max-width: 700px) { .chsitbody { grid-template-columns:1fr; } }
.chsitchart { min-width:0; }
.chsitfacts { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; margin:0; align-self:center; }
.chsitfacts dt { font:600 9.5px/1.6 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.chsitfacts dd { margin:0; font-size:12px; color:var(--ink-2); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.chsitfacts dd em { font-style:normal; font-family:var(--mono); color:var(--brass); }

/* ---- what an imbalance reads as, at the three levels ------------------ */
.chlevel { margin:14px 0 0; }
.chlevhead { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; border-left:3px solid var(--rule);
  padding-left:9px; margin-bottom:8px; }
.chlevhead b { font-size:13px; color:var(--ink); }
.chlevhead em { font-style:normal; font-size:11px; color:var(--dim); }
.chline { border:1px solid var(--rule); border-radius:5px; background:var(--panel); padding:8px 11px; margin:0 0 7px; }
.chline p { margin:0; font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.chlinefrom { margin-top:5px; font-size:11px; color:var(--dim); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.chlinefrom span { display:inline-flex; align-items:center; gap:4px; }
.chlinefrom i { width:7px; height:7px; border-radius:50%; }
.chlinefrom em { font-style:normal; font-family:var(--mono); color:var(--brass); }
.chcaveat { border-top:1px solid var(--rule); padding-top:9px; margin-top:14px; }

.chpoint { border:1px solid var(--rule); border-left-width:3px; border-radius:0 5px 5px 0; background:var(--panel);
  padding:10px 12px; margin:0 0 10px; }
.chpthead { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.chpthead b { font-size:13.5px; }
.chpthead > span { font-size:11.5px; color:var(--dim); }
.chpthead em { font-style:normal; font:400 11px/1 var(--mono); }
.chpthead .chpt-excess { color:var(--sindoor); }
.chpthead .chpt-want { color:var(--soma); }
.chptband { border:1px solid var(--rule); border-radius:999px; padding:1px 8px; font:400 10px/1.5 var(--mono);
  text-transform:uppercase; letter-spacing:.05em; color:var(--dim); }
.chptband.marked { color:var(--brass-hi); border-color:var(--brass-dim); }
.chptband.heavy { color:var(--sindoor); border-color:var(--sindoor); }
.chpthead .chptn { margin-left:auto; font:600 13px/1 var(--mono); color:var(--brass); }
.chplevs { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap:10px; margin:8px 0; }
.chplev i { display:block; font:600 9.5px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); font-style:normal; }
.chplev ul { margin:2px 0 0; padding-left:15px; }
.chplev li { font-size:11.5px; line-height:1.5; color:var(--ink-2); margin-bottom:3px; }

.chcorrs { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:12px; margin:12px 0 0; }
.chcorr { border:1px solid var(--rule); border-left-width:3px; border-radius:0 5px 5px 0; padding:9px 12px; background:var(--panel); }
.chcorr.good { border-left-color:var(--jade); }
.chcorr.bad { border-left-color:var(--sindoor); }
.chcorr b { font-size:12px; color:var(--ink); }
.chcorr ul { margin:6px 0 0; padding-left:16px; }
.chcorr li { font-size:11.5px; line-height:1.5; color:var(--ink-2); margin-bottom:4px; }
.chcorr .note { margin:6px 0 0; }

/* ---- Jyotish: the pill row over the sheet's own tabs ------------------- */
.jyonav { margin-top:4px; }
.tabs button[hidden] { display:none !important; }
#jyohead { margin:14px 0 14px; }
#jyohead:empty { display:none; }
.sheet .tabs { margin-top:2px; border-bottom:1px solid var(--rule); padding-bottom:0; }
.sheet .tabs button { border-bottom-color:transparent; border-radius:4px 4px 0 0; }
.sheet .tabs button[aria-selected="true"] { border-bottom-color:transparent; box-shadow:inset 0 -2px 0 var(--brass-hi); }

/* ====================================================================
   MILAAN — two charts matched, and a whole group pair by pair.
   ==================================================================== */
.kunnav { margin-top:4px; }
#kunhead { margin:12px 0 14px; }
#kunhead:empty, #jyohead:empty { display:none; }
.mlpickcard { margin-bottom:16px; }
.mlpicks { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.mlpick { display:flex; flex-direction:column; gap:4px; min-width:190px; flex:1 1 190px; }
.mlpick span { font:600 9.5px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.mlpick select { padding:7px 9px; border:1px solid var(--rule); border-radius:4px; background:var(--panel);
  color:var(--ink); font:400 13px/1.3 var(--sans); }
.mlsplit { display:grid; grid-template-columns:minmax(190px, 250px) minmax(0, 1fr); gap:18px; align-items:start; margin:10px 0 4px; }
@media (max-width: 760px) { .mlsplit { grid-template-columns:1fr; } }
.mlwheelwrap, .mlmatwrap { border:1px solid var(--rule); border-radius:6px; background:var(--panel-2); padding:8px; }
.mlwheel, .mlmatrix, .mlrhythm { display:block; width:100%; height:auto; }
.mlsplitside { min-width:0; }

.mlkootas { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap:10px; }
.mlkoota { border:1px solid var(--rule); border-radius:5px; background:var(--panel); padding:10px 12px; }
.mlkoota.full { border-color:var(--jade); }
.mlkoota.zero { border-color:var(--sindoor); }
.mlkhead { display:flex; align-items:baseline; gap:7px; margin-bottom:7px; }
.mlkhead b { font-size:13.5px; }
.mlkhead .deva { font-size:12px; color:var(--dim); }
.mlkhead em { margin-left:auto; font-style:normal; font:600 13px/1 var(--mono); color:var(--brass); }
.mlkvals { display:flex; align-items:center; gap:7px; margin:7px 0 4px; font-size:12px; color:var(--ink-2); }
.mlkvals i { color:var(--dim); font-style:normal; }
.mlksrc { margin-top:6px; }

.mldoshas { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap:14px; margin:10px 0; }
.mldosha { border:1px solid var(--rule); border-left-width:3px; border-left-color:var(--sindoor);
  border-radius:0 5px 5px 0; padding:8px 11px; margin:0 0 8px; background:var(--panel); }
.mldosha.ok { border-left-color:var(--jade); }
.mldosha b { font-size:12.5px; text-transform:capitalize; }
.mldosha b em { font-style:normal; font:400 10.5px/1 var(--mono); color:var(--dim); }
.mldosha p { margin:4px 0 5px; font-size:11.5px; line-height:1.5; color:var(--ink-2); }
.mlmangal, .mlsev { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:14px; margin-top:10px; }
.mlmcol, .mlsevcol { border:1px solid var(--rule); border-radius:5px; padding:9px 12px; background:var(--panel-2); }
.mlmrow { display:grid; grid-template-columns:repeat(3, auto 1fr); gap:4px 8px; align-items:baseline; margin:6px 0; }
.mlmrow span { font:600 9.5px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.mlmrow em { font-style:normal; font:600 12px/1 var(--mono); color:var(--brass); }

.mlparts { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap:12px; margin:12px 0; }
.mlpart { border:1px solid var(--rule); border-radius:5px; background:var(--panel); padding:10px 12px; }
.mlpart.off { opacity:.55; }
.mlphead { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:7px; }
.mlphead b { font-size:13px; }
.mlphead em { margin-left:auto; font-style:normal; font:600 12.5px/1 var(--mono); color:var(--brass); }
.mlpw { margin-top:6px; font:400 10.5px/1.5 var(--mono); color:var(--dim); }
.mlread { margin:12px 0 0; }
.mlline { border-left:3px solid var(--brass-dim); padding:2px 0 2px 11px; margin:0 0 11px; }
.mlline b { font-size:12px; color:var(--ink); margin-right:7px; }
.mlline p { margin:4px 0 0; font-size:13px; line-height:1.6; color:var(--ink-2); max-width:86ch; }
.mlcaveat { border-top:1px solid var(--rule); padding-top:9px; }

.mllegend { display:flex; flex-wrap:wrap; gap:14px; margin:6px 0 0; font-size:11px; color:var(--dim); }
.mllegend span { display:inline-flex; align-items:center; gap:5px; }
.mllegend i { width:10px; height:10px; border-radius:2px; }
.mlzones, .mlels { margin:10px 0 0; }
.mlzone, .mlel { display:grid; grid-template-columns:minmax(90px, 150px) minmax(0, 1fr) 92px; gap:10px; align-items:center; margin:0 0 6px; }
.mlel { grid-template-columns:minmax(70px, 110px) minmax(0, 1fr) 100px; }
.mlzname { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2); }
.mlzname i { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.mlzbars { display:flex; flex-direction:column; gap:3px; }
.mlzone em, .mlel em { font-style:normal; font:400 10.5px/1.3 var(--mono); color:var(--dim); text-align:right; }
.mlzone.shared em { color:var(--sindoor); }
.mlzone.a-covers-b em, .mlzone.b-covers-a em { color:var(--jade); }
.mlel span:first-child { font-size:11.5px; color:var(--ink-2); }
.mlel .vmtrack { margin:2px 0; }

.mlranks { display:flex; flex-direction:column; gap:9px; margin-top:10px; }
.mlrank { display:grid; grid-template-columns:28px minmax(0,1fr) 44px; gap:11px; align-items:center;
  border:1px solid var(--rule); border-radius:5px; padding:9px 12px; background:var(--panel); }
.mlrnum { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%;
  background:var(--panel-2); border:1px solid var(--rule); font:600 11px/1 var(--mono); color:var(--dim); }
.mlrbody b { font-size:13.5px; }
.mlrmeta { font:400 11px/1.4 var(--mono); color:var(--dim); margin:2px 0 6px; }
.mlrfoot { display:flex; flex-wrap:wrap; gap:12px; margin-top:5px; font-size:11px; color:var(--dim); }
.mlrfoot b { color:var(--ink-2); font-weight:600; }
.mlfr { color:var(--brass-hi); }
.mlrank > em { font-style:normal; font:600 15px/1 var(--mono); color:var(--brass); text-align:right; }
.mlshape { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap:16px; margin:10px 0; }

/* ====================================================================
   The Jyotish panes, brought to the Swara panel's idiom.
   The panes' own renderers are untouched: what changes is the chrome
   they render into — the lead note, the section heads, the tables and
   the card grids — so all fourteen read like the rest of the app
   instead of like a printed sheet with a stylesheet over it.
   ==================================================================== */
.sheet .pane { padding-top:2px; }
.sheet .pane > h3 {
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  font:600 16px/1.35 var(--sans); color:var(--ink); letter-spacing:.01em;
  margin:26px 0 5px; padding:0 0 8px; border-bottom:1px solid var(--rule);
}
.sheet .pane > h3:first-child, .sheet .pane > .paneintro + h3 { margin-top:6px; }
.sheet .pane > h3 .deva { font-size:13px; font-weight:400; }
.sheet .pane > .note { margin:0 0 14px; font-size:12.5px; line-height:1.6; }

/* the lead note at the top of a pane: the same shape as .sdlead, but kept
   as a card so it reads as the pane's own introduction */
.sheet .paneintro {
  margin:0 0 18px; padding:12px 15px; border:1px solid var(--rule); border-left-width:3px;
  border-left-color:var(--brass-hi); border-radius:0 6px 6px 0; background:var(--panel);
}
.sheet .paneintro > b {
  display:block; font:600 9.5px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--brass-hi); margin-bottom:5px;
}
.sheet .paneintro p { margin:0; font-size:13px; line-height:1.65; color:var(--ink); max-width:88ch; }

/* tables: framed, scrollable inside their own box, with a readable header
   and a row that lights on hover — the .sdtable behaviour, applied to the
   tables the sheet has always rendered */
.sheet .tablewrap {
  border-radius:6px; background:var(--panel); margin:0 0 16px;
  box-shadow:inset 0 -1px 0 var(--rule);
}
.sheet .tablewrap table { font-size:12.5px; }
.sheet .tablewrap th { font-size:9px; letter-spacing:.12em; padding:9px 11px; z-index:1; }
.sheet .tablewrap tbody tr:hover td, .sheet .tablewrap tr:hover td { background:var(--panel-2); }
.sheet .tablewrap td { padding:8px 11px; }

/* the card grids inside a pane get the railcard framing the rest of the app
   uses, so a pane is a column of cards rather than a wall */
.sheet .pane .cardgrid { gap:12px; margin:0 0 16px; }
.sheet .pane .cardgrid > div:not([class]) {
  border:1px solid var(--rule); border-radius:6px; background:var(--panel); padding:11px 13px;
}
.sheet .pane .kpguide { gap:10px; }

/* ---- Milaan, read at a glance ----------------------------------------- */
.mlhead .mlstripwrap { margin:14px 0 12px; border:1px solid var(--rule); border-radius:6px;
  background:var(--panel-2); padding:8px 10px; }
.mlstrip { display:block; width:100%; height:auto; }

.mlverdict { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center;
  border:1px solid var(--rule); border-left-width:4px; border-radius:0 7px 7px 0; padding:14px 16px;
  background:var(--panel); margin:10px 0 0; }
@media (max-width: 700px) { .mlverdict { grid-template-columns:1fr; gap:10px; } }
.mlverdict.good { border-left-color:var(--jade); }
.mlverdict.warn { border-left-color:var(--brass-hi); }
.mlverdict.bad { border-left-color:var(--sindoor); }
.mlvnum { text-align:center; }
.mlvnum b { display:block; font:700 34px/1 var(--mono); color:var(--brass-hi); }
.mlvnum span { display:block; font:400 10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.mlvsay b { display:block; font:600 17px/1.3 var(--sans); color:var(--ink); }
.mlvsay span { display:block; margin-top:3px; font-size:13px; line-height:1.5; color:var(--ink-2); }
.mlvwho { display:flex; flex-direction:column; gap:6px; }
.mlvwho span { font:400 11.5px/1.4 var(--mono); color:var(--dim); text-align:right; }
.mlvwho i { display:block; font-style:normal; font-weight:600; color:var(--ink-2); font-size:12px; }
@media (max-width: 700px) { .mlvwho span { text-align:left; } }

.mlpips { display:flex; gap:3px; margin:8px 0 9px; }
.mlpips i { width:11px; height:11px; border-radius:50%; border:1px solid var(--rule); background:transparent; }
.mlpips i.on { background:var(--pip, var(--brass-hi)); border-color:var(--pip, var(--brass-hi)); }
.mlpips i.half { background:linear-gradient(90deg, var(--pip, var(--brass-hi)) 50%, transparent 50%);
  border-color:var(--pip, var(--brass-hi)); }

.mlkhead em { margin-left:auto; font-style:normal; font:700 16px/1 var(--mono); color:var(--brass); }
.mlkhead em i { font-style:normal; font-size:11px; color:var(--dim); font-weight:400; }
.mlkvals { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 6px; font-size:12.5px; color:var(--ink); }
.mlkvals b { color:var(--dim); font-weight:400; }
.mlkvals i.deva { font-style:normal; font-size:11px; color:var(--dim); }
.mlkplain { margin:0 0 6px; font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.mlkoota .sddetails summary { font-size:11px; }

.mldhead { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.mldico { font-size:13px; line-height:1; }
.mldosha.grave { border-left-color:var(--sindoor); border-left-width:4px; }
.mldosha.grave .mldico { color:var(--sindoor); }
.mldosha .mldico { color:var(--brass-hi); }
.mldosha.ok .mldico { color:var(--jade); }
.mldhead em { margin-left:auto; font-style:normal; font:400 10.5px/1 var(--mono); color:var(--dim); }
.mlrelief { margin:6px 0 6px; padding-left:16px; }
.mlrelief li { font-size:11.5px; line-height:1.55; color:var(--ink-2); margin-bottom:4px; }
.mlnone { display:flex; align-items:baseline; gap:8px; border:1px solid var(--rule); border-left:3px solid var(--jade);
  border-radius:0 5px 5px 0; padding:10px 13px; background:var(--panel); font-size:13px; line-height:1.55; color:var(--ink-2); }
.mlnone b { color:var(--ink); }

.mlmschools { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.mlmschools span { flex:1 1 76px; border:1px solid var(--rule); border-radius:5px; padding:6px 8px;
  background:var(--panel); font:600 13px/1.2 var(--mono); color:var(--ink-2); }
.mlmschools span.on { border-color:var(--sindoor); }
.mlmschools i { display:block; font-style:normal; font:400 9px/1.4 var(--mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); }
.mlmschools em { display:block; font-style:normal; font:400 9.5px/1.4 var(--mono); color:var(--dim); margin-top:2px; }
.mlmschools span.on em { color:var(--sindoor); }
.mlmcol.ok { border-color:var(--jade); }

/* ====================================================================
   Sthiti — the four live readings, as cards inside the Kundali tab.
   ==================================================================== */
.sthdasha { display:flex; flex-direction:column; gap:6px; margin:12px 0 12px; }
.sthdrow { display:grid; grid-template-columns:76px minmax(84px, 116px) minmax(0,1fr) 38px 92px;
  gap:10px; align-items:center; }
@media (max-width: 720px) { .sthdrow { grid-template-columns:64px 96px minmax(0,1fr) 34px; }
  .sthdend { display:none; } }
.sthdlv { font:600 9px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.sthdlord { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.sthdot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.sthdbar { position:relative; display:block; height:9px; border-radius:2px; background:var(--panel-2);
  border:1px solid var(--rule); overflow:hidden; }
.sthdbar i { position:absolute; left:0; top:0; bottom:0; display:block; opacity:.85; }
.sthdpct { font:600 11.5px/1 var(--mono); color:var(--ink-2); text-align:right; }
.sthdend { font:400 10.5px/1 var(--mono); color:var(--dim); text-align:right; }

.sthfacts { display:flex; flex-wrap:wrap; gap:8px 20px; margin:10px 0 0; }
.sthfacts span { font-size:12.5px; color:var(--ink-2); }
.sthfacts i { display:block; font:600 9px/1.5 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim); font-style:normal; }

.sthverdict { display:flex; flex-direction:column; gap:3px; border:1px solid var(--rule); border-left-width:3px;
  border-radius:0 5px 5px 0; padding:10px 13px; margin:2px 0 12px; background:var(--panel-2); }
.sthverdict b { font-size:15px; color:var(--ink); }
.sthverdict span { font-size:12px; line-height:1.5; color:var(--dim); }
.sthverdict.on, .sthverdict.bad { border-left-color:var(--sindoor); }
.sthverdict.off, .sthverdict.good { border-left-color:var(--jade); }

.sthring { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:3px; margin:10px 0 8px; }
@media (max-width: 720px) { .sthring { grid-template-columns:repeat(6, minmax(0,1fr)); } }
.sthcell { position:relative; min-height:54px; border:1px solid var(--rule); border-radius:4px;
  background:var(--panel); display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:4px 2px 3px; }
.sthnum { font:600 9px/1.3 var(--mono); color:var(--dim); }
.sthglyphs { display:flex; flex-wrap:wrap; justify-content:center; gap:1px; margin-top:3px; min-height:16px; }
.sthglyphs b { font-size:14px; line-height:1; font-weight:400; }
.sthglyphs b sup { font-size:7px; color:var(--sindoor); }
.sthfoot { margin-top:auto; font:400 7.5px/1.3 var(--mono); letter-spacing:.04em; text-transform:uppercase;
  color:var(--dim); text-align:center; }
.sthcell.sade { background:color-mix(in srgb, var(--sindoor) 12%, var(--panel)); border-color:var(--sindoor); }
.sthcell.dhaiya { background:color-mix(in srgb, var(--brass-hi) 10%, var(--panel)); border-color:var(--brass-dim); }
.sthcell.here { box-shadow:inset 0 0 0 2px var(--brass-hi); }
.sthcell.gfav { border-color:var(--jade); background:color-mix(in srgb, var(--jade) 10%, var(--panel)); }
.sthcell.gunf { border-color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 10%, var(--panel)); }
.sthcell.gmix { border-color:var(--brass-dim); background:color-mix(in srgb, var(--brass-hi) 8%, var(--panel)); }
.sthlegend { display:flex; flex-wrap:wrap; gap:6px 16px; margin:2px 0 4px; font-size:11px; color:var(--dim); }
.sthlegend span { display:inline-flex; align-items:center; gap:6px; }
.sthlegend i { width:11px; height:11px; border-radius:3px; border:1px solid var(--rule); }
.sthlegend i.sade { background:color-mix(in srgb, var(--sindoor) 30%, var(--panel)); border-color:var(--sindoor); }
.sthlegend i.dhaiya { background:color-mix(in srgb, var(--brass-hi) 26%, var(--panel)); border-color:var(--brass-dim); }
.sthlegend i.here { box-shadow:inset 0 0 0 2px var(--brass-hi); }
.sthlegend i.gfav { background:color-mix(in srgb, var(--jade) 30%, var(--panel)); border-color:var(--jade); }
.sthlegend i.gunf { background:color-mix(in srgb, var(--sindoor) 30%, var(--panel)); border-color:var(--sindoor); }
.sthlegend i.gmix { background:color-mix(in srgb, var(--brass-hi) 22%, var(--panel)); border-color:var(--brass-dim); }

.sthtaras { display:grid; grid-template-columns:repeat(9, minmax(0,1fr)); gap:3px; margin:4px 0 10px; }
@media (max-width: 620px) { .sthtaras { grid-template-columns:repeat(5, minmax(0,1fr)); } }
.sthtara { border:1px solid var(--rule); border-radius:4px; background:var(--panel); padding:5px 2px;
  text-align:center; opacity:.55; }
.sthtara.good { border-bottom:2px solid var(--jade); }
.sthtara.bad { border-bottom:2px solid var(--sindoor); }
.sthtara.on { opacity:1; background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--brass-hi); }
.sthtnum { display:block; font:600 9px/1.3 var(--mono); color:var(--dim); }
.sthtname { display:block; font-size:10px; line-height:1.35; color:var(--ink-2); margin-top:2px; }

.sthgolist { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.sthgo { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--rule); border-radius:999px;
  padding:3px 11px 3px 8px; font-size:12px; color:var(--ink-2); background:var(--panel); }
.sthgo.good { border-color:var(--jade); }
.sthgo.bad { border-color:var(--sindoor); }
.sthgo i { font-style:normal; font-size:13px; }
.sthgo em { font-style:normal; font:600 10.5px/1 var(--mono); color:var(--dim); }

/* ====================================================================
   KAARYA — how ready you and the hour are, and what to do first.
   ==================================================================== */
.kysplit { display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:center; margin:8px 0 14px; }
@media (max-width: 700px) { .kysplit { grid-template-columns:1fr; } }
.kydialwrap { text-align:center; }
.kydial { display:block; width:150px; height:150px; }
.kyband { margin-top:4px; font:600 12px/1.3 var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.kysplitside { min-width:0; }
.kysplitside .swtiles { margin:10px 0 0; }

.kyparts { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap:12px; margin:14px 0 0; }
.kypart { border:1px solid var(--rule); border-radius:6px; background:var(--panel); padding:10px 12px; }
.kypart.off { opacity:.55; }
.kyphead { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:7px; }
.kyphead b { font-size:13px; }
.kyphead em { margin-left:auto; font-style:normal; font:600 13px/1 var(--mono); color:var(--brass); }
.kypw { margin-top:6px; font:400 10.5px/1.4 var(--mono); color:var(--dim); }
.kycaveat { border-top:1px solid var(--rule); padding-top:10px; margin-top:14px; }

ol.kyprep { counter-reset:kyp; list-style:none; margin:12px 0 0; padding:0; }
ol.kyprep li { counter-increment:kyp; position:relative; border:1px solid var(--rule); border-radius:6px;
  background:var(--panel); padding:10px 13px 10px 44px; margin:0 0 9px; }
ol.kyprep li::before { content:counter(kyp); position:absolute; left:12px; top:11px; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--brass-dim);
  color:var(--dial-face-2); font:700 11px/1 var(--mono); }
.kyphd { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.kyphd b { font-size:13.5px; }
.kyphd em { font-style:normal; font:600 10.5px/1 var(--mono); color:var(--brass); }
ol.kyprep p { margin:5px 0 6px; font-size:12.5px; line-height:1.6; color:var(--ink-2); max-width:84ch; }

.kystripwrap { border:1px solid var(--rule); border-radius:6px; background:var(--panel-2); padding:8px 10px; margin:10px 0 8px; }
.kystrip { display:block; width:100%; height:auto; }
.kylegend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11px; color:var(--dim); }
.kylegend span { display:inline-flex; align-items:center; gap:6px; }
.kylegend i { width:11px; height:11px; border-radius:3px; }

.kywins { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap:10px; margin-top:10px; }
.kywin { border:1px solid var(--rule); border-radius:6px; background:var(--panel); padding:10px 12px; }
.kywin.excellent { border-color:var(--jade); }
.kywin.good { border-color:var(--brass-dim); }
.kywhead { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:7px; }
.kywhead b { font:600 14px/1 var(--mono); }
.kywhead span { font-size:11px; color:var(--dim); }
.kywhead em { margin-left:auto; font-style:normal; font:700 17px/1 var(--mono); }

.kygroup { margin:14px 0 0; }
.kyacts { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(186px, 100%), 1fr)); gap:7px; margin-top:8px; }
.kyact { display:flex; align-items:center; gap:8px; text-align:left; border:1px solid var(--rule); border-radius:6px;
  background:var(--panel); padding:8px 10px; cursor:pointer; color:var(--ink-2); font:400 12.5px/1.35 var(--sans); }
.kyact:hover { border-color:var(--brass); color:var(--ink); }
.kyact.on { border-color:var(--brass-hi); background:var(--panel-2); color:var(--ink); font-weight:600; }
/* an act's name can be one long word ("Competition,"); without this it ran
   out of its card wherever the grid put two of them side by side */
.kyact b { font-weight:inherit; flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.kynadi { flex:0 0 auto; font:600 8.5px/1.5 var(--mono); letter-spacing:.07em; text-transform:uppercase;
  padding:1px 6px; border-radius:999px; border:1px solid var(--rule); color:var(--dim); }
.kynadi.ida { color:var(--soma); border-color:var(--soma); }
.kynadi.pingala { color:var(--sindoor); border-color:var(--sindoor); }
.kynadi.sushumna { color:var(--brass-hi); border-color:var(--brass-hi); }

.kywhy { border:1px solid var(--rule); border-radius:6px; background:var(--panel); padding:10px 12px; margin:0 0 10px; }
.kywhead2 { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:7px;
  border-bottom:1px solid var(--rule); padding-bottom:6px; }
.kywhead2 b { font-size:13px; }
.kywhead2 span { font-size:11px; color:var(--dim); }
.kywhead2 em { margin-left:auto; font-style:normal; font:700 14px/1 var(--mono); color:var(--dim); }
.kywhead2 em.good { color:var(--jade); }
.kywhead2 em.bad { color:var(--sindoor); }
.kyreason { display:grid; grid-template-columns:34px minmax(0,1fr); gap:9px; align-items:baseline; margin:0 0 5px; }
.kyrv { font:600 11.5px/1.5 var(--mono); text-align:right; }
.kyrv.good { color:var(--jade); }
.kyrv.bad { color:var(--sindoor); }
.kyreason p { margin:0; font-size:12px; line-height:1.55; color:var(--ink-2); }

/* ---- Kaarya: what is running now, and what to do when it is not -------- */
.kyrunning { display:flex; flex-direction:column; gap:2px; border:1px solid var(--rule);
  border-left:3px solid var(--jade); border-radius:0 6px 6px 0; padding:10px 13px; margin:0 0 14px;
  background:var(--panel-2); }
.kyrunning.none { border-left-color:var(--rule); }
.kyrunning b { font-size:13.5px; color:var(--ink); }
.kyrunning span { font-size:11.5px; color:var(--dim); }
.kygcount { margin-left:auto; font:600 9.5px/1.6 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--jade); }
.swsub { display:flex; align-items:baseline; gap:8px; }
.kyact.live-excellent { border-color:var(--jade); box-shadow:inset 2px 0 0 var(--jade); }
.kyact.live-good { border-color:var(--brass-dim); box-shadow:inset 2px 0 0 var(--brass-hi); }
.kyact.live-workable { box-shadow:inset 2px 0 0 var(--brass-dim); }
.kylive { flex:0 0 auto; font:600 8px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  padding:1px 6px; border-radius:999px; }
.kylive.excellent { color:var(--dial-face-2); background:var(--jade); }
.kylive.good { color:var(--dial-face-2); background:var(--brass-hi); }
.kylive.workable { color:var(--brass); border:1px solid var(--brass-dim); }

.kyurgent { border-top:2px solid var(--sindoor); }
.kyfaults { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap:10px; margin:10px 0 14px; }
.kyfault { border:1px solid var(--rule); border-left:3px solid var(--sindoor); border-radius:0 5px 5px 0;
  padding:9px 12px; background:var(--panel); }
.kyfault b { font-size:12.5px; color:var(--ink); }
.kyfault p { margin:4px 0 0; font-size:11.5px; line-height:1.55; color:var(--ink-2); }
ol.kyladder { counter-reset:kyl; list-style:none; margin:0; padding:0; }
ol.kyladder li { counter-increment:kyl; position:relative; border:1px solid var(--rule); border-radius:6px;
  background:var(--panel); padding:11px 13px 11px 46px; margin:0 0 10px; }
ol.kyladder li::before { content:counter(kyl); position:absolute; left:12px; top:12px; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--panel-2);
  border:1px solid var(--brass-dim); color:var(--brass-hi); font:700 12px/1 var(--mono); }
ol.kyladder li.move::before { background:var(--jade); border-color:var(--jade); color:var(--dial-face-2); }
.kylhd b { font-size:13.5px; }
ol.kyladder p { margin:5px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-2); max-width:84ch; }
.kymoves { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap:9px; margin:10px 0 4px; }
.kymove { border:1px solid var(--rule); border-radius:5px; background:var(--panel-2); padding:8px 11px; }
.kymove b { font-size:12.5px; color:var(--ink); }
.kymove em { float:right; font-style:normal; font:600 11.5px/1.3 var(--mono); color:var(--brass); }
.kymove p { margin:4px 0 5px; font-size:11.5px; }

.kyacts-live { margin:0 0 4px; }
.kyacts-live .kyact { background:var(--panel-2); }
.kyact b i { display:block; font-style:normal; font:400 9.5px/1.5 var(--mono); letter-spacing:.05em; color:var(--dim); }

/* ---- Ghatana: the bhava grid, the life bar, the significators ---------- */
.ghhouses { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:3px; margin:12px 0; }
@media (max-width: 720px) { .ghhouses { grid-template-columns:repeat(6, minmax(0,1fr)); } }
.ghhouse { min-height:52px; border:1px solid var(--rule); border-radius:4px; background:var(--panel);
  display:flex; flex-direction:column; align-items:center; padding:4px 2px; }
.ghhouse.on { border-color:var(--brass-hi); background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--brass-hi); }
.ghhn { font:600 9px/1.3 var(--mono); color:var(--dim); }
.ghhs { font:400 8.5px/1.4 var(--mono); color:var(--ink-2); margin-top:1px; }
.ghhg { display:flex; flex-wrap:wrap; justify-content:center; gap:1px; margin-top:3px; }
.ghhg i { font-style:normal; font-size:12px; line-height:1; }
.ghlife { display:block; width:100%; height:auto; }
.ghwin { border:1px solid var(--rule); border-radius:6px; background:var(--panel); padding:10px 12px; }
.ghwin.both { border-color:var(--brass-dim); }
.ghwin.now { border-color:var(--jade); box-shadow:inset 2px 0 0 var(--jade); }
.ghwhead { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:7px; }
.ghwhead b { font-size:13.5px; }
.ghwhead span { font:400 11px/1 var(--mono); color:var(--dim); }
.ghwhead em { margin-left:auto; font-style:normal; font:700 17px/1 var(--mono); }
.ghsigs { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap:10px; margin-top:10px; }
.ghsig { border:1px solid var(--rule); border-radius:5px; background:var(--panel); padding:9px 11px; }
.ghsig .vmtrack { margin:6px 0 4px; }
.ghsigg { font-size:13px; font-weight:600; }
.ghsig em { float:right; font-style:normal; font:600 12px/1 var(--mono); color:var(--brass); }
.ghsig p { margin:4px 0 0; font-size:11.5px; line-height:1.5; color:var(--dim); }
.ghbh { flex:0 0 auto; font:600 9px/1.5 var(--mono); color:var(--dim); border:1px solid var(--rule);
  border-radius:999px; padding:1px 7px; }

/* ---- Swasthya: the four instruments, gathered ------------------------- */
.shsrcs { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap:10px; margin:12px 0; }
.shsrc { border:1px solid var(--rule); border-left-width:3px; border-radius:0 5px 5px 0; padding:9px 12px;
  background:var(--panel); }
.shsrc.off { opacity:.5; }
.shshead { display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.shshead b { font-size:12.5px; }
.shshead em { margin-left:auto; font-style:normal; font:600 13px/1 var(--mono); color:var(--brass); }
.shsrc p { margin:5px 0 0; font-size:11px; line-height:1.5; }
.shlevels { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap:12px; margin:14px 0 4px; }
.shlhead { display:flex; align-items:baseline; gap:8px; margin-bottom:5px; }
.shlhead b { font-size:12.5px; color:var(--ink-2); }
.shlhead em { margin-left:auto; font-style:normal; font:700 15px/1 var(--mono); color:var(--brass); }
.shfinds { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap:10px; }
.shfind { border:1px solid var(--rule); border-left-width:3px; border-radius:0 5px 5px 0; background:var(--panel);
  padding:9px 12px; }
.shfhead { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.shfhead em { margin-left:auto; font-style:normal; font:400 10px/1.4 var(--mono); color:var(--dim); }
/* A pill is a box drawn round a line of type, so the type has to be centred
   in it rather than sat on its own baseline: at 8.5px mono inside a 1.5 line
   box with a pixel of padding, the glyphs rode high and every one of these
   read as misaligned. Centred by the box itself, with the height set once. */
.shtag { font:600 8.5px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; border:1px solid;
  border-radius:999px; padding:0 8px; display:inline-flex; align-items:center;
  justify-content:center; min-height:18px; }
.shfind p { margin:0 0 6px; font-size:12.5px; line-height:1.55; color:var(--ink); }
.shfwhy { font-size:11px; line-height:1.5; color:var(--dim); }
.shfpts { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.shfpts span { font:400 10.5px/1.5 var(--mono); color:var(--brass); border:1px solid var(--rule);
  border-radius:3px; padding:0 6px; background:var(--panel-2); }
.shcaveat { border-top:1px solid var(--rule); padding-top:10px; margin-top:14px; }

/* kaal yatra is running: the record buttons are replaced by the way back,
   because a breath reading belongs to the minute it was taken in */
.swnotnow {
  border:1px solid var(--brass-dim); border-left:3px solid var(--brass);
  border-radius:0 4px 4px 0; background:var(--panel-2);
  padding:10px 12px; font-size:12.5px; line-height:1.55; color:var(--ink-2);
}
.swnotnow b { color:var(--brass-hi); }
.swnotnow .sdmbtn { margin-top:8px; }

/* Swasthya: what is loudest right now, not just what is repeated most */
.shlevel.lead { border-color:var(--brass); }
.shleadtag { font:600 8px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--brass); margin-left:6px; }
.shlnum { display:block; margin-top:4px; font:400 9.5px/1 var(--mono); color:var(--dim); text-align:right; }
.shlead {
  margin:12px 0; padding:9px 12px; border-left:3px solid var(--brass);
  background:var(--panel-2); border-radius:0 4px 4px 0;
}
.shleadlab { display:block; font:600 8.5px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.shlead b { display:block; font-family:var(--display); font-size:15.5px; line-height:1.3; color:var(--ink); margin:2px 0 3px; }
.shlead em { font-style:normal; font:400 11px/1.45 var(--mono); color:var(--dim); }
.railcard.shloud { border-color:var(--brass-dim); }
.shsev {
  display:inline-block; width:44px; height:4px; border-radius:2px;
  background:var(--rule-soft); overflow:hidden; margin-left:auto; margin-right:8px;
}
.shsev i { display:block; height:100%; border-radius:2px; opacity:.9; }
.shfind.top { background:var(--panel-2); }

/* Swasthya: where a finding sits, and where else the same thing sits */
.shseat {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed var(--rule-soft);
}
.shseat > span { font-size: 11.5px; line-height: 1.45; color: var(--ink-2); min-width: 0; }
.shseat > span > i {
  display: block; font: 600 8px/1.5 var(--mono); font-style: normal;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
}
.shklass { font: 400 10.5px/1.4 var(--mono) !important; color: var(--sindoor) !important; flex-basis: 100%; }
.shspread { margin-top: 8px; padding: 8px 10px; background: var(--panel-2); border-radius: 3px; }
.shspread > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin-bottom: 5px; }
.shspread i {
  flex-basis: 100%; font: 600 8px/1.5 var(--mono); font-style: normal;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
}
.shspread em {
  display: inline-flex; align-items: center; min-height: 21px;
  font-style: normal; font-size: 11.5px; line-height: 1; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 999px; padding: 0 9px;
}
.shspread em b { font-weight: 400; color: var(--dim); }
.shspread .note { margin: 4px 0 0; font-size: 10.5px; line-height: 1.45; }

/* the two clocks a reading can keep */
.shhzsplit { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.shhzsplit > span {
  flex: 1 1 140px; min-width: 0; padding: 8px 11px; border-left: 3px solid var(--rule);
  background: var(--panel-2); border-radius: 0 3px 3px 0;
  font: 400 20px/1 var(--display); color: var(--ink);
}
.shhzsplit i {
  display: block; font: 600 8.5px/1.6 var(--mono); font-style: normal;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
}
.shhzsplit em { display: block; margin-top: 3px; font: 400 10.5px/1.4 var(--mono); font-style: normal; color: var(--dim); }
.railcard.shhz { border-left: 3px solid var(--rule); }

/* Swasthya: one card per place in the body */
.railcard.shzone { border-left: 3px solid var(--brass-dim); }
.shzone > h3 .deva { font-family: var(--deva); letter-spacing: 0; text-transform: none; color: var(--dim); }
.shzorg { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: -2px 0 10px; }
.shzbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.shzbar .vmtrack { flex: 1 1 140px; min-width: 100px; }
.shznum { font: 400 17px/1 var(--display); color: var(--ink); flex: 0 0 auto; }
.shznum em { font: 400 9px/1 var(--mono); font-style: normal; color: var(--dim); margin-left: 4px; }
.shzclocks { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.shzclocks b { font: 400 11px/1 var(--mono); color: var(--ink-2); margin-right: 6px; }
.shclock {
  display: inline-flex; align-items: center; justify-content: center; min-height: 18px;
  font: 600 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 999px; padding: 0 8px; flex: 0 0 auto;
}
.shseatline { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 10px; }
.shseatline > span { font-size: 11.5px; color: var(--ink-2); }
.shseatline > span > i {
  display: block; font: 600 8px/1.5 var(--mono); font-style: normal;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
}
.shwatch { margin-bottom: 12px; }
.shwatch > summary {
  font: 600 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass); cursor: pointer; padding: 7px 0;
}
.shwgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 10px; margin: 4px 0 8px; }
.shwgrid > div { min-width: 0; }
.shwgrid i {
  display: block; font: 600 8.5px/1.6 var(--mono); font-style: normal;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px;
}
.shwgrid em {
  display: block; font-style: normal; font-size: 12px; line-height: 1.5; color: var(--ink);
  padding-left: 11px; position: relative;
}
.shwgrid em::before { content: '·'; position: absolute; left: 2px; color: var(--brass); }
.shwsay { margin: 6px 0 0; font-size: 11px; line-height: 1.5; }
.shwsrc { margin: 4px 0 0; font-size: 10.5px; color: var(--dim); }
.shlvgroup { margin-top: 12px; }
.shlvhead {
  font: 600 9.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 8px;
}
.shlvhead em { font-style: normal; color: var(--dim); margin-left: 5px; }
.shprac { margin-top: 12px; padding: 10px 12px; background: var(--panel-2); border-radius: 3px; }
.shpractitle {
  font: 600 8.5px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 7px;
}
.shpracrow {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  padding: 5px 0; border-top: 1px solid var(--rule-soft);
}
.shpracrow:first-of-type { border-top: 0; }
.shpracrow b { font-family: var(--display); font-weight: 400; font-size: 14px; color: var(--ink); }
.shpracrow > span { font-size: 11.5px; color: var(--ink-2); }
.shpracrow .tag.bridge { border-color: var(--rule); color: var(--dim); }
.shprac .note { margin: 7px 0 0; font-size: 10.5px; }
.shchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.shchips > span {
  display: inline-flex; align-items: center; min-height: 19px;
  font: 400 10.5px/1 var(--mono); color: var(--dim);
  border: 1px solid var(--rule-soft); border-radius: 999px; padding: 0 8px;
}
.shchips > span.klass { color: var(--sindoor); border-color: var(--sindoor); opacity: .85; }

/* Swasthya remedies: the day drawn as the sequence the texts put it in */
/* The stages are sized by how many practices each holds, so a stage with one
   against a stage with six got a sliver — 26px for a label needing 45, which
   the ellipsis then ate entirely. No stage narrower than its own name now,
   and the strip wraps to a second row rather than overflowing. */
.shstrip { display: flex; flex-wrap: wrap; gap: 3px; margin: 12px 0 10px; }
.shstage {
  min-width: 78px; padding: 8px 9px; border: 1px solid; border-radius: 3px;
  display: flex; flex-direction: column; gap: 2px; overflow: hidden;
}
.shstage b {
  font: 600 9px/1.3 var(--mono); letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shstage em { font: 400 10px/1 var(--mono); font-style: normal; color: var(--ink-2); }
.shcov { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-end; margin: 10px 0 4px; }
.shcov > div { font: 400 19px/1 var(--display); color: var(--ink); }
.shcov > div > i {
  display: block; font: 600 8.5px/1.6 var(--mono); font-style: normal;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
}
.shcovbar { flex: 1 1 240px; min-width: 180px; }
.shcovbar em {
  display: block; margin-top: 5px; font: 400 10.5px/1.45 var(--mono); font-style: normal; color: var(--dim);
}
/* the stage cards are plain panels: the strip at the top of the page is where
   the colour belongs, and a coloured edge on every card fought with it */
.railcard.shstagecard { border-left: 1px solid var(--rule); }
.shprs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 10px; margin-top: 10px; }
.shpr {
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--panel-2); padding: 11px 13px; min-width: 0;
}
.shprhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.shprhead b { font-family: var(--display); font-weight: 400; font-size: 15px; color: var(--ink); }
.shprmin { font: 400 13px/1 var(--mono); color: var(--brass-hi); margin-left: auto; }
.shprmin em { font-style: normal; font-size: 8.5px; color: var(--dim); margin-left: 2px; }
.shprseats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.shprseats > span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 19px;
  font: 400 10px/1 var(--mono); color: var(--brass); border: 1px solid var(--brass-dim);
  border-radius: 999px; padding: 0 9px;
}
.shprwhy { list-style: none; margin: 7px 0 0; padding: 0; }
.shprwhy li {
  position: relative; padding: 3px 0 3px 11px; font-size: 12px; line-height: 1.45; color: var(--ink-2);
}
.shprwhy li::before { content: '\00b7'; position: absolute; left: 2px; color: var(--brass); }
.shprfoot { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.shprv { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--dim); font-style: italic; }

/* ---- Milaan: who is being matched -------------------------------------- */
.mlslots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(212px, 100%), 1fr)); gap: 10px; margin: 4px 0 0; }
.mlslot {
  border: 1px solid var(--rule); border-radius: 4px; background: var(--panel-2);
  padding: 10px 12px 11px; min-width: 0; display: flex; flex-direction: column; gap: 7px;
}
.mlslot.on { border-color: var(--brass-dim); }
.mlslothead { display: flex; align-items: center; gap: 7px; }
.mlslotn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brass-dim); color: var(--ground); font: 600 10px/1 var(--mono);
}
.mlslot.on .mlslotn { background: var(--brass); }
.mlslotlab {
  font: 600 8.5px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mlslotnow {
  font: 600 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brass);
  border: 1px solid var(--brass-dim); border-radius: 999px; padding: 0 6px;
  display: inline-flex; align-items: center; min-height: 15px; flex: 0 0 auto;
}
.mlslotx {
  margin-left: auto; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--rule); background: transparent; color: var(--dim);
  font: 400 13px/1 var(--body); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mlslotx:hover { border-color: var(--sindoor); color: var(--sindoor); }
.mlslot select { width: 100%; min-width: 0; }
.mlslotfacts { display: flex; flex-wrap: wrap; gap: 3px 12px; }
.mlslotfacts > span { font-size: 11.5px; color: var(--ink-2); min-width: 0; }
.mlslotfacts i {
  display: block; font: 600 7.5px/1.5 var(--mono); font-style: normal;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
}
.mlslotempty { font: 400 11px/1.4 var(--mono); color: var(--dim); }
/* the marriage page: groom and bride, and a swap (2026-10-15) */
.mlswaprow { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px; }
.mlswaprow .mlpicknote { flex:1 1 220px; margin:0; }
.mlswap { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px; border:1px solid var(--brass-dim); border-radius:999px; background:transparent;
  color:var(--ink); font:600 12.5px/1 var(--body); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mlswap svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mlswap:hover { border-color:var(--brass); }
.mlswap:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.mlswap[disabled] { opacity:.45; cursor:default; }
.mlslot.mladd {
  border-style: dashed; background: transparent; cursor: pointer; text-align: left;
  align-items: flex-start; justify-content: center; gap: 4px;
}
.mlslot.mladd:hover { border-color: var(--brass); background: var(--panel-2); }
.mladdmark { font: 300 22px/1 var(--body); color: var(--brass); }
.mlslot.mladd b { font-family: var(--display); font-weight: 400; font-size: 14px; color: var(--ink); }
.mlslot.mladd em { font: 400 10.5px/1.4 var(--mono); font-style: normal; color: var(--dim); }
.mlpicknote { margin-top: 10px; font-size: 11.5px; line-height: 1.55; }

/* ---- Milaan: the group's own readings ---------------------------------- */
.mlprodhead { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.mlprodscore { flex: 0 0 auto; }
.mlprodscore b { font-family: var(--display); font-size: 44px; line-height: 1; display: block; }
.mlprodscore em { font: 400 9px/1 var(--mono); font-style: normal; color: var(--dim); letter-spacing: .1em; }
.mlprodband { font: 600 10px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px; }
.mlprodparts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 10px; margin: 14px 0 0; }
.mlprodpart { border: 1px solid var(--rule); border-radius: 4px; padding: 9px 11px; background: var(--panel-2); min-width: 0; }
.mlpphead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mlpphead b { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.mlpphead span { font: 400 10px/1 var(--mono); color: var(--dim); flex: 0 0 auto; }
.mlprodpart em { display: block; margin-top: 5px; font-style: normal; font-size: 11px; line-height: 1.45; color: var(--dim); }

.mlsway { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 8px; }
.mlswayrow { display: grid; grid-template-columns: minmax(0,118px) 1fr 34px; gap: 10px; align-items: center; }
.mlswayrow > b { font-size: 12.5px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlswaybar { position: relative; display: flex; height: 9px; border-radius: 2px; background: var(--panel-2); overflow: hidden; }
.mlswaybar::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--rule); z-index: 1; }
.mlswaybar i { display: block; height: 100%; }
.mlswaybar i.held { margin-left: auto; background: var(--soma); }
.mlswaybar i.holds { background: var(--brass-hi); }
.mlswayrow > em { font: 400 11px/1 var(--mono); font-style: normal; color: var(--ink-2); text-align: right; }
.mllegend { display: flex; flex-wrap: wrap; gap: 12px; font: 400 10.5px/1.4 var(--mono); color: var(--dim); }
.mllegend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.mlroles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 10px; margin-bottom: 8px; }
.mlrole { border: 1px solid var(--rule); border-radius: 4px; padding: 10px 12px; background: var(--panel-2); min-width: 0; }
.mlrolehead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.mlrolehead b { font-family: var(--display); font-weight: 400; font-size: 15px; color: var(--ink); }
.mlrolev { font: 600 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); flex: 0 0 auto; }
.mlrolev i { font-family: var(--deva); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--dim); }
.mlrole p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.mlrole em { display: block; margin-top: 5px; font-style: normal; font-size: 11px; line-height: 1.45; color: var(--dim); }

.mltemper { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
.mltemp { border: 1px solid var(--rule); border-radius: 4px; padding: 9px 10px; background: var(--panel-2); text-align: center; min-width: 0; }
.mltemp.off { border-style: dashed; opacity: .55; }
.mltemp b { display: block; font: 600 9px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--brass); }
.mltempn { display: block; font-family: var(--display); font-size: 25px; line-height: 1.1; color: var(--ink); }
.mltemp em { display: block; font-style: normal; font-size: 10.5px; line-height: 1.4; color: var(--dim); }
@media (max-width: 620px) { .mltemper { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.mlclusters { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.mlcluster { display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  border: 1px solid var(--rule); border-radius: 4px; padding: 7px 10px; background: var(--panel-2); }
.mlclustn { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 50%; background: var(--brass-dim); color: var(--ground); font: 600 9px/1 var(--mono); }
.mlcluster em, .mlalone em {
  font-style: normal; font-size: 12px; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 999px; padding: 0 9px;
  display: inline-flex; align-items: center; min-height: 21px;
}
.mlalone { margin: 10px 0; padding: 9px 11px; border: 1px dashed var(--sindoor); border-radius: 4px; }
.mlalone b { display: block; font: 600 9px/1.6 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--sindoor); margin-bottom: 6px; }
.mlalone .note { margin: 7px 0 0; font-size: 11px; }
.mlconn { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.mlconn > div { flex: 1 1 200px; min-width: 0; border: 1px solid var(--rule); border-radius: 4px; padding: 9px 11px; background: var(--panel-2); }
.mlconn i { display: block; font: 600 8px/1.6 var(--mono); font-style: normal; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.mlconn b { font-family: var(--display); font-weight: 400; font-size: 15px; color: var(--ink); }
.mlconn em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; line-height: 1.45; color: var(--dim); }

.mlfrics { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.mlfric { border: 1px solid var(--rule); border-radius: 4px; padding: 10px 12px; background: var(--panel-2); }
.mlfrichead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.mlfrichead b { font-family: var(--display); font-weight: 400; font-size: 15.5px; color: var(--ink); }
.mlfricx { font: 400 10.5px/1 var(--mono); color: var(--dim); }
.mlfricn { margin-left: auto; font: 400 15px/1 var(--mono); }
.mlfrickind { padding: 7px 0; border-top: 1px solid var(--rule-soft); }
.mlfkhead { display: flex; align-items: baseline; gap: 8px; font: 600 10.5px/1.4 var(--mono); letter-spacing: .06em; color: var(--brass-hi); }
.mlfkwhat { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--dim); }
.mlfkdo { margin: 5px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink); }

.mldays { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 8px; margin: 10px 0; }
.mlday { border: 1px solid var(--rule); border-radius: 4px; padding: 8px 10px; background: var(--panel-2); min-width: 0; }
.mlday.ok { border-color: var(--jade); }
.mlday.no { border-color: var(--sindoor); }
.mlday b { display: block; font-family: var(--display); font-weight: 400; font-size: 14px; color: var(--ink); }
.mlday span { display: block; font-size: 11.5px; color: var(--ink-2); }
.mlday span i { font-family: var(--deva); font-style: normal; color: var(--dim); }
.mlday em { display: block; margin-top: 3px; font: 600 8px/1.5 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.mlday.ok em { color: var(--jade); }
.mlday.no em { color: var(--sindoor); }
.mlnopan { border-left: 2px solid var(--brass-dim); padding-left: 12px; }

/* Under about 360px the Pragati scale rows have no room for a label column
   beside the meter and the word; the label goes above them instead. */
@media (max-width: 380px) {
  .pgsrow { grid-template-columns: minmax(0,1fr) 54px; }
  .pgsname { grid-column: 1 / -1; letter-spacing: .09em; }
}

/* =====================================================================
   THE NARROWEST PHONES (320-380)
   Everything here is a row of small fixed things that fits at 390 and does
   not at 320. Verified against every tab and sub-pane at 320.
   ===================================================================== */
@media (max-width: 380px) {
  /* five labels under a day strip; the middle three are the ones that carry
     no information the ends do not already give */
  .vscale { font-size: 8.5px; letter-spacing: 0; }
  .vscale > span:nth-child(2), .vscale > span:nth-child(4) { display: none; }
  /* a segmented control of four wraps rather than clipping its last button */
  .seg { flex-wrap: wrap; }
  /* the verification tables put a long label beside a number */
  .vrow .vlab, .swmterms .vlab { font-size: 11.5px; }
  .vrow { gap: 6px; }
  /* a practice step's title is one long word more often than not */
  .sdsteps4 li b, .chplan li b { overflow-wrap: anywhere; }
  .sdsteps4 li, .chplan li { overflow-wrap: anywhere; }
}

/* =====================================================================
   Sankalpa — intention, timed and tested
   ===================================================================== */
.skgrid .railcard h3 .tag { margin-left:6px; }
.skform { display:grid; gap:12px; }
.skform label { display:grid; gap:5px; }
.skform label > span { font:600 12.5px/1.3 var(--body); color:var(--ink); }
.skform label > span em { font-style:normal; font-weight:400; color:var(--dim); margin-left:6px; }
.skform textarea { width:100%; resize:vertical; min-height:44px; padding:9px 10px; border:1px solid var(--rule); border-radius:4px;
  background:var(--ground-2); color:var(--ink); font:14px/1.45 var(--body); }
.skform textarea:focus { border-color:var(--brass); outline:none; }
.skif { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:560px) { .skif { grid-template-columns:1fr; } }
.skform .skcheck { display:flex; gap:10px; align-items:flex-start; }
.skform .skcheck input { width:auto; margin-top:3px; }
.skform .skcheck span { font:400 12.5px/1.5 var(--body); color:var(--ink-2); }
#sk-sug { color:var(--brass-hi); }
.skit { padding:10px 12px; border:1px solid var(--rule); border-radius:4px; background:var(--panel-2); margin:4px 0 10px; }
.skit-k { font:500 10.5px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--brass-hi); }
.skit-w { margin-top:4px; font:600 15px/1.35 var(--body); color:var(--ink); }
.skit-p { margin-top:4px; font-size:13px; color:var(--ink-2); }
.skpick { display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:12px; color:var(--dim); }
.skpick select { width:auto; max-width:100%; }
.skref { font:500 10px/1 var(--mono); letter-spacing:.04em; color:var(--dim); white-space:nowrap; }
.skwhy { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:5px; font-size:13px; color:var(--ink-2); }
.skwhy b { display:inline-block; width:14px; }
.skscore { display:flex; align-items:baseline; gap:6px; margin:2px 0 4px; }
.skscore b { font:400 34px/1 var(--display); color:var(--brass-hi); }
.skscore span { font-size:12px; color:var(--dim); }
.skwins { margin:0; padding:0 0 0 18px; display:grid; gap:12px; }
.skwin-t { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.skwin-t b { font:600 15px/1.2 var(--mono); color:var(--ink); }
.sksteps { margin:0; padding-left:18px; display:grid; gap:5px; font-size:13px; color:var(--ink); }
.sklist { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.sklist li { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; color:var(--ink-2); }
.sklist li button.ghost { text-align:left; flex:1; }
.skrec + .skrec { margin-top:16px; padding-top:14px; border-top:1px solid var(--rule); }
.skgas { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.skgas button { display:flex; flex-direction:column; gap:4px; align-items:center; padding:8px 4px; border:1px solid var(--rule); border-radius:4px;
  background:var(--panel-2); color:var(--ink); cursor:pointer; }
.skgas button:hover { border-color:var(--brass); }
.skgas b { font:500 16px/1 var(--mono); }
.skgas span { font-size:10.5px; line-height:1.25; color:var(--dim); text-align:center; }
@media (max-width:560px) { .skgas { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.skbar { display:grid; grid-template-columns:130px 1fr 44px; align-items:center; gap:10px; margin-top:8px; font-size:12.5px; }
.skbar-k em { font-style:normal; color:var(--dim); font-family:var(--mono); font-size:10.5px; }
.skbar-t { position:relative; height:10px; border-radius:5px; background:var(--ground-2); border:1px solid var(--rule); }
.skbar-ci { position:absolute; top:2px; bottom:2px; border-radius:3px; opacity:.35; }
.skbar-m { position:absolute; top:-3px; width:3px; height:14px; border-radius:2px; transform:translateX(-50%); }
.skbar b { font:500 13px/1 var(--mono); text-align:right; }
.skrules { width:100%; border-collapse:collapse; font-size:12.5px; }
.skrules th { text-align:left; font:500 10px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); padding:6px 8px 6px 0; border-bottom:1px solid var(--rule); }
.skrules td { padding:8px 8px 8px 0; border-bottom:1px solid var(--rule-soft); color:var(--ink-2); vertical-align:top; }
/* LITE: on a phone each rule becomes a small stacked card, every figure kept */
@media (max-width:640px) {
  .skrules, .skrules tbody, .skrules tr, .skrules td { display:block; width:100%; }
  .skrules thead { display:none; }
  .skrules tr { padding:10px 0; border-bottom:1px solid var(--rule-soft); }
  .skrules td { border:0; padding:2px 0; }
  .skrules td:first-child { color:var(--ink); padding-bottom:4px; }
  .skrules .skref { white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
  .skrules td { white-space:normal; overflow-wrap:anywhere; min-width:0; }
  .skrules td:not(:first-child) { display:grid; grid-template-columns:minmax(0,9.5em) minmax(0,1fr); gap:8px; }
  .skrules td:not(:first-child)::before { content:attr(data-l); font:500 10px/1.6 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
}
/* the eight-beat settle: 5 s in, 5 s out */
.skpacer { position:relative; width:150px; height:150px; margin:6px auto 10px; display:grid; place-items:center; }
.skpacer i { position:absolute; inset:0; margin:auto; width:100%; height:100%; border-radius:50%;
  border:1.5px solid var(--brass); background:radial-gradient(circle, color-mix(in srgb, var(--brass) 22%, transparent), transparent 70%); transform:scale(.55); }
.skpacer span { position:absolute; font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--brass-hi); opacity:0; }
.skpacer:not(.on) .in { opacity:.7; }
.skpacer.on i { animation:skbreath 10s ease-in-out infinite; }
.skpacer.on .in { animation:skin 10s steps(1) infinite; }
.skpacer.on .out { animation:skout 10s steps(1) infinite; }
@keyframes skbreath { 0%,100% { transform:scale(.55); } 50% { transform:scale(1); } }
@keyframes skin { 0% { opacity:1; } 50%,100% { opacity:0; } }
@keyframes skout { 0% { opacity:0; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .skpacer.on i, .skpacer.on .in, .skpacer.on .out { animation:none; } }

/* =====================================================================
   Breath Tap — the microphone overlay
   ===================================================================== */
html.bt-open, html.bt-open body { overflow:hidden; }
.btopen { border-style:dashed !important; color:var(--brass-hi) !important; }

/* ---- Time table --------------------------------------------------------- */
html.tmt-open, html.tmt-open body { overflow:hidden; }
.tmtwrap { position:fixed; inset:0; z-index:8900; display:flex; align-items:stretch; justify-content:center;
  background:rgba(4,5,9,.72); backdrop-filter:blur(3px); }
@media (min-width:760px) { .tmtwrap { align-items:center; padding:24px; } }
.tmtsheet { width:min(100%,780px); max-height:100%; overflow:auto; overscroll-behavior:contain;
  padding:14px 16px calc(28px + env(safe-area-inset-bottom)); background:var(--panel); color:var(--ink);
  border:1px solid var(--rule); box-shadow:var(--shadow); }
@media (min-width:760px) { .tmtsheet { border-radius:16px; padding:18px 22px 26px; } }
.tmthead { position:sticky; top:-14px; z-index:2; display:flex; align-items:center; gap:10px; margin:-14px -16px 10px; padding:14px 16px 10px;
  background:var(--panel); box-shadow:0 10px 14px -12px rgba(0,0,0,.7); }
@media (min-width:760px) { .tmthead { top:-18px; margin:-18px -22px 10px; padding:18px 22px 10px; } }
.tmthead b { display:block; font:400 24px/1.1 var(--display); color:var(--brass-hi); }
.tmthead span { font-size:12.5px; color:var(--dim); }
.tmttabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-bottom:10px; }
.tmttabs button { padding:8px 6px; border-radius:10px; border:1px solid var(--rule); background:var(--panel-2); color:var(--ink-2); cursor:pointer; text-align:left; min-width:0; }
.tmttabs button b { display:block; font-weight:500; font-size:14px; }
.tmttabs button i { display:block; font-style:normal; font-size:11px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tmttabs button[aria-selected="true"] { border-color:var(--brass); color:var(--brass-hi); background:rgba(201,162,39,.07); }
@media (max-width:420px) { .tmttabs button i { display:none; } .tmttabs button { text-align:center; } }
.tmtdays { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:12px; }
.tmtdays button { padding:6px 12px; border-radius:999px; border:1px solid var(--rule); background:transparent; color:var(--ink-2); cursor:pointer; font-size:13px; }
.tmtdays button[aria-pressed="true"] { border-color:var(--brass); color:var(--brass-hi); }
.tmtnote, .tmtsmall { font-size:12px; line-height:1.5; color:var(--dim); }
.tmtsmall { margin:8px 0 0; }
.tmtbusy { padding:40px 10px; text-align:center; color:var(--dim); font-style:italic; }
.tmtempty { padding:18px 4px; }
.tmtempty p { font-size:15px; line-height:1.55; color:var(--ink-2); margin:0 0 12px; }
.tmtbtns { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.tmtbtn { padding:9px 14px; border-radius:9px; border:1px solid var(--rule); background:var(--panel-2); color:var(--ink); cursor:pointer; font-size:13.5px; }
.tmtbtn:hover { border-color:var(--brass-dim); }
.tmtbtn.primary { background:var(--brass); border-color:var(--brass); color:#15120a; font-weight:600; }
.tmtbtn.ghost { background:transparent; color:var(--ink-2); }
.tmtbtn:disabled { opacity:.6; cursor:progress; }
.tmtsum { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-bottom:10px; }
.tmtsum div { padding:8px 9px; border-radius:10px; background:var(--ground-2); border:1px solid var(--rule-soft); min-width:0; }
.tmtsum b { display:block; font:400 20px/1.1 var(--display); color:var(--ink); }
.tmtsum span { font-size:11px; color:var(--dim); line-height:1.3; display:block; }
.tmtsum .warn b { color:var(--brass-hi); }
.tmtsum .bad b { color:var(--sindoor); }
@media (max-width:560px) { .tmtsum { grid-template-columns:repeat(2,minmax(0,1fr)); } .tmtsum div:last-child { grid-column:1 / -1; } }
.tmtbreath { padding:10px 12px; border-radius:12px; border:1px solid var(--rule); background:var(--panel-2); margin-bottom:10px; }
.tmtbreath.off { border-color:color-mix(in srgb, var(--brass) 55%, var(--rule)); }
.tmtbreathtxt { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; font-size:13px; }
.tmtbreathtxt span { color:var(--dim); }
.tmtbreathtxt b { font-weight:500; }
.tmtbreathtxt b.dim { color:var(--dim); font-weight:400; }
.tmtobs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; }
.tmtobs > span { font-size:12.5px; color:var(--ink-2); margin-right:4px; }
.tmtobs button { padding:8px 14px; border-radius:8px; border:1px solid var(--rule); background:var(--panel); color:var(--ink); cursor:pointer; }
.tmtobs .btopen i { display:none; }
.tmtnow { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; margin-bottom:12px; }
.tmtnow > p { margin:0; color:var(--dim); font-size:13px; }
.tmtnowone { padding:10px 12px; border-radius:12px; background:linear-gradient(135deg, rgba(201,162,39,.10), transparent 70%); border:1px solid var(--rule); }
.tmtnowone span { font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--brass); }
.tmtnowone b { display:block; margin:5px 0 2px; font:400 18px/1.2 var(--display); }
.tmtnowone em { display:block; font-style:normal; font-size:12.5px; color:var(--ink-2); margin-bottom:6px; }
.tmtlist { list-style:none; margin:0; padding:0; position:relative; }
.tmtlist::before { content:""; position:absolute; left:67px; top:8px; bottom:8px; width:1px; background:var(--rule); }
.tmtrow { display:grid; grid-template-columns:56px 22px minmax(0,1fr); padding:8px 0; }
.tmtlist.mine .tmtrow { grid-template-columns:88px 22px minmax(0,1fr); }
.tmtlist.mine::before { left:99px; }
.tmttime b { display:block; font:500 15px/1.2 var(--mono); color:var(--ink); }
.tmttime span { font-size:11px; color:var(--dim); }
.tmttime input { width:84px; padding:4px; border-radius:7px; border:1px solid var(--rule); background:var(--ground-2); color:var(--ink); font:500 14px var(--mono); color-scheme:dark; }
.tmtdot { position:relative; }
.tmtdot::after { content:""; position:absolute; left:7px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--panel); border:2px solid var(--jade); }
.tmtrow.needs .tmtdot::after { border-color:var(--brass-hi); }
.tmtrow.now .tmtdot::after { background:var(--brass-hi); border-color:var(--brass-hi); box-shadow:0 0 0 4px rgba(240,213,126,.18); }
.tmtrow.done .tmtdot::after { background:var(--jade); }
.tmtrow.past .tmtmain, .tmtrow.done .tmtmain, .tmtrow.past .tmttime, .tmtrow.done .tmttime { opacity:.55; }
.tmtrow.now .tmtmain { background:rgba(201,162,39,.06); border-radius:10px; box-shadow:0 0 0 1px rgba(201,162,39,.25); }
.tmtmain { padding:2px 8px 4px; min-width:0; }
.tmtline { display:flex; align-items:flex-start; gap:8px; }
.tmtline > b { font-weight:500; font-size:15px; line-height:1.3; flex:1 1 auto; }
.tmttick { flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:1px solid var(--rule); background:transparent; color:var(--dim); cursor:pointer; font-size:13px; }
.tmttick[aria-pressed="true"] { background:var(--jade); border-color:var(--jade); color:#0b120f; }
.tmtchips { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.tmtchip { font-style:normal; font-size:11.5px; line-height:1; padding:4px 7px; border-radius:999px; border:1px solid var(--rule); color:var(--ink-2); white-space:nowrap; }
.tmtchip.ok { border-color:color-mix(in srgb, var(--jade) 60%, var(--rule)); color:#8fd1b8; }
.tmtchip.warn { border-color:var(--brass); color:var(--brass-hi); background:rgba(201,162,39,.08); }
.tmtchip.bad { border-color:color-mix(in srgb, var(--sindoor) 60%, var(--rule)); color:#f08a74; }
.tmtchip.best { border-color:var(--brass-dim); color:var(--brass); }
.tmtchip.plain { color:var(--dim); }
.tmtsay { margin:5px 0 0; font-size:12.5px; line-height:1.45; color:var(--ink-2); }
.tmtsug { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; padding:6px 8px; border-radius:9px; border:1px dashed var(--brass-dim); font-size:12.5px; }
.tmtsug span { flex:1 1 160px; color:var(--ink-2); }
.tmtsug b { color:var(--brass-hi); font-family:var(--mono); }
.tmtsug .tmtbtn { padding:5px 10px; font-size:12.5px; }
.tmtmore { margin-top:6px; }
.tmtmore summary { cursor:pointer; font-size:12.5px; color:var(--brass); }
.tmtwhy { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px; font-size:12.5px; color:var(--ink-2); }
.tmtwhy li { display:grid; grid-template-columns:30px 1fr; gap:6px; }
.tmtwhy b { font-family:var(--mono); font-weight:500; text-align:right; }
.tmtwhy li.up b { color:#8fd1b8; }
.tmtwhy li.down b { color:#f08a74; }
.tmtprep { margin-top:8px; padding:8px 10px; border-radius:10px; background:var(--ground-2); border:1px solid var(--rule-soft); }
.tmtprep > b { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); }
.tmtprep ol { margin:6px 0 0; padding-left:18px; display:grid; gap:6px; font-size:12.5px; }
.tmtprep p { margin:2px 0; color:var(--ink-2); line-height:1.45; }
.tmtfaults p { margin:8px 0 0; font-size:12.5px; line-height:1.45; color:var(--ink-2); }
.tmtedit { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; font-size:12px; color:var(--dim); }
.tmtedit input { width:64px; margin-left:4px; padding:4px 6px; border-radius:7px; border:1px solid var(--rule); background:var(--ground-2); color:var(--ink); }
.tmtedit .tmtbtn { padding:4px 10px; font-size:12px; }
.tmtrow.overlap .tmttime input { border-color:var(--sindoor); }
.tmtadd { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.tmtadd select, .tmtopts select, .tmtshift select { flex:1 1 200px; min-width:0; padding:9px 10px; border-radius:9px; border:1px solid var(--rule); background:var(--ground-2); color:var(--ink); }
.tmtwarn { margin-top:12px; padding:10px 12px; border-radius:10px; border:1px solid color-mix(in srgb, var(--sindoor) 50%, var(--rule)); font-size:13px; color:var(--ink-2); }
.tmtwarn p { margin:4px 0 0; }
.tmtshape { padding:12px; border-radius:12px; border:1px solid var(--rule); background:var(--panel-2); margin-bottom:12px; }
.tmtshape h4, .tmtgroup h4, .tmth4 { margin:0; font:400 17px/1.2 var(--display); color:var(--brass-hi); }
.tmth4 { margin-top:18px; }
.tmtshift { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; font-size:13px; }
.tmtshift span { flex:0 0 150px; color:var(--ink-2); }
.tmtgroup { margin-top:14px; }
.tmtgroup .tmtsmall { margin:2px 0 6px; }
.tmtgroup ul { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.tmtgroup li { display:grid; grid-template-columns:minmax(0,1fr) 62px auto; align-items:center; gap:6px; padding:6px 0; border-bottom:1px solid var(--rule-soft); }
.tmtgroup li input[type="number"] { width:62px; padding:5px 6px; border-radius:7px; border:1px solid var(--rule); background:var(--ground-2); color:var(--ink); }
.tmtgroup li em { font-style:normal; font-size:11px; color:var(--dim); }
.tmtcheck { display:flex; align-items:flex-start; gap:9px; cursor:pointer; min-width:0; }
.tmtcheck input { margin-top:3px; accent-color:var(--brass); width:17px; height:17px; flex:0 0 auto; }
.tmtcheck b { display:block; font-weight:500; font-size:14px; }
.tmtcheck i { display:block; font-style:normal; font-size:11.5px; color:var(--dim); line-height:1.4; }
.tmtcheck.big { margin-top:12px; padding:10px 12px; border-radius:10px; border:1px solid var(--rule-soft); background:var(--ground-2); }
.tmtalarm { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px; border-radius:14px; border:1px solid var(--rule); background:var(--panel-2); }
.tmtalarm.on { border-color:var(--jade); background:linear-gradient(135deg, rgba(78,155,127,.12), transparent 70%); }
.tmtalarm > div { flex:1 1 240px; }
.tmtalarm b { display:block; font:400 19px/1.2 var(--display); }
.tmtalarm span { font-size:12.5px; color:var(--ink-2); }
.tmtopts { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; margin-top:12px; align-items:end; }
.tmtopts label span { display:block; font-size:11.5px; color:var(--dim); margin-bottom:3px; }
.tmtopts select { width:100%; }
.tmtup { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px; }
.tmtup li { display:grid; grid-template-columns:52px 1fr auto; gap:8px; align-items:baseline; font-size:13px; padding:5px 0; border-bottom:1px solid var(--rule-soft); }
.tmtup b { font-family:var(--mono); font-weight:500; }
.tmtup li.align span { color:var(--brass-hi); }
.tmtup em { font-style:normal; font-size:11.5px; color:var(--dim); }
.tmttruth { margin-top:18px; padding:12px; border-radius:12px; border:1px solid var(--rule); display:grid; gap:8px; }
.tmttruth h4 { margin:0; font:400 16px/1.2 var(--display); color:var(--brass-hi); }
.tmttruth div { display:grid; grid-template-columns:110px 1fr; gap:10px; font-size:12.5px; line-height:1.45; }
.tmttruth div b { font-weight:500; }
.tmttruth div span { color:var(--ink-2); }
@media (max-width:480px) { .tmttruth div { grid-template-columns:1fr; gap:2px; } .tmtshift span { flex-basis:100%; } }
/* an alarm over everything the app opens — SwaraTantra (9750), Mahakaal and every sheet (9600–9801), the drawer — not the home alone
   (2026-10-22: "Alert popups are not appearing on the opened app on the now page only"); only a tooltip (9999) stands above it */
.tmttoast { position:fixed; z-index:9960; left:50%; top:calc(12px + env(safe-area-inset-top)); transform:translateX(-50%); width:min(94vw,440px);
  padding:14px; border-radius:14px; background:var(--panel); color:var(--ink); border:1px solid var(--brass); box-shadow:var(--shadow), 0 0 0 4px rgba(201,162,39,.12);
  animation:tmtin .35s ease-out; }
@keyframes tmtin { from { transform:translate(-50%,-14px); opacity:0; } }
.tmttoasthd span { font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--brass); }
.tmttoasthd b { display:block; margin-top:5px; font:400 20px/1.2 var(--display); color:var(--brass-hi); }
.tmttoast p { margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--ink-2); }
@media (max-width:560px) { #btn-timetable .ibl { display:none; } }
.tmtpush { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; padding:12px; border-radius:12px; border:1px solid var(--rule); background:var(--panel-2); }
.tmtpush.on { border-color:var(--jade); }
.tmtpush > div { flex:1 1 220px; }
.tmtpush b { display:block; font:400 17px/1.2 var(--display); }
.tmtpush span { font-size:12.5px; color:var(--ink-2); }


/* =======================================================================
   KAALCHAKRA LITE · the app skin
   =======================================================================
   One design, blended from three drafts:
     the full-circle dial as the centrepiece, under a night sky   (Sky Guide)
     calm, rounded, unhurried surfaces and a dawn light theme      (Oura)
     the Time table as a line of breath-coloured capsules          (Structured)

   This is a skin, not a subtraction. Every card, tab, sub-page, table and
   control Pro shows is still here; only how it looks, and a dock to reach it,
   are Lite's. It sits last in the stylesheet so it wins over the base rules.
   ===================================================================== */

/* ---- tokens: night (default) ------------------------------------------ */
:root {
  /* the website hero's ground (site.css --ground #08090C, --ground-2 #0C0D11) */
  --ground:#08090C; --ground-2:#0C0D11;
  --panel:#101117;  --panel-2:#15161D;
  --rule:rgba(238,232,220,.13); --rule-soft:rgba(238,232,220,.07);
  --ink:#EEE8D8;    --ink-2:#C2BCCB;   --dim:#8E89A3;
  --brass:#D9B84C;  --brass-hi:#F2D98A; --brass-dim:#6F5E2A;
  --sindoor:#EC7760; --jade:#62C19E; --soma:#A093DB;
  --dial-face:#0E0F14; --dial-face-2:#09090D; --plate:#0B0C10; --cart:#101117;
  --shadow:0 26px 60px -30px rgba(0,0,0,.85);
  --glass:rgba(16,17,23,.72); --glass-line:rgba(238,232,220,.11); --glass-hi:rgba(238,232,220,.06);
  /* the website hero's light: a wide gold-to-violet glow high on the right
     (site.css .hero::before — rgba(214,177,115,.10) to rgba(143,134,214,.05)) */
  --sky:radial-gradient(circle 560px at 82% 10%, rgba(214,177,115,.10), rgba(143,134,214,.05) 40%, transparent 68%);
  --r-lg:24px; --r-md:18px; --r-sm:12px;
  /* the website's type (site.css --sans, --mono, --mark) */
  --display:'Red Hat Display', system-ui, sans-serif;
  --body:'Red Hat Display', system-ui, -apple-system, sans-serif;
  --mono:'Red Hat Mono', ui-monospace, monospace;
  --mark:'Marcellus', 'Times New Roman', serif;
}
/* ---- tokens: dawn (light) --------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:#F4F1EC; --ground-2:#EBE6DE;
    --panel:#FFFFFF;  --panel-2:#F8F5F0;
    --rule:#E4DED4;   --rule-soft:#EEE9E1;
    --ink:#221F27;    --ink-2:#4E4955;   --dim:#857E8B;
    --brass:#9A7A18;  --brass-hi:#735A0D; --brass-dim:#D8C79A;
    --sindoor:#C9462C; --jade:#2F8A6B; --soma:#6D5FA6;
    --dial-face:#FFFDF8; --dial-face-2:#F5F0E6; --plate:#F7F3EB; --cart:#FFFFFF;
    --shadow:0 22px 48px -30px rgba(60,40,80,.45);
    --glass:rgba(255,255,255,.74); --glass-line:rgba(40,30,60,.09); --glass-hi:rgba(255,255,255,.6);
    --sky:radial-gradient(130% 60% at 50% -10%, #DCC3CF 0%, #EBD9D2 30%, #F3EDE7 58%, #F4F1EC 100%);
  }
}
:root[data-theme="light"] {
  --ground:#F4F1EC; --ground-2:#EBE6DE;
  --panel:#FFFFFF;  --panel-2:#F8F5F0;
  --rule:#E4DED4;   --rule-soft:#EEE9E1;
  --ink:#221F27;    --ink-2:#4E4955;   --dim:#857E8B;
  --brass:#9A7A18;  --brass-hi:#735A0D; --brass-dim:#D8C79A;
  --sindoor:#C9462C; --jade:#2F8A6B; --soma:#6D5FA6;
  --dial-face:#FFFDF8; --dial-face-2:#F5F0E6; --plate:#F7F3EB; --cart:#FFFFFF;
  --shadow:0 22px 48px -30px rgba(60,40,80,.45);
  --glass:rgba(255,255,255,.74); --glass-line:rgba(40,30,60,.09); --glass-hi:rgba(255,255,255,.6);
  --sky:radial-gradient(130% 60% at 50% -10%, #DCC3CF 0%, #EBD9D2 30%, #F3EDE7 58%, #F4F1EC 100%);
}

body { background:var(--sky) no-repeat, var(--ground); background-attachment:fixed; font-family:var(--body); }

/* ---- glass header ------------------------------------------------------ */
.topbar {
  top:max(8px, env(safe-area-inset-top)); margin:8px 0 14px; padding:8px 10px;
  border:1px solid var(--glass-line); border-radius:var(--r-lg);
  background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 1px 0 var(--glass-hi) inset, 0 14px 30px -22px rgba(0,0,0,.6);
}
.ctlgroup { border-radius:999px; border-color:var(--glass-line); background:transparent; }
.ctl { border-radius:999px; }
.ctl.primary { border-radius:999px; }
.topbar .mark { letter-spacing:.04em; font-family:var(--mark); }

/* ---- surfaces: calm, rounded, lifted only where they need to be -------- */
.railcard, .lcard, .swarabox, .controls, .inspector, .drawer, .intake, .emptystate {
  border-radius:var(--r-lg); border-color:var(--rule);
}
.railcard, .lcard { background:var(--panel); box-shadow:var(--shadow); border-color:var(--rule-soft); }
.railcard h3, .lcard h3 { border-bottom:0; padding-bottom:0; letter-spacing:.14em; }
.swarabox { background:color-mix(in srgb, var(--panel) 72%, transparent); padding:20px 18px 22px; border-color:var(--rule-soft); }
.drawer { background:var(--glass); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-color:var(--glass-line); overflow:hidden; }
.drawerhead { border-bottom-color:var(--rule-soft); }
.controls { background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-color:var(--glass-line); padding:12px 16px; }
.swarahead { border-bottom-color:var(--rule-soft); }
.sheet { border-top:0; }
#tip { border-radius:var(--r-md); background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-color:var(--glass-line); }
.inspector { background:var(--glass); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-color:var(--glass-line); }
.inspector.sheet { z-index:80; border-radius:var(--r-lg) var(--r-lg) 0 0; border-color:var(--glass-line); padding-bottom:calc(20px + env(safe-area-inset-bottom)); }

/* ---- controls: pills --------------------------------------------------- */
input, select { border-radius:var(--r-sm); border-color:var(--rule); }
button.go { border-radius:999px; font-family:var(--body); font-weight:600; letter-spacing:.06em; padding:12px 26px; }
button.ghost { border-radius:999px; }
.seg { border-radius:999px; border-color:var(--rule); }
.swnav { border-bottom:0; gap:8px; }
.swnav button { border-radius:999px; padding:7px 13px; background:transparent; }
.swnav button[aria-pressed="true"] { background:color-mix(in srgb, var(--brass) 16%, var(--panel)); }
.tabs { gap:6px; }
.tabs button { border-radius:999px; border:1px solid var(--rule); letter-spacing:.08em; padding:8px 13px; }
.tabs button[aria-selected="true"] { border-color:var(--brass); background:color-mix(in srgb, var(--brass) 14%, var(--panel)); }
.chip { border-radius:999px; }

/* ---- the dial: always the whole circle, sized to the screen ------------ */
.platearea { position:relative; display:flex; flex-direction:column; align-items:center; }
.dialbox, .dialbox svg { overflow:visible; }
.dialbox { width:100%; display:flex; justify-content:center; }
.dialbox svg {
  min-width:0 !important;
  width:min(100%, calc(100svh - 150px), 1040px); height:auto; margin:0 auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
@media (max-width:820px) {
  .dialbox { overflow:visible; }
  .dialbox svg { width:min(100%, calc(100svh - 170px)); min-width:0; }
}
@media (max-height:520px) and (orientation:landscape) {
  .dialbox svg { width:min(100%, calc(100svh - 24px)); }
}
:root[data-theme="light"] .dialbox svg { filter:drop-shadow(0 22px 40px rgba(80,60,100,.18)); }

/* ---- name, time travel, live cards, bands ------------------------------ */
.wholine { margin-top:14px; }
.wholine .pb-name { font-size:clamp(24px, 5.4vw, 34px); }
.livecards { gap:14px; }
.bandbox { border-radius:var(--r-lg); background:color-mix(in srgb, var(--panel) 55%, transparent); padding:6px 8px; border:1px solid var(--rule-soft); }

/* ---- HIDDEN FROM THE HOME SCREEN ----------------------------------------
   The user's instruction (2026-09-15): home shows only the dial. These are
   hidden, not deleted; they still render as in Pro. Keep this list in step with
   lite/src/ui-lite-shell.js and lite/README.md.
     #timemachine  Kaal yatra · go to a moment
     #livecards    Kaala · the moment, Vimshottari · running, Pragati
     .bandbox      Jeevan (hundred-year band) and Muhurta (today's band)
     #phasepanel   Jeevan's phase panel
   The person's name and birth line (.wholine) stays under the dial, so the
   dial is recognisably theirs (the user's instruction).                   */
.lite-app #timemachine,
.lite-app #livecards,
.lite-app .stage > .bandbox,
.lite-app #phasepanel { display:none !important; }

/* ---- home: the dial, centred in the space the header and drawer leave ---- */
.lite-has-chart body { padding-bottom:calc(var(--lite-peek, 96px) + env(safe-area-inset-bottom)); }
/* the drawer at its first stop (the breath widget and the dock) is taller than the grip: room for all of it */
.lite-has-chart.litedrawer-half body { padding-bottom:calc(var(--lite-half, 190px) + env(safe-area-inset-bottom)); }
/* The header floats as a pill, 8px down from the top; a page scrolled up under it showed through above and beside the
   pill (the user, 2026-09-25: "the dial still remains above the header"). Once the page has moved, a band of the page's
   own ground lies behind the pill, from the top of the screen to just under it, fading at its foot: the dial and the
   cards pass beneath it. Under the header (60), over the page, under the drawer (62). */
.lite-app body::before { content:''; position:fixed; z-index:59; left:0; right:0; top:0; height:calc(var(--lite-sheet-top, 80px) + 6px);
  background:var(--sky) no-repeat, var(--ground); background-attachment:fixed; pointer-events:none; opacity:0; transition:opacity .18s ease;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 16px), transparent); mask-image:linear-gradient(#000 calc(100% - 16px), transparent); }
.lite-app.lite-scrolled body::before { opacity:1; }
@media (prefers-reduced-motion: reduce) { .lite-app body::before { transition:none; } }
.lite-has-chart .wrap { padding-bottom:0; }
.lite-has-chart .stage { gap:0; }
.lite-has-chart .stage {
  min-height:calc(100svh - var(--lite-head, 72px) - var(--lite-peek, 96px) - 8px);
  display:flex; flex-direction:column; justify-content:center;
}
.lite-has-chart .dialbox svg,
.lite-has-chart .dialbox svg:is(*) {
  width:min(100%, calc(100svh - var(--lite-head, 72px) - var(--lite-peek, 48px) - var(--lite-name, 70px) - 44px), 1040px);
}

/* ---- the footer drawer ---------------------------------------------------
   COLLAPSED (the default, the user's instruction): only the rounded top edge
   of the sheet shows above the bottom of the screen — its grip, nothing else;
   the tabs are inside, out of sight. It rises and settles a few pixels every
   few seconds, so the eye learns it can be lifted. Tap or drag it up to open.
   OPEN: the whole sheet over the dial, the eight tabs in one row that scrolls
   sideways and snaps, and the chosen section below.

   COLOUR (the user's instruction: a bhava-ring colour, not green, matching the
   dial's overall look): brass — the ring's kendra and lagna tint, and the
   dial's own gold rim — as dark bronze glass. */
.litedrawer { display:none; }
.lite-has-chart .litedrawer {
  --dr-ease:cubic-bezier(.22,.9,.24,1);
  --dr-a:rgba(201,162,39,.20); --dr-b:rgba(240,213,126,.08); --dr-base:rgba(22,17,8,.74);
  --dr-edge:rgba(240,213,126,.34); --dr-ink:#F4ECD8; --dr-ink-2:#CFC2A0; --dr-lit:#F6DE93;
  display:flex; flex-direction:column;
  position:fixed; z-index:62; left:0; right:0; margin:0 auto; width:min(100%, 1180px);
  top:var(--lite-head, 72px); bottom:0;
  transform:translateY(calc(100% - var(--lite-peek, 40px)));
  transition:transform .44s var(--dr-ease);
}
.lite-has-chart .litedrawer[data-state="open"] { transform:translateY(0); }
.litedrawer.dragging { transition:none; animation:none !important; }
:root[data-theme="light"].lite-has-chart .litedrawer {
  --dr-a:rgba(154,122,24,.18); --dr-b:rgba(154,122,24,.06); --dr-base:rgba(253,249,239,.80);
  --dr-edge:rgba(255,255,255,.95); --dr-ink:#2C2410; --dr-ink-2:#6B5B33; --dr-lit:#7A5B0A;
}

/* the sheet itself: bronze glass, a light falling from the gold top edge */
.lite-has-chart .litedrawer::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:28px 28px 0 0;
  background:
    linear-gradient(180deg, rgba(240,213,126,.10), rgba(240,213,126,0) 90px),
    radial-gradient(120% 70% at 50% 0%, var(--dr-a), transparent 70%),
    linear-gradient(180deg, var(--dr-b), transparent 40%),
    var(--dr-base);
  -webkit-backdrop-filter:blur(30px) saturate(1.5); backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:inset 0 1px 0 var(--dr-edge), inset 0 0 0 1px rgba(240,213,126,.10), 0 -20px 50px -22px rgba(0,0,0,.85);
}
:root[data-theme="light"].lite-has-chart .litedrawer::before { box-shadow:inset 0 1px 0 var(--dr-edge), inset 0 0 0 1px rgba(154,122,24,.14), 0 -16px 40px -20px rgba(80,60,20,.30); }

/* collapsed, it breathes: up a few pixels and back, then rests */
@keyframes litebob { 0%, 62%, 100% { translate:0 0; } 72% { translate:0 -7px; } 82% { translate:0 0; } 90% { translate:0 -3px; } }
.lite-has-chart .litedrawer[data-state="peek"] { animation:litebob 3.2s var(--dr-ease) 1.2s infinite; }
.lite-has-chart .litedrawer[data-state="peek"]:hover { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) {
  .lite-has-chart .litedrawer { transition:none; animation:none !important; }
}
.litedrawer-open, .litedrawer-open body { overflow:hidden; }

.litedrawer-top { position:relative; flex:0 0 auto; margin:0; padding:0 10px 8px; color:var(--dr-ink); }
.litedrawer[data-state="peek"] .litedrawer-top { padding-bottom:env(safe-area-inset-bottom); }
.litedrawer[data-state="open"] .litedrawer-top { box-shadow:inset 0 -1px 0 rgba(240,213,126,.12); }

/* the grip: the whole visible strip is the thing to tap */
.litegrab {
  display:flex; align-items:center; justify-content:center; width:100%; height:40px; padding:0; margin:0;
  border:0; border-radius:28px 28px 0 0; background:transparent; cursor:pointer; touch-action:none;
}
.litegrab i { display:block; width:42px; height:5px; border-radius:3px; background:color-mix(in srgb, var(--dr-lit) 70%, transparent); box-shadow:0 0 12px color-mix(in srgb, var(--dr-lit) 45%, transparent); transition:width .25s var(--dr-ease); }
.litegrab:hover i, .litegrab:focus-visible i { width:56px; }
.litegrab span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.litegrab:focus-visible { outline:2px solid var(--dr-lit); outline-offset:-6px; }
.litedrawer[data-state="open"] .litegrab { height:30px; cursor:grab; }

/* collapsed, the tabs are inside the drawer, not on show */
.litedrawer[data-state="peek"] .navbar { display:none; }

/* the row of sections, open */
.litedrawer .navbar {
  display:flex; flex-wrap:nowrap; gap:4px; margin:0; padding:2px 4px;
  border:0; border-radius:0; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scroll-padding:0 4px; scrollbar-width:none;
  --fade-l:0px; --fade-r:0px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.litedrawer .navbar::-webkit-scrollbar { display:none; }
.litedrawer .navbar[data-more~="left"] { --fade-l:34px; }
.litedrawer .navbar[data-more~="right"] { --fade-r:34px; }
.litedrawer .navbar button {
  position:relative; flex:0 0 auto; min-width:66px; min-height:60px; margin:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:9px 8px 8px; border:0; border-radius:20px; background:transparent;
  color:var(--dr-ink-2); text-align:center; scroll-snap-align:start;
  transition:color .2s, background .25s var(--dr-ease), transform .18s var(--dr-ease);
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:760px) { .litedrawer .navbar button { flex:1 0 76px; } }
.litedrawer .navbar button:hover { color:var(--dr-ink); background:rgba(240,213,126,.07); }
.litedrawer .navbar button:active { transform:scale(.94); }
.litedrawer .navbar button:focus-visible { outline:2px solid var(--dr-lit); outline-offset:-2px; }
.litedrawer .navbar .navico { width:22px; height:22px; stroke-width:1.5; opacity:.9; }
.litedrawer .navbar .navlab { align-items:center; gap:0; font:600 11.5px/1.1 var(--body); letter-spacing:.015em; }
.litedrawer .navbar .navlab em { display:none; }
.litedrawer .navbar button[aria-selected="true"] {
  color:var(--dr-lit); border:0;
  background:linear-gradient(180deg, rgba(240,213,126,.22), rgba(240,213,126,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(240,213,126,.38), 0 6px 18px -8px rgba(240,213,126,.45);
}
.litedrawer .navbar button[aria-selected="true"] .navico { opacity:1; }
.litedrawer .navbar button[aria-selected="true"]::after {
  content:""; position:absolute; bottom:4px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%;
  background:var(--dr-lit); box-shadow:0 0 8px var(--dr-lit);
}
@media (prefers-reduced-motion: reduce) { .litedrawer .navbar button { transition:none; } }

.litedrawer-body {
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; padding:14px 14px calc(28px + env(safe-area-inset-bottom));
}
.litedrawer[data-state="peek"] .litedrawer-body { visibility:hidden; }
.litedrawer-body > .navsec > .swarabox { margin-top:0; }
.litedrawer-body .colophon { margin-top:28px; }
@media (min-width:760px) { .litedrawer-body { padding:18px 22px 36px; } }

/* ---- the Time table: the day as a line of capsules ---------------------- */
.tmtwrap { background:rgba(4,6,14,.5); }
.tmtsheet { background:var(--glass); -webkit-backdrop-filter:blur(26px) saturate(1.3); backdrop-filter:blur(26px) saturate(1.3); border-color:var(--glass-line); }
@media (min-width:760px) { .tmtsheet { border-radius:28px; } }
.tmthead { background:color-mix(in srgb, var(--panel) 90%, transparent); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:0 10px 16px -14px rgba(0,0,0,.6); }
.tmtsum div, .tmtbreath, .tmtnowone, .tmtshape, .tmtalarm, .tmtpush, .tmttruth, .tmtcheck.big { border-radius:var(--r-md); }
.tmtbtn, .tmtdays button, .tmtobs button { border-radius:999px; }
.tmttabs button { border-radius:var(--r-md); }
.tmtlist::before { left:73px; width:0; border-left:2px dotted var(--rule); background:none; }
.tmtlist.mine::before { left:105px; }
.tmtrow { grid-template-columns:56px 34px minmax(0,1fr); align-items:start; }
.tmtlist.mine .tmtrow { grid-template-columns:88px 34px minmax(0,1fr); }
.tmtdot { display:grid; place-items:center; width:30px; min-height:30px; height:30px; border-radius:15px; margin:0 auto; z-index:1;
  background:var(--dim); color:#fff; font:700 12px/1 var(--body); }
.tmtdot::after { display:none; }
.tmtrow.want-ida .tmtdot { background:var(--soma); }
.tmtrow.want-pingala .tmtdot { background:var(--sindoor); }
.tmtrow.want-sushumna .tmtdot { background:var(--jade); }
.tmtrow.want-none .tmtdot { background:color-mix(in srgb, var(--dim) 55%, var(--panel)); }
.tmtrow.needs .tmtdot { box-shadow:0 0 0 3px color-mix(in srgb, var(--brass-hi) 55%, transparent); }
.tmtrow.now .tmtdot { box-shadow:0 0 0 4px color-mix(in srgb, var(--brass-hi) 40%, transparent); }
.tmtrow.done .tmtdot, .tmtrow.past .tmtdot { opacity:.4; }
.tmtrow.now .tmtmain { border-radius:var(--r-md); }
.tmtchip { border-radius:999px; }
/* an alarm stays up until it is answered: an opaque plate, no blur of everything moving under it (2026-10-22: "alarm popup notifications
   are making the entire app to hang") */
.tmttoast { border-radius:var(--r-lg); background:var(--panel); }


/* ---- footer ------------------------------------------------------------ */
.colophon { border-top-color:var(--rule-soft); }

/* no line under the dial: Pro's 'drag the dial sideways' is untrue now the whole
   dial fits, and the user asked for no 'tap any mark' line either */
.platearea::after { content:none !important; display:none !important; }
/* the time-travel steps wrap onto two rows on a phone; a softer radius keeps both rows whole */
.seg { border-radius:var(--r-md); }

/* LITE: the header on the narrowest phones (kept last, so it wins over the base
   header rules above). The brand column stops being a fixed
   "auto" that will not shrink; the controls tighten, and below 340px the wordmark
   gives way to the logomark alone rather than sliding under the buttons. */
@media (max-width:420px) {
  .topbar { grid-template-columns: auto minmax(0,1fr) auto; gap: 6px; }
  .topbar .brand { justify-content: center; gap: 8px; }
  .ctl { padding: 0 10px; }
}
@media (max-width:339px) {
  .topbar .btext { display: none; }
  .ctl { padding: 0 8px; }
}


/* ---- "Whose clock is this?": only the fields a person actually fills in ----
   The user's instruction. Latitude, longitude, timezone and UTC offset are
   filled from the place, for the birthplace and the current location alike,
   so they are hidden. They come back only when a place cannot be found, which
   is the one time a person has to type them (marked by lite/src/ui-lite-shell.js). */
.lite-app .lite-autofield { display:none; }
.lite-app #intake.lite-manual-birth .lite-autofield.birth,
.lite-app #intake.lite-manual-here .lite-autofield.here { display:block; }

/* ---- "Whose clock is this?" — the person form, as an app's onboarding ------
   The user's instruction: minimal, highly polished, premium; only the fields a
   person fills in (the auto fields are hidden above); no explanatory prose.
   Hidden here, not deleted — still in the page, as in Pro:
     .intake .tsub      "name, date, time and place — nothing else is needed"
     .intake .lede      the paragraph about the plate and what leaves the page
     .hererow-note      the note under current location, and #f-lagnaspread
     .placehint.ok      "found — coordinates and timezone filled" (warnings stay)
     .emptystate        "No clock running yet" (the form itself is the empty state)
   Layout: a single glass card; the inputs sit in rounded, grouped lists the way
   a phone's own settings do; one gold primary action; a switch, not a checkbox. */
.lite-app .intake .tsub,
.lite-app .intake .lede,
.lite-app .hererow-note,
.lite-app .placehint.ok { display:none !important; }
/* the Person sheet open: a class on the root (ui-lite-shell.js ldBoot), never :has() on <html> — that re-checked the whole page for every
   element added anywhere (2026-10-23) */
html.lite-app.lperson-open .emptystate { display:none !important; }
.lite-app .emptystate { border-radius:30px; border-style:solid; border-color:var(--glass-line); background:var(--glass); }

.lite-app #drawer-person {
  width:min(100%, 560px); margin:6px auto 18px; padding:0;
  border:1px solid var(--glass-line); border-radius:30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 160px),
    radial-gradient(90% 40% at 0% 0%, rgba(143,134,214,.14), transparent 70%),
    radial-gradient(90% 40% at 100% 0%, rgba(214,177,115,.10), transparent 70%),
    color-mix(in srgb, var(--panel) 78%, transparent);
  -webkit-backdrop-filter:blur(28px) saturate(1.4); backdrop-filter:blur(28px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 30px 70px -36px rgba(0,0,0,.85);
}
/* with a chart on screen, Person opens as a sheet over the dial rather than pushing it down */
.lite-has-chart #drawer-person:not([hidden]) {
  position:fixed; z-index:8700; left:0; right:0; bottom:0; top:var(--lite-sheet-top, var(--lite-head, 72px));      /* under the header, on the screen */
  margin:0 auto; border-radius:30px 30px 0 0; border-bottom:0; overflow-y:auto; overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom);
  animation:litepersonup .34s cubic-bezier(.22,.9,.24,1);
}
@keyframes litepersonup { from { transform:translateY(40px); opacity:.3; } }
@media (prefers-reduced-motion: reduce) { .lite-has-chart #drawer-person:not([hidden]) { animation:none; } }
html.lite-app.lperson-open .litedrawer { visibility:hidden; }

.lite-app #drawer-person .drawerhead { padding:16px 18px 6px 22px; border-bottom:0; }
.lite-app #drawer-person .drawerhead h2 { font:600 12px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.lite-app #drawer-person .drawerhead .ghost { padding:8px 16px; font:600 13px/1 var(--body); border-color:var(--rule); }

.lite-app .personbar { margin:6px 18px 4px; padding:10px 12px; border:1px solid var(--rule-soft); border-left-width:1px; border-radius:18px; background:color-mix(in srgb, var(--panel) 60%, transparent); }
.lite-app .pb-switch select { border-radius:12px; font:500 14px/1.2 var(--body); padding:8px 10px; }

.lite-app .intake { padding:6px 18px 22px; border:0; background:transparent; box-shadow:none; margin:0; }
.lite-app .intake summary { display:block; padding:8px 4px 16px; }
.lite-app .intake summary::-webkit-details-marker { display:none; }
.lite-app .intake summary h2 { display:block; font:400 clamp(28px, 7.4vw, 36px)/1.08 var(--display); color:var(--ink); letter-spacing:.005em; }

/* grouped lists */
.lite-app .intake .fields,
.lite-app .intake .fieldrow,
.lite-app .intake .optrow {
  display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin:0 0 12px; padding:0;
  border:1px solid var(--rule-soft); border-radius:20px; overflow:hidden;
  background:color-mix(in srgb, var(--ground) 45%, transparent);
}
.lite-app .intake .fields > label,
.lite-app .intake .fieldrow > label {
  position:relative; padding:11px 16px 10px; border-top:1px solid var(--rule-soft); transition:background .2s;
}
.lite-app .intake .fields > label:first-child,
.lite-app .intake .fieldrow > label:first-child { border-top:0; }
.lite-app .intake .fields > label:focus-within,
.lite-app .intake .fieldrow > label:focus-within { background:color-mix(in srgb, var(--brass) 9%, transparent); }
.lite-app .intake .lbl { margin:0 0 3px; font:600 10.5px/1.2 var(--body); letter-spacing:.12em; color:var(--dim); }
.lite-app .intake .lbl .auto { font-style:normal; color:var(--brass); }
.lite-app .intake input:not([type="checkbox"]),
.lite-app .intake select,
.lite-app .intake .dtread {
  width:100%; min-height:30px; margin:0; padding:2px 0; border:0; border-radius:0; background:transparent;
  font:500 17px/1.35 var(--body); color:var(--ink); box-shadow:none; outline:none;
}
.lite-app .intake input::placeholder { color:color-mix(in srgb, var(--dim) 80%, transparent); font-weight:400; }
.lite-app .intake select { -webkit-appearance:none; appearance:none; cursor:pointer;
  background:linear-gradient(45deg, transparent 50%, var(--dim) 50%) right 6px center / 6px 6px no-repeat,
             linear-gradient(-45deg, transparent 50%, var(--dim) 50%) right 0 center / 6px 6px no-repeat; padding-right:22px; }
:root:not([data-theme="light"]).lite-app .intake input,
:root[data-theme="dark"].lite-app .intake input { color-scheme:dark; }
.lite-app .intake .dtread { min-height:0; font-size:15px; color:var(--ink-2); }
.lite-app .intake .dtwide { grid-column:auto; }
.lite-app .intake input:focus-visible, .lite-app .intake select:focus-visible { outline:none; }
/* the "use the birthplace" row: a quiet text action, not a boxed button */
.lite-app #hererow > label:last-child .lbl { display:none; }
.lite-app #hererow > label:last-child { padding:8px 16px 10px; }
.lite-app #here-reset { width:auto; padding:6px 0; border:0; background:none; font:600 14px/1 var(--body); color:var(--brass-hi); cursor:pointer; }

/* the birth-time switch */
.lite-app .intake .optrow { grid-template-columns:minmax(0,1fr); }
.lite-app .intake .check { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 16px; font:500 15px/1.3 var(--body); color:var(--ink); }
.lite-app .intake .check span { order:0; }
.lite-app .intake .check input {
  order:1; flex:0 0 auto; -webkit-appearance:none; appearance:none; width:50px; height:30px; margin:0; border-radius:15px; position:relative; cursor:pointer;
  background:color-mix(in srgb, var(--ink) 18%, transparent); transition:background .2s;
}
.lite-app .intake .check input::after {
  content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35); transition:transform .22s cubic-bezier(.22,.9,.24,1);
}
.lite-app .intake .check input:checked { background:var(--brass); }
.lite-app .intake .check input:checked::after { transform:translateX(20px); }
.lite-app .intake .check input:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lite-app .intake .optrow .placehint { display:block; padding:0 16px 12px; font:500 13px/1.4 var(--body); }
.lite-app .intake .optrow .placehint:empty { display:none; }

/* actions */
.lite-app .intake .row-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; margin-top:18px; }
.lite-app .intake button.go {
  width:100%; min-height:54px; border-radius:18px; font:700 16px/1 var(--body); letter-spacing:.02em; text-transform:none; color:#17130A;
  background:linear-gradient(180deg, #F2D98A, #D6B173 55%, #C29A52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 14px 30px -14px rgba(214,177,115,.7);
  transition:transform .15s, box-shadow .2s, filter .2s;
}
.lite-app .intake button.go:hover { filter:brightness(1.05); }
.lite-app .intake button.go:active { transform:scale(.985); }
.lite-app .intake #f-ref { width:100%; min-height:44px; border:0; background:none; font:600 14.5px/1 var(--body); color:var(--ink-2); }
.lite-app .intake #f-ref:hover { color:var(--brass-hi); }
.lite-app .intake .err { text-align:center; font:500 13px/1.4 var(--body); }

/* saved people: a row of pills */
.lite-app .intake .saved { margin-top:14px; padding-top:14px; border-top:1px solid var(--rule-soft); }
.lite-app .intake .saved > .lbl { font-size:0; }
.lite-app .intake .saved > .lbl::before { content:"Saved"; font:600 10.5px/1.2 var(--body); letter-spacing:.12em; }
.lite-app .intake .chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.lite-app .intake .chips::-webkit-scrollbar { display:none; }
.lite-app .intake .chip-person { flex:0 0 auto; border-radius:999px; padding:8px 10px 8px 14px; border-color:var(--rule); background:color-mix(in srgb, var(--panel) 70%, transparent); }
.lite-app .intake .chip-person.on { border-color:var(--brass); }

/* ---- the person form, given room ----------------------------------------
   The user's instruction: nothing cluttered or closely spaced. Each group is
   separated by a clear gap, each row has generous padding, the label sits a
   comfortable step above its value, and the header never covers the title. */
.lite-app #drawer-person, .lite-app #intake { scroll-margin-top:calc(var(--lite-head, 72px) + 12px); }
.lite-app #drawer-person .drawerhead { padding:20px 22px 4px 26px; }
.lite-app .intake { padding:8px 22px 30px; }
.lite-app .intake summary { padding:10px 4px 26px; }
.lite-app .intake summary h2 { font:300 clamp(30px, 8vw, 40px)/1.08 var(--display); letter-spacing:-.01em; }

.lite-app .intake .fields,
.lite-app .intake .fieldrow,
.lite-app .intake .optrow { margin:0 0 20px; border-radius:22px; }
.lite-app .intake .fields > label,
.lite-app .intake .fieldrow > label { padding:16px 20px 15px; }
.lite-app .intake .lbl {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0 0 7px;
  font:500 11px/1.2 var(--body); letter-spacing:.1em;
}
.lite-app .intake .lbl .auto {
  padding:3px 7px; border-radius:999px; font:600 9.5px/1 var(--body); letter-spacing:.08em;
  color:var(--brass-hi); background:color-mix(in srgb, var(--brass) 14%, transparent); border:0;
}
.lite-app .intake input:not([type="checkbox"]),
.lite-app .intake select { min-height:32px; font:500 18px/1.35 var(--body); }
.lite-app #hererow > label:last-child { padding:12px 20px 14px; }
.lite-app .intake .check { padding:17px 20px; gap:18px; font-size:15.5px; line-height:1.4; }
.lite-app .intake .optrow .placehint { padding:0 20px 16px; }
.lite-app .intake .row-actions { gap:10px; margin-top:28px; }
.lite-app .intake button.go { min-height:58px; border-radius:20px; font-size:17px; }
.lite-app .intake .saved { margin-top:26px; padding-top:22px; }
.lite-app .intake .saved > .lbl { margin-bottom:12px; }
.lite-app .intake .chips { gap:10px; }
.lite-app .personbar { margin:10px 22px 6px; padding:14px 16px; gap:12px 16px; border-radius:22px; }

/* "As entered" says the date back once there is a date to say; empty, it is noise */
.lite-app #dtrow > label.lite-empty-read { display:none; }

/* current location is a main field: no "optional" badge */
.lite-app .lite-mainhere .lbl .auto { display:none; }

/* with a chart running, Pro folds the form away behind its title; in Lite that
   folded title is a clear row to tap, not a heading floating over empty space */
.lite-app .intake:not([open]) { padding-bottom:24px; }
.lite-app .intake:not([open]) summary {
  display:flex; align-items:center; gap:14px; margin:4px 0 0; padding:16px 18px;
  border:1px solid var(--rule-soft); border-radius:22px; background:color-mix(in srgb, var(--ground) 45%, transparent);
  transition:background .2s, border-color .2s;
}
.lite-app .intake:not([open]) summary:hover { border-color:color-mix(in srgb, var(--brass) 40%, transparent); }
.lite-app .intake:not([open]) summary::before {
  content:"+"; flex:0 0 auto; display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  font:400 22px/1 var(--body); color:#17130A; background:linear-gradient(180deg, #F2D98A, #C29A52);
}
.lite-app .intake:not([open]) summary h2 { flex:1 1 auto; font:500 17px/1.3 var(--body); letter-spacing:0; color:var(--ink); }
.lite-app .intake:not([open]) summary::after { content:"›"; font:300 26px/1 var(--body); color:var(--dim); }
.lite-app .intake summary:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:22px; }

/* the saved-people switcher above it, in the same language */
.lite-app .personbar { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:12px 22px 14px; padding:16px 18px; background:color-mix(in srgb, var(--ground) 45%, transparent); }
.lite-app .personbar[hidden] { display:none; }
.lite-app .personbar .pb-switch { display:grid; grid-template-columns:minmax(0,1fr); gap:7px; }
.lite-app .personbar .lbl { margin:0; font:500 11px/1.2 var(--body); letter-spacing:.1em; color:var(--dim); }
.lite-app .personbar .pb-switch select {
  width:100%; min-width:0; min-height:44px; padding:8px 34px 8px 14px; border:1px solid var(--rule); border-radius:14px;
  font:500 17px/1.3 var(--body); color:var(--ink); -webkit-appearance:none; appearance:none;
  background:linear-gradient(45deg, transparent 50%, var(--dim) 50%) right 20px center / 6px 6px no-repeat,
             linear-gradient(-45deg, transparent 50%, var(--dim) 50%) right 14px center / 6px 6px no-repeat,
             color-mix(in srgb, var(--panel) 70%, transparent);
}
.lite-app .personbar #pb-edit { justify-self:start; padding:10px 16px; border-radius:999px; font:600 14px/1 var(--body); }

/* ---- the person under the dial -------------------------------------------
   The user's instructions: recognisably theirs, professional, polished, with the
   Pragati phase and how long it runs, and clear of the dial.
     the name     a quiet display title
     the phase    one glass card: the band lit in its colour, the date it ends,
                  a hairline showing how far through it they are, what is left
     the details  date, time, place and ayanamsa as one calm line of small marks */
.lite-has-chart .wholine {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  margin:30px auto 0; padding:0 12px; width:100%; max-width:460px; text-align:center;
}
@media (min-width:760px) { .lite-has-chart .wholine { margin-top:34px; } }
.lite-has-chart .wholine .pb-name {
  margin:0; font:400 clamp(24px, 6.4vw, 34px)/1.08 var(--display); letter-spacing:-.015em; color:var(--ink); text-wrap:balance;
}
.lite-has-chart .wholine .pb-meta {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 16px; margin:0;
  font:500 13px/1.2 var(--body); color:var(--ink-2); letter-spacing:.005em;
}
.pbm { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.pbm svg { width:14px; height:14px; flex:0 0 auto; fill:none; stroke:color-mix(in srgb, var(--brass-hi) 80%, transparent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pbm.quiet { color:var(--dim); }
.pbm.quiet svg { stroke:var(--dim); }
.pbm.warn { color:color-mix(in srgb, var(--sindoor) 75%, var(--ink)); }
@media (max-width:340px) { .pbm { white-space:normal; } }

/* the Pragati phase card */
.litepg {
  --pg:var(--brass);
  display:grid; gap:8px; width:100%; padding:12px 16px 11px; border-radius:18px; text-align:left;
  border:1px solid color-mix(in srgb, var(--pg) 28%, transparent);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 60%),
    linear-gradient(100deg, color-mix(in srgb, var(--pg) 16%, transparent), color-mix(in srgb, var(--pg) 4%, transparent) 70%),
    color-mix(in srgb, var(--panel) 55%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.litepg[hidden] { display:none; }
.litepg.strong { --pg:var(--jade); } .litepg.mixed { --pg:var(--brass); } .litepg.testing { --pg:var(--sindoor); }
.litepg-top { display:flex; align-items:center; gap:8px; min-width:0; font:500 13px/1.2 var(--body); color:var(--ink-2); }
.litepg-top i { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--pg); box-shadow:0 0 10px var(--pg); }
.litepg-k { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.litepg-top b { font-weight:700; color:color-mix(in srgb, var(--pg) 65%, var(--ink)); }
.litepg-until { margin-left:auto; white-space:nowrap; color:var(--ink); font-weight:500; }
.litepg-track { height:3px; border-radius:2px; background:color-mix(in srgb, var(--ink) 12%, transparent); overflow:hidden; }
.litepg-track span { display:block; height:100%; border-radius:2px; background:linear-gradient(90deg, color-mix(in srgb, var(--pg) 50%, transparent), var(--pg)); }
.litepg-foot { display:flex; justify-content:space-between; gap:12px; font:500 11.5px/1.2 var(--body); color:var(--dim); }
@media (max-width:360px) { .litepg-top { flex-wrap:wrap; } .litepg-until { margin-left:0; flex-basis:100%; } }

/* the collapsed drawer, thinner (the user's instruction) */
.lite-has-chart .litedrawer .litegrab { height:26px; }
.lite-has-chart .litedrawer .litegrab i { width:36px; height:4px; }
.lite-has-chart .litedrawer[data-state="open"] .litegrab { height:28px; }
.lite-has-chart .litedrawer::before { border-radius:22px 22px 0 0; }
/* and clear of the dial on tablets and desktops */
@media (min-width:760px) {
  .lite-has-chart .dialbox svg { width:min(100%, calc(100svh - var(--lite-head, 72px) - var(--lite-peek, 26px) - var(--lite-name, 160px) - 96px), 1040px); }
}

/* ---- scrollbars in the app's own colours, not the browser's grey ------------
   The user's instruction, for the open drawer; the same thin brass thumb is used
   in every sheet that scrolls, so one app never shows two kinds of scrollbar. */
.litedrawer-body, #drawer-person, .tmtsheet, .btsheet {
  /* width and colour: the one rule for every scroller, SCROLLBARS at the end of this file */
}
.litedrawer-body::-webkit-scrollbar, #drawer-person::-webkit-scrollbar, .tmtsheet::-webkit-scrollbar, .btsheet::-webkit-scrollbar { width:6px; }
.litedrawer-body::-webkit-scrollbar-track, #drawer-person::-webkit-scrollbar-track, .tmtsheet::-webkit-scrollbar-track, .btsheet::-webkit-scrollbar-track { background:transparent; margin:14px 0; }
.litedrawer-body::-webkit-scrollbar-thumb, #drawer-person::-webkit-scrollbar-thumb, .tmtsheet::-webkit-scrollbar-thumb, .btsheet::-webkit-scrollbar-thumb {
  border-radius:3px; background:rgba(var(--acc-rgb, var(--lsb-rgb)), .3);
}
.litedrawer-body::-webkit-scrollbar-thumb:hover, #drawer-person::-webkit-scrollbar-thumb:hover { background:rgba(var(--acc-rgb, var(--lsb-rgb)), .6); }

/* ---- the summary under the name: Jeevan, Pragati, Swara ------------------
   Three glass widgets, the way a high-end app shows a day at a glance. On a
   phone they are a row you swipe, each card nearly the width of the screen with
   the next one peeking; from a tablet up they sit side by side. Each has one
   label, one headline, one small live picture and one line under it. */
.litesum { width:100%; max-width:980px; margin:18px auto 0; }
.litesum[hidden] { display:none; }
.litesum {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 84%); gap:12px;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding:0 14px; padding:2px 14px 6px;
  overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.litesum::-webkit-scrollbar { display:none; }
@media (min-width:700px) { .litesum { grid-auto-flow:row; grid-template-columns:repeat(3, minmax(0,1fr)); grid-auto-columns:auto; overflow:visible; padding:2px 16px 6px; } }

.lsw {
  --lsw-edge:rgba(240,213,126,.16);
  position:relative; display:grid; align-content:start; gap:9px; min-width:0; padding:14px 16px 13px; border-radius:22px;
  scroll-snap-align:start; text-align:left;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 55%),
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brass) 10%, transparent), transparent 60%),
    color-mix(in srgb, var(--panel) 62%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--lsw-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 34px -24px rgba(0,0,0,.8);
}
.lsw header { display:flex; align-items:center; gap:8px; min-width:0; }
.lsw-ico { width:17px; height:17px; flex:0 0 auto; fill:none; stroke:var(--brass-hi); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lsw-k { font:600 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.lsw-tag { margin-left:auto; padding:4px 8px; border-radius:999px; font:500 11px/1 var(--mono); color:var(--ink-2);
  background:color-mix(in srgb, var(--ink) 7%, transparent); white-space:nowrap; }
.lsw-h { font:500 19px/1.2 var(--display); letter-spacing:-.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lsw-h em { font-style:normal; font-weight:400; color:var(--ink-2); }
.lsw-strip { display:block; width:100%; height:10px; border-radius:5px; overflow:hidden; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.lsw-strip rect { shape-rendering:crispEdges; }
.lsw-track { height:10px; border-radius:5px; overflow:hidden; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.lsw-track span { display:block; height:100%; border-radius:5px; }
.lsw-scale { display:flex; justify-content:space-between; gap:8px; margin-top:-3px; font:500 10.5px/1.2 var(--body); color:var(--dim); }
.lsw-f { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font:500 12px/1.3 var(--body); color:var(--ink-2); }
.lsw-now, .lsw-legend { display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
.lsw-now i, .lsw-legend i { width:7px; height:7px; border-radius:50%; }
.lsw-now { font-family:var(--mono); font-size:11.5px; }

/* the summary replaces the separate Pragati card under the name */
.lite-has-chart #lite-pragati { display:none !important; }

/* ---- phone: one summary card at a time, the next one peeking ------------- */
@media (max-width:699px) {
  .litesum { grid-auto-columns:84%; }
  .lsw-h { font-size:18px; }
}

/* ---- tablet and desktop: room to breathe ---------------------------------
   The user's note: stacked down the middle it looked congested. On a wide screen
   the dial takes the left and the person takes the right — name, details, and
   the three widgets as a calm column — so nothing is squeezed under the dial. */
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  .lite-has-chart .stage {
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(340px, 400px);
    grid-template-rows:auto auto; align-content:center; justify-content:center;
    column-gap:clamp(40px, 5vw, 88px); row-gap:22px; max-width:1400px; padding:0 clamp(16px, 3vw, 48px);
  }
  .lite-has-chart .platearea { grid-column:1; grid-row:1 / span 2; align-self:center; }
  .lite-has-chart .wholine { grid-column:2; grid-row:1; align-self:end; margin:0; max-width:none; align-items:flex-start; text-align:left; padding:0; }
  .lite-has-chart .wholine .pb-meta { justify-content:flex-start; }
  .lite-has-chart .litesum { grid-column:2; grid-row:2; align-self:start; margin:0; max-width:none; padding:0;
    grid-auto-flow:row; grid-template-columns:minmax(0,1fr); grid-auto-columns:auto; overflow:visible; gap:12px; }
  .lite-has-chart .dialbox svg,
  .lite-has-chart .dialbox svg:is(*) {
    width:min(100%, calc(100svh - var(--lite-head, 72px) - var(--lite-peek, 26px) - 56px), 1000px) !important;
  }
}

/* ---- the collapsed drawer on a tablet or desktop: a slim tab, not a bar ---- */
@media (min-width:760px) {
  .lite-has-chart .litedrawer[data-state="peek"]::before {
    left:calc(50% - 110px); right:calc(50% - 110px); border-radius:16px 16px 0 0;
  }
  .lite-has-chart .litedrawer[data-state="peek"] .litegrab { width:220px; margin:0 auto; border-radius:16px 16px 0 0; }
  .lite-has-chart .litedrawer::before { transition:left .4s cubic-bezier(.22,.9,.24,1), right .4s cubic-bezier(.22,.9,.24,1), border-radius .4s; }
}

/* the "you are here" marker on a summary strip (the user asked for it prominent
   and unmistakable, without a label):
     - what is still to come is dimmed, so the lit part ends exactly at now
     - a gold needle crosses the strip there, standing proud above and below
     - a gold pointer sits on top of the needle, aimed down at the spot */
.lsw-stripwrap { position:relative; margin-top:14px; }
.lsw-strip { height:12px; border-radius:6px; }
.lsw-future { fill:var(--ground); fill-opacity:.62; }
.lsw-pin { position:absolute; top:-6px; bottom:-6px; width:0; transform:translateX(-50%); pointer-events:none; }
.lsw-pin::before { content:""; position:absolute; left:-1.5px; top:0; bottom:0; width:3px; border-radius:2px;
  background:var(--brass-hi); box-shadow:0 0 0 1.5px color-mix(in srgb, var(--ground) 85%, transparent), 0 0 12px color-mix(in srgb, var(--brass-hi) 70%, transparent); }
.lsw-pin i { position:absolute; left:-7px; top:-9px; width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent;
  border-top:9px solid var(--brass-hi); filter:drop-shadow(0 0 4px color-mix(in srgb, var(--brass-hi) 60%, transparent)); }
:root[data-theme="light"] .lsw-future { fill-opacity:.55; }

/* the collapsed drawer, thinner still on phones and tablets (the user's instruction) */
@media (max-width:1024px) {
  .lite-has-chart .litedrawer .litegrab { height:18px; }
  .lite-has-chart .litedrawer .litegrab i { width:34px; height:3px; }
  .lite-has-chart .litedrawer[data-state="open"] .litegrab { height:26px; }
  .lite-has-chart .litedrawer[data-state="peek"]::before { border-radius:14px 14px 0 0; }
}

/* the swara card names what it shows: the recommended nostril */
.lsw-cap { display:block; margin-bottom:3px; font:600 10.5px/1.2 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lsw-h:has(.lsw-cap) { white-space:normal; }

/* short screens: the whole dial stays a usable size on the first screen, and the
   name and summary scroll up from under it, rather than the dial shrinking to fit */
@media (max-width:979px), (max-aspect-ratio:5/4) {
  .lite-has-chart .dialbox svg,
  .lite-has-chart .dialbox svg:is(*) {
    width:clamp(min(100%, 280px, calc(100svh - var(--lite-head, 72px) - var(--lite-peek, 18px) - 24px)), calc(100svh - var(--lite-head, 72px) - var(--lite-peek, 18px) - var(--lite-name, 160px) - 44px), min(100%, 1040px)) !important;
  }
  .lite-has-chart .stage { min-height:0; padding-bottom:12px; }
}

/* ---- the summary, re-ranked: Swara leads, Jeevan and Pragati follow ----------
   The user's instruction: the graha-derived swara pattern is the USP and must be
   shown beautifully; Jeevan and Pragati are secondary. So Swara is one full-width
   hero card, and the other two sit beneath it as a compact pair. */
.litesum, .lite-has-chart .litesum {
  display:grid; grid-template-columns:minmax(0,1fr); grid-auto-flow:row; grid-auto-columns:auto; gap:12px;
  overflow:visible; scroll-snap-type:none; padding:0 14px 6px;
}
@media (min-width:700px) { .litesum, .lite-has-chart .litesum { max-width:640px; padding:0 16px 6px; } }
.lsw-pair { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (max-width:359px) { .lsw-pair { grid-template-columns:minmax(0,1fr); } }

/* the secondary pair: quieter and smaller */
.lsw-pair .lsw { gap:7px; padding:11px 13px 11px; border-radius:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.lsw-pair .lsw-k { font-size:10px; }
.lsw-pair .lsw-ico { width:15px; height:15px; }
.lsw-pair .lsw-tag { font-size:10px; padding:3px 6px; }
.lsw-pair .lsw-h { font-size:15px; }
.lsw-pair .lsw-strip, .lsw-pair .lsw-track { height:8px; }
.lsw-pair .lsw-stripwrap { margin-top:10px; }
.lsw-pair .lsw-scale { font-size:10px; }
.lsw-pair .lsw-f { font-size:11px; gap:2px 8px; }
.lsw-pair .lsw-f > span:first-child { flex-basis:100%; }

/* ---- your swara code: first, clear, compact ---------------------------------
   The user's instructions: show the person their own swara code plainly first,
   and keep the cards small enough that the dial stays the centrepiece. */
.lscode {
  display:grid; gap:10px; padding:13px 15px 12px; border-radius:20px; text-align:left;
  background:
    radial-gradient(100% 90% at 0% 0%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 55%),
    color-mix(in srgb, var(--panel) 66%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid color-mix(in srgb, var(--brass) 26%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.lscode-top { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.lscode-id { display:grid; gap:4px; min-width:0; }
.lscode-id .lsw-k { font-size:10px; color:var(--dim); }
.lscode-id b { font:500 clamp(19px, 5.2vw, 23px)/1 var(--mono); letter-spacing:.06em; color:var(--brass-hi); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lscode-lean { padding:5px 10px; border-radius:999px; font:600 11.5px/1 var(--body); letter-spacing:.01em; white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--lc, var(--brass-hi)) 40%, transparent); color:color-mix(in srgb, var(--lc, var(--brass-hi)) 70%, var(--ink));
  background:color-mix(in srgb, var(--lc, var(--brass-hi)) 12%, transparent); }
.lscode-lean.n-ida { --lc:var(--soma); } .lscode-lean.n-pingala { --lc:var(--sindoor); } .lscode-lean.n-sushumna { --lc:var(--brass-hi); }
.lscode-share { display:flex; height:6px; border-radius:3px; overflow:hidden; gap:2px; }
.lscode-share span { display:block; height:100%; border-radius:2px; }
.lscode-facts { display:flex; flex-wrap:wrap; gap:4px 12px; font:500 11.5px/1.2 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lscode-facts span { display:inline-flex; align-items:center; gap:5px; }
.lscode-facts i { width:7px; height:7px; border-radius:50%; }
.lscode-facts .turn { color:var(--dim); }
.lscode-facts.wait { color:var(--dim); font-style:italic; }
.lscode-today { display:grid; gap:8px; padding-top:9px; border-top:1px solid var(--rule-soft); }
.lscode-today .lsw-stripwrap { margin-top:7px; }
.lscode-strip { height:9px !important; border-radius:5px !important; }
.lscode-now { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; font:500 12px/1.25 var(--body); color:var(--ink-2); }
.lscode-now .k { font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lscode-now b { font:600 14.5px/1.1 var(--body); }
.lscode-now .nx { display:inline-flex; align-items:center; gap:5px; color:var(--dim); }
.lscode-now .nx i { width:7px; height:7px; border-radius:50%; }

/* the secondary pair, smaller still: label, headline, strip — no footer */
.lsw-pair .lsw { gap:6px; padding:10px 12px 11px; border-radius:16px; }
.lsw-pair .lsw-f { display:none; }
.lsw-pair .lsw-h { font-size:14px; }
.lsw-pair .lsw-scale { display:none; }
.lsw-pair .lsw-tag { font-size:9.5px; }
.lsw-pair .lsw-stripwrap { margin-top:8px; }
.lsw-pair .lsw-strip, .lsw-pair .lsw-track { height:6px; }
.lsw-pair .lsw-track { margin-top:4px; }
.lsw-pair .lsw-pin i { left:-5px; top:-7px; border-left-width:5px; border-right-width:5px; border-top-width:7px; }

/* wide screens: the right column holds the hero, then the pair */
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  .lite-has-chart .litesum { padding:0; max-width:none; }
}

/* the dial keeps priority: on a stacked screen it takes the height, with only the
   name peeking beneath, and the summary scrolls up into view */
@media (max-width:979px), (max-aspect-ratio:5/4) {
  .lite-has-chart .dialbox svg,
  .lite-has-chart .dialbox svg:is(*) {
    width:clamp(min(100%, 280px, calc(100svh - var(--lite-head, 72px) - var(--lite-peek, 18px) - 24px)), calc(100svh - var(--lite-head, 72px) - var(--lite-peek, 18px) - 190px), min(100%, 1040px)) !important;
  }
}

/* ---- decluttered home (the user's note: still congested) -------------------
   one slim swara code card, then Jeevan and Pragati as a single line of text */
.litesum, .lite-has-chart .litesum { gap:14px; }
@media (min-width:700px) { .litesum, .lite-has-chart .litesum { max-width:520px; } }
.lscode { gap:12px; padding:14px 16px 13px; }
.lscode-today { padding-top:0; border-top:0; gap:10px; }
.lscode-now { gap:4px 10px; }
.lscode-now .tat { color:var(--ink); }
.lsline { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin:0; font:500 12.5px/1.3 var(--body); color:var(--ink-2); }
.lsline span { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.lsline em { font-style:normal; font:600 10px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lsline i { width:7px; height:7px; border-radius:50%; }
@media (min-width:980px) and (min-aspect-ratio:5/4) { .lite-has-chart .lsline { justify-content:flex-start; } }

/* ---- the calm home (the user's instruction: high-end, not cluttered) ----------
   No cards, pills, strips or icons under the dial: a light name, one dim line of
   details, then one focal statement and two quiet captions, with space between. */
.lite-has-chart .wholine { gap:8px; margin-top:26px; }
.lite-has-chart .wholine .pb-name { font:300 clamp(26px, 7vw, 36px)/1.05 var(--display); letter-spacing:-.02em; }
.lite-has-chart .wholine .pb-meta { gap:0; font:400 13px/1.3 var(--body); color:var(--dim); }
.lite-has-chart .wholine .pb-meta span + span::before { content:'\00b7'; margin:0 8px; color:color-mix(in srgb, var(--dim) 60%, transparent); }
.litesum, .lite-has-chart .litesum { gap:18px; margin-top:30px; padding:0 20px 8px; max-width:520px; }
.lcalm { display:grid; justify-items:center; gap:6px; text-align:center; }
.lcalm-k { font:500 10.5px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.lcalm-nadi { font:400 clamp(28px, 7.6vw, 38px)/1.05 var(--display); letter-spacing:-.02em; }
.lcalm-sub { font:400 14px/1.3 var(--body); color:var(--ink-2); }
.lcalm-code { margin-top:12px; font:500 12px/1.3 var(--mono); letter-spacing:.08em; color:var(--brass); }
.lcalm-code em { font:400 12px/1.3 var(--body); font-style:normal; letter-spacing:0; color:var(--dim); }
.lite-has-chart .lsline { gap:0; font:400 12px/1.3 var(--body); color:var(--dim); }
.lite-has-chart .lsline span + span::before { content:'\00b7'; margin:0 8px; }
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  .lite-has-chart .litesum { padding:0; margin-top:10px; }
  .lcalm { justify-items:start; text-align:left; }
}

/* ---- your swara code, as four genes (the user's instruction: like a genetic code) ---- */
.lgene { display:grid; justify-items:center; gap:10px; text-align:center; }
.lgene-row { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); width:100%; max-width:420px; }
.lgene-g { display:grid; justify-items:center; align-content:start; gap:6px; padding:0 4px; min-width:0; cursor:help; }
.lgene-g + .lgene-g { border-left:1px solid var(--rule-soft); }
.lgene-g b { font:500 clamp(22px, 6.2vw, 30px)/1 var(--mono); letter-spacing:.04em; color:var(--brass-hi); }
.lgene-g span { font:400 11.5px/1.3 var(--body); color:var(--ink-2); text-wrap:balance; }
.lgene-note { font:400 11px/1.3 var(--body); color:var(--dim); }
.lite-has-chart .litesum { gap:26px; }
.lcalm-nadi { font-size:clamp(22px, 6vw, 28px); }
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  .lgene { justify-items:start; text-align:left; }
  .lgene-g { justify-items:start; padding:0 14px; } .lgene-g:first-child { padding-left:0; }
}

/* ---- your swara code, drawn (the user's instruction: visuals, not letters) ----
   A short spec sheet of the breath: three gauges and the element shapes, aligned
   in one column so they read at a glance, each with a few plain words. */
.lcode2 { display:grid; justify-items:center; gap:12px; width:100%; }
.lcr-list { display:grid; gap:11px; width:100%; max-width:380px; }
.lcr { display:grid; grid-template-columns:74px minmax(0,1fr) 96px; align-items:center; gap:12px; cursor:help; }
.lcr-k { font:500 11px/1.2 var(--body); letter-spacing:.06em; color:var(--dim); text-align:left; }
.lcr-v { font:500 12.5px/1.2 var(--body); color:var(--ink); text-align:right; white-space:nowrap; }
.lcg-ends { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:7px; }
.lcg-ends em { font:500 9.5px/1 var(--body); font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.lcg { position:relative; height:6px; border-radius:3px; }
.lcg.side { background:linear-gradient(90deg, var(--soma), color-mix(in srgb, var(--ink) 16%, transparent) 50%, var(--sindoor)); }
.lcg.pace { background:linear-gradient(90deg, color-mix(in srgb, var(--brass) 20%, transparent), color-mix(in srgb, var(--brass) 70%, transparent)); }
.lcg-mid { position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:color-mix(in srgb, var(--ink) 35%, transparent); }
.lcg-dot { position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--ground) 85%, transparent), 0 0 12px color-mix(in srgb, var(--brass-hi) 60%, transparent); }
.lcb { position:relative; height:6px; border-radius:3px; background:color-mix(in srgb, var(--ink) 12%, transparent); overflow:hidden; }
.lcb i { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:linear-gradient(90deg, color-mix(in srgb, var(--brass-hi) 55%, transparent), var(--brass-hi)); }
.lce-row { display:flex; gap:14px; }
.lce { display:inline-flex; align-items:center; gap:6px; font:500 12.5px/1 var(--body); color:var(--ink); white-space:nowrap; }
.lce svg { width:16px; height:16px; fill:color-mix(in srgb, var(--ec) 35%, transparent); stroke:var(--ec); stroke-width:1.6; stroke-linejoin:round; }
@media (max-width:340px) { .lcr { grid-template-columns:62px minmax(0,1fr) 78px; gap:8px; } .lcr-v { font-size:11px; } }
@media (min-width:980px) and (min-aspect-ratio:5/4) { .lcode2 { justify-items:start; } }

/* the two gauges share one width, so their markers compare at a glance */
.lcg-ends { grid-template-columns:36px minmax(0,1fr) 36px; }
.lcg-ends em { text-align:center; }
.lcb { margin:0 43px; }
.lce-row { padding-left:43px; }

/* ---- your breath pattern today: one premium band (the user's instruction) ------
   Soft segments with hairline gaps in a deep rounded well, a gloss along the top,
   the past lit and the rest of the day veiled, a white marker at now, and only
   three plain time labels. */
.lpattern { display:grid; gap:12px; width:100%; max-width:440px; margin:0 auto; }
.lpattern-hd { display:grid; justify-items:center; gap:4px; }
.lpattern-src { font:400 11.5px/1.2 var(--body); color:var(--dim); }
.lband { position:relative; padding-top:22px; }
.lband-track { position:relative; height:30px; border-radius:15px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55), inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 10px 24px -16px rgba(0,0,0,.8); }
.lband-track::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%, rgba(0,0,0,.18)); }
.lband-s { position:absolute; top:0; bottom:0; box-shadow:inset -1.5px 0 0 color-mix(in srgb, var(--ground) 70%, transparent); }
.lband-s.n-ida, .lband-key i.n-ida { background:linear-gradient(180deg, color-mix(in srgb, var(--soma) 85%, white 15%), var(--soma)); }
.lband-s.n-pingala, .lband-key i.n-pingala { background:linear-gradient(180deg, color-mix(in srgb, var(--sindoor) 85%, white 15%), var(--sindoor)); }
.lband-s.n-sushumna, .lband-key i.n-sushumna { background:linear-gradient(180deg, color-mix(in srgb, var(--brass-hi) 90%, white 10%), var(--brass)); }
.lband-future { position:absolute; top:0; bottom:0; right:0; background:color-mix(in srgb, var(--ground) 58%, transparent); pointer-events:none; }
.lband-sun { position:absolute; top:4px; bottom:4px; width:0; border-left:1.5px dotted rgba(255,255,255,.55); pointer-events:none; }
.lband-now { position:absolute; top:0; bottom:-6px; width:0; pointer-events:none; }
.lband-now::before { content:''; position:absolute; left:-1.5px; top:18px; bottom:0; width:3px; border-radius:2px; background:#fff;
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--ground) 80%, transparent), 0 0 14px rgba(255,255,255,.55); }
.lband-now b { position:absolute; bottom:calc(100% - 16px); left:0; transform:translateX(-50%); padding:3px 8px; border-radius:999px;
  font:600 10.5px/1 var(--body); letter-spacing:.04em; color:#111; background:#fff; white-space:nowrap; box-shadow:0 4px 12px -4px rgba(0,0,0,.6); }
.lband-axis { position:relative; display:flex; justify-content:space-between; margin-top:9px; font:500 11px/1.2 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }
.lband-axis .mid { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
@media (max-width:359px) { .lband-axis .mid { display:none; } }
.lband-key { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 16px; font:500 12px/1.2 var(--body); color:var(--ink-2); }
.lband-key span { display:inline-flex; align-items:center; gap:7px; }
.lband-key i { width:18px; height:8px; border-radius:4px; display:inline-block; }
.lcalm-k { letter-spacing:.16em; }
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  .lpattern { margin:0; } .lpattern-hd { justify-items:start; } .lband-key { justify-content:flex-start; }
}

/* ---- the cosmic rhythm, and how in tune the person is with it ------------------ */
.lband.has-ideal { padding-top:40px; }
.lband-track.ideal { height:12px; border-radius:6px; margin-bottom:5px; opacity:.95;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.5), inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 22%, transparent), 0 0 18px -6px color-mix(in srgb, var(--brass-hi) 45%, transparent); }
.lband-lab { display:block; margin:0 0 5px 2px; font:600 9.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lband-lab.cos { color:color-mix(in srgb, var(--brass-hi) 80%, var(--dim)); }
.lband-lab.you { margin-top:3px; }
.lband.has-ideal .lband-now { top:18px; }
.lband.has-ideal .lband-now::before { top:18px; }
.ltune { display:flex; align-items:center; justify-content:center; gap:10px; margin:2px auto 0; }
.ltune svg { width:36px; height:36px; flex:0 0 auto; }
.ltune-bg { fill:none; stroke:color-mix(in srgb, var(--ink) 12%, transparent); stroke-width:3.5; }
.ltune-fg { fill:none; stroke:var(--brass-hi); stroke-width:3.5; stroke-linecap:round; filter:drop-shadow(0 0 4px color-mix(in srgb, var(--brass-hi) 50%, transparent)); }
.ltune > div { display:grid; gap:2px; text-align:left; }
.ltune b { font:600 15px/1.1 var(--body); color:var(--ink); }
.ltune span { font:400 11.5px/1.25 var(--body); color:var(--dim); }
@media (min-width:980px) and (min-aspect-ratio:5/4) { .ltune { justify-content:flex-start; margin-left:0; } }

/* ---- the pattern title, highlighted (the user's instruction) ---------------- */
.lpattern-hd { gap:5px; }
.lpattern-title { margin:0; font:500 clamp(19px, 5.4vw, 24px)/1.15 var(--display); letter-spacing:-.01em; text-transform:none;
  background:linear-gradient(90deg, var(--brass-hi), #fff3c9 50%, var(--brass-hi)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- in tune with the cosmic rhythm: the headline figure --------------------- */
.ltune { display:flex; align-items:center; justify-content:center; gap:16px; margin:10px auto 6px; }
.ltune-ring { position:relative; width:104px; height:104px; flex:0 0 auto; display:grid; place-items:center; }
.ltune-ring svg { position:absolute; inset:0; width:100%; height:100%; }
.ltune-bg { fill:none; stroke:color-mix(in srgb, var(--ink) 10%, transparent); stroke-width:7; }
.ltune-fg { fill:none; stroke:var(--brass-hi); stroke-width:7; stroke-linecap:round; filter:drop-shadow(0 0 6px color-mix(in srgb, var(--brass-hi) 55%, transparent)); }
.ltune-ring b { position:relative; font:300 40px/1 var(--display); letter-spacing:-.03em; color:var(--ink); }
.ltune-ring small { font-size:18px; font-weight:400; margin-left:1px; color:var(--brass-hi); }
.ltune-txt { display:grid; gap:3px; text-align:left; }
.ltune-txt strong { font:500 22px/1.05 var(--display); color:var(--brass-hi); }
.ltune-txt span { font:400 13.5px/1.25 var(--body); color:var(--ink); }
.ltune-txt em { font:400 12px/1.25 var(--body); font-style:normal; color:var(--dim); }

/* ---- your life phase (Jeevan) -------------------------------------------------- */
.ljv { --pg:var(--brass); display:grid; justify-items:center; gap:6px; width:100%; max-width:380px; margin:0 auto; text-align:center; }
.ljv.strong { --pg:var(--jade); } .ljv.mixed { --pg:var(--brass); } .ljv.testing { --pg:var(--sindoor); }
.ljv-word { font:400 clamp(24px, 6.6vw, 30px)/1.05 var(--display); letter-spacing:-.015em; color:color-mix(in srgb, var(--pg) 75%, var(--ink)); }
.ljv-bar { position:relative; width:100%; height:6px; margin-top:6px; border-radius:3px; background:color-mix(in srgb, var(--ink) 10%, transparent); }
.ljv-bar span { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:linear-gradient(90deg, color-mix(in srgb, var(--pg) 40%, transparent), var(--pg)); }
.ljv-bar i { position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px color-mix(in srgb, var(--ground) 85%, transparent), 0 0 10px color-mix(in srgb, var(--pg) 70%, transparent); }
.ljv-ends { display:grid; grid-template-columns:1fr auto 1fr; width:100%; font:500 11.5px/1.2 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }
.ljv-ends span:first-child { text-align:left; } .ljv-ends span:nth-child(2) { color:var(--ink-2); } .ljv-ends span:last-child { text-align:right; }
.ljv-period { font:400 13px/1.2 var(--body); color:var(--ink-2); }
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  .ltune { justify-content:flex-start; margin-left:0; } .ljv { justify-items:start; text-align:left; margin:0; }
}

/* the wording that keeps today's rhythm and the life phase apart */
.ltune-k { font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:2px; }
.lclocks { margin:4px auto 0; max-width:320px; padding-top:18px; border-top:1px solid var(--rule-soft); text-align:center;
  font:400 12px/1.4 var(--body); font-style:italic; color:var(--dim); }
@media (min-width:980px) and (min-aspect-ratio:5/4) { .lclocks { margin-left:0; text-align:left; } }

/* ==== the Swara tab, Lite: four pictured answers, Pro's reading folded under ===== */
#sec-swara > #swarabox { background:none; border-color:transparent; box-shadow:none; padding:2px 0 8px; }
.lsr { display:grid; gap:18px; width:100%; max-width:1080px; margin:0 auto; }
.lsr-head { display:block; padding:4px 4px 0; }
.lsr-head h2 { margin:0; font:500 clamp(24px, 6.4vw, 30px)/1.1 var(--display); letter-spacing:-.015em; color:var(--ink); }
.lsr-head p { margin:4px 0 0; font:400 13px/1.35 var(--body); color:var(--dim); }
.lsr-grid { display:grid; gap:14px; grid-template-columns:minmax(0, 1fr); }
.lsr-card { position:relative; display:grid; gap:12px; padding:20px 18px; border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--glass-hi), transparent 60%), var(--panel);
  border:1px solid var(--glass-line); min-width:0; }
.lsr-k { font:600 10.5px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.lsr-k2 { margin-top:4px; }

/* open now */
.lsr-hero { justify-items:center; text-align:center; padding-top:18px; }
.lsr-hero .lsr-k { justify-self:start; }
.lsr-nose { width:min(62vw, 210px); height:auto; display:block; margin:-2px auto 0; overflow:visible; }
.lsr-track { fill:none; stroke:var(--rule-soft); stroke-width:6; }
.lsr-arc { fill:none; stroke-width:6; stroke-linecap:round; }
.lsr-tip { stroke:var(--panel); stroke-width:3; }
.lsr-nose, .lsr-steps svg { --lsr-line:color-mix(in srgb, var(--ink) 46%, transparent); --lsr-lit:rgba(255,246,228,.16); --lsr-shade:rgba(0,0,0,.30); --lsr-spec:rgba(255,250,240,.30); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lsr-nose, :root:not([data-theme="dark"]) .lsr-steps svg { --lsr-line:rgba(60,40,50,.42); --lsr-lit:rgba(255,255,255,.95); --lsr-shade:rgba(90,60,70,.16); --lsr-spec:rgba(255,255,255,1); } }
:root[data-theme="light"] .lsr-nose, :root[data-theme="light"] .lsr-steps svg { --lsr-line:rgba(60,40,50,.42); --lsr-lit:rgba(255,255,255,.95); --lsr-shade:rgba(90,60,70,.16); --lsr-spec:rgba(255,255,255,1); }
.lsr-nbase { fill:color-mix(in srgb, var(--ink) 8%, var(--panel)); }
.lsr-nl { fill:none; stroke:var(--lsr-line); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.lsr-nl.soft { opacity:.5; }
.lsr-ridge { fill:none; stroke-width:7; stroke-linecap:round; opacity:.22; }
.lsr-mini .lsr-ridge { stroke-width:12; }
.lsr-nlit { fill:var(--lsr-lit); opacity:.45; }
.lsr-nspec { fill:var(--lsr-spec); }
.lsr-nostril { fill:color-mix(in srgb, var(--ground) 80%, #000); stroke:var(--lsr-line); stroke-width:.8; }
.lsr-nostril.on { filter:drop-shadow(0 0 5px currentColor); stroke:none; }
.lsr-mini .lsr-nl { stroke-width:3; }
.lsr-mini .lsr-nostril { stroke-width:1.6; }
.lsr-mini .lsr-nostril.on { filter:drop-shadow(0 0 3px currentColor); }
.lsr-lr { font:600 11px/1 var(--mono); text-anchor:middle; fill:var(--dim); }
.lsr-air { fill:none; stroke-width:2.6; stroke-linecap:round; opacity:0; animation:lsr-air 2.4s ease-in-out infinite; }
@keyframes lsr-air { 0% { opacity:0; transform:translateY(-6px); } 35% { opacity:.95; } 100% { opacity:0; transform:translateY(14px); } }
.lsr-big { margin:2px 0 0; font:500 clamp(28px, 8vw, 36px)/1.05 var(--display); letter-spacing:-.02em; }
.lsr-sub { margin:0; font:400 14px/1.35 var(--body); color:var(--ink-2); max-width:30ch; }
.lsr-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.lsr-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; border:1px solid var(--glass-line);
  background:var(--panel-2); font:400 13px/1 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lsr-chip b { font-weight:600; color:var(--ink); }
.lsr-dot { display:inline-block; width:9px; height:9px; border-radius:50%; }
.lsr-el { width:14px; height:14px; }
.lsr-ring-key { margin:0; font:400 11.5px/1.3 var(--body); color:var(--dim); }

/* check your own */
.lsr-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; counter-reset:lsw; }
.lsr-steps li { position:relative; display:grid; justify-items:center; gap:6px; padding:12px 6px 10px; border-radius:var(--r-md);
  background:var(--panel-2); text-align:center; counter-increment:lsw; }
.lsr-steps li::before { content:counter(lsw); position:absolute; top:8px; left:9px; width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; font:600 10.5px/1 var(--body); color:var(--ground); background:var(--brass-hi); }
.lsr-steps svg { width:100%; max-width:74px; height:auto; overflow:visible; }
.lsr-steps span { font:400 12px/1.3 var(--body); color:var(--ink-2); }
.lsr-finger { fill:color-mix(in srgb, var(--brass-hi) 70%, var(--panel)); stroke:color-mix(in srgb, var(--ink) 30%, transparent); stroke-width:1; }
.lsr-key { fill:var(--panel); stroke:var(--rule); stroke-width:1.2; }
.lsr-key.on { fill:color-mix(in srgb, var(--brass-hi) 30%, var(--panel)); stroke:var(--brass-hi); }
.lsr-hand { fill:none; stroke:var(--ink-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lsr-answer { display:grid; gap:10px; }
.lsr-q { font:500 15px/1.3 var(--display); color:var(--ink); text-align:center; }
.lsr .swarabtns { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.lsr .swarabtns button[data-obs] { position:relative; display:grid; justify-items:center; gap:8px; min-height:74px; padding:14px 6px 12px;
  border-radius:var(--r-md); border:1px solid var(--glass-line); background:var(--panel-2); color:var(--ink);
  font:500 15px/1 var(--display); cursor:pointer; transition:transform .15s ease, border-color .15s ease, background .15s ease; }
.lsr .swarabtns button[data-obs] i { display:none; }
.lsr .swarabtns button[data-obs]::before { content:""; width:44px; height:16px; border-radius:8px; }
.lsr .swarabtns button[data-obs="ida"] { order:1; }
.lsr .swarabtns button[data-obs="sushumna"] { order:2; }
.lsr .swarabtns button[data-obs="pingala"] { order:3; }
.lsr .swarabtns button[data-obs="ida"]::before { background:radial-gradient(circle at 12px 8px, var(--soma) 0 6px, transparent 6.5px), radial-gradient(circle at 32px 8px, var(--rule) 0 6px, transparent 6.5px); }
.lsr .swarabtns button[data-obs="pingala"]::before { background:radial-gradient(circle at 12px 8px, var(--rule) 0 6px, transparent 6.5px), radial-gradient(circle at 32px 8px, var(--sindoor) 0 6px, transparent 6.5px); }
.lsr .swarabtns button[data-obs="sushumna"]::before { background:radial-gradient(circle at 12px 8px, var(--brass-hi) 0 6px, transparent 6.5px), radial-gradient(circle at 32px 8px, var(--brass-hi) 0 6px, transparent 6.5px); }
.lsr .swarabtns button[data-obs]:hover { border-color:var(--brass); }
.lsr .swarabtns button[data-obs]:active { transform:scale(.97); }
.lsr .swarabtns button:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lsr .swarabtns .btopen { order:4; grid-column:1 / -1; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:baseline; text-align:center; gap:8px; padding:11px 12px;
  border-radius:var(--r-md); background:transparent; font:500 13.5px/1.2 var(--body); cursor:pointer; }
.lsr .swarabtns .btopen i { font:400 12px/1.2 var(--body); font-style:normal; color:var(--dim); }
.lsr .swnotnow { font:400 13px/1.45 var(--body); color:var(--ink-2); text-align:center; }

.lsr-verdict { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:14px; border-radius:var(--r-md);
  background:color-mix(in srgb, var(--v, var(--brass-hi)) 10%, var(--panel-2)); border:1px solid color-mix(in srgb, var(--v, var(--brass-hi)) 35%, transparent); }
.lsr-verdict.on { --v:var(--jade); } .lsr-verdict.off { --v:var(--sindoor); } .lsr-verdict.calm { --v:var(--brass-hi); }
.lsr-vic { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font:600 22px/1 var(--display); color:var(--ground); background:var(--v); }
.lsr-verdict div { display:grid; gap:3px; }
.lsr-verdict b { font:600 15.5px/1.25 var(--display); color:var(--ink); }
.lsr-verdict span { font:400 13px/1.4 var(--body); color:var(--ink-2); }
.lsr-fix { display:grid; gap:10px; justify-items:center; text-align:center; padding:14px; border-radius:var(--r-md); background:var(--panel-2); }
.lsr-lie { width:150px; height:auto; }
.lsr-bed { fill:var(--rule-soft); }
.lsr-body { fill:color-mix(in srgb, var(--brass-hi) 55%, var(--panel)); }
.lsr-lie .lsr-lr { font:500 10px/1 var(--body); letter-spacing:.02em; fill:var(--ink-2); }
.lsr-fixtxt { display:grid; gap:4px; }
.lsr-fixtxt b { font:600 15px/1.25 var(--display); color:var(--ink); }
.lsr-fixtxt span { font:400 13px/1.45 var(--body); color:var(--ink-2); max-width:40ch; }
.lsr-fixtxt span b { font:inherit; font-weight:600; color:var(--ink); }
.lsr-go { padding:11px 18px; border-radius:999px; border:0; cursor:pointer; font:600 14px/1 var(--display); color:#1a1405;
  background:linear-gradient(180deg, #F6E3A6, #D9B84C); }
.lsr-timer { font:500 30px/1 var(--mono); color:var(--brass-hi); font-variant-numeric:tabular-nums; }
.lsr-timer.done { font:600 15px/1.2 var(--display); color:var(--jade); }

/* coming up */
.lsr-line { list-style:none; margin:0; padding:0; display:grid; }
.lsr-line li { position:relative; display:grid; grid-template-columns:16px 52px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:10px 0; }
.lsr-line li + li { border-top:1px solid var(--rule-soft); }
.lsr-line li::after { content:""; position:absolute; left:7px; top:50%; height:100%; width:2px; background:var(--rule-soft); z-index:0; }
.lsr-line li:last-child::after { display:none; }
.lsr-line i { position:relative; z-index:1; width:12px; height:12px; margin-left:2px; border-radius:50%; box-shadow:0 0 0 3px var(--panel); }
.lsr-line li.now i { width:16px; height:16px; margin-left:0; box-shadow:0 0 0 3px var(--panel), 0 0 12px currentColor; }
.lsr-line time { font:500 13px/1 var(--mono); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lsr-line li.now time { color:var(--brass-hi); }
.lsr-line b { font:500 15px/1.2 var(--display); color:var(--ink); min-width:0; }
.lsr-line em { font:400 12.5px/1.2 var(--body); font-style:normal; color:var(--dim); text-align:right; white-space:nowrap; }

/* good for, better to avoid */
.lsr-tags { display:flex; flex-wrap:wrap; gap:8px; }
.lsr-tags span { padding:8px 12px; border-radius:999px; font:400 13.5px/1.2 var(--body); color:var(--ink); }
.lsr-tags.good span { background:color-mix(in srgb, var(--jade) 13%, var(--panel-2)); border:1px solid color-mix(in srgb, var(--jade) 30%, transparent); }
.lsr-tags.avoid span { background:color-mix(in srgb, var(--sindoor) 10%, var(--panel-2)); border:1px solid color-mix(in srgb, var(--sindoor) 26%, transparent); }

/* Pro's full reading, folded */
.lsrfull { margin-top:18px; border-top:1px solid var(--rule-soft); padding-top:4px; }
.lsrfull > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 4px; }
.lsrfull > summary::-webkit-details-marker { display:none; }
.lsrfull > summary span { display:grid; gap:3px; }
.lsrfull > summary b { font:500 16px/1.2 var(--display); color:var(--ink); }
.lsrfull > summary em { font:400 12.5px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lsrfull > summary::after { content:""; flex:0 0 auto; width:9px; height:9px; margin-right:6px; border-right:2px solid var(--brass-hi); border-bottom:2px solid var(--brass-hi);
  transform:rotate(45deg); transition:transform .2s ease; }
.lsrfull[open] > summary::after { transform:rotate(-135deg); }
.lsrfull > summary:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:var(--r-sm); }

@media (min-width:760px) {
  .lsr-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; }
  .lsr-nose { width:200px; }
}
@media (prefers-reduced-motion: reduce) { .lsr-air { animation:none; opacity:.8; } }

/* ---- the home bands in the user's order: your code, the cosmic rhythm, the difference --- */
.lband-lab.you { margin-top:0; }
.lband-lab.cos, .lband-lab.dif { margin-top:10px; }
.lband-lab.dif { color:color-mix(in srgb, var(--ink-2) 80%, var(--dim)); }
.lband-track.diff { height:10px; border-radius:5px; background:color-mix(in srgb, var(--ink) 7%, transparent); }
.lband-track.diff .lband-s { opacity:.95; box-shadow:none; }
.lband-note { margin:0; max-width:46ch; font:400 11.5px/1.4 var(--body); color:var(--dim); text-align:center; }
@media (min-width:980px) and (min-aspect-ratio:5/4) { .lband-note { text-align:left; } }

/* ---- best to breathe through now: a quiet, compact box (the user's instruction) --- */
.lcalm.lcalm-box { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:4px 10px;
  width:auto; max-width:100%; margin:0 auto; padding:10px 16px; border-radius:999px;
  background:color-mix(in srgb, var(--nc) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--nc) 22%, var(--glass-line)); }
.lcalm-box .lcalm-k { font-size:9.5px; letter-spacing:.16em; color:var(--dim); }
.lcalm-box .lcalm-nadi { font-size:clamp(17px, 4.6vw, 20px); line-height:1.1; }
.lcalm-box .lcalm-sub { font-size:12.5px; color:var(--dim); }
@media (min-width:980px) and (min-aspect-ratio:5/4) { .lcalm.lcalm-box { margin:0; justify-content:flex-start; } }

/* the now line crosses the bands, not the words */
.lband-lab { position:relative; z-index:3; text-shadow:0 0 7px var(--ground), 0 0 3px var(--ground); }
.ltune { margin-top:16px; }
.ltune-txt strong { font-size:19px; line-height:1.15; }

/* the now marker: a tick inside each band, and the chip above the first one */
.lband-tick { position:absolute; top:0; bottom:0; width:3px; margin-left:-1.5px; border-radius:2px; background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.55); pointer-events:none; z-index:2; }
.lband-now::before { display:none; }

/* Both nostrils reads as bright gold in the bands, exactly as in the key (the user's
   instruction); and your own code band sits a little thinner */
.lband-s.n-sushumna, .lband-key i.n-sushumna { background:linear-gradient(180deg, #FFF0B4, var(--brass-hi) 70%, var(--brass)); }
.lband-track { height:22px; border-radius:11px; }

/* the pauses are only minutes long: hold them to a visible sliver, and let them sit
   above their neighbours so nothing clips them */
.lband-s.n-sushumna { min-width:3px; z-index:1; box-shadow:none; }
.lband-track .lband-s.n-sushumna { filter:drop-shadow(0 0 3px color-mix(in srgb, var(--brass-hi) 70%, transparent)); }

/* the difference band stands apart from the cosmic one (the user's instruction), and
   the pauses stay a thin gold sliver rather than a glowing stripe */
.lband-lab.dif { margin-top:20px; }
.lband-s.n-sushumna { min-width:2px; }
.lband-track .lband-s.n-sushumna { filter:none; }

/* the three bands stand further apart, and the now line runs the whole height and out
   past the last band, so the moment is unmistakable (the user's instruction) */
.lband-lab.cos { margin-top:18px; }
.lband-lab.dif { margin-top:26px; }
.lband-now { bottom:12px; }
.lband-now::before { display:block; content:''; position:absolute; left:-1.5px; top:18px; bottom:0; width:3px; border-radius:2px;
  background:#fff; box-shadow:0 0 10px rgba(255,255,255,.6); }
.lband-now::after { content:''; position:absolute; left:-3.5px; bottom:-4px; width:7px; height:7px; border-radius:50%;
  background:#fff; box-shadow:0 0 8px rgba(255,255,255,.7); }

/* the now marker: one small triangle in the gap above each band, pointing at it, so
   nothing crosses the labels (the user's instruction) */
.lband-hold { position:relative; padding-top:9px; }
.lband-tri { position:absolute; top:0; margin-left:-5px; width:0; height:0; pointer-events:none;
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid #fff;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.55)); }
.lband-now::before, .lband-now::after { display:none; }
.lband-now { bottom:auto; }
.lband-lab.cos, .lband-lab.dif { margin-top:14px; }

/* the in-tune reading sits quieter */
.ltune-txt strong { font:500 15px/1.25 var(--display); color:var(--brass-hi); max-width:20ch; }
.ltune-txt em { font-size:11.5px; }
.ltune-ring { width:88px; height:88px; }
.ltune-ring b { font-size:34px; } .ltune-ring small { font-size:15px; }

/* with the chip gone the bands sit close under the title (the user's instruction) */
.lband, .lband.has-ideal { padding-top:0; }
.lpattern { gap:8px; }
.lband-lab.you { margin-top:2px; }

/* the person's line is quieter, the title catches a slow gold sheen, and the bands
   start a little further below the subtitle (the user's instruction) */
.lite-has-chart .wholine { gap:6px; }
.lite-has-chart .wholine .pb-name { font-size:clamp(21px, 5.4vw, 27px); }
.lite-has-chart .wholine .pb-meta { font-size:11.5px; }
.lpattern-title { background:linear-gradient(100deg, var(--brass) 0%, var(--brass-hi) 28%, #FFF6DA 42%, var(--brass-hi) 56%, var(--brass) 100%);
  background-size:280% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:lpat-shine 7s ease-in-out infinite; }
@keyframes lpat-shine { 0%, 100% { background-position:100% 50%; } 50% { background-position:0% 50%; } }
@media (prefers-reduced-motion: reduce) { .lpattern-title { animation:none; background-position:50% 50%; } }
.lband-lab.you { margin-top:12px; }

/* more air around the key: below the difference band, and again before the in-tune
   reading (the user's instruction) */
.lband-key { margin-top:12px; }
.ltune { margin-top:28px; }

/* ==== the drawer's first stop: two actions (the user's instruction) =============== */
.liteacts { display:none; }
.lite-has-chart .litedrawer .liteacts { display:grid; gap:10px; flex:0 0 auto; padding:2px 14px 16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
.lite-has-chart .litedrawer[data-state="peek"] .liteacts { visibility:hidden; }
.lite-has-chart .litedrawer[data-state="open"] .liteacts { display:none; }
.lite-has-chart .litedrawer[data-state="half"] { transform:translateY(calc(100% - var(--lite-half, 190px))); }
.lite-has-chart .litedrawer[data-state="half"] .navbar { display:none; }
.lite-has-chart .litedrawer[data-state="half"] .litedrawer-body { visibility:hidden; }
.liteact { display:grid; gap:3px; text-align:left; width:100%; padding:13px 16px; border-radius:16px; cursor:pointer;
  border:1px solid rgba(240,213,126,.22); background:rgba(240,213,126,.05); color:var(--dr-ink);
  transition:transform .15s var(--dr-ease), border-color .2s, background .2s; }
.liteact b { font:500 16px/1.2 var(--display); letter-spacing:-.005em; }
.liteact em { font:400 12px/1.3 var(--body); font-style:normal; color:var(--dr-ink-2); }
.liteact:hover { border-color:rgba(240,213,126,.42); background:rgba(240,213,126,.09); }
.liteact:active { transform:scale(.985); }
.liteact:focus-visible { outline:2px solid var(--dr-lit); outline-offset:2px; }
.liteact.go { border-color:rgba(240,213,126,.5);
  background:linear-gradient(180deg, rgba(246,222,147,.22), rgba(201,162,39,.14)); }
.liteact.go b { color:var(--dr-lit); }
@media (min-width:560px) { .lite-has-chart .litedrawer .liteacts { grid-template-columns:1fr 1fr; align-items:stretch; } }
@media (prefers-reduced-motion: reduce) { .liteact { transition:none; } }

/* the drawer's buttons are sentences, not the uppercase chrome Pro's buttons wear */
.liteact, .liteact b, .liteact em { text-transform:none; letter-spacing:normal; }
.liteact b { font:500 16px/1.25 var(--display); letter-spacing:-.005em; }
.liteact em { font:400 12.5px/1.35 var(--body); }

/* the first stop's own way back down */
.liteclose { display:none; }
.lite-has-chart .litedrawer .liteclose { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  justify-self:center; padding:7px 16px; border:0; border-radius:999px; cursor:pointer; background:transparent;
  color:var(--dr-ink-2); font:500 12px/1 var(--body); text-transform:none; letter-spacing:.02em; }
.liteclose svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.liteclose:hover { color:var(--dr-lit); background:rgba(240,213,126,.08); }
.liteclose:focus-visible { outline:2px solid var(--dr-lit); outline-offset:2px; }
@media (min-width:560px) { .lite-has-chart .litedrawer .liteclose { grid-column:1 / -1; } }

/* ==== THE DRAWER, REDESIGNED (the user asked for a premium sheet) ================
   A lacquer-and-brass sheet: a deep, blurred ground, one hairline of gold along the
   top edge, a slow gold bloom behind the handle, and content held on a 16px grid. */
.lite-has-chart .litedrawer::before {
  border-radius:28px 28px 0 0;
  background:
    radial-gradient(120% 90px at 50% 0%, rgba(246,222,147,.16), transparent 70%),
    linear-gradient(180deg, rgba(240,213,126,.10) 0%, rgba(201,162,39,.05) 26%, transparent 60%),
    linear-gradient(180deg, rgba(20,15,7,.90), rgba(12,10,6,.94));
  -webkit-backdrop-filter:blur(26px) saturate(135%); backdrop-filter:blur(26px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(246,222,147,.42), inset 0 0 0 1px rgba(240,213,126,.10),
    0 -34px 70px -34px rgba(0,0,0,.85);
}
:root[data-theme="light"].lite-has-chart .litedrawer::before {
  background:
    radial-gradient(120% 90px at 50% 0%, rgba(154,122,24,.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.80), rgba(250,246,238,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(154,122,24,.16),
    0 -26px 60px -32px rgba(80,60,20,.35);
}
.lite-has-chart .litedrawer .litegrab { display:flex; align-items:center; justify-content:center; }
.lite-has-chart .litedrawer .litegrab i { width:46px; height:4px; border-radius:3px;
  background:linear-gradient(90deg, rgba(240,213,126,.35), var(--dr-lit) 50%, rgba(240,213,126,.35));
  box-shadow:0 0 12px rgba(246,222,147,.35); }
.lite-has-chart .litedrawer .litegrab:hover i { box-shadow:0 0 16px rgba(246,222,147,.6); }
.lite-has-chart .litedrawer[data-state="half"] .litedrawer-top,
.lite-has-chart .litedrawer[data-state="open"] .litedrawer-top { box-shadow:inset 0 -1px 0 rgba(240,213,126,.14); }

/* the first stop */
.lite-has-chart .litedrawer .liteacts { gap:9px; padding:10px 16px 14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
.liteacts-k { display:block; font:600 9.5px/1 var(--body); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(240,213,126,.62); padding:0 2px 1px; }
.lite-has-chart .litedrawer .liteact { display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:13px; padding:13px 14px; border-radius:18px; }
.liteact-ico { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; flex:0 0 auto; }
.liteact-ico svg { width:21px; height:21px; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.liteact-tx { display:grid; gap:2px; min-width:0; text-align:left; }
.liteact-arw { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
  stroke-linejoin:round; opacity:.5; }

/* the primary: brass, lit from above, dark ink on it */
.lite-has-chart .litedrawer .liteact.go { border:0; color:#1B1406;
  background:linear-gradient(180deg, #F8E9B8 0%, #EFD489 46%, #D6B24A 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 26px -16px rgba(214,178,74,.75); }
.lite-has-chart .litedrawer .liteact.go:hover { background:linear-gradient(180deg, #FBF0C8, #F2DA97 46%, #DCB94F 100%); }
.liteact.go b { color:#1B1406; }
.liteact.go em { color:rgba(27,20,6,.72); }
.liteact.go .liteact-ico { background:rgba(27,20,6,.12); }
.liteact.go .liteact-ico svg { stroke:#1B1406; }
.liteact.go .liteact-arw { opacity:.6; }

/* the secondary: quiet glass with a brass outline on the icon */
.lite-has-chart .litedrawer .liteact:not(.go) { border:1px solid rgba(240,213,126,.18);
  background:linear-gradient(180deg, rgba(240,213,126,.07), rgba(240,213,126,.02)); }
.lite-has-chart .litedrawer .liteact:not(.go):hover { border-color:rgba(240,213,126,.36);
  background:linear-gradient(180deg, rgba(240,213,126,.11), rgba(240,213,126,.04)); }
.liteact:not(.go) .liteact-ico { background:rgba(240,213,126,.10); box-shadow:inset 0 0 0 1px rgba(240,213,126,.22); }
.liteact:not(.go) .liteact-ico svg { stroke:var(--dr-lit); }
.liteact:not(.go) b { color:var(--dr-ink); }

/* the tabs, when the sheet is fully open */
.lite-has-chart .litedrawer[data-state="open"] .navbar button { border-radius:14px; }
.lite-has-chart .litedrawer .navbar button[aria-selected="true"] {
  background:linear-gradient(180deg, rgba(246,222,147,.20), rgba(201,162,39,.10));
  box-shadow:inset 0 0 0 1px rgba(240,213,126,.34), 0 8px 20px -14px rgba(240,213,126,.5); }
.lite-has-chart .litedrawer .navbar button[aria-selected="true"] .navlab { color:var(--dr-lit); }

/* ==== collapsing the sheet: a disc in its own header, not a labelled row ==========
   The row of words under the buttons read as a form control; a sheet closes from its
   header. The disc is quiet until touched, and it is not there at all when the sheet
   is already down. */
.liteclose { display:none; }
.lite-has-chart .litedrawer .liteclose { position:absolute; top:3px; right:10px; z-index:3;
  display:grid; place-items:center; width:30px; height:30px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(240,213,126,.20); background:rgba(240,213,126,.06); color:var(--dr-ink-2);
  opacity:0; pointer-events:none; transform:scale(.9);
  transition:opacity .25s var(--dr-ease), transform .25s var(--dr-ease), color .2s, background .2s, border-color .2s; }
.lite-has-chart .litedrawer[data-state="half"] .liteclose,
.lite-has-chart .litedrawer[data-state="open"] .liteclose { opacity:1; pointer-events:auto; transform:none; }
.liteclose svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.liteclose:hover { color:#1B1406; background:var(--dr-lit); border-color:var(--dr-lit); }
.liteclose:active { transform:scale(.94); }
.liteclose:focus-visible { outline:2px solid var(--dr-lit); outline-offset:2px; }
/* the handle keeps clear of the disc, and the header gives it room */
.lite-has-chart .litedrawer[data-state="half"] .litegrab,
.lite-has-chart .litedrawer[data-state="open"] .litegrab { height:34px; }
.lite-has-chart .litedrawer[data-state="half"] .liteacts { padding-top:4px; }

/* ==== the sheet stands on the home page's own ground (the user's instruction) =====
   Same tokens as body: the hero's glow over --ground, fixed so the glow lines up with
   the page behind it and the sheet reads as the same surface lifted. The gold hairline
   and the shadow above it are what still make it a sheet. */
.lite-has-chart .litedrawer::before {
  background:var(--sky) no-repeat fixed, var(--ground);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(246,222,147,.38), inset 0 0 0 1px rgba(240,213,126,.08),
    0 -34px 70px -30px rgba(0,0,0,.9);
}
:root[data-theme="light"].lite-has-chart .litedrawer::before {
  background:var(--sky) no-repeat fixed, var(--ground);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(154,122,24,.14),
    0 -26px 60px -32px rgba(80,60,20,.30);
}

/* the two-column stop on wide screens: the eyebrow spans the row (it was taking a
   cell of its own and staggering the cards), and the pair is held to a readable width */
.lite-has-chart .litedrawer .liteacts { width:100%; max-width:760px; margin:0 auto; }
.liteacts-k { grid-column:1 / -1; }
@media (min-width:560px) {
  .lite-has-chart .litedrawer .liteacts { grid-template-columns:1fr 1fr; align-items:stretch; }
  .lite-has-chart .litedrawer .liteact { height:100%; }
}

/* the disc sits inside the sheet's rounded corner, not against it: the header row is
   tall enough to hold it, and it is inset far enough that the 28px corner curve reads
   cleanly around it (the user's instruction) */
.lite-has-chart .litedrawer[data-state="half"] .litegrab,
.lite-has-chart .litedrawer[data-state="open"] .litegrab { height:44px; }
.lite-has-chart .litedrawer .liteclose { top:50%; right:18px; width:30px; height:30px;
  transform:translateY(-50%) scale(.9); }
.lite-has-chart .litedrawer[data-state="half"] .liteclose,
.lite-has-chart .litedrawer[data-state="open"] .liteclose { transform:translateY(-50%); }
.lite-has-chart .litedrawer .liteclose:active { transform:translateY(-50%) scale(.94); }
.lite-has-chart .litedrawer[data-state="half"] .liteacts { padding-top:2px; }

/* ==== three fixes to the sheet ====================================================
   1 · the collapse disc belongs to the handle's row, not the whole header: centred on
       the 44px handle row it no longer sits over the tab strip (the sweep caught it
       overlapping Kaarya on every section page).
   2 · on a wide screen the sheet covers the page edge to edge, so no part of home is
       left peeking beside it (the user's instruction); its content stays on the same
       1180px measure as before, centred.
   3 · no eyebrow over the two buttons. */
.lite-has-chart .litedrawer .liteclose { top:22px; right:18px; }
.lite-has-chart .litedrawer { width:100%; max-width:none; }
.lite-has-chart .litedrawer-top,
.lite-has-chart .litedrawer-body { width:100%; max-width:1180px; margin-left:auto; margin-right:auto; }

/* the handle and the collapse disc each get their own room: once the sheet is up the
   handle is a centred 160px grab area, so the disc at the right is never under it */
.lite-has-chart .litedrawer[data-state="half"] .litegrab,
.lite-has-chart .litedrawer[data-state="open"] .litegrab { width:160px; margin:0 auto; }

/* on a wide sheet the eight tabs fit with room to spare, so they sit centred under the
   handle rather than packed against the left edge; narrow screens keep them left and
   scrolling, where centring would put the first tab out of reach */
@media (min-width:760px) { .lite-has-chart .litedrawer .navbar { justify-content:center; } }

/* ==== the sheet's width is the page's own measure (the user's instruction) =========
   Not edge to edge, and not narrower than home: exactly the stage's measure (max
   1400px inside the wrap's 22px gutters), which is also the header's, so the sheet
   masks every bit of home content and lines up with the bar above it. The header row
   and the scroller fill that sheet, so the collapse disc sits on the sheet's own right
   edge rather than floating inside it. */
@media (min-width:760px) {
  .lite-has-chart .litedrawer { width:min(calc(100% - 44px), 1400px); max-width:none; }
}
.lite-has-chart .litedrawer-top,
.lite-has-chart .litedrawer-body { max-width:none; margin-left:0; margin-right:0; }

/* ==== the collapse disc, set concentric with the sheet's corner ===================
   The sheet's top corners are 28px arcs. A 30px disc whose centre sits 28px in from
   the top and the right shares that arc's centre, so the gap it leaves is the same
   along the top edge as along the right edge and the curve reads around it. */
.lite-has-chart .litedrawer .liteclose { top:13px; right:13px; width:30px; height:30px;
  transform:scale(.88); }
.lite-has-chart .litedrawer[data-state="half"] .liteclose,
.lite-has-chart .litedrawer[data-state="open"] .liteclose { transform:none; }
.lite-has-chart .litedrawer .liteclose:active { transform:scale(.94); }

/* no hairline under the handle at the first stop: with only two buttons below it the
   line read as a second edge (the user's instruction). The open sheet keeps its line,
   where it separates the tab strip from the section. */
.lite-has-chart .litedrawer[data-state="half"] .litedrawer-top { box-shadow:none; }

/* the open sheet starts where the header ends on screen, even from a scrolled page; and
   swapping what the sheet holds (sections or alignment) does not drag its scroll along */
.lite-has-chart .litedrawer { top:var(--lite-sheet-top, var(--lite-head, 72px)); }
.litedrawer-body { overflow-anchor:none; }

/* ==== SWARA ALIGNMENT · STAGE 1 · DIAGNOSIS (the drawer's alignment mode) ===========
   In this mode the drawer shows the alignment instead of Pro's eight sections: the
   stage and its progress sit in the sheet's header, under the handle, and the stage's
   modules scroll below it on a 760px measure.
   The look blends the three drafts the user picked: Oura's rings and calm hierarchy,
   Structured's day line, Sky Guide's lit glass. One surface recipe for every module,
   depth from light rather than borders, numbers set large and light. */
#lal-head, #lite-align { display:none; }
.lite-has-chart .litedrawer[data-mode="align"] .navbar { display:none; }
.lite-has-chart .litedrawer[data-mode="align"] .litedrawer-body > .navsec,
.lite-has-chart .litedrawer[data-mode="align"] .litedrawer-body > .colophon { display:none !important; }
.lite-has-chart .litedrawer[data-mode="align"][data-state="open"] #lal-head { display:block; }
.lite-has-chart .litedrawer[data-mode="align"] #lite-align { display:grid; }
.lite-has-chart .litedrawer[data-mode="align"][data-state="open"] .litedrawer-top { box-shadow:inset 0 -1px 0 rgba(240,213,126,.12); }

/* ---- the stage, in the header ---- */
.lal-stage { width:auto; max-width:none; margin:0 calc(4px + var(--lite-sbw, 0px)) 0 4px; padding:0 0 18px; }
@media (min-width:760px) { .lal-stage { margin:0 calc(12px + var(--lite-sbw, 0px)) 0 12px; } }
.lal-stage > * { max-width:760px; margin-left:auto; margin-right:auto; }
.lal-stage-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.lal-stage-k { font:600 10px/1.2 var(--body); letter-spacing:.22em; text-transform:uppercase; color:rgba(240,213,126,.78); }
.lal-stage-n { font:500 12px/1 var(--mono); color:var(--dr-ink-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lal-stage > .lal-stage-t { margin-top:6px; margin-bottom:14px; font:300 clamp(28px, 7.4vw, 34px)/1.05 var(--display);
  letter-spacing:-.02em; color:var(--dr-ink); }
.lal-bar { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:6px; }
.lal-bar i { position:relative; display:block; height:5px; border-radius:3px; overflow:hidden; background:rgba(240,213,126,.12); }
.lal-bar i span { position:absolute; left:0; top:0; bottom:0; border-radius:inherit;
  background:linear-gradient(90deg, #C99E36, #F6DE93); box-shadow:0 0 12px rgba(246,222,147,.55); }
.lal-bar i.now { box-shadow:inset 0 0 0 1px rgba(246,222,147,.4); }
.lal-stage > .lal-stage-cap { margin-top:11px; margin-bottom:0; font:400 12.5px/1.4 var(--body); color:var(--dr-ink-2); }
:root[data-theme="light"] .lal-stage-k { color:var(--brass); }

/* ---- the modules ---- */
.lite-has-chart .litedrawer[data-mode="align"] #lite-align { gap:16px; width:100%; max-width:760px; margin:0 auto; padding:6px 0 4px; }
.lal-card { position:relative; display:grid; gap:18px; min-width:0; padding:22px 20px; border-radius:28px; isolation:isolate;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 5.5%, transparent), color-mix(in srgb, var(--ink) 1.5%, transparent) 38%, transparent 70%),
    var(--panel);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent),
    0 28px 56px -38px rgba(0,0,0,.9); }
:root[data-theme="light"] .lal-card { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent), 0 24px 48px -34px rgba(60,40,80,.35); }
.lal-hd { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.lal-hd > div { display:grid; gap:6px; min-width:0; }
.lal-eyebrow { font:600 10px/1 var(--body); letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--brass-hi) 78%, var(--dim)); }
.lal-title { margin:0; font:400 21px/1.15 var(--display); letter-spacing:-.012em; color:var(--ink); text-wrap:balance; }
.lal-aside { flex:0 0 auto; padding:6px 11px; border-radius:999px; font:500 11px/1 var(--body); color:var(--ink-2); white-space:nowrap;
  background:color-mix(in srgb, var(--ink) 6%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.lal-none { margin:0; font:400 13.5px/1.5 var(--body); color:var(--ink-2); }
.lal-foot { margin:6px 4px 10px; font:400 11.5px/1.5 var(--body); color:var(--dim); text-align:center; }
#lal-log .swlogs { margin:0; }

/* 0 · rings */
.lal-hero { background:
    radial-gradient(80% 90% at 100% 0%, color-mix(in srgb, var(--brass-hi) 13%, transparent), transparent 70%),
    radial-gradient(70% 80% at 0% 100%, color-mix(in srgb, var(--soma) 12%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 5%, transparent), transparent 60%),
    var(--panel); }
.lal-rings { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.lal-ring { display:grid; justify-items:center; align-content:start; gap:10px; min-width:0; text-align:center; }
.lal-ring-dial { position:relative; width:clamp(72px, 22vw, 96px); aspect-ratio:1; }
.lal-ring-dial svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.lal-ring-bg { fill:none; stroke:color-mix(in srgb, var(--ink) 8%, transparent); stroke-width:5; }
.lal-ring-fg { fill:none; stroke:var(--tone); stroke-width:5; stroke-linecap:round;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--tone) 60%, transparent)); transition:stroke-dasharray .6s cubic-bezier(.22,.9,.24,1); }
.lal-ring-dial b { position:absolute; inset:0; display:grid; place-items:center; font:300 clamp(20px, 5.6vw, 25px)/1 var(--display);
  letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.lal-ring-dial b small { font-size:.52em; font-weight:400; letter-spacing:0; color:var(--ink-2); margin-left:1px; }
.lal-ring > span { font:500 11.5px/1.3 var(--body); color:var(--ink-2); max-width:13ch; text-wrap:balance; }
.lal-ring.empty .lal-ring-dial b { color:var(--dim); }

/* 1 · check now */
.lal-check { background:
    radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--soma) 15%, transparent), transparent 65%),
    radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--sindoor) 11%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 5%, transparent), transparent 60%),
    var(--panel); }
.lal-how { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.lal-how li { position:relative; display:grid; justify-items:center; align-content:start; gap:10px; text-align:center; min-width:0; }
.lal-how li:not(:last-child)::after { content:""; position:absolute; top:31px; left:calc(50% + 38px); width:calc(100% - 66px); height:0;
  border-top:1px dashed color-mix(in srgb, var(--ink) 18%, transparent); }
.lal-how-ico { position:relative; display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--ink) 9%, var(--panel-2)), var(--panel-2) 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 10px 22px -14px rgba(0,0,0,.9); }
.lal-how-ico svg { width:46px; height:auto; overflow:visible; }
.lal-how-ico i { position:absolute; top:-3px; right:-3px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font:700 10.5px/1 var(--body); font-style:normal; color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A);
  box-shadow:0 0 0 3px var(--panel); }
.lal-how li > span:last-child { font:400 12px/1.35 var(--body); color:var(--ink-2); max-width:15ch; text-wrap:balance; }
.lal-answer { display:grid; gap:12px; }
.lal-q { font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-align:center; }
.lal-ans { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.lal-ans button { position:relative; display:grid; justify-items:center; align-content:center; gap:12px; min-height:96px; padding:14px 6px;
  cursor:pointer; border-radius:24px; color:var(--ink); font:400 16px/1 var(--display); letter-spacing:-.005em; text-transform:none;
  border:0; background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 8%, var(--panel-2)), var(--panel-2));
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent),
    0 14px 28px -20px rgba(0,0,0,.95);
  transition:transform .18s cubic-bezier(.22,.9,.24,1), box-shadow .2s ease; }
.lal-ans button b { font:inherit; }
.lal-ans button i { display:block; width:48px; height:18px; border-radius:9px; }
.lal-ans .n-ida i { background:radial-gradient(circle at 13px 9px, var(--soma) 0 7px, transparent 7.5px), radial-gradient(circle at 35px 9px, color-mix(in srgb, var(--ink) 14%, transparent) 0 7px, transparent 7.5px); }
.lal-ans .n-pingala i { background:radial-gradient(circle at 13px 9px, color-mix(in srgb, var(--ink) 14%, transparent) 0 7px, transparent 7.5px), radial-gradient(circle at 35px 9px, var(--sindoor) 0 7px, transparent 7.5px); }
.lal-ans .n-sushumna i { background:radial-gradient(circle at 13px 9px, var(--brass-hi) 0 7px, transparent 7.5px), radial-gradient(circle at 35px 9px, var(--brass-hi) 0 7px, transparent 7.5px); }
.lal-ans button:hover { box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--tone) 55%, transparent),
    0 0 0 4px color-mix(in srgb, var(--tone) 12%, transparent), 0 16px 30px -20px color-mix(in srgb, var(--tone) 60%, transparent); }
.lal-ans button:active { transform:scale(.965); }
.lal-ans button:focus-visible { outline:2px solid var(--tone); outline-offset:3px; }
.lal-check .btopen { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:8px; width:auto; justify-self:center;
  margin:2px 0 0; padding:9px 16px; border:0 !important; border-radius:999px; cursor:pointer; background:color-mix(in srgb, var(--ink) 5%, transparent);
  font:500 13px/1.2 var(--body); text-transform:none; letter-spacing:normal; }
.lal-check .btopen:hover { background:color-mix(in srgb, var(--brass-hi) 12%, transparent); }
.lal-check .btopen i { font:400 12px/1.2 var(--body); font-style:normal; color:var(--dim); }
.lal-check .swnotnow { font:400 13px/1.5 var(--body); color:var(--ink-2); text-align:center; }

.lal-result { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:18px; }
.lal-result-nose { display:grid; place-items:center; width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--tone) 26%, transparent) 0%, color-mix(in srgb, var(--tone) 6%, transparent) 60%, transparent 72%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 32%, transparent); }
.lal-nose { width:54px; height:auto; overflow:visible; }
.lal-result-tx { display:grid; justify-items:start; gap:8px; min-width:0; }
.lal-result-tx b { font:300 clamp(28px, 7.6vw, 34px)/1 var(--display); letter-spacing:-.02em; color:var(--tone); }
.lal-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 11px 6px 9px; border-radius:999px; font:600 12px/1 var(--body); }
.lal-badge svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.lal-badge.on { color:var(--jade); background:color-mix(in srgb, var(--jade) 15%, transparent); }
.lal-badge.off { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 15%, transparent); }
.lal-compare { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lal-compare > div { display:grid; gap:8px; padding:13px 15px; border-radius:18px; background:color-mix(in srgb, var(--ink) 4.5%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.lal-compare small { font:600 9.5px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.lal-compare b { display:flex; align-items:center; gap:8px; font:400 18px/1 var(--display); color:var(--ink); }
.lal-dot { display:inline-block; flex:0 0 auto; width:9px; height:9px; border-radius:50%; box-shadow:0 0 8px currentColor; }

/* 2 · the day line */
.lal-line { position:relative; list-style:none; margin:0; padding:2px 0; display:grid; }
.lal-line::before { content:""; position:absolute; left:calc(48px + 12px + 21px); top:26px; bottom:26px; width:0;
  border-left:2px dotted color-mix(in srgb, var(--ink) 18%, transparent); }
.lal-line > li { position:relative; display:grid; grid-template-columns:48px 44px minmax(0, 1fr) auto; column-gap:12px; align-items:center; min-height:66px; }
.lal-line time { font:500 12px/1 var(--mono); color:var(--dim); text-align:right; font-variant-numeric:tabular-nums; }
.lal-node { position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--panel-2); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.lal-node svg { width:22px; height:22px; fill:none; stroke:var(--ink-2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lal-win-tx { display:grid; gap:3px; min-width:0; }
.lal-win-tx b { font:400 16px/1.2 var(--display); color:var(--ink); }
.lal-win-tx span { font:400 12.5px/1.35 var(--body); color:var(--dim); }
.lal-win-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font:500 12px/1 var(--body); color:var(--ink-2);
  background:color-mix(in srgb, var(--ink) 5%, transparent); }
.lal-win.on .lal-node { background:color-mix(in srgb, var(--jade) 16%, var(--panel)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 55%, transparent); }
.lal-win.on .lal-node svg { stroke:var(--jade); }
.lal-win.on .lal-win-tx span { color:var(--jade); }
.lal-win.off .lal-node { background:color-mix(in srgb, var(--sindoor) 16%, var(--panel)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 55%, transparent); }
.lal-win.off .lal-node svg { stroke:var(--sindoor); }
.lal-win.off .lal-win-tx span { color:var(--sindoor); }
.lal-win.open .lal-node { background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:0 0 0 5px color-mix(in srgb, var(--brass-hi) 18%, transparent), 0 0 22px color-mix(in srgb, var(--brass-hi) 45%, transparent); }
.lal-win.open .lal-node svg { stroke:#1B1406; }
.lal-win.open time, .lal-win.open .lal-win-tx span { color:var(--brass-hi); }
.lal-win.missed .lal-win-tx b, .lal-win.later .lal-win-tx b { color:var(--ink-2); }
.lal-win.missed .lal-node, .lal-win.later .lal-node { opacity:.7; }
.lal-line > .lal-now { min-height:30px; }
.lal-now time { color:var(--brass-hi); font-weight:600; }
.lal-now-dot { justify-self:center; z-index:1; width:10px; height:10px; border-radius:50%; background:var(--brass-hi);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brass-hi) 20%, transparent), 0 0 12px var(--brass-hi); }
.lal-now-line { grid-column:3 / -1; position:relative; height:2px; border-radius:1px;
  background:linear-gradient(90deg, var(--brass-hi), color-mix(in srgb, var(--brass-hi) 0%, transparent)); }
.lal-now-line em { position:absolute; left:0; top:-9px; padding:3px 8px; border-radius:999px; font:700 9.5px/1 var(--body); font-style:normal;
  letter-spacing:.16em; text-transform:uppercase; color:#1B1406; background:var(--brass-hi); }
@media (prefers-reduced-motion: no-preference) {
  .lal-win.open .lal-node { animation:lal-glow 2.8s ease-in-out infinite; }
  @keyframes lal-glow { 50% { box-shadow:0 0 0 9px color-mix(in srgb, var(--brass-hi) 8%, transparent), 0 0 28px color-mix(in srgb, var(--brass-hi) 55%, transparent); } }
}

/* 3 · the bands */
.lal-day { background:
    radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, var(--brass-hi) 8%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 5%, transparent), transparent 60%),
    var(--panel); }
.lal-bands { padding-top:0; }
.lal-bands .lband-lab { margin:0 0 6px 2px; }
.lal-bands .lband-hold + .lband-lab { margin-top:16px; }
.lal-bands .lband-track.found { position:relative; }
.lal-empty { position:absolute; inset:0; display:grid; place-items:center; font:400 11px/1 var(--body); color:var(--dim); white-space:nowrap; }
.lal-day .lband-key { margin-top:-4px; }

/* 4 · what the app has learned */
.lal-status { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:14px; align-items:start; padding:16px; border-radius:20px;
  background:color-mix(in srgb, var(--ink) 4.5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.lal-status-ico { display:grid; place-items:center; width:40px; height:40px; border-radius:14px; color:var(--brass-hi);
  background:color-mix(in srgb, var(--brass-hi) 14%, transparent); }
.lal-status-ico svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lal-status > div { display:grid; gap:4px; min-width:0; }
.lal-status b { font:400 17px/1.25 var(--display); color:var(--ink); }
.lal-status span { font:400 13px/1.45 var(--body); color:var(--ink-2); }
.lal-status.usual .lal-status-ico, .lal-status.better .lal-status-ico { color:var(--jade); background:color-mix(in srgb, var(--jade) 14%, transparent); }
.lal-status.unusual .lal-status-ico { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 14%, transparent); }
.lal-facts { margin:0; display:grid; }
.lal-facts > div { display:grid; grid-template-columns:minmax(0, 11em) minmax(0, 1fr); gap:14px; padding:13px 2px; align-items:baseline; }
.lal-facts > div + div { border-top:1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.lal-facts dt { font:500 12.5px/1.35 var(--body); color:var(--dim); }
.lal-facts dd { margin:0; font:400 14px/1.4 var(--body); color:var(--ink); text-align:right; text-wrap:balance; }
.lal-trust { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:10px; align-items:start; margin:0;
  font:400 12px/1.5 var(--body); color:var(--dim); }
.lal-trust svg { width:16px; height:16px; margin-top:1px; fill:none; stroke:var(--dim); stroke-width:1.6; stroke-linejoin:round; }

/* the nose drawings take the Swara tab's line, light and shade */
.lal-nose, .lal-how-ico svg { --lsr-line:color-mix(in srgb, var(--ink) 46%, transparent); --lsr-lit:rgba(255,246,228,.16);
  --lsr-shade:rgba(0,0,0,.30); --lsr-spec:rgba(255,250,240,.30); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lal-nose, :root:not([data-theme="dark"]) .lal-how-ico svg {
  --lsr-line:rgba(60,40,50,.42); --lsr-lit:rgba(255,255,255,.95); --lsr-shade:rgba(90,60,70,.16); --lsr-spec:rgba(255,255,255,1); } }
:root[data-theme="light"] .lal-nose, :root[data-theme="light"] .lal-how-ico svg { --lsr-line:rgba(60,40,50,.42);
  --lsr-lit:rgba(255,255,255,.95); --lsr-shade:rgba(90,60,70,.16); --lsr-spec:rgba(255,255,255,1); }
.lal-nose .lsr-nl, .lal-how-ico .lsr-nl { stroke-width:3; }

@media (max-width:359px) {
  .lal-card { padding:20px 14px; border-radius:24px; }
  .lal-hd { flex-wrap:wrap; }
  .lal-line > li { grid-template-columns:40px 40px minmax(0, 1fr); }
  .lal-line::before { left:calc(40px + 12px + 19px); }
  .lal-node { width:40px; height:40px; }
  .lal-win-chip { display:none; }
  .lal-facts > div { grid-template-columns:1fr; gap:4px; }
  .lal-facts dd { text-align:left; }
}
@media (min-width:760px) { .lal-card { padding:26px 26px; } }
@media (prefers-reduced-motion: reduce) { .lal-ans button, .lal-ring-fg { transition:none; } }

/* the ring figure and its unit sit on one baseline */
.lal-ring-dial b > span { display:inline-flex; align-items:baseline; }

/* a long answer sits under its label instead of ragged against the right edge */
.lal-facts > div.long { grid-template-columns:1fr; gap:5px; }
.lal-facts > div.long dd { text-align:left; }

/* Pro's list of recorded checks, dressed as the stage's last module: one quiet row that
   opens into the list, the count set in the display face */
#lal-log .swlogs { margin:0; border:0; border-radius:22px; background:var(--panel);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent), 0 20px 40px -32px rgba(0,0,0,.85); }
#lal-log .swlogs > summary { display:flex; align-items:center; gap:10px; padding:17px 20px; font:400 15px/1.2 var(--display); color:var(--ink); }
#lal-log .swlogs > summary::before { display:none; }
#lal-log .swlogs > summary span { margin-left:auto; font:400 12px/1 var(--body); color:var(--dim); }
#lal-log .swlogs > summary::after { content:''; flex:0 0 auto; width:8px; height:8px; margin:0 2px 3px 4px;
  border-right:1.8px solid var(--dim); border-bottom:1.8px solid var(--dim); transform:rotate(45deg); transition:transform .2s ease; }
#lal-log .swlogs[open] > summary::after { transform:rotate(-135deg); margin-bottom:-3px; }
#lal-log .swlogs[open] { padding-bottom:8px; }

/* an empty ring is an empty track: no rounded end left behind as a dot */
.lal-ring.zero .lal-ring-fg { opacity:0; }

/* ---- check times: every turn of the code ---- */
.lal-lede { margin:-4px 0 0; font:400 13px/1.5 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lal-sws > li.lal-sw { grid-template-columns:48px 44px minmax(0, 1fr) auto; min-height:62px; }
.lal-sw .lal-node { width:36px; height:36px; justify-self:center; background:var(--panel-2);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 55%, transparent); }
.lal-sw .lal-node i { width:12px; height:12px; border-radius:50%; background:var(--tone); box-shadow:0 0 10px color-mix(in srgb, var(--tone) 60%, transparent); }
.lal-sw.pause .lal-node { width:28px; height:28px; }
.lal-sw.pause .lal-node i { width:8px; height:8px; }
.lal-sw.pause { min-height:48px; }
.lal-sw.pause .lal-win-tx b { font-size:14px; color:var(--ink-2); }
.lal-sw.on .lal-node { background:color-mix(in srgb, var(--jade) 16%, var(--panel)); box-shadow:inset 0 0 0 1.5px var(--jade); }
.lal-sw.on .lal-win-tx span { color:var(--jade); }
.lal-sw.off .lal-node { background:color-mix(in srgb, var(--sindoor) 16%, var(--panel)); box-shadow:inset 0 0 0 1.5px var(--sindoor); }
.lal-sw.off .lal-win-tx span { color:var(--sindoor); }
.lal-sw.now .lal-node { background:color-mix(in srgb, var(--brass-hi) 18%, var(--panel));
  box-shadow:inset 0 0 0 1.5px var(--brass-hi), 0 0 0 5px color-mix(in srgb, var(--brass-hi) 14%, transparent), 0 0 22px color-mix(in srgb, var(--brass-hi) 40%, transparent); }
.lal-sw.now time, .lal-sw.now .lal-win-tx span { color:var(--brass-hi); }
.lal-sw.now .lal-win-tx b { color:var(--ink); }
.lal-sws > li.lal-sw.now::before { content:''; position:absolute; inset:4px -10px; z-index:0; border-radius:18px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--brass-hi) 10%, transparent), transparent 80%); }
.lal-sw > * { position:relative; z-index:1; }
.lal-sw.missed .lal-node, .lal-sw.missed .lal-win-tx b { opacity:.55; }
.lal-sw.later .lal-node i { opacity:.75; }
.lal-sw-end { display:inline-flex; align-items:center; gap:8px; }
.lal-sw-dur { font:500 11.5px/1 var(--mono); color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lal-sw-sun { display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:color-mix(in srgb, var(--brass-hi) 12%, transparent); }
.lal-sw-sun svg { width:16px; height:16px; fill:none; stroke:var(--brass-hi); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lal-sws::before { left:calc(48px + 12px + 21px); }
.lal-sws > li.lal-more { display:block; min-height:0; padding:6px 0; text-align:center; }
.lal-more button { position:relative; z-index:1; padding:9px 16px; border:0; border-radius:999px; cursor:pointer;
  font:500 12.5px/1 var(--body); text-transform:none; letter-spacing:normal; color:var(--ink-2);
  background:var(--panel-2); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.lal-more button:hover { color:var(--ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 45%, transparent); }
@media (max-width:359px) {
  .lal-sws > li.lal-sw { grid-template-columns:40px 40px minmax(0, 1fr); }
  .lal-sw-end { grid-column:3; justify-self:start; }
}

/* ---- the alerts switch, and what each duration is ---- */
.lal-alert { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:14px; padding:14px 16px;
  border-radius:20px; background:color-mix(in srgb, var(--ink) 4.5%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.lal-alert.on { background:color-mix(in srgb, var(--brass-hi) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 28%, transparent); }
.lal-alert-ico { display:grid; place-items:center; width:40px; height:40px; border-radius:14px; color:var(--ink-2);
  background:color-mix(in srgb, var(--ink) 7%, transparent); }
.lal-alert.on .lal-alert-ico { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:0 0 18px color-mix(in srgb, var(--brass-hi) 35%, transparent); }
.lal-alert-ico svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lal-alert-tx { display:grid; gap:3px; min-width:0; }
.lal-alert-tx b { font:400 15px/1.25 var(--display); color:var(--ink); }
.lal-alert-tx span { font:400 12px/1.4 var(--body); color:var(--dim); }
.lal-alert.on .lal-alert-tx span { color:var(--ink-2); }
.lal-switch { position:relative; flex:0 0 auto; width:50px; height:30px; padding:0; border:0; border-radius:15px; cursor:pointer;
  background:color-mix(in srgb, var(--ink) 16%, transparent); transition:background .25s ease; }
.lal-switch::after { content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35); transition:transform .25s cubic-bezier(.22,.9,.24,1); }
.lal-switch[aria-checked="true"] { background:linear-gradient(180deg, #F1D98E, #CFA640); }
.lal-switch[aria-checked="true"]::after { transform:translateX(20px); }
.lal-switch:focus-visible { outline:2px solid var(--brass-hi); outline-offset:3px; }
.lal-sw-dur { display:grid; justify-items:end; gap:3px; }
.lal-sw-dur small { font:600 8.5px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
@media (prefers-reduced-motion: reduce) { .lal-switch, .lal-switch::after { transition:none; } }

/* ---- check times: uncoloured points, coloured by the breath the reader found, and a
   tick or a cross for whether it matched the code (the user's instruction) ---- */
.lal-sw .lal-node { background:var(--panel-2); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 20%, transparent); }
.lal-sw .lal-node i { background:color-mix(in srgb, var(--ink) 24%, transparent); box-shadow:none; }
.lal-sw.on .lal-node, .lal-sw.off .lal-node { background:var(--panel-2); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 20%, transparent); }
.lal-sw.later .lal-node i { opacity:1; }
.lal-sw.rec .lal-node { background:color-mix(in srgb, var(--tone) 14%, var(--panel)); box-shadow:inset 0 0 0 1.5px var(--tone); }
.lal-sw.rec .lal-node i { background:var(--tone); box-shadow:0 0 10px color-mix(in srgb, var(--tone) 60%, transparent); }
.lal-sw.on .lal-win-tx span, .lal-sw.off .lal-win-tx span { color:var(--ink-2); }
.lal-sw-mark { display:grid; place-items:center; flex:0 0 auto; width:28px; height:28px; border-radius:50%; }
.lal-sw-mark svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lal-sw-mark.on { color:var(--jade); background:color-mix(in srgb, var(--jade) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 45%, transparent); }
.lal-sw-mark.off { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 45%, transparent); }
.lal-sw-mark.empty { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.lal-sw.missed .lal-sw-mark.empty { opacity:.6; }

/* ==== the two stages: Record, then Diagnosis ==================================== */
#lite-align[data-stage="record"] > #lal-day, #lite-align[data-stage="record"] > #lal-find { display:none; }
#lite-align[data-stage="diagnosis"] > #lal-check, #lite-align[data-stage="diagnosis"] > #lal-times,
#lite-align[data-stage="diagnosis"] > #lal-hero, #lite-align[data-stage="diagnosis"] > #lal-log { display:none; }
.lal-stepper { display:grid; grid-template-columns:auto minmax(16px, 1fr) auto; align-items:center; gap:8px; margin:12px 0 14px; }
.lal-step { display:inline-flex; align-items:center; gap:10px; padding:5px 16px 5px 5px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--dr-ink-2); font:400 17px/1 var(--display); letter-spacing:-.005em; text-transform:none;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease; }
.lal-step i { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; font:600 12.5px/1 var(--body); font-style:normal;
  color:var(--dr-ink-2); box-shadow:inset 0 0 0 1.5px rgba(240,213,126,.32); }
.lal-step:hover { color:var(--dr-ink); }
.lal-step[aria-current="step"] { color:var(--dr-ink); background:rgba(240,213,126,.09); box-shadow:inset 0 0 0 1px rgba(240,213,126,.26); }
.lal-step[aria-current="step"] i { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:0 0 16px rgba(246,222,147,.35); }
.lal-step.done:not([aria-current="step"]) i { color:var(--jade); background:color-mix(in srgb, var(--jade) 18%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--jade) 55%, transparent); }
.lal-step:focus-visible { outline:2px solid var(--dr-lit); outline-offset:2px; }
.lal-stepper-line { height:1px; background:linear-gradient(90deg, rgba(240,213,126,.45), rgba(240,213,126,.12)); }
:root[data-theme="light"] .lal-step i { box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--brass) 45%, transparent); }
:root[data-theme="light"] .lal-stepper-line { background:linear-gradient(90deg, color-mix(in srgb, var(--brass) 50%, transparent), color-mix(in srgb, var(--brass) 15%, transparent)); }
@media (max-width:359px) { .lal-step { font-size:15px; padding-right:12px; } .lal-step i { width:26px; height:26px; } }

/* a stage slides in from the side it was pulled from */
@keyframes lal-in-next { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:none; } }
@keyframes lal-in-prev { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:none; } }
#lite-align.lal-in-next { animation:lal-in-next .32s cubic-bezier(.22,.9,.24,1); }
#lite-align.lal-in-prev { animation:lal-in-prev .32s cubic-bezier(.22,.9,.24,1); }
#lite-align { touch-action:pan-y; }
@media (prefers-reduced-motion: reduce) { #lite-align.lal-in-next, #lite-align.lal-in-prev { animation:none; } }

/* the empty-track note reads in full, above the dimmed future */
.lal-empty { z-index:3; }

/* ==== the breath record (Record stage) ============================================= */
#lite-align[data-stage="diagnosis"] > #lal-db { display:none; }
.lal-seg { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; padding:4px; border-radius:16px;
  background:color-mix(in srgb, var(--ink) 5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.lal-seg button { min-height:36px; padding:0 6px; border:0; border-radius:12px; cursor:pointer; background:transparent;
  color:var(--ink-2); font:500 13px/1 var(--body); text-transform:none; letter-spacing:normal; white-space:nowrap;
  transition:background .2s ease, color .2s ease; }
.lal-seg button:hover { color:var(--ink); }
.lal-seg button[aria-selected="true"] { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:0 6px 16px -10px rgba(214,178,74,.8); }
.lal-seg button:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lal-dbstats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lal-dbstats > div { display:grid; gap:6px; padding:14px 16px; border-radius:18px; background:color-mix(in srgb, var(--ink) 4.5%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.lal-dbstats b { font:300 30px/1 var(--display); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.lal-dbstats b small { font-size:.5em; font-weight:400; color:var(--ink-2); margin-left:1px; }
.lal-dbstats em { font:400 12px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lal-dbsides { display:grid; gap:9px; }
.lal-dbbar { display:flex; height:10px; border-radius:5px; overflow:hidden; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.lal-dbbar i { display:block; height:100%; }
.lal-dbbar i + i { box-shadow:inset 2px 0 0 var(--panel); }
.lal-dbbar .n-ida, .lal-dbkey .n-ida, .lal-dbdots .n-ida { background:var(--soma); }
.lal-dbbar .n-pingala, .lal-dbkey .n-pingala, .lal-dbdots .n-pingala { background:var(--sindoor); }
.lal-dbbar .n-sushumna, .lal-dbkey .n-sushumna, .lal-dbdots .n-sushumna { background:var(--brass-hi); }
.lal-dbkey { display:flex; flex-wrap:wrap; gap:6px 16px; font:500 12px/1.2 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lal-dbkey span { display:inline-flex; align-items:center; gap:7px; }
.lal-dbkey i { width:10px; height:10px; border-radius:50%; }
.lal-dbdays { display:grid; gap:8px; }
.lal-dbday { border-radius:18px; background:color-mix(in srgb, var(--ink) 3.5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.lal-dbday[open] { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.lal-dbday > summary { list-style:none; display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:'date count' 'dots dots';
  align-items:center; gap:8px 12px; padding:13px 16px; cursor:pointer; }
.lal-dbday > summary::-webkit-details-marker { display:none; }
.lal-dbday > summary:focus-visible { outline:2px solid var(--brass-hi); outline-offset:-2px; border-radius:18px; }
.lal-dbdate { grid-area:date; font:400 15px/1.2 var(--display); color:var(--ink); }
.lal-dbcount { grid-area:count; font:500 12px/1 var(--body); color:var(--dim); white-space:nowrap; font-variant-numeric:tabular-nums; }
.lal-dbdots { grid-area:dots; display:flex; flex-wrap:wrap; gap:4px; }
.lal-dbdots i { width:8px; height:8px; border-radius:50%; opacity:.9; }
.lal-dblist { list-style:none; margin:0; padding:2px 16px 10px; display:grid; }
.lal-dblist li { display:grid; grid-template-columns:48px minmax(0, 1fr) auto 28px; align-items:center; gap:10px; padding:9px 0; }
.lal-dblist li + li { border-top:1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.lal-dblist time { font:500 12px/1 var(--mono); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lal-dbside { display:inline-flex; align-items:center; gap:8px; min-width:0; font:400 14px/1.2 var(--body); color:var(--ink); }
.lal-dbsrc { padding:4px 8px; border-radius:999px; font:500 10.5px/1 var(--body); color:var(--dim); background:color-mix(in srgb, var(--ink) 6%, transparent); white-space:nowrap; }
.lal-dbmore, .lal-dbexport { justify-self:center; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:0; border-radius:999px;
  cursor:pointer; font:500 12.5px/1 var(--body); text-transform:none; letter-spacing:normal; color:var(--ink-2); background:var(--panel-2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.lal-dbmore:hover, .lal-dbexport:hover { color:var(--ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 45%, transparent); }
.lal-dbexport svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:359px) { .lal-seg button { font-size:12px; } .lal-dblist li { grid-template-columns:44px minmax(0, 1fr) 28px; } .lal-dbsrc { display:none; } }

/* Pro's measuring overlays (breath counter, hold timer, the practice guides) open above
   Lite's drawer: they sat at z-index 60, under the sheet at 62, when opened from it */
.lite-app .sdguide { z-index:90; }

/* ==== Check now, compact: a header toggle, a one-line result, and either three buttons
   or one question at a time (the user: clear, compact, premium) ==================== */
.lal-check .lal-how { display:none; }
.lal-toggle { flex:0 0 auto; display:inline-grid; grid-template-columns:1fr 1fr; padding:3px; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 6%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.lal-toggle button { min-height:30px; padding:0 12px; border:0; border-radius:999px; cursor:pointer; background:transparent; color:var(--ink-2);
  font:500 12px/1 var(--body); text-transform:none; letter-spacing:normal; white-space:nowrap; transition:background .2s ease, color .2s ease; }
.lal-toggle button[aria-selected="true"] { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.lal-toggle button:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lal-check .lal-hd { align-items:center; }
.lal-hint { margin:-6px 0 0; font:400 13px/1.45 var(--body); color:var(--ink-2); }

/* the latest check */
.lal-res { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; padding:10px 14px 10px 10px; border-radius:18px;
  background:color-mix(in srgb, var(--tone) 9%, var(--panel-2)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 26%, transparent); }
.lal-res-nose { display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--tone) 24%, transparent), transparent 70%); }
.lal-res-nose .lal-nose { width:30px; }
.lal-res-tx { display:grid; gap:2px; min-width:0; }
.lal-res-tx b { font:400 17px/1.2 var(--display); color:var(--tone); }
.lal-res-tx em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.lal-res-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; }
.lal-res-mark svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lal-res.on .lal-res-mark { color:var(--jade); background:color-mix(in srgb, var(--jade) 16%, transparent); }
.lal-res.off .lal-res-mark { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 16%, transparent); }

/* one question at a time */
.lal-wiz { display:grid; gap:14px; }
.lal-wiz-top { display:flex; align-items:center; gap:12px; }
.lal-wiz-prog { flex:1 1 auto; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:5px; }
.lal-wiz-prog button { height:4px; padding:0; border:0; border-radius:2px; cursor:pointer; background:color-mix(in srgb, var(--ink) 12%, transparent); }
.lal-wiz-prog button.done { background:color-mix(in srgb, var(--brass-hi) 55%, transparent); }
.lal-wiz-prog button.cur { background:linear-gradient(90deg, #D6B24A, #F6DE93); box-shadow:0 0 8px rgba(246,222,147,.5); }
.lal-wiz-n { font:500 11.5px/1 var(--mono); color:var(--dim); white-space:nowrap; }
.lal-wiz-q { display:grid; gap:4px; }
.lal-wiz-q b { font:400 19px/1.25 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lal-wiz-q span { font:400 12.5px/1.45 var(--body); color:var(--dim); }
.lal-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(62px, 1fr)); gap:8px; }
.lal-tile { display:grid; justify-items:center; align-content:center; gap:8px; min-height:84px; padding:10px 4px; border:0; border-radius:18px; cursor:pointer;
  color:var(--ink-2); background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 6%, var(--panel-2)), var(--panel-2));
  font:500 12.5px/1.15 var(--body); text-transform:none; letter-spacing:normal; text-align:center;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  transition:box-shadow .2s ease, color .2s ease, transform .15s ease; }
.lal-tile .sdico { width:32px; height:32px; }
.lal-tile:hover { color:var(--ink); }
.lal-tile:active { transform:scale(.96); }
.lal-tile.on { color:var(--ink); background:linear-gradient(180deg, color-mix(in srgb, var(--brass-hi) 16%, var(--panel-2)), color-mix(in srgb, var(--brass-hi) 8%, var(--panel-2)));
  box-shadow:inset 0 0 0 1.5px var(--brass-hi), 0 10px 22px -16px color-mix(in srgb, var(--brass-hi) 80%, transparent); }
.lal-tile:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lal-tiles.more { display:block; }
.lal-more-grid { display:grid; gap:14px; }
.lal-mrow { display:grid; gap:8px; }
.lal-mrow.two { grid-template-columns:1fr 1fr; gap:10px; }
.lal-swatches { display:flex; gap:10px; }
.lal-swatch { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; cursor:pointer; background:transparent;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.lal-swatch i { width:26px; height:26px; border-radius:50%; }
.lal-swatch.on { box-shadow:inset 0 0 0 2px var(--brass-hi), 0 0 14px color-mix(in srgb, var(--brass-hi) 40%, transparent); }
.lal-chipset { display:flex; flex-wrap:wrap; gap:6px; }
.lal-chip { min-height:34px; padding:0 14px; border:0; border-radius:999px; cursor:pointer; color:var(--ink-2); background:var(--panel-2);
  font:500 12.5px/1 var(--body); text-transform:none; letter-spacing:normal; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.lal-chip.on { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:none; }
.lal-num { display:grid; gap:8px; min-width:0; }
.lal-numwrap { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; border-radius:14px; background:var(--panel-2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.lal-numwrap:focus-within { box-shadow:inset 0 0 0 1.5px var(--brass-hi); }
.lal-numwrap input { width:100%; min-width:0; min-height:42px; padding:0 0 0 12px; border:0; background:transparent; color:var(--ink); font:400 16px/1 var(--display); }
.lal-numwrap input:focus { outline:none; }
.lal-inline { margin:4px; min-height:34px; padding:0 10px; border:0; border-radius:10px; cursor:pointer; color:var(--brass-hi);
  background:color-mix(in srgb, var(--brass-hi) 12%, transparent); font:600 12px/1 var(--body); text-transform:none; letter-spacing:normal; }
.lal-wiz-foot { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; }
.lal-navbtn { display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:50%; cursor:pointer; color:var(--ink);
  background:var(--panel-2); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.lal-navbtn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lal-navbtn[disabled] { opacity:.35; cursor:default; }
.lal-wiz-foot > .lal-navbtn:last-child:not(:first-child) { grid-column:3; }
.lal-wiz-sum { font:400 12px/1.4 var(--body); color:var(--dim); text-align:center; text-wrap:balance; }
.lal-save { width:100%; min-height:48px; border:0; border-radius:16px; cursor:pointer; font:600 15px/1 var(--display); color:#1B1406;
  text-transform:none; letter-spacing:normal; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:0 12px 24px -16px rgba(214,178,74,.95); }
.lal-save[disabled] { cursor:default; opacity:.4; box-shadow:none; }
.lal-save:focus-visible, .lal-navbtn:focus-visible, .lal-chip:focus-visible, .lal-swatch:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lal-saved { margin:0; padding:10px 14px; border-radius:14px; font:500 13px/1.4 var(--body); color:var(--jade); background:color-mix(in srgb, var(--jade) 12%, transparent); }
.lal-saved.warn { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 12%, transparent); }
.lal-dbside > span { display:grid; gap:2px; min-width:0; }
.lal-dbside em { font:400 11.5px/1.3 var(--body); font-style:normal; color:var(--dim); }
@media (max-width:359px) { .lal-check .lal-hd { flex-wrap:wrap; } .lal-mrow.two { grid-template-columns:1fr; } .lal-tile { min-height:76px; } }

/* ---- the question tabs: a slim bar each, on a finger-sized target ---- */
.lal-wiz-tabs { flex:1 1 auto; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:4px; }
.lal-wiz-tabs button { display:grid; align-items:center; height:28px; padding:0; border:0; background:transparent; cursor:pointer; }
.lal-wiz-tabs i { display:block; height:4px; border-radius:2px; background:color-mix(in srgb, var(--ink) 12%, transparent); transition:background .25s ease, box-shadow .25s ease; }
.lal-wiz-tabs button.done i { background:color-mix(in srgb, var(--brass-hi) 55%, transparent); }
.lal-wiz-tabs button.cur i { background:linear-gradient(90deg, #D6B24A, #F6DE93); box-shadow:0 0 8px rgba(246,222,147,.5); }
.lal-wiz-tabs button:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:4px; }
.lal-wiz-body { display:grid; gap:14px; }
@keyframes lal-wiz-next { from { opacity:0; transform:translateX(22px); } to { opacity:1; transform:none; } }
@keyframes lal-wiz-prev { from { opacity:0; transform:translateX(-22px); } to { opacity:1; transform:none; } }
.lal-wiz-body.lal-wiz-next { animation:lal-wiz-next .28s cubic-bezier(.22,.9,.24,1); }
.lal-wiz-body.lal-wiz-prev { animation:lal-wiz-prev .28s cubic-bezier(.22,.9,.24,1); }
@media (prefers-reduced-motion: reduce) { .lal-wiz-body.lal-wiz-next, .lal-wiz-body.lal-wiz-prev { animation:none; } }
.lal-navbtn.next { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:none; }
/* the end: the reading reviewed, and Save */
.lal-review { display:grid; gap:6px; padding:14px 16px; border-radius:16px; background:color-mix(in srgb, var(--brass-hi) 7%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 22%, transparent); }
.lal-review p { margin:0; font:400 14px/1.45 var(--body); color:var(--ink); }
.lal-review p.empty { color:var(--dim); }
.lal-wiz-end { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:10px; }
.lal-wiz-end .lal-navbtn { width:48px; height:48px; border-radius:16px; }
/* the colour swatches wrap on the narrowest phones */
.lal-swatches { flex-wrap:wrap; }
@media (max-width:359px) { .lal-swatches { gap:8px; } .lal-swatch { width:36px; height:36px; } .lal-swatch i { width:22px; height:22px; } }

/* ==== confirmations on the button itself ============================================ */
.lfl-tick { width:15px; height:15px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lal-ans button.is-done { color:var(--jade); background:linear-gradient(180deg, color-mix(in srgb, var(--jade) 20%, var(--panel-2)), color-mix(in srgb, var(--jade) 10%, var(--panel-2)));
  box-shadow:inset 0 0 0 1.5px var(--jade), 0 0 22px -6px color-mix(in srgb, var(--jade) 55%, transparent); animation:lfl-pop .32s cubic-bezier(.22,.9,.24,1); }
.lal-ans button.is-done i { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:color-mix(in srgb, var(--jade) 22%, transparent); }
.lal-ans button.is-done i .lfl-tick { width:17px; height:17px; }
.lal-ans button.is-wait, .lal-ans button:disabled:not(.is-done) { opacity:.42; cursor:default; }
.lal-ans button.on { color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--tone), 0 0 0 4px color-mix(in srgb, var(--tone) 14%, transparent); }
.lal-save.is-done, .lal-dbexport.is-done, .lal-inline.is-done { display:inline-flex; align-items:center; justify-content:center; gap:8px; opacity:1;
  color:var(--jade); background:color-mix(in srgb, var(--jade) 16%, var(--panel-2)); box-shadow:inset 0 0 0 1.5px var(--jade); animation:lfl-pop .32s cubic-bezier(.22,.9,.24,1); }
.lal-inline.is-done { gap:4px; }
@keyframes lfl-pop { 0% { transform:scale(.96); } 60% { transform:scale(1.02); } 100% { transform:none; } }
/* Pro's own record buttons, confirmed the same way */
.lite-app .lfl-done { display:inline-flex !important; align-items:center; justify-content:center; gap:7px; color:var(--jade) !important;
  background:color-mix(in srgb, var(--jade) 16%, var(--panel-2)) !important; box-shadow:inset 0 0 0 1.5px var(--jade) !important;
  border-color:var(--jade) !important; opacity:1 !important; animation:lfl-pop .32s cubic-bezier(.22,.9,.24,1); }
.lite-app .lfl-done i { display:none !important; }
.lite-app .lfl-done::before { display:none !important; }
.lite-app .lfl-wait { opacity:.42 !important; }
@media (prefers-reduced-motion: reduce) { .lal-ans button.is-done, .lal-save.is-done, .lal-dbexport.is-done, .lal-inline.is-done, .lite-app .lfl-done { animation:none; } }

/* ==== the next check, at the top of the Check now card ============================= */
.lal-next { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:12px; margin:-4px -4px 0; padding:10px 14px;
  border-radius:16px; background:color-mix(in srgb, var(--ink) 4.5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.lal-next i { width:10px; height:10px; border-radius:50%; background:var(--dim); }
.lal-next.due { background:color-mix(in srgb, var(--brass-hi) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 32%, transparent); }
.lal-next.due i { background:var(--brass-hi); box-shadow:0 0 0 4px color-mix(in srgb, var(--brass-hi) 18%, transparent), 0 0 12px var(--brass-hi); }
.lal-next.done i { background:var(--jade); box-shadow:0 0 0 4px color-mix(in srgb, var(--jade) 16%, transparent); }
.lal-next-tx { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; min-width:0; }
.lal-next-tx b { font:500 14px/1.25 var(--display); color:var(--ink); }
.lal-next.due .lal-next-tx b { color:var(--brass-hi); }
.lal-next-tx span { font:400 12px/1.35 var(--body); color:var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .lal-next.due i { animation:lal-next-pulse 2.4s ease-in-out infinite; }
  @keyframes lal-next-pulse { 50% { box-shadow:0 0 0 7px color-mix(in srgb, var(--brass-hi) 6%, transparent), 0 0 16px var(--brass-hi); } }
}

/* ==== the breath record as data: day by day, time by time, every parameter ========== */
.lal-seg.five { grid-template-columns:repeat(5, minmax(0, 1fr)); }
.lal-seg.five button { font-size:12.5px; padding:0 4px; }
.lal-dbstats.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.lal-dbstats.three > div { padding:12px 12px; }
.lal-dbstats.three b { font-size:24px; }
.lal-dbday > summary { grid-template-areas:'date count' 'dots dots'; }
.lal-dbdots i.det { box-shadow:0 0 0 1.5px var(--panel), 0 0 0 3px color-mix(in srgb, var(--brass-hi) 70%, transparent); }
.lal-dbdots i.n-x { background:var(--rule); }
.lrec-tablewrap { margin:0 10px 12px; overflow-x:auto; border-radius:14px; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); background:color-mix(in srgb, var(--ink) 2%, var(--panel)); }
.lrec-tablewrap:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lrec-tablewrap::-webkit-scrollbar { height:6px; }
.lrec-tablewrap::-webkit-scrollbar-thumb { border-radius:3px; background:color-mix(in srgb, var(--brass-hi) 40%, transparent); }
.lrec-table { border-collapse:separate; border-spacing:0; min-width:100%; font:400 12.5px/1.3 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lrec-table th, .lrec-table td { padding:10px 12px; text-align:left; white-space:nowrap; vertical-align:middle; }
.lrec-table thead th { position:sticky; top:0; z-index:1; font:600 9.5px/1.2 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  background:color-mix(in srgb, var(--ink) 5%, var(--panel)); border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
/* the time stays in view while the parameters slide */
.lrec-table thead th:first-child, .lrec-table tbody th { position:sticky; left:0; z-index:2; }
.lrec-table tbody th { font:500 12px/1 var(--mono); color:var(--ink-2); background:var(--panel);
  box-shadow:1px 0 0 color-mix(in srgb, var(--ink) 8%, transparent); }
.lrec-table thead th:first-child { z-index:3; box-shadow:1px 0 0 color-mix(in srgb, var(--ink) 8%, transparent); }
.lrec-table tbody tr + tr > * { border-top:1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.lrec-table tbody tr:nth-child(even) td { background:color-mix(in srgb, var(--ink) 2%, transparent); }
.lrec-table tbody tr.practice td, .lrec-table tbody tr.practice th { background:color-mix(in srgb, var(--soma) 6%, var(--panel)); }
.lrec-table td.nm span { color:color-mix(in srgb, var(--ink) 28%, transparent); }
.lrec-nadi { display:inline-flex; align-items:center; gap:6px; }
.lrec-nadi i { width:8px; height:8px; border-radius:50%; }
.lrec-mode { display:inline-block; padding:3px 8px; border-radius:999px; font:600 10.5px/1.2 var(--body); letter-spacing:.02em; }
.lrec-mode.quick { color:var(--ink-2); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.lrec-mode.detailed { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.lrec-ctx { display:block; margin-top:3px; font:400 10.5px/1.2 var(--body); font-style:normal; color:var(--dim); }
.lrec-table .lal-sw-mark { width:24px; height:24px; }
.lrec-table .lal-sw-mark svg { width:12px; height:12px; }
.lrec-legend { margin:-4px 2px 0; font:400 11.5px/1.45 var(--body); color:var(--dim); }
.lrec-nmkey { color:color-mix(in srgb, var(--ink) 40%, transparent); font-weight:600; }
@media (max-width:359px) { .lal-seg.five { grid-template-columns:repeat(3, minmax(0, 1fr)); } .lal-dbstats.three { grid-template-columns:1fr 1fr; } }

/* the table slides inside its own box; it never widens the card (grid and details children
   otherwise size to their widest content) */
.lal-card > *, .lal-dbdays, .lal-dbday, .lal-dbsides, .lal-dbstats { min-width:0; }
.lal-dbday { display:block; overflow:hidden; }
.lrec-tablewrap { max-width:calc(100% - 20px); }

/* the stage switch keeps the header's centred column on wide screens, in line with the label above and the bar below */
.lal-stage > .lal-stepper { margin-left:auto; margin-right:auto; }

/* ==== DIAGNOSIS: body, mind and spirit — your breath beside your code ====================== */
#lite-align[data-stage="record"] > #lal-dx { display:none; }
#lal-dx { display:grid; gap:16px; min-width:0; }
#lal-dx:empty { display:none; }
.ldx-card {
  --ldx-b:#EBC66A; --ldx-c:#7FB6CF;
  --ldx-skin-a:#3A362F; --ldx-skin-b:#2C2924; --ldx-skin-c:#1B1A17; --ldx-light:#EEE8DC; --ldx-light-op:.10;
  --ldx-rim:rgba(238,232,220,.16); --ldx-floor:rgba(0,0,0,.55); --ldx-spine:rgba(235,211,162,.22);
  --ldx-easy:#7DB99E; --ldx-load:#E6C88A; --ldx-strain:#D8734D; --ldx-chan:#F6DE93; --ldx-chan-glow:rgba(246,222,147,.8);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ldx-card {
    --ldx-b:#946A00; --ldx-c:#2C6D8A;
    --ldx-skin-a:#E9DDC6; --ldx-skin-b:#DCCDB1; --ldx-skin-c:#CBB894; --ldx-light:#FFFFFF; --ldx-light-op:.55;
    --ldx-rim:rgba(70,50,20,.22); --ldx-floor:rgba(70,50,20,.22); --ldx-spine:rgba(106,80,0,.28);
    --ldx-easy:#3E8A69; --ldx-load:#B38A1E; --ldx-strain:#B9502B; --ldx-chan:#8A6A12; --ldx-chan-glow:rgba(138,106,18,.45);
  }
}
:root[data-theme="light"] .ldx-card {
  --ldx-b:#946A00; --ldx-c:#2C6D8A;
  --ldx-skin-a:#E9DDC6; --ldx-skin-b:#DCCDB1; --ldx-skin-c:#CBB894; --ldx-light:#FFFFFF; --ldx-light-op:.55;
  --ldx-rim:rgba(70,50,20,.22); --ldx-floor:rgba(70,50,20,.22); --ldx-spine:rgba(106,80,0,.28);
  --ldx-easy:#3E8A69; --ldx-load:#B38A1E; --ldx-strain:#B9502B; --ldx-chan:#8A6A12; --ldx-chan-glow:rgba(138,106,18,.45);
}

/* ---- 1 · the three levels ---- */
.ldx-tabs { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ldx-tabs button { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.ldx-count { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  font:600 10.5px/1 var(--body); font-style:normal; background:color-mix(in srgb, var(--ink) 12%, transparent); }
.ldx-tabs button[aria-selected="true"] .ldx-count { background:rgba(27,20,6,.16); }
.ldx-key { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:-4px; font:500 11.5px/1 var(--body); color:var(--dim); }
.ldx-key span { display:inline-flex; align-items:center; gap:6px; }
.ldx-key i { width:14px; height:5px; border-radius:3px; }
.ldx-key .b i { background:var(--ldx-b); }
.ldx-key .c i { background:var(--ldx-c); }
.ldx-key .r i { background:color-mix(in srgb, var(--ink) 18%, transparent); }
.ldx-rows { display:grid; gap:10px; }
.ldx-row { min-width:0; border-radius:20px; overflow:hidden; background:color-mix(in srgb, var(--ink) 3.5%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); transition:background .2s ease; }
.ldx-row.open { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.ldx-row.v-both { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-b) 34%, transparent); }
.ldx-row.v-breath { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-b) 22%, transparent); }
.ldx-row.v-code { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-c) 26%, transparent); }
.ldx-row-hd { display:grid; gap:12px; width:100%; min-width:0; padding:15px 16px 12px; border:0; margin:0; background:transparent;
  color:inherit; font:inherit; text-align:left; text-transform:none; letter-spacing:normal; cursor:pointer; }
.ldx-row-hd:focus-visible { outline:2px solid var(--brass-hi); outline-offset:-2px; border-radius:20px; }
.ldx-row-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-width:0; }
.ldx-row-say { display:grid; gap:7px; min-width:0; }
.ldx-row-say b { font:400 16.5px/1.28 var(--display); letter-spacing:-.005em; color:var(--ink); text-wrap:pretty; }
.ldx-el { justify-self:start; padding:3px 8px; border-radius:999px; font:600 9.5px/1.1 var(--body); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.ldx-verdict { flex:0 0 auto; margin-top:1px; padding:5px 10px; border-radius:999px; font:600 10.5px/1 var(--body); letter-spacing:.02em;
  white-space:nowrap; color:var(--dim); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.v-both .ldx-verdict { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.v-breath .ldx-verdict { color:var(--ldx-b); background:color-mix(in srgb, var(--ldx-b) 14%, transparent); }
.v-code .ldx-verdict { color:var(--ldx-c); background:color-mix(in srgb, var(--ldx-c) 15%, transparent); }
.v-hint .ldx-verdict { color:var(--ink-2); }
.ldx-meters { display:grid; gap:8px; min-width:0; }
.ldx-m { display:grid; grid-template-columns:48px minmax(0, 1fr) auto; align-items:center; gap:10px; min-height:18px; min-width:0; }
.ldx-m em { font:600 10.5px/1 var(--body); font-style:normal; letter-spacing:.04em; }
.ldx-m.b em { color:var(--ldx-b); }
.ldx-m.c em { color:var(--ldx-c); }
.ldx-m b { min-width:34px; font:500 12px/1 var(--mono); color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ldx-m-txt { grid-column:2 / span 2; font:400 12px/1.3 var(--body); color:var(--dim); }
.ldx-bar { position:relative; height:8px; border-radius:4px; overflow:hidden; background:color-mix(in srgb, var(--ink) 7%, transparent); }
.ldx-bar i { position:absolute; top:0; bottom:0; }
.ldx-bar .ci { background:color-mix(in srgb, var(--ink) 13%, transparent); }
.ldx-bar .v { left:0; border-radius:4px; }
.ldx-m.b .ldx-bar .v { background:linear-gradient(90deg, color-mix(in srgb, var(--ldx-b) 55%, transparent), var(--ldx-b)); }
.ldx-m.c .ldx-bar .v { background:linear-gradient(90deg, color-mix(in srgb, var(--ldx-c) 55%, transparent), var(--ldx-c)); }
.ldx-bar .bar { width:2px; background:var(--ink); opacity:.45; }
.ldx-pips { display:flex; gap:4px; min-width:0; }
.ldx-pips i { flex:1 1 0; max-width:16px; height:8px; border-radius:3px; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.ldx-pips i.on { background:var(--ldx-b); }
.ldx-pips i.mark { box-shadow:0 0 0 1.5px color-mix(in srgb, var(--ink) 40%, transparent); }
.ldx-row-cite { display:flex; align-items:center; justify-content:space-between; gap:8px; font:500 10.5px/1.2 var(--body); letter-spacing:.04em; color:var(--dim); }
.ldx-chev { flex:0 0 auto; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
.ldx-row.open .ldx-chev { transform:rotate(180deg); }
.ldx-row-bd { display:grid; gap:10px; padding:0 16px 16px; min-width:0; }
.ldx-gloss { margin:0; font:italic 400 13px/1.45 var(--body); color:var(--ink-2); }
.ldx-ev { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.ldx-ev li { position:relative; padding-left:14px; font:400 13px/1.45 var(--body); color:var(--ink); text-wrap:pretty; }
.ldx-ev li::before { content:''; position:absolute; left:2px; top:.6em; width:5px; height:5px; border-radius:50%; background:color-mix(in srgb, var(--ink) 32%, transparent); }
.ldx-q { margin:0; padding:10px 13px; border-radius:14px; background:color-mix(in srgb, var(--brass-hi) 6.5%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 14%, transparent); }
.ldx-q p { margin:0; font:400 13.5px/1.42 var(--display); color:var(--ink); text-wrap:pretty; }
.ldx-q p::before { content:'\201C'; } .ldx-q p::after { content:'\201D'; }
.ldx-q.note p::before, .ldx-q.note p::after { content:none; }
.ldx-q.commentary { background:color-mix(in srgb, var(--ink) 4%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.ldx-q.commentary p { font-style:italic; }
.ldx-q cite { display:block; margin-top:5px; font:500 10.5px/1.3 var(--body); font-style:normal; letter-spacing:.03em; color:var(--dim); }
.ldx-needs { display:flex; flex-wrap:wrap; gap:6px; }
.ldx-need { display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:999px; font:500 11.5px/1.2 var(--body);
  color:var(--ink-2); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.ldx-need em { font:700 9.5px/1 var(--body); font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:var(--sindoor); }
.ldx-need.sharpens em { color:var(--brass-hi); }
.ldx-need.optional em { color:var(--dim); }
.ldx-cite-full { margin:0; font:500 10.5px/1.35 var(--body); letter-spacing:.03em; color:var(--dim); }

/* ---- 2 · the body: two solid figures ---- */
.ldx-figs { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; min-width:0; }
.ldx-fig { display:grid; gap:10px; align-content:start; min-width:0; margin:0; padding:14px 10px 12px; border-radius:22px;
  background:radial-gradient(circle at 50% 42%, rgba(214,177,115,.09), rgba(143,134,214,.035) 45%, transparent 72%), color-mix(in srgb, var(--ink) 2.5%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.ldx-fig-hd { display:grid; gap:3px; text-align:center; }
.ldx-fig-hd b { font:600 13px/1.2 var(--body); letter-spacing:.01em; }
.ldx-fig:first-child .ldx-fig-hd b { color:var(--ldx-b); }
.ldx-fig + .ldx-fig .ldx-fig-hd b { color:var(--ldx-c); }
.ldx-fig-hd span { font:400 11px/1.3 var(--body); color:var(--dim); }
.ldx-fig-body { position:relative; min-width:0; }
.ldx-body { display:block; width:100%; max-width:220px; height:auto; margin:0 auto; overflow:visible; }
.ldx-skin-a { stop-color:var(--ldx-skin-a); }
.ldx-skin-b { stop-color:var(--ldx-skin-b); }
.ldx-skin-c { stop-color:var(--ldx-skin-c); }
.ldx-light-a { stop-color:var(--ldx-light); stop-opacity:var(--ldx-light-op); }
.ldx-light-b { stop-color:var(--ldx-light); stop-opacity:0; }
.ldx-rim { fill:none; stroke:var(--ldx-rim); stroke-width:.7; }
.ldx-floor { fill:var(--ldx-floor); }
.ldx-spine { stroke:var(--ldx-spine); stroke-width:.6; stroke-dasharray:1.5 3; }
.ldx-channel { stroke:var(--ldx-chan); stroke-width:3.4; stroke-linecap:round; filter:drop-shadow(0 0 3px var(--ldx-chan-glow)); }
.ldx-pt.easy { fill:var(--ldx-easy); }
.ldx-pt.load { fill:var(--ldx-load); }
.ldx-pt.strain { fill:var(--ldx-strain); }
.ldx-wheel .ldx-halo { fill:var(--c); opacity:0; transform-box:fill-box; transform-origin:center; }
.ldx-wheel .ldx-core { fill:var(--panel); stroke:var(--c); stroke-width:1.2; }
.ldx-wheel.load .ldx-core, .ldx-wheel.strain .ldx-core { fill:var(--c); }
.ldx-wheel.strain .ldx-halo { opacity:.25; animation:ldx-halo 2.4s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes ldx-halo { 0% { transform:scale(.6); opacity:.45; } 100% { transform:scale(1.9); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .ldx-wheel.strain .ldx-halo { animation:none; opacity:.2; } }
.ldx-fig.empty .ldx-body { opacity:.5; }
.ldx-fig-empty { position:absolute; left:4px; right:4px; top:40%; margin:0; padding:9px 10px; border-radius:12px; text-align:center;
  font:500 11.5px/1.35 var(--body); color:var(--ink); background:color-mix(in srgb, var(--panel) 86%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 10px 24px -14px rgba(0,0,0,.6); }
.ldx-places { display:grid; gap:5px; margin:0; padding:0 4px; list-style:none; }
.ldx-places li { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:8px; align-items:baseline; font:400 11.5px/1.35 var(--body); color:var(--ink-2); }
.ldx-places li b { font:500 11px/1 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.ldx-places.none { margin:0; text-align:center; font:400 11.5px/1.35 var(--body); color:var(--dim); }
.ldx-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; font:500 11.5px/1 var(--body); color:var(--dim); }
.ldx-legend span { display:inline-flex; align-items:center; gap:6px; }
.ldx-legend i { width:8px; height:8px; border-radius:50%; }
.ldx-legend i.easy { background:var(--ldx-easy); }
.ldx-legend i.load { background:var(--ldx-load); }
.ldx-legend i.strain { background:var(--ldx-strain); }
.ldx-legend i.chan { width:3px; height:12px; border-radius:2px; background:var(--ldx-chan); box-shadow:0 0 6px var(--ldx-chan-glow); }
.ldx-small { margin:0; font:400 11.5px/1.5 var(--body); color:var(--dim); text-wrap:pretty; }

/* ---- 3 · the breath's own measures ---- */
.ldx-tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.ldx-tile { display:grid; gap:8px; align-content:start; min-width:0; padding:14px; border-radius:18px;
  background:color-mix(in srgb, var(--ink) 4%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.ldx-tile > b { font:300 30px/1 var(--display); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.ldx-tile > b small { margin-left:5px; font:400 12px/1 var(--body); letter-spacing:0; color:var(--ink-2); }
.ldx-tile.early > b { color:var(--dim); }
.ldx-tile .ldx-q { padding:8px 10px; }
.ldx-tile .ldx-q p { font-size:12.5px; }
@media (max-width:540px) { .ldx-tiles { grid-template-columns:minmax(0, 1fr); } }

/* ---- 4 · how sure ---- */
.ldx-needlist { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.ldx-needlist li { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px; align-items:start; min-width:0; padding:12px 14px; border-radius:16px;
  background:color-mix(in srgb, var(--ink) 3.5%, transparent); }
.ldx-tick { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; }
.ldx-tick svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ldx-needlist li.ok .ldx-tick { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.ldx-needlist li.miss .ldx-tick { color:var(--sindoor); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--sindoor) 60%, transparent); }
.ldx-needlist li.miss.optional .ldx-tick, .ldx-needlist li.miss.sharpens .ldx-tick { color:var(--brass-hi); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--brass-hi) 45%, transparent); }
.ldx-needlist b { display:block; font:500 14px/1.3 var(--body); color:var(--ink); }
.ldx-needlist em { display:block; margin-top:4px; font:600 10px/1.2 var(--body); font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.ldx-needlist li.miss.essential em { color:var(--sindoor); }
.ldx-needlist p { margin:6px 0 0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); text-wrap:pretty; }
.ldx-method { border-radius:16px; background:color-mix(in srgb, var(--ink) 3%, transparent); }
.ldx-method summary { list-style:none; cursor:pointer; padding:13px 14px; font:500 13px/1.2 var(--body); color:var(--ink); }
.ldx-method summary::-webkit-details-marker { display:none; }
.ldx-method summary:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:16px; }
.ldx-method p { margin:0; padding:0 14px 12px; font:400 12.5px/1.5 var(--body); color:var(--ink-2); text-wrap:pretty; }
@media (max-width:359px) {
  .ldx-m { grid-template-columns:42px minmax(0, 1fr) auto; gap:8px; }
  .ldx-figs { gap:8px; }
  .ldx-fig { padding:12px 6px 10px; }
  .ldx-period button { font-size:12px; padding:0 2px; }
  .ldx-row-hd { padding:14px 13px 11px; }
  .ldx-row-bd { padding:0 13px 14px; }
}

/* the diagnosis: quieter period chips, compact measure tiles */
.ldx-period { padding:3px; border-radius:14px; }
.ldx-period button { min-height:30px; font-size:12.5px; }
.ldx-period button[aria-selected="true"] { color:var(--ink); background:color-mix(in srgb, var(--ink) 11%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.ldx-tile-k { font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--brass-hi) 70%, var(--dim)); }
.ldx-tile-sub { margin-top:-2px; font:400 12px/1.4 var(--body); color:var(--dim); text-wrap:pretty; }
.ldx-more { border-radius:12px; }
.ldx-more summary { list-style:none; cursor:pointer; font:500 12px/1.2 var(--body); color:var(--ink-2); padding:2px 0; }
.ldx-more summary::-webkit-details-marker { display:none; }
.ldx-more summary::after { content:' +'; color:var(--dim); }
.ldx-more[open] summary::after { content:' \2212'; }
.ldx-more summary:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:6px; }
.ldx-more[open] { display:grid; gap:8px; }

/* the chart card */
.ldx-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ldx-chip { display:inline-flex; align-items:baseline; gap:6px; padding:6px 11px; border-radius:999px; font:400 12px/1.2 var(--body); color:var(--ink-2);
  background:color-mix(in srgb, var(--ink) 5.5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.ldx-chip b { font-weight:600; color:var(--ink); }
.ldx-signs { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; margin-top:2px; font:600 11px/1 var(--body); color:var(--ink-2); white-space:nowrap; }
.ldx-dots { display:inline-flex; gap:3px; }
.ldx-dots i { width:7px; height:7px; border-radius:50%; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.ldx-crow { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 18%, transparent); }
.ldx-cite-in { display:inline-block; margin-left:4px; font:500 10.5px/1.2 var(--body); letter-spacing:.03em; color:var(--dim); }
.ldx-single b { font-weight:600; color:var(--ink-2); }
.ldx-areas { display:grid; gap:10px; }

/* the drawer in the light theme: the class sits on <html> itself, so the earlier
   ":root[data-theme=light] .lite-has-chart" rule could never match and the header
   kept its cream ink on the light glass */
:root[data-theme="light"].lite-has-chart .litedrawer {
  --dr-a:rgba(154,122,24,.18); --dr-b:rgba(154,122,24,.06); --dr-base:rgba(253,249,239,.80);
  --dr-edge:rgba(255,255,255,.95); --dr-ink:#2C2410; --dr-ink-2:#6B5B33; --dr-lit:#7A5B0A;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]).lite-has-chart .litedrawer {
    --dr-a:rgba(154,122,24,.18); --dr-b:rgba(154,122,24,.06); --dr-base:rgba(253,249,239,.80);
    --dr-edge:rgba(255,255,255,.95); --dr-ink:#2C2410; --dr-ink-2:#6B5B33; --dr-lit:#7A5B0A;
  }
}

/* the body card leads the Diagnosis stage */
#lite-align[data-stage="record"] > #lal-body { display:none; }
#lal-body:empty { display:none; }

/* ==== DIAGNOSIS · ONE READING (2026-09-17): body first, then what it means, then how sure ==== */
#lite-align[data-stage="diagnosis"] > #lal-body { order:1; }
#lite-align[data-stage="diagnosis"] > #lal-day { order:2; }
#lite-align[data-stage="diagnosis"] > #lal-dx { order:3; }
#lite-align[data-stage="diagnosis"] > #lal-find { display:none; }
#lite-align[data-stage="diagnosis"] > .lal-foot { order:9; }

/* ---- 1 · the body card ---- */
.ldx-bodycard { gap:14px; }
.ldx-periodbtn { border:0; cursor:pointer; font:500 11px/1 var(--body); }
.ldx-periodbtn::after { content:' \25BE'; color:var(--dim); }
.ldx-periodbtn:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.ldx-live { display:inline-flex; align-items:center; gap:6px; color:var(--ink); }
.ldx-live i { width:7px; height:7px; border-radius:50%; background:var(--ldx-strain); box-shadow:0 0 0 0 color-mix(in srgb, var(--ldx-strain) 60%, transparent); animation:ldx-live 1.8s ease-out infinite; }
@keyframes ldx-live { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--ldx-strain) 55%, transparent); } 100% { box-shadow:0 0 0 7px transparent; } }
.ldx-controls { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:8px; }
.ldx-switch { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.ldx-switch button { min-height:34px; font-size:12.5px; }
@media (max-width:359px) { .ldx-controls { grid-template-columns:minmax(0, 1fr); } }
/* the Body map's three views in one switch, beside the layer (the user, 2026-09-30: "show these toggles together
   but in concise and clear way"); on a phone the two switches take a row each */
.ldx-controls3 { grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); }
.ldx-controls3 > .ldx-switch:first-child { grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:520px) { .ldx-controls3 { grid-template-columns:minmax(0, 1fr); } }
.ldx-empty { display:grid; justify-items:center; gap:10px; padding:18px 16px; border-radius:18px; text-align:center;
  background:color-mix(in srgb, var(--ink) 3%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.ldx-empty p { margin:0; max-width:40ch; font:400 13px/1.45 var(--body); color:var(--ink-2); }
.ldx-figwrap { display:grid; place-items:center; min-width:0; padding:4px 0 0;
  background:radial-gradient(circle at 50% 44%, rgba(214,177,115,.10), rgba(143,134,214,.035) 42%, transparent 68%); }
.ldx-figwrap .ldx-body { width:min(100%, 250px); max-width:none; }
@media (min-width:760px) { .ldx-figwrap .ldx-body { width:300px; } }
.ldx-skin.dim { opacity:.42; }
.ldx-pt { transition:opacity .5s ease; }
.ldx-pt.none { fill:none; stroke:color-mix(in srgb, var(--ink) 40%, transparent); stroke-width:.7; }
.ldx-pt.chart { stroke:var(--brass-hi); stroke-width:.9; }
.ldx-pt.none.chart { stroke:var(--brass-hi); }
.ldx-pt.dimmed { opacity:.12 !important; }
.ldx-wheel.none .ldx-core { fill:none; stroke-dasharray:1.4 1.4; }
.ldx-wheel.dimmed { opacity:.2; }
.ldx-wheel.chart .ldx-halo { fill:none; stroke:var(--brass-hi); stroke-width:.9; opacity:.9; }
.ldx-body.has-hi .ldx-pt:not(.dimmed) { filter:drop-shadow(0 0 2px color-mix(in srgb, var(--ldx-b) 80%, transparent)); }
/* now: flow, never strain */
.ldx-pt.quiet { fill:color-mix(in srgb, var(--ink) 55%, transparent); }
.ldx-pt.flow { animation:ldx-breathe 4s ease-in-out infinite; }
.ldx-pt.flow-ida { fill:var(--soma); }
.ldx-pt.flow-pingala { fill:var(--sindoor); }
.ldx-pt.flow-sushumna { fill:var(--brass-hi); }
.ldx-pt.el { stroke-width:1.1; }
.ldx-pt.el-prithvi { stroke:#E4C04A; } .ldx-pt.el-jala { stroke:#F1ECDF; } .ldx-pt.el-agni { stroke:#E0573B; }
.ldx-pt.el-vayu { stroke:#7FB6DB; } .ldx-pt.el-akasha { stroke:#C49BE0; }
.ldx-wheel.flow .ldx-core { fill:var(--c); }
.ldx-wheel.el .ldx-halo { opacity:.35; }
@keyframes ldx-breathe { 0%, 100% { opacity:.55; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .ldx-pt.flow, .ldx-live i { animation:none; } }
/* the channels */
.ldx-nadi { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ldx-nadi.main.n-ida { stroke:var(--soma); }
.ldx-nadi.main.n-pingala { stroke:var(--sindoor); }
.ldx-nadi.main.n-sushumna { stroke:var(--brass-hi); }
.ldx-nadi.outlet { stroke:color-mix(in srgb, var(--ink) 58%, transparent); stroke-dasharray:1.6 2; stroke-width:1.1 !important; }
.ldx-nadi-code { fill:none; stroke:color-mix(in srgb, var(--ink) 30%, transparent); stroke-dasharray:3 3; stroke-linecap:round; }
.ldx-nadi.dimmed { opacity:.15; }
.ldx-nadi.off { opacity:.35; }
.ldx-nadi.on { stroke-dasharray:6 5; animation:ldx-flowup 1.6s linear infinite; filter:drop-shadow(0 0 3px currentColor); }
.ldx-nadi.on.el-prithvi { stroke:#E4C04A; } .ldx-nadi.on.el-jala { stroke:#F1ECDF; } .ldx-nadi.on.el-agni { stroke:#E0573B; }
.ldx-nadi.on.el-vayu { stroke:#7FB6DB; } .ldx-nadi.on.el-akasha { stroke:#C49BE0; }
@keyframes ldx-flowup { to { stroke-dashoffset:-22; } }
@media (prefers-reduced-motion: reduce) { .ldx-nadi.on { animation:none; stroke-dasharray:none; } }
.ldx-kanda { fill:var(--brass-hi); stroke:var(--panel); stroke-width:1; }
.ldx-force { fill:var(--panel); stroke:color-mix(in srgb, var(--ink) 55%, transparent); stroke-width:.8; }
/* legend chips */
.ldx-bodycard .ldx-legend i.k-flow { background:var(--soma); }
.ldx-bodycard .ldx-legend i.k-flow.k-pingala { background:var(--sindoor); }
.ldx-bodycard .ldx-legend i.k-flow.k-sushumna { background:var(--brass-hi); }
.ldx-bodycard .ldx-legend i.k-el { background:transparent; box-shadow:inset 0 0 0 1.6px var(--ink); }
.ldx-bodycard .ldx-legend i.k-el.el-prithvi { box-shadow:inset 0 0 0 1.6px #E4C04A; } .ldx-bodycard .ldx-legend i.k-el.el-jala { box-shadow:inset 0 0 0 1.6px #F1ECDF; }
.ldx-bodycard .ldx-legend i.k-el.el-agni { box-shadow:inset 0 0 0 1.6px #E0573B; } .ldx-bodycard .ldx-legend i.k-el.el-vayu { box-shadow:inset 0 0 0 1.6px #7FB6DB; }
.ldx-bodycard .ldx-legend i.k-el.el-akasha { box-shadow:inset 0 0 0 1.6px #C49BE0; }
.ldx-bodycard .ldx-legend i.k-none { background:transparent; box-shadow:inset 0 0 0 1.2px color-mix(in srgb, var(--ink) 45%, transparent); }
.ldx-bodycard .ldx-legend i.k-chart { background:transparent; box-shadow:inset 0 0 0 1.4px var(--brass-hi); }
/* the same ring wherever a map of the difference keys it: Summary's map, Progress, Reach (it was unstyled outside the Body map) */
.lra-card .ldx-legend i.k-chart, .lraB-key i.k-chart, .lraN-key i.k-chart { display:inline-block; flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  background:transparent; box-shadow:inset 0 0 0 1.4px var(--brass-hi); }
.ldx-bodycard .ldx-legend i.k-easy { background:var(--ldx-easy); } .ldx-bodycard .ldx-legend i.k-load { background:var(--ldx-load); } .ldx-bodycard .ldx-legend i.k-strain { background:var(--ldx-strain); }
.ldx-bodycard .ldx-legend i.k-ida { background:var(--soma); } .ldx-bodycard .ldx-legend i.k-pin { background:var(--sindoor); } .ldx-bodycard .ldx-legend i.k-sus { background:var(--brass-hi); }
.ldx-bodycard .ldx-legend i.k-code { width:12px; height:2px; border-radius:0; background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 45%, transparent) 0 3px, transparent 3px 5px); }
.ldx-bodycard .ldx-legend i.k-out { width:12px; height:2px; border-radius:0; background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 45%, transparent) 0 2px, transparent 2px 4px); }
.ldx-head { display:grid; gap:4px; text-align:center; }
.ldx-headline { margin:0; font:400 17px/1.3 var(--display); letter-spacing:-.005em; color:var(--ink); text-wrap:balance; }
.ldx-sub { margin:0; font:400 12px/1.4 var(--body); color:var(--dim); text-wrap:balance; }
.ldx-chiprow { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.ldx-chipbtn { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 13px; border:0; border-radius:999px; cursor:pointer;
  font:500 12.5px/1 var(--body); text-transform:none; letter-spacing:normal; color:var(--ink);
  background:color-mix(in srgb, var(--ink) 6%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent); }
.ldx-chipbtn i { width:8px; height:8px; border-radius:50%; background:var(--dim); }
.ldx-chipbtn.v-both i { background:var(--ldx-strain); } .ldx-chipbtn.v-breath i { background:var(--ldx-b); } .ldx-chipbtn.v-chart i { background:transparent; box-shadow:inset 0 0 0 1.6px var(--brass-hi); }
.ldx-chipbtn.on { box-shadow:inset 0 0 0 1.5px var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 10%, transparent); }
.ldx-chipbtn.clear { color:var(--ink-2); }
.ldx-chipbtn:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.ldx-mirror { margin:-4px 0 0; text-align:center; font:400 11px/1.4 var(--body); color:var(--dim); }
/* the prominent diseases and ailments, named — one quiet block, read from the left (the user, 2026-09-30):
   what it is in a line, the names, how to use them, when, and the rule in small print */
.ldx-names { display:grid; gap:10px; justify-items:start; text-align:left; padding:14px 15px 13px; border-radius:18px;
  background:color-mix(in srgb, var(--ink) 3%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.ldx-names-lede { margin:0; font:500 13.5px/1.4 var(--body); color:var(--ink); text-wrap:pretty; }
.ldx-namelist { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.ldx-names .ldx-namelist { justify-content:flex-start; }
.ldx-name { display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:6px 13px; border:0; border-radius:999px; cursor:pointer;
  font:500 13px/1.15 var(--body); text-transform:none; letter-spacing:normal; color:var(--ink); text-align:left;
  background:color-mix(in srgb, var(--ldx-strain) 9%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-strain) 24%, transparent); }
.ldx-name:hover { background:color-mix(in srgb, var(--ldx-strain) 15%, transparent); }
.ldx-name.on { box-shadow:inset 0 0 0 1.5px var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 12%, transparent); }
.ldx-name:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.ldx-names-note { margin:0; max-width:46ch; font:400 11px/1.4 var(--body); color:var(--dim); text-wrap:balance; }
.ldx-names .ldx-names-note, .lst-named .ldx-names-note { max-width:62ch; text-wrap:pretty; }
.ldx-names-tap { display:inline-flex; align-items:center; gap:7px; margin:0; font:500 12.5px/1.35 var(--body); color:var(--ink-2); text-align:left; }
.ldx-names-tap svg { flex:0 0 auto; width:16px; height:16px; fill:none; stroke:var(--ldx-strain); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lst-named { gap:12px; }
.lst-named .ldx-names-lede { font-size:14px; }
.ldx-mrow-names { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; font:500 12.5px/1.35 var(--body); color:var(--ink); }
.ldx-mrow-names em { font:600 9.5px/1.2 var(--body); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb, var(--ldx-strain) 75%, var(--dim)); }
.ldx-mrow-names.soft { font-weight:400; color:var(--ink-2); }
.ldx-mrow-names.soft em { color:var(--dim); }
.ldx-namesev li { overflow-wrap:anywhere; }
.ldx-nn { font:600 10.5px/1 var(--body); white-space:nowrap; }
.ldx-nn.pro { color:color-mix(in srgb, var(--ldx-strain) 80%, var(--ink)); }
.ldx-nn.one { color:var(--dim); font-weight:500; }

/* ---- 2 · what it means ---- */
.ldx-levels3 { display:grid; gap:20px; min-width:0; }
@media (min-width:760px) { .ldx-levels3 { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; align-items:start; } }
.ldx-level { display:grid; gap:10px; min-width:0; align-content:start; }
.ldx-level-hd { display:flex; align-items:center; gap:9px; margin:0; font:500 15px/1 var(--display); color:var(--ink); }
.ldx-level-ic { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:color-mix(in srgb, var(--brass-hi) 10%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 24%, transparent); }
.ldx-level-ic svg { width:16px; height:16px; fill:none; stroke:var(--brass-hi); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ldx-mrows { display:grid; gap:8px; }
.ldx-mrow { min-width:0; border-radius:18px; overflow:hidden; background:color-mix(in srgb, var(--ink) 3.5%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.ldx-mrow.v-both { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-strain) 40%, transparent); }
.ldx-mrow.sel { box-shadow:inset 0 0 0 1.5px var(--brass-hi); }
.ldx-mrow-hd { display:grid; gap:7px; width:100%; min-width:0; margin:0; padding:13px 14px; border:0; background:transparent; color:inherit; font:inherit;
  text-align:left; text-transform:none; letter-spacing:normal; cursor:pointer; }
.ldx-mrow-hd:focus-visible { outline:2px solid var(--brass-hi); outline-offset:-2px; border-radius:18px; }
.ldx-mrow-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ldx-mrow-top b { font:500 14.5px/1.3 var(--body); color:var(--ink); text-wrap:pretty; }
.ldx-pill { flex:0 0 auto; padding:4px 9px; border-radius:999px; font:600 10.5px/1.1 var(--body); white-space:nowrap; color:var(--ink-2);
  background:color-mix(in srgb, var(--ink) 7%, transparent); }
.v-both .ldx-pill { color:#fff; background:linear-gradient(180deg, #E08C6A, #C9594C); }
.v-breath .ldx-pill { color:var(--ldx-b); background:color-mix(in srgb, var(--ldx-b) 14%, transparent); }
.v-chart .ldx-pill { color:var(--brass-hi); background:transparent; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 45%, transparent); }
.v-present .ldx-pill { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.ldx-mrow-say { font:400 12.5px/1.4 var(--body); color:var(--ink-2); }
.ldx-ws { display:flex; flex-wrap:wrap; gap:4px 14px; }
.ldx-w { display:inline-flex; align-items:center; gap:6px; font:600 11px/1.2 var(--body); color:var(--ink); }
.ldx-w em { font-style:normal; font-weight:400; color:var(--dim); }
.ldx-w i { width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1.4px color-mix(in srgb, var(--ink) 45%, transparent); }
.ldx-w.yes i { background:var(--ldx-b); box-shadow:none; }
.ldx-w.faint i { background:color-mix(in srgb, var(--ldx-b) 40%, transparent); box-shadow:none; }
.ldx-w.na i { box-shadow:none; background:linear-gradient(90deg, transparent 3px, color-mix(in srgb, var(--ink) 40%, transparent) 3px 6px, transparent 6px); }
.ldx-w.wait i { box-shadow:inset 0 0 0 1.4px color-mix(in srgb, var(--ink) 30%, transparent); }
.ldx-mrow-bd { display:grid; gap:12px; padding:0 14px 15px; }
.ldx-sec { display:grid; gap:6px; }
.ldx-sec p { margin:0; font:400 13px/1.45 var(--body); color:var(--ink); }
.ldx-sec-k { font:600 9.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--brass-hi) 70%, var(--dim)); }
.ldx-sec .ldx-ev li b { font-weight:600; }
.ldx-quiet { margin:0; font:400 12px/1.45 var(--body); color:var(--dim); }
.ldx-quiet b { font-weight:600; color:var(--ink-2); }
.ldx-morebtn { justify-self:start; min-height:30px; padding:0 12px; border:0; border-radius:999px; cursor:pointer; font:500 12px/1 var(--body); text-transform:none;
  letter-spacing:normal; color:var(--ink-2); background:color-mix(in srgb, var(--ink) 6%, transparent); }

/* ---- 3 · how sure ---- */
.ldx-ticks { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.ldx-ticks li { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; padding:9px 12px; border-radius:14px;
  background:color-mix(in srgb, var(--ink) 3.5%, transparent); font:400 13px/1.3 var(--body); color:var(--ink); }
.ldx-ticks li b { font:500 13px/1 var(--mono); font-variant-numeric:tabular-nums; }
.ldx-ticks li.ok .ldx-tick { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.ldx-ticks li.miss .ldx-tick { color:var(--sindoor); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--sindoor) 60%, transparent); }
.ldx-trustline { margin:0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.ldx-missing { display:grid; gap:8px; }
.ldx-missing ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.ldx-missing li { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 10px; padding:10px 12px; border-radius:14px; background:color-mix(in srgb, var(--ink) 3.5%, transparent); }
.ldx-missing li b { font:500 13px/1.3 var(--body); color:var(--ink); }
.ldx-missing li em { font:700 9.5px/1.2 var(--body); font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-hi); align-self:center; }
.ldx-missing li em.essential { color:var(--sindoor); }
.ldx-missing li p { grid-column:1 / -1; margin:0; font:400 12px/1.45 var(--body); color:var(--ink-2); }
.ldx-deep { border-radius:16px; background:color-mix(in srgb, var(--ink) 3%, transparent); }
.ldx-deep > summary { list-style:none; cursor:pointer; padding:13px 14px; font:500 13px/1.2 var(--body); color:var(--ink); }
.ldx-deep > summary::-webkit-details-marker { display:none; }
.ldx-deep > summary::after { content:' +'; color:var(--dim); }
.ldx-deep[open] > summary::after { content:' \2212'; }
.ldx-deep > summary:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:16px; }
.ldx-deepbody { display:grid; gap:12px; padding:0 6px 8px; min-width:0; }
.ldx-deepbody > .lal-card { padding:18px 14px; border-radius:20px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }

/* the channel web: thousands of strands, one path per look */
.ldx-web { fill:none; stroke-linecap:round; }
.ldx-web.d0 { stroke-width:.95; }
.ldx-web.d1 { stroke-width:.6; }
.ldx-web.d2 { stroke-width:.38; }
.ldx-web.none { stroke:color-mix(in srgb, var(--ink) 34%, transparent); }
.ldx-web.easy { stroke:color-mix(in srgb, var(--ldx-easy) 80%, transparent); }
.ldx-web.load { stroke:var(--ldx-load); }
.ldx-web.strain { stroke:var(--ldx-strain); }
.ldx-web.dimmed { opacity:.12; }
.ldx-web.quiet { stroke:color-mix(in srgb, var(--ink) 22%, transparent); }
.ldx-web.flow { animation:ldx-breathe 4s ease-in-out infinite; }
.ldx-web.flow-ida { stroke:var(--soma); } .ldx-web.flow-pingala { stroke:var(--sindoor); } .ldx-web.flow-sushumna { stroke:var(--brass-hi); }
.ldx-web.el-prithvi { stroke:#E4C04A; } .ldx-web.el-jala { stroke:#F1ECDF; } .ldx-web.el-agni { stroke:#E0573B; }
.ldx-web.el-vayu { stroke:#7FB6DB; } .ldx-web.el-akasha { stroke:#C49BE0; }
@media (prefers-reduced-motion: reduce) { .ldx-web.flow { animation:none; } }
.ldx-nadis .ldx-skin.dim { opacity:.5; }

/* strain in six steps, clear to strained, through the theme's own three colours */
.ldx-card { --ldx-s0:var(--ldx-easy); --ldx-s1:color-mix(in srgb, var(--ldx-easy) 55%, var(--ldx-load)); --ldx-s2:var(--ldx-load);
  --ldx-s3:color-mix(in srgb, var(--ldx-load) 60%, var(--ldx-strain)); --ldx-s4:var(--ldx-strain); --ldx-s5:color-mix(in srgb, var(--ldx-strain) 78%, #7A1F12); }
.ldx-pt.s0 { fill:var(--ldx-s0); } .ldx-pt.s1 { fill:var(--ldx-s1); } .ldx-pt.s2 { fill:var(--ldx-s2); }
.ldx-pt.s3 { fill:var(--ldx-s3); } .ldx-pt.s4 { fill:var(--ldx-s4); } .ldx-pt.s5 { fill:var(--ldx-s5); }
.ldx-wheel.s2 .ldx-core, .ldx-wheel.s3 .ldx-core, .ldx-wheel.s4 .ldx-core, .ldx-wheel.s5 .ldx-core { fill:var(--c); }
.ldx-wheel.s4 .ldx-halo, .ldx-wheel.s5 .ldx-halo { opacity:.25; animation:ldx-halo 2.4s cubic-bezier(.22,.61,.36,1) infinite; }
@media (prefers-reduced-motion: reduce) { .ldx-wheel.s4 .ldx-halo, .ldx-wheel.s5 .ldx-halo { animation:none; } }
.ldx-web.s0 { stroke:color-mix(in srgb, var(--ldx-s0) 80%, transparent); } .ldx-web.s1 { stroke:var(--ldx-s1); } .ldx-web.s2 { stroke:var(--ldx-s2); }
.ldx-web.s3 { stroke:var(--ldx-s3); } .ldx-web.s4 { stroke:var(--ldx-s4); } .ldx-web.s5 { stroke:var(--ldx-s5); }
.ldx-scale { display:inline-flex; align-items:center; gap:3px; }
.ldx-scale em { font-style:normal; margin:0 4px; }
.ldx-bodycard .ldx-legend .ldx-scale i.sc { width:10px; height:8px; border-radius:2px; }
.ldx-bodycard .ldx-legend i.sc.s0 { background:var(--ldx-s0); } .ldx-bodycard .ldx-legend i.sc.s1 { background:var(--ldx-s1); }
.ldx-bodycard .ldx-legend i.sc.s2 { background:var(--ldx-s2); } .ldx-bodycard .ldx-legend i.sc.s3 { background:var(--ldx-s3); }
.ldx-bodycard .ldx-legend i.sc.s4 { background:var(--ldx-s4); } .ldx-bodycard .ldx-legend i.sc.s5 { background:var(--ldx-s5); }

/* strain and blockage in Now and on the channels */
.ldx-pt.flow { animation:ldx-breathe 4s ease-in-out infinite; }
.ldx-pt.offnow { stroke:var(--ldx-strain); stroke-width:.9; }
.ldx-wheel.flow .ldx-halo { opacity:.3; }
.ldx-nadi.main.b0 { stroke:var(--ldx-s0); } .ldx-nadi.main.b1 { stroke:var(--ldx-s1); } .ldx-nadi.main.b2 { stroke:var(--ldx-s2); }
.ldx-nadi.main.b3 { stroke:var(--ldx-s3); } .ldx-nadi.main.b4 { stroke:var(--ldx-s4); } .ldx-nadi.main.b5 { stroke:var(--ldx-s5); }
.ldx-nadi.main.bnone { stroke:color-mix(in srgb, var(--ink) 45%, transparent); }
.ldx-nadi.blockednow { stroke-dasharray:2.5 3; filter:drop-shadow(0 0 2px var(--ldx-strain)); }
.ldx-bodycard .ldx-legend i.k-blocked { width:12px; height:3px; border-radius:0; background:repeating-linear-gradient(90deg, var(--ldx-strain) 0 3px, transparent 3px 5px); }

/* front or back — where Sushruta puts each point: front ●, back ■, side / sole / palm / crown ◆, inside the body ○ */
.ldx-pt.inside { stroke-width:1.05; fill-opacity:.28; }
.ldx-pt.inside.s0 { stroke:var(--ldx-s0); } .ldx-pt.inside.s1 { stroke:var(--ldx-s1); } .ldx-pt.inside.s2 { stroke:var(--ldx-s2); }
.ldx-pt.inside.s3 { stroke:var(--ldx-s3); } .ldx-pt.inside.s4 { stroke:var(--ldx-s4); } .ldx-pt.inside.s5 { stroke:var(--ldx-s5); }
.ldx-pt.inside.none { fill-opacity:0; }
.ldx-shapes { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; font:500 11.5px/1 var(--body); color:var(--dim); }
.ldx-shapes span { display:inline-flex; align-items:center; gap:5px; }
.ldx-shapes svg { width:10px; height:10px; fill:color-mix(in srgb, var(--ink) 62%, transparent); stroke:none; }
.ldx-shapes svg.ring { fill:none; stroke:color-mix(in srgb, var(--ink) 62%, transparent); stroke-width:1.6; }
.ldx-shapes b { font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* when — the periods that bring a tendency on (Phaladeepika 20.21), and the sky now (26) */
.ldx-now-dot { display:inline-block; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--ldx-strain);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ldx-strain) 22%, transparent); }
.ldx-name.now { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-strain) 55%, transparent); }
.ldx-name .ldx-now-dot { align-self:center; margin-right:1px; }
.ldx-names-when { display:flex; align-items:center; justify-content:center; gap:8px; margin:0; font:500 12px/1.35 var(--body); color:var(--ink); text-wrap:balance; }
.ldx-names .ldx-names-when, .lst-named .ldx-names-when { justify-content:flex-start; color:var(--ink-2); text-wrap:pretty; }
.ldx-mrow-when { display:inline-flex; align-items:center; gap:7px; font:600 11px/1.2 var(--body); color:color-mix(in srgb, var(--ldx-strain) 80%, var(--ink)); }
.ldx-whenfold { border-radius:16px; background:color-mix(in srgb, var(--ldx-strain) 5%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-strain) 16%, transparent); }
.ldx-whenfold > summary { list-style:none; cursor:pointer; padding:13px 14px; font:500 13.5px/1.2 var(--body); color:var(--ink); }
.ldx-whenfold > summary::-webkit-details-marker { display:none; }
.ldx-whenfold > summary::after { content:' +'; color:var(--dim); }
.ldx-whenfold[open] > summary::after { content:' \2212'; }
.ldx-whenfold > summary:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:16px; }
.ldx-when { display:grid; gap:12px; padding:0 14px 14px; min-width:0; }
.ldx-when > div { display:grid; gap:6px; min-width:0; }
.ldx-when p { margin:0; font:400 13px/1.45 var(--body); color:var(--ink); text-wrap:pretty; }
.ldx-when ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.ldx-when-next li { display:grid; grid-template-columns:minmax(0, 8.5em) minmax(0, 1fr); gap:10px; align-items:baseline;
  font:400 12.5px/1.4 var(--body); color:var(--ink); }
.ldx-when-date { font:500 11.5px/1.3 var(--mono); font-variant-numeric:tabular-nums; color:var(--dim); }
@media (max-width:420px) { .ldx-when-next li { grid-template-columns:minmax(0, 1fr); gap:2px; } }
.ldx-when-sky li { position:relative; padding-left:14px; font:400 12.5px/1.45 var(--body); color:var(--ink); overflow-wrap:anywhere; }
.ldx-when-sky li::before { content:''; position:absolute; left:1px; top:.55em; width:6px; height:6px; border-radius:50%; background:color-mix(in srgb, var(--ink) 35%, transparent); }
.ldx-when-sky li.plain::before, .ldx-when-sky li.aggravated::before { background:var(--ldx-strain); }
.ldx-when-sky li.relief::before { background:var(--ldx-easy); }
.ldx-when-note { font-size:12.5px !important; color:var(--ink-2) !important; }
.ldx-when-note.heavy { color:color-mix(in srgb, var(--ldx-strain) 70%, var(--ink)) !important; }
.ldx-when-note.light { color:color-mix(in srgb, var(--ldx-easy) 70%, var(--ink)) !important; }

/* the seven centres on the channels — open (full), partly open (half), quiet (hollow); the climb; the knots */
.ldx-climb { stroke:var(--brass-hi); stroke-linecap:round; filter:drop-shadow(0 0 2.5px color-mix(in srgb, var(--brass-hi) 70%, transparent)); }
.ldx-centre .ring { fill:color-mix(in srgb, var(--ground) 55%, transparent); stroke:var(--c); stroke-width:1.5; }
.ldx-centre .fill, .ldx-centre .half { fill:var(--c); stroke:none; }
.ldx-centre .half { opacity:.9; }
.ldx-centre .core { fill:color-mix(in srgb, #fff 85%, var(--c)); stroke:none; }
.ldx-centre.w-quiet .ring { stroke-dasharray:2.2 2; opacity:.85; }
.ldx-centre.w-quiet .core { fill:var(--c); opacity:.55; }
.ldx-centre.w-open .ring { filter:drop-shadow(0 0 3px var(--c)); }
.ldx-centre .heldmark { fill:none; stroke:var(--ldx-strain); stroke-width:1.3; stroke-dasharray:3 2.2; animation:ldx-held 3s linear infinite; transform-box:fill-box; transform-origin:center; }
@keyframes ldx-held { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ldx-centre .heldmark { animation:none; } }
.ldx-knot path { fill:none; stroke-width:1.7; stroke-linecap:round; }
.ldx-knot.holds path { stroke:var(--ldx-strain); }
.ldx-knot.passes path { stroke:var(--ldx-easy); stroke-dasharray:2 2.2; opacity:.9; }
.ldx-knot.unreached path { stroke:color-mix(in srgb, var(--ink) 38%, transparent); }
.ldx-bodycard .ldx-legend .ldx-ckey { gap:5px; }
.ldx-ckey svg { width:13px; height:13px; }
.ldx-ckey svg .o { fill:var(--brass-hi); stroke:var(--brass-hi); stroke-width:1.4; }
.ldx-ckey svg .r { fill:none; stroke:var(--brass-hi); stroke-width:1.4; }
.ldx-ckey svg .k { fill:none; stroke:var(--ldx-strain); stroke-width:1.6; stroke-linecap:round; }

.ldx-centres { display:grid; gap:10px; min-width:0; padding:14px 14px 12px; border-radius:18px;
  background:color-mix(in srgb, var(--ink) 3.5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.ldx-centres-hd { display:grid; gap:4px; }
.ldx-centres-grade { display:flex; align-items:baseline; gap:10px; margin:0; }
.ldx-centres-grade b { font:300 22px/1.1 var(--display); letter-spacing:-.01em; color:var(--ink); }
.ldx-centres-grade em { font:500 12px/1 var(--mono); font-style:normal; font-variant-numeric:tabular-nums; color:var(--dim); }
.ldx-centres-say { margin:0; font:400 13px/1.45 var(--body); color:var(--ink-2); text-wrap:pretty; }
.ldx-crows { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.ldx-crows li { display:grid; grid-template-columns:auto minmax(0, 1fr) auto minmax(46px, 26%) 3.2em; align-items:center; column-gap:9px; row-gap:3px;
  padding:7px 8px; border-radius:12px; font:400 12.5px/1.25 var(--body); color:var(--ink); }
.ldx-crows li.held { background:color-mix(in srgb, var(--ldx-strain) 9%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-strain) 30%, transparent); }
.ldx-crows .dot { width:10px; height:10px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--c); }
.ldx-crows li.w-open .dot { background:var(--c); }
.ldx-crows li.w-partly .dot { background:linear-gradient(0deg, var(--c) 50%, transparent 50%); }
.ldx-crows .nm { min-width:0; font-weight:500; overflow-wrap:anywhere; }
.ldx-crows .nm em { font-style:normal; font-weight:400; color:var(--dim); }
.ldx-crows .pill { padding:3px 8px; border-radius:999px; font:600 10.5px/1.1 var(--body); white-space:nowrap; color:var(--ink-2);
  background:color-mix(in srgb, var(--ink) 7%, transparent); }
.ldx-crows li.w-open .pill { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.ldx-crows li.w-quiet .pill { color:var(--dim); background:transparent; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent); }
.ldx-crows .bar { position:relative; height:6px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.ldx-crows .bar b { position:absolute; inset:0 auto 0 0; border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--brass-hi) 70%, transparent), var(--brass-hi)); }
.ldx-crows .pct { font:500 11.5px/1 var(--mono); font-variant-numeric:tabular-nums; text-align:right; color:var(--ink-2); }
.ldx-crows .knot { grid-column:2 / -1; justify-self:start; padding:2px 8px; border-radius:999px; font:600 10.5px/1.3 var(--body); }
.ldx-crows .knot.holds { color:color-mix(in srgb, var(--ldx-strain) 85%, var(--ink)); background:color-mix(in srgb, var(--ldx-strain) 12%, transparent); }
.ldx-crows .knot.passes { color:color-mix(in srgb, var(--ldx-easy) 85%, var(--ink)); background:color-mix(in srgb, var(--ldx-easy) 12%, transparent); }
.ldx-crows .knot.unreached { color:var(--dim); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.ldx-crows .knot.heldtag { color:#fff; background:linear-gradient(180deg, #E08C6A, #C9594C); }
@media (max-width:420px) {
  .ldx-crows li { grid-template-columns:auto minmax(0, 1fr) auto 3em; }
  .ldx-crows .bar { grid-column:2 / -1; grid-row:2; }
  .ldx-crows .pct { grid-column:4; grid-row:1; }
}
.ldx-centres .ldx-names-note { max-width:none; }
.ldx-cfold { border-radius:12px; }
.ldx-cfold > summary { list-style:none; cursor:pointer; padding:4px 0; font:500 12px/1.2 var(--body); color:var(--ink-2); }
.ldx-cfold > summary::-webkit-details-marker { display:none; }
.ldx-cfold > summary::after { content:' +'; color:var(--dim); }
.ldx-cfold[open] > summary::after { content:' \2212'; }
.ldx-cfold > summary:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.ldx-cfold p { margin:6px 0 0; font:400 12px/1.5 var(--body); color:var(--ink-2); text-wrap:pretty; }
/* the flow bar: its length is the energy arriving; gold goes on up, red is held back at the centre */
.ldx-crows li { grid-template-columns:auto minmax(0, 1fr) auto minmax(52px, 24%) 7.4em; }
.ldx-crows .bar { height:8px; }
.ldx-crows .bar b.go { position:absolute; top:0; bottom:0; left:0; border-radius:999px 0 0 999px; background:linear-gradient(90deg, color-mix(in srgb, var(--brass-hi) 70%, transparent), var(--brass-hi)); }
.ldx-crows .bar b.hold { position:absolute; top:0; bottom:0; border-radius:0 999px 999px 0; background:repeating-linear-gradient(135deg, var(--ldx-strain) 0 3px, color-mix(in srgb, var(--ldx-strain) 70%, transparent) 3px 5px); }
.ldx-crows .pct { font:500 11px/1.25 var(--body); text-align:right; white-space:nowrap; }
.ldx-crows .pct em { font-style:normal; color:var(--dim); }
@media (max-width:420px) {
  .ldx-crows li { grid-template-columns:auto minmax(0, 1fr) auto; }
  .ldx-crows .bar { grid-column:2 / -1; grid-row:2; }
  .ldx-crows .pct { grid-column:2 / -1; grid-row:3; text-align:left; }
}
.ldx-namesev .ldx-sk { font-style:italic; font-weight:400; color:var(--dim); }
.ldx-namesev .ldx-tr { font-size:12px; color:var(--dim); }
.ldx-namesev li.grave > b { color:color-mix(in srgb, var(--ldx-strain) 55%, var(--ink)); }
@media (max-width:420px) {
  .ldx-crows .pct br { display:none; }
  .ldx-crows .pct em::before { content:' · '; }
}

/* ====================================================================
   REALIGNMENT — stage 3 of Swara Alignment
   ==================================================================== */
/* which parts show in which stage */
#lite-align[data-stage="record"] > [id^="lal-ra-"], #lite-align[data-stage="diagnosis"] > [id^="lal-ra-"] { display:none; }
#lite-align[data-stage="realign"] > #lal-check, #lite-align[data-stage="realign"] > #lal-times, #lite-align[data-stage="realign"] > #lal-hero,
#lite-align[data-stage="realign"] > #lal-log, #lite-align[data-stage="realign"] > #lal-db, #lite-align[data-stage="realign"] > #lal-find,
#lite-align[data-stage="realign"] > #lal-body, #lite-align[data-stage="realign"] > #lal-day, #lite-align[data-stage="realign"] > #lal-dx { display:none; }
#lite-align[data-stage="realign"] > #lal-ra-diff { order:1; }
#lite-align[data-stage="realign"] > #lal-ra-times { order:2; }
#lite-align[data-stage="realign"] > #lal-ra-body { order:3; }
#lite-align[data-stage="realign"] > #lal-ra-tech { order:4; }
#lite-align[data-stage="realign"] > .lal-foot { order:9; }

/* three steps: on a narrow sheet only the current step keeps its word */
.lal-stepper.three { grid-template-columns:auto minmax(10px, 1fr) auto minmax(10px, 1fr) auto; gap:6px; }
@media (max-width:560px) {
  .lal-stepper.three .lal-step:not([aria-current="step"]) { padding:5px; }
  .lal-stepper.three .lal-step:not([aria-current="step"]) span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .lal-stepper.three .lal-step[aria-current="step"] { padding-right:14px; }
}

.lra-card { gap:14px; }
.lra-note { margin:0; font:400 11.5px/1.5 var(--body); color:var(--dim); text-wrap:pretty; }
.lra-quiet { margin:0; font:400 12.5px/1.45 var(--body); color:var(--dim); }
.lra-sub { display:grid; gap:4px; }
.lra-sub p { margin:0; font:400 13.5px/1.5 var(--body); color:var(--ink); text-wrap:pretty; }
.lra-sub p b { font-weight:600; }
.lra-lede { margin:0; text-align:center; font:400 12.5px/1.45 var(--body); color:var(--ink-2); text-wrap:balance; }
.lra-sec { display:grid; gap:8px; }

/* 1 · the indicator */
.lra-ind { display:grid; gap:12px; padding:14px; border-radius:20px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--jade) 9%, transparent), color-mix(in srgb, var(--ink) 3%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 22%, transparent); }
.lra-ind-main { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:14px; }
.lra-ring { position:relative; width:78px; height:78px; }
.lra-ring svg { width:78px; height:78px; }
.lra-ring .bg { fill:none; stroke:color-mix(in srgb, var(--ink) 10%, transparent); stroke-width:6; }
.lra-ring .fg { fill:none; stroke:var(--jade); stroke-width:6; stroke-linecap:round; filter:drop-shadow(0 0 4px color-mix(in srgb, var(--jade) 45%, transparent)); }
.lra-ring.empty .fg { opacity:0; }
.lra-ring b { position:absolute; inset:0; display:grid; place-items:center; font:300 20px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.lra-ind-tx { display:grid; gap:4px; min-width:0; }
.lra-ind-tx b { font:400 18px/1.2 var(--display); color:var(--ink); text-wrap:balance; }
.lra-ind-tx em { font:500 12px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lra-ind-tx em.up { color:var(--jade); }
.lra-ind-tx em.down { color:var(--sindoor); }
.lra-ind-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.lra-ind-cell { display:grid; gap:5px; padding:10px 12px; border-radius:14px; background:color-mix(in srgb, var(--ink) 4%, transparent); min-width:0; }
.lra-ind-cell b { font:400 20px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.lra-ind-cell em { font:400 11.5px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lra-bar { position:relative; height:6px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.lra-bar i { position:absolute; inset:0 auto 0 0; border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--jade) 65%, transparent), var(--jade)); }
.lra-bar i.ok { background:linear-gradient(90deg, color-mix(in srgb, var(--brass-hi) 65%, transparent), var(--brass-hi)); }
.lra-spark { display:grid; gap:2px; }
.lra-spark svg { display:block; width:100%; height:auto; max-height:64px; overflow:visible; }
.lra-spark path { fill:none; stroke:var(--jade); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.lra-spark circle { fill:var(--jade); }
.lra-spark circle.last { fill:var(--ink); stroke:var(--jade); stroke-width:1.4; }
.lra-spark span { display:flex; justify-content:space-between; font:400 10.5px/1 var(--body); color:var(--dim); }
.lra-spark em { font-style:normal; }
@media (max-width:359px) { .lra-ind-row { grid-template-columns:minmax(0, 1fr); } }

/* the pooled bands */
.lra-s { position:absolute; top:0; bottom:0; }
.lra-s.n-ida { background:var(--soma); }
.lra-s.n-pingala { background:var(--sindoor); }
.lra-s.n-sushumna { background:var(--brass-hi); }
.lra-s.unseen { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 10%, transparent) 0 3px, transparent 3px 6px); }
.lra-s.off { background:repeating-linear-gradient(135deg, var(--ldx-strain) 0 4px, color-mix(in srgb, var(--ldx-strain) 55%, #fff) 4px 6px); }
.lra-s.off.leans { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--ldx-strain) 60%, transparent) 0 4px, transparent 4px 6px); }
.lra-peak { position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; border-radius:2px; background:var(--ink); box-shadow:0 0 0 1px color-mix(in srgb, var(--ground) 60%, transparent); }
.lband-key i.lra-k-off { background:repeating-linear-gradient(135deg, var(--ldx-strain) 0 3px, color-mix(in srgb, var(--ldx-strain) 55%, #fff) 3px 4px); }
.lband-key i.lra-k-unseen { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 30%, transparent) 0 2px, transparent 2px 4px); }
.lra-times-list { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.lra-times-list li { display:grid; grid-template-columns:7.2em minmax(0, 1fr) 56px; gap:10px; align-items:baseline; padding:9px 12px; border-radius:14px;
  background:color-mix(in srgb, var(--sindoor) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 20%, transparent); }
.lra-times-list li.leans { background:color-mix(in srgb, var(--ink) 3%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.lra-when { font:500 12px/1.3 var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.lra-what { display:grid; gap:2px; min-width:0; }
.lra-what b { font:500 13px/1.3 var(--body); color:var(--ink); }
.lra-what em { font:400 12px/1.4 var(--body); font-style:normal; color:var(--ink-2); }
@media (max-width:400px) { .lra-times-list li { grid-template-columns:minmax(0, 1fr); gap:3px; } }
.lra-days { border-radius:14px; background:color-mix(in srgb, var(--ink) 3%, transparent); }
.lra-days > summary, .lra-fold > summary { list-style:none; cursor:pointer; padding:11px 14px; font:500 12.5px/1.2 var(--body); color:var(--ink-2); }
.lra-days > summary::-webkit-details-marker, .lra-fold > summary::-webkit-details-marker { display:none; }
.lra-days > summary::after, .lra-fold > summary::after { content:' +'; color:var(--dim); }
.lra-days[open] > summary::after, .lra-fold[open] > summary::after { content:' \2212'; }
.lra-days > summary:focus-visible, .lra-fold > summary:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:14px; }
.lra-days > .lra-note { padding:0 14px 12px; }
.lra-grid { display:grid; gap:5px; padding:0 14px 10px; }
.lra-grow { display:grid; grid-template-columns:4.6em minmax(0, 1fr) 2.6em; align-items:center; gap:8px; }
.lra-gday { font:500 11px/1.2 var(--body); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lra-gtrack { position:relative; height:14px; border-radius:7px; background:color-mix(in srgb, var(--ink) 5%, transparent); }
.lra-gtrack i { position:absolute; top:3px; width:8px; height:8px; margin-left:-4px; border-radius:50%; }
.lra-gtrack i.on { background:var(--jade); }
.lra-gtrack i.off { background:var(--sindoor); }
.lra-gn { font:500 11px/1 var(--mono); color:var(--dim); text-align:right; font-variant-numeric:tabular-nums; }

/* 2 · the difference on the body — the same six steps as Diagnosis, from matching the code to far off it;
   the centres ringed by what the breath takes from them against the code (red) or adds (green) */
.lra-card { --dx-p2:var(--ldx-load); --dx-p4:var(--ldx-strain); --dx-n2:color-mix(in srgb, var(--jade) 80%, transparent); --dx-n3:var(--jade); }
.lra-centre .ring { fill:color-mix(in srgb, var(--ground) 55%, transparent); stroke-width:2; }
.lra-centre .core { fill:var(--c); }
.lra-centre.cx-0 .ring { stroke:color-mix(in srgb, var(--ink) 40%, transparent); }
.lra-centre.cx-n1 .ring { stroke:var(--dx-p2); } .lra-centre.cx-n2 .ring { stroke:var(--dx-p4); filter:drop-shadow(0 0 3px var(--dx-p4)); }
.lra-centre.cx-p1 .ring { stroke:var(--dx-n2); } .lra-centre.cx-p2 .ring { stroke:var(--dx-n3); filter:drop-shadow(0 0 3px var(--dx-n3)); }
.lra-ckey { display:inline-flex; align-items:center; gap:6px; }
.ldx-bodycard .ldx-legend .lra-ckey i, .lra-card .ldx-legend .lra-ckey i { width:10px; height:10px; border-radius:50%; background:transparent; box-shadow:inset 0 0 0 2px var(--dx-p4); }
.lra-card .ldx-legend .lra-ckey i.cx-p2 { box-shadow:inset 0 0 0 2px var(--dx-n3); }
.lra-dxscale { display:inline-flex; align-items:center; gap:3px; }
.lra-dxscale em { font-style:normal; margin:0 4px; }
.lra-card .ldx-legend .ldx-scale i.sc { width:10px; height:8px; border-radius:2px; }
.lra-card .ldx-legend i.sc.s0 { background:var(--ldx-s0); } .lra-card .ldx-legend i.sc.s1 { background:var(--ldx-s1); } .lra-card .ldx-legend i.sc.s2 { background:var(--ldx-s2); }
.lra-card .ldx-legend i.sc.s3 { background:var(--ldx-s3); } .lra-card .ldx-legend i.sc.s4 { background:var(--ldx-s4); } .lra-card .ldx-legend i.sc.s5 { background:var(--ldx-s5); }
.lra-dxscale i { width:10px; height:8px; border-radius:2px; }
.lra-dxscale i.dx-p1 { background:var(--dx-p1); } .lra-dxscale i.dx-p2 { background:var(--dx-p2); } .lra-dxscale i.dx-p4 { background:var(--dx-p4); }
.lra-dxscale i.dx-n1 { background:var(--dx-n1); } .lra-dxscale i.dx-n3 { background:var(--dx-n3); } .lra-dxscale i.dx-0 { background:var(--dx-0); }
.lra-fixes { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.lra-fixes li { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:10px; padding:11px 13px; border-radius:16px;
  background:color-mix(in srgb, var(--ink) 3.5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.lra-fix-dot { width:12px; height:12px; margin-top:4px; border-radius:50%; background:var(--brass-hi); }
.lra-fixes li.t-ida .lra-fix-dot { background:var(--soma); box-shadow:0 0 8px var(--soma); }
.lra-fixes li.t-pingala .lra-fix-dot { background:var(--sindoor); box-shadow:0 0 8px var(--sindoor); }
.lra-fixes li > div { display:grid; gap:4px; min-width:0; }
.lra-fixes b { font:500 13.5px/1.3 var(--body); color:var(--ink); }
.lra-fixes em { font:400 12px/1.4 var(--body); font-style:normal; color:var(--ink-2); }
.lra-fix-where { font:400 12px/1.45 var(--body); color:var(--dim); overflow-wrap:anywhere; }
.lra-fix-when { font:500 11.5px/1.3 var(--mono); color:var(--brass-hi); font-variant-numeric:tabular-nums; }

/* 3 · practice times — the Check card's line, with a panel for the time in hand */
.lra-tps > li.lra-tp { display:block; min-height:0; }
.lra-tp-hd { display:grid; grid-template-columns:48px 44px minmax(0, 1fr) auto; column-gap:12px; align-items:center; width:100%; min-height:62px; margin:0; padding:9px 0;
  border:0; background:transparent; color:inherit; font:inherit; text-align:left; text-transform:none; letter-spacing:normal; cursor:pointer; position:relative; z-index:1; }
.lra-tp-hd:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:14px; }
.lra-tp.open .lra-tp-hd .lal-win-tx b { color:var(--ink); }
@media (max-width:359px) { .lra-tp-hd { grid-template-columns:40px 40px minmax(0, 1fr); } .lra-tp-hd .lal-sw-end { grid-column:3; justify-self:start; } }
.lra-panel { position:relative; z-index:1; display:grid; gap:10px; margin:2px 0 12px; padding:14px; border-radius:18px;
  background:var(--panel-2); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 35%, transparent), 0 8px 24px rgba(0,0,0,.18); }
.lra-step { display:grid; grid-template-columns:28px minmax(0, 1fr); gap:10px; }
.lra-step-n { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font:600 12px/1 var(--body); color:var(--ink-2);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 25%, transparent); }
.lra-step.cur .lra-step-n { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:none; }
.lra-step.done .lra-step-n { color:var(--jade); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--jade) 60%, transparent); }
.lra-step-b { display:grid; gap:7px; min-width:0; }
.lra-step-b > b { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font:400 16px/1.25 var(--display); color:var(--ink); }
.lra-step-b > em { font:400 12.5px/1.45 var(--body); font-style:normal; color:var(--ink-2); text-wrap:pretty; }
.lra-step-b > em.ok { color:var(--jade); }
.lra-step-b > em.no { color:var(--sindoor); }
.lra-dose { font:500 11.5px/1 var(--mono); color:var(--brass-hi); font-variant-numeric:tabular-nums; }
.lra-howto { display:grid; gap:6px; margin:0; padding:0 0 0 18px; }
.lra-howto li { font:400 13px/1.45 var(--body); color:var(--ink); padding-left:2px; }
.lra-howto li::marker { color:var(--brass-hi); font-weight:600; }
.lra-alts { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.lra-alts > span { font:500 11.5px/1 var(--body); color:var(--dim); }
.lra-alt { min-height:30px; padding:0 11px; border:0; border-radius:999px; cursor:pointer; font:500 12px/1 var(--body); text-transform:none; letter-spacing:normal;
  color:var(--ink-2); background:color-mix(in srgb, var(--ink) 6%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.lra-alt:hover { color:var(--ink); }
.lra-start { justify-self:start; min-height:44px; padding:0 22px; border:0; border-radius:999px; cursor:pointer; font:600 14px/1 var(--body); text-transform:none; letter-spacing:normal;
  color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:0 6px 18px rgba(214,178,74,.25); }
.lra-start:focus-visible, .lra-alt:focus-visible, .lra-stop:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lra-run { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; padding:10px 12px; border-radius:14px;
  background:color-mix(in srgb, var(--brass-hi) 9%, transparent); }
.lra-clock { font:300 26px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; min-width:3.2ch; }
.lra-run > span:nth-child(2) { font:400 12.5px/1.35 var(--body); color:var(--ink-2); }
.lra-stop { min-height:32px; padding:0 14px; border:0; border-radius:999px; cursor:pointer; font:500 12px/1 var(--body); text-transform:none; letter-spacing:normal;
  color:var(--ink-2); background:color-mix(in srgb, var(--ink) 7%, transparent); }
.lra-safe { margin:0; font:400 11.5px/1.45 var(--body); color:var(--dim); }

/* 4 · the protocols */
.lra-techs { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.lra-techs li { display:grid; gap:5px; padding:11px 13px; border-radius:16px; background:color-mix(in srgb, var(--ink) 3.5%, transparent); }
.lra-tech-hd { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 10px; }
.lra-tech-hd b { font:400 16px/1.2 var(--display); color:var(--ink); }
.lra-tech-hd span { font:500 11.5px/1.2 var(--mono); color:var(--dim); }
.lra-techs p { margin:0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.lra-tech-rec { font:600 11.5px/1.3 var(--body); color:var(--jade); }
.lra-tech-rec.none { font-weight:500; color:var(--dim); }
.lra-fold { border-radius:14px; background:color-mix(in srgb, var(--ink) 3%, transparent); }
.lra-ev { display:grid; gap:8px; margin:0; padding:0 14px 14px 30px; }
.lra-ev li { font:400 12.5px/1.45 var(--body); color:var(--ink); }
.lra-ev li.app { color:var(--brass-hi); }
.lra-ev cite { font-style:normal; color:var(--dim); }

/* practice times: the node shows the side to open */
.lra-tp .lal-node { background:color-mix(in srgb, var(--tone) 12%, var(--panel-2)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 70%, transparent); }
.lra-tp .lal-node i { background:var(--tone); box-shadow:0 0 10px color-mix(in srgb, var(--tone) 55%, transparent); }
.lra-tp.missed .lal-node, .lra-tp.off .lal-node { opacity:.6; }
.lra-panel .lal-ans { margin-top:2px; }

.lra-prac-k { font:600 9.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--brass-hi); align-self:center; }
.lra-step.skip { opacity:.6; }
/* each time's three steps, in order, on its row (the user, 2026-09-28) — and the check before them */
.lra-tp-steps { display:flex; flex-wrap:wrap; gap:4px 6px; margin:3px 0 1px; }
.lra-tp-step { display:inline-flex; align-items:center; gap:5px; min-width:0; padding:2px 9px 2px 3px; border-radius:999px; font:500 11.5px/1.3 var(--body); color:var(--ink-2);
  background:color-mix(in srgb, var(--ink) 5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.lra-tp-step i { display:grid; place-items:center; flex:none; width:16px; height:16px; border-radius:50%; font:700 9.5px/1 var(--body); font-style:normal; color:#1B1406;
  background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
/* a narrow row runs the steps as one line of text that wraps, not a column of pills (a time has four steps when
   today's centre and the usual one differ — 2026-09-30); a word joiner keeps each number with its name */
@media (max-width:520px) {
  .lra-tp-steps { display:block; margin:4px 0 2px; }
  .lra-tp-step { display:inline; padding:0; background:none; box-shadow:none; font:500 11.5px/1.7 var(--body); }
  .lra-tp-step + .lra-tp-step::before { content:"\00B7\2002"; margin-left:6px; color:var(--dim); }
  .lra-tp-step i { display:inline; width:auto; height:auto; margin-right:4px; background:none; border-radius:0; color:var(--brass-hi); font:700 11px/1 var(--body); }
}
.lra-step.lra-check .lra-step-n svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lra-care > summary { font-size:12px; }
.lraT-why { margin:8px 0 2px; font:400 12px/1.5 var(--body); color:var(--ink-2); }
.lra-step.skip .lra-step-n { color:var(--jade); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--jade) 55%, transparent); }
.lra-go { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.lra-go > span { font:400 12px/1.4 var(--body); color:var(--dim); }
.lra-tp .lal-win-tx .lra-tp-prac { font:600 12px/1.3 var(--body); color:var(--brass-hi); }

.lra-k { display:block; font:600 9.5px/1.25 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lra-ind-tx .lra-k, .lra-sub .lra-k, .lra-sec .lra-k { color:color-mix(in srgb, var(--brass-hi) 70%, var(--dim)); }
/* Realignment: the practice times ring with Record's check alerts (one switch) */
.lra-alertnote { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; margin:0; padding:9px 12px; border-radius:14px;
  font:400 12px/1.4 var(--body); color:var(--dim); background:color-mix(in srgb, var(--ink) 3%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.lra-alertnote.on { color:var(--ink-2); background:color-mix(in srgb, var(--brass-hi) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 24%, transparent); }
.lra-bell { display:grid; place-items:center; width:26px; height:26px; border-radius:9px; color:var(--dim); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.lra-alertnote.on .lra-bell { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.lra-bell svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lra-alerton { min-height:32px; padding:0 12px; border:0; border-radius:999px; font:600 12px/1 var(--body); color:var(--ink); cursor:pointer;
  background:color-mix(in srgb, var(--brass-hi) 18%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 40%, transparent); }
.lra-alerton:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lra-notyet .lal-status-ico svg { stroke-width:1.7; }

/* ==== SWARA ALIGNMENT · THE STUDIO (the user, 2026-09-17) ============================
   What the user asked for:
     - Cards that only showed by scrolling down made a poor experience; a first-time reader
       should grasp it at once, on phone, tablet and desktop.
     - The sheet's ground, edge and header looked poor.
     - The three stages read as separate boxes.
     - The words ran long, and everything looked alike.
   What this block does:
     - In alignment mode the sheet is one lit studio. The ground is deep, with a light at
       the top in the stage's own colour: Record gold, Diagnosis sky, Realignment jade.
     - The sheet keeps one fine edge. Its header is the app's navigation: a three-way stage
       switch, and the views of that stage as tabs.
     - A view fits a screen or two. A wide screen sets its parts side by side.
     - Surfaces vary by role: a lit lead card, quiet tiles, lists on hairlines. */
@property --acc-r { syntax:'<number>'; inherits:true; initial-value:238; }
@property --acc-g { syntax:'<number>'; inherits:true; initial-value:201; }
@property --acc-b { syntax:'<number>'; inherits:true; initial-value:110; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) {
  --acc-r:238; --acc-g:201; --acc-b:110;
  --acc-rgb:var(--acc-r), var(--acc-g), var(--acc-b);
  --st-g1:#16151D; --st-g2:#0F0E14; --st-g3:#0A0A0E;
  --st-surface:rgba(255,255,255,.046); --st-surface-2:rgba(255,255,255,.02); --st-tile:rgba(255,255,255,.036); --st-tile-hi:rgba(255,255,255,.06);
  --st-line:rgba(255,255,255,.085); --st-line-soft:rgba(255,255,255,.05); --st-top:rgba(255,255,255,.06);
  --st-shadow:0 26px 52px -38px rgba(0,0,0,.95);
  transition:transform .44s var(--dr-ease), --acc-r .6s ease, --acc-g .6s ease, --acc-b .6s ease;
}
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]).dragging { transition:none; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])[data-stage="diagnosis"] { --acc-r:128; --acc-g:188; --acc-b:224; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])[data-stage="realign"] { --acc-r:100; --acc-g:204; --acc-b:164; }
:root[data-theme="light"].lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) {
  --acc-r:150; --acc-g:110; --acc-b:18;
  --st-g1:#FDFBF7; --st-g2:#F7F3EC; --st-g3:#F2EEE7;
  --st-surface:#FFFFFF; --st-surface-2:#FDFBF8; --st-tile:rgba(40,30,60,.035); --st-tile-hi:rgba(40,30,60,.06);
  --st-line:rgba(40,30,60,.11); --st-line-soft:rgba(40,30,60,.07); --st-top:rgba(255,255,255,.9);
  --st-shadow:0 18px 40px -30px rgba(60,40,80,.38);
}
:root[data-theme="light"].lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])[data-stage="diagnosis"] { --acc-r:30; --acc-g:108; --acc-b:150; }
:root[data-theme="light"].lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])[data-stage="realign"] { --acc-r:28; --acc-g:126; --acc-b:92; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]).lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) {
    --acc-r:150; --acc-g:110; --acc-b:18;
    --st-g1:#FDFBF7; --st-g2:#F7F3EC; --st-g3:#F2EEE7;
    --st-surface:#FFFFFF; --st-surface-2:#FDFBF8; --st-tile:rgba(40,30,60,.035); --st-tile-hi:rgba(40,30,60,.06);
    --st-line:rgba(40,30,60,.11); --st-line-soft:rgba(40,30,60,.07); --st-top:rgba(255,255,255,.9);
    --st-shadow:0 18px 40px -30px rgba(60,40,80,.38);
  }
  :root:not([data-theme="dark"]).lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])[data-stage="diagnosis"] { --acc-r:30; --acc-g:108; --acc-b:150; }
  :root:not([data-theme="dark"]).lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])[data-stage="realign"] { --acc-r:28; --acc-g:126; --acc-b:92; }
}

/* ---- the ground and the edge ---- */
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])::before {
  background:
    linear-gradient(90deg, transparent 6%, rgba(var(--acc-rgb), .75) 50%, transparent 94%) top / 100% 1px no-repeat,
    radial-gradient(1200px 440px at 50% -210px, rgba(var(--acc-rgb), .20), transparent 72%),
    radial-gradient(560px 420px at 0% -80px, rgba(var(--acc-rgb), .07), transparent 72%),
    radial-gradient(560px 420px at 100% -80px, rgba(143,134,214,.07), transparent 72%),
    linear-gradient(180deg, var(--st-g1) 0%, var(--st-g2) 420px, var(--st-g3) 100%);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:inset 0 0 0 1px var(--st-line-soft), 0 -40px 90px -40px rgba(0,0,0,.95);
}
:root[data-theme="light"].lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])::before { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .16), 0 -30px 70px -36px rgba(60,40,80,.35); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]).lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])::before { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .16), 0 -30px 70px -36px rgba(60,40,80,.35); }
}
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .litegrab i { background:linear-gradient(90deg, rgba(var(--acc-rgb), .35), rgb(var(--acc-rgb)) 50%, rgba(var(--acc-rgb), .35)); box-shadow:0 0 12px rgba(var(--acc-rgb), .45); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .liteclose { border-color:var(--st-line); background:var(--st-tile); color:var(--ink-2); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .liteclose:hover { color:#14110A; background:rgb(var(--acc-rgb)); border-color:rgb(var(--acc-rgb)); }

/* ---- the header: where you are, and where you can go ---- */
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .litedrawer-top,
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])[data-state="open"] .litedrawer-top { box-shadow:none; padding-bottom:0; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])[data-state="open"] .litedrawer-top::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--st-line) 16%, var(--st-line) 84%, transparent); }
.lst { position:relative; display:grid; gap:8px; width:100%; max-width:600px; margin:0 auto; padding:0 6px 2px; }
.lst-name { display:none; }
@media (min-width:760px) {
  .lst { max-width:680px; gap:10px; }
  .lst-name { position:absolute; top:-44px; left:6px; display:flex; align-items:center; height:44px; pointer-events:none;
    font:600 10px/1 var(--body); letter-spacing:.24em; text-transform:uppercase; color:rgba(var(--acc-rgb), .9); }
}
.lst-seg { position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); padding:4px; border-radius:17px;
  background:linear-gradient(180deg, var(--st-tile-hi), var(--st-tile)); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lst-thumb { position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 3); border-radius:13px;
  background:linear-gradient(180deg, rgba(var(--acc-rgb), .30), rgba(var(--acc-rgb), .12));
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .46), inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px -14px rgba(var(--acc-rgb), .85);
  transform:translateX(calc(var(--i, 0) * 100%)); transition:transform .45s cubic-bezier(.22,.9,.24,1); }
.lst-seg.lst-still .lst-thumb { transition:none; }
.lst-seg button { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; height:42px; padding:0 6px;
  border:0; border-radius:13px; background:none; cursor:pointer; color:var(--ink-2); font:500 14px/1 var(--body); letter-spacing:.005em; white-space:nowrap;
  transition:color .25s; -webkit-tap-highlight-color:transparent; }
.lst-seg button:hover { color:var(--ink); }
.lst-seg button[aria-selected="true"] { color:var(--ink); font-weight:600; }
.lst-seg button svg { flex:0 0 auto; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
.lst-seg button[aria-selected="true"] svg { opacity:1; stroke:rgb(var(--acc-rgb)); }
.lst-seg button:focus-visible, .lst-views button:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:-2px; }
.lst-sm { display:none; }
.lst-ok { flex:0 0 auto; width:7px; height:7px; margin-left:-2px; border-radius:50%; background:var(--jade); box-shadow:0 0 8px color-mix(in srgb, var(--jade) 70%, transparent); }
@media (max-width:430px) { .lst-lg { display:none; } .lst-sm { display:inline; } .lst-seg button { gap:6px; font-size:13.5px; } }
@media (max-width:330px) { .lst-seg button svg { display:none; } }
.lst-views { position:relative; display:flex; gap:2px; margin:0 -6px; padding:0 6px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.lst-views::-webkit-scrollbar { display:none; }
.lst-views button { position:relative; flex:0 0 auto; height:38px; padding:0 12px; border:0; border-radius:11px; background:none; cursor:pointer;
  color:var(--dim); font:500 13.5px/1 var(--body); white-space:nowrap; transition:color .2s, background .2s; -webkit-tap-highlight-color:transparent; }
.lst-views button:hover { color:var(--ink-2); background:var(--st-tile); }
.lst-views button[aria-selected="true"] { color:var(--ink); font-weight:600; }
.lst-views::after { content:""; position:absolute; left:0; bottom:1px; width:max(0px, calc(var(--uw, 0px) - 24px)); height:2px; border-radius:2px; pointer-events:none;
  transform:translateX(calc(var(--ux, 0px) + 12px)); background:rgb(var(--acc-rgb)); box-shadow:0 0 12px rgba(var(--acc-rgb), .7);
  transition:transform .38s cubic-bezier(.22,.9,.24,1), width .38s cubic-bezier(.22,.9,.24,1); }
.lst-views.lst-still::after { transition:none; }
@media (min-width:760px) { .lst-views { justify-content:center; } }
@media (prefers-reduced-motion: reduce) { .lst-thumb, .lst-views::after { transition:none; } }

/* ---- the views ---- */
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .litedrawer-body { padding:16px 14px calc(36px + env(safe-area-inset-bottom)); }
@media (min-width:760px) { .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .litedrawer-body { padding:24px 28px 56px; } }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) #lite-align { gap:14px; max-width:600px; padding:0; align-items:start; }
#lite-align > div:empty { display:none; }
#lite-align[data-stage="record"] > .lal-foot { display:none; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-foot { margin:10px 0 0; font:400 11.5px/1.5 var(--body); color:var(--dim); text-align:center; }
@media (min-width:760px) {
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) #lite-align { max-width:760px; gap:18px; }
}
@media (min-width:1000px) {
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) #lite-align { max-width:1100px; grid-template-columns:repeat(12, minmax(0, 1fr)); grid-auto-flow:row dense; }
  #lite-align > * { grid-column:1 / -1; min-width:0; }
  #lite-align[data-view="now"] > #lal-check { grid-column:1 / span 7; grid-row:1; }
  #lite-align[data-view="now"] > #lal-hero { grid-column:8 / -1; grid-row:1; }
  #lite-align[data-view="now"] > #lal-upnext { grid-column:1 / -1; grid-row:2; }
  /* Realignment’s stage pages: the stage strip and the stage’s own bar side by side, the practice times full width below (2026-09-24) */
  #lite-align[data-stage="realign"]:is([data-view="prepare"], [data-view="usual"], [data-view="today"]) > #lal-ra-step { grid-column:1 / span 7; align-self:stretch; display:flex; flex-direction:column; }
  #lite-align[data-stage="realign"]:is([data-view="prepare"], [data-view="usual"], [data-view="today"]) > #lal-ra-bar { grid-column:8 / -1; align-self:stretch; display:flex; flex-direction:column; }
  #lite-align[data-stage="realign"] > #lal-ra-step > .lal-card, #lite-align[data-stage="realign"] > #lal-ra-bar > .lal-card { flex:1 1 auto; }
}
/* a view's slot that holds several cards lays them out itself */
#lal-dxsum, #lal-dx { display:grid; gap:14px; align-items:start; min-width:0; }
@media (min-width:760px) { #lal-dxsum, #lal-dx { gap:18px; } }
@media (min-width:1000px) {
  #lal-dxsum { grid-template-columns:repeat(12, minmax(0, 1fr)); grid-auto-flow:row dense; }
  #lal-dxsum > * { grid-column:1 / -1; min-width:0; }
  /* the headline and what stands out side by side; When has the whole width, since it draws years
     (the user, 2026-09-24: the drawn When card beside the headline left a gap under it) */
  #lal-dxsum > .lst-dxhero { grid-column:1 / span 7; }
  #lal-dxsum > .lst-finds { grid-column:8 / -1; }
  #lal-dxsum > .lst-when { grid-column:1 / -1; }
  #lal-dxsum > .lst-named { grid-column:1 / -1; }
  /* Meaning is one column now: How sure moved to the head of the pages (2026-09-28) */
}

/* ---- surfaces: a quiet card, a lit lead, and bare tiles ---- */
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-card {
  gap:16px; padding:20px 18px; border-radius:24px;
  background:linear-gradient(180deg, var(--st-surface), var(--st-surface-2));
  box-shadow:inset 0 1px 0 var(--st-top), inset 0 0 0 1px var(--st-line-soft), var(--st-shadow); }
@media (min-width:760px) { .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-card { padding:24px; border-radius:26px; } }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) #lal-check > .lal-card,
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lst-dxhero,
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lraN-hero,
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-sumcard {
  background:radial-gradient(130% 120% at 0% 0%, rgba(var(--acc-rgb), .17), transparent 58%), linear-gradient(180deg, var(--st-surface), var(--st-surface-2));
  box-shadow:inset 0 1px 0 rgba(var(--acc-rgb), .32), inset 0 0 0 1px rgba(var(--acc-rgb), .15), 0 34px 60px -44px rgba(var(--acc-rgb), .45), var(--st-shadow); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-eyebrow { font:600 10px/1.2 var(--body); letter-spacing:.2em; color:rgba(var(--acc-rgb), .95); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-title { font:500 19px/1.2 var(--display); letter-spacing:-.012em; }
@media (min-width:760px) { .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-title { font-size:21px; } }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-lede { margin:-6px 0 0; font:400 13px/1.45 var(--body); color:var(--ink-2); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-aside { background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); color:var(--ink-2); }

/* a row's heading with a link on the right */
.lst-rowhd { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:22px; }
.lst-link { display:inline-flex; align-items:center; gap:3px; margin:-8px -6px -8px 0; padding:8px 6px 8px 10px; border:0; border-radius:10px; background:none; cursor:pointer;
  font:600 12.5px/1 var(--body); color:rgb(var(--acc-rgb)); white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.lst-link svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.lst-link:hover { background:rgba(var(--acc-rgb), .09); }
.lst-link:focus-visible, .lst-go:focus-visible, .lst-find:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }

/* a note folded under a small (i) */
.lst-info { padding-top:12px; border-top:1px solid var(--st-line-soft); }
.lst-info > summary { display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none; font:600 12px/1 var(--body); color:var(--dim); }
.lst-info > summary::-webkit-details-marker { display:none; }
.lst-info > summary::before { content:"i"; display:grid; place-items:center; width:17px; height:17px; border-radius:50%;
  font:italic 700 10px/1 Georgia, 'Times New Roman', serif; color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--st-line); }
.lst-info > summary:hover, .lst-info[open] > summary { color:var(--ink-2); }
.lst-info p, .lst-info .ldx-mirror { margin:10px 0 0; max-width:70ch; font:400 12.5px/1.55 var(--body); color:var(--ink-2); text-align:left; }
/* the Body map's point shapes, counted, now live in its About this map (the user, 2026-09-30: the page was cluttered) */
.lst-info .ldx-shapes { justify-content:flex-start; margin:12px 0 0; }

/* ---- Record · Now ---- */
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) #lal-hero > .lal-card { gap:10px; padding:0; border-radius:0; background:none; box-shadow:none; }
.lst-days { display:grid; gap:10px; padding:16px 18px; border-radius:20px; background:linear-gradient(180deg, var(--st-surface), var(--st-surface-2));
  box-shadow:inset 0 1px 0 var(--st-top), inset 0 0 0 1px var(--st-line-soft); }
.lst-days-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.lst-days-top b { font:300 26px/1 var(--display); letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lst-days-top b small { font:500 12.5px/1 var(--body); letter-spacing:0; color:var(--dim); }
.lst-days em { font:500 12px/1.3 var(--body); font-style:normal; color:var(--ink-2); }
.lst-days.done em { color:var(--jade); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-hero .lal-rings { gap:10px; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-hero .lal-ring { gap:8px; padding:14px 6px 13px; border-radius:20px;
  background:linear-gradient(180deg, var(--st-surface), var(--st-surface-2)); box-shadow:inset 0 1px 0 var(--st-top), inset 0 0 0 1px var(--st-line-soft); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-hero .lal-ring-dial { width:clamp(64px, 19vw, 84px); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-hero .lal-ring > span { font-size:11.5px; color:var(--dim); }
@media (min-width:1000px) { #lite-align[data-view="now"] > #lal-hero .lal-ring-dial { width:76px; } }
.lst-upnext { gap:12px; }
.lst-strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(108px, 1fr); gap:8px; margin:0 -18px; padding:2px 18px 4px; list-style:none;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 18px; scrollbar-width:none; }
.lst-strip::-webkit-scrollbar { display:none; }
.lst-turn { display:grid; gap:7px; padding:12px 12px 11px; border-radius:16px; scroll-snap-align:start; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lst-turn time { font:500 15px/1 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.lst-turn b { display:flex; align-items:center; gap:7px; font:600 13px/1 var(--body); color:var(--ink-2); }
.lst-turn b i { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--tone); box-shadow:0 0 8px var(--tone); }
.lst-turn span { font:500 11.5px/1.2 var(--body); color:var(--dim); }
.lst-turn.pause b, .lst-turn.pause time { color:var(--dim); }
.lst-turn.now { background:linear-gradient(180deg, rgba(var(--acc-rgb), .17), rgba(var(--acc-rgb), .06)); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .38); }
.lst-turn.now span { color:rgb(var(--acc-rgb)); font-weight:600; }
.lst-turn.done span { color:var(--jade); font-weight:600; }
@media (min-width:760px) { .lst-strip { margin:0; padding:2px 0 4px; grid-auto-columns:minmax(118px, 1fr); } }

/* ---- Record · Check times, and Realignment · Practice times: the list beside its heading on a wide screen ---- */
@media (min-width:1000px) {
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) #lal-times > .lal-times { grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); column-gap:36px; align-content:start; }
  #lal-times > .lal-times > * { grid-column:1; }
  #lal-times > .lal-times > .lal-line { grid-column:2; grid-row:1 / span 8; }
}

/* ---- Diagnosis · Summary ---- */
.lst-dxhero { gap:14px; }
.lst-headline { margin:0; font:300 clamp(24px, 6.2vw, 34px)/1.12 var(--display); letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.lst-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.lst-status { display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 9px; border-radius:999px; font:600 12px/1 var(--body); color:var(--ink);
  background:var(--st-tile-hi); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lst-status i { width:7px; height:7px; border-radius:50%; background:var(--brass-hi); box-shadow:0 0 8px var(--brass-hi); }
.lst-status.firm i { background:var(--jade); box-shadow:0 0 8px var(--jade); }
.lst-status.early i { background:var(--dim); box-shadow:none; }
.lst-over { font:500 12.5px/1.3 var(--body); color:var(--dim); }
.lst-ticks { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.lst-ticks li { display:grid; gap:4px; padding:11px 12px; border-radius:15px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); min-width:0; }
.lst-ticks b { font:300 22px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.lst-ticks span { font:500 11.5px/1.2 var(--body); color:var(--dim); }
.lst-ticks li.ok { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 34%, transparent); }
.lst-ticks li.miss b { color:var(--dim); }
.lst-findgrid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.lst-find { display:grid; align-content:start; justify-items:start; gap:8px; min-width:0; min-height:118px; padding:14px; border:0; border-radius:18px; cursor:pointer; text-align:left;
  color:var(--ink); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); transition:background .2s, box-shadow .2s, transform .15s; -webkit-tap-highlight-color:transparent; }
.lst-find:hover { background:var(--st-tile-hi); }
.lst-find:active { transform:scale(.98); }
.lst-find.v-both { background:linear-gradient(180deg, rgba(var(--acc-rgb), .13), rgba(var(--acc-rgb), .03)); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .36); }
.lst-find-ic svg { width:22px; height:22px; fill:none; stroke:rgb(var(--acc-rgb)); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lst-find b { font:500 14.5px/1.25 var(--body); text-wrap:balance; }
.lst-find .ldx-pill { margin-top:auto; }
.lst-named { gap:12px; }
.lst-explore { display:grid; gap:10px; }
@media (min-width:760px) { .lst-explore { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.lst-go { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; min-width:0; padding:14px 14px 14px 12px; border:0; border-radius:20px; cursor:pointer; text-align:left;
  color:var(--ink); background:linear-gradient(180deg, var(--st-surface), var(--st-surface-2)); box-shadow:inset 0 1px 0 var(--st-top), inset 0 0 0 1px var(--st-line-soft);
  transition:box-shadow .2s, transform .15s; -webkit-tap-highlight-color:transparent; }
.lst-go:hover { box-shadow:inset 0 1px 0 var(--st-top), inset 0 0 0 1px rgba(var(--acc-rgb), .35); }
.lst-go:active { transform:scale(.985); }
.lst-go-ic { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:rgba(var(--acc-rgb), .12); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .26); }
.lst-go-ic svg { width:22px; height:22px; fill:none; stroke:rgb(var(--acc-rgb)); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lst-go-tx { display:grid; gap:3px; min-width:0; }
.lst-go-tx b { font:600 14px/1.2 var(--body); }
.lst-go-tx em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--dim); }
.lst-go > svg { width:16px; height:16px; fill:none; stroke:var(--dim); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---- the two body maps: the figure beside its reading on a wide screen ---- */
@media (min-width:1000px) {
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-bodycard,
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-bodycard { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:36px; align-content:start; }
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-bodycard > *,
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-bodycard > * { grid-column:2; }
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-bodycard > .ldx-figwrap,
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-bodycard > .ldx-figwrap { grid-column:1; grid-row:1 / span 20; align-self:start; position:sticky; top:0; }
  /* the map still waiting for its five days has no figure: its words take the whole card, not the right half */
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-bodycard.is-empty { grid-template-columns:minmax(0, 1fr); }
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-bodycard.is-empty > * { grid-column:1; }
}

/* ---- Realignment · Today ---- */
.lra-sumcard { gap:14px; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-sumcard .lra-ind { padding:0; background:none; box-shadow:none; }
.lra-nextline { display:flex; align-items:center; gap:10px; margin:0; padding:12px 14px; border-radius:15px; font:600 13.5px/1.35 var(--body); color:var(--ink);
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lra-nextline i { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:rgb(var(--acc-rgb)); box-shadow:0 0 10px rgb(var(--acc-rgb)); }
.lra-nextline.now { background:rgba(var(--acc-rgb), .12); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .38); }
.lra-nextline.now i { animation:lst-pulse 1.6s ease-in-out infinite; }
.lra-nextline.wait { font-weight:500; color:var(--ink-2); }
.lra-nextline.wait i { background:var(--dim); box-shadow:none; }
@keyframes lst-pulse { 50% { transform:scale(1.55); opacity:.55; } }
@media (prefers-reduced-motion: reduce) { .lra-nextline.now i { animation:none; } }
@media (min-width:1000px) {
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-timescard > .lal-hd,
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-timescard > .lal-lede { grid-column:1 / -1; }
}

/* ---- Realignment · Progress ---- */
.lra-big { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:0; }
.lra-big b { font:300 46px/1 var(--display); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.lra-big span { font:500 13px/1.35 var(--body); color:var(--ink-2); }
.lra-trend { margin:6px 0 0; font:500 12px/1.3 var(--mono); color:var(--dim); }

/* ---- Realignment · Practices: a row to swipe on a phone, a grid on a wider screen ---- */
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-techcard .lra-techs { display:grid; grid-auto-flow:column; grid-auto-columns:84%; gap:10px; margin:0 -18px; padding:2px 18px 6px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 18px; scrollbar-width:none; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-techcard .lra-techs::-webkit-scrollbar { display:none; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-techcard .lra-techs > li { scroll-snap-align:start; min-width:0; }
@media (min-width:600px) {
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-techcard .lra-techs { grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-columns:auto; margin:0; padding:0; overflow:visible; }
}
@media (min-width:1000px) { .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-techcard .lra-techs { grid-template-columns:repeat(3, minmax(0, 1fr)); } }

/* ---- a view comes in from the side it was pulled from, a short way ---- */
@keyframes lst-in-next { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } }
@keyframes lst-in-prev { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:none; } }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) #lite-align.lal-in-next { animation:lst-in-next .34s cubic-bezier(.22,.9,.24,1); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) #lite-align.lal-in-prev { animation:lst-in-prev .34s cubic-bezier(.22,.9,.24,1); }
@media (prefers-reduced-motion: reduce) {
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) #lite-align.lal-in-next,
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) #lite-align.lal-in-prev { animation:none; }
}

/* ---- the studio, finished by eye (2026-09-17) ---- */
/* the switches inside a card take the stage's colour, quieter than the header's */
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-seg,
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-toggle { background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-seg button,
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-toggle button { color:var(--ink-2); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-seg button:hover,
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-toggle button:hover { color:var(--ink); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-seg button[aria-selected="true"],
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-toggle button[aria-selected="true"] {
  color:var(--ink); font-weight:600; background:linear-gradient(180deg, rgba(var(--acc-rgb), .30), rgba(var(--acc-rgb), .12));
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .46), 0 8px 20px -14px rgba(var(--acc-rgb), .8); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-seg button:focus-visible,
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-toggle button:focus-visible { outline-color:rgb(var(--acc-rgb)); }

/* the check card: its switch rides the eyebrow's line, so the question keeps one line */
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-check > .lal-hd { position:relative; display:block; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-check > .lal-hd > .lal-toggle { position:absolute; top:-8px; right:-2px; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-check .lal-toggle { padding:2px; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-check .lal-toggle button { min-height:24px; padding:0 10px; font-size:12px; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-check > .lal-hd > div { gap:9px; }
@media (max-width:340px) { .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-check > .lal-hd > .lal-toggle { position:static; margin-top:10px; } }
@media (min-width:760px) { .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-check .lal-title { font-size:24px; } }

/* small labels are quiet; the stage's colour is kept for eyebrows and what can be tapped */
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-k,
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-sec-k { color:var(--dim); }

/* Summary: the named complaints start at the left, the findings fill the row on a wide screen */
.lst-named .ldx-namelist { justify-content:flex-start; }
@media (min-width:1000px) { .lst-findgrid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); } }

/* the body maps: the reading beside the figure reads from the left */
@media (min-width:1000px) {
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-bodycard .ldx-legend,
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-bodycard .ldx-shapes,
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-bodycard .ldx-chiprow,
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-bodycard .ldx-namelist,
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-bodycard .ldx-legend { justify-content:flex-start; }
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-bodycard .ldx-head,
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-bodycard .ldx-names,
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lra-bodycard .lra-lede { text-align:left; justify-items:start; }
}

/* Meaning: body, mind or spirit, one at a time */
.ldx-levelseg .lal-seg { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-levels3 > .ldx-level:not(.on) { display:none; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-levels3 { grid-template-columns:minmax(0, 1fr); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-levels3 .ldx-mrows { grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items:stretch; grid-auto-flow:row dense; }
/* the cards of a row share their edges, the three witnesses along each foot (the user, 2026-09-30: a card started
   well below the one above it — every card had kept its own height). An opened card takes the whole row, its
   sections in two columns where there is room, so its neighbours are not stretched to its height. */
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-levels3 .ldx-mrow { display:flex; flex-direction:column; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-levels3 .ldx-mrow-hd { display:flex; flex-direction:column; flex:1 1 auto; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-levels3 .ldx-mrow-hd > .ldx-ws { margin-top:auto; padding-top:2px; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-levels3 .ldx-mrow.open { grid-column:1 / -1; }
@media (min-width:760px) {
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-levels3 .ldx-mrow.open .ldx-mrow-bd { display:block; columns:2 300px; column-gap:28px; }
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-levels3 .ldx-mrow.open .ldx-mrow-bd > .ldx-sec { break-inside:avoid; margin:0 0 14px; }
  .lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-levels3 .ldx-mrow.open .ldx-mrow-bd > .ldx-sec:last-child { margin-bottom:0; }
}
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .ldx-level-hd { display:none; }

/* Today: the next practice is a way into it */
.lra-nextline { width:100%; border:0; cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent; }
.lra-nextline span { flex:1 1 auto; min-width:0; }
.lra-nextline svg { flex:0 0 auto; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.55; }
.lra-nextline:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }

/* ==== PREDICTIONS (the user, 2026-09-17) ==========================================
   "Check progress" renamed Predictions: Jyotish · Kaarya · Ghatana · Sankalpa, in the
   alignment's studio — the same ground, header, surfaces and motion (the studio rules above
   now read both modes), a colour for each tab: Jyotish lapis, Kaarya saffron, Ghatana rose,
   Sankalpa aqua. */
#lpr-head, #lite-predict { display:none; }
.lite-has-chart .litedrawer[data-mode="predict"][data-state="open"] #lpr-head { display:block; }
.lite-has-chart .litedrawer[data-mode="predict"] #lite-predict { display:grid; }
.lite-has-chart .litedrawer[data-mode="predict"] .navbar,
.lite-has-chart .litedrawer[data-mode="predict"] #lal-head,
.lite-has-chart .litedrawer[data-mode="predict"] #lite-align,
.lite-has-chart .litedrawer[data-mode="predict"] .litedrawer-body > .colophon,
.lite-has-chart .litedrawer[data-mode="predict"] #sec-swara,
.lite-has-chart .litedrawer[data-mode="predict"] #sec-tantra,
.lite-has-chart .litedrawer[data-mode="predict"] #sec-chakra,
.lite-has-chart .litedrawer[data-mode="predict"] #sec-swasthya { display:none !important; }
.lite-has-chart .litedrawer[data-mode="align"] #lpr-head,
.lite-has-chart .litedrawer[data-mode="align"] #lite-predict { display:none !important; }
#lite-predict:has(> #lpr-view:empty) { display:none !important; }

.lite-has-chart .litedrawer[data-mode="predict"][data-tab] { --acc-r:150; --acc-g:162; --acc-b:246; }
.lite-has-chart .litedrawer[data-mode="predict"][data-tab="kaarya"] { --acc-r:244; --acc-g:170; --acc-b:88; }
.lite-has-chart .litedrawer[data-mode="predict"][data-tab="ghatana"] { --acc-r:238; --acc-g:136; --acc-b:162; }
.lite-has-chart .litedrawer[data-mode="predict"][data-tab="sankalpa"] { --acc-r:88; --acc-g:204; --acc-b:210; }
:root[data-theme="light"].lite-has-chart .litedrawer[data-mode="predict"][data-tab] { --acc-r:70; --acc-g:84; --acc-b:180; }
:root[data-theme="light"].lite-has-chart .litedrawer[data-mode="predict"][data-tab="kaarya"] { --acc-r:170; --acc-g:98; --acc-b:18; }
:root[data-theme="light"].lite-has-chart .litedrawer[data-mode="predict"][data-tab="ghatana"] { --acc-r:170; --acc-g:62; --acc-b:98; }
:root[data-theme="light"].lite-has-chart .litedrawer[data-mode="predict"][data-tab="sankalpa"] { --acc-r:18; --acc-g:124; --acc-b:132; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]).lite-has-chart .litedrawer[data-mode="predict"][data-tab] { --acc-r:70; --acc-g:84; --acc-b:180; }
  :root:not([data-theme="dark"]).lite-has-chart .litedrawer[data-mode="predict"][data-tab="kaarya"] { --acc-r:170; --acc-g:98; --acc-b:18; }
  :root:not([data-theme="dark"]).lite-has-chart .litedrawer[data-mode="predict"][data-tab="ghatana"] { --acc-r:170; --acc-g:62; --acc-b:98; }
  :root:not([data-theme="dark"]).lite-has-chart .litedrawer[data-mode="predict"][data-tab="sankalpa"] { --acc-r:18; --acc-g:124; --acc-b:132; }
}

/* the four-way switch */
.lst-seg.four { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.lst-seg.four .lst-thumb { width:calc((100% - 8px) / 4); }
@media (max-width:460px) { .lst-seg.four button svg { display:none; } .lst-seg.four button { font-size:13px; padding:0 4px; } }

/* the view and its grid */
.lite-has-chart .litedrawer[data-mode="predict"] #lite-predict { gap:14px; width:100%; max-width:600px; margin:0 auto; padding:0; align-items:start; }
#lpr-view { display:grid; gap:14px; min-width:0; }
.lpr-grid { display:grid; gap:14px; align-items:start; min-width:0; }
@media (min-width:760px) {
  .lite-has-chart .litedrawer[data-mode="predict"] #lite-predict { max-width:760px; }
  .lpr-grid { gap:18px; }
}
@media (min-width:1000px) {
  .lite-has-chart .litedrawer[data-mode="predict"] #lite-predict { max-width:1100px; }
  .lpr-grid { grid-template-columns:repeat(12, minmax(0, 1fr)); grid-auto-flow:row dense; }
  .lpr-grid > * { grid-column:1 / -1; min-width:0; }
  .lpr-grid.ov > .lpr-lead { grid-column:1 / span 7; }
  .lpr-grid.ov > .lpr-period { grid-column:8 / -1; }
  .lpr-grid.ov > .lpr-sky { grid-column:1 / span 7; }
  .lpr-grid.ov > .lpr-sw { grid-column:8 / -1; }
  .lpr-grid.chart > .lpr-chartcard { grid-column:1 / span 6; position:sticky; top:0; }
  .lpr-grid.chart > .lpr-planets { grid-column:7 / -1; }
  .lpr-grid.periods > .lpr-lifecard { grid-column:1 / -1; }
  .lpr-grid.strength > .lpr-yogas { grid-column:1 / span 7; }
  .lpr-grid.strength > .lpr-doshas { grid-column:8 / -1; }
}
/* Pro's pages shown in a Predictions view: the studio's surfaces, their own nav left out */
.lite-has-chart .litedrawer[data-mode="predict"] .litedrawer-body > .navsec.on { width:100%; max-width:1100px; margin:0 auto; }
.lite-has-chart .litedrawer[data-mode="predict"] #kaaryabox > .swnav,
.lite-has-chart .litedrawer[data-mode="predict"] #ghatanabox > .swnav,
.lite-has-chart .litedrawer[data-mode="predict"] #sankalpabox .swnav,
.lite-has-chart .litedrawer[data-mode="predict"] #sec-jyotish > .swnav,
.lite-has-chart .litedrawer[data-mode="predict"] #sec-jyotish > #jyohead,
.lite-has-chart .litedrawer[data-mode="predict"] #kaaryabox > .swarahead,
.lite-has-chart .litedrawer[data-mode="predict"] #ghatanabox > .swarahead,
.lite-has-chart .litedrawer[data-mode="predict"] #kaaryabox > .swsec,
.lite-has-chart .litedrawer[data-mode="predict"] #ghatanabox > .swsec,
.lite-has-chart .litedrawer[data-mode="predict"] #sankalpabox .swsec { display:none; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .railcard {
  border:0; border-radius:24px; background:linear-gradient(180deg, var(--st-surface), var(--st-surface-2));
  box-shadow:inset 0 1px 0 var(--st-top), inset 0 0 0 1px var(--st-line-soft), var(--st-shadow); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .railcard h3 { color:var(--ink); }

/* ---- Jyotish · Overview ---- */
.lpr-lead { gap:14px; }
.lite-has-chart .litedrawer[data-mode="predict"] .lpr-lead {
  background:radial-gradient(130% 120% at 0% 0%, rgba(var(--acc-rgb), .17), transparent 58%), linear-gradient(180deg, var(--st-surface), var(--st-surface-2));
  box-shadow:inset 0 1px 0 rgba(var(--acc-rgb), .32), inset 0 0 0 1px rgba(var(--acc-rgb), .15), 0 34px 60px -44px rgba(var(--acc-rgb), .45), var(--st-shadow); }
.lpr-pillars { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.lpr-pillar { display:grid; align-content:start; gap:4px; min-width:0; padding:12px; border-radius:16px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lpr-k { font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lpr-pillar b { font:500 16px/1.2 var(--display); color:var(--ink); }
.lpr-pillar b .deva { display:block; margin-top:2px; font:400 12.5px/1.2 var(--deva); color:var(--dim); }
.lpr-pillar em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
@media (max-width:420px) { .lpr-pillar { padding:10px; } .lpr-pillar b { font-size:15px; } .lpr-k { letter-spacing:.08em; font-size:9.5px; } }
@media (max-width:330px) { .lpr-pillars { grid-template-columns:minmax(0, 1fr); } }
.lpr-prow { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px; align-items:center; }
.lpr-prow + .lpr-prow { padding-top:12px; border-top:1px solid var(--st-line-soft); }
.lpr-prow > div { display:grid; gap:5px; min-width:0; }
.lpr-prow b { font:600 14px/1.2 var(--body); color:var(--ink); }
.lpr-prow.big b { font:500 19px/1.2 var(--display); }
.lpr-prow em { font:500 12px/1.2 var(--mono); font-style:normal; color:var(--dim); }
.lpr-badge { display:grid; place-items:center; width:40px; height:40px; border-radius:14px; font:600 17px/1 var(--body); color:var(--g);
  background:color-mix(in srgb, var(--g) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--g) 40%, transparent); }
.lpr-prow:not(.big) .lpr-badge, .lpr-badge.sm { width:32px; height:32px; border-radius:11px; font-size:14px; }
.lpr-bar { display:block; height:4px; border-radius:3px; overflow:hidden; background:var(--st-tile-hi); }
.lpr-bar i { display:block; height:100%; border-radius:3px; background:var(--g); }
.lpr-note { margin:0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.lpr-skylist { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.lpr-skylist li { display:grid; grid-template-columns:auto 58px minmax(0, 1fr); align-items:baseline; gap:4px 10px; padding:11px 0; border-top:1px solid var(--st-line-soft); }
.lpr-skylist li:first-child { border-top:0; padding-top:2px; }
.lpr-skylist li > i { width:8px; height:8px; border-radius:50%; background:var(--dim); align-self:center; }
.lpr-skylist li.good > i { background:var(--jade); box-shadow:0 0 8px var(--jade); }
.lpr-skylist li.bad > i { background:var(--sindoor); box-shadow:0 0 8px var(--sindoor); }
.lpr-skylist li.soft > i { background:var(--brass-hi); }
.lpr-sky-k { font:600 10px/1.4 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lpr-skylist b { font:600 14px/1.3 var(--body); color:var(--ink); }
.lpr-skylist em { grid-column:3; font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.lpr-swgrid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.lpr-swtile { display:grid; gap:6px; min-width:0; padding:14px; border-radius:18px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lpr-swtile b { display:flex; align-items:center; gap:8px; font:500 17px/1.2 var(--display); color:var(--ink); }
.lpr-swtile em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.lpr-dot { flex:0 0 auto; display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:50%; background:var(--g); box-shadow:0 0 8px var(--g); vertical-align:1px; }
.lpr-swtile b .lpr-dot { margin-right:0; }

/* ---- Jyotish · Chart ---- */
.lpr-chartcard { gap:14px; }
.lite-has-chart .litedrawer[data-mode="predict"] .lpr-chartseg { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.lite-has-chart .litedrawer[data-mode="predict"] .lpr-chartseg button { font-size:12px; min-height:34px; padding:0 4px; }
.lpr-kundali { margin:0; display:grid; place-items:center; }
.lpr-kundali svg { width:100%; max-width:420px; height:auto; }
.lpr-plist { display:grid; margin:0; padding:0; list-style:none; }
.lpr-plist li { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; grid-template-areas:"badge pl flags" "badge cond cond"; align-items:center; gap:2px 12px; padding:10px 0; border-top:1px solid var(--st-line-soft); }
.lpr-plist li:first-child { border-top:0; padding-top:2px; }
.lpr-plist .lpr-badge { grid-area:badge; }
.lpr-pl { grid-area:pl; display:grid; gap:2px; min-width:0; }
.lpr-pl b { font:600 14px/1.2 var(--body); color:var(--ink); }
.lpr-pl em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.lpr-flags { grid-area:flags; display:flex; gap:4px; }
.lpr-flags i, .lpr-legend i { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:6px; font:700 10px/1 var(--mono); font-style:normal; color:var(--ink); background:var(--st-tile-hi); }
.lpr-cond { grid-area:cond; font:600 11.5px/1.2 var(--body); }
.lpr-legend { display:flex; align-items:center; gap:6px; font:500 11.5px/1 var(--body); color:var(--dim); }

/* ---- Jyotish · Periods ---- */
.lpr-life { position:relative; display:flex; height:46px; border-radius:14px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lpr-seg { position:relative; display:grid; place-items:center; min-width:0; height:100%; padding:0; border:0; cursor:pointer;
  background:color-mix(in srgb, var(--g) 26%, transparent); box-shadow:inset -1px 0 0 rgba(0,0,0,.35); color:var(--ink); font:600 12px/1 var(--body); overflow:hidden; }
.lpr-seg span { opacity:.85; }
.lpr-seg.now { background:color-mix(in srgb, var(--g) 46%, transparent); }
.lpr-seg.sel { box-shadow:inset 0 0 0 2px rgb(var(--acc-rgb)); }
.lpr-seg:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:-3px; }
.lpr-now { position:absolute; top:-2px; bottom:-2px; width:2px; margin-left:-1px; background:var(--ink); box-shadow:0 0 8px var(--ink); pointer-events:none; }
.lpr-birth { position:absolute; top:0; bottom:0; width:0; border-left:1px dashed var(--ink-2); pointer-events:none; }
.lpr-lifeaxis { display:flex; justify-content:space-between; margin-top:6px; font:500 11.5px/1 var(--mono); color:var(--dim); }
.lpr-adlist { display:grid; margin:0; padding:0; list-style:none; }
.lpr-adlist li { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:baseline; gap:4px 10px; padding:10px 0; border-top:1px solid var(--st-line-soft); }
.lpr-adlist li:first-child { border-top:0; }
.lpr-adlist li b { font:600 14px/1.2 var(--body); color:var(--ink); }
.lpr-adlist li span { font:500 12px/1.2 var(--mono); color:var(--dim); text-align:right; }
.lpr-adlist li em { grid-column:2 / -1; font:600 11.5px/1.2 var(--body); font-style:normal; color:rgb(var(--acc-rgb)); }
.lpr-adlist li.past b, .lpr-adlist li.past span { color:var(--dim); }
.lpr-adlist li.now { margin:0 -10px; padding:10px; border-radius:14px; border-top-color:transparent; background:rgba(var(--acc-rgb), .1); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .3); }
.lpr-adlist li.now + li { border-top-color:transparent; }
.lpr-adcard .lal-title .lpr-dot { vertical-align:3px; }

/* ---- Jyotish · Strength ---- */
.lpr-ylist { display:grid; margin:0; padding:0; list-style:none; }
.lpr-ylist li { display:grid; gap:3px; padding:10px 0 10px 14px; border-top:1px solid var(--st-line-soft); position:relative; }
.lpr-ylist li:first-child { border-top:0; padding-top:2px; }
.lpr-ylist li::before { content:""; position:absolute; left:0; top:15px; width:6px; height:6px; border-radius:50%; background:var(--brass-hi); }
.lpr-ylist li:first-child::before { top:7px; }
.lpr-ylist li.k-benefic::before, .lpr-ylist li.k-mahapurusha::before, .lpr-ylist li.k-clear::before { background:var(--jade); }
.lpr-ylist li.k-malefic::before { background:var(--sindoor); }
.lpr-ylist b { font:600 14px/1.25 var(--body); color:var(--ink); }
.lpr-ylist em { font:400 12px/1.4 var(--body); font-style:normal; color:var(--ink-2); }
.lpr-more { justify-self:start; min-height:32px; padding:0 12px; border:0; border-radius:999px; cursor:pointer; font:600 12px/1 var(--body); color:var(--ink); background:var(--st-tile-hi); }
/* ==== YOGAS AND DOSHAS, THE REGISTER (2026-10-24: the Jyotish page's Strength, every combination the texts name) ==== */
.lpr-yd { display:grid; gap:12px; }
.lyd-seg.lal-seg { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.lyd-seg button span { margin-left:3px; font-variant-numeric:tabular-nums; opacity:.7; }
.lyd-chips { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 -2px; padding:2px; -webkit-mask:linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask:linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
.lyd-chips::-webkit-scrollbar { display:none; }
.lyd-chips button { flex:none; min-height:32px; padding:0 12px; border:0; border-radius:999px; cursor:pointer; white-space:nowrap; font:500 12px/1 var(--body); color:var(--ink-2);
  background:color-mix(in srgb, var(--ink) 4.5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.lyd-chips button span { margin-left:2px; font-variant-numeric:tabular-nums; color:var(--dim); }
.lyd-chips button[aria-pressed="true"] { color:var(--ink); background:color-mix(in srgb, var(--brass-hi) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 55%, transparent); }
.lyd-chips button:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lyd-list li.lyd-row { padding:0; }
.lyd-list li.lyd-row::before { top:16px; }
.lyd-list li.lyd-row:first-child::before { top:9px; }
.lyd-list li.k-cancelled::before { background:var(--dim); }
.lyd-hd { display:grid; gap:4px; width:100%; padding:10px 0 10px 14px; border:0; background:none; text-align:left; cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent; }
.lyd-list li:first-child .lyd-hd { padding-top:2px; }
.lyd-hd:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:10px; }
.lyd-nm { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.lyd-nm b { font:600 14px/1.25 var(--body); color:var(--ink); }
.lyd-nm i { font:400 12.5px/1.2 'Tiro Devanagari Hindi', var(--body); font-style:normal; color:var(--dim); }
.lyd-tags { display:flex; flex-wrap:wrap; gap:4px; }
.lyd-t { padding:3px 8px; border-radius:999px; font:600 10px/1.2 var(--body); font-style:normal; letter-spacing:.02em; color:var(--ink-2);
  background:color-mix(in srgb, var(--ink) 5%, transparent); }
.lyd-t.now { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.lyd-t.s-strong { color:var(--jade); background:color-mix(in srgb, var(--jade) 13%, transparent); }
.lyd-t.s-weak { color:var(--dim); }
.lyd-t.st { color:var(--ink-2); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); background:none; }
.lyd-why { font:400 12.5px/1.45 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lyd-det { display:grid; gap:8px; margin:0 0 12px 14px; padding:12px 14px; border-radius:14px; background:color-mix(in srgb, var(--ink) 4%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.lyd-det p { margin:0; font:400 12.5px/1.5 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lyd-det .lyd-eff { font:500 13.5px/1.45 var(--body); color:var(--ink); }
.lyd-det span { display:block; margin-bottom:2px; font:600 9.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lyd-det .lyd-cx { color:var(--ink); }
.lyd-per ul { margin:0; padding:0; list-style:none; display:grid; gap:3px; }
.lyd-per li { font:400 12.5px/1.4 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lyd-per li.now { color:var(--ink); font-weight:600; }
.lyd-det .lyd-cite { font-size:11.5px; color:var(--dim); }
/* END YOGAS AND DOSHAS */
.lpr-savlist { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:4px; margin:0; padding:0; list-style:none; }
.lpr-savlist li { display:grid; justify-items:center; gap:4px; min-width:0; }
.lpr-savbar { position:relative; display:block; width:100%; max-width:22px; height:90px; border-radius:6px; background:var(--st-tile); overflow:hidden; }
.lpr-savbar i { position:absolute; left:0; right:0; bottom:0; border-radius:6px; background:var(--brass-hi); }
.lpr-savlist li.hi .lpr-savbar i, .lpr-savkey i.hi { background:var(--jade); }
.lpr-savlist li.lo .lpr-savbar i, .lpr-savkey i.lo { background:var(--sindoor); }
.lpr-savlist b { font:600 11px/1 var(--mono); color:var(--ink); }
.lpr-savlist em { font:500 10px/1 var(--mono); font-style:normal; color:var(--dim); }
.lpr-savkey { display:flex; flex-wrap:wrap; gap:6px 14px; font:500 11.5px/1 var(--body); color:var(--dim); }
.lpr-savkey span { display:inline-flex; align-items:center; gap:6px; }
.lpr-savkey i { width:10px; height:10px; border-radius:3px; background:var(--brass-hi); }

/* ---- the studio's type and shapes everywhere in Predictions (the user, 2026-09-17: the content
   fonts and the square boxes looked out of theme in all four tabs) ----
   Pro's pages still shown inside a view take the studio's face (Red Hat Display, figures in
   tabular numerals, never the mono), rounded boxes on the studio's tiles, quiet hairlines and
   rounded controls. Devanagari keeps its own face. */
.lite-has-chart .litedrawer[data-mode="predict"] .navsec { font-family:var(--body); color:var(--ink); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :where(*:not(svg):not(svg *):not(.deva):not(.chsk.deva)) { font-family:var(--body); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .deva { font-family:var(--deva); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(h3, h4) { font-family:var(--display); font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .railcard h3 { font-size:19px; line-height:1.25; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.tsub, .chsk, .kyq, .kyt, .kyd, .kys, .vnum, .skbar b, .swtile b, .kybig, .mlvnum, .sthdend, .sthdpct) {
  font-family:var(--body); letter-spacing:0; font-variant-numeric:tabular-nums; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.swsub, .sdtable th, .skrules th, .tag) { font-family:var(--body); letter-spacing:.08em; font-weight:600; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .tsub { text-transform:none; font-size:12.5px; color:var(--ink-2); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.sdlead, .note, .kyreasons li, .sthfacts span, .kv) { font-family:var(--body); color:var(--ink-2); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .railcard { padding:20px 18px; }
@media (min-width:760px) { .lite-has-chart .litedrawer[data-mode="predict"] .navsec .railcard { padding:24px; } }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .cardgrid { gap:14px; }

/* boxes: rounded tiles, one quiet line, no heavy accent edges */
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.swtile, .kytile, .kyverdict, .kyrow, .kywin, .kyact, .kpplanet, .kywhy, .skit,
  .mlverdict, .kyurgent, .kyprep li, .kymove, .kyfault, .kyrunning, .kystripwrap, .sdscroll, .skwin, .skcheck, .skgas, .skrec, .mlpart, .mlzone,
  .ghcard, .ghwin, .ghrow, .kpgo, .swaction, .sddetails) {
  border-radius:16px; border:1px solid var(--st-line-soft); background:var(--st-tile); box-shadow:none; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.kyverdict, .kytile, .kyrow, .mlverdict, .kyurgent) { border-left-width:1px; border-top-width:1px; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.kyrow.excellent, .kywin.excellent) { border-color:color-mix(in srgb, var(--jade) 45%, transparent); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.kytile.up) { border-color:color-mix(in srgb, var(--jade) 40%, transparent); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.kytile.down, .kyurgent) { border-color:color-mix(in srgb, var(--sindoor) 40%, transparent); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.tablewrap, .lrec-tablewrap) { border-radius:16px; border:1px solid var(--st-line-soft); background:var(--st-tile); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.vmtrack, .vstrip, .vtrack) { border-radius:999px; overflow:hidden; background:var(--st-tile-hi); border:0; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.vmfill, .vfill, .vseg) { border-radius:999px; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.vchip, .tag, .kylive, .kynadi, .skbar-ci) { border-radius:999px; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(button, select, input, textarea) { border-radius:12px; font-family:var(--body); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(select, input, textarea) { border:1px solid var(--st-line); background:var(--st-tile); color:var(--ink); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.sdsave, .swarabtns button) { border-radius:999px; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.swsec, .vrow, .kv) { border-color:var(--st-line-soft); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec svg text { font-family:var(--body); }

/* ---- Jyotish: figures in the studio's face, the chart on a rounded tile ---- */
.lpr-prow em, .lpr-lifeaxis, .lpr-adlist li span, .lpr-savlist b, .lpr-savlist em, .lpr-flags i, .lpr-legend i {
  font-family:var(--body); font-variant-numeric:tabular-nums; letter-spacing:0; }
.lpr-prow em { font-weight:500; font-size:12.5px; }
.lpr-lifeaxis { font-weight:500; font-size:12px; }
.lpr-adlist li span { font-weight:500; font-size:12.5px; }
.lpr-kundali { padding:10px; border-radius:22px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); overflow:hidden; }
.lpr-kundali svg { display:block; }
.lpr-kundali .kl-frame { fill:none; stroke:none; }
.lpr-kundali .kl-lines { fill:none; stroke:var(--st-line); stroke-width:1; }
.lpr-kundali .kl-num { font:500 9.5px/1 var(--body); fill:var(--dim); }
.lpr-kundali .kl-asc { font:700 8.5px/1 var(--body); letter-spacing:.12em; fill:rgb(var(--acc-rgb)); }
.lpr-kundali .kl-pl { font:600 11px/1 var(--body); }
.lpr-kundali .kl-house1 { fill:rgba(var(--acc-rgb), .08); stroke:none; }
/* the panel's own box is not a second card; card headings read as titles, their tag as a quiet pill */
.lite-has-chart .litedrawer[data-mode="predict"] .navsec > .swarabox,
.lite-has-chart .litedrawer[data-mode="predict"] #milaanbox { margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .railcard h3 { text-transform:none; letter-spacing:-.01em; margin:0 0 12px; padding:0 0 12px; border-bottom:1px solid var(--st-line-soft); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .railcard h3 .tag { display:inline-flex; vertical-align:3px; margin-left:8px; padding:4px 9px; border:0; border-radius:999px;
  font:600 10px/1 var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); background:var(--st-tile-hi); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .kv .v { font-family:var(--body); }
/* the rest of Pro's boxes in Predictions: rounded tiles, quiet lines; the page nav as the studio's pills */
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.swarahead, .swsec) { display:none; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.mlwheelwrap, .mlmatwrap, .mlkoota, .mldosha, .mlmcol, .mlsevcol, .mlpart, .mlstripwrap,
  .skit, .skgas button, .ghhouse, .ghwin, .ghsig, .mlpick select, .skform textarea, .skform input, [class^="mlperson"], [class*=" mlperson"], .mlwho, .mlside, .mlcard) {
  border-radius:16px; border:1px solid var(--st-line-soft); background:var(--st-tile); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.mldosha, .mlverdict) { border-left-width:1px; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .mlline { border-left-color:rgba(var(--acc-rgb), .45); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.mlkoota.full, .ghwin.now) { border-color:color-mix(in srgb, var(--jade) 45%, transparent); box-shadow:none; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .mlkoota.zero { border-color:color-mix(in srgb, var(--sindoor) 45%, transparent); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.ghhouse.on, .skform textarea:focus, .skform input:focus) { border-color:rgba(var(--acc-rgb), .6); box-shadow:none; outline:none; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .skbar-t { border:0; border-radius:999px; background:var(--st-tile-hi); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .swnav { gap:6px; margin:0 0 14px; padding:0; border:0; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .swnav button { gap:0; min-height:36px; padding:0 14px; border:1px solid var(--st-line-soft); border-radius:999px;
  background:var(--st-tile); color:var(--ink-2); font:600 13px/1 var(--body); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .swnav button b { display:none; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .swnav button[aria-pressed="true"] { color:var(--ink); border-color:transparent;
  background:linear-gradient(180deg, rgba(var(--acc-rgb), .30), rgba(var(--acc-rgb), .12)); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .46); }
/* gold numbered badges and gold edges take the tab's colour */
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.mlrnum, .swsecn) { color:#14110A; background:rgb(var(--acc-rgb)); border:0; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is([class^="ml"], [class*=" ml"], [class^="sk"], [class*=" sk"]):not(svg *) { border-radius:16px; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .mlslot { border-color:var(--st-line-soft); background:var(--st-tile); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .mlslot.on { border-color:rgba(var(--acc-rgb), .5); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .mlslotlab b { color:#14110A; background:rgb(var(--acc-rgb)); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec :is(.tag, .mlslotlab .tag) { border-color:rgba(var(--acc-rgb), .45); color:rgb(var(--acc-rgb)); }

/* ---- Kaarya · Now / Choose an act / Today / Why ---- */
.lpr-actchip { justify-self:start; display:inline-flex; align-items:center; gap:8px; min-height:40px; margin:-4px 0 0; padding:0 14px 0 16px; border:0; border-radius:999px; cursor:pointer;
  font:500 18px/1.2 var(--display); color:var(--ink); background:var(--st-tile-hi); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .35); text-align:left; }
.lpr-actchip svg { width:16px; height:16px; fill:none; stroke:rgb(var(--acc-rgb)); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.lpr-actchip:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lpr-verdict { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:16px; }
.lpr-verdict b { font:500 20px/1.2 var(--display); }
.lpr-verdict p { margin:4px 0 0; font:400 13px/1.45 var(--body); color:var(--ink-2); }
.lpr-ring { position:relative; width:96px; height:96px; }
.lpr-ring svg { width:100%; height:100%; }
.lpr-ring .bg { fill:none; stroke:var(--st-tile-hi); stroke-width:9; }
.lpr-ring .fg { fill:none; stroke:var(--tone); stroke-width:9; stroke-linecap:round; }
.lpr-ring b { position:absolute; inset:0; display:grid; place-items:center; font:300 26px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.lpr-ring b small { font-size:.5em; color:var(--dim); margin-left:1px; }
.lpr-facts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
@media (min-width:760px) { .lpr-facts { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.lpr-fact { display:grid; align-content:start; gap:3px; min-width:0; padding:11px 12px; border-radius:15px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lpr-fact b { font:600 15px/1.2 var(--body); color:var(--ink); }
.lpr-fact em { font:400 11.5px/1.35 var(--body); font-style:normal; color:var(--dim); }
.lpr-fact.ok { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 38%, transparent); }
.lpr-fact.ok b::after { content:" \2713"; color:var(--jade); }
.lpr-fact.no { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 34%, transparent); }
.lpr-partlist { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.lpr-partlist li { display:grid; gap:6px; }
.lpr-partlist li > div { display:flex; justify-content:space-between; gap:12px; }
.lpr-partlist b { font:600 13.5px/1.25 var(--body); color:var(--ink); }
.lpr-partlist span { font:600 12.5px/1.25 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lpr-partlist li.off b, .lpr-partlist li.off span { color:var(--dim); }
.lpr-ladder, .lpr-steps { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.lpr-ladder li { display:grid; gap:4px; padding:12px 0; border-top:1px solid var(--st-line-soft); }
.lpr-ladder li:first-child { border-top:0; padding-top:2px; }
.lpr-ladder b, .lpr-steps b { font:600 14px/1.3 var(--body); color:var(--ink); }
.lpr-ladder p, .lpr-steps p { margin:0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.lpr-moves { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.lpr-move { display:inline-grid; gap:2px; padding:8px 12px; border-radius:14px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lpr-move b { font-size:13px; }
.lpr-move em { font:500 11.5px/1.2 var(--body); font-style:normal; color:rgb(var(--acc-rgb)); font-variant-numeric:tabular-nums; }
.lite-has-chart .litedrawer[data-mode="predict"] .lpr-urgent { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 30%, transparent), var(--st-shadow); }
.lpr-steps li { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px; padding:12px 0; border-top:1px solid var(--st-line-soft); }
.lpr-steps li:first-child { border-top:0; padding-top:2px; }
.lpr-stepn { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font:700 12px/1 var(--body); color:#14110A; background:rgb(var(--acc-rgb)); }
.lpr-steps b em { font:500 11.5px/1 var(--body); font-style:normal; color:var(--dim); margin-left:6px; }
.lpr-steps .lpr-caution { color:var(--sindoor); }
.lpr-acts { display:flex; flex-wrap:wrap; gap:8px; }
.lpr-act { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 8px 0 14px; border:0; border-radius:999px; cursor:pointer; text-align:left;
  font:500 13.5px/1.2 var(--body); color:var(--ink); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); -webkit-tap-highlight-color:transparent; }
.lpr-act:hover { background:var(--st-tile-hi); }
.lpr-act.on { background:linear-gradient(180deg, rgba(var(--acc-rgb), .30), rgba(var(--acc-rgb), .12)); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .5); }
.lpr-act:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lpr-act em { display:inline-grid; place-items:center; min-width:40px; height:24px; padding:0 8px; border-radius:999px; font:600 10.5px/1 var(--body); font-style:normal; letter-spacing:.04em;
  color:var(--ink-2); background:var(--st-tile-hi); }
.lpr-act em.n-ida { color:var(--soma); } .lpr-act em.n-pingala { color:var(--sindoor); } .lpr-act em.n-sushumna { color:var(--brass-hi); }
.lpr-live { width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--jade); box-shadow:0 0 8px var(--jade); }
.lpr-act.workable .lpr-live { background:var(--brass-hi); box-shadow:0 0 8px var(--brass-hi); }
.lpr-count { font:600 12px/1 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }
.lpr-daystrip { position:relative; padding:6px 0; }
.lpr-daycells { display:grid; grid-template-columns:repeat(96, minmax(0, 1fr)); height:40px; border-radius:12px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lpr-daycells i { display:block; }
.lpr-daystrip .lpr-now { top:0; bottom:0; }
.lpr-winlist { display:grid; margin:0; padding:0; list-style:none; }
.lpr-winlist li { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--st-line-soft); }
.lpr-winlist li:first-child { border-top:0; padding-top:2px; }
.lpr-wtime { display:grid; gap:2px; min-width:0; }
.lpr-wtime b { font:600 15px/1.2 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lpr-wtime em { font:400 12px/1.2 var(--body); font-style:normal; color:var(--dim); }
.lpr-tier { padding:5px 10px; border-radius:999px; font:600 11px/1 var(--body); color:var(--ink-2); background:var(--st-tile-hi); }
.lpr-tier.excellent { color:var(--jade); background:color-mix(in srgb, var(--jade) 14%, transparent); }
.lpr-tier.good { color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 12%, transparent); }
.lpr-pct { min-width:40px; text-align:right; font:600 14px/1 var(--body); font-variant-numeric:tabular-nums; }
.lpr-reasons { display:grid; margin:0; padding:0; list-style:none; }
.lpr-reasons li { display:grid; grid-template-columns:44px minmax(0, 1fr); gap:10px; align-items:baseline; padding:9px 0; border-top:1px solid var(--st-line-soft); }
.lpr-reasons li:first-child { border-top:0; padding-top:2px; }
.lpr-reasons p { margin:0; font:400 13px/1.45 var(--body); color:var(--ink-2); }
.lpr-rv, .lpr-sum { font:700 13px/1 var(--body); font-variant-numeric:tabular-nums; }
.lpr-rv.up, .lpr-sum.up { color:var(--jade); } .lpr-rv.down, .lpr-sum.down { color:var(--sindoor); }
@media (min-width:1000px) {
  .lpr-grid.kanow > .lpr-kanow { grid-column:1 / span 7; }
  .lpr-grid.kanow > .lpr-parts { grid-column:8 / -1; }
  .lpr-grid.kanow > .lpr-urgent { grid-column:1 / span 7; }
  .lpr-grid.kanow > .lpr-prep { grid-column:8 / -1; }
  .lpr-grid.kaact > .lpr-group { grid-column:span 6; }
  .lpr-grid.katoday > .lpr-daycard { grid-column:1 / span 7; }
  .lpr-grid.katoday > .lpr-wins { grid-column:8 / -1; }
  .lpr-grid.kawhy > .lpr-why { grid-column:span 6; }
}

/* ---- Ghatana · Now / Choose a matter / Lifetime / Why (Lite's corrected engine) ---- */
.lpr-tierhero { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:16px; }
.lpr-tierhero b { font:500 22px/1.15 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lpr-tierhero.good b { color:var(--jade); }
.lpr-tierhero.hard b { color:var(--sindoor); }
.lpr-tierhero.soft b { color:var(--brass-hi); }
.lpr-tierhero p { margin:4px 0 0; font:400 13px/1.45 var(--body); color:var(--ink-2); }
.lpr-signal { display:inline-grid; grid-template-columns:repeat(4, 8px); align-items:end; gap:5px; height:60px; padding:14px 16px; border-radius:18px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); box-sizing:border-box; }
.lpr-signal i { display:block; width:8px; border-radius:3px; background:var(--st-tile-hi); }
.lpr-signal i:nth-child(1) { height:8px; } .lpr-signal i:nth-child(2) { height:15px; }
.lpr-signal i:nth-child(3) { height:23px; } .lpr-signal i:nth-child(4) { height:32px; }
.lpr-signal.good i.on { background:var(--jade); box-shadow:0 0 10px color-mix(in srgb, var(--jade) 45%, transparent); }
.lpr-signal.hard i.on { background:var(--sindoor); box-shadow:0 0 10px color-mix(in srgb, var(--sindoor) 40%, transparent); }
.lpr-signal.soft i.on { background:var(--brass-hi); }
.lpr-tierpill { justify-self:end; padding:5px 10px; border-radius:999px; font:600 11px/1 var(--body); white-space:nowrap; color:var(--dim); background:var(--st-tile-hi); }
.lpr-tierpill.good { color:var(--jade); background:color-mix(in srgb, var(--jade) 14%, transparent); }
.lpr-tierpill.hard { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 13%, transparent); }
.lpr-tierpill.soft { color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 12%, transparent); }
.lpr-src { display:inline-block; padding:2px 7px; border-radius:999px; font:600 10px/1.35 var(--body); letter-spacing:.02em; color:var(--dim);
  background:var(--st-tile-hi); vertical-align:1px; white-space:nowrap; }
.lpr-reasonlist { display:grid; margin:0; padding:0; list-style:none; }
.lpr-reasonlist li { display:grid; grid-template-columns:8px minmax(0, 1fr); gap:12px; align-items:start; padding:10px 0; border-top:1px solid var(--st-line-soft); }
.lpr-reasonlist li:first-child { border-top:0; padding-top:2px; }
.lpr-reasonlist li > i { width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--dim); }
.lpr-reasonlist li.up > i { background:var(--jade); }
.lpr-reasonlist li.down > i { background:var(--sindoor); }
.lpr-reasonlist p { margin:0; font:400 13px/1.55 var(--body); color:var(--ink-2); }
.lpr-winlist li.now .lpr-wtime b::after { content:"now"; margin-left:8px; padding:2px 7px; border-radius:999px; font:600 10px/1.3 var(--body); color:rgb(var(--acc-rgb)); background:rgba(var(--acc-rgb), .14); vertical-align:2px; }
.lpr-wtime .lpr-conf { color:var(--jade); }
.lpr-matter.hard .lpr-live { background:var(--sindoor); box-shadow:0 0 8px var(--sindoor); }
.lpr-savkey i.conf { background:var(--ink); height:4px; }
.lpr-savkey i.band { background:rgba(var(--acc-rgb), .22); }
.lpr-savkey i:not([class]) { background:var(--brass-dim); opacity:.6; }
.lpr-ghlife { position:relative; height:54px; border-radius:14px; overflow:hidden; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lpr-bandzone { position:absolute; top:0; bottom:0; background:rgba(var(--acc-rgb), .09); }
.lpr-ghsegs { position:absolute; left:0; right:0; top:16px; bottom:10px; }
.lpr-ghsegs i { position:absolute; top:0; bottom:0; border-radius:3px; background:var(--brass-dim); opacity:.4; }
.lpr-ghsegs i.good { background:var(--jade); opacity:.9; }
.lpr-ghsegs i.hard { background:var(--sindoor); opacity:.35; }
.lpr-ghsegs i.hard.deliv { opacity:.85; }
.lpr-ghsegs i.soft { background:var(--brass-hi); opacity:.28; }
.lpr-ghconf { position:absolute; left:0; right:0; top:6px; height:5px; }
.lpr-ghconf b { position:absolute; top:0; height:100%; border-radius:2px; background:var(--ink); opacity:.8; }
.lpr-ages { position:relative; height:13px; font:500 11px/1 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }
.lpr-ages span { position:absolute; top:0; transform:translateX(-50%); }
.lpr-ages span:first-child { transform:none; }
.lpr-ages span:last-child { transform:translateX(-100%); }
.lpr-houselist, .lpr-siglist, .lpr-convlist { display:grid; margin:0; padding:0; list-style:none; }
.lpr-houselist > li, .lpr-siglist > li { display:grid; gap:6px; padding:12px 0; border-top:1px solid var(--st-line-soft); }
.lpr-houselist > li:first-child, .lpr-siglist > li:first-child { border-top:0; padding-top:2px; }
.lpr-hrow { display:flex; justify-content:space-between; align-items:baseline; gap:12px; min-width:0; }
.lpr-hrow b { flex:0 0 auto; font:600 14px/1.3 var(--body); color:var(--ink); }
.lpr-hrow span { min-width:0; font:500 12.5px/1.35 var(--body); color:var(--ink-2); text-align:right; }
.lpr-hrow span.weak { color:var(--sindoor); }
.lpr-siglist p { margin:0; font:400 12.5px/1.65 var(--body); color:var(--ink-2); }
.lpr-siglist li.off { opacity:.6; }
.lpr-flaglist { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.lpr-flaglist li { position:relative; padding-left:15px; font:400 12.5px/1.5 var(--body); color:var(--ink-2); }
.lpr-flaglist li::before { content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--dim); }
.lpr-flaglist li.up::before { background:var(--jade); }
.lpr-flaglist li.down::before { background:var(--sindoor); }
.lpr-convlist li { display:grid; gap:3px; padding:9px 0; border-top:1px solid var(--st-line-soft); }
.lpr-convlist li:first-child { border-top:0; }
.lpr-convlist b { font:600 12.5px/1.3 var(--body); color:var(--ink); }
.lpr-convlist span { font:400 12.5px/1.5 var(--body); color:var(--ink-2); }
.lpr-how .lst-info { margin-top:2px; }
.lpr-facts.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:420px) { .lpr-facts.three { grid-template-columns:repeat(2, minmax(0, 1fr)); } .lpr-signal { height:54px; padding:12px 13px; } .lpr-tierhero b { font-size:20px; } }
.lpr-grid > .lal-foot { grid-column:1 / -1; margin:0; }
@media (min-width:1000px) {
  .lpr-grid.ghnow > .lpr-ghnow { grid-column:1 / span 7; }
  .lpr-grid.ghnow > .lpr-ghwhynow { grid-column:8 / -1; }
  .lpr-grid.ghnow > .lpr-wins { grid-column:1 / span 7; }
  .lpr-grid.ghnow > .lpr-prep { grid-column:8 / -1; }
  .lpr-grid.ghlife > .lpr-lifecard { grid-column:1 / span 7; }
  .lpr-grid.ghlife > .lpr-wins { grid-column:8 / -1; }
  .lpr-grid.ghwhy > .lpr-promise { grid-column:1 / span 6; }
  .lpr-grid.ghwhy > .lpr-sigs { grid-column:7 / -1; }
  .lpr-grid.ghwhy > .lpr-how { grid-column:1 / span 6; }
}

/* ---- the wordmark in the app's own face (the user, 2026-09-17: match the brand name to the font in use) ---- */
.topbar .mark { font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:.015em; }
.topbar .mark span { font-weight:400; }
@media (max-width: 820px) { .topbar .mark { font-size:18px; } }

/* ---- the readiness ring: the figure on the true centre (the user, 2026-09-17: "the score value in % is not
   aligned properly and in the center") — the digits alone are centred, the % hangs at their shoulder ---- */
.lpr-ring b { line-height:1; }
.lpr-ring b span { position:relative; display:inline-block; font-weight:400; line-height:1; letter-spacing:-.01em; }
.lpr-ring b small { position:absolute; left:100%; top:.14em; margin-left:2px; font-size:.44em; line-height:1; color:var(--dim); }
.lpr-wtime .lpr-conf.held { color:var(--dim); }

/* ---- the collapse disc clear of the tab strip (the user, 2026-09-17: "the close disc is touching the header tab") ----
   In the studio modes the disc sits higher in the handle row and the strip steps down 6px: a 15px gap. */
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .liteclose { top:7px; right:10px; width:28px; height:28px; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) :is(#lal-head, #lpr-head) .lst { margin-top:6px; }

/* ---- Pro's buttons inside Predictions, in the studio's shapes (the user, 2026-09-17: the Sankalpa "Set this intention"
   button was out of theme) — the primary is the studio's full-width pill in the tab's own accent, the rest quiet pills ---- */
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .swarabtns { gap:8px; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec button.sdsave { flex:1 1 100%; width:100%; min-height:48px; padding:0 18px; border:0 !important; border-radius:16px;
  cursor:pointer; font:600 15px/1 var(--display); letter-spacing:normal; text-transform:none; color:#0E1416;
  background:linear-gradient(180deg, color-mix(in srgb, rgb(var(--acc-rgb)) 62%, #fff), rgb(var(--acc-rgb)));
  box-shadow:0 12px 26px -16px rgba(var(--acc-rgb), .95), inset 0 1px 0 rgba(255,255,255,.35); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec button.sdsave:hover { filter:brightness(1.06); }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec button.sdsave[disabled] { opacity:.45; box-shadow:none; cursor:not-allowed; filter:none; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec button.sdsave:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:3px; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .swarabtns button:not(.sdsave),
.lite-has-chart .litedrawer[data-mode="predict"] .navsec button.ghost { min-height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--st-line) !important;
  background:var(--st-tile); color:var(--ink); font:500 13.5px/1 var(--body); letter-spacing:normal; text-transform:none; cursor:pointer; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .swarabtns button:not(.sdsave):hover,
.lite-has-chart .litedrawer[data-mode="predict"] .navsec button.ghost:hover { background:var(--st-tile-hi); border-color:rgba(var(--acc-rgb), .45) !important; }
.lite-has-chart .litedrawer[data-mode="predict"] .navsec .swarabtns button[aria-pressed="true"] { background:rgba(var(--acc-rgb), .16); border-color:rgba(var(--acc-rgb), .55) !important; }

/* ---- home: the two rings side by side (the user, 2026-09-17) ---- */
.ltune-pair { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; gap:14px; width:100%; max-width:520px; margin:12px auto 6px; }
.ltune-pair .ltune { flex-direction:column; gap:9px; margin:0; text-align:center; }
.ltune-pair .ltune-ring { width:92px; height:92px; }
.ltune-pair .ltune-ring b { font-size:34px; }
.ltune-pair .ltune-txt { justify-items:center; text-align:center; }
.ltune-pair .ltune-txt strong { font-size:16px; line-height:1.15; }
.ltune.own .ltune-fg { stroke:var(--jade); filter:drop-shadow(0 0 6px color-mix(in srgb, var(--jade) 55%, transparent)); }
.ltune.own .ltune-txt strong, .ltune.own .ltune-ring small { color:var(--jade); }
@media (max-width:360px) { .ltune-pair { gap:8px; } .ltune-pair .ltune-ring { width:80px; height:80px; } .ltune-pair .ltune-ring b { font-size:29px; } .ltune-pair .ltune-txt strong { font-size:14.5px; } }
@media (min-width:980px) and (min-aspect-ratio:5/4) { .ltune-pair { margin-left:0; } }

/* ---- every ring's figure sits on the true centre: the digits alone are centred, the % hangs at their shoulder ---- */
.ltune-ring b { line-height:1; }
.ltune-ring b small { position:absolute; left:100%; top:.16em; margin-left:2px; font-size:.44em; line-height:1; }
.lal-ring-dial b span { position:relative; display:inline-block; line-height:1; }
.lal-ring-dial b span small { position:absolute; left:100%; top:.14em; margin-left:1px; font-size:.48em; line-height:1; }

/* ---- Predictions: how far these readings are yours ---- */
.lpr-align { display:flex; align-items:center; gap:10px; width:100%; max-width:600px; margin:8px auto 2px; padding:0 6px; box-sizing:border-box; }
@media (min-width:760px) { .lpr-align { max-width:680px; } }
details.lpr-align { display:block; }
.lpr-align summary { display:grid; grid-template-columns:auto minmax(40px, 1fr) auto 14px; align-items:center; gap:10px; min-height:30px; cursor:pointer; list-style:none; }
.lpr-align summary::-webkit-details-marker { display:none; }
.lpr-align-k { font:500 12px/1.3 var(--body); color:var(--ink-2); }
.lpr-align.none .lpr-align-k, .lpr-align.wait .lpr-align-k { flex:1 1 auto; }
.lpr-align-bar { position:relative; display:block; height:5px; border-radius:3px; overflow:hidden; background:var(--st-tile-hi); }
.lpr-align-bar i { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--brass-hi); }
.lpr-align.good .lpr-align-bar i { background:var(--jade); box-shadow:0 0 8px color-mix(in srgb, var(--jade) 50%, transparent); }
.lpr-align.low .lpr-align-bar i { background:var(--sindoor); }
.lpr-align summary b { font:600 13px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lpr-align.good summary b { color:var(--jade); }
.lpr-align summary svg { width:14px; height:14px; fill:none; stroke:var(--dim); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.lpr-align[open] summary svg { transform:rotate(180deg); }
.lpr-align p { margin:4px 0 6px; font:400 12.5px/1.5 var(--body); color:var(--ink-2); }
.lpr-align-go { flex:0 0 auto; min-height:28px; padding:0 12px; border:1px solid rgba(var(--acc-rgb), .45); border-radius:999px; cursor:pointer;
  font:600 12px/1 var(--body); color:rgb(var(--acc-rgb)); background:rgba(var(--acc-rgb), .10); }
.lpr-align p .lpr-align-go { margin-left:4px; vertical-align:1px; }
.lpr-align-go:hover { background:rgba(var(--acc-rgb), .2); }
@media (max-width:420px) {
  .lpr-align summary { grid-template-columns:minmax(0, 1fr) auto 14px; row-gap:5px; }
  .lpr-align-bar { grid-column:1 / -1; grid-row:2; }
  .lpr-align-k { font-size:11.5px; }
}

/* ---- small corrections seen in the browser (2026-09-17) ---- */
.lite-has-chart .litedrawer[data-mode="predict"] .navsec button.sdsave { display:flex; align-items:center; justify-content:center; line-height:1.2; }
.lpr-align { margin:8px auto 12px; }
.ltune-ring b.w3 { font-size:32px; }
.ltune-pair .ltune-ring b.w3 { font-size:27px; }

/* ==== THE TIME TABLE, IN THE STUDIO'S SHAPES (the user, 2026-09-17) ==========================
   One sheet with the studio's header — the four-way switch, a day switch by the title — a lit card
   for now and next with its preparation, four figures, the day as one strip, the breath, and the
   day's rows one line each, opened on a tap. Side by side on a wide screen. */
.tstwrap { background:rgba(6,6,10,.62); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:0; }
@media (min-width:760px) { .tstwrap { padding:24px; align-items:center; } }
.tstwrap .tst {
  --acc-rgb:238, 201, 110; --st-card:rgba(255,255,255,.04);
  --st-tile:rgba(255,255,255,.036); --st-tile-hi:rgba(255,255,255,.06); --st-line:rgba(255,255,255,.085); --st-line-soft:rgba(255,255,255,.05);
  --tst-top:#16151D; --tst-none:rgba(255,255,255,.2); --tst-night:rgba(0,0,0,.3);
  position:relative; box-sizing:border-box; width:100%; max-width:1120px; height:100%; max-height:100%; margin:0; padding:0 14px 32px;
  overflow:auto; overscroll-behavior:contain; border:0; border-radius:0; box-shadow:none; color:var(--ink); font-family:var(--body);
  background:radial-gradient(120% 50% at 92% -8%, rgba(var(--acc-rgb), .13), transparent 62%), linear-gradient(180deg, #16151D, #0F0E14 38%, #0A0A0E);
}
@media (min-width:760px) {
  .tstwrap .tst { height:auto; max-height:calc(100vh - 48px); padding:0 24px 32px; border-radius:30px;
    box-shadow:0 40px 90px -40px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.07); }
}
:root[data-theme="light"] .tstwrap .tst {
  --acc-rgb:150, 110, 18; --st-card:#FFFFFF;
  --st-tile:rgba(40,30,60,.035); --st-tile-hi:rgba(40,30,60,.06); --st-line:rgba(40,30,60,.11); --st-line-soft:rgba(40,30,60,.07);
  --tst-top:#FDFBF7; --tst-none:rgba(40,30,60,.22); --tst-night:rgba(40,30,60,.06);
  background:radial-gradient(120% 50% at 92% -8%, rgba(var(--acc-rgb), .1), transparent 62%), linear-gradient(180deg, #FDFBF7, #F7F3EC 40%, #F2EEE7);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tstwrap .tst {
    --acc-rgb:150, 110, 18; --st-card:#FFFFFF;
    --st-tile:rgba(40,30,60,.035); --st-tile-hi:rgba(40,30,60,.06); --st-line:rgba(40,30,60,.11); --st-line-soft:rgba(40,30,60,.07);
    --tst-top:#FDFBF7; --tst-none:rgba(40,30,60,.22); --tst-night:rgba(40,30,60,.06);
    background:radial-gradient(120% 50% at 92% -8%, rgba(var(--acc-rgb), .1), transparent 62%), linear-gradient(180deg, #FDFBF7, #F7F3EC 40%, #F2EEE7);
  }
}
.tst-top { position:sticky; top:0; z-index:5; display:grid; gap:12px; margin:0 -14px 14px; padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
  background:linear-gradient(180deg, var(--tst-top) 72%, color-mix(in srgb, var(--tst-top) 90%, transparent));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--st-line-soft); }
@media (min-width:760px) { .tst-top { margin:0 -24px 20px; padding:18px 24px 14px; } }
.tst-titlerow { display:flex; align-items:center; gap:10px; min-width:0; max-width:1072px; width:100%; margin:0 auto; }
.tst-title { flex:1 1 auto; display:grid; gap:3px; min-width:0; }
.tst-title b { font:500 22px/1.1 var(--display); letter-spacing:-.01em; color:var(--ink); }
.tst-title span { font:500 12px/1.2 var(--body); color:rgb(var(--acc-rgb)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tst-days { flex:0 0 auto; display:inline-flex; padding:3px; border-radius:999px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.tst-days button { height:30px; padding:0 12px; border:0; border-radius:999px; background:none; color:var(--ink-2); font:500 12.5px/1 var(--body); cursor:pointer; }
.tst-days button[aria-pressed="true"] { color:#1B1406; background:rgb(var(--acc-rgb)); font-weight:600; }
.tst-close { flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; padding:0; border-radius:50%; border:1px solid var(--st-line); background:var(--st-tile); color:var(--ink-2); cursor:pointer; }
.tst-close svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.tst-close:hover { color:#1B1406; background:rgb(var(--acc-rgb)); border-color:rgb(var(--acc-rgb)); }
.tst-seg { width:100%; max-width:680px; margin:0 auto; box-sizing:border-box; }
.tst-yatra { margin:0; font:400 12px/1.4 var(--body); color:var(--sindoor); text-align:center; }
@media (max-width:380px) { .tst-title b { font-size:19px; } .tst-days button { padding:0 9px; font-size:12px; } }

.tst-body { max-width:1072px; margin:0 auto; }
.tst-grid { display:grid; gap:14px; align-items:start; min-width:0; }
.tst-col { display:grid; gap:14px; min-width:0; align-content:start; }
@media (min-width:900px) {
  .tst-grid { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:18px; }
  .tst-grid.acts { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .tst-grid.acts > .shape { grid-column:1 / -1; }
  .tst-col { gap:18px; }
}
.tst-card { position:relative; display:grid; gap:12px; min-width:0; padding:16px; border-radius:22px; background:var(--st-card); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.tst-card.lead { gap:14px; padding:18px 16px;
  background:radial-gradient(130% 100% at 0% 0%, rgba(var(--acc-rgb), .16), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--st-card) 100%, rgba(255,255,255,.03)), var(--st-card));
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .24), 0 26px 52px -38px rgba(0,0,0,.9); }
@media (min-width:760px) { .tst-card { padding:18px 20px; } .tst-card.lead { padding:22px; } }
/* the Day theme: the night's near-black lift sat under the first card of every Time table tab as a dark smudge on the
   cream ground (the user, 2026-09-25: "very high boundary shadow"). A soft warm one instead, the day's own shade, and
   the same for the chosen tab and the gold button */
:root[data-theme="light"] .tst-card.lead { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .24), 0 12px 26px -22px rgba(90,72,30,.26); }
:root[data-theme="light"] .lst-thumb { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .46), inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px -10px rgba(var(--acc-rgb), .38); }
:root[data-theme="light"] .tst-btn.primary { box-shadow:0 8px 16px -12px rgba(150,112,24,.5); }
.tst-hd { display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0; }
.tst-k { font:600 10px/1.25 var(--body); letter-spacing:.18em; text-transform:uppercase; color:rgb(var(--acc-rgb)); }
.tst-aside { font:500 11.5px/1.2 var(--body); color:var(--dim); text-align:right; }
.tst-big { font:500 22px/1.15 var(--display); letter-spacing:-.01em; color:var(--ink); }
.tst-lede { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.tst-note { margin:0; font:400 12px/1.5 var(--body); color:var(--dim); }
.tst-warn { margin:0; padding:10px 12px; border-radius:14px; font:400 12.5px/1.45 var(--body); color:var(--ink); background:color-mix(in srgb, var(--sindoor) 12%, transparent); }
.tst-warn p { margin:4px 0 0; }
.tst-empty { justify-items:start; }
.tst-busy { display:flex; align-items:center; justify-content:center; gap:10px; padding:64px 10px; color:var(--dim); font:400 13px/1 var(--body); }
.tst-busy i { width:14px; height:14px; border-radius:50%; border:2px solid rgba(var(--acc-rgb), .25); border-top-color:rgb(var(--acc-rgb)); animation:tstspin .9s linear infinite; }
@keyframes tstspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tst-busy i { animation:none; } }

.tst-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--st-line);
  background:var(--st-tile); color:var(--ink); font:500 13.5px/1 var(--body); cursor:pointer; white-space:nowrap; }
.tst-btn:hover { background:var(--st-tile-hi); border-color:rgba(var(--acc-rgb), .45); }
.tst-btn.primary { border:0; color:#1B1406; font-weight:600; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:0 12px 24px -16px rgba(214,178,74,.95); }
.tst-btn.ghost { background:none; color:var(--ink-2); }
.tst-btn.sm { min-height:32px; padding:0 12px; font-size:12.5px; }
.tst-btn:disabled { opacity:.55; cursor:progress; }
.tst :is(.tst-btn, .tst-days button, .tst-close, .tst-what, .tst-tick, .tst-obs button):focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.tst-actions { display:flex; flex-wrap:wrap; gap:8px; }

/* now and next */
.tst-nnrow { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; }
.tst-nn { display:grid; gap:4px; min-width:0; }
.tst-nn b { font:500 19px/1.2 var(--display); color:var(--ink); }
.tst-nn em { font:500 12.5px/1.2 var(--body); font-style:normal; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.tst-nn.next .tst-k { color:var(--dim); }
.tst .want-ida { --nc:var(--soma); }
.tst .want-pingala { --nc:var(--sindoor); }
.tst .want-sushumna { --nc:var(--brass-hi); }
.tst .want-none { --nc:var(--tst-none); }
.tst-cap { display:inline-block; flex:0 0 auto; width:7px; height:22px; border-radius:4px; background:var(--nc, var(--tst-none)); box-shadow:0 0 10px color-mix(in srgb, var(--nc, transparent) 40%, transparent); }
.tst-state { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:10px 12px; border-radius:14px; background:var(--st-tile); font:400 12.5px/1.3 var(--body); color:var(--ink-2); }
.tst-state b { font-weight:600; color:var(--ink); }
.tst-state.ok { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 35%, transparent); }
.tst-state.ok span:last-child { color:var(--jade); }
.tst-state.warn { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 45%, transparent); }
.tst-state.warn span:last-child { color:var(--brass-hi); }
.tst-prepbox { display:grid; gap:9px; padding-top:12px; border-top:1px solid var(--st-line-soft); }
.tst-prep { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.tst-prep li { display:grid; grid-template-columns:22px minmax(0, 1fr); gap:10px; align-items:start; }
.tst-prep.compact li { align-items:center; }
.tst-n { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font:700 11px/1 var(--body); color:#1B1406; background:rgb(var(--acc-rgb)); }
.tst-prep b { font:600 13px/1.35 var(--body); color:var(--ink); }
.tst-prep b em { margin-left:6px; font:500 11.5px/1 var(--body); font-style:normal; color:var(--dim); }
.tst-prep p { margin:3px 0 0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.tst-prep .tst-caution { color:var(--sindoor); }

/* the four figures */
.tst-tiles { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.tst-tile { display:grid; gap:5px; min-width:0; padding:12px 10px; border-radius:16px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.tst-tile b { font:500 23px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.tst-tile span { font:500 11px/1.25 var(--body); color:var(--dim); }
.tst-tile.ok b { color:var(--jade); }
.tst-tile.warn b { color:var(--brass-hi); }
.tst-tile.bad b { color:var(--sindoor); }
@media (max-width:340px) { .tst-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* the day as one strip */
.tst-strip { position:relative; height:34px; border-radius:10px; overflow:hidden; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.tst-night { position:absolute; top:0; bottom:0; right:0; background:var(--tst-night); }
.tst-strip i { position:absolute; top:8px; bottom:8px; border-radius:3px; background:var(--nc); }
.tst-strip i.want-none { opacity:.6; }
.tst-strip i.needs { top:5px; bottom:5px; box-shadow:0 0 0 1.5px var(--brass-hi); }
.tst-nowmark { position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--ink); box-shadow:0 0 8px var(--ink); }
.tst-axis { position:relative; display:flex; justify-content:space-between; height:14px; font:500 11px/1 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }
.tst-axis .mid { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.tst-key { display:flex; flex-wrap:wrap; gap:6px 12px; font:500 11px/1 var(--body); color:var(--dim); }
.tst-key span { display:inline-flex; align-items:center; gap:5px; }
.tst-key i { width:10px; height:10px; border-radius:3px; background:var(--nc); }
.tst-key i.needs { background:none; box-shadow:inset 0 0 0 1.5px var(--brass-hi); }

/* the breath */
.tst-bpair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tst-bpair > div { display:grid; gap:4px; padding:10px 12px; border-radius:14px; background:var(--st-tile); }
.tst-bpair span { font:500 11px/1 var(--body); color:var(--dim); }
.tst-bpair b { font:600 14.5px/1.2 var(--body); color:var(--ink); }
.tst-bpair b.n-ida { color:var(--soma); }
.tst-bpair b.n-pingala { color:var(--sindoor); }
.tst-bpair b.n-sushumna { color:var(--brass-hi); }
.tst-bpair b.n-none { color:var(--dim); font-weight:500; }
.tst-card.breath.off { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 40%, transparent); }
.tst-obs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.tst-obs > span { flex:1 1 100%; font:500 12px/1 var(--body); color:var(--ink-2); }
.tst-obs button { min-height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--st-line); background:var(--st-tile); color:var(--ink); font:500 13px/1 var(--body); cursor:pointer; }
.tst-obs button:hover { border-color:rgba(var(--acc-rgb), .5); }

/* the day's rows */
.tst-list { display:grid; margin:0 -6px; padding:0; list-style:none; }
.tst-row { display:grid; grid-template-columns:54px 7px minmax(0, 1fr) 32px; align-items:center; column-gap:10px; padding:6px; border-top:1px solid var(--st-line-soft); }
.tst-row:first-child { border-top-color:transparent; }
.tst-time { display:grid; gap:3px; min-width:0; }
.tst-time b { font:600 14.5px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.tst-time em { font:400 11px/1 var(--body); font-style:normal; color:var(--dim); }
.tst-time input { box-sizing:border-box; width:100%; min-width:0; padding:5px 2px; border:1px solid var(--st-line); border-radius:8px; background:var(--st-tile); color:var(--ink); font:600 12.5px/1 var(--body); color-scheme:dark; }
.tst-row .tst-cap { width:6px; height:32px; border-radius:3px; }
.tst-what { display:grid; gap:3px; min-width:0; padding:6px 0; border:0; background:none; color:inherit; text-align:left; cursor:pointer; }
.tst-what b { font:600 14px/1.25 var(--body); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tst-what em { font:400 12px/1.3 var(--body); font-style:normal; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tst-what em.ok { color:color-mix(in srgb, var(--jade) 80%, var(--ink)); }
.tst-what em.warn { color:var(--brass-hi); }
.tst-pin { margin-left:6px; padding:1px 6px; border-radius:999px; font:600 9.5px/1.4 var(--body); font-style:normal; letter-spacing:.04em; color:rgb(var(--acc-rgb)); background:rgba(var(--acc-rgb), .14); vertical-align:1px; }
.tst-tick { display:grid; place-items:center; width:30px; height:30px; padding:0; border-radius:50%; border:1px solid var(--st-line); background:none; color:var(--dim); cursor:pointer; }
.tst-tick svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.tst-tick[aria-pressed="true"] { color:#0C1410; background:var(--jade); border-color:var(--jade); }
.tst-row:is(.past, .done) .tst-what b { color:var(--dim); }
.tst-row.done .tst-what b { text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent); }
.tst-row.now { border-radius:14px; background:rgba(var(--acc-rgb), .08); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .32); border-top-color:transparent; }
.tst-row.now + .tst-row, .tst-row.open + .tst-row { border-top-color:transparent; }
.tst-row.open { border-radius:14px; background:var(--st-tile); border-top-color:transparent; }
.tst-more { grid-column:1 / -1; display:grid; gap:10px; padding:4px 4px 8px 71px; }
@media (max-width:460px) { .tst-more { padding-left:4px; } }
.tst-sug { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:12px; background:rgba(var(--acc-rgb), .08); font:400 12.5px/1.35 var(--body); color:var(--ink-2); }
.tst-faults { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.tst-faults li { position:relative; padding-left:13px; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.tst-faults li::before { content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--sindoor); }
.tst-why { display:grid; margin:8px 0 6px; padding:0; list-style:none; }
.tst-why li { display:grid; grid-template-columns:34px minmax(0, 1fr); gap:8px; padding:6px 0; border-top:1px solid var(--st-line-soft); }
.tst-why li:first-child { border-top:0; }
.tst-why span { font:700 12px/1.4 var(--body); font-variant-numeric:tabular-nums; }
.tst-why li.up span { color:var(--jade); }
.tst-why li.down span { color:var(--sindoor); }
.tst-why p { margin:0; font:400 12.5px/1.4 var(--body); color:var(--ink-2); }
.tst-edit { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.tst-edit label { display:inline-flex; align-items:center; gap:8px; font:500 12px/1 var(--body); color:var(--dim); }
.tst-edit input { width:70px; padding:6px 8px; border:1px solid var(--st-line); border-radius:10px; background:var(--st-tile); color:var(--ink); font:600 13px/1 var(--body); }

/* folds */
.tst-info > summary { display:inline-flex; align-items:center; gap:7px; cursor:pointer; list-style:none; font:600 12px/1.4 var(--body); color:var(--dim); }
.tst-info > summary::-webkit-details-marker { display:none; }
.tst-info > summary::after { content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s; }
.tst-info[open] > summary::after { transform:translateY(1px) rotate(225deg); }
.tst-info > p { margin:8px 0 0; font:400 12.5px/1.5 var(--body); color:var(--ink-2); }
.tst-truth { display:grid; gap:2px; margin:10px 0 0; }
.tst-truth dt { margin-top:8px; font:600 12.5px/1.3 var(--body); color:var(--ink); }
.tst-truth dd { margin:0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }

/* forms */
.tst-addrow { display:flex; gap:8px; min-width:0; }
.tst :is(.tst-addrow, .tst-field) select { flex:1 1 auto; box-sizing:border-box; width:100%; min-width:0; min-height:40px; padding:0 12px; border:1px solid var(--st-line); border-radius:12px;
  background:var(--st-tile); color:var(--ink); font:500 13.5px/1 var(--body); color-scheme:dark; }
.tst-fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px; }
.tst-field { display:grid; gap:6px; min-width:0; }
.tst-field span { font:500 11.5px/1 var(--body); color:var(--dim); }
.tst-acts { display:grid; margin:0; padding:0; list-style:none; }
.tst-act { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--st-line-soft); }
.tst-act:first-child { border-top:0; }
.tst-act > div { display:grid; gap:2px; min-width:0; }
.tst-act b { font:600 13.5px/1.25 var(--body); color:var(--ink); }
.tst-act em { font:400 11.5px/1.35 var(--body); font-style:normal; color:var(--dim); }
.tst-act:not(.on) b { color:var(--ink-2); }
.tst-switch { position:relative; display:inline-block; flex:0 0 auto; width:40px; height:24px; cursor:pointer; }
.tst-switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.tst-switch i { position:absolute; inset:0; border-radius:999px; background:var(--st-tile-hi); box-shadow:inset 0 0 0 1px var(--st-line); transition:background .2s; pointer-events:none; }
.tst-switch i::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--ink-2); transition:transform .2s, background .2s; }
.tst-switch input:checked + i { background:rgb(var(--acc-rgb)); box-shadow:none; }
.tst-switch input:checked + i::after { transform:translateX(16px); background:#1B1406; }
.tst-switch input:focus-visible + i { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.tst-min { display:inline-flex; align-items:center; gap:4px; }
.tst-min input { width:54px; padding:6px; border:1px solid var(--st-line); border-radius:10px; background:var(--st-tile); color:var(--ink); font:600 13px/1 var(--body); text-align:right; }
.tst-min em { font:400 11px/1 var(--body); font-style:normal; color:var(--dim); }

/* alarms */
.tst-alrow { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tst-alrow > div { display:grid; gap:4px; min-width:0; }
.tst-card.alarm.on .tst-big { color:var(--jade); }
.tst-up { display:grid; margin:0; padding:0; list-style:none; }
.tst-up li { display:grid; grid-template-columns:50px minmax(0, 1fr) auto; align-items:baseline; gap:10px; padding:8px 0; border-top:1px solid var(--st-line-soft); }
.tst-up li:first-child { border-top:0; }
.tst-up b { font:600 13.5px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.tst-up span { font:400 13px/1.3 var(--body); color:var(--ink-2); }
.tst-up em { font:500 11.5px/1 var(--body); font-style:normal; color:var(--dim); }
.tst-up li.align span { color:var(--brass-hi); }
.tst-card.push.on .tst-aside { color:var(--jade); }
:root[data-theme="light"] .tst :is(.tst-time input, .tst-addrow select, .tst-field select) { color-scheme:light; }

/* ---- Kaarya: add to my time table ---- */
.lpr-ttbtn { justify-self:start; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border-radius:999px; border:1px solid rgba(var(--acc-rgb), .45);
  background:rgba(var(--acc-rgb), .1); color:rgb(var(--acc-rgb)); font:600 13.5px/1 var(--body); cursor:pointer; }
.lpr-ttbtn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.lpr-ttbtn:hover { background:rgba(var(--acc-rgb), .18); }
.lpr-ttbtn.primary { border:0; color:#1B1406; background:rgb(var(--acc-rgb)); }
.lpr-ttbtn.ghost { border-color:var(--st-line); background:none; color:var(--ink-2); }
.lpr-ttbtn[disabled] { opacity:.45; cursor:default; }
.lpr-ttbtn:focus-visible, .lpr-ttchip:focus-visible, .lpr-ttlink:focus-visible, .lpr-winadd:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lpr-tt { display:grid; gap:8px; padding:14px; border-radius:18px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lpr-tt.done { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; font:500 13px/1.35 var(--body); color:var(--ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 40%, transparent); }
.lpr-tt.done b { font-variant-numeric:tabular-nums; }
.lpr-ttok { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--jade); color:#0C1410; }
.lpr-ttok svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lpr-ttlink { padding:4px 2px; border:0; background:none; color:rgb(var(--acc-rgb)); font:600 13px/1 var(--body); cursor:pointer; }
.lpr-ttchips { display:flex; flex-wrap:wrap; gap:6px; }
.lpr-ttchip { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--st-line); background:none;
  color:var(--ink-2); font:500 12.5px/1 var(--body); cursor:pointer; box-sizing:border-box; }
.lpr-ttchip.on { color:var(--ink); background:rgba(var(--acc-rgb), .16); border-color:rgba(var(--acc-rgb), .55); }
.lpr-ttchip.time { padding:0 4px 0 12px; }
.lpr-ttchip input { min-width:0; padding:4px; border:0; background:none; color:inherit; font:600 12.5px/1 var(--body); color-scheme:dark; }
.lpr-ttgo { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.lpr-winadd { display:grid; place-items:center; width:30px; height:30px; padding:0; border-radius:50%; border:1px solid rgba(var(--acc-rgb), .4); background:rgba(var(--acc-rgb), .08); color:rgb(var(--acc-rgb)); cursor:pointer; }
.lpr-winadd svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.lpr-winadd:hover { background:rgba(var(--acc-rgb), .2); }
.lpr-winlist li:has(.lpr-winadd) { grid-template-columns:minmax(0, 1fr) auto auto auto; }
.lpr-wins .lpr-tt.done { margin-bottom:4px; }

/* ---- ring figures, third pass (the user, 2026-09-17: on home the % looked misaligned, and at 100% it touched the
   ring). The digits and the % are one group on the ring's centre; the % is small and raised to the digits' top;
   three digits step down a size so the group keeps clear of the stroke. ---- */
:is(.ltune-ring, .lpr-ring, .lal-ring-dial) b small,
.lal-ring-dial b span small { position:relative; left:auto; top:-.95em; display:inline-block; margin-left:1px; font-size:.42em; line-height:1; vertical-align:baseline; }
.ltune-ring b { letter-spacing:-.02em; }
.ltune-ring b.w3 { font-size:30px; }
.ltune-pair .ltune-ring b { font-size:32px; }
.ltune-pair .ltune-ring b.w3 { font-size:25px; }
.lpr-ring b.w3 { font-size:21px; }
.lal-ring-dial b.w3 span { font-size:.82em; }
@media (max-width:360px) { .ltune-pair .ltune-ring b { font-size:27px; } .ltune-pair .ltune-ring b.w3 { font-size:22px; } }

/* ---- the check card: Quick / Detailed on the eyebrow's own line, clear of the question (the user, 2026-09-17) ---- */
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-check > .lal-hd > .lal-toggle { top:0; right:0; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-check > .lal-hd .lal-eyebrow { display:flex; align-items:center; min-height:28px; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lal-check > .lal-hd .lal-title { margin-top:8px; }

/* ---- the time table's rows: no old rule through the capsules ---- */
.tst .tst-list::before { display:none; }

/* ==== HOME, IN THE STUDIO'S SHAPES (the user, 2026-09-17: "Give the home page also the studio UI/UX design") ====
   The order the user set stays — the code's bands, the rings, what to breathe through now. The bands sit on a
   lit card; each ring is a tile, two side by side; the breath is a tile in its nostril's colour. */
.lite-has-chart .litesum {
  --acc-rgb:238, 201, 110; --st-card:rgba(255,255,255,.04); --st-line-soft:rgba(255,255,255,.06);
  gap:12px; margin-top:18px; padding:0 14px 10px; max-width:560px;
}
:root[data-theme="light"].lite-has-chart .litesum { --acc-rgb:150, 110, 18; --st-card:#FFFFFF; --st-line-soft:rgba(40,30,60,.08); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]).lite-has-chart .litesum { --acc-rgb:150, 110, 18; --st-card:#FFFFFF; --st-line-soft:rgba(40,30,60,.08); } }
@media (min-width:700px) { .lite-has-chart .litesum { padding:0 16px 10px; } }
@media (min-width:980px) and (min-aspect-ratio:5/4) { .lite-has-chart .litesum { padding:0; margin-top:4px; max-width:none; gap:14px; } }
.lite-has-chart .litesum .lh-card { position:relative; display:grid; gap:10px; width:auto; max-width:none; margin:0; padding:18px 16px 16px; border-radius:26px;
  background:radial-gradient(120% 80% at 0% 0%, rgba(var(--acc-rgb), .13), transparent 58%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .2), 0 30px 60px -40px rgba(0,0,0,.95); }
:root[data-theme="light"].lite-has-chart .litesum .lh-card { background:radial-gradient(120% 80% at 0% 0%, rgba(var(--acc-rgb), .1), transparent 58%), #FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .2), 0 1px 2px rgba(70,52,20,.05), 0 14px 30px -24px rgba(70,52,20,.16); }  /* Day: a hairline and a faint warm lift (the user, 2026-09-22: the Night shadow on it was "very ugly") */
@media (min-width:760px) { .lite-has-chart .litesum .lh-card { padding:22px 20px 18px; } }
.lite-has-chart .litesum .lh-card .lpattern-hd { justify-items:start; gap:4px; text-align:left; }
.lh-eyebrow { font:600 10px/1.2 var(--body); letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--acc-rgb), .95); }
.lite-has-chart .litesum .lh-card .lpattern-title { font-size:clamp(20px, 5.6vw, 24px); text-align:left; }
.lite-has-chart .litesum .lh-card .lband-key { justify-content:flex-start; gap:6px 14px; padding-top:12px; border-top:1px solid var(--st-line-soft); font-size:11.5px; }
.lite-has-chart .litesum .lh-tiles { display:grid; gap:10px; width:auto; max-width:none; margin:0; }
.lite-has-chart .litesum .lh-tiles.two { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.lite-has-chart .litesum .lh-tiles .ltune { display:grid; justify-items:center; align-content:start; gap:10px; margin:0; padding:16px 10px 14px; border-radius:22px; text-align:center;
  background:var(--st-card); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lite-has-chart .litesum .lh-tiles .ltune-txt { justify-items:center; text-align:center; gap:3px; }
.lite-has-chart .litesum .lh-tiles.one .ltune { display:flex; justify-content:flex-start; align-items:center; gap:16px; padding:14px 18px; text-align:left; }
.lite-has-chart .litesum .lh-tiles.one .ltune-txt { justify-items:start; text-align:left; }
.lite-has-chart .litesum .lh-tiles .ltune.own { background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--jade) 12%, transparent), transparent 62%), var(--st-card);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 26%, transparent); }
.lite-has-chart .litesum .lh-tiles .ltune-ring { width:88px; height:88px; }
.lite-has-chart .litesum .lh-tiles .ltune-txt strong { font-size:15.5px; line-height:1.2; }
.lite-has-chart .litesum .lh-tiles .ltune-txt em { font-size:11.5px; }
.lite-has-chart .litesum .lh-tiles.one .ltune-ring b { font-size:34px; }
.lite-has-chart .litesum .lh-tiles.one .ltune-ring b.w3 { font-size:27px; }
.lite-has-chart .litesum .lcalm.lcalm-box { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:baseline; gap:4px 12px; width:auto; margin:0; padding:14px 18px; border:0; border-radius:22px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--nc) 15%, transparent), color-mix(in srgb, var(--nc) 3%, transparent) 72%), var(--st-card);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nc) 28%, transparent); text-align:left; }
.lite-has-chart .litesum .lcalm-box .lcalm-k { flex:1 1 100%; font:600 10px/1.2 var(--body); letter-spacing:.2em; color:color-mix(in srgb, var(--nc) 75%, var(--ink)); }
.lite-has-chart .litesum .lcalm-box .lcalm-nadi { font-size:22px; }
.lite-has-chart .litesum .lcalm-box .lcalm-sub { font-size:12.5px; color:var(--ink-2); }

/* ==== THE PERSON FORM, IN THE STUDIO'S SHAPES (the user, 2026-09-17: redesign "whose clock is this") ========
   The studio's sheet and close disc; the birth on one lit card (name, date and time side by side, place, where
   you are now, the ayanamsa); the time's precision and the no-time switch as quiet tiles; the gold button. */
.lite-app #drawer-person { --acc-rgb:238, 201, 110; --st-card:rgba(255,255,255,.045); --st-tile:rgba(255,255,255,.035); --st-line:rgba(255,255,255,.09); --st-line-soft:rgba(255,255,255,.065);
  background:radial-gradient(120% 46% at 92% -6%, rgba(var(--acc-rgb), .14), transparent 60%), linear-gradient(180deg, #16151D, #0F0E14 42%, #0A0A0E);
  border:0; box-shadow:0 40px 90px -40px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.07); }
:root[data-theme="light"].lite-app #drawer-person { --acc-rgb:150, 110, 18; --st-card:#FFFFFF; --st-tile:rgba(40,30,60,.035); --st-line:rgba(40,30,60,.12); --st-line-soft:rgba(40,30,60,.08);
  background:radial-gradient(120% 46% at 92% -6%, rgba(var(--acc-rgb), .1), transparent 60%), linear-gradient(180deg, #FDFBF7, #F7F3EC 42%, #F2EEE7); box-shadow:0 30px 70px -40px rgba(60,40,80,.45); }
.lite-app #drawer-person .drawerhead { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 16px 0 22px; border:0; background:none; }
.lite-app #drawer-person .drawerhead h2 { margin:0; font:600 10px/1.2 var(--body); letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--acc-rgb)); }
.lite-app #drawer-person .drawerhead [data-close] { position:relative; flex:0 0 auto; width:34px; height:34px; min-height:0; padding:0; border-radius:50%; border:1px solid var(--st-line);
  background:var(--st-tile); color:var(--ink-2); font-size:0; cursor:pointer; }
.lite-app #drawer-person .drawerhead [data-close]::before,
.lite-app #drawer-person .drawerhead [data-close]::after { content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; border-radius:1px; background:currentColor; transform:translate(-50%, -50%) rotate(45deg); }
.lite-app #drawer-person .drawerhead [data-close]::after { transform:translate(-50%, -50%) rotate(-45deg); }
.lite-app #drawer-person .drawerhead [data-close]:hover { color:#1B1406; background:rgb(var(--acc-rgb)); border-color:rgb(var(--acc-rgb)); }
.lite-app #drawer-person .drawerhead [data-close]:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lite-app #drawer-person .intake { padding:2px 14px 24px; }
@media (min-width:560px) { .lite-app #drawer-person .intake { padding:2px 22px 28px; } }
.lite-app #drawer-person .intake summary { padding:6px 8px 16px; }
.lite-app #drawer-person .intake summary h2 { margin:0; font:500 clamp(25px, 7vw, 31px)/1.1 var(--display); letter-spacing:-.015em; color:var(--ink); }
.lite-app #drawer-person .intake summary .tsub { display:block; margin-top:6px; font:400 12.5px/1.35 var(--body); color:var(--dim); text-transform:none; letter-spacing:0; }
/* the birth: one lit card */
.lite-app #drawer-person .intake .fields { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0; margin:0 0 12px; padding:4px 0; border:0; border-radius:24px; overflow:hidden;
  background:radial-gradient(120% 70% at 0% 0%, rgba(var(--acc-rgb), .12), transparent 60%), var(--st-card);
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .22), 0 26px 52px -38px rgba(0,0,0,.95); }
.lite-app #drawer-person .intake .fields > label { grid-column:1 / -1; display:grid; gap:6px; min-width:0; margin:0; padding:12px 18px 12px; border:0; border-top:1px solid var(--st-line-soft); border-radius:0; background:none; }
.lite-app #drawer-person .intake .fields > label:first-child { border-top:0; }
.lite-app #drawer-person .intake .fields > label:has(#f-dob) { grid-column:1; }
.lite-app #drawer-person .intake .fields > label:has(#f-tob) { grid-column:2; border-left:1px solid var(--st-line-soft); }
@media (max-width:340px) { .lite-app #drawer-person .intake .fields > label:is(:has(#f-dob), :has(#f-tob)) { grid-column:1 / -1; border-left:0; } }
.lite-app #drawer-person .intake .fields > label:focus-within { background:rgba(var(--acc-rgb), .06); }
.lite-app #drawer-person .intake .lbl { font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lite-app #drawer-person .intake label:focus-within > .lbl { color:rgb(var(--acc-rgb)); }
.lite-app #drawer-person .intake :is(.fields, .fieldrow) :is(input:not([type="checkbox"]), select) { box-sizing:border-box; width:100%; min-width:0; min-height:30px; margin:0; padding:0;
  border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--ink); font:500 17px/1.3 var(--body); }
.lite-app #drawer-person .intake :is(.fields, .fieldrow) :is(input, select):focus { outline:none; }
.lite-app #drawer-person .intake :is(.fields, .fieldrow) input::placeholder { color:color-mix(in srgb, var(--dim) 80%, transparent); }
/* the quieter tiles */
.lite-app #drawer-person .intake :is(#dtrow, #hererow, .optrow) { margin:0 0 12px; border:0; border-radius:20px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); overflow:hidden; }
.lite-app #drawer-person .intake :is(#dtrow, #hererow) > label { padding:12px 18px; border:0; background:none; }
.lite-app #drawer-person .intake :is(#dtrow, #hererow) > label + label:not([hidden]) { border-top:1px solid var(--st-line-soft); }
.lite-app #drawer-person .intake .note { margin:-4px 8px 12px; font:400 12px/1.45 var(--body); color:var(--dim); }
.lite-app #drawer-person .intake #here-reset { min-height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--st-line); background:none; color:var(--ink-2); font:500 12.5px/1 var(--body); }
.lite-app #drawer-person .intake .optrow .check { display:flex; align-items:center; gap:14px; padding:14px 18px; font:500 14px/1.35 var(--body); color:var(--ink); }
.lite-app #drawer-person .intake .optrow .check input[type="checkbox"] { flex:0 0 auto; width:40px; height:24px; margin:0; border-radius:999px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background:var(--st-line); position:relative; transition:background .2s; }
.lite-app #drawer-person .intake .optrow .check input[type="checkbox"]::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--ink-2); transition:transform .2s, background .2s; }
.lite-app #drawer-person .intake .optrow .check input[type="checkbox"]:checked { background:rgb(var(--acc-rgb)); }
.lite-app #drawer-person .intake .optrow .check input[type="checkbox"]:checked::after { transform:translateX(16px); background:#1B1406; }
.lite-app #drawer-person .intake .optrow .check input[type="checkbox"]:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lite-app #drawer-person .intake .optrow .placehint:not(:empty) { padding:0 18px 14px; font:400 12px/1.4 var(--body); }
/* the buttons */
.lite-app #drawer-person .intake .row-actions { display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; margin-top:18px; }
.lite-app #drawer-person .intake button.go { min-height:54px; border:0; border-radius:18px; font:600 16px/1 var(--display); letter-spacing:normal; text-transform:none; color:#1B1406;
  background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:0 14px 28px -16px rgba(214,178,74,.95); cursor:pointer; }
.lite-app #drawer-person .intake button.go:hover { filter:brightness(1.05); }
.lite-app #drawer-person .intake #f-ref { justify-self:center; min-height:40px; padding:0 18px; border-radius:999px; border:1px solid var(--st-line); background:none; color:var(--ink-2); font:500 13.5px/1 var(--body); }
.lite-app #drawer-person .intake :is(button.go, #f-ref):focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:3px; }
.lite-app #drawer-person .intake .err:not(:empty) { justify-self:center; font:500 12.5px/1.4 var(--body); color:var(--sindoor); }
.lite-app #drawer-person .intake .saved { margin-top:18px; padding:14px 16px; border:0; border-radius:20px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lite-app #drawer-person .intake .saved > .lbl::before { color:rgb(var(--acc-rgb)); letter-spacing:.18em; }
.lite-app #drawer-person .intake .chip-person { border-color:var(--st-line); background:var(--st-card); }
.lite-app #drawer-person .intake .chip-person.on { border-color:rgba(var(--acc-rgb), .6); background:rgba(var(--acc-rgb), .12); }
.lite-app #drawer-person .personbar { margin:10px 14px 0; padding:12px 16px; border:0; border-radius:20px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lite-app #drawer-person .personbar select { min-height:40px; border:1px solid var(--st-line); border-radius:12px; background:var(--st-card); color:var(--ink); font:500 15px/1 var(--body); }
.lite-app #drawer-person .personbar #pb-edit { min-height:36px; border-radius:999px; border:1px solid var(--st-line); background:none; color:var(--ink-2); }

/* ==== THE STUDIO'S PICKERS (the user, 2026-09-17: the date, time, place, ayanamsa and people pickers opened the
   phone's own — "it looks ugly") — a field in the form, a sheet from the bottom with wheels or a list ==== */
.lpk-native { position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; overflow:hidden; clip:rect(0 0 0 0); }
.lpk-field { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:30px; margin:0; padding:0; border:0; background:none;
  color:var(--ink); font:500 17px/1.3 var(--body); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.lpk-field svg { flex:0 0 auto; width:16px; height:16px; fill:none; stroke:var(--dim); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s; }
.lpk-field:hover svg { stroke:rgb(var(--acc-rgb, 238, 201, 110)); }
.lpk-field .lpk-v { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lpk-field .lpk-v.empty { color:color-mix(in srgb, var(--dim) 80%, transparent); }
.lpk-field:focus-visible { outline:2px solid rgb(var(--acc-rgb, 238, 201, 110)); outline-offset:4px; border-radius:6px; }
.lpk-field[disabled] { opacity:.5; cursor:default; }
.lite-app #drawer-person .personbar .lpk-field { min-height:40px; padding:0 12px; border:1px solid var(--st-line); border-radius:12px; background:var(--st-card); font-size:15px; }

.lpk-wrap { position:fixed; inset:0; z-index:9600; display:flex; align-items:flex-end; justify-content:center; padding:0;
  background:rgba(6,6,10,0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); transition:background .22s, backdrop-filter .22s; }
.lpk-wrap.in { background:rgba(6,6,10,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.lpk-wrap:not(.in) { pointer-events:none; }      /* a sheet on its way out takes no taps: what is under it answers at once */
.lpk-sheet { --acc-rgb:238, 201, 110; --st-tile:rgba(255,255,255,.04); --st-line:rgba(255,255,255,.09); --st-line-soft:rgba(255,255,255,.06);
  box-sizing:border-box; width:100%; max-width:520px; max-height:min(86vh, 640px); overflow:auto; padding:10px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0; color:var(--ink);
  background:radial-gradient(120% 60% at 90% -10%, rgba(var(--acc-rgb), .14), transparent 60%), linear-gradient(180deg, #1A1922, #111017);
  box-shadow:0 -30px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(100%); transition:transform .26s cubic-bezier(.22,.9,.24,1); }
.lpk-wrap.in .lpk-sheet { transform:none; }
.lpk-sheet::before { content:""; display:block; width:40px; height:4px; margin:0 auto 10px; border-radius:2px; background:rgba(var(--acc-rgb), .55); }
@media (min-width:640px) {
  .lpk-wrap { align-items:center; padding:24px; }
  .lpk-sheet { border-radius:26px; transform:translateY(16px) scale(.98); opacity:0; transition:transform .22s, opacity .22s; box-shadow:0 40px 90px -40px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.08); }
  .lpk-wrap.in .lpk-sheet { transform:none; opacity:1; }
  .lpk-sheet::before { display:none; }
}
:root[data-theme="light"] .lpk-sheet { --acc-rgb:150, 110, 18; --st-tile:rgba(40,30,60,.035); --st-line:rgba(40,30,60,.12); --st-line-soft:rgba(40,30,60,.08);
  background:radial-gradient(120% 60% at 90% -10%, rgba(var(--acc-rgb), .1), transparent 60%), #FDFBF7; box-shadow:0 -24px 50px -30px rgba(60,40,80,.45); }
@media (prefers-reduced-motion: reduce) { .lpk-sheet, .lpk-wrap { transition:none; } }
.lpk-hd { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 2px 12px; border-bottom:1px solid var(--st-line-soft); }
.lpk-ttl { display:grid; gap:4px; min-width:0; }
.lpk-k { font:600 10px/1.2 var(--body); letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--acc-rgb)); }
.lpk-read { font:500 17px/1.25 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.lpk-read:empty { display:none; }
.lpk-done { flex:0 0 auto; min-height:38px; padding:0 18px; border:0; border-radius:999px; cursor:pointer; font:600 14px/1 var(--body); color:#1B1406;
  background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:0 10px 20px -14px rgba(214,178,74,.95); }
.lpk-x { flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; padding:0; border-radius:50%; border:1px solid var(--st-line); background:var(--st-tile); color:var(--ink-2); font:400 20px/1 var(--body); cursor:pointer; }
.lpk-done:focus-visible, .lpk-x:focus-visible, .lpk-col:focus-visible, .lpk-opt:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }

/* the wheels */
.lpk-wheels { position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin-top:12px; }
.lpk-wheels.three { grid-template-columns:.8fr 1.5fr 1fr; }
.lpk-wheels.time { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.lpk-colwrap { position:relative; z-index:1; display:grid; gap:6px; min-width:0; }
.lpk-colk { font:600 10px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-align:center; }
.lpk-col { position:relative; height:220px; overflow-y:auto; overscroll-behavior:contain; scroll-snap-type:y mandatory; scrollbar-width:none; border-radius:14px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.lpk-col::-webkit-scrollbar { display:none; }
.lpk-pad { height:88px; }
.lpk-it { display:flex; align-items:center; justify-content:center; height:44px; padding:0 6px; scroll-snap-align:center; cursor:pointer;
  font:500 17px/1 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s, font-size .15s; }
.lpk-it.on { color:var(--ink); font-weight:600; font-size:19px; }
.lpk-it.off { color:color-mix(in srgb, var(--dim) 45%, transparent); }
.lpk-band { position:absolute; z-index:0; left:0; right:0; bottom:88px; height:44px; border-radius:14px; pointer-events:none;
  background:rgba(var(--acc-rgb), .12); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .32); }
.lpk-note { margin:12px 2px 0; font:400 12px/1.45 var(--body); color:var(--dim); }

/* the list */
.lpk-list { display:grid; gap:4px; margin:10px 0 0; padding:0; list-style:none; }
.lpk-opt { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:50px; padding:0 14px; border:0; border-radius:14px;
  background:none; color:var(--ink); font:500 15.5px/1.3 var(--body); text-align:left; cursor:pointer; }
.lpk-opt:hover { background:var(--st-tile); }
.lpk-opt.on { background:rgba(var(--acc-rgb), .12); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .35); }
.lpk-opt svg { flex:0 0 auto; width:18px; height:18px; fill:none; stroke:rgb(var(--acc-rgb)); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ---- the place list (Pro's combobox), in the studio's shapes ---- */
.lite-app #drawer-person .combopop { z-index:30; margin-top:6px; padding:6px; border:0; border-radius:18px; max-height:280px; overflow:auto;
  background:linear-gradient(180deg, #1C1B24, #14131A); box-shadow:0 26px 50px -24px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.08); }
:root[data-theme="light"].lite-app #drawer-person .combopop { background:#FFFFFF; box-shadow:0 20px 40px -24px rgba(60,40,80,.45), inset 0 0 0 1px rgba(40,30,60,.1); }
.lite-app #drawer-person .comborow { display:grid; gap:2px; padding:10px 12px; border:0; border-radius:12px; cursor:pointer; }
.lite-app #drawer-person .comborow:hover, .lite-app #drawer-person .comborow.on { background:rgba(var(--acc-rgb), .12); }
.lite-app #drawer-person .cbmain { font:500 15px/1.3 var(--body); color:var(--ink); }
.lite-app #drawer-person .cbsub { font:400 12px/1.3 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }

/* ---- the people kept on this device: a list, not a strip of chips ---- */
.lite-app #drawer-person .intake .chips { display:grid; gap:6px; overflow:visible; flex-wrap:nowrap; padding:0; }
.lite-app #drawer-person .intake .chip-person { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:6px; padding:4px 4px 4px 0; border:0; border-radius:16px;
  background:var(--st-card); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lite-app #drawer-person .intake .chip-person.on { background:rgba(var(--acc-rgb), .1); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .4); }
.lite-app #drawer-person .intake .chip-person .open { display:grid; gap:3px; min-width:0; padding:10px 14px; border:0; background:none; color:var(--ink); font:600 15px/1.25 var(--body); text-align:left; cursor:pointer; }
.lite-app #drawer-person .intake .chip-person .open br { display:none; }
.lite-app #drawer-person .intake .chip-person .sub { display:block; font:400 12px/1.3 var(--body); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lite-app #drawer-person .intake .chip-person .del { display:grid; place-items:center; width:34px; height:34px; padding:0; border-radius:50%; border:0; background:none; color:var(--dim); font:400 20px/1 var(--body); cursor:pointer; }
.lite-app #drawer-person .intake .chip-person .del:hover { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 12%, transparent); }

/* ---- the form's own conditions kept above the studio's layout: auto fields stay hidden unless the place could not be found; an
   empty read-back row stays hidden; the date and time sit side by side at a size that fits ---- */
.lite-app #drawer-person .intake .fields > label.lite-autofield,
.lite-app #drawer-person .intake #hererow > label.lite-autofield { display:none; }
.lite-app #drawer-person #intake.lite-manual-birth .fields > label.lite-autofield.birth,
.lite-app #drawer-person #intake.lite-manual-here #hererow > label.lite-autofield.here { display:grid; }
.lite-app #drawer-person .intake #dtrow > label.lite-empty-read { display:none; }
.lite-app #drawer-person .intake .fields > label:is(:has(#f-dob), :has(#f-tob)) .lpk-field { font-size:15.5px; }

/* ---- the date and time fields keep inside their own column (the user, 2026-09-17: the date field's marker sat in the time column) ---- */
.lite-app #drawer-person .intake .fields > label { grid-template-columns:minmax(0, 1fr); }
.lite-app #drawer-person .intake .lpk-field { min-width:0; max-width:100%; }

/* ---- the form: "Use the birthplace" only once a current location is typed ---- */
.lite-app #drawer-person #intake:has(#f-here:placeholder-shown) #hererow:not(:has(.lite-autofield.here:not([style*="none"]))) { display:none; }
.lite-app #drawer-person #intake.lite-manual-here #hererow { display:block; }
.lite-app #drawer-person .intake .fields > label:is(:has(#f-dob), :has(#f-tob)) { padding-right:12px; }

/* ==== A DEEPER NIGHT, WITH MORE CONTRAST (the user, 2026-09-17: "change the bg color theme and make it more dark and
   contrasting"). The dark theme only: the ground and every sheet go nearer black, the sky's glow is cut to a trace,
   the words and the hairlines are brighter. The light theme is untouched. ==== */
:root:not([data-theme="light"]) {
  --ground:#030304; --ground-2:#060608;
  --panel:#0A0A0E; --panel-2:#0F0F14;
  --rule:rgba(240,236,226,.16); --rule-soft:rgba(240,236,226,.09);
  --ink:#F7F2E6; --ink-2:#D6D0DE; --dim:#A09BB5;
  --dial-face:#08080B; --dial-face-2:#040406; --plate:#060608; --cart:#0A0A0E;
  --glass:rgba(8,8,11,.82); --glass-line:rgba(240,236,226,.13); --glass-hi:rgba(240,236,226,.07);
  --sky:radial-gradient(circle 520px at 82% 8%, rgba(214,177,115,.055), rgba(143,134,214,.02) 42%, transparent 66%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ground:#F4F1EC; --ground-2:#EBE6DE; --panel:#FFFFFF; --panel-2:#F8F5F0;
    --rule:#E4DED4; --rule-soft:#EEE9E1; --ink:#221F27; --ink-2:#4E4955; --dim:#857E8B;
    --dial-face:#FFFDF8; --dial-face-2:#F5F0E6; --plate:#F7F3EB; --cart:#FFFFFF;
    --glass:rgba(255,255,255,.74); --glass-line:rgba(40,30,60,.09); --glass-hi:rgba(255,255,255,.6);
    --sky:radial-gradient(130% 60% at 50% -10%, #DCC3CF 0%, #EBD9D2 30%, #F3EDE7 58%, #F4F1EC 100%);
  }
}
:root:not([data-theme="light"]).lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) {
  --st-g1:#0D0C11; --st-g2:#07070A; --st-g3:#030304;
  --st-surface:rgba(255,255,255,.05); --st-surface-2:rgba(255,255,255,.022); --st-tile:rgba(255,255,255,.045); --st-tile-hi:rgba(255,255,255,.08);
  --st-line:rgba(255,255,255,.12); --st-line-soft:rgba(255,255,255,.075);
}
:root:not([data-theme="light"]).lite-has-chart .litesum { --st-card:rgba(255,255,255,.05); --st-line-soft:rgba(255,255,255,.085); }
:root:not([data-theme="light"]).lite-has-chart .litesum .lh-card { background:radial-gradient(120% 80% at 0% 0%, rgba(var(--acc-rgb), .12), transparent 58%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
:root:not([data-theme="light"]) .tstwrap .tst {
  --st-card:rgba(255,255,255,.05); --st-tile:rgba(255,255,255,.045); --st-tile-hi:rgba(255,255,255,.08); --st-line:rgba(255,255,255,.12); --st-line-soft:rgba(255,255,255,.075); --tst-top:#0D0C11;
  background:radial-gradient(120% 50% at 92% -8%, rgba(var(--acc-rgb), .09), transparent 62%), linear-gradient(180deg, #0D0C11, #07070A 38%, #030304);
}
:root:not([data-theme="light"]).lite-app #drawer-person {
  --st-card:rgba(255,255,255,.055); --st-tile:rgba(255,255,255,.045); --st-line:rgba(255,255,255,.12); --st-line-soft:rgba(255,255,255,.08);
  background:radial-gradient(120% 46% at 92% -6%, rgba(var(--acc-rgb), .1), transparent 60%), linear-gradient(180deg, #0D0C11, #07070A 42%, #030304);
}
:root:not([data-theme="light"]) .lpk-sheet { --st-tile:rgba(255,255,255,.05); --st-line:rgba(255,255,255,.12); --st-line-soft:rgba(255,255,255,.08);
  background:radial-gradient(120% 60% at 90% -10%, rgba(var(--acc-rgb), .1), transparent 60%), linear-gradient(180deg, #111016, #08080B); }
:root:not([data-theme="light"]).lite-app #drawer-person .combopop { background:linear-gradient(180deg, #141319, #0B0B0F); }

/* ---- "Use the birthplace" only once a current location is typed (plain rule) ---- */
.lite-app #drawer-person #intake:has(#f-here:placeholder-shown):not(.lite-manual-here) #hererow { display:none; }

/* ---- Kaarya: what Muhurta Chintamani sets aside (ui-lite-mu-engine.js; the user, 2026-09-17: "implement muhurta in this") ---- */
.lite-has-chart .litedrawer[data-mode="predict"] .lpr-aside { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 32%, transparent), var(--st-shadow); }
.lpr-asidelist { display:grid; margin:0; padding:0; list-style:none; }
.lpr-asidelist li { display:grid; gap:4px; padding:11px 0 11px 16px; border-top:1px solid var(--st-line-soft); position:relative; }
.lpr-asidelist li:first-child { border-top:0; padding-top:2px; }
.lpr-asidelist li::before { content:""; position:absolute; left:0; top:17px; width:7px; height:7px; border-radius:50%; background:var(--sindoor); }
.lpr-asidelist li:first-child::before { top:8px; }
.lpr-asidelist b { font:600 13.5px/1.4 var(--body); color:var(--ink); }
.lpr-asidelist p { margin:0; font:400 12.5px/1.5 var(--body); color:var(--dim); }
.lpr-asidenext { margin:10px 0 0; padding-top:10px; border-top:1px solid var(--st-line-soft); font:500 13px/1.45 var(--body); color:var(--ink-2); }
.lpr-daycells i.aside { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--sindoor) 26%, transparent) 0 2px, transparent 2px 5px); }
.lpr-savkey i.aside { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--sindoor) 60%, transparent) 0 2px, transparent 2px 4px); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 40%, transparent); }
.lpr-reasons li.veto p { color:var(--ink); }
.lpr-reasons li.veto .lpr-rv { color:var(--sindoor); }
.lpr-rulelist { display:grid; margin:0; padding:0; list-style:none; }
.lpr-rulelist li { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:12px; align-items:baseline; padding:9px 0; border-top:1px solid var(--st-line-soft); }
.lpr-rulelist li:first-child { border-top:0; padding-top:2px; }
.lpr-rulelist .lpr-k { font:600 10px/1.3 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.lpr-rulelist p { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
@media (max-width:420px) { .lpr-rulelist li { grid-template-columns:minmax(0, 1fr); gap:3px; } }
@media (min-width:1000px) {
  .lpr-grid.kanow > .lpr-aside { grid-column:8 / -1; }
  .lpr-grid.kawhy > .lpr-rules { grid-column:1 / -1; }
}

/* ==== SANKALPA — native views on the corrected engine (ui-lite-sankalpa.js, LSK) ==== */
.lsk-field { display:grid; gap:6px; min-width:0; }
.lsk-field > em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--dim); margin-top:-2px; }
.lsk-field :is(textarea, input[type="text"]) { width:100%; min-width:0; box-sizing:border-box; padding:11px 13px; border-radius:14px; border:1px solid var(--st-line);
  background:var(--st-tile); color:var(--ink); font:400 14.5px/1.45 var(--body); resize:vertical; }
.lsk-field :is(textarea, input[type="text"]):focus { outline:none; border-color:rgba(var(--acc-rgb), .6); box-shadow:0 0 0 3px rgba(var(--acc-rgb), .16); }
.lsk-field ::placeholder { color:var(--dim); opacity:.75; }
.lsk-ifthen { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; }
@media (max-width:420px) { .lsk-ifthen { grid-template-columns:minmax(0, 1fr); } }
.lsk-kinds { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.lsk-kind { display:grid; gap:4px; align-content:start; min-width:0; padding:12px; border-radius:16px; border:1px solid var(--st-line); background:var(--st-tile); color:var(--ink-2); text-align:left; cursor:pointer; }
.lsk-kind b { font:600 13.5px/1.25 var(--body); color:var(--ink); }
.lsk-kind span { font:400 11.5px/1.35 var(--body); color:var(--dim); }
.lsk-kind.sug:not(.on) { border-style:dashed; border-color:rgba(var(--acc-rgb), .55); }
.lsk-kind.on { background:rgba(var(--acc-rgb), .14); border-color:rgba(var(--acc-rgb), .6); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .25); }
.lsk-switch { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px; align-items:start; padding:12px; border-radius:16px; background:var(--st-tile); cursor:pointer; }
.lsk-switch input { position:absolute; opacity:0; width:1px; height:1px; }
.lsk-toggle { position:relative; width:40px; height:24px; margin-top:2px; border-radius:999px; background:var(--st-line); transition:background .2s; }
.lsk-toggle::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--ink-2); transition:transform .2s, background .2s; }
.lsk-switch input:checked + .lsk-toggle { background:rgba(var(--acc-rgb), .7); }
.lsk-switch input:checked + .lsk-toggle::after { transform:translateX(16px); background:#1B1406; }
.lsk-switch input:focus-visible + .lsk-toggle { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lsk-switch > span:last-child { display:grid; gap:3px; }
.lsk-switch b { font:600 13.5px/1.3 var(--body); color:var(--ink); }
.lsk-switch em { font:400 12px/1.45 var(--body); font-style:normal; color:var(--dim); }
.lsk-risk, .lsk-msg { margin:0; padding:10px 12px; border-radius:14px; font:500 13px/1.45 var(--body); color:var(--ink);
  background:color-mix(in srgb, var(--sindoor) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 32%, transparent); }
.lsk-note { margin:0; font:400 12.5px/1.5 var(--body); color:var(--dim); }
.lsk-foot { grid-column:1 / -1; padding:0 6px; }
.lsk-go { justify-self:stretch; justify-content:center; min-height:48px; font-size:14.5px; }
.lsk-plan { margin:0; font:400 13.5px/1.5 var(--body); color:var(--ink-2); }
.lsk-plan i { color:var(--ink); }
.lsk-pick { margin-top:2px; }
.lsk-list { display:grid; margin:0; padding:0; list-style:none; }
.lsk-list li { border-top:1px solid var(--st-line-soft); }
.lsk-list li:first-child { border-top:0; }
.lsk-list li > button { display:grid; gap:3px; width:100%; padding:11px 0; border:0; background:none; text-align:left; cursor:pointer; }
.lsk-list li.row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; }
.lsk-list li.row > div { display:grid; gap:3px; min-width:0; }
.lsk-list b { font:600 13.5px/1.35 var(--body); color:var(--ink); overflow-wrap:anywhere; }
.lsk-list span { font:400 12px/1.35 var(--body); color:var(--dim); }
.lsk-g { flex:0 0 auto; min-width:34px; padding:5px 9px; border-radius:999px; text-align:center; font:700 13px/1 var(--body); }
.lsk-g.up { color:var(--jade); background:color-mix(in srgb, var(--jade) 14%, transparent); }
.lsk-g.down { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 13%, transparent); }
.lsk-why { display:grid; margin:0; padding:0; list-style:none; }
.lsk-why li { display:grid; grid-template-columns:8px minmax(0, 1fr); gap:10px; align-items:start; padding:7px 0; }
.lsk-why li > i { width:7px; height:7px; margin-top:7px; border-radius:50%; background:var(--dim); }
.lsk-why li.up > i { background:var(--jade); } .lsk-why li.down > i { background:var(--sindoor); }
.lsk-why p { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.lsk-score { display:flex; align-items:baseline; gap:8px; }
.lsk-score b { font:500 40px/1 var(--display); color:var(--sindoor); letter-spacing:-.02em; }
.lsk-score.ok b { color:var(--jade); }
.lsk-score span { font:500 12.5px/1.2 var(--body); color:var(--dim); }
.lsk-winlist { display:grid; margin:0; padding:0; list-style:none; }
.lsk-winlist > li { border-top:1px solid var(--st-line-soft); }
.lsk-winlist > li:first-child { border-top:0; }
.lsk-winrow { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:11px 0; border:0; background:none; cursor:pointer; text-align:left; }
.lsk-when { display:grid; gap:3px; }
.lsk-when b { font:600 15px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lsk-when em { font:400 12px/1 var(--body); font-style:normal; color:var(--dim); }
.lsk-winlist .lsk-why { padding:0 0 10px; }
.lsk-sides { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.lsk-side { display:grid; gap:3px; justify-items:center; padding:12px 6px; border-radius:16px; border:1px solid var(--st-line); background:var(--st-tile); cursor:pointer; }
.lsk-side b { font:600 14px/1 var(--body); color:var(--ink); }
.lsk-side em { font:400 11px/1 var(--body); font-style:normal; color:var(--dim); }
.lsk-side.on { background:rgba(var(--acc-rgb), .16); border-color:rgba(var(--acc-rgb), .6); }
.lsk-side[disabled] { opacity:.45; cursor:default; }
.lsk-pacer { position:relative; height:132px; display:grid; place-items:center; }
.lsk-pacer i { width:64px; height:64px; border-radius:50%; background:radial-gradient(circle, rgba(var(--acc-rgb), .55), rgba(var(--acc-rgb), .08)); box-shadow:0 0 0 1px rgba(var(--acc-rgb), .35); }
.lsk-pacer span { position:absolute; bottom:0; font:600 10px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); opacity:0; }
.lsk-pacer.on i { animation:lskBreath 10s ease-in-out infinite; }
.lsk-pacer.on .in { animation:lskIn 10s steps(1) infinite; }
.lsk-pacer.on .out { animation:lskOut 10s steps(1) infinite; }
@keyframes lskBreath { 0%, 100% { transform:scale(.72); } 50% { transform:scale(1.55); } }
@keyframes lskIn { 0% { opacity:1; } 50% { opacity:0; } }
@keyframes lskOut { 0% { opacity:0; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .lsk-pacer.on i { animation:none; transform:scale(1.1); } }
.lsk-rec { display:grid; gap:10px; padding:12px 0; border-top:1px solid var(--st-line-soft); }
.lsk-rec:first-of-type { border-top:0; padding-top:0; }
.lsk-recw { font:600 14px/1.4 var(--body); color:var(--ink); }
.lsk-gas { display:grid; gap:6px; }
.lsk-gas button { display:grid; grid-template-columns:34px minmax(0, 1fr); align-items:center; gap:10px; padding:9px 12px; border-radius:14px; border:1px solid var(--st-line); background:var(--st-tile); text-align:left; cursor:pointer; }
.lsk-gas button b { font:700 14px/1 var(--body); color:var(--ink); text-align:center; font-variant-numeric:tabular-nums; }
.lsk-gas button span { font:400 12.5px/1.35 var(--body); color:var(--ink-2); overflow-wrap:anywhere; }
.lsk-gas button:hover { border-color:rgba(var(--acc-rgb), .55); }
.lsk-bar { display:grid; grid-template-columns:92px minmax(0, 1fr) auto; align-items:center; gap:10px; }
.lsk-bar > span { font:500 12.5px/1.2 var(--body); color:var(--ink-2); }
.lsk-bar > b { font:600 12.5px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lsk-bart { position:relative; height:10px; border-radius:999px; background:var(--st-tile-hi); overflow:hidden; }
.lsk-bart .ci { position:absolute; top:0; bottom:0; border-radius:999px; background:rgba(var(--acc-rgb), .35); }
.lsk-bart .m { position:absolute; top:-2px; bottom:-2px; width:3px; margin-left:-1.5px; border-radius:2px; background:rgb(var(--acc-rgb)); }
.lsk-patlist { display:grid; margin:0; padding:0; list-style:none; }
.lsk-patlist li { display:grid; gap:5px; padding:11px 0; border-top:1px solid var(--st-line-soft); }
.lsk-patlist li:first-child { border-top:0; padding-top:2px; }
.lsk-patlist b { font:600 13px/1.4 var(--body); color:var(--ink); }
.lsk-patrow { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.lsk-patrow span { font:400 12px/1.3 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }
.lsk-patrow em { font:600 12px/1.3 var(--body); font-style:normal; color:var(--ink-2); }
.lsk-patrow em.up { color:var(--jade); } .lsk-patrow em.down { color:var(--sindoor); }
.lite-has-chart .litedrawer[data-mode="predict"] .lsk-warn { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 32%, transparent), var(--st-shadow); }
@media (min-width:1000px) {
  .lpr-grid.skintend > .lsk-form { grid-column:1 / span 7; grid-row:span 2; }
  .lpr-grid.skintend > :is(.lsk-openlist, .lsk-about) { grid-column:8 / -1; }
  .lpr-grid.sktime > .lsk-it, .lpr-grid.skact > .lsk-it { grid-column:1 / -1; }
  .lpr-grid.sktime > :is(.lsk-nowcard, .lsk-warn) { grid-column:1 / span 5; }
  .lpr-grid.sktime > .lsk-wins { grid-column:6 / -1; }
  .lpr-grid.sktime > .lsk-verses { grid-column:1 / span 5; }
  .lpr-grid.skact > .lsk-step { grid-column:span 6; }
  .lpr-grid.skact > .lsk-begin { grid-column:1 / -1; }
  .lpr-grid.skrecord > .lsk-record { grid-column:1 / span 7; grid-row:span 2; }
  .lpr-grid.skrecord > :is(.lsk-planned, .lsk-done) { grid-column:8 / -1; }
  .lpr-grid.skevidence > .lsk-trial { grid-column:1 / span 7; }
  .lpr-grid.skevidence > .lsk-patterns { grid-column:8 / -1; grid-row:span 2; }
  .lpr-grid.skevidence > .lsk-hyp { grid-column:1 / span 7; }
}

/* Time table: a planned act the text sets aside (ui-lite-mu-engine.js) */
.tstwrap .tst .tst-setaside { margin:0; padding:9px 12px; border-radius:14px; font:400 12.5px/1.45 var(--body); color:var(--ink-2); background:color-mix(in srgb, var(--sindoor) 11%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 30%, transparent); }
.tstwrap .tst .tst-setaside b { color:var(--ink); font-weight:600; }

/* ==== ZOOM: the dial and the body of 114 points (ui-lite-zoom.js). The drawing zooms by its viewBox;
   the buttons and the cards stay at their own size (the user, 2026-09-17) ==== */
.dialbox svg#plate, svg.ldx-body { touch-action:pan-y; }
.dialbox svg#plate.lzm-on, svg.ldx-body.lzm-on { touch-action:none; cursor:grab; overflow:hidden; }
.dialbox svg#plate.lzm-on { filter:none; }
.dialbox svg#plate.lzm-on:active, svg.ldx-body.lzm-on:active { cursor:grabbing; }
.lzm-host { position:relative; }
.lzm-ctl { position:absolute; z-index:4; display:flex; flex-direction:column; gap:6px; }
.lzm-ctl.body { top:6px; right:6px; }
.lzm-b { display:grid; place-items:center; width:34px; height:34px; padding:0; border-radius:50%; cursor:pointer; color:var(--ink);
  border:1px solid var(--glass-line, rgba(255,255,255,.14)); background:var(--glass, rgba(10,10,14,.72));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 6px 18px -8px rgba(0,0,0,.6); }
.lzm-b svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lzm-b:hover:not([disabled]) { border-color:rgba(214,177,115,.6); }
.lzm-b[disabled] { opacity:.38; cursor:default; }
.lzm-b:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lzm-b.reset { display:none; width:auto; min-width:34px; height:30px; padding:0 9px; border-radius:999px; grid-auto-flow:column; gap:5px; }
.lzm-b.reset span { font:600 11px/1 var(--body); font-variant-numeric:tabular-nums; }
.lzm-b.reset svg { width:14px; height:14px; }
.lzm-ctl.on .lzm-b.reset { display:grid; }
.lzm-ctl.dial { flex-direction:column-reverse; }
@media (max-width:420px) { .lzm-b { width:32px; height:32px; } .lzm-b svg { width:16px; height:16px; } }
/* THE + AND − ON THE DIAL'S BUTTONS (the user, 2026-10-22: "The zoom buttons are not showing their + and -"): the buttons sit inside the
   dial's box, and the desktop's rule sizing the dial (.stage .dialbox svg … !important) sized their glyphs too — 686px wide, drawn far off
   the button. Their own size, whatever sizes the dial */
:root .dialbox .lzm-ctl .lzm-b svg, :root:not([data-demo]).lite-app.lite-has-chart .stage .dialbox .lzm-ctl .lzm-b svg { width:var(--lzm-g, 17px) !important; height:var(--lzm-g, 17px) !important; max-width:none; }
:root .dialbox .lzm-ctl .lzm-b.reset svg, :root:not([data-demo]).lite-app.lite-has-chart .stage .dialbox .lzm-ctl .lzm-b.reset svg { --lzm-g:14px; }
@media (max-width:420px) { .dialbox .lzm-ctl .lzm-b { --lzm-g:16px; } }
svg.ldx-body [data-pt] { cursor:pointer; }
svg.ldx-body .lzm-sel { stroke:var(--ink); stroke-width:.9; }
svg.ldx-body g.lzm-sel .ldx-core { stroke:var(--ink); stroke-width:1.2; }
/* the point card, in the drawer's studio tokens (the stage accent, surfaces and lines, both themes) */
.lzm-card { position:fixed; z-index:90; width:min(276px, calc(100vw - 24px)); box-sizing:border-box; display:grid; gap:9px; padding:14px 16px 15px;
  border-radius:22px; color:var(--ink); text-align:left;
  background:radial-gradient(120% 90% at 0% 0%, rgba(var(--acc-rgb, 214,177,115), .17), transparent 62%), linear-gradient(180deg, var(--st-g1, #16151D), var(--st-g3, #0A0A0E));
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb, 214,177,115), .3), 0 26px 50px -24px rgba(0,0,0,.85);
  animation:lzmIn .14s ease-out; }
:root[data-theme="light"] .lzm-card { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb, 150,110,18), .32), 0 22px 44px -22px rgba(60,40,80,.35); }
.lzm-card.hover { pointer-events:none; }
@keyframes lzmIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .lzm-card { animation:none; } }
.lzm-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:20px; }
.lzm-eyebrow { font:600 10px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--acc-rgb, 214,177,115)); }
.lzm-x { display:grid; place-items:center; width:30px; height:30px; margin:-8px -8px -8px 0; padding:0; border:0; border-radius:50%; cursor:pointer;
  color:var(--ink-2); background:var(--st-tile-hi, rgba(255,255,255,.06)); }
.lzm-x svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.lzm-x:hover { color:var(--ink); }
.lzm-x:focus-visible { outline:2px solid rgb(var(--acc-rgb, 214,177,115)); outline-offset:2px; }
.lzm-name { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font:500 19px/1.2 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lzm-name em { font:500 12px/1 var(--body); font-style:normal; color:var(--dim); }
.lzm-rows { display:grid; margin:0; padding:0; }
.lzm-rows > div { display:grid; grid-template-columns:62px minmax(0, 1fr); gap:10px; align-items:baseline; padding:7px 0; border-top:1px solid var(--st-line-soft, rgba(255,255,255,.06)); }
.lzm-rows dt { margin:0; font:600 9.5px/1.4 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lzm-rows dd { margin:0; font:400 13px/1.45 var(--body); color:var(--ink-2); }
.lzm-val { --pc:rgb(var(--acc-rgb, 214,177,115)); display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:9px; padding:9px 11px;
  border-radius:14px; background:var(--st-tile, rgba(255,255,255,.04)); }
.lzm-val span { font:500 11.5px/1.2 var(--body); color:var(--ink-2); }
.lzm-val i { position:relative; height:6px; border-radius:999px; background:var(--st-tile-hi, rgba(255,255,255,.08)); overflow:hidden; }
.lzm-val em { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--pc); }
.lzm-val b { font:600 13px/1 var(--body); font-variant-numeric:tabular-nums; color:var(--ink); }
.lzm-src { justify-self:start; padding:3px 8px; border-radius:999px; font:600 10px/1.3 var(--body); letter-spacing:.02em; color:var(--dim); background:var(--st-tile-hi, rgba(255,255,255,.06)); }
svg.ldx-body [data-pt] { pointer-events:all; }
svg.ldx-body .lzm-hov { stroke:var(--ink); stroke-width:.7; }
svg.ldx-body g.lzm-hov .ldx-core { stroke:var(--ink); stroke-width:1; }

/* ---- speed: the dial on its own layer, so a hand or a ring redrawn does not repaint the page under it,
   and its shadow is applied by the compositor rather than re-blurred on every change ---- */
.lite-has-chart .dialbox svg#plate { will-change:transform; }

/* ---- speed: the nudge and the sheen play once on a timer (ldFlourish) instead of looping forever ---- */
.lite-has-chart .litedrawer[data-state="peek"] { animation:none; }
@keyframes litebob1 { 0%, 100% { translate:0 0; } 26% { translate:0 -7px; } 53% { translate:0 0; } 74% { translate:0 -3px; } }
.lite-has-chart .litedrawer[data-state="peek"].bob { animation:litebob1 1.22s var(--dr-ease) 1; }
.lpattern-title { animation:none; background-position:100% 50%; }
.lpattern-title.sheen { animation:lpat-shine 7s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) {
  .lite-has-chart .litedrawer[data-state="peek"].bob, .lpattern-title.sheen { animation:none; }
}
/* the body figure is taller than a phone's view: its zoom buttons stay in sight while it scrolls */
.ldx-figwrap.lzm-host > svg.ldx-body { grid-area:1 / 1; }
.ldx-figwrap.lzm-host > .lzm-ctl.body { position:sticky; top:8px; right:auto; grid-area:1 / 1; justify-self:end; align-self:start; margin:6px 6px 0 0; }

/* ---- the website's live dial (index.html's hero frame loads kaalchakra-lite.html?demo): the dial alone ---- */
:root[data-demo] .litedrawer, :root[data-demo] .litesum, :root[data-demo] .lzm-ctl, :root[data-demo] .lzm-card { display:none !important; }
:root[data-demo].lite-has-chart body { padding-bottom:0; }
/* the home screen's dial sizing (min-height, the grid on wide screens, !important widths) is for the app's own
   header and drawer; the website's frame is a bare square, so the dial fills it and sits in its centre */
:root[data-demo].lite-has-chart .wrap { padding:0 !important; max-width:none; }
:root[data-demo].lite-has-chart .stage { min-height:100vh !important; display:flex !important; flex-direction:column; justify-content:center; align-items:center; padding:0 !important; margin:0 auto; max-width:none; }
:root[data-demo].lite-has-chart .platearea { width:100%; margin:0; align-self:center; }
:root[data-demo].lite-has-chart .dialbox { display:flex; justify-content:center; align-items:center; }
:root[data-demo].lite-has-chart .dialbox svg, :root[data-demo].lite-has-chart .dialbox svg:is(*) { width:min(100vw, 100vh) !important; margin:0 auto; }

/* ==== HOME HOLDS THE CODE ALONE (the user, 2026-09-21) ==========================
   The card keeps its own band, labelled sunrise and sunset, and a pill opens the whole
   reading. Each ring is a button now: a tap opens what that figure says. The studio's
   surfaces are unchanged — the tiles look exactly as they did, they simply answer. */
.lite-has-chart .litesum .lh-card .lpattern-hd.lh-hd { display:grid; }
.lh-hd-txt { display:grid; gap:4px; min-width:0; padding-right:30px; }
.lh-i { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:30px; height:30px; padding:0;
  border:0; border-radius:50%; background:transparent; color:var(--dim); opacity:.7; cursor:pointer;
  transition:color .22s ease, opacity .22s ease, background .22s ease; }
.lh-i svg { display:block; width:17px; height:17px; }
.lh-i:hover { color:rgb(var(--acc-rgb)); opacity:1; background:rgba(var(--acc-rgb), .1); }
.lh-i:active { transform:scale(.94); }
.lh-i:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lite-has-chart .litesum .lh-card .lband-key.slim { padding-top:10px; gap:5px 13px; font-size:10.5px; }
.lband-key.slim i { width:14px; height:6px; border-radius:3px; }

.lite-has-chart .litesum .lh-tiles .ltune { position:relative; width:100%; border:0; font:inherit; color:inherit;
  -webkit-appearance:none; appearance:none; cursor:pointer; transition:box-shadow .22s ease, transform .18s ease; }
.lite-has-chart .litesum .lh-tiles .ltune:hover { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .36); }
.lite-has-chart .litesum .lh-tiles .ltune.own:hover { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 46%, transparent); }
.lite-has-chart .litesum .lh-tiles .ltune:active { transform:scale(.985); }
.lite-has-chart .litesum .lh-tiles .ltune:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.ltune-i { position:absolute; top:10px; right:10px; width:17px; height:17px; color:var(--dim); opacity:.7; pointer-events:none; }
.ltune-i svg { display:block; width:100%; height:100%; }
.lite-has-chart .litesum .lh-tiles .ltune:hover .ltune-i { color:rgb(var(--acc-rgb)); opacity:1; }
@media (prefers-reduced-motion: reduce) { .lh-i, .lite-has-chart .litesum .lh-tiles .ltune { transition:none; } }

/* ---- what opens from it: the reading, on the studio's sheet ---- */
.lpk-info-body { display:grid; gap:14px; padding:14px 0 2px; }
.lsw-sheet { display:grid; gap:14px; }
.lsw-sheet .lband { max-width:none; }
.lsw-fig { display:flex; align-items:center; gap:14px; padding:13px 15px; border-radius:20px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lsw-fig .ltune-ring { width:76px; height:76px; flex:0 0 auto; }
.lsw-fig .ltune-ring b { font-size:27px; }
.lsw-fig .ltune-ring b.w3 { font-size:22px; }
.lsw-fig .ltune-txt { display:grid; gap:4px; text-align:left; }
.lsw-fig .ltune-txt strong { font:500 16px/1.15 var(--display); color:rgb(var(--acc-rgb)); }
.lsw-fig .ltune-txt em { font:400 12px/1.4 var(--body); font-style:normal; color:var(--dim); }
.lsw-rows { display:grid; gap:9px; margin:0; }
.lsw-rows > div { display:grid; gap:4px; padding:12px 14px; border-radius:18px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lsw-rows dt { font:600 9.5px/1.2 var(--body); letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--acc-rgb), .95); }
.lsw-rows dd { margin:0; font:400 13.5px/1.5 var(--body); color:var(--ink-2); }
.lsw-rows dd b { font-weight:600; color:var(--ink); }
.lsw-src { margin:2px 0 0; font:400 11px/1.4 var(--body); color:var(--dim); text-align:center; }

/* ==== the collapsed drawer sits clear of the phone's own bar (the user, 2026-09-21) ====
   Its grip was a few pixels above the home button; the peeking strip is taller now, so the
   grip rides higher. --lite-peek is measured from this strip, so the dial and the page's
   bottom padding follow it; the safe-area inset is added by the page, not here, or it would
   be counted twice. */
.lite-has-chart .litedrawer[data-state="peek"] .litedrawer-top,
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])[data-state="peek"] .litedrawer-top { padding-bottom:26px; }

/* ==== THE ELEMENT BESIDE THE NOSTRIL (the user, 2026-09-21) ============================
   Diagnosis's day and Realign's progress set the element against the code as they set the
   side. The five colours are the body map's own; SKIPPED — watched, but the element never
   read in detail — is a field of dots, apart from the faint hatch of "not checked". */
.lel-s.e-prithvi { background:linear-gradient(180deg, #F0D57A, #D9B23A); }
.lel-s.e-jala    { background:linear-gradient(180deg, #FFFFFF, #E3DCCB); }
.lel-s.e-agni    { background:linear-gradient(180deg, #EC7D63, #D2472C); }
.lel-s.e-vayu    { background:linear-gradient(180deg, #A2CBE6, #6AA5CF); }
.lel-s.e-akasha  { background:linear-gradient(180deg, #D6B8EC, #B386D6); }
:root[data-theme="light"] .lel-s.e-jala { background:linear-gradient(180deg, #D9DEE6, #AEB7C4); }
:root[data-theme="light"] .lel-s.e-prithvi { background:linear-gradient(180deg, #E1BE4E, #BF9A1E); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lel-s.e-jala { background:linear-gradient(180deg, #D9DEE6, #AEB7C4); } }
.lel-skip { background:
  radial-gradient(circle, color-mix(in srgb, var(--ink) 55%, transparent) 0.9px, transparent 1.3px) 0 0 / 4px 4px,
  color-mix(in srgb, var(--ink) 6%, transparent); }
.lel-none { background:color-mix(in srgb, var(--brass-hi) 16%, transparent); }
.lel-on { background:color-mix(in srgb, var(--jade) 70%, transparent); }
.lband-s.lel-s, .lband-s.lel-skip, .lband-s.lel-none { box-shadow:none; }
.lband-track.lel-code { height:14px; border-radius:7px; }
.lband-track.lel-code .lband-s { box-shadow:inset -1px 0 0 color-mix(in srgb, var(--ground) 55%, transparent); }
.lband-track.lel-found .lband-s.lel-s { z-index:1; box-shadow:0 0 0 1px color-mix(in srgb, var(--ground) 60%, transparent); }
.lband-key.lel-key { gap:6px 12px; }
.lband-key i.lel-s, .lband-key i.lel-skip, .lband-key i.lel-on { width:16px; height:8px; border-radius:4px; }
.lband-lab.el { margin-top:10px; }
.lal-dayel { margin-top:12px; }
.lel-facts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:12px 0 0; }
.lel-facts > div { display:grid; grid-template-columns:none; gap:4px; padding:10px 12px; border-radius:14px; border:0;
  background:color-mix(in srgb, var(--ink) 4%, transparent); align-content:start; }
.lel-facts > div + div { border-top:0; }
.lel-facts dt { font:600 9.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lel-facts dd { margin:0; font:400 17px/1.15 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.lel-note { margin:10px 2px 0; font:400 12px/1.45 var(--body); color:var(--ink-2); }
@media (max-width:359px) { .lel-facts { grid-template-columns:minmax(0, 1fr); } }

/* Realign: the element on Today's indicator, its figures and times in Progress, its marks in the grid */
.lra-ind-row.lra-ind-el { grid-template-columns:minmax(0, 1fr); margin-top:10px; }
.lra-elsub { margin-top:6px; padding-top:10px; border-top:1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.lra-big.none span { color:var(--dim); }
.lra-s.lel-on { background:color-mix(in srgb, var(--jade) 55%, transparent); }
.lra-s.lel-skip { background:
  radial-gradient(circle, color-mix(in srgb, var(--ink) 55%, transparent) 0.9px, transparent 1.3px) 0 0 / 4px 4px,
  color-mix(in srgb, var(--ink) 6%, transparent); }
.lra-times-list li.el .lra-when { color:color-mix(in srgb, var(--jade) 60%, var(--ink)); }
.lra-gtrack.two { height:24px; border-radius:9px; }
.lra-gtrack.two i { top:3px; }
.lra-gtrack b { position:absolute; top:15px; width:6px; height:6px; margin-left:-3px; border-radius:1.5px; }
.lra-gtrack b.e-same { background:var(--jade); }
.lra-gtrack b.e-differs { background:var(--sindoor); }
.lra-gtrack b.e-skipped { box-shadow:inset 0 0 0 1.2px color-mix(in srgb, var(--ink) 45%, transparent); }
.lra-grow { grid-template-columns:4.6em minmax(0, 1fr) 3.2em; }
.lra-gn { display:grid; gap:3px; }
.lra-gn em { font:500 10px/1 var(--mono); font-style:normal; color:color-mix(in srgb, var(--dim) 80%, transparent); }
.lel-facts dd { text-align:left; }

/* ==== THE ELEMENT ON HOME (the graha-tattva engine, 2026-09-21) =======================
   The code card carries the element under the nostril; each ring gains an inner arc for the
   element beside the nostril's outer one; the sheets set your element code against the
   cosmic rhythm's five equal parts. */
.lite-has-chart .litesum .lh-card .lband .lband-lab { margin-top:0; }
.lite-has-chart .litesum .lh-card .lband .lband-lab.el { margin-top:8px; }
.lband-track.lel-code .lband-s { box-shadow:none; }
.lband-track.lel-code.ideal-el { height:10px; border-radius:5px; opacity:.9; }
.lband-key .lel-keybreak { flex-basis:100%; height:0; }
.ltune-bg2 { fill:none; stroke:color-mix(in srgb, var(--ink) 8%, transparent); stroke-width:5; }
.ltune-fg2 { fill:none; stroke:#EADFC4; stroke-width:5; stroke-linecap:round; opacity:.92; }
:root[data-theme="light"] .ltune-fg2 { stroke:#A88E55; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ltune-fg2 { stroke:#A88E55; } }
.ltune-two { display:flex; flex-wrap:wrap; justify-content:inherit; gap:2px 10px; font:500 11.5px/1.3 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.ltune-two span { display:inline-flex; align-items:center; gap:5px; }
.ltune-two span.none { color:var(--dim); }
.ltune-two i { width:8px; height:8px; border-radius:50%; display:inline-block; }
.ltune-two i.k-n { background:var(--brass-hi); }
.ltune-two i.k-e { background:#EADFC4; }
:root[data-theme="light"] .ltune-two i.k-e { background:#A88E55; }
.lite-has-chart .litesum .lh-tiles.two .ltune-two { justify-content:center; }
.lite-has-chart .litesum .lh-tiles.one .ltune-two { justify-content:flex-start; }
.lsw-fig .ltune-two { justify-content:flex-start; }
/* the running swara's five, in order, with their minutes */
.lsw-now { display:grid; gap:8px; padding:12px 14px; border-radius:18px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lsw-now-k { font:600 9.5px/1.2 var(--body); letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--acc-rgb), .95); }
.lsw-now-five { display:flex; flex-wrap:wrap; align-items:center; gap:6px 6px; font:500 12.5px/1.2 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lel-five { display:inline-flex; align-items:center; gap:5px; }
.lel-five i { width:12px; height:8px; border-radius:3px; display:inline-block; }
.lel-arrow { color:var(--dim); font-size:11px; }

/* Lite reads only the graha-derived models (the user, 2026-09-21): Pro's switches for the
   chart-weighted and textbook swara, the classical tattva and the tattva schemes are gone */
.lite-app #seg-swaramodel, .lite-app [data-sm], .lite-app [data-tm], .lite-app [data-ts] { display:none !important; }
/* the two-ring figure: the element ring thin, just inside the nostril's; the number sized to
   the free middle so it and its % sign never meet a ring (the user, 2026-09-21) */
.ltune-ring.two .ltune-bg2 { stroke-width:4; }
.ltune-ring.two .ltune-fg2 { stroke-width:4; }
.ltune-ring.two b { font-size:25px; letter-spacing:-.02em; }
.ltune-ring.two b small { font-size:11px; margin-left:0; }
.ltune-ring.two b.w3 { font-size:20px; }
.lite-has-chart .litesum .lh-tiles .ltune-ring.two b { font-size:24px; }
.lite-has-chart .litesum .lh-tiles .ltune-ring.two b.w3 { font-size:19px; }
.lite-has-chart .litesum .lh-tiles.one .ltune-ring.two b { font-size:25px; }
.ltune-pair .ltune-ring.two b, .lite-has-chart .litesum .lh-tiles.two .ltune-ring.two b { font-size:22px; }
.ltune-pair .ltune-ring.two b.w3, .lite-has-chart .litesum .lh-tiles.two .ltune-ring.two b.w3 { font-size:18px; }
@media (max-width:360px) { .ltune-pair .ltune-ring.two b, .lite-has-chart .litesum .lh-tiles.two .ltune-ring.two b { font-size:19px; } }
.lsw-fig .ltune-ring.two b { font-size:21px; }

/* ==== LABELS ON THEIR OWN BANDS (the user, 2026-09-21) ==================================
   A label sat 14px above its band (its 5px margin and the 9px strip the "now" triangle
   needs) and close under the band before it, so it read as that band's. Now every label
   sits on its own band and a clear space parts one pair from the next — on home, in the
   sheets, in Diagnosis's Your day and in Realignment's Progress. */
.lband .lband-lab { margin:0 0 1px 2px; }
.lband .lband-hold { padding-top:6px; }
.lband .lband-tri { border-left-width:4px; border-right-width:4px; border-top-width:5px; margin-left:-4px; }
.lband .lband-hold + .lband-lab, .lal-bands .lband-hold + .lband-lab { margin-top:14px; }
.lband .lband-lab.you:first-child, .lband > .lband-lab:first-child { margin-top:0; }
.lite-has-chart .litesum .lh-card .lband .lband-hold + .lband-lab { margin-top:12px; }
.lband .lband-hold + .lband-axis { margin-top:7px; }

/* ==== THE RING CARDS' TWO VALUES, AS TWO SMALL STATS ==================================== */
.ltune-stats { display:grid; grid-template-columns:repeat(2, max-content); gap:0 16px; justify-content:inherit; }
.lite-has-chart .litesum .lh-tiles.two .ltune-stats { justify-content:center; }
.lite-has-chart .litesum .lh-tiles.one .ltune-stats, .lsw-fig .ltune-stats { justify-content:start; }
.lts { display:grid; gap:2px; }
.lts-k { display:inline-flex; align-items:center; gap:5px; font:600 8.5px/1.1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.lts-k i { width:6px; height:6px; border-radius:50%; display:inline-block; }
.lts.n .lts-k i { background:var(--brass-hi); }
.lts.e .lts-k i { background:#EADFC4; }
:root[data-theme="light"] .lts.e .lts-k i { background:#A88E55; }
.lts-v { font:500 14px/1.1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.lts-v small { font-size:9.5px; margin-left:1px; color:var(--ink-2); }
.lts.none .lts-v { color:var(--dim); }
.lite-has-chart .litesum .lh-tiles .ltune-txt { gap:6px; }
.lite-has-chart .litesum .lh-tiles.two .ltune-txt strong { font-size:14px; }

/* ==== THE DRAWER'S GRIP: centred in the peeking strip, and cueing "slide up" ============
   The line sat at the top of the strip; the strip is now the grip itself, so the line
   rides in its middle. With the drawer's own nudge (ldFlourish's .bob, every eight
   seconds) the line stretches and brightens — the same 1.22 s, so the two read as one
   gesture: this lifts. (The small brass chevron that rose above it is gone: the user,
   2026-09-22, "remove the yellow arrow, it is breaking the aesthetics".) */
.lite-has-chart .litedrawer[data-state="peek"] .litedrawer-top,
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])[data-state="peek"] .litedrawer-top { padding-bottom:0; }
.lite-has-chart .litedrawer[data-state="peek"] .litegrab { position:relative; height:46px; }
@keyframes litegripcue {
  0%, 100% { width:46px; opacity:.85; transform:translateY(0); }
  26% { width:64px; opacity:1; transform:translateY(-3px); }
  53% { width:48px; opacity:.9; transform:translateY(0); }
  74% { width:56px; opacity:1; transform:translateY(-1px); }
}
.lite-has-chart .litedrawer[data-state="peek"].bob .litegrab i { animation:litegripcue 1.22s var(--dr-ease) 1; }
@media (prefers-reduced-motion: reduce) {
  .lite-has-chart .litedrawer[data-state="peek"].bob .litegrab i { animation:none; }
}
/* the stats' own type, above the tile's older span rule (.ltune-txt span) */
.ltune-stats .lts { display:grid; gap:2px; }
.ltune-stats .lts-k { display:inline-flex; align-items:center; gap:5px; font:600 8.5px/1.1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.ltune-stats .lts-v { display:block; font:500 14px/1.1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.ltune-stats .lts-v small { font-size:9.5px; margin-left:1px; color:var(--ink-2); }
.ltune-stats .lts.none .lts-v { color:var(--dim); }
/* the two stats wrap on the narrowest phones rather than push the tile past the screen */
.ltune-stats { display:flex; flex-wrap:wrap; gap:4px 14px; }
.lite-has-chart .litesum .lh-tiles .ltune-txt, .lite-has-chart .litesum .lh-tiles .ltune { min-width:0; }
.lite-has-chart .litesum .lh-tiles.two .ltune-stats { justify-content:center; }
.lite-has-chart .litesum .lh-tiles.one .ltune-stats, .lsw-fig .ltune-stats { justify-content:flex-start; }
@media (max-width:320px) { .lite-has-chart .litesum .lh-tiles.one .ltune { gap:12px; padding:14px 14px; } .lite-has-chart .litesum .lh-tiles.one .ltune-ring { width:76px; height:76px; } }
/* the code's channel figure: its note on the thin strands (the cosmic day) */
.ldx-legend .ldx-k-thin { font-size:11px; color:var(--dim); font-style:italic; }

/* ==== THE CODE ON ITS OWN (the user, 2026-09-21) =========================================
   Diagnosis reads the kundali's swara and element code against the cosmic rhythm with no
   check needed. Its witness wears the code's own blue (--ldx-c) wherever it speaks alone. */
.by-code .ldx-pill { color:var(--ldx-c); background:color-mix(in srgb, var(--ldx-c) 13%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-c) 38%, transparent); }
.lst-find.by-code { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-c) 30%, transparent); }
.lst-find.by-code .lst-find-ic svg { stroke:var(--ldx-c); }
.ldx-mrow.by-code { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-c) 22%, transparent); }
/* the hero's second line: what the code carries */
/* WHAT YOUR BREATH SHOWS, AS ONE PICTURE (the user, 2026-10-01: "more clear, concise and impactful … professional"):
   the headline, then a grid — each finding a row, the three witnesses columns in their own colours (your breath the
   Diagnosis breath hue, your Swara Code its code hue, your birth chart a gold ring, as Meaning marks them). A full dot
   where a witness shows it, a soft one where the sign is faint; "2 of 3" where two agree. */
.lsx-hero { gap:12px; container:lsx / inline-size; }
.lsx-top { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.lsx-span { font:500 11.5px/1.2 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }
.lsx { display:grid; gap:2px; margin:2px -6px 0; }
.lsx-hdr, .lsx-row { display:grid; grid-template-columns:minmax(0, 1fr) repeat(3, 54px) 14px; align-items:center; column-gap:2px; }
.lsx-hdr { padding:0 10px 8px; border-bottom:1px solid color-mix(in srgb, var(--ink) 9%, transparent); margin-bottom:4px; }
.lsx-hdr > span { display:grid; justify-items:center; gap:3px; font:600 9px/1.1 var(--body); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); text-align:center; }
.lsx-hdr > span small { font:500 9px/1.1 var(--body); letter-spacing:.06em; text-transform:none; color:var(--dim); }
.lsx-hdr > span i { width:7px; height:7px; margin-bottom:2px; border-radius:50%; background:var(--w); }
.lsx-hdr > .w-h i { background:none; box-shadow:inset 0 0 0 1.5px var(--w); }
.lsx-hdr > .lsx-hn { justify-items:start; text-align:left; font:500 11px/1.3 var(--body); letter-spacing:normal; text-transform:none; color:var(--dim); }
.lsx-hdr .w-b, .lsx-c.w-b { --w:var(--ldx-b); }
.lsx-hdr .w-c, .lsx-c.w-c { --w:var(--ldx-c); }
.lsx-hdr .w-h, .lsx-c.w-h { --w:var(--brass-hi); }
.lsx-row { min-height:44px; padding:6px 10px; border:0; border-radius:12px; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background .18s; }
.lsx-row:nth-of-type(even) { background:color-mix(in srgb, var(--ink) 2.6%, transparent); }
.lsx-row.agree { background:color-mix(in srgb, var(--brass-hi) 6%, transparent); }
.lsx-row:hover { background:color-mix(in srgb, var(--ink) 7%, transparent); }
.lsx-row:focus-visible { outline:2px solid var(--brass-hi); outline-offset:-2px; }
.lsx-n { display:flex; flex-wrap:wrap; align-items:center; gap:3px 8px; min-width:0; }
.lsx-n b { font:500 13.5px/1.3 var(--body); color:var(--ink); }
.lsx-n em { padding:3px 7px; border-radius:999px; font:600 9px/1 var(--body); font-style:normal; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 14%, transparent); }
.lsx-c { display:grid; place-items:center; height:26px; }
.lsx-c i { display:block; width:13px; height:13px; border-radius:50%; }
.lsx-c.on i { background:var(--w); box-shadow:0 0 0 3.5px color-mix(in srgb, var(--w) 17%, transparent); }
.lsx-c.faint i { width:10px; height:10px; background:color-mix(in srgb, var(--w) 42%, transparent); }
/* the birth chart is a ring, as "In your birth chart" is on every body map — so it never reads as the breath's gold */
.lsx-c.w-h.on i { width:14px; height:14px; background:none; box-shadow:inset 0 0 0 3px var(--w), 0 0 0 3.5px color-mix(in srgb, var(--w) 14%, transparent); }
.lsx-c.w-h.faint i { width:12px; height:12px; background:none; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--w) 65%, transparent); }
.lsx-c.off i { width:5px; height:5px; background:color-mix(in srgb, var(--ink) 20%, transparent); }
.lsx-c.na i { width:11px; height:2px; border-radius:1px; background:color-mix(in srgb, var(--ink) 22%, transparent); }
.lsx-c.wait i { width:11px; height:11px; background:none; box-shadow:inset 0 0 0 1.4px color-mix(in srgb, var(--ink) 34%, transparent); }
.lsx-chev { width:14px; height:14px; fill:none; stroke:var(--dim); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lsx-row:hover .lsx-chev { stroke:var(--ink-2); }
.lsx-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; }
.lsx-key { display:flex; flex-wrap:wrap; gap:6px 14px; font:500 11px/1.2 var(--body); color:var(--dim); }
.lsx-key > span { display:inline-flex; align-items:center; gap:6px; }
.lsx-key i { width:9px; height:9px; border-radius:50%; }
.lsx-key i.on { background:var(--ink-2); }
.lsx-key i.faint { width:8px; height:8px; background:color-mix(in srgb, var(--ink-2) 42%, transparent); }
.lsx-key i.ring { box-shadow:inset 0 0 0 2.2px var(--brass-hi); }
.lsx-key i.wait { box-shadow:inset 0 0 0 1.4px color-mix(in srgb, var(--ink) 34%, transparent); }
.lsx-more { min-height:32px; padding:0 14px; border:0; border-radius:999px; cursor:pointer; font:600 12px/1 var(--body); color:var(--ink);
  background:color-mix(in srgb, var(--ink) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 11%, transparent); }
.lsx-more:hover { background:color-mix(in srgb, var(--ink) 11%, transparent); }
.lsx-more:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
/* a narrow card keeps the three columns and lets the names wrap */
@container lsx (max-width:360px) { .lsx-hdr, .lsx-row { grid-template-columns:minmax(0, 1fr) repeat(3, 44px) 12px; } .lsx-n b { font-size:13px; } }
@container lsx (max-width:290px) { .lsx-hdr, .lsx-row { grid-template-columns:minmax(0, 1fr) repeat(3, 36px) 10px; } .lsx-hdr > span { letter-spacing:.06em; } }
.lst-codeline { display:grid; gap:5px; width:100%; margin:0; padding:11px 13px; border:0; border-radius:15px; cursor:pointer; text-align:left; font:inherit; color:var(--ink);
  background:color-mix(in srgb, var(--ldx-c) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-c) 26%, transparent);
  transition:background .2s; -webkit-tap-highlight-color:transparent; }
.lst-codeline:hover { background:color-mix(in srgb, var(--ldx-c) 13%, transparent); }
.lst-codeline:focus-visible { outline:2px solid var(--ldx-c); outline-offset:2px; }
.lst-codeline-k { display:inline-flex; align-items:center; gap:6px; font:600 9.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ldx-c); }
.lst-codeline-k i { display:inline-block; width:14px; height:5px; border-radius:3px; }
.lst-codeline-k i.n { background:linear-gradient(90deg, var(--soma) 0 50%, var(--sindoor) 50% 100%); }
.lst-codeline-k i.e { margin-right:3px; background:linear-gradient(90deg, #6AA5CF 0 20%, #D2472C 20% 40%, #D9B23A 40% 60%, #E3DCCB 60% 80%, #B386D6 80% 100%); }
.lst-codeline-t { font:400 15px/1.35 var(--body); color:var(--ink); text-wrap:pretty; }
.lst-codeline.k-none .lst-codeline-t, .lst-codeline.k-some .lst-codeline-t { color:var(--ink-2); }
/* Your day: your code against the cosmic rhythm */
.ldx-codeday { gap:14px; }
.ldx-codeday .lal-facts { margin:0; }
.ldx-codeday .ldx-sec { display:grid; gap:8px; }
.ldx-clist { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.ldx-crow { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; width:100%; padding:11px 12px; border:0; border-radius:15px; cursor:pointer;
  text-align:left; font:inherit; color:var(--ink); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); transition:background .2s; -webkit-tap-highlight-color:transparent; }
.ldx-crow:hover { background:var(--st-tile-hi); }
.ldx-crow:focus-visible { outline:2px solid var(--ldx-c); outline-offset:2px; }
.ldx-crow.on { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-c) 32%, transparent); }
.ldx-crow.on .ldx-pill { color:var(--ldx-c); background:color-mix(in srgb, var(--ldx-c) 13%, transparent); }
.ldx-crow.pos.on .ldx-pill { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.ldx-crow-ic svg { display:block; width:20px; height:20px; fill:none; stroke:var(--ldx-c); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ldx-crow:not(.on) .ldx-crow-ic svg { stroke:var(--dim); }
.ldx-crow-tx { display:grid; gap:3px; min-width:0; }
.ldx-crow-tx b { font:500 13.5px/1.3 var(--body); text-wrap:balance; }
.ldx-crow-tx em { font:400 11.5px/1.4 var(--body); font-style:normal; color:var(--ink-2); }
/* Realign: what the code itself carries, beside the corrections */
.lra-owncode { display:grid; gap:6px; justify-items:start; padding:12px 13px; border-radius:15px;
  background:color-mix(in srgb, var(--ldx-c) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-c) 24%, transparent); }
.lra-owncode .lra-k { color:var(--ldx-c); }
.lra-owncode p { margin:0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.ldx-chipbtn.by-code i { background:var(--ldx-c); box-shadow:none; }
/* the Your day code card sits outside .ldx-card, so it carries the code's colour itself */
.ldx-codeday { --ldx-c:#7FB6CF; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ldx-codeday { --ldx-c:#2C6D8A; } }
:root[data-theme="light"] .ldx-codeday { --ldx-c:#2C6D8A; }

/* ==== IN TUNE, REDRAWN (the user, 2026-09-21) ================================================
   One quiet card and a compact ring per reading: a thin double arc (the side outside, the
   element inside), the side's figure in the middle, then what it is set against and the
   element's figure. No glow; the accent lives in the arc and the name. */
.lsync { --sync-el:#EADFC4; display:grid; gap:12px; min-width:0; margin:0; padding:14px 14px 12px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), var(--st-card);
  box-shadow:inset 0 0 0 1px var(--st-line-soft), 0 26px 50px -40px rgba(0,0,0,.9); }
:root[data-theme="light"] .lsync { --sync-el:#A88E55; background:#FFFFFF; box-shadow:inset 0 0 0 1px var(--st-line-soft), 0 1px 2px rgba(70,52,20,.05), 0 14px 30px -24px rgba(70,52,20,.16); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lsync { --sync-el:#A88E55; background:#FFFFFF; box-shadow:inset 0 0 0 1px var(--st-line-soft), 0 1px 2px rgba(70,52,20,.05), 0 14px 30px -24px rgba(70,52,20,.16); } }
.lsync-k { padding:0 4px; font:600 10px/1.2 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.lsync-grid { display:grid; grid-template-columns:minmax(0, 1fr); }
.lsync.n2 .lsync-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.lsync.n2 .lsync-item + .lsync-item { box-shadow:inset 1px 0 0 var(--st-line-soft); border-radius:0 16px 16px 0; }
.lsync-item { --sync-acc:var(--brass-hi); position:relative; display:grid; justify-items:center; align-content:start; gap:10px; min-width:0; margin:0; padding:6px 6px 8px;
  border:0; border-radius:16px; background:transparent; color:var(--ink); font:inherit; text-align:center; cursor:pointer;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; transition:background .2s ease; }
.lsync-item.own { --sync-acc:var(--jade); }
div.lsync-item { cursor:default; }
button.lsync-item:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
button.lsync-item:active { background:color-mix(in srgb, var(--ink) 7%, transparent); }
.lsync-item:focus-visible { outline:2px solid var(--sync-acc); outline-offset:1px; }
.lsync.n1 .lsync-item { grid-template-columns:auto minmax(0, 1fr); justify-items:start; align-items:center; gap:16px; text-align:left; }
.lsync-ring { position:relative; display:grid; place-items:center; width:84px; height:84px; }
.lsync-ring svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.lsync-ring circle { fill:none; stroke-width:3; }
.lsync-ring .t { stroke:color-mix(in srgb, var(--ink) 9%, transparent); }
.lsync-ring .a { stroke:var(--sync-acc); stroke-linecap:round; }
.lsync-ring .a2 { stroke:var(--sync-el); stroke-linecap:round; opacity:.9; }
.lsync-c { position:relative; display:grid; justify-items:center; gap:3px; }
.lsync-c b { font:300 23px/1 var(--display); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.lsync-c b.w3 { font-size:19px; }
.lsync-c b small { position:relative; top:-.62em; margin-left:1px; font-size:.46em; font-weight:500; color:var(--sync-acc); }
.lsync-c em { font:600 7px/1 var(--body); font-style:normal; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.lsync-txt { display:grid; justify-items:inherit; gap:4px; min-width:0; }
.lsync-txt b { display:inline-flex; align-items:center; gap:2px; font:400 15px/1.2 var(--display); color:var(--sync-acc); text-wrap:balance; }
.lsync-chev { flex:0 0 auto; width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
.lsync-txt em { display:inline-flex; align-items:center; gap:6px; font:500 11.5px/1.2 var(--body); font-style:normal; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lsync-txt em i { width:6px; height:6px; border-radius:50%; background:var(--sync-el); }
/* inside a sheet: the same ring, no second card around it */
.lsync.in-sheet { padding:10px 10px 8px; background:transparent; box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lsync.in-sheet .lsync-k { display:none; }
.lsync-foot { margin:-6px 0 0; font:400 12px/1.4 var(--body); color:var(--dim); text-align:center; }
@media (max-width:340px) {
  .lsync { padding:12px 10px 10px; }
  .lsync-ring { width:72px; height:72px; }
  .lsync-c b { font-size:20px; } .lsync-c b.w3 { font-size:17px; }
  .lsync-txt b { font-size:13.5px; }
  .lsync.n1 .lsync-item { gap:12px; }
}
@media (prefers-reduced-motion: reduce) { .lsync-item { transition:none; } }
/* the name flows with its chevron; a faint well inside the ring gives it depth, not glow */
.lsync-txt b { display:block; }
.lsync-chev { display:inline-block; vertical-align:-1px; margin-left:3px; }
.lsync-ring::before { content:""; position:absolute; inset:17%; border-radius:50%;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--sync-acc) 11%, transparent), transparent 72%); }

/* ==== THE DRAWER AS MISTED GLASS (the user, 2026-09-21: "misted and translucent
   glassmorphic with slightly higher transparency") =================================
   The sheet's ground turns to frosted glass in every mode: a translucent tint over a
   28px blur, a soft haze of light along the top edge, and a very faint grain for the
   mist. The brass hairline and each stage's accent glow stay as they were.
   2026-09-22, the user: "decrease the transparency slightly more" and a "grainier and coarse" ground —
   the tint ten points more opaque in both themes; the grain three times as strong (.14), and then — "decrease the size of grains" — finer
   again (.78, three octaves), dark specks on the light theme where white ones vanish. */
.lite-has-chart .litedrawer {
  --dr-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --dr-glass:linear-gradient(180deg, rgba(14,13,19,.68) 0%, rgba(9,9,13,.76) 420px, rgba(5,5,8,.84) 100%);
  --dr-mist:linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 200px, rgba(255,255,255,0) 460px);
}
:root[data-theme="light"].lite-has-chart .litedrawer {
  --dr-glass:linear-gradient(180deg, rgba(252,250,246,.70) 0%, rgba(248,245,239,.78) 420px, rgba(244,240,233,.86) 100%);
  --dr-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --dr-mist:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 200px, rgba(255,255,255,0) 460px);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]).lite-has-chart .litedrawer {
    --dr-glass:linear-gradient(180deg, rgba(252,250,246,.70) 0%, rgba(248,245,239,.78) 420px, rgba(244,240,233,.86) 100%);
    --dr-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --dr-mist:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 200px, rgba(255,255,255,0) 460px);
  }
}
.lite-has-chart .litedrawer::before,
:root[data-theme="light"].lite-has-chart .litedrawer::before {
  background:
    var(--dr-grain),
    radial-gradient(120% 90px at 50% 0%, rgba(246,222,147,.12), transparent 70%),
    var(--dr-mist),
    var(--dr-glass);
  -webkit-backdrop-filter:blur(28px) saturate(1.45); backdrop-filter:blur(28px) saturate(1.45);
}
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])::before {
  background:
    linear-gradient(90deg, transparent 6%, rgba(var(--acc-rgb), .75) 50%, transparent 94%) top / 100% 1px no-repeat,
    var(--dr-grain),
    radial-gradient(1200px 440px at 50% -210px, rgba(var(--acc-rgb), .18), transparent 72%),
    radial-gradient(560px 420px at 0% -80px, rgba(var(--acc-rgb), .06), transparent 72%),
    radial-gradient(560px 420px at 100% -80px, rgba(143,134,214,.06), transparent 72%),
    var(--dr-mist),
    var(--dr-glass);
  -webkit-backdrop-filter:blur(28px) saturate(1.45); backdrop-filter:blur(28px) saturate(1.45);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  /* no blur to mist it: keep the sheet solid enough to read */
  .lite-has-chart .litedrawer { --dr-glass:linear-gradient(180deg, rgba(14,13,19,.94), rgba(5,5,8,.97)); }
}
/* the eyebrow: TODAY, in the code card's brass, then what the rings are in tune with */
.lsync-k { display:inline-flex; align-items:center; gap:8px; }
.lsync-k b { font-weight:600; color:rgba(var(--acc-rgb), .95); }
.lsync-k i { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }
/* a coarser ground for the In tune card (the user, 2026-09-21): a visible grain over the tint */
.lsync {
  --sync-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background:var(--sync-grain), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), var(--st-card);
}
:root[data-theme="light"] .lsync {
  --sync-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background:var(--sync-grain), #FFFFFF;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lsync {
    --sync-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background:var(--sync-grain), #FFFFFF;
  }
}
.lsync.in-sheet { background:transparent; }

/* ==== THE ORGANS (the user, 2026-09-21) ========================================================
   Where a strain map falls, organ by organ: a quiet list with hairline rules, a dot for strained
   or under load, the body's systems as small chips, and the verses behind each organ on opening. */
.ldx-organs { display:grid; gap:10px; min-width:0; }
.ldx-syschips { display:flex; flex-wrap:wrap; gap:6px; }
.ldx-sys { display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:999px; font:600 11px/1.1 var(--body); color:var(--ink);
  background:color-mix(in srgb, var(--ink) 5%, transparent); box-shadow:inset 0 0 0 1px var(--st-line-soft, rgba(255,255,255,.08)); }
.ldx-sys i { width:7px; height:7px; border-radius:50%; background:var(--ldx-load); }
.ldx-sys.b-strain i { background:var(--ldx-strain); box-shadow:0 0 6px color-mix(in srgb, var(--ldx-strain) 60%, transparent); }
.ldx-orglist { display:grid; }
.ldx-org { border-top:1px solid var(--st-line-soft, rgba(255,255,255,.08)); }
.ldx-orglist > .ldx-org:last-child { border-bottom:1px solid var(--st-line-soft, rgba(255,255,255,.08)); }
.ldx-org-hd { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:start; gap:10px; width:100%; padding:11px 2px; border:0; background:transparent;
  font:inherit; color:var(--ink); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ldx-org-hd:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:10px; }
.ldx-org-dot { width:9px; height:9px; margin-top:5px; border-radius:50%; background:var(--ldx-load); }
.ldx-org.b-strain .ldx-org-dot { background:var(--ldx-strain); box-shadow:0 0 8px color-mix(in srgb, var(--ldx-strain) 60%, transparent); }
.ldx-org-tx { display:grid; gap:3px; min-width:0; }
.ldx-org-tx b { font:500 14.5px/1.25 var(--body); color:var(--ink); }
.ldx-org-tx b em { margin-left:6px; font:600 9.5px/1 var(--body); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.ldx-org-sys { font:600 9.5px/1.2 var(--body); letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb, var(--brass-hi) 70%, var(--dim)); }
.ldx-org-say { font:400 12.5px/1.4 var(--body); color:var(--ink-2); text-wrap:pretty; }
.ldx-org-wit { display:flex; flex-wrap:wrap; gap:4px 8px; }
.ldx-org-wit i { font:500 10.5px/1.2 var(--body); font-style:normal; color:var(--dim); }
.ldx-org-wit i::before { content:''; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; vertical-align:1px; background:currentColor; }
.ldx-org-wit i.w-code { color:var(--ldx-c); } .ldx-org-wit i.w-breath { color:var(--ldx-b); } .ldx-org-wit i.w-gap { color:var(--ldx-strain); }
.ldx-org .ldx-pill { margin-top:1px; }
.ldx-org.b-strain .ldx-pill { color:var(--ldx-strain); background:color-mix(in srgb, var(--ldx-strain) 14%, transparent); }
.ldx-org.b-load .ldx-pill { color:color-mix(in srgb, var(--ldx-load) 85%, var(--ink)); background:color-mix(in srgb, var(--ldx-load) 12%, transparent); }
.ldx-org-bd { display:grid; gap:10px; padding:0 2px 12px 21px; }
.ldx-org-ev li { font-size:12.5px; }
.ldx-org-ev cite { font-style:normal; font-size:11px; color:var(--dim); white-space:nowrap; }
.ldx-org-class { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font:600 9.5px/1.5 var(--body); letter-spacing:.06em; color:var(--dim);
  background:color-mix(in srgb, var(--ink) 6%, transparent); }
.ldx-org-lit { justify-self:start; padding:6px 12px; border:0; border-radius:999px; font:600 11.5px/1 var(--body); color:var(--ink); cursor:pointer;
  background:color-mix(in srgb, var(--ink) 7%, transparent); }
.ldx-org-lit.on { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.ldx-org.lit .ldx-org-tx b { color:var(--brass-hi); }
.lst-organs { gap:12px; }
.lst-organs .lal-title { margin:-4px 0 0; }
.ldx-sys-organs { margin:6px 0 0; font:400 12.5px/1.4 var(--body); color:var(--ink-2); }
.ldx-sys-organs b { font-weight:600; color:var(--ink); }
.lra-fixcard .ldx-organs { padding-top:4px; }
/* who carries an organ: your code (its blue), your breath (gold), both, or the difference */
.ldx-org.by-code .ldx-pill { color:var(--ldx-c); background:color-mix(in srgb, var(--ldx-c) 13%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-c) 34%, transparent); }
.ldx-org.by-breath .ldx-pill { color:var(--ldx-b); background:color-mix(in srgb, var(--ldx-b) 13%, transparent); }
.ldx-org.by-both .ldx-pill { color:#fff; background:linear-gradient(90deg, color-mix(in srgb, var(--ldx-c) 80%, #000), color-mix(in srgb, var(--ldx-b) 80%, #000)); }
.ldx-org.by-gap .ldx-pill { color:var(--ldx-strain); background:color-mix(in srgb, var(--ldx-strain) 13%, transparent); }
.ldx-org-sys { text-transform:none; letter-spacing:.02em; font-size:11px; }
.ldx-org.b-strain .ldx-org-sys { color:color-mix(in srgb, var(--ldx-strain) 80%, var(--ink)); }
/* the hero: the organs the code loads, under what it carries */
.lst-codeline-o { font:400 12.5px/1.4 var(--body); color:var(--ink-2); }
/* Meaning: each level's organs, and each row's organs in sight */
.ldx-level-organs { margin:2px 0 14px; padding:12px 12px 4px; border-radius:16px; background:color-mix(in srgb, var(--ink) 3%, transparent); box-shadow:inset 0 0 0 1px var(--st-line-soft, rgba(255,255,255,.07)); }
.ldx-mrow-organs { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 10px; font:400 12px/1.4 var(--body); color:var(--ink-2); }
.ldx-mrow-organs em { font:600 9.5px/1.2 var(--body); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--ldx-strain) 70%, var(--dim)); }
.ldx-mrow-organs span i { font-style:normal; font-size:10.5px; color:var(--dim); }
.ldx-mrow-organs .by-code i { color:var(--ldx-c); } .ldx-mrow-organs .by-breath i { color:var(--ldx-b); } .ldx-mrow-organs .by-gap i { color:var(--ldx-strain); }
.lra-owncode .ldx-organs { width:100%; }
.ldx-codeday .ldx-organs .ldx-sec-k { display:block; }
/* the chart as a witness, and what realigning can reach */
.ldx-org.by-chart .ldx-pill { color:var(--brass-hi); background:transparent; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 45%, transparent); }
.ldx-org.by-mix .ldx-pill { color:var(--ink); background:linear-gradient(90deg, color-mix(in srgb, var(--ldx-c) 26%, transparent), color-mix(in srgb, var(--brass-hi) 26%, transparent)); }
.ldx-org.by-reach .ldx-pill { color:var(--jade); background:color-mix(in srgb, var(--jade) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 36%, transparent); }
.ldx-org.by-part .ldx-pill { color:color-mix(in srgb, var(--jade) 70%, var(--ink)); background:color-mix(in srgb, var(--jade) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 22%, transparent); }
.ldx-org-chart, .ldx-org-note { font:400 11.5px/1.4 var(--body); color:var(--ink-2); }
.ldx-org-chart em { margin-right:6px; font:600 9.5px/1.2 var(--body); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb, var(--brass-hi) 80%, var(--dim)); }
.ldx-org-note { color:var(--dim); font-style:italic; }
.ldx-org-chartwhy { margin:0; font:400 12px/1.45 var(--body); color:var(--ink-2); }
.ldx-reach { display:grid; gap:16px; }
.ldx-mrow-organs .by-chart i { color:var(--brass-hi); } .ldx-mrow-organs .by-mix i { color:var(--ink); }
.lst-codeline-o em { margin-right:6px; font:600 9.5px/1.2 var(--body); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--ldx-c); }

/* ==== THE RECORD, BACKED UP AND RESTORED (the user, 2026-09-22) =============================
   Download and restore side by side; a file being restored shows what it holds before
   anything is written. */
.lal-dbactions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.lal-dbactions .lal-dbexport { justify-self:auto; }
.lrec-restore { display:grid; gap:6px; padding:14px 16px; border-radius:18px; text-align:left;
  background:color-mix(in srgb, var(--brass-hi) 6%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 26%, transparent); }
.lrec-restore p { margin:0; font:400 13px/1.45 var(--body); color:var(--ink-2); }
.lrec-restore b { font-weight:600; color:var(--ink); }
.lrec-restore .lal-k { color:color-mix(in srgb, var(--brass-hi) 80%, var(--dim)); }
.lrec-restore-n { font-size:15px !important; color:var(--ink) !important; }
.lrec-restore-who em { font-style:normal; color:var(--dim); }
.lrec-restore-go { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.lrec-restore-go .lal-dbexport { justify-self:auto; }
.lal-dbexport.lrec-go { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:none; }
.lal-dbexport.lrec-go:hover { color:#1B1406; box-shadow:0 0 0 2px color-mix(in srgb, var(--brass-hi) 40%, transparent); }
.lrec-restore-note { font-size:11.5px !important; color:var(--dim) !important; }
.lrec-restore.err { background:color-mix(in srgb, var(--sindoor) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 32%, transparent); }
.lrec-restore.ok { background:color-mix(in srgb, var(--jade) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 32%, transparent); }
.lrec-restore.ok p { display:flex; align-items:center; gap:8px; color:var(--ink); }
.lrec-restore.ok .lfl-tick { width:16px; height:16px; fill:none; stroke:var(--jade); stroke-width:2; }

/* ==== BOTH SIDES OPEN (the user, 2026-09-22) ================================================
   How the two sides flow, in four pictures; each side's flow, mark and reach as two quiet rows;
   and Quick's one-tap follow-up after "Both". */
.lal-tiles.both { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.lal-tiles.both .lal-tile { min-height:92px; gap:5px; }
.lal-tiles.both .lal-tile em { font:400 11px/1.25 var(--body); font-style:normal; color:var(--dim); }
.lal-tiles.both .lal-tile.on em { color:var(--ink-2); }
.lal-tiles.both .lal-sides { grid-column:1 / -1; }
.lal-tiles.sides { display:block; }
.lal-sides { display:grid; gap:10px; padding-top:6px; }
.lal-sides > .lal-k { font-size:10px; }
.lal-siderow { display:grid; grid-template-columns:44px minmax(0, 1fr); align-items:center; gap:8px; }
.lal-side-k { font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lal-siderow .lal-chip { display:inline-flex; align-items:center; gap:6px; padding:0 12px; }
.lal-shp .sdico { width:16px; height:16px; }
.lal-shp { display:inline-flex; }
/* Quick: after "Both", how do they flow? */
.lal-bothq { display:grid; gap:8px; margin:0 0 12px; padding:12px; border-radius:18px;
  background:color-mix(in srgb, var(--brass-hi) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 26%, transparent); }
.lal-bothq-k { font:600 10px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb, var(--brass-hi) 85%, var(--dim)); }
.lal-bothq-row { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; }
.lal-bothq-row button { display:grid; justify-items:center; gap:4px; padding:8px 2px; border:0; border-radius:14px; cursor:pointer; font:500 11.5px/1.2 var(--body);
  color:var(--ink-2); background:var(--panel-2); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent); -webkit-tap-highlight-color:transparent; }
.lal-bothq-row button:hover { color:var(--ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 45%, transparent); }
.lal-bothq-row button:focus-visible, .lal-bothq-skip:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lal-bothq-row .sdico { width:26px; height:26px; }
.lal-bothq-skip { justify-self:end; padding:4px 8px; border:0; background:transparent; font:500 11.5px/1 var(--body); color:var(--dim); cursor:pointer; }
@media (max-width:340px) { .lal-bothq-row { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
/* History: how both flowed, under the nostril */
.lrec-both { display:block; margin-top:2px; font:400 10.5px/1.2 var(--body); font-style:normal; color:var(--dim); white-space:nowrap; }
/* the point's card: its organ, Sushruta's words and what its strain is made of */
.lzm-rows .lzm-sys { display:block; font-size:10.5px; color:var(--dim); }
.lzm-rows .lzm-cite { display:block; font-size:10.5px; color:var(--dim); }
/* the light band */
.ldx-sys.b-light i, .ldx-org.b-light .ldx-org-dot { background:color-mix(in srgb, var(--ldx-load) 55%, transparent); box-shadow:none; }
.ldx-org.b-light .ldx-pill { opacity:.9; }

/* ==== KAARYA WITH THE ELEMENT CODE AND YOUR BREATH (the user, 2026-09-22) ==================
   The graha-tattva code runs through every Kaarya page and the Time table, in the element
   colours the swara code uses everywhere (.lel-s). The breath you record decides the present
   in one card: check first, in tune, or realign — with the acts your breath suits. */
.lpr-elsw, .tst-elsw { display:inline-block; flex:0 0 auto; width:9px; height:9px; margin-right:6px; border-radius:3px; vertical-align:0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ground) 30%, transparent); }
.lpr-elsw.own { box-shadow:0 0 0 1.5px var(--jade); }
.lpr-fact b .lpr-elsw { width:10px; height:10px; }
.lpr-act em { display:inline-flex; align-items:center; justify-content:center; gap:0; }
.lpr-act em .lpr-elsw { width:8px; height:8px; margin-right:5px; }
.lpr-actkey { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:2px; font:500 11.5px/1 var(--body); color:var(--dim); }
.lpr-actkey span { display:inline-flex; align-items:center; }
.lkt-age { font:500 11.5px/1.3 var(--body); color:var(--dim); text-align:right; }
.lkt-go { margin-top:2px; }

/* the breath card */
.lite-has-chart .litedrawer[data-mode="predict"] .lkt-now.tuned { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 40%, transparent), var(--st-shadow); }
.lite-has-chart .litedrawer[data-mode="predict"] .lkt-now.realign { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 42%, transparent), var(--st-shadow); }
.lkt-now.tuned .lal-title { color:var(--jade); }
.lkt-now.realign .lal-title { color:var(--brass-hi); }
.lkt-pair { display:grid; gap:8px; }
.lkt-cmp { display:grid; grid-template-columns:68px minmax(0, 1fr) 18px minmax(0, 1fr); align-items:center; gap:4px 8px; padding:11px 12px; border-radius:15px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lkt-cmp.ok { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 38%, transparent); }
.lkt-cmp.no { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 40%, transparent); }
.lkt-k { font:600 10px/1.2 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lkt-cmp b { display:inline-flex; align-items:center; min-width:0; font:600 14.5px/1.2 var(--body); color:var(--ink); }
.lkt-cmp b small { margin-left:6px; font:500 11.5px/1.2 var(--body); color:var(--dim); }
.lkt-cmp .lkt-want { color:var(--ink-2); font-weight:500; }
.lkt-cmp.ok .lkt-want::after { content:"\2713"; margin-left:6px; color:var(--jade); }
.lkt-cmp.no .lkt-have { color:var(--brass-hi); }
.lkt-arrow { justify-self:center; width:8px; height:8px; border-top:1.6px solid var(--dim); border-right:1.6px solid var(--dim); transform:rotate(45deg); }
.lkt-cmp em { grid-column:2 / -1; font:400 12px/1.4 var(--body); font-style:normal; color:var(--dim); }
.lkt-unread { font-weight:500; color:var(--dim); }
.lkt-why { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.lkt-code { margin:0; font:400 12.5px/1.45 var(--body); color:var(--dim); }
.lkt-block { display:grid; gap:8px; padding-top:12px; border-top:1px solid var(--st-line-soft); }
.lkt-sub { font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--acc-rgb)); }
.lkt-again { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; }
.lkt-again p { flex:1 1 200px; margin:0; font:400 12.5px/1.45 var(--body); color:var(--dim); }
.lkt-suit .lpr-elsw { margin:0 2px 0 0; }
@media (max-width:360px) { .lkt-cmp { grid-template-columns:minmax(0, 1fr) 14px minmax(0, 1fr); } .lkt-cmp .lkt-k { grid-column:1 / -1; } }

/* Today: where the code puts the act's own element, under the day's score */
.lpr-ellane { position:relative; height:6px; margin-top:6px; border-radius:3px; background:color-mix(in srgb, var(--ink) 6%, transparent); overflow:hidden; }
.lpr-ellane i { position:absolute; top:0; bottom:0; border-radius:2px; }
.lpr-savkey i.lane { height:6px; }
.lkt-wel { display:inline-flex; align-items:center; }
.lkt-wel .lpr-elsw { width:8px; height:8px; margin-right:4px; }
.lpr-ttto { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding-top:10px; border-top:1px solid var(--st-line-soft); }
.lpr-ttto .lpr-k { font:600 10px/1.2 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lpr-tt.open > .lpr-k { font:600 10px/1.2 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lkt-rules .lpr-rulelist b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
@media (min-width:1000px) {
  .lpr-grid.kanow > .lkt-now { grid-column:1 / span 7; }
  .lpr-grid.kawhy > .lkt-rules { grid-column:1 / -1; }
}

/* the Time table: the element at each start, and the day's element code under the strip */
.tst-row em .tst-elsw { width:8px; height:8px; margin-right:5px; }
.tst-el { display:flex; align-items:baseline; gap:0; margin:0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.tst-el .tst-elsw { transform:translateY(1px); }
.tst-ellane { position:relative; height:6px; margin-top:5px; border-radius:3px; background:color-mix(in srgb, var(--ink) 6%, transparent); overflow:hidden; }
.tst-ellane i { position:absolute; top:0; bottom:0; }
.tst-key .tst-elkey { gap:2px; }
.tst-key .tst-elkey i { width:7px; height:7px; border-radius:2px; }
.tst-key .tst-elkey i:last-of-type { margin-right:4px; }
.tst-bpair em { display:flex; align-items:center; font:400 11.5px/1.2 var(--body); font-style:normal; color:var(--dim); }
.lkt-cols { display:grid; grid-template-columns:68px minmax(0, 1fr) 18px minmax(0, 1fr); gap:0 8px; padding:0 12px; margin-bottom:-2px;
  font:600 9.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
@media (max-width:360px) { .lkt-cols { display:none; } }

/* ==== EVERY PICKER IN THE STUDIO'S OWN FIELD AND SHEET (the user, 2026-09-22) ====================
   Each native select, time, date and date-time control in Lite is replaced on screen by the field the
   person form uses, opening the same sheet (ui-lite-pickers.js). Sized to where it sits. */
.lpk-auto { min-height:40px; padding:0 12px; border:1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius:12px;
  background:color-mix(in srgb, var(--ink) 4%, transparent); color:var(--ink); font:500 14px/1.2 var(--body); cursor:pointer; box-sizing:border-box; text-align:left; }
.lpk-auto:hover { border-color:color-mix(in srgb, rgb(var(--acc-rgb, 238, 201, 110)) 50%, transparent); }
.lpk-auto .lpk-v { flex:1 1 auto; text-align:left; }
.lpk-wheels.two { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.lpk-sheet.lpk-datetime .lpk-wheels + .lpk-wheels { margin-top:14px; }
.lpk-sheet.lpk-datetime .lpk-col { height:176px; }
.lpk-sheet.lpk-datetime .lpk-pad { height:66px; }
.lpk-sheet.lpk-datetime .lpk-band { bottom:66px; }
.lpk-grp { padding:14px 14px 4px; font:600 10px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--acc-rgb)); }
.lpk-grp:first-child { padding-top:4px; }
/* a time in a table row, and the "at" chip: compact */
.tst-time .lpk-auto { width:100%; min-height:30px; padding:0 6px; border-radius:8px; font:600 13px/1 var(--body); font-variant-numeric:tabular-nums; }
.tst-time .lpk-auto svg { width:12px; height:12px; }
.lpr-ttchip .lpk-auto { width:auto; min-height:0; padding:0 0 0 4px; border:0; background:none; font:600 12.5px/1 var(--body); color:inherit; gap:4px; }
.lpr-ttchip .lpk-auto svg { width:13px; height:13px; }
.tst-addrow .lpk-auto { flex:1 1 auto; min-width:0; width:auto; }
.tst-field .lpk-auto, label > .lpk-auto { width:100%; }

/* ==== GHATANA ON YOUR CODES (the user, 2026-09-22) ================================================
   The period's lustre (BPHS 76) and your code through it; what can move; better windows; Begin's good
   days and the minutes of your code; when inside the period, every reading side by side. */
.lgc-col { display:contents; }
.lpr-grid.ghnow > .lgc-col > * { grid-column:1 / -1; min-width:0; }
.lpr-grid.ghnow > .lgc-col > .lpr-ghnow { order:1; }
.lpr-grid.ghnow > .lgc-col > .lgc-period { order:2; }
.lpr-grid.ghnow > .lgc-col > .lgc-reach { order:3; }
.lpr-grid.ghnow > .lgc-col > .lpr-ghwhynow { order:4; }
.lpr-grid.ghnow > .lgc-col > .lpr-prep { order:5; }
.lpr-grid.ghnow > .lal-foot { order:6; }
.lgc-chlist { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.lgc-ch { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:4px 12px; padding:11px 12px; border-radius:15px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lgc-ch.good { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 32%, transparent); }
.lgc-ch.hard { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 32%, transparent); }
.lgc-role { grid-row:1 / span 2; min-width:34px; font:600 9.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lgc-ch b { display:inline-flex; align-items:center; gap:6px; font:600 14.5px/1.2 var(--body); color:var(--ink); }
.lgc-ch b em { display:inline-flex; align-items:center; font:500 12px/1 var(--body); font-style:normal; color:var(--ink-2); }
.lgc-ch p { grid-column:2; margin:0; font:400 12.5px/1.4 var(--body); color:var(--ink-2); }
.lgc-ch .lpr-tierpill { grid-row:1 / span 2; grid-column:3; }
.lgc-code { display:grid; gap:8px; padding-top:12px; border-top:1px solid var(--st-line-soft); }
.lgc-codehd { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.lgc-codehd .lpr-k { font:600 10px/1.2 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lgc-codehd b { display:inline-flex; align-items:center; font:500 13px/1.3 var(--body); color:var(--ink); }
.lgc-bar { display:flex; gap:2px; height:10px; border-radius:5px; overflow:hidden; }
.lgc-bar i { display:block; min-width:2px; }
.lgc-act { margin:0; font:500 13.5px/1.5 var(--body); color:var(--ink); }
.lgc-reachlist { display:grid; margin:0; padding:0; list-style:none; }
.lgc-reachlist li { display:grid; gap:4px; padding:12px 0; border-top:1px solid var(--st-line-soft); }
.lgc-reachlist li:first-child { border-top:0; padding-top:2px; }
.lgc-rhd { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lgc-rhd b { font:600 14px/1.3 var(--body); color:var(--ink); }
.lgc-reachlist p { margin:0; font:400 12.5px/1.5 var(--body); color:var(--ink-2); }
.lgc-reachlist .lst-link { justify-self:start; }
.lgc-hint { font:500 11.5px/1.3 var(--body); color:var(--dim); }
.lgc-betterlist { display:grid; margin:0; padding:0; list-style:none; }
.lgc-betterlist li { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:6px 10px; padding:12px 0; border-top:1px solid var(--st-line-soft); }
.lgc-betterlist li:first-child { border-top:0; padding-top:2px; }
.lgc-bwhen { display:grid; gap:2px; min-width:0; }
.lgc-bwhen b { font:600 15px/1.2 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lgc-bwhen em { font:400 12px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lgc-bchips { grid-column:1; display:flex; flex-wrap:wrap; gap:6px; }
.lgc-go { grid-column:2; grid-row:1 / span 2; }
.lgc-go svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.lgc-chip { padding:4px 9px; border-radius:999px; font:600 10.5px/1.2 var(--body); color:var(--ink-2); background:var(--st-tile-hi); white-space:nowrap; }
.lgc-chip.t-bright, .lgc-chip.c-with { color:var(--jade); background:color-mix(in srgb, var(--jade) 13%, transparent); }
.lgc-chip.t-dark, .lgc-chip.c-against { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 12%, transparent); }
.lgc-chip.t-mixed { color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 12%, transparent); }
.lgc-acttitle { margin-top:-4px; }
.lgc-actline { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:-6px; font:500 13px/1.4 var(--body); color:var(--ink); }
.lgc-actline span { display:inline-flex; align-items:center; }
.lgc-actline span:first-child { color:var(--dim); font-weight:400; }
.lgc-actline span:not(.lpr-src) + span:not(.lpr-src)::before { content:""; width:3px; height:3px; margin-right:8px; border-radius:50%; background:var(--dim); }
.lgc-winsk { margin:2px 0 -6px; }
.lgc-wins { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.lgc-wins::-webkit-scrollbar { display:none; }
.lgc-wins .lpr-ttchip { flex:0 0 auto; }
.lgc-daylist { display:grid; margin:0; padding:0; list-style:none; }
.lgc-daylist li { display:grid; gap:8px; padding:12px 0; border-top:1px solid var(--st-line-soft); }
.lgc-daylist li:first-child { border-top:0; padding-top:2px; }
.lgc-dhd { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.lgc-dhd b { min-width:92px; font:600 15px/1.2 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lgc-marks { display:flex; flex-wrap:wrap; gap:4px; }
.lgc-mk { padding:3px 8px; border-radius:999px; font:600 10.5px/1.2 var(--body); cursor:default; }
.lgc-mk.up { color:var(--jade); background:color-mix(in srgb, var(--jade) 12%, transparent); }
.lgc-mk.down { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 11%, transparent); }
.lgc-mins { display:flex; flex-wrap:wrap; gap:8px; }
.lgc-min { display:inline-flex; align-items:center; gap:8px; padding:4px 4px 4px 12px; border-radius:999px; background:var(--st-tile);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 30%, transparent); }
.lgc-min b { font:600 13.5px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lgc-min .lpr-elsw { margin:0; }
.lgc-min .lpr-winadd { width:28px; height:28px; }
.lpr-winadd.done { color:var(--jade); background:color-mix(in srgb, var(--jade) 20%, transparent); border-color:color-mix(in srgb, var(--jade) 50%, transparent); }
.lpr-winadd svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.lgc-wait, .lgc-aside { font:500 12px/1.4 var(--body); font-style:normal; color:var(--dim); }
.lgc-wait::before { content:""; display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:rgb(var(--acc-rgb));
  animation:lgcPulse 1.1s ease-in-out infinite; vertical-align:0; }
@keyframes lgcPulse { 50% { opacity:.25; } }
@media (prefers-reduced-motion: reduce) { .lgc-wait::before { animation:none; } }
.lgc-rules { padding-top:10px; border-top:1px solid var(--st-line-soft); }
.lgc-rules summary { cursor:pointer; font:600 12.5px/1.3 var(--body); color:rgb(var(--acc-rgb)); }
.lgc-rules .lpr-rulelist { margin-top:8px; }
.lgc-ttwrap { overflow-x:auto; }
.lgc-ttab { width:100%; border-collapse:collapse; font:400 12.5px/1.35 var(--body); }
.lgc-ttab th, .lgc-ttab td { padding:9px 8px; border-top:1px solid var(--st-line-soft); text-align:left; vertical-align:top; }
.lgc-ttab th, .lgc-ttab td, .lgc-ttab tr { background:transparent; position:static; }
.lgc-ttab tbody tr:hover { background:var(--st-tile); }
.lgc-ttab thead th { border-top:0; font:600 14px/1.2 var(--body); letter-spacing:0; text-transform:none; color:var(--ink); white-space:nowrap; }
.lgc-ttab thead th em { display:block; font:500 10px/1.2 var(--body); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lgc-ttab tbody th { font:600 10px/1.3 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
.lgc-ttab td b { display:block; font-weight:600; color:var(--ink); }
.lgc-ttab td em { font-style:normal; font-size:10.5px; color:var(--dim); }
.lgc-ttab td.off { color:var(--dim); }
@media (min-width:1000px) {
  .lpr-grid.ghnow > .lgc-col { display:grid; gap:18px; align-content:start; min-width:0; }
  .lpr-grid.ghnow > .lgc-col.a { grid-column:1 / span 7; }
  .lpr-grid.ghnow > .lgc-col.b { grid-column:8 / -1; }
  .lpr-grid.ghnow > .lgc-col > * { order:0; }
  .lpr-grid.ghlife > .lgc-better { grid-column:8 / -1; }
  .lpr-grid.ghbegin > .lgc-begin { grid-column:1 / span 5; }
  .lpr-grid.ghbegin > .lgc-days { grid-column:6 / -1; }
  .lpr-grid.ghwhy > .lgc-timing { grid-column:7 / -1; }
}
.lgc-barkey { display:flex; flex-wrap:wrap; gap:4px 14px; font:500 11.5px/1.3 var(--body); color:var(--ink-2); }
.lgc-barkey span { display:inline-flex; align-items:center; gap:0; }
.lgc-barkey b { margin-left:5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ==== THE STUDIO TOOLTIP (the user, 2026-09-22) — every title in the app, in the studio's bubble ==== */
.lpk-tip { position:fixed; left:0; top:0; z-index:9999; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;
  box-sizing:border-box; max-width:min(300px, calc(100vw - 16px)); padding:8px 12px; border-radius:12px; pointer-events:none;
  font:500 12.5px/1.4 var(--body); color:#EDE7DA; text-wrap:pretty;
  background:radial-gradient(140% 140% at 92% -30%, rgba(238,201,110,.14), transparent 60%), linear-gradient(180deg, #1B1A22, #0E0D12);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.92), inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0; transform:translateY(4px) scale(.98); transform-origin:50% 100%; transition:opacity .14s ease, transform .16s cubic-bezier(.22,.9,.24,1); }
.lpk-tip.below { transform:translateY(-4px) scale(.98); transform-origin:50% 0; }
.lpk-tip.in { opacity:1; transform:none; }
.lpk-tip em { font:600 10px/1.3 var(--body); font-style:normal; letter-spacing:.04em; color:rgba(238,201,110,.95);
  padding:2px 7px; border-radius:999px; background:rgba(238,201,110,.1); white-space:nowrap; }
:root[data-theme="light"] .lpk-tip { color:#2A2433;
  background:radial-gradient(140% 140% at 92% -30%, rgba(150,110,18,.1), transparent 60%), #FDFBF7;
  box-shadow:0 14px 34px -14px rgba(60,40,80,.45), inset 0 0 0 1px rgba(40,30,60,.12); }
:root[data-theme="light"] .lpk-tip em { color:#8A6410; background:rgba(150,110,18,.1); }
@media (prefers-reduced-motion: reduce) { .lpk-tip { transition:none; transform:none; } }
/* the dial's own hover card (#tip, on [data-tip]) in the same studio bubble — and never wider than the
   screen: at 430px on a 375px phone its clamp put it at -63px, cut off at the left edge */
.lite-app #tip { box-sizing:border-box; max-width:min(380px, calc(100vw - 16px)); padding:11px 14px 12px; border:0; border-radius:14px; color:#EDE7DA;
  background:radial-gradient(140% 120% at 92% -30%, rgba(238,201,110,.14), transparent 60%), linear-gradient(180deg, #1B1A22, #0E0D12);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.92), inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.08); }
.lite-app #tip b { margin-bottom:6px; font:400 16px/1.25 var(--display); letter-spacing:0; color:#F2D98C; }
.lite-app #tip span { font:400 12.5px/1.5 var(--body); color:rgba(237,231,218,.8); }
:root[data-theme="light"].lite-app #tip { color:#2A2433;
  background:radial-gradient(140% 120% at 92% -30%, rgba(150,110,18,.1), transparent 60%), #FDFBF7;
  box-shadow:0 16px 38px -16px rgba(60,40,80,.45), inset 0 0 0 1px rgba(40,30,60,.12); }
:root[data-theme="light"].lite-app #tip b { color:#8A6410; }
:root[data-theme="light"].lite-app #tip span { color:rgba(42,36,51,.78); }

/* ==== SETTINGS, IN THE STUDIO (the user, 2026-09-22) ================================================
   A card that drops from the header: the person sheet's surface and tokens, an eyebrow and a close
   disc, one display title, then three rows — a label with one quiet line, and a two-way switch whose
   lit thumb slides. The nine retired controls sit in .lset-retired, hidden (shell.html says why). */
.lite-app #drawer-settings { --acc-rgb:238, 201, 110; --st-card:rgba(255,255,255,.055); --st-tile:rgba(255,255,255,.045); --st-tile-hi:rgba(255,255,255,.07);
  --st-line:rgba(255,255,255,.12); --st-line-soft:rgba(255,255,255,.08);
  position:fixed; z-index:8700; top:calc(var(--lite-head, 72px) + 8px); left:0; right:0; box-sizing:border-box;
  width:min(calc(100% - 24px), 520px); max-height:calc(100dvh - var(--lite-head, 72px) - 24px); margin:0 auto; padding:0; overflow:auto; overscroll-behavior:contain;
  border:0; border-radius:26px; color:var(--ink);
  background:radial-gradient(120% 60% at 92% -10%, rgba(var(--acc-rgb), .12), transparent 60%), linear-gradient(180deg, #0F0E14, #07070A 60%, #050507);
  box-shadow:0 40px 90px -36px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:none; backdrop-filter:none; }
.lite-app #drawer-settings:not([hidden]) { animation:lsetIn .28s cubic-bezier(.22,.9,.24,1); }
@keyframes lsetIn { from { opacity:0; transform:translateY(-10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .lite-app #drawer-settings:not([hidden]) { animation:none; } }
:root[data-theme="light"].lite-app #drawer-settings { --acc-rgb:150, 110, 18; --st-card:#FFFFFF; --st-tile:rgba(40,30,60,.035); --st-tile-hi:rgba(40,30,60,.06);
  --st-line:rgba(40,30,60,.12); --st-line-soft:rgba(40,30,60,.08);
  background:radial-gradient(120% 60% at 92% -10%, rgba(var(--acc-rgb), .1), transparent 60%), linear-gradient(180deg, #FDFBF7, #F5F1EA);
  box-shadow:0 30px 70px -36px rgba(60,40,80,.5), inset 0 0 0 1px rgba(40,30,60,.1); }

.lite-app #drawer-settings .drawerhead { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 16px 0 22px; border:0; background:none; }
.lite-app #drawer-settings .drawerhead h2 { margin:0; font:600 10px/1.2 var(--body); letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--acc-rgb)); }
.lite-app #drawer-settings .drawerhead [data-close] { position:relative; flex:0 0 auto; width:34px; height:34px; min-height:0; padding:0; border-radius:50%;
  border:1px solid var(--st-line); background:var(--st-tile); color:var(--ink-2); font-size:0; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.lite-app #drawer-settings .drawerhead [data-close]::before,
.lite-app #drawer-settings .drawerhead [data-close]::after { content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; border-radius:1px; background:currentColor;
  transform:translate(-50%, -50%) rotate(45deg); }
.lite-app #drawer-settings .drawerhead [data-close]::after { transform:translate(-50%, -50%) rotate(-45deg); }
.lite-app #drawer-settings .drawerhead [data-close]:hover { color:#1B1406; background:rgb(var(--acc-rgb)); border-color:rgb(var(--acc-rgb)); }
.lite-app #drawer-settings .drawerhead [data-close]:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }

.lset { display:grid; gap:14px; padding:4px 22px 22px; }
.lset-title { margin:0; font:500 clamp(23px, 6.4vw, 28px)/1.12 var(--display); letter-spacing:-.015em; color:var(--ink); text-wrap:balance; }
.lset-list { display:grid; border-radius:20px; background:var(--st-card); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lset-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 250px); align-items:center; gap:10px 16px; padding:14px 14px 14px 18px; }
.lset-row + .lset-row { border-top:1px solid var(--st-line-soft); }
.lset-txt { display:grid; gap:3px; min-width:0; }
.lset-txt b { font:600 15px/1.25 var(--body); color:var(--ink); }
.lset-txt span { font:400 12.5px/1.4 var(--body); color:var(--dim); }
@media (max-width:520px) {
  .lset { padding:4px 14px 16px; }
  .lset-row { grid-template-columns:minmax(0, 1fr); padding:14px; }
}

/* the two-way switch: Pro's .seg ids and aria-pressed, the studio's look */
.lite-app #drawer-settings .lset-seg { position:relative; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0; width:100%; margin:0; padding:4px;
  border:0; border-radius:16px; background:linear-gradient(180deg, var(--st-tile-hi), var(--st-tile)); box-shadow:inset 0 0 0 1px var(--st-line-soft); overflow:visible; }
.lite-app #drawer-settings .lset-seg::before { content:""; position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 2); border-radius:12px;
  background:linear-gradient(180deg, rgba(var(--acc-rgb), .30), rgba(var(--acc-rgb), .12));
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .46), inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px -14px rgba(var(--acc-rgb), .85);
  transition:transform .4s cubic-bezier(.22,.9,.24,1); }
.lite-app #drawer-settings .lset-seg:has(> button:nth-child(2)[aria-pressed="true"])::before { transform:translateX(100%); }
.lite-app #drawer-settings .lset-seg button { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; height:40px;
  margin:0; padding:0 8px; border:0; border-radius:12px; background:none; box-shadow:none; cursor:pointer;
  font:500 13.5px/1 var(--body); letter-spacing:0; text-transform:none; color:var(--ink-2); white-space:nowrap; transition:color .25s; -webkit-tap-highlight-color:transparent; }
.lite-app #drawer-settings .lset-seg button:hover { color:var(--ink); background:none; }
.lite-app #drawer-settings .lset-seg button[aria-pressed="true"] { color:var(--ink); font-weight:600; background:none; }
.lite-app #drawer-settings .lset-seg button:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:-2px; }
.lite-app #drawer-settings .lset-seg svg { flex:0 0 auto; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
.lite-app #drawer-settings .lset-seg button[aria-pressed="true"] svg { opacity:1; stroke:rgb(var(--acc-rgb)); }
.lite-app #drawer-settings .lset-seg svg .dot { fill:currentColor; stroke:none; }
.lite-app #drawer-settings .lset-seg button[aria-pressed="true"] svg .dot { fill:rgb(var(--acc-rgb)); }
@media (prefers-reduced-motion: reduce) { .lite-app #drawer-settings .lset-seg::before { transition:none; } }
.lite-app #drawer-settings .lset-retired { display:none !important; }

/* ==== SCROLLBARS: every scroller in its own page's colour, over a clear track (the user, 2026-09-22:
   "all the vertical page scroll bar adapt to the theme color of their own page and remain transparent
   not to interfere") ==================================================================================
   One thin thumb everywhere — the page itself, the drawer, every sheet, every list — tinted by the
   surface's own accent (--acc-rgb: brass at home, each stage's hue in Record, Diagnosis, Realign), or
   the theme's brass where a surface has none; the track is clear, and the thumb brightens only while
   the pointer is over what scrolls. Zero specificity (:where), so a row that hides its scrollbar keeps
   hiding it. Chrome and Firefox take the standard properties; Safari, which lacks them, the -webkit rules. */
html.lite-app { --lsb-rgb:238, 201, 110; }
:root[data-theme="light"].lite-app { --lsb-rgb:138, 100, 16; }
:where(html.lite-app *):hover::-webkit-scrollbar-thumb { background-color:rgba(var(--acc-rgb, var(--lsb-rgb)), .55); }
/* Chrome draws the -webkit scrollbar only while no standard scrollbar property is set on an element (a thin
   standard bar on Windows carries arrow buttons), so the standard pair is for browsers without -webkit, and
   where Pro set "thin" it is unset here — its hidden rows keep ::-webkit-scrollbar { display:none }. */
@supports not selector(::-webkit-scrollbar) {
  :where(html.lite-app, html.lite-app *) { scrollbar-width:thin; scrollbar-color:rgba(var(--acc-rgb, var(--lsb-rgb)), .28) transparent; }
  :where(html.lite-app *):hover { scrollbar-color:rgba(var(--acc-rgb, var(--lsb-rgb)), .55) transparent; }
}
@supports selector(::-webkit-scrollbar) {
  html.lite-app .navbar, html.lite-app .tabs { scrollbar-width:auto; scrollbar-color:auto; }
}
:where(html.lite-app, html.lite-app *)::-webkit-scrollbar { width:8px; height:8px; background:transparent; }
:where(html.lite-app, html.lite-app *)::-webkit-scrollbar-track,
:where(html.lite-app, html.lite-app *)::-webkit-scrollbar-corner { background:transparent; }
:where(html.lite-app, html.lite-app *)::-webkit-scrollbar-button { display:none; width:0; height:0; }
:where(html.lite-app, html.lite-app *)::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:8px; background:rgba(var(--acc-rgb, var(--lsb-rgb)), .3) padding-box; }
:where(html.lite-app, html.lite-app *)::-webkit-scrollbar-thumb:hover { background-color:rgba(var(--acc-rgb, var(--lsb-rgb)), .6); }
/* NO SCROLLBAR ON AN OVERLAY CARD (the user, 2026-10-18: "There should be No overlay card should have vertical scrollbar shown. It should
   be hidden without affecting the scrolling of the page"): every sheet, pop-up and overlay card still scrolls by touch, wheel and keys,
   with no bar drawn; the page's own scrolling (the drawer, the page) keeps its bar above */
html.lite-app :is(.inspector.sheet, .combopop, #drawer-person, #drawer-settings, .tstwrap .tst, .tmtsheet, .lpk-sheet, .lal-alertholder > .lra-alert, .ltd-tl-box, .lmm-ask, .lmm-body, .lmm-shapebody, .lmk-body, .lmk-inv, .mk3-famlist, .btsheet, .bts-body, .lrb-card, .mkc-vlangs) { scrollbar-width:none; -ms-overflow-style:none; }
html.lite-app :is(.inspector.sheet, .combopop, #drawer-person, #drawer-settings, .tstwrap .tst, .tmtsheet, .lpk-sheet, .lal-alertholder > .lra-alert, .ltd-tl-box, .lmm-ask, .lmm-body, .lmm-shapebody, .lmk-body, .lmk-inv, .mk3-famlist, .btsheet, .bts-body, .lrb-card, .mkc-vlangs)::-webkit-scrollbar { display:none; width:0; height:0; }

/* ==== THE DRAWER'S THREE ACTIONS (the user, 2026-09-22) ============================================
   The alignment leads, lit and full width; Predictions and Expert Guidance sit side by side as quiet
   tiles — on a phone the icon above the words, from 560px beside them; from 760px all three in a row. */
.lite-has-chart .litedrawer .liteacts.three { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px; }
.lite-has-chart .litedrawer .liteacts.three .liteact.go { grid-column:1 / -1; }
.lite-has-chart .litedrawer .liteacts.three .liteact.tile { grid-template-columns:minmax(0, 1fr); justify-items:start; align-content:start; gap:9px; padding:12px 13px 13px; border-radius:18px; height:100%; }
.liteacts.three .liteact.tile .liteact-ico { width:32px; height:32px; border-radius:10px; }
.liteacts.three .liteact.tile .liteact-ico svg { width:18px; height:18px; }
.liteacts.three .liteact.tile b { font:500 15px/1.2 var(--display); }
.liteacts.three .liteact.tile em { font:400 11.5px/1.3 var(--body); }
@media (min-width:560px) {
  .lite-has-chart .litedrawer .liteacts.three .liteact.tile { grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:11px; }
}
@media (min-width:760px) {
  .lite-has-chart .litedrawer .liteacts.three { grid-template-columns:minmax(0, 1.45fr) repeat(2, minmax(0, 1fr)); max-width:980px; }
  .lite-has-chart .litedrawer .liteacts.three .liteact.go { grid-column:auto; }
}

/* ==== EXPERT GUIDANCE: the sheet (ui-lite-guide.js), redesigned 2026-09-24 =========================
   "More texty and cluttered … more visuals and less text": the free first chat is the lit lead; the
   plans are one instrument — a switch over a six-month wheel whose arcs light for the steps a plan
   covers and whose hub holds the price — then six icon tiles, one caption line and the gold action.
   From 700px the wheel sits beside the tiles. */
.lpk-sheet.lpk-guide { max-width:820px; max-height:min(92vh, 900px);
  --lgd-s1:#F3DE9A; --lgd-s2:#E2BD5E; --lgd-s3:#C9973A; --lgd-lip:rgba(255,255,255,.09); --lgd-well:rgba(255,255,255,.07); }
:root[data-theme="light"] .lpk-sheet.lpk-guide { --lgd-s1:#CFA53C; --lgd-s2:#A87D16; --lgd-s3:#7A560A; --lgd-lip:rgba(255,255,255,.85); --lgd-well:rgba(40,30,60,.05); }
.lgd { display:grid; gap:18px; padding:16px 0 4px; }

/* the lead: talk to an expert, free the first time */
.lgd-talk { position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:14px;
  padding:12px 16px 12px 12px; border-radius:22px; text-decoration:none; color:var(--ink); overflow:hidden; -webkit-tap-highlight-color:transparent;
  background:radial-gradient(120% 150% at 0% 0%, rgba(var(--acc-rgb), .26), transparent 58%), linear-gradient(180deg, rgba(var(--acc-rgb), .11), rgba(var(--acc-rgb), .035));
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .48), inset 0 1px 0 var(--lgd-lip), 0 20px 44px -28px rgba(var(--acc-rgb), .8);
  transition:box-shadow .25s, transform .15s; }
.lgd-talk:hover { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .75), inset 0 1px 0 var(--lgd-lip), 0 24px 50px -26px rgba(var(--acc-rgb), .9); }
.lgd-talk:active { transform:scale(.985); }
.lgd-talk:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:3px; }
.lgd-art { display:block; width:64px; height:64px; }
.lgd-art svg { display:block; width:100%; height:100%; overflow:visible; }
.lgd-orbit { fill:none; stroke:rgba(var(--acc-rgb), .55); stroke-width:1.1; stroke-dasharray:.1 3.9; stroke-linecap:round; }
.lgd-sat { fill:rgb(var(--acc-rgb)); transform-origin:32px 32px; animation:lgdOrbit 1.6s cubic-bezier(.22,.9,.24,1) .15s backwards; }
@keyframes lgdOrbit { from { transform:rotate(-150deg); } }
.lgd-glyph { fill:none; stroke:#1B1406; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lgd-talk-tx { display:grid; justify-items:start; gap:5px; min-width:0; }
.lgd-free { padding:4px 9px; border-radius:999px; font:700 9.5px/1 var(--body); font-style:normal; letter-spacing:.12em; text-transform:uppercase;
  color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #E2C165); box-shadow:0 6px 14px -8px rgba(214,178,74,.9); }
.lgd-talk-tx b { font:500 19px/1.15 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lgd-talk-tx em { font:500 12px/1.3 var(--body); font-style:normal; color:var(--ink-2); }
.lgd-talk-go { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(var(--acc-rgb), .14);
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .45); transition:background .2s; }
.lgd-talk:hover .lgd-talk-go { background:rgba(var(--acc-rgb), .26); }
.lgd-talk-go svg { width:15px; height:15px; fill:none; stroke:rgb(var(--acc-rgb)); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* the plans: a switch over the wheel */
.lgd-k { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; margin:4px 2px -4px; }
.lgd-k span { font:600 10px/1.2 var(--body); letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--acc-rgb)); }
.lgd-k em { font:500 11.5px/1.2 var(--body); font-style:normal; color:var(--dim); }
.lgd-plans { display:grid; gap:16px; }
.lgd-pick, .lgd-offer { display:grid; gap:16px; align-content:start; min-width:0; }
.lgd-seg { position:relative; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); padding:4px; border-radius:18px;
  background:var(--lgd-well); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lgd-thumb { position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 2); border-radius:14px;
  background:linear-gradient(180deg, rgba(var(--acc-rgb), .30), rgba(var(--acc-rgb), .12));
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .46), inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px -14px rgba(var(--acc-rgb), .85);
  transform:translateX(calc(var(--i, 0) * 100%)); transition:transform .45s cubic-bezier(.22,.9,.24,1); }
.lgd-seg button { position:relative; z-index:1; display:grid; justify-items:center; align-content:center; gap:4px; min-width:0; height:52px; padding:0 6px;
  border:0; border-radius:14px; background:none; cursor:pointer; color:var(--ink-2); transition:color .25s; -webkit-tap-highlight-color:transparent; }
.lgd-seg b { font:600 14.5px/1 var(--body); letter-spacing:.005em; }
.lgd-seg em { font:500 10.5px/1 var(--mono); font-style:normal; letter-spacing:.04em; color:var(--dim); transition:color .25s; }
.lgd-seg button:hover, .lgd-seg button[aria-checked="true"] { color:var(--ink); }
.lgd-seg button[aria-checked="true"] em { color:rgb(var(--acc-rgb)); }
.lgd-seg button:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:-2px; }

/* the six-month wheel, and the three steps beside it */
.lgd-stage { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:18px; }
.lgd-wheel { position:relative; width:164px; height:164px; margin:0; }
.lgd-wheel svg { display:block; width:100%; height:100%; overflow:visible; }
.lgd-h0 { stop-color:rgb(var(--acc-rgb)); stop-opacity:.16; }
.lgd-h1 { stop-color:rgb(var(--acc-rgb)); stop-opacity:0; }
.lgd-rim { fill:none; stroke:var(--st-line-soft); stroke-width:1; }
.lgd-track { fill:none; stroke:var(--st-line); stroke-width:10; stroke-linecap:round; }
.lgd-arc { fill:none; stroke-width:10; stroke-linecap:round; stroke-dasharray:100 130; stroke-dashoffset:108; transition:stroke-dashoffset .8s cubic-bezier(.3,.8,.2,1); }
.lgd-arc.s1 { stroke:var(--lgd-s1); }
.lgd-arc.s2 { stroke:var(--lgd-s2); transition-delay:.12s; }
.lgd-arc.s3 { stroke:var(--lgd-s3); }
.lgd-arc.on { stroke-dashoffset:0; }
.lgd-arc.s2.on { transition-delay:.2s; }
.lgd-arc.s3.on { transition-delay:.4s; }
.lgd-mo { font:500 9px/1 var(--mono); fill:var(--dim); text-anchor:middle; dominant-baseline:central; transition:fill .4s; }
.lgd-mo.on { fill:rgb(var(--acc-rgb)); }
.lgd-start { fill:rgb(var(--acc-rgb)); }
.lgd-hub { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:5px; margin:0; text-align:center; pointer-events:none; }
.lgd-hub-k { font:600 9px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--acc-rgb)); }
.lgd-hub b { font:300 19px/1 var(--display); letter-spacing:.005em; color:var(--ink); font-variant-numeric:tabular-nums; }
.lgd-hub em { font:500 10.5px/1.2 var(--body); font-style:normal; color:var(--dim); font-variant-numeric:tabular-nums; }
.lgd-hub.swap > * { animation:lgdSwap .45s cubic-bezier(.22,.9,.24,1) backwards; }
.lgd-hub.swap > :nth-child(2) { animation-delay:.05s; }
.lgd-hub.swap > :nth-child(3) { animation-delay:.1s; }
@keyframes lgdSwap { from { opacity:0; transform:translateY(5px); } }
.lgd-steps { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.lgd-steps li { display:grid; grid-template-columns:14px minmax(0, 1fr); align-items:center; gap:11px; opacity:.4; transition:opacity .4s; }
.lgd-steps li.on { opacity:1; }
.lgd-steps li.s1 { --c:var(--lgd-s1); }
.lgd-steps li.s2 { --c:var(--lgd-s2); }
.lgd-steps li.s3 { --c:var(--lgd-s3); }
.lgd-steps i { width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--c); transition:background .4s, box-shadow .4s; }
.lgd-steps li.on i { background:var(--c); box-shadow:inset 0 0 0 2px var(--c), 0 0 12px -2px var(--c); }
.lgd-steps span { display:grid; gap:4px; min-width:0; }
.lgd-steps b { font:600 13.5px/1.2 var(--body); color:var(--ink); }
.lgd-steps em { font:500 10px/1 var(--mono); font-style:normal; letter-spacing:.04em; color:var(--dim); }

/* what a plan holds: six tiles, and one line under them */
.lgd-gets { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.lgd-gets li { display:grid; min-width:0; }
.lgd-tile { display:grid; justify-items:center; align-content:start; gap:8px; min-width:0; min-height:88px; padding:14px 6px 10px; border:0; border-radius:16px; cursor:pointer;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); color:var(--ink-2); text-align:center; -webkit-tap-highlight-color:transparent;
  transition:background .2s, box-shadow .2s, color .2s, transform .15s; animation:lgdIn .45s cubic-bezier(.22,.9,.24,1) backwards; animation-delay:calc(var(--k, 0) * 40ms); }
@keyframes lgdIn { from { opacity:0; transform:translateY(8px) scale(.97); } }
.lgd-tile:hover { color:var(--ink); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .38); }
.lgd-tile[aria-pressed="true"] { color:var(--ink); background:radial-gradient(120% 90% at 50% 0%, rgba(var(--acc-rgb), .2), transparent 70%), var(--st-tile);
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .62); }
.lgd-tile:active { transform:scale(.97); }
.lgd-tile:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lgd-ico { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:rgba(var(--acc-rgb), .1);
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .26); transition:background .2s; }
.lgd-tile[aria-pressed="true"] .lgd-ico { background:rgba(var(--acc-rgb), .2); }
.lgd-ico svg { width:21px; height:21px; color:rgb(var(--acc-rgb)); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lgd-ico svg .dot { stroke-width:2.4; }
.lgd-tl { font:500 12px/1.25 var(--body); }
.lgd-cap { display:flex; align-items:center; min-height:44px; margin:-2px 2px 0; }
.lgd-cap > span { animation:lgdSwap .35s cubic-bezier(.22,.9,.24,1) backwards; }
.lgd-line { font:300 18px/1.3 var(--display); letter-spacing:-.005em; color:var(--ink); }
.lgd-says { font:400 13.5px/1.45 var(--body); color:var(--ink-2); }
.lgd-cta { display:flex; align-items:center; justify-content:center; gap:8px; height:50px; border-radius:16px; text-decoration:none; -webkit-tap-highlight-color:transparent;
  font:600 15px/1 var(--body); letter-spacing:.01em; color:#1B1406; background:linear-gradient(180deg, #F8E9B8 0%, #EFD489 46%, #D6B24A 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 14px 28px -16px rgba(214,178,74,.85); transition:filter .2s, transform .15s; }
.lgd-cta:hover { filter:brightness(1.05); }
.lgd-cta:active { transform:scale(.985); }
.lgd-cta:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:3px; }
.lgd-cta small { font:500 12px/1 var(--body); opacity:.66; }
.lgd-cta svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lgd-fine { margin:0; padding:14px 2px 0; border-top:1px solid var(--st-line-soft); font:400 11px/1.55 var(--body); color:var(--dim); }

@media (min-width:700px) {
  .lgd { gap:20px; padding-top:18px; }
  .lgd-talk { gap:16px; padding:14px 20px 14px 14px; }
  .lgd-art { width:70px; height:70px; }
  .lgd-talk-tx b { font-size:21px; }
  .lgd-plans { grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:20px 28px; align-items:start; }
}
@media (max-width:359px) {
  .lgd-talk { gap:10px; padding:10px 12px 10px 10px; }
  .lgd-art { width:48px; height:48px; }
  .lgd-talk-go { display:none; }
  .lgd-talk-tx b { font-size:17px; }
  .lgd-stage { grid-template-columns:minmax(0, 1fr); justify-items:center; gap:14px; }
  .lgd-steps { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; width:100%; }
  .lgd-steps li { grid-template-columns:minmax(0, 1fr); justify-items:center; align-content:start; gap:7px; text-align:center; }
  .lgd-tile { min-height:84px; }
  .lgd-tl { font-size:11.5px; }
  .lgd-cta small { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .lgd-talk, .lgd-cta, .lgd-thumb, .lgd-arc, .lgd-mo, .lgd-steps li, .lgd-tile { transition:none; }
  .lgd-sat, .lgd-tile, .lgd-hub.swap > *, .lgd-cap > span { animation:none; }
}

/* ==== REALIGNMENT, REDESIGNED (the user, 2026-09-23) ==================================================
   Three targets in order — the shape of the day, the day's timing, holding it — each a number and a
   line; the first target drawn as two bars, not a paragraph; the first days' work with a drawing of
   each posture in the body map's own palette. */
.lraL-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.lraL { display:grid; grid-template-columns:auto auto minmax(0, 1fr) auto; align-items:center; gap:4px 14px; padding:13px 14px; border-radius:18px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraL[role="button"] { cursor:pointer; transition:box-shadow .2s, background .2s; }
.lraL[role="button"]:hover { background:var(--st-tile-hi); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .4); }
.lraL[role="button"]:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lraL-i { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font:600 11px/1 var(--body);
  color:var(--dim); background:var(--st-tile-hi); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraL-n { min-width:58px; font:500 26px/1 var(--display); letter-spacing:-.015em; color:var(--ink); font-variant-numeric:tabular-nums; }
.lraL-n em { margin-left:2px; font:500 12px/1 var(--body); font-style:normal; color:var(--dim); }
.lraL-tx { display:grid; gap:2px; min-width:0; }
.lraL-tx b { font:600 14.5px/1.25 var(--body); color:var(--ink); }
.lraL-tx em { font:400 12px/1.4 var(--body); font-style:normal; color:var(--dim); }
.lraL-go { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; color:var(--dim); }
.lraL.good .lraL-n { color:var(--jade); } .lraL.mid .lraL-n { color:var(--brass-hi); } .lraL.far .lraL-n { color:var(--sindoor); }
.lraL.good .lraL-i { color:var(--jade); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 40%, transparent); }
.lra-elline { display:grid; gap:3px; margin:0; font:400 12.5px/1.5 var(--body); color:var(--ink-2); }

/* the first target: two bars */
.lraU-part { display:grid; gap:10px; padding-top:14px; border-top:1px solid var(--st-line-soft); }
.lraU-part:first-of-type { border-top:0; padding-top:4px; }
.lraU-hd { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.lraU-gap { display:inline-flex; align-items:baseline; gap:5px; }
.lraU-gap b { font:500 22px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.lraU-gap em { font:400 11.5px/1 var(--body); font-style:normal; color:var(--dim); }
.lraU-gap.good b { color:var(--jade); } .lraU-gap.mid b { color:var(--brass-hi); } .lraU-gap.far b { color:var(--sindoor); }
.lraU-pair { display:grid; gap:6px; }
.lraU-k { font:600 9.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lraU-bar { display:flex; gap:2px; height:26px; border-radius:9px; overflow:hidden; }
.lraU-bar i { display:grid; place-items:center; min-width:3px; font:600 11px/1 var(--body); color:#1B1406; }
.lraU-bar i span { opacity:.85; }
.lraU-bar .k-ida, .lraU-keys .k-ida { background:linear-gradient(180deg, #A9A5E8, #8F86D6); }
.lraU-bar .k-pingala, .lraU-keys .k-pingala { background:linear-gradient(180deg, #F0907A, #DE6A4E); }
.lraU-bar .k-sushumna, .lraU-keys .k-sushumna { background:linear-gradient(180deg, #F2DA97, #DCB94F); }
.lraU-bar .k-prithvi, .lraU-keys .k-prithvi { background:linear-gradient(180deg, #F0D57A, #D9B23A); }
.lraU-bar .k-jala, .lraU-keys .k-jala { background:linear-gradient(180deg, #FFFFFF, #E3DCCB); }
.lraU-bar .k-agni, .lraU-keys .k-agni { background:linear-gradient(180deg, #EC7D63, #D2472C); }
.lraU-bar .k-vayu, .lraU-keys .k-vayu { background:linear-gradient(180deg, #A2CBE6, #6AA5CF); }
.lraU-bar .k-akasha, .lraU-keys .k-akasha { background:linear-gradient(180deg, #D6B8EC, #B386D6); }
.lraU-keys { display:flex; flex-wrap:wrap; gap:4px 14px; }
.lraU-key { display:inline-flex; align-items:center; gap:6px; font:500 11.5px/1.3 var(--body); color:var(--dim); }
.lraU-key i { width:9px; height:9px; border-radius:3px; }
.lraU-chips { display:flex; flex-wrap:wrap; gap:8px; }
.lraU-chip { display:inline-flex; align-items:baseline; gap:6px; padding:6px 11px; border-radius:999px; font:400 12px/1.2 var(--body); color:var(--ink-2); background:var(--st-tile); }
.lraU-chip b { font-weight:600; color:var(--ink); }
.lraU-chip em { font:600 12px/1 var(--body); font-style:normal; font-variant-numeric:tabular-nums; }
.lraU-chip.over { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 32%, transparent); } .lraU-chip.over em { color:var(--sindoor); }
/* both directions are a difference, not a good and a bad: warm for too much, cool for too little */
.lraU-chip.under { box-shadow:inset 0 0 0 1px rgba(143,134,214,.45); } .lraU-chip.under em { color:#A9A5E8; }
:root[data-theme="light"] .lraU-chip.under em { color:#5F57A8; }
.lraU-trend, .lraU-none { margin:0; font:400 12.5px/1.45 var(--body); color:var(--dim); }

/* holding it */
.lraH-list { display:grid; margin:0; padding:0; list-style:none; }
.lraH-list li { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--st-line-soft); }
.lraH-list li:first-child { border-top:0; padding-top:2px; }
.lraH-n { min-width:56px; text-align:right; font:500 24px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.lraH-n em { font:500 12px/1 var(--body); font-style:normal; color:var(--dim); }
.lraH-list li.good .lraH-n { color:var(--jade); } .lraH-list li.mid .lraH-n { color:var(--brass-hi); }
.lraH-list li.far .lraH-n { color:var(--sindoor); } .lraH-list li.none .lraH-n { color:var(--dim); }
.lraH-tx { display:grid; gap:2px; min-width:0; }
.lraH-tx b { font:600 14px/1.25 var(--body); color:var(--ink); }
.lraH-tx em { font:400 12px/1.4 var(--body); font-style:normal; color:var(--dim); }

/* prepare: the first days' work, each with its drawing */
.lraP-list { display:grid; gap:12px; margin:0; padding:0; list-style:none; counter-reset:lraP; }
.lraP-item { display:grid; gap:10px; padding:14px; border-radius:20px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraP-hd { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:6px 12px; }
.lraP-hd h4 { margin:0; font:500 18px/1.2 var(--display); letter-spacing:-.01em; color:var(--ink); }
/* each card its step, in the order the work is done (the user, 2026-09-28) */
.lraP-step { display:inline-flex; align-items:center; gap:6px; margin:0 0 6px; font:600 10px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:rgb(var(--acc-rgb, 214, 177, 115)); }
.lraP-step::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.lraP-hd > div { display:grid; }
.lraP-mins { font:400 11.5px/1.3 var(--body); color:var(--dim); }
.lraP-tag { padding:4px 10px; border-radius:999px; font:600 10px/1.2 var(--body); letter-spacing:.06em; color:var(--brass-hi);
  background:rgba(var(--acc-rgb), .1); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .28); }
.lraP-body { display:grid; gap:12px; }
@media (min-width:560px) { .lraP-body { grid-template-columns:minmax(0, 200px) minmax(0, 1fr); align-items:start; } }
.lraP-fig { padding:8px; border-radius:16px; background:var(--st-tile-hi); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraP-tx { display:grid; gap:8px; min-width:0; }
.lraP-lede { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.lraP-steps { display:grid; gap:7px; margin:0; padding:0 0 0 18px; }
.lraP-steps li { font:400 13px/1.5 var(--body); color:var(--ink); }
.lraP-steps li::marker { color:rgb(var(--acc-rgb)); font-weight:600; }
.lraP-care { display:grid; gap:5px; margin:8px 0 0; padding:0 0 0 16px; }
.lraP-care li { font:400 12px/1.45 var(--body); color:var(--dim); }

/* the posture drawings: the body map's skin, one brass mark on what matters */
.lraF { display:block; width:100%; height:auto; }
/* the limbs read as a drawing, not a shadow: an ink line with the body map's warmth, and brass on
   whatever the practice is about */
.lraF-g { stroke:color-mix(in srgb, var(--ink) 62%, transparent); }
.lraF-face { stroke:color-mix(in srgb, var(--ink) 45%, transparent); fill:none; }
.lraF-open { fill:none; stroke:color-mix(in srgb, var(--ink) 45%, transparent); stroke-width:2; }
.lraF-lit { stroke:rgb(var(--acc-rgb)); }
.lraF-floor { stroke:var(--st-line); stroke-width:1.5; stroke-dasharray:4 5; }
.lraF-lit { stroke:rgb(var(--acc-rgb)); filter:drop-shadow(0 0 7px rgba(var(--acc-rgb), .45)); }
.lraF-mark { fill:rgb(var(--acc-rgb)); stroke:none; }
.lraF-halo { fill:none; stroke:rgb(var(--acc-rgb)); stroke-width:1.6; opacity:.45; }
.lraF-gaze { stroke:rgb(var(--acc-rgb)); stroke-width:1.4; stroke-dasharray:3 4; opacity:.65; }
/* the four levels, at the top of every Realignment view */
.lraS-card { display:grid; gap:12px; }
.lraS-hd { display:grid; gap:3px; }
.lraS-hd b { font:500 17px/1.25 var(--display); color:var(--ink); }
.lraS { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.lraS li { display:grid; gap:6px; justify-items:start; padding:10px 10px 11px; border-radius:15px; cursor:pointer;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); transition:box-shadow .2s, background .2s; }
.lraS li:hover { background:var(--st-tile-hi); }
.lraS li.here { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .55); }
.lraS li:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lraS-n { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font:600 11px/1 var(--body); color:var(--dim);
  background:var(--st-tile-hi); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraS-n svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.lraS li.done .lraS-n { color:#1B1406; background:linear-gradient(180deg, #F2DA97, #DCB94F); box-shadow:none; }
.lraS li.now .lraS-n { color:rgb(var(--acc-rgb)); box-shadow:inset 0 0 0 1.5px rgb(var(--acc-rgb)); }
.lraS-name { font:600 12px/1.25 var(--body); color:var(--ink-2); }
.lraS li.now .lraS-name { color:var(--ink); }
.lraS li.later .lraS-name { color:var(--dim); }
.lraS-bar { display:block; width:100%; height:4px; border-radius:2px; background:var(--st-line-soft); overflow:hidden; }
.lraS-bar i { display:block; height:100%; border-radius:2px; background:linear-gradient(90deg, rgba(var(--acc-rgb), .7), rgb(var(--acc-rgb))); }
.lraS li.done .lraS-bar i { background:var(--jade); }
.lraS-say { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
/* three stages, three columns at every width but the narrowest (it was four, then two: an empty quarter, a stage alone) */
@media (max-width:359px) {
  .lraS { grid-template-columns:minmax(0, 1fr); }
}
.lraY-sk { font:400 12px/1 var(--deva); font-style:normal; color:var(--dim); }
/* the three bodies in Progress: usually, today, and what has eased */
.lraB-card .lal-hd { align-items:flex-start; }
.lraB-seg { grid-template-columns:repeat(2, minmax(0, 1fr)); min-width:190px; }
.lraB-big { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.lraB-big b { font:500 34px/1 var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.lraB-big b em { font:500 15px/1 var(--body); font-style:normal; }
.lraB-big b.good { color:var(--jade); } .lraB-big b.mid { color:var(--brass-hi); } .lraB-big b.far { color:var(--sindoor); }
.lraB-big span { font:400 13px/1.45 var(--body); color:var(--ink-2); }
.lraB-figs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.lraB-fig { display:grid; gap:8px; margin:0; padding:10px 8px 8px; border-radius:18px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraB-cap { display:grid; gap:2px; text-align:center; }
.lraB-cap b { font:600 12.5px/1.2 var(--body); color:var(--ink); }
.lraB-cap span { font:400 10.5px/1.3 var(--body); color:var(--dim); }
.lraB-body { min-width:0; }
.lraB-body > svg.ldx-body { display:block; width:100%; height:auto; }
/* three figures side by side are a third of the Diagnosis body's width, so their zoom buttons are
   scaled with them — the same weight on the drawing as the one on Diagnosis (the user, 2026-09-23) */
/* WHAT REALIGNING CAN REACH (the user, 2026-09-23): three levels, each a ring and two short
   columns — the reading is the picture, the words are labels */
/* the element practices: what each text actually claims, under its own steps */
.lraT-item { gap:8px; }
.lraT-claim { margin:0; font:400 12.5px/1.5 var(--body); color:var(--ink-2); }
.lraT-cite { margin:0; font:500 11px/1.4 var(--body); letter-spacing:.02em; color:var(--brass-hi); }
.lraT-trap { margin:0; padding:11px 13px; border-radius:14px; font:400 12.5px/1.5 var(--body); color:var(--ink-2);
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraR-lvs { display:grid; gap:10px; }
.lraR-lv { display:grid; gap:10px; padding:12px 12px 13px; border-radius:20px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraR-lvhd { display:flex; align-items:center; gap:10px; }
.lraR-lvhd h4 { flex:1; margin:0; font:500 17px/1.2 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lraR-ic { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--st-line); color:var(--brass-hi); }
.lraR-ic svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lraR-ring { position:relative; display:grid; place-items:center; width:54px; height:54px; }
.lraR-ring svg { width:54px; height:54px; transform:rotate(-90deg); }
.lraR-track { fill:none; stroke:var(--st-line); stroke-width:6; }
.lraR-arc { fill:none; stroke:var(--jade); stroke-width:6; stroke-linecap:round; }
.lraR-ring.empty .lraR-arc { stroke:none; }
.lraR-num { position:absolute; font:600 14px/1 var(--body); font-variant-numeric:tabular-nums; color:var(--ink); }
.lraR-num em { font:600 9px/1 var(--body); font-style:normal; color:var(--dim); }
.lraR-cols { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
@media (max-width:520px) { .lraR-cols { grid-template-columns:1fr; } }
.lraR-col { display:grid; gap:6px; align-content:start; }
.lraR-k { font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lraR-col.reach .lraR-k { color:var(--jade); }
.lraR-rows { list-style:none; display:grid; gap:5px; margin:0; padding:0; }
.lraR-row button { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:3px 8px; width:100%; padding:7px 9px; border:0; border-radius:12px; cursor:pointer; text-align:left;
  background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraR-row button:hover { box-shadow:inset 0 0 0 1px var(--st-line); }
.lraR-row button:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lraR-row i { grid-row:1 / span 2; align-self:center; width:8px; height:8px; border-radius:50%; background:var(--dim); }
.lraR-row.is-reach i, .lraR-row.is-keep i { background:var(--jade); }
.lraR-row.is-part i { background:var(--brass-hi); }
.lraR-row b { font:500 13px/1.3 var(--body); color:var(--ink); }
.lraR-row em { font:400 11px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lraR-none { margin:0; font:400 12px/1.4 var(--body); color:var(--dim); }
.lraR-key { display:flex; flex-wrap:wrap; gap:6px 14px; padding-top:2px; }
.lraR-key span { display:inline-flex; align-items:center; gap:6px; font:400 11.5px/1.3 var(--body); color:var(--ink-2); }
.lraR-key i { width:8px; height:8px; border-radius:50%; background:var(--dim); }
.lraR-key .is-reach i { background:var(--jade); }
.lraR-key .is-part i { background:var(--brass-hi); }
.lraR-names { display:grid; gap:7px; }
.lraR-chips { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.lraR-chips li { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; font:500 12px/1.2 var(--body); color:var(--ink);
  background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraR-chips i { width:7px; height:7px; border-radius:50%; background:var(--dim); }
.lraR-chips .is-reach i { background:var(--jade); }
.lraR-chips .is-part i { background:var(--brass-hi); }
.lraR-chips em { font:400 10.5px/1.2 var(--body); font-style:normal; color:var(--dim); }

/* ---- Realignment · Reach, in three parts (the user, 2026-09-30): the lead with a tile for each part, then
   Usually (jade: the stage's own), Today (brass: the day), Stays (sindoor, quiet) and the key ---- */
.lraN { display:grid; gap:14px; min-width:0; }
@media (min-width:760px) { .lraN { gap:18px; } }
.lraN-tiles { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.lraN-tile { display:grid; gap:7px; align-content:start; min-width:0; padding:13px 13px 14px; border:0; border-radius:18px; cursor:pointer; text-align:left; color:var(--ink);
  font:inherit; text-transform:none; letter-spacing:normal; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft);
  transition:box-shadow .2s ease, transform .2s ease, background .2s ease; }
.lraN-tile:hover { box-shadow:inset 0 0 0 1px var(--st-line); }
.lraN-tile:active { transform:scale(.985); }
.lraN-tile:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lraN-tk { display:inline-flex; align-items:center; gap:6px; font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lraN-tk svg { flex:0 0 auto; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lraN-tile b { font:300 32px/1 var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.lraN-tile b em { margin-left:2px; font:500 13px/1 var(--body); font-style:normal; color:var(--dim); }
.lraN-tile b.good { color:var(--jade); } .lraN-tile b.far { color:var(--sindoor); }
.lraN-ts { font:400 11.5px/1.35 var(--body); color:var(--ink-2); }
.lraN-tile.is-usual .lraN-tk { color:rgb(var(--acc-rgb)); }
.lraN-tile.is-today .lraN-tk { color:var(--brass-hi); }
.lraN-tile.is-stays .lraN-tk { color:color-mix(in srgb, var(--sindoor) 72%, var(--ink-2)); }
@media (max-width:420px) { .lraN-tiles { gap:6px; } .lraN-tile { padding:11px 9px 12px; gap:6px; } .lraN-tile b { font-size:25px; } .lraN-ts { font-size:10.5px; } .lraN-tk { letter-spacing:.1em; } }
@media (max-width:300px) { .lraN-tiles { grid-template-columns:1fr; } }
/* a part's header: a badge in the part's colour, the eyebrow and the title, the count */
.lraN-hd { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; }
.lraN-hdtx { display:grid; gap:4px; min-width:0; }
.lraN-badge { display:grid; place-items:center; width:38px; height:38px; border-radius:13px; }
.lraN-badge svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lraN-sec.is-usual .lraN-badge { color:rgb(var(--acc-rgb)); background:rgba(var(--acc-rgb), .12); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .3); }
.lraN-sec.is-today .lraN-badge { color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 11%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 30%, transparent); }
.lraN-sec.is-stays .lraN-badge { color:color-mix(in srgb, var(--sindoor) 78%, var(--ink)); background:color-mix(in srgb, var(--sindoor) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 26%, transparent); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lraN-sec.is-today .lal-eyebrow { color:var(--brass-hi); }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lraN-sec.is-stays .lal-eyebrow { color:color-mix(in srgb, var(--sindoor) 72%, var(--ink-2)); }
@media (max-width:420px) { .lraN-hd { grid-template-columns:auto minmax(0, 1fr); } .lraN-hd > .lal-aside { grid-column:2; justify-self:start; } }
/* the figure beside what it shows, from a tablet up */
.lraN-grid { display:grid; gap:16px; }
@media (min-width:760px) { .lraN-grid { grid-template-columns:190px minmax(0, 1fr); gap:24px; align-items:start; } .lraN-grid.nofig { grid-template-columns:minmax(0, 1fr); } }
.lraN-figcol { display:grid; justify-items:center; align-content:start; gap:10px; min-width:0; }
/* the part's own switch, small and quiet: 114 points or the channels */
.lraN-seg { display:inline-grid; grid-template-columns:repeat(2, auto); gap:2px; padding:3px; border-radius:999px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraN-seg button { min-height:26px; padding:0 11px; border:0; border-radius:999px; cursor:pointer; background:none; color:var(--dim);
  font:500 11px/1 var(--body); letter-spacing:.01em; text-transform:none; white-space:nowrap; transition:color .2s ease, background .2s ease; }
.lraN-seg button:hover { color:var(--ink-2); }
.lraN-seg button[aria-selected="true"] { color:var(--ink); background:rgba(var(--acc-rgb), .15); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .34); }
.lraN-seg button:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:1px; }
.lraN-key { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 12px; font:500 10.5px/1.2 var(--body); color:var(--dim); }
.lraN-key > span { display:inline-flex; align-items:center; gap:5px; }
.lraN-key .ldx-scale em { margin:0 3px; font-style:normal; }
.lraN-key .ldx-scale i.sc { width:8px; height:7px; border-radius:2px; }
.lraN-fig { width:100%; max-width:190px; }
@media (max-width:759px) { .lraN-fig { max-width:168px; } }
/* Progress shows one body at a time on a phone; Reach's one per part always shows, at its own small size */
.lraN .lraB-fig.lraN-fig { display:grid; }
.lraN .lraN-fig .lraB-body > svg { width:100%; height:auto; }
.lraN-col { display:grid; gap:16px; min-width:0; align-content:start; }
.lraN-blk { display:grid; gap:9px; min-width:0; }
.lraN-k { font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lraN-sub { margin:-4px 0 0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.lraN-sub b { font-weight:600; color:var(--ink); }
.lraN-light { margin:0; font:400 12px/1.45 var(--body); color:var(--ink-2); }
.lraN-light b { margin-right:4px; font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lraN-wait { margin:0; padding:12px 14px; border-radius:15px; font:400 13px/1.45 var(--body); color:var(--ink-2); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraN-go { justify-self:start; }
.lraN-rings { display:flex; flex-wrap:wrap; gap:16px; }
.lraN-ring { display:grid; justify-items:center; gap:5px; }
.lraN-ring span { font:500 11px/1 var(--body); color:var(--ink-2); }
.lraN-ring .lraR-ring, .lraN-ring .lraR-ring svg { width:48px; height:48px; }
.lraN-ring .lraR-num { font-size:13px; }
.lraN .lraR-col .lraR-k { display:none; }
.lraN .ldx-organs { gap:9px; }
/* today, in one figure: how much of the usual strain has eased */
.lraN-stat { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; }
.lraN-stat b { font:300 44px/1 var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.lraN-stat b em { margin-left:2px; font:500 16px/1 var(--body); font-style:normal; color:var(--dim); }
.lraN-stat.good b { color:var(--jade); } .lraN-stat.far b { color:var(--sindoor); }
.lraN-stat span { max-width:34ch; font:500 13px/1.4 var(--body); color:var(--ink-2); }
.lraN-areas { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.lraN-areas li { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; font:500 12px/1.2 var(--body); color:var(--ink);
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraN-areas em { font:600 11px/1 var(--body); font-style:normal; }
.lraN-areas li.up em { color:var(--jade); } .lraN-areas li.dn em { color:var(--sindoor); }
/* what stays, and why */
.lraN-why { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
@media (max-width:520px) { .lraN-why { grid-template-columns:1fr; } }
.lraN-reason { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:3px 12px; padding:12px 14px; border-radius:16px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraN-reason svg { grid-row:1 / span 2; width:24px; height:24px; fill:none; stroke:var(--ink-2); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.lraN-reason b { font:600 13px/1.25 var(--body); color:var(--ink); }
.lraN-reason span { font:400 12px/1.4 var(--body); color:var(--ink-2); }
.lraN-cols2 { display:grid; gap:16px; }
@media (min-width:760px) { .lraN-cols2 { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; align-items:start; } }
/* SwaraTantra, in its own cold blue (the dock's), for what stays */
.lraN-swt { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; width:100%; padding:14px 15px; border:0; border-radius:18px; cursor:pointer;
  font:inherit; text-align:left; text-transform:none; letter-spacing:normal; color:var(--ink);
  background:radial-gradient(90% 140% at 100% 0%, rgba(199,221,255,.16), transparent 60%), linear-gradient(135deg, rgba(199,221,255,.1), rgba(199,221,255,.03));
  box-shadow:inset 0 0 0 1px rgba(199,221,255,.3); transition:box-shadow .2s ease; }
.lraN-swt:hover { box-shadow:inset 0 0 0 1px rgba(199,221,255,.5); }
.lraN-swt:focus-visible { outline:2px solid #C7DDFF; outline-offset:2px; }
.lraN-swt svg { width:24px; height:24px; fill:none; stroke:#C7DDFF; stroke-width:1.6; stroke-linecap:round; }
.lraN-swt-tx { display:grid; gap:2px; min-width:0; }
.lraN-swt-tx b { font:600 14px/1.2 var(--body); color:var(--ink); }
.lraN-swt-tx span { font:400 12px/1.4 var(--body); color:var(--ink-2); }
.lraN-swt em { padding:5px 9px; border-radius:999px; font:600 9.5px/1 var(--body); font-style:normal; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  color:#C7DDFF; box-shadow:inset 0 0 0 1px rgba(199,221,255,.42); }
:root[data-theme="light"] .lraN-swt { background:radial-gradient(90% 140% at 100% 0%, rgba(61,107,166,.12), transparent 60%), linear-gradient(135deg, rgba(61,107,166,.08), rgba(61,107,166,.02)); box-shadow:inset 0 0 0 1px rgba(61,107,166,.3); }
:root[data-theme="light"] .lraN-swt svg { stroke:#3D6BA6; }
:root[data-theme="light"] .lraN-swt em { color:#3D6BA6; box-shadow:inset 0 0 0 1px rgba(61,107,166,.4); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lraN-swt { background:radial-gradient(90% 140% at 100% 0%, rgba(61,107,166,.12), transparent 60%), linear-gradient(135deg, rgba(61,107,166,.08), rgba(61,107,166,.02)); box-shadow:inset 0 0 0 1px rgba(61,107,166,.3); }
  :root:not([data-theme="dark"]) .lraN-swt svg { stroke:#3D6BA6; }
  :root:not([data-theme="dark"]) .lraN-swt em { color:#3D6BA6; box-shadow:inset 0 0 0 1px rgba(61,107,166,.4); }
}
@media (max-width:380px) { .lraN-swt { grid-template-columns:auto minmax(0, 1fr); } .lraN-swt em { grid-column:2; justify-self:start; } }
.lraN-foot { display:grid; gap:10px; padding:0 4px; }
.lraN-foot .lal-foot { margin:0; }
.lraB-fig .lzm-ctl.body { top:3px; right:3px; gap:4px; }
.lraB-fig .lzm-b { width:24px; height:24px; }
.lraB-fig .lzm-b svg { width:12px; height:12px; }
.lraB-fig .lzm-b.reset { min-width:24px; height:22px; padding:0 7px; }
.lraB-fig .lzm-b.reset span { font-size:10px; }
.lraB-fig .lzm-b.reset svg { width:11px; height:11px; }
@media (max-width:620px) { .lraB-fig .lzm-b { width:26px; height:26px; } .lraB-fig .lzm-b svg { width:13px; height:13px; } }

/* ==== REALIGNMENT'S ALERT, AND ITS WAY TO AN EXPERT (the user, 2026-09-24, in place of the gate) =====
   The practices here are general: until the reader has read so, the card stands over the stage and
   the rest of it waits, dimmed and out of reach. The Expert consultation pill is pinned to the
   drawer's corner on every Realignment page; the page keeps room under it to scroll clear. */
/* the full caution stays in view while it is unread; the banner that follows it sits in the page */
.lal-alertholder:has(> .lra-alert) { position:sticky; top:6px; z-index:6; }
.lra-caution { --al-rgb:242, 138, 92; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; width:100%; padding:10px 12px 10px 13px;
  border:0; border-radius:14px; cursor:pointer; text-align:left; font:inherit; color:var(--ink-2); -webkit-tap-highlight-color:transparent;
  background:linear-gradient(90deg, rgba(var(--al-rgb), .14), rgba(var(--al-rgb), .05)); box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .42); transition:box-shadow .2s, background .2s; }
:root[data-theme="light"] .lra-caution { --al-rgb:182, 70, 30; }
.lra-caution:hover { box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .7); }
.lra-caution:focus-visible { outline:2px solid rgb(var(--al-rgb)); outline-offset:2px; }
.lra-caution svg { width:18px; height:18px; fill:none; stroke:rgb(var(--al-rgb)); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lra-caution span { font:400 12.5px/1.4 var(--body); }
.lra-caution b { font-weight:600; color:rgb(var(--al-rgb)); }
.lra-caution em { padding:5px 10px; border-radius:999px; font:600 11px/1 var(--body); font-style:normal; letter-spacing:.02em; color:rgb(var(--al-rgb)); box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .45); }
#lite-align.lra-hold > :not(#lal-ra-alert) { opacity:.22; filter:saturate(.5); pointer-events:none; user-select:none; }
.lra-alert { --al-rgb:242, 138, 92; display:grid; gap:16px; padding:20px 18px 18px; border-radius:24px; overflow:hidden;
  background:radial-gradient(120% 90% at 0% 0%, rgba(var(--al-rgb), .2), transparent 60%), linear-gradient(180deg, #17140F, #0D0B09);
  box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .5), 0 30px 64px -30px rgba(0,0,0,.95); animation:lraAlertIn .45s cubic-bezier(.22,.9,.24,1) backwards; }
:root[data-theme="light"] .lra-alert { --al-rgb:182, 70, 30;
  background:radial-gradient(120% 90% at 0% 0%, rgba(var(--al-rgb), .12), transparent 60%), #FFFDF8;
  box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .42), 0 24px 54px -28px rgba(60,40,80,.45); }
@keyframes lraAlertIn { from { opacity:0; transform:translateY(8px); } }
.lra-alert-hd { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:14px; }
.lra-alert-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:rgba(var(--al-rgb), .14);
  box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .55), 0 0 0 6px rgba(var(--al-rgb), .06); }
.lra-alert-mark svg { width:24px; height:24px; fill:none; stroke:rgb(var(--al-rgb)); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lra-alert-k { display:block; font:600 10px/1.2 var(--body); letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--al-rgb)); }
.lra-alert h3 { margin:5px 0 0; font:500 clamp(20px, 5.2vw, 24px)/1.15 var(--display); letter-spacing:-.012em; color:var(--ink); text-wrap:balance; }
.lra-alert-pts { display:grid; margin:0; padding:0; list-style:none; }
.lra-alert-pts li { display:grid; grid-template-columns:34px minmax(0, 1fr); align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--st-line-soft); }
.lra-alert-pts i { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lra-alert-pts i svg { width:18px; height:18px; fill:none; stroke:var(--ink-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lra-alert-pts li:first-child i, .lra-alert-pts li:last-child i { background:rgba(var(--al-rgb), .12); box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .4); }
.lra-alert-pts li:first-child i svg, .lra-alert-pts li:last-child i svg { stroke:rgb(var(--al-rgb)); }
.lra-alert-pts li:first-child b { color:rgb(var(--al-rgb)); }
.lra-alert-pts span { display:grid; gap:3px; min-width:0; }
.lra-alert-pts b { font:600 14px/1.25 var(--body); color:var(--ink); }
.lra-alert-pts em { font:400 12.5px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.lra-alert-acts { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; }
.lra-alert-go, .lra-alert-ok { height:48px; border:0; border-radius:15px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:filter .2s, transform .15s; }
.lra-alert-go { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-width:0; padding:0 16px;
  font:600 14.5px/1 var(--body); color:#1B1406; background:linear-gradient(180deg, #F8E9B8 0%, #EFD489 46%, #D6B24A 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 14px 28px -16px rgba(214,178,74,.85); }
.lra-alert-go svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lra-alert-ok { padding:0 18px; font:600 14px/1 var(--body); color:var(--ink); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line); }
.lra-alert-go:hover, .lra-alert-ok:hover { filter:brightness(1.06); }
.lra-alert-go:active, .lra-alert-ok:active { transform:scale(.98); }
.lra-alert-go:focus-visible, .lra-alert-ok:focus-visible { outline:2px solid rgb(var(--al-rgb)); outline-offset:2px; }
.lra-alert-go, .lra-alert-ok { white-space:nowrap; }
@media (max-width:420px) { .lra-alert-acts { grid-template-columns:minmax(0, 1fr); } }
@media (min-width:760px) {
  .lra-alert { gap:18px; padding:24px 24px 22px; }
  .lra-alert-pts { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
  .lra-alert-pts li { grid-template-columns:minmax(0, 1fr); align-items:start; align-content:start; gap:12px; padding:16px; border-top:0; border-radius:18px;
    background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
  .lra-alert-acts { grid-template-columns:auto auto; justify-content:start; }
}

/* the pinned button: glass, a gold disc, one line */
.lra-fab { display:none; position:fixed; z-index:20; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); align-items:center; gap:10px; height:50px; padding:0 20px 0 7px;
  border:0; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent; font:600 14px/1 var(--body); letter-spacing:.01em; color:#F6ECD2;
  background:linear-gradient(180deg, rgba(36,31,22,.9), rgba(15,13,10,.94)); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(240,213,126,.55), inset 0 1px 0 rgba(255,255,255,.08), 0 18px 36px -14px rgba(0,0,0,.9), 0 0 0 6px rgba(240,213,126,.07);
  transition:box-shadow .2s, transform .15s; }
.lite-has-chart .litedrawer[data-state="open"][data-mode="align"][data-stage="realign"] .lra-fab { display:inline-flex; animation:lraFabIn .5s cubic-bezier(.22,.9,.24,1) .2s backwards; }
@keyframes lraFabIn { from { opacity:0; transform:translateY(16px) scale(.96); } }
.lra-fab:hover { box-shadow:inset 0 0 0 1px rgba(240,213,126,.85), inset 0 1px 0 rgba(255,255,255,.1), 0 20px 40px -14px rgba(0,0,0,.9), 0 0 0 7px rgba(240,213,126,.1); }
.lra-fab:active { transform:scale(.97); }
.lra-fab:focus-visible { outline:2px solid #F0D57E; outline-offset:3px; }
.lra-fab b { font-weight:600; white-space:nowrap; }
.lra-fab-ico { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:linear-gradient(180deg, #F8E9B8, #D6B24A);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 4px 10px -4px rgba(214,178,74,.8); }
.lra-fab-ico svg { width:19px; height:19px; fill:none; stroke:#1B1406; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
:root[data-theme="light"].lite-has-chart .litedrawer .lra-fab { color:#2A2418; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(251,247,238,.97));
  box-shadow:inset 0 0 0 1px rgba(154,122,24,.5), 0 16px 32px -14px rgba(60,40,80,.4), 0 0 0 6px rgba(154,122,24,.07); }
.lite-has-chart .litedrawer[data-mode="align"][data-stage="realign"] .litedrawer-body { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
@media (min-width:760px) {
  .lra-fab { right:24px; bottom:calc(22px + env(safe-area-inset-bottom)); }
  .lite-has-chart .litedrawer[data-mode="align"][data-stage="realign"] .litedrawer-body { padding-bottom:108px; }
}
@media (prefers-reduced-motion: reduce) {
  .lra-alert, .lite-has-chart .litedrawer[data-state="open"][data-mode="align"][data-stage="realign"] .lra-fab { animation:none; }
  .lra-fab, .lra-alert-go, .lra-alert-ok { transition:none; }
}
/* a practice time says what the code has running there, and goes into the time table */
.lra-tp-code { display:inline-flex; align-items:center; gap:6px; font:500 11.5px/1.3 var(--body); color:var(--dim); }
.lra-tp-code .lel-s { width:9px; height:9px; border-radius:3px; }
.lra-tp { position:relative; }
.lra-tp-add { position:absolute; right:10px; top:16px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:1px solid var(--st-line); background:var(--st-tile); color:var(--ink-2); transition:background .2s, color .2s, border-color .2s; }
.lra-tp-add svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.lra-tp-add:hover { color:#1B1406; background:rgb(var(--acc-rgb)); border-color:rgb(var(--acc-rgb)); }
.lra-tp-add.done { color:var(--jade); background:color-mix(in srgb, var(--jade) 18%, transparent); border-color:color-mix(in srgb, var(--jade) 45%, transparent); }
.lra-tp-hd { width:calc(100% - 46px); }
.lra-tp-add.open { color:#1B1406; background:rgb(var(--acc-rgb)); border-color:rgb(var(--acc-rgb)); }
/* the chooser sits over the dotted rail that joins the times, like the step panel does:
   opaque, lifted, and the full width of the row (the user, 2026-09-23: it collided with the line) */
.lra-ttwrap { position:relative; z-index:1; padding:0 10px 12px; }
.lra-ttwrap .lpr-tt { background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--st-line-soft), 0 8px 24px rgba(0,0,0,.18); }
.lra-ttat { margin:0; font:500 12.5px/1.45 var(--body); color:var(--ink-2); }
.lra-ttat b { color:var(--ink); font-variant-numeric:tabular-nums; }

/* each stage's own bar, at the head of its page */
.lraBar-card { display:grid; gap:10px; }
.lraBar-hd { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:6px 14px; }
.lraBar-hd b { display:block; margin-top:3px; font:500 16px/1.3 var(--display); color:var(--ink); }
.lraBar-pct { display:inline-flex; align-items:baseline; gap:2px; font:500 26px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.lraBar-pct em { font:500 13px/1 var(--body); font-style:normal; color:var(--dim); }
.lraBar-pct.done { align-items:center; gap:7px; font:600 15px/1 var(--body); color:var(--jade); }
.lraBar-pct.done svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.lraBar-track { height:8px; border-radius:4px; background:var(--st-tile-hi); box-shadow:inset 0 0 0 1px var(--st-line-soft); overflow:hidden; }
.lraBar-track i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg, rgba(var(--acc-rgb), .65), rgb(var(--acc-rgb))); transition:width .5s cubic-bezier(.22,.9,.24,1); }
.lraBar-card.done .lraBar-track i { background:linear-gradient(90deg, color-mix(in srgb, var(--jade) 60%, transparent), var(--jade)); }
.lraBar-card.later { opacity:.85; }
.lraBar-say { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.lraBar-next { justify-self:start; }
@media (prefers-reduced-motion: reduce) { .lraBar-track i { transition:none; } }
/* Preparation's two stages (2026-10-09): the Progress card's own numbers under the bar, and the stage the person chooses once
   stage 1 is passed */
.lraBar-nums { display:flex; flex-wrap:wrap; gap:4px 14px; font:500 11.5px/1.3 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }
.lraBar-nums b { font-weight:600; color:var(--ink); }
.lraBar-nums .up { color:var(--jade); }
.lraBar-pick { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lraBar-lv { display:grid; gap:2px; text-align:left; padding:9px 11px; border-radius:12px; border:1px solid var(--st-line-soft); background:var(--st-tile);
  color:var(--ink-2); font:400 11.5px/1.35 var(--body); cursor:pointer; transition:background .2s, border-color .2s; }
.lraBar-lv b { font:600 12.5px/1.2 var(--body); color:var(--ink); }
.lraBar-lv.on { border-color:rgba(var(--acc-rgb), .55); background:rgba(var(--acc-rgb), .1); }
.lraBar-lv.on b { color:rgb(var(--acc-rgb)); }
.lraBar-lv:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }

/* =====================================================================
   DIAGNOSIS · WHEN, DRAWN (the user, 2026-09-24: "very brief and texty … more visuals and less text")
   ===================================================================== */
.lst-when { gap:14px; }
.lwh-k { font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lwh-badge { flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:14px; font:600 18px/1 var(--body); color:var(--g);
  background:color-mix(in srgb, var(--g) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--g) 42%, transparent); }
.lwh-badge.sm { width:30px; height:30px; border-radius:10px; font-size:14px; }

/* now: the two planets, how far the sub-period has run, what it brings on */
.lwh-now { display:grid; gap:11px; padding:14px; border-radius:18px; background:var(--st-tile);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--acc-rgb)) 28%, var(--st-line-soft)); }
.lwh-pair { display:flex; align-items:center; gap:9px; min-width:0; }
.lwh-join { flex:0 0 14px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--g1), var(--g2)); opacity:.75; }
.lwh-pair-tx { display:grid; gap:3px; min-width:0; margin-left:4px; }
.lwh-pair-tx .lwh-k { color:rgb(var(--acc-rgb)); }
.lwh-pair-tx b { font:500 17px/1.2 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lwh-pair-tx em { font:500 11.5px/1.2 var(--mono); font-style:normal; color:var(--dim); }
.lwh-run { height:4px; border-radius:4px; background:var(--st-line); overflow:hidden; }
.lwh-run i { display:block; height:100%; border-radius:4px; background:rgb(var(--acc-rgb)); }
.lwh-chips { display:flex; flex-wrap:wrap; gap:6px; }
.lwh-chip { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 11px; border:0; border-radius:999px; cursor:pointer;
  font:500 12px/1.2 var(--body); color:var(--ink);
  background:color-mix(in srgb, var(--ldx-load) 13%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-load) 38%, transparent); }
.lwh-chip:hover { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-load) 70%, transparent); }
.lwh-chip:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lwh-chip i { width:6px; height:6px; border-radius:50%; background:var(--ldx-strain); box-shadow:0 0 6px var(--ldx-strain); }
.lwh-chip.quiet { cursor:default; color:var(--dim); background:none; box-shadow:inset 0 0 0 1px var(--st-line); }
.lwh-pills { display:flex; flex-wrap:wrap; gap:6px; }
.lwh-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px; cursor:help;
  font:600 10.5px/1 var(--body); letter-spacing:.06em; text-transform:uppercase; }
.lwh-pill svg { width:10px; height:10px; fill:currentColor; }
.lwh-pill.up { color:var(--ldx-strain); background:color-mix(in srgb, var(--ldx-strain) 14%, transparent); }
.lwh-pill.down { color:var(--jade); background:color-mix(in srgb, var(--jade) 14%, transparent); }

/* ahead: the sub-periods, each rising by what the texts name for it */
.lwh-ahead, .lwh-skywrap { display:grid; gap:7px; }
.lwh-strip { position:relative; height:48px; border-radius:12px; overflow:hidden; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lwh-seg { position:absolute; top:0; bottom:0; background:color-mix(in srgb, var(--g) 10%, transparent);
  box-shadow:inset -1px 0 0 color-mix(in srgb, var(--ink) 10%, transparent); }
.lwh-seg b { position:absolute; left:1px; right:1px; bottom:0; border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ldx-load) 85%, #fff 15%), color-mix(in srgb, var(--ldx-load) 55%, transparent)); }
.lwh-seg.heavy b { background:repeating-linear-gradient(135deg, var(--ldx-strain) 0 4px, color-mix(in srgb, var(--ldx-strain) 55%, #fff) 4px 6px); }
.lwh-seg span { position:absolute; top:5px; left:50%; transform:translateX(-50%); font:600 11px/1 var(--body); color:var(--g); text-shadow:0 1px 2px rgba(0,0,0,.35); }
.lwh-seg.now { box-shadow:inset 0 0 0 1.5px rgb(var(--acc-rgb)); border-radius:12px 0 0 12px; }
.lwh-axis { position:relative; height:13px; font:500 10.5px/1 var(--mono); color:var(--dim); }
.lwh-axis span { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.lwh-axis span.first { left:0; transform:none; color:rgb(var(--acc-rgb)); }
.lwh-key { display:flex; flex-wrap:wrap; gap:4px 14px; font:400 11px/1.3 var(--body); color:var(--ink-2); }
.lwh-key span { display:inline-flex; align-items:center; gap:6px; }
.lwh-key i { width:14px; height:8px; border-radius:3px; }
.lwh-key i.k-on { background:color-mix(in srgb, var(--ldx-load) 80%, transparent); }
.lwh-key i.k-heavy { background:repeating-linear-gradient(135deg, var(--ldx-strain) 0 3px, color-mix(in srgb, var(--ldx-strain) 55%, #fff) 3px 4px); }
.lwh-key i.k-quiet { background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line); }
.lwh-key i.k-bring, .lwh-key i.k-ease, .lwh-key i.k-held { width:10px; height:10px; border-radius:50%; }
.lwh-key i.k-bring { box-shadow:inset 0 0 0 2px var(--ldx-strain); }
.lwh-key i.k-ease { box-shadow:inset 0 0 0 2px var(--jade); }
.lwh-key i.k-held { box-shadow:inset 0 0 0 2px var(--st-line); opacity:.8; }

/* next: the first sub-period ahead that brings something on */
.lwh-next { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px; align-items:start; padding-top:13px; border-top:1px solid var(--st-line-soft); }
.lwh-next-tx { display:grid; gap:5px; min-width:0; }
.lwh-next-tx b { font:500 14px/1.25 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }

/* the sky now: each planet the verses read, from your Moon */
.lwh-skywrap { padding-top:13px; border-top:1px solid var(--st-line-soft); }
.lwh-sky { list-style:none; display:flex; flex-wrap:wrap; gap:10px 12px; margin:0; padding:0; }
.lwh-sky li { position:relative; display:grid; justify-items:center; gap:4px; cursor:help; }
.lwh-sky li em { font:500 10.5px/1 var(--mono); font-style:normal; color:var(--dim); }
.lwh-sky li .lwh-badge { box-shadow:inset 0 0 0 1.5px var(--st-line); }
.lwh-sky li.st-plain .lwh-badge, .lwh-sky li.st-aggravated .lwh-badge { box-shadow:inset 0 0 0 2px var(--ldx-strain); }
.lwh-sky li.st-aggravated .lwh-badge { background:color-mix(in srgb, var(--ldx-strain) 22%, transparent); }
.lwh-sky li.st-relief .lwh-badge { box-shadow:inset 0 0 0 2px var(--jade); }
.lwh-sky li.st-void .lwh-badge, .lwh-sky li.st-harmless .lwh-badge { opacity:.45; }
.lwh-sky li.sharp::after { content:""; position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%;
  background:var(--ldx-strain); box-shadow:0 0 0 2px var(--st-card, var(--panel-2)); }

/* "+N more" is a button now, and looks like one: the accent line, no fill */
.lwh-chip.more, .lraR-more { color:rgb(var(--acc-rgb)); background:none; box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .45); }
.lwh-chip.more:hover, .lraR-more:hover { box-shadow:inset 0 0 0 1px rgb(var(--acc-rgb)); }
.lraR-more { justify-self:start; display:inline-flex; align-items:center; min-height:28px; padding:0 11px; border:0; border-radius:999px; cursor:pointer;
  font:500 12px/1.2 var(--body); }
.lraR-more:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
/* When across the whole width on a wide screen: now and next on the left, the years and the sky on the right */
@media (min-width:1000px) {
  #lal-dxsum > .lst-when { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); column-gap:26px; align-items:start; }
  #lal-dxsum > .lst-when > .lal-hd, #lal-dxsum > .lst-when > .ldx-names-note { grid-column:1 / -1; }
  #lal-dxsum > .lst-when > .lwh-now { grid-column:1; grid-row:2; }
  #lal-dxsum > .lst-when > .lwh-ahead { grid-column:2; grid-row:2; }
  #lal-dxsum > .lst-when > .lwh-next { grid-column:1; grid-row:3; }
  #lal-dxsum > .lst-when > .lwh-skywrap { grid-column:2; grid-row:3; }
  #lal-dxsum > .lst-when > .ldx-names-note { grid-row:4; }
}

/* every "N more" is a button (the user, 2026-09-24) */
.ldx-orgmore { justify-self:start; display:inline-flex; align-items:center; min-height:28px; padding:0 12px; border:0; border-radius:999px; cursor:pointer;
  font:500 12px/1.2 var(--body); color:rgb(var(--acc-rgb)); background:none; box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .45); }
.ldx-orgmore:hover, .lra-inmore:hover { box-shadow:inset 0 0 0 1px rgb(var(--acc-rgb)); }
.ldx-orgmore:focus-visible, .lra-inmore:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lra-inmore { display:inline-flex; align-items:center; min-height:24px; margin-left:2px; padding:0 9px; border:0; border-radius:999px; cursor:pointer; vertical-align:baseline;
  font:500 11.5px/1.2 var(--body); color:rgb(var(--acc-rgb)); background:none; box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .45); }

/* =====================================================================
   THE DRAWER'S FIRST STOP, REDESIGNED (the user, 2026-09-24: "the large buttons looks are very
   poor and breaking all aesthetics"; the breath widget "minimalistic … premium … studio look")
   ===================================================================== */
.lite-has-chart .litedrawer .liteacts { grid-template-columns:minmax(0, 1fr); gap:10px; padding:4px 14px 14px; }
@media (min-width:560px) { .lite-has-chart .litedrawer .liteacts { grid-template-columns:minmax(0, 1fr); } }

/* the three ways on: one quiet glass dock, the alignment marked by its gold */
.litedock { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  box-shadow:inset 0 0 0 1px rgba(240,213,126,.16), 0 12px 28px -20px rgba(0,0,0,.8); }
.litedock-b { position:relative; display:grid; justify-items:center; align-content:start; gap:7px; min-width:0; padding:13px 6px 12px;
  border:0; border-radius:0; background:none; color:var(--dr-ink); cursor:pointer; text-align:center; -webkit-tap-highlight-color:transparent;
  transition:background .2s var(--dr-ease, ease); }
.litedock-b + .litedock-b { box-shadow:inset 1px 0 0 rgba(240,213,126,.12); }
.litedock-b:hover { background:rgba(240,213,126,.06); }
.litedock-b:active { background:rgba(240,213,126,.11); }
.litedock-b:focus-visible { outline:2px solid var(--dr-lit); outline-offset:-4px; border-radius:18px; }
.litedock-ico { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:var(--dr-ink-2);
  box-shadow:inset 0 0 0 1px rgba(240,213,126,.28); }
.litedock-ico svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.litedock-tx { display:grid; gap:2px; min-width:0; }
.litedock-tx b { font:600 12.5px/1.25 var(--body); letter-spacing:.005em; color:var(--dr-ink); text-wrap:balance; }
.litedock-tx em { display:none; font:400 11px/1.3 var(--body); font-style:normal; color:var(--dr-ink-2); }
.litedock-b.lead .litedock-ico { color:#1B1406; background:radial-gradient(circle at 35% 30%, #FBEFC4, #E7C667 58%, #C9A227);
  box-shadow:0 0 0 3px rgba(240,213,126,.13), 0 6px 16px -6px rgba(201,162,39,.6); }
.litedock-b.lead .litedock-tx b { color:var(--dr-lit); }
@media (min-width:760px) {
  /* icon and label from the same top line in every cell: centred, each icon sat on its own label's height, so a
     shorter label (SwaraTantra's) lifted its icon out of line with the rest (the user, 2026-09-26) */
  .litedock-b { grid-template-columns:auto minmax(0, 1fr); justify-items:start; align-items:start; gap:12px; padding:14px 18px; text-align:left; }
  .litedock-tx { padding-top:1px; }
  .litedock-tx b { font-size:13.5px; }
  .litedock-tx em { display:block; }
}
@media (prefers-reduced-motion: reduce) { .litedock-b { transition:none; } }

/* the breath, once a first check is on record */
.lqk-host[hidden] { display:none; }
.lqk { display:grid; gap:10px; padding:11px 12px 12px 14px; border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(240,213,126,.16); }
.lqk-hd { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; min-width:0; }
.lqk-id { flex:1 1 150px; display:grid; gap:5px; min-width:0; }
.lqk-k { flex:0 0 auto; font:600 10px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dr-lit); }
.lqk .lal-next { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px; margin:0; padding:0; border:0; background:none; box-shadow:none; }
.lqk .lal-next::before, .lqk .lal-next::after { content:none; }
.lqk .lal-next i { flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--dr-ink-2); }
.lqk .lal-next.due i { background:var(--dr-lit); box-shadow:0 0 8px rgba(240,213,126,.7); }
.lqk .lal-next.done i { background:var(--jade); }
.lqk .lal-next-tx { display:block; min-width:0; }
/* the next check is never cut: the switch wraps under it before the time is lost (the user, 2026-09-24) */
.lqk .lal-next-tx b { display:block; white-space:normal; font:500 11.5px/1.25 var(--body); color:var(--dr-ink-2); }
.lqk .lal-next-tx span { display:none; }
.lqk-seg { flex:0 0 auto; display:inline-flex; margin-left:auto; padding:2px; border-radius:999px;
  background:rgba(0,0,0,.26); box-shadow:inset 0 0 0 1px rgba(240,213,126,.14); }
.lqk-seg button { min-height:24px; padding:0 10px; border:0; border-radius:999px; background:none; cursor:pointer;
  font:600 11px/1 var(--body); color:var(--dr-ink-2); }
.lqk-seg button[aria-selected="true"] { color:#1B1406; background:linear-gradient(180deg, #F6E3A2, #DDBA55); }
.lqk-seg button:focus-visible { outline:2px solid var(--dr-lit); outline-offset:1px; }
/* quick: the three sides, one tap each */
.lqk .lal-ans { gap:8px; }
.lqk .lal-ans button { grid-auto-flow:column; justify-content:center; align-items:center; gap:9px; min-height:44px; padding:0 8px; border-radius:14px; font-size:13px; }
.lqk .lal-ans button i { width:28px; height:12px; border-radius:6px; }
.lqk .lal-ans .n-ida i { background:radial-gradient(circle at 7px 6px, var(--soma) 0 4.6px, transparent 5px), radial-gradient(circle at 21px 6px, color-mix(in srgb, var(--ink) 14%, transparent) 0 4.6px, transparent 5px); }
.lqk .lal-ans .n-pingala i { background:radial-gradient(circle at 7px 6px, color-mix(in srgb, var(--ink) 14%, transparent) 0 4.6px, transparent 5px), radial-gradient(circle at 21px 6px, var(--sindoor) 0 4.6px, transparent 5px); }
.lqk .lal-ans .n-sushumna i { background:radial-gradient(circle at 7px 6px, var(--brass-hi) 0 4.6px, transparent 5px), radial-gradient(circle at 21px 6px, var(--brass-hi) 0 4.6px, transparent 5px); }
.lqk .lal-ans button.is-done i { width:22px; height:22px; background:color-mix(in srgb, var(--jade) 22%, transparent); }
.lqk .lal-ans button.is-done i .lfl-tick { width:13px; height:13px; }
.lqk .btopen, .lqk .lal-hint { display:none; }
.lqk .lal-bothq { gap:8px; }
/* detailed: the same reading as Record, inside the glass */
.lqk.detail { gap:12px; }
.lqk .lal-wiz { margin:0; }

/* the day theme: the same objects, drawn on the lighter glass */
:root[data-theme="light"].lite-app .litedock,
:root[data-theme="light"].lite-app .lqk { background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.38));
  box-shadow:inset 0 0 0 1px rgba(122,91,10,.18), 0 12px 28px -22px rgba(60,40,10,.45); }
:root[data-theme="light"].lite-app .litedock-b + .litedock-b { box-shadow:inset 1px 0 0 rgba(122,91,10,.14); }
:root[data-theme="light"].lite-app .litedock-ico { box-shadow:inset 0 0 0 1px rgba(122,91,10,.26); }
:root[data-theme="light"].lite-app .litedock-b:hover { background:rgba(122,91,10,.05); }
:root[data-theme="light"].lite-app .lqk-seg { background:rgba(122,91,10,.08); box-shadow:inset 0 0 0 1px rgba(122,91,10,.16); }

/* ==== BREATH TAP, THE FLAGSHIP (the user, 2026-09-27: "our flagship technology … a world class and a premium UI/UX
   design and theme"; "easy to operate by even a layman") =========================================================
   A dark room of its own, in both themes: the phone is held close under the nose, and a dark screen neither glares
   nor lights the face. One stage carries every step — a ring that breathes, the nose, the phone's bottom edge and the
   arrow between them — tinted by the side being read: moonlit violet for the left (Ida), sunlit coral for the right
   (Pingala), gold between. The Experimental mark stays sky, a colour no nostril uses. */
.btwrap { --bt-moon:176, 160, 238; --bt-sun:240, 134, 102; --bt-gold:238, 201, 110; --bt-exp:128, 188, 224; --bt-jade:98, 196, 152;
  --bt-ink:#F4F0E8; --bt-ink2:#C3BCD0; --bt-dim:#8F899F; --bt-line:rgba(255,255,255,.1); --bt-line2:rgba(255,255,255,.065); --bt-tile:rgba(255,255,255,.04);
  --bt-tint:var(--bt-gold);
  /* the drawer's own grain, a touch coarser (the user, 2026-09-27: "glassmorphic, translucent and coarse") */
  --bt-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .17 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position:fixed; inset:0; z-index:9000; display:flex; align-items:stretch; justify-content:center; overflow:hidden;
  background:rgba(4,4,9,.62); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); animation:btsFade .3s ease backwards; }
@keyframes btsFade { from { opacity:0; } }
/* the smoke behind the glass: calm, slow, turning colour (ui-breathtap.js btSmoke) */
.bts-smoke { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; pointer-events:none; opacity:.95; animation:btsFade 1.4s ease backwards; }
.btwrap.bts-nosmoke .bts-smoke { display:none; }
.btwrap.bts-nosmoke::before { content:""; position:absolute; inset:-25%; z-index:0; pointer-events:none;
  background:radial-gradient(38% 32% at 30% 28%, rgba(70,84,190,.42), transparent 70%), radial-gradient(42% 36% at 72% 58%, rgba(140,76,160,.36), transparent 70%),
    radial-gradient(40% 34% at 38% 82%, rgba(36,132,146,.34), transparent 70%);
  filter:blur(34px); animation:btsDrift 38s ease-in-out infinite alternate, btsHue 64s linear infinite; }
@keyframes btsDrift { from { transform:translate3d(-4%, 3%, 0) rotate(0deg); } to { transform:translate3d(4%, -4%, 0) rotate(8deg); } }
@keyframes btsHue { to { filter:blur(34px) hue-rotate(360deg); } }
/* the sheet: frosted glass over the smoke — a translucent tint, a mist from the top edge, the coarse grain */
.btwrap .btsheet { position:relative; z-index:1; display:flex; flex-direction:column; box-sizing:border-box; width:100%; max-width:560px; height:100%; overflow:hidden;
  color:var(--bt-ink); border:0;
  background:
    var(--bt-grain),
    radial-gradient(120% 110px at 50% 0%, rgba(246,222,147,.1), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 220px, rgba(255,255,255,0) 480px),
    radial-gradient(95% 52% at 50% 26%, rgba(var(--bt-tint), .12), transparent 70%),
    linear-gradient(180deg, rgba(12,11,18,.34) 0%, rgba(9,9,13,.42) 55%, rgba(6,6,9,.56) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.05);
  animation:btsUp .36s cubic-bezier(.22,.9,.24,1) backwards; }
@keyframes btsUp { from { opacity:.4; transform:translateY(24px); } }
.btsheet[data-side="left"] { --bt-tint:var(--bt-moon); }
.btsheet[data-side="right"] { --bt-tint:var(--bt-sun); }
@media (min-width:640px) {
  .btwrap { align-items:center; padding:24px; }
  /* a card of real frosted glass over the smoke: there is room around it to see the smoke move */
  .btwrap .btsheet { height:auto; max-height:min(94vh, 940px); border-radius:32px;
    -webkit-backdrop-filter:blur(22px) saturate(1.35); backdrop-filter:blur(22px) saturate(1.35);
    box-shadow:0 50px 100px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.08); }
}

/* ---- the arrow on the phone itself (the user, 2026-09-27: "arrows just to the exact spot on the phone lower side
   screen … so that user has no confusion in finding the spot"): at the very bottom of the screen, over the place on
   the bottom edge where the breath should land — left end, middle or right end. It slides from spot to spot while
   the microphone is found, turns gold on the one that heard best, and stays there while the phone is held in place.
   A phone only: on a larger screen the microphone is not under it. ---- */
.bts-foot.ptr { padding-bottom:0; }
.bts-ptr { position:relative; height:calc(58px + env(safe-area-inset-bottom)); margin:0 -18px; pointer-events:none; }
.bts-ptr-ar { position:absolute; bottom:0; width:34px; margin-left:-17px; display:grid; justify-items:center; transition:left .7s cubic-bezier(.22,.9,.24,1); }
.bts-ptr-ar svg { width:34px; height:52px; overflow:visible; fill:none; stroke:rgb(var(--bt-tint)); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(var(--bt-tint), .9)); }
.bts-ptr-ar::after { content:""; position:absolute; bottom:-10px; left:50%; width:58px; height:22px; margin-left:-29px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--bt-tint), .75), rgba(var(--bt-tint), 0)); }
.bts-ptr-lab { position:absolute; bottom:calc(26px + env(safe-area-inset-bottom)); max-width:48%; font:600 11px/1.2 var(--body); letter-spacing:.04em; color:rgb(var(--bt-tint));
  white-space:nowrap; transition:left .7s cubic-bezier(.22,.9,.24,1), right .7s cubic-bezier(.22,.9,.24,1); }
.bts-ptr[data-cue="out"] .bts-ptr-ar svg, .bts-ptr[data-cue="aim"] .bts-ptr-ar svg { animation:btsPoint .9s ease-in-out infinite; }
.bts-ptr[data-cue="lead"] .bts-ptr-ar svg, .bts-ptr[data-cue="in"] .bts-ptr-ar svg { animation:btsPoint 2.4s ease-in-out infinite; }
.bts-ptr.best { --bt-tint:var(--bt-gold); }
/* the nostril being read, named over the arrow in its own light (2026-10-14) */
.bts-ptr.has-side { height:calc(100px + env(safe-area-inset-bottom)); }
.bts-ptr-side { position:absolute; bottom:calc(60px + env(safe-area-inset-bottom)); left:clamp(78px, var(--x, 50%), calc(100% - 78px)); transform:translateX(-50%);
  padding:8px 15px; border-radius:999px; white-space:nowrap; background:rgb(var(--bt-tint)); box-shadow:0 0 0 4px rgba(var(--bt-tint), .24), 0 8px 22px -8px rgba(var(--bt-tint), .9);
  transition:left .7s cubic-bezier(.22,.9,.24,1); }
.bts-ptr-side b { font:800 15px/1 var(--body); letter-spacing:.09em; text-transform:uppercase; color:#100D18; }
@keyframes btsPoint { 0%, 100% { transform:translateY(-4px); } 50% { transform:translateY(3px); } }
@media (min-width:640px), (pointer:fine) { .bts-ptr { display:none; } .bts-foot.ptr { padding-bottom:calc(14px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .bts-ptr-ar svg, .btwrap.bts-nosmoke::before, .bts-smoke { animation:none !important; } .bts-ptr-ar, .bts-ptr-lab { transition:none; } }

/* the head: the mark, the name with its Experimental badge, the step's title, the close disc */
.bts-hd { flex:none; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; padding:calc(12px + env(safe-area-inset-top)) 16px 14px 18px; }
@media (min-width:640px) { .bts-hd { padding-top:18px; } }
.bts-mk { display:grid; place-items:center; width:38px; height:38px; border-radius:13px;
  background:radial-gradient(circle at 30% 25%, rgba(var(--bt-tint), .34), rgba(var(--bt-tint), .08)); box-shadow:inset 0 0 0 1px rgba(var(--bt-tint), .42), 0 8px 22px -10px rgba(var(--bt-tint), .8); }
.bts-mk svg { width:18px; height:18px; fill:none; stroke:rgb(var(--bt-tint)); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bts-brand { display:grid; gap:4px; min-width:0; }
.bts-k { display:flex; align-items:center; gap:8px; min-width:0; }
.bts-k b { font:600 10.5px/1.1 var(--body); letter-spacing:.22em; text-transform:uppercase; color:rgb(var(--bt-tint)); white-space:nowrap; }
.bts-exp { display:inline-flex; align-items:center; gap:4px; padding:3px 8px 3px 6px; border-radius:999px; font:700 8.5px/1 var(--body); font-style:normal; letter-spacing:.12em;
  text-transform:uppercase; color:rgb(var(--bt-exp)); background:rgba(var(--bt-exp), .1); box-shadow:inset 0 0 0 1px rgba(var(--bt-exp), .42); white-space:nowrap; }
.bts-exp svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bts-brand > em { font:400 18px/1.2 var(--display); font-style:normal; letter-spacing:-.005em; color:var(--bt-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bts-x { display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:50%; cursor:pointer; color:var(--bt-ink2);
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--bt-line); -webkit-tap-highlight-color:transparent; }
.bts-x svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.bts-x:hover { color:var(--bt-ink); }
.bts-x:focus-visible, .bts-go:focus-visible, .bts-quiet:focus-visible, .bts-chips button:focus-visible, .bts-shapes button:focus-visible,
.bts-reach button:focus-visible, .bts-tile.ask:focus-visible, .bts-learnc summary:focus-visible, .bts-fold summary:focus-visible { outline:2px solid rgb(var(--bt-gold)); outline-offset:2px; }

/* where the scan is: four fine bars */
/* room to breathe between the heading, the progress and what follows (the user, 2026-09-28: "very close") */
.bts-steps { flex:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin:0; padding:4px 18px 14px; list-style:none; }
.bts-steps li { display:grid; gap:7px; min-width:0; }
.bts-steps li i { display:block; height:3px; border-radius:2px; background:var(--bt-line); }
.bts-steps li.done i { background:rgba(var(--bt-jade), .7); }
.bts-steps li.on i { background:rgb(var(--bt-tint)); box-shadow:0 0 10px rgba(var(--bt-tint), .7); }
.bts-steps span { font:600 9px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--bt-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bts-steps li.on span { color:var(--bt-ink); }
.bts-steps li.done span { color:var(--bt-ink2); }

/* the body scrolls; the actions stay at the bottom, within reach of the thumb */
.bts-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:16px; padding:10px 18px 18px; }
.bts-body.enter > * { animation:btsIn .44s cubic-bezier(.22,.9,.24,1) backwards; }
.bts-body.enter > *:nth-child(2) { animation-delay:.05s; }
.bts-body.enter > *:nth-child(3) { animation-delay:.1s; }
.bts-body.enter > *:nth-child(n+4) { animation-delay:.14s; }
@keyframes btsIn { from { opacity:0; transform:translateY(10px); } }
.bts-foot { flex:none; padding:12px 18px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--bt-line2);
  background:linear-gradient(180deg, rgba(10,9,15,.12), rgba(6,6,10,.42)); }
.bts-foot:empty { display:none; }

/* ---- the stage ---- */
.bts-stage { position:relative; flex:none; width:min(76vw, 320px, 44svh); aspect-ratio:1; margin:2px auto 0; }
.bts-stage::before { content:""; position:absolute; inset:-16%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--bt-tint), .17), rgba(var(--bt-tint), .05) 60%, transparent 76%); }
.bts-stage svg { position:relative; display:block; width:100%; height:100%; overflow:visible; }
.bts-track { fill:none; stroke:var(--bt-line); stroke-width:1.5; }
.bts-prog { fill:none; stroke:rgb(var(--bt-tint)); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:100 100;
  filter:drop-shadow(0 0 5px rgba(var(--bt-tint), .7)); transition:stroke-dashoffset .12s linear; }
.bts-glow { fill:rgba(var(--bt-tint), .09); stroke:rgba(var(--bt-tint), .34); stroke-width:1; transform-origin:150px 150px; transform:scale(.84); opacity:.35;
  transition:transform .16s linear, opacity .2s linear; }
.bts-stage[data-mode="idle"] .bts-glow { animation:btsIdle 6.5s ease-in-out infinite; }
@keyframes btsIdle { 0%, 100% { transform:scale(.86); opacity:.35; } 50% { transform:scale(.98); opacity:.75; } }
.bts-nose .br, .bts-nose .wing { fill:none; stroke:rgba(244,240,232,.78); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bts-nose .ns { fill:#07070B; stroke:rgba(244,240,232,.5); stroke-width:1.2; transition:fill .3s, stroke .3s; }
.bts-nose .ns.on { fill:rgba(var(--bt-tint), .4); stroke:rgb(var(--bt-tint)); filter:drop-shadow(0 0 5px rgba(var(--bt-tint), .95)); }
.bts-phone { fill:none; stroke:url(#bts-ph); stroke-width:1.7; stroke-linejoin:round; }
.bts-spot .pt { fill:#08080C; stroke:rgba(244,240,232,.36); stroke-width:1.5; }
.bts-spot .lv { fill:rgba(var(--bt-tint), .26); transition:y .12s linear, height .12s linear; }
.bts-spot .nm { font:500 9px var(--mono); letter-spacing:.04em; fill:var(--bt-dim); text-anchor:middle; }
.bts-spot .db { font:600 10px var(--mono); fill:var(--bt-ink); text-anchor:middle; }
.bts-spot.now .pt { stroke:rgb(var(--bt-tint)); fill:rgba(var(--bt-tint), .32); animation:btsPt 1.2s ease-in-out infinite; }
.bts-spot.now .lv { fill:rgba(var(--bt-tint), .6); }
.bts-spot.now .nm, .bts-spot.best .nm { fill:rgb(var(--bt-tint)); font-weight:600; }
.bts-spot.done .pt { stroke:rgba(var(--bt-jade), .85); fill:rgba(var(--bt-jade), .28); }
.bts-spot.done .lv { fill:rgba(var(--bt-jade), .38); }
.bts-spot.best .pt { stroke:rgb(var(--bt-gold)); fill:rgb(var(--bt-gold)); filter:drop-shadow(0 0 6px rgba(var(--bt-gold), .9)); }
.bts-spot.best .lv { fill:rgba(var(--bt-gold), .62); }
.bts-spot.dim { opacity:.42; }
@keyframes btsPt { 0%, 100% { stroke-width:1.5; } 50% { stroke-width:4.5; } }
.bts-arrow .ln { stroke:rgba(var(--bt-tint), .6); stroke-width:1.8; stroke-linecap:round; stroke-dasharray:240; stroke-dashoffset:0; }
.bts-arrow .hd { fill:rgb(var(--bt-tint)); }
.bts-arrow .flow { stroke:rgb(var(--bt-tint)); stroke-width:2.8; stroke-linecap:round; stroke-dasharray:1 9; opacity:0; }
.bts-stage[data-cue="out"] .bts-arrow .flow { opacity:1; animation:btsFlow .8s linear infinite; }
.bts-stage[data-cue="in"] .bts-arrow .flow { opacity:.4; animation:btsFlow 1.4s linear infinite reverse; }
.bts-stage[data-cue="aim"] .bts-arrow .ln { animation:btsDraw .7s cubic-bezier(.22,.9,.24,1) backwards; }
.bts-stage[data-cue="aim"] .bts-arrow .hd { animation:btsFade .3s ease .45s backwards; }
@keyframes btsFlow { to { stroke-dashoffset:-20; } }
@keyframes btsDraw { from { stroke-dashoffset:240; } }
.bts-stage[data-mode="done"] .bts-arrow .ln, .bts-stage[data-mode="ready"] .bts-arrow .ln { stroke:rgba(var(--bt-gold), .85); stroke-width:2.2; }
.bts-stage[data-mode="done"] .bts-arrow .hd { fill:rgb(var(--bt-gold)); filter:drop-shadow(0 0 6px rgba(var(--bt-gold), .9)); }
.bts-stage[data-mode="done"] .bts-arrow .ln { animation:btsDraw .9s cubic-bezier(.22,.9,.24,1) .15s backwards; }

/* the words under the stage */
.bts-cue { display:grid; justify-items:center; gap:7px; min-height:66px; text-align:center; }
.bts-cue b { font:400 clamp(26px, 7.4vw, 34px)/1.08 var(--display); letter-spacing:-.012em; color:var(--bt-ink); text-wrap:balance; }
.bts-cue em { max-width:34ch; font:500 12.5px/1.4 var(--body); font-style:normal; color:var(--bt-ink2); }
.bts-hint, .bts-lede { max-width:36ch; margin:0 auto; text-align:center; font:400 14px/1.5 var(--body); color:var(--bt-ink2); text-wrap:pretty; }
.bts-lede { font-size:15px; color:var(--bt-ink); }
.bts-meter { display:flex; align-items:center; justify-content:center; gap:4px; margin:0; font:500 12px/1 var(--body); color:var(--bt-dim); }
.bts-meter i { width:5px; height:14px; border-radius:3px; background:var(--bt-line); transform:scaleY(.45); transition:background .15s, transform .15s; }
.bts-meter i.on { background:rgb(var(--bt-jade)); transform:scaleY(1); }
.bts-meter span { margin-left:8px; }
.bts-meter.hearing span { color:var(--bt-ink2); }
.bts-count { display:grid; justify-items:center; gap:10px; text-align:center; }
.bts-count b { font:300 58px/1 var(--display); color:rgb(var(--bt-tint)); text-shadow:0 0 26px rgba(var(--bt-tint), .55); font-variant-numeric:tabular-nums; }
.bts-count span { max-width:30ch; font:400 15px/1.45 var(--body); color:var(--bt-ink2); }
.bts-count em { font-style:normal; font-weight:600; color:var(--bt-ink); }
.bts-big { display:flex; align-items:baseline; justify-content:center; gap:8px; margin:-4px 0 -6px; }
.bts-big b { font:300 64px/1 var(--display); color:var(--bt-ink); font-variant-numeric:tabular-nums; text-shadow:0 0 30px rgba(var(--bt-tint), .4); }
.bts-big span { font:600 11px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--bt-dim); }
.bts-found { display:grid; justify-items:center; gap:7px; text-align:center; }
.bts-found span { font:600 10px/1 var(--body); letter-spacing:.24em; text-transform:uppercase; color:rgb(var(--bt-gold)); }
.bts-found b { font:400 34px/1.08 var(--display); letter-spacing:-.01em; color:var(--bt-ink); }
.bts-found em { max-width:34ch; font:400 13.5px/1.45 var(--body); font-style:normal; color:var(--bt-ink2); }
.bts-warn { margin:0; text-align:center; font:500 13px/1.45 var(--body); color:rgb(var(--bt-sun)); }

/* the first screen */
.bts-intro { display:grid; gap:16px; }
.bts-how { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.bts-how li { display:grid; grid-template-columns:42px minmax(0, 1fr); align-items:center; gap:12px; padding:12px 14px; border-radius:18px;
  background:var(--bt-tile); box-shadow:inset 0 0 0 1px var(--bt-line2); }
.bts-how i { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:rgba(var(--bt-tint), .1); box-shadow:inset 0 0 0 1px rgba(var(--bt-tint), .3); }
.bts-how i svg { width:20px; height:20px; fill:none; stroke:rgb(var(--bt-tint)); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.bts-how span { display:grid; gap:3px; min-width:0; }
.bts-how b { font:600 14px/1.25 var(--body); color:var(--bt-ink); }
.bts-how em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--bt-dim); }
@media (min-width:520px) {
  .bts-how { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .bts-how li { grid-template-columns:1fr; justify-items:start; align-content:start; }
}
.bts-priv { display:flex; align-items:center; justify-content:center; gap:8px; margin:0; text-align:center; font:400 12px/1.4 var(--body); color:var(--bt-dim); }
.bts-priv svg { flex:none; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* what it has learned: three meters */
.bts-learnc { border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px var(--bt-line2); }
.bts-learnc summary { display:grid; grid-template-columns:38px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; list-style:none; border-radius:22px; }
.bts-learnc summary::-webkit-details-marker, .bts-fold summary::-webkit-details-marker { display:none; }
.bts-learnc summary .ic { display:grid; place-items:center; width:38px; height:38px; border-radius:13px; background:rgba(var(--bt-gold), .12); box-shadow:inset 0 0 0 1px rgba(var(--bt-gold), .36); }
.bts-learnc summary .ic svg { width:18px; height:18px; fill:none; stroke:rgb(var(--bt-gold)); stroke-width:1.6; stroke-linejoin:round; }
.bts-learnc summary b { display:block; font:600 14px/1.25 var(--body); color:var(--bt-ink); }
.bts-learnc summary em { display:block; margin-top:4px; font:500 10.5px/1.35 var(--mono); font-style:normal; color:var(--bt-dim); }
.bts-learnc summary::after, .bts-fold summary::after { content:""; width:7px; height:7px; margin:0 3px 3px 2px; border-right:1.6px solid var(--bt-dim); border-bottom:1.6px solid var(--bt-dim);
  transform:rotate(45deg); transition:transform .2s; }
.bts-learnc[open] summary::after, .bts-fold[open] summary::after { margin-bottom:-3px; transform:rotate(225deg); }
.bts-lms { display:grid; gap:14px; padding:0 16px 16px; }
.bts-lm { display:grid; gap:9px; padding-top:14px; border-top:1px solid var(--bt-line2); }
.bts-lm-hd { display:flex; align-items:center; gap:10px; min-width:0; }
.bts-lm-hd .ic svg { display:block; width:17px; height:17px; fill:none; stroke:var(--bt-ink2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.bts-lm-hd b { flex:1; min-width:0; font:600 13px/1.25 var(--body); color:var(--bt-ink); }
.bts-chip { flex:none; padding:4px 9px; border-radius:999px; font:600 10px/1 var(--body); font-style:normal; letter-spacing:.03em; white-space:nowrap; }
.bts-chip.g { color:rgb(var(--bt-gold)); background:rgba(var(--bt-gold), .1); box-shadow:inset 0 0 0 1px rgba(var(--bt-gold), .36); }
.bts-chip.t { color:rgb(var(--bt-exp)); background:rgba(var(--bt-exp), .1); box-shadow:inset 0 0 0 1px rgba(var(--bt-exp), .4); }
.bts-chip.ok { color:rgb(var(--bt-jade)); background:rgba(var(--bt-jade), .1); box-shadow:inset 0 0 0 1px rgba(var(--bt-jade), .45); }
.bts-chip.no { color:var(--bt-dim); background:var(--bt-tile); box-shadow:inset 0 0 0 1px var(--bt-line); }
.bts-lm-bar { height:6px; border-radius:3px; background:var(--bt-line2); overflow:hidden; }
.bts-lm-bar i { display:block; height:100%; min-width:2px; border-radius:3px; background:linear-gradient(90deg, rgba(var(--bt-gold), .5), rgb(var(--bt-gold))); box-shadow:0 0 12px rgba(var(--bt-gold), .55); }
.bts-lm-n { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 6px; }
.bts-lm-n b { font:400 24px/1 var(--display); color:var(--bt-ink); font-variant-numeric:tabular-nums; }
.bts-lm-n span { font:500 11px/1 var(--mono); color:var(--bt-dim); }
.bts-lm-n em { flex-basis:100%; font:400 12px/1.4 var(--body); font-style:normal; color:var(--bt-dim); }
.bts-lm-dials { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
.bts-lm-dials.four { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.bts-lm-dials span { display:grid; justify-items:center; gap:5px; min-width:0; }
.bts-lm-dials em { font:500 9.5px/1.2 var(--mono); font-style:normal; color:var(--bt-dim); text-align:center; }
.bts-dial { display:block; width:40px; height:40px; }
.bts-dial .t { fill:none; stroke:var(--bt-line); stroke-width:2.4; }
.bts-dial .p { fill:none; stroke:rgb(var(--bt-gold)); stroke-width:2.4; stroke-linecap:round; }
.bts-dial .in { fill:none; stroke:var(--bt-ink2); stroke-width:1.8; stroke-linejoin:round; }
.bts-dial .rn { font:600 10px var(--body); fill:var(--bt-ink); text-anchor:middle; }
.bts-lm-dials .full .bts-dial .p { stroke:rgb(var(--bt-jade)); }
.bts-lm-dials .full em { color:rgb(var(--bt-jade)); }

/* the reading: the nose, the words, how sure */
.bts-hero { --hero:var(--bt-gold); display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px 14px; padding:18px 16px 16px; border-radius:26px;
  background:radial-gradient(120% 90% at 0% 0%, rgba(var(--hero), .22), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(var(--hero), .42), 0 26px 54px -34px rgba(var(--hero), .85); }
.bts-hero[data-state="ida"] { --hero:var(--bt-moon); }
.bts-hero[data-state="pingala"] { --hero:var(--bt-sun); }
.bts-bignose { width:76px; height:54px; }
.bts-bignose .br, .bts-bignose .wing { fill:none; stroke:rgba(244,240,232,.72); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bts-bignose .ns { fill:#07070B; stroke:rgba(244,240,232,.45); stroke-width:1.5; }
.bts-bignose .ns.l.on { fill:rgb(var(--bt-moon)); stroke:rgb(var(--bt-moon)); filter:drop-shadow(0 0 6px rgba(var(--bt-moon), .95)); }
.bts-bignose .ns.r.on { fill:rgb(var(--bt-sun)); stroke:rgb(var(--bt-sun)); filter:drop-shadow(0 0 6px rgba(var(--bt-sun), .95)); }
.bts-hero[data-state="vishuvat"] .bts-bignose .ns.on, .bts-hero[data-state="vishama"] .bts-bignose .ns.on { fill:rgb(var(--bt-gold)); stroke:rgb(var(--bt-gold)); filter:drop-shadow(0 0 6px rgba(var(--bt-gold), .9)); }
.bts-hero-tx { min-width:0; }
.bts-hero-tx b { display:block; font:400 22px/1.15 var(--display); letter-spacing:-.01em; color:var(--bt-ink); text-wrap:balance; }
.bts-hero-tx em { display:block; margin-top:5px; font:500 11.5px/1.3 var(--body); font-style:normal; color:var(--bt-ink2); }
.bts-sure { position:relative; display:grid; place-items:center; width:58px; height:58px; }
.bts-sure .bts-dial { position:absolute; inset:0; width:100%; height:100%; }
.bts-sure .bts-dial .p { stroke:rgb(var(--hero)); }
.bts-sure b { margin-top:-7px; font:600 14px/1 var(--body); color:var(--bt-ink); font-variant-numeric:tabular-nums; }
.bts-sure span { position:absolute; bottom:13px; font:600 7.5px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--bt-dim); }
.bts-sure.low b { color:rgb(var(--bt-sun)); }
.bts-split { grid-column:1 / -1; display:flex; gap:3px; height:10px; }
.bts-split i { display:block; min-width:0; height:100%; border-radius:5px; }
.bts-split .l { background:linear-gradient(90deg, rgba(var(--bt-moon), .45), rgb(var(--bt-moon))); }
.bts-split .r { background:linear-gradient(90deg, rgb(var(--bt-sun)), rgba(var(--bt-sun), .45)); }
.bts-split-k { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:baseline; gap:8px; font:500 11px/1 var(--mono); color:var(--bt-dim); }
.bts-split-k b { font-weight:600; color:var(--bt-ink); }
.bts-split-k em { font-style:normal; opacity:.8; }
.bts-by { grid-column:1 / -1; margin:0; font:400 11.5px/1.4 var(--body); color:var(--bt-dim); }
.bts-by b { font-weight:600; color:rgb(var(--bt-sun)); }

/* the measures */
.bts-h { margin:4px 0 -6px; font:600 10.5px/1 var(--body); letter-spacing:.22em; text-transform:uppercase; color:var(--bt-dim); }
.bts-tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.bts-tile { display:grid; align-content:start; gap:5px; min-width:0; margin:0; padding:13px 14px; border:0; border-radius:18px; text-align:left; font:inherit; color:inherit;
  background:var(--bt-tile); box-shadow:inset 0 0 0 1px var(--bt-line2); }
.bts-tile.wide { grid-column:1 / -1; }
.bts-tile span { font:600 9.5px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--bt-dim); }
.bts-tile b { font:500 15px/1.3 var(--body); color:var(--bt-ink); }
.bts-tile em { font:400 11.5px/1.35 var(--body); font-style:normal; color:var(--bt-dim); }
.bts-tile.dim b { color:var(--bt-ink2); font-weight:400; }
.bts-tile.ask { grid-column:1 / -1; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg, rgba(var(--bt-gold), .09), rgba(var(--bt-gold), .03)); box-shadow:inset 0 0 0 1px rgba(var(--bt-gold), .32); }
.bts-tile.ask b { display:inline-flex; align-items:center; gap:7px; color:rgb(var(--bt-gold)); font-weight:600; }
.bts-tile.ask b svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bts-tile.ask:hover { background:linear-gradient(180deg, rgba(var(--bt-gold), .13), rgba(var(--bt-gold), .05)); }
@media (min-width:420px) { .bts-tile.ask { grid-column:auto; } }
.bts-tile.lit { animation:btsLit 1.8s ease-out; }
@keyframes btsLit { 0% { box-shadow:inset 0 0 0 1px rgba(var(--bt-jade), .95), 0 0 0 5px rgba(var(--bt-jade), .22); } 100% { box-shadow:inset 0 0 0 1px var(--bt-line2), 0 0 0 0 transparent; } }

/* teaching it */
.bts-teach { display:grid; gap:12px; }
.bts-teach > .bts-h { margin-bottom:-2px; }
.bts-ask { display:grid; gap:10px; }
.bts-ask > b { font:600 14px/1.3 var(--body); color:var(--bt-ink); }
.bts-chips { display:flex; flex-wrap:wrap; gap:6px; }
.bts-chips button { height:38px; padding:0 14px; border:0; border-radius:999px; cursor:pointer; font:500 13px/1 var(--body); color:var(--bt-ink2);
  background:var(--bt-tile); box-shadow:inset 0 0 0 1px var(--bt-line); -webkit-tap-highlight-color:transparent; }
.bts-chips button[aria-pressed="true"] { color:var(--bt-ink); background:rgba(var(--bt-gold), .16); box-shadow:inset 0 0 0 1px rgba(var(--bt-gold), .62); }
.bts-fold { padding:0 14px; border-radius:18px; background:var(--bt-tile); box-shadow:inset 0 0 0 1px var(--bt-line2); }
.bts-fold[open] { padding-bottom:14px; }
.bts-fold summary { display:flex; align-items:center; gap:10px; min-height:50px; cursor:pointer; list-style:none; font:600 13.5px/1.3 var(--body); color:var(--bt-ink); }
.bts-fold summary em { margin-left:auto; font:500 11.5px/1 var(--body); font-style:normal; color:var(--bt-dim); }
.bts-fold > p { margin:0; }
.bts-shapes { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:12px; }
.bts-shapes button { display:grid; justify-items:center; gap:6px; min-width:0; padding:12px 4px 10px; border:0; border-radius:14px; cursor:pointer; font:500 11.5px/1.25 var(--body);
  color:var(--bt-ink2); background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px var(--bt-line2); -webkit-tap-highlight-color:transparent; }
.bts-shapes button[aria-pressed="true"] { color:var(--bt-ink); background:rgba(var(--bt-gold), .12); box-shadow:inset 0 0 0 1px rgba(var(--bt-gold), .62); }
.bts-shapes svg { width:26px; height:26px; fill:none; stroke:rgb(var(--bt-gold)); stroke-width:1.6; }
.bts-reach { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-top:12px; }
.bts-reach button { display:grid; justify-items:center; gap:4px; min-width:0; padding:12px 4px; border:0; border-radius:14px; cursor:pointer; color:var(--bt-ink2);
  background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px var(--bt-line2); -webkit-tap-highlight-color:transparent; }
.bts-reach b { font:400 22px/1 var(--display); color:var(--bt-ink); }
.bts-reach span { font:500 10px/1 var(--body); color:var(--bt-dim); }
.bts-reach button[aria-pressed="true"] { background:rgba(var(--bt-gold), .12); box-shadow:inset 0 0 0 1px rgba(var(--bt-gold), .62); }

/* the actions: gold to go on, glass for the rest */
.bts-acts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.bts-acts > .bts-go, .bts-acts > .bts-quiet:only-child, .bts-acts > .bts-go + .bts-quiet:last-child { grid-column:1 / -1; }
/* every button in the page's own glass (the user, 2026-09-27: "glassmorphic with coarse grain, but a little more
   blurred or translucent to the smoky background"): the grain, a translucent tint and the smoke blurred behind it.
   The way on is the same glass warmed with gold — a gold rim and gold letters — so it still leads. */
.bts-go, .bts-quiet { border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:filter .2s, transform .15s;
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); }
.bts-go { height:54px; border-radius:18px; font:600 15.5px/1 var(--body); letter-spacing:.01em; color:#FBEFC8; text-shadow:0 0 14px rgba(246,222,147,.45);
  background:var(--bt-grain), radial-gradient(120% 140% at 50% -30%, rgba(255,240,196,.34), transparent 60%), linear-gradient(180deg, rgba(246,222,147,.24), rgba(214,178,74,.10));
  box-shadow:inset 0 1px 0 rgba(255,246,214,.5), inset 0 0 0 1px rgba(246,222,147,.58), 0 16px 34px -18px rgba(214,178,74,.75), 0 0 24px -10px rgba(246,222,147,.45); }
.bts-quiet { min-width:0; height:48px; padding:0 12px; border-radius:16px; font:600 13.5px/1 var(--body); color:var(--bt-ink);
  background:var(--bt-grain), linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.14), 0 12px 26px -18px rgba(0,0,0,.7); }
.bts-go:hover, .bts-quiet:hover { filter:brightness(1.12); }
.bts-go:active, .bts-quiet:active { transform:scale(.985); }
/* the smaller ones: the close disc, the answers, the forms, the widths, the tiles that measure — the same glass */
.btwrap .bts-x, .btwrap .bts-chips button, .btwrap .bts-shapes button, .btwrap .bts-reach button, .btwrap .bts-tile.ask {
  -webkit-backdrop-filter:blur(14px) saturate(1.35); backdrop-filter:blur(14px) saturate(1.35); }
.btwrap .bts-x, .btwrap .bts-chips button, .btwrap .bts-shapes button, .btwrap .bts-reach button {
  background:var(--bt-grain), linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.12); }
.btwrap .bts-chips button[aria-pressed="true"], .btwrap .bts-shapes button[aria-pressed="true"], .btwrap .bts-reach button[aria-pressed="true"] {
  color:var(--bt-ink); background:var(--bt-grain), linear-gradient(180deg, rgba(246,222,147,.22), rgba(214,178,74,.08)); box-shadow:inset 0 1px 0 rgba(255,246,214,.35), inset 0 0 0 1px rgba(246,222,147,.62); }
.btwrap .bts-tile.ask { background:var(--bt-grain), linear-gradient(180deg, rgba(246,222,147,.13), rgba(246,222,147,.04)); box-shadow:inset 0 1px 0 rgba(255,246,214,.2), inset 0 0 0 1px rgba(246,222,147,.34); }
.btwrap .bts-foot { border-top-color:rgba(255,255,255,.05); background:transparent; }

/* ---- the mirror test, shown (ui-lite-mirror.js; the user, 2026-09-27: "a highly professional and more visual guide … our
   flagship guide on the mirror test"): the face in profile breathing onto a phone held flat, five steps, and five squares of
   dark glass in which a breath's mist evaporates into its form and is gone ---- */
.btm { display:grid; gap:18px; }
.btm-lede { margin:0; font:400 15px/1.5 var(--body); color:var(--bt-ink); text-wrap:pretty; }
.btm-fig { margin:0; padding:14px 10px 14px; border-radius:24px;
  background:radial-gradient(80% 70% at 42% 55%, rgba(var(--bt-gold), .09), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px var(--bt-line2); }
.btm-face { display:block; width:100%; height:auto; overflow:visible; }
.btm-head path { fill:none; stroke:rgba(244,240,232,.86); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.btm-head .soft { stroke:rgba(244,240,232,.4); }
.btm-nos { fill:rgba(244,240,232,.16); stroke:rgba(244,240,232,.72); stroke-width:1.1; }
.btm-breath path { fill:none; stroke:rgb(var(--bt-gold)); stroke-width:1.8; stroke-linecap:round; stroke-dasharray:2 6; animation:btmFlow .9s linear infinite, btmOut 6.4s ease-in-out infinite; }
.btm-breath path:nth-child(2) { animation-delay:-.3s, 0s; }
.btm-breath path:nth-child(3) { animation-delay:-.6s, 0s; }
@keyframes btmFlow { to { stroke-dashoffset:-16; } }
@keyframes btmOut { 0%, 4% { opacity:0; } 10%, 36% { opacity:1; } 46%, 100% { opacity:0; } }
.btm-scr { fill:url(#btm-scr); stroke:rgba(200,220,240,.55); stroke-width:1.1; stroke-linejoin:round; }
.btm-edge { fill:#0A0C12; stroke:rgba(200,220,240,.32); stroke-width:1; stroke-linejoin:round; }
.btm-sheen { fill:none; stroke:rgba(255,255,255,.2); stroke-width:1.2; stroke-linecap:round; }
.btm-mist { fill:url(#btm-mist); transform-box:fill-box; transform-origin:center; animation:btmMist 6.4s ease-in-out infinite; }
@keyframes btmMist { 0%, 14% { opacity:0; transform:scale(.4); } 30% { opacity:1; transform:scale(1); } 52% { opacity:.9; transform:scale(.92); } 80%, 100% { opacity:0; transform:scale(.6); } }
.btm-brk { fill:none; stroke:rgb(var(--bt-gold)); stroke-width:1; }
.btm-lead { fill:none; stroke:rgba(244,240,232,.3); stroke-width:.8; }
.btm-lab { font:500 9.5px var(--body); fill:rgba(244,240,232,.74); }
.btm-lab.g { font-weight:600; fill:rgb(var(--bt-gold)); }
.btm-fig figcaption { margin:6px 8px 0; text-align:center; font:400 12.5px/1.45 var(--body); color:var(--bt-ink2); text-wrap:balance; }
.btm-steps { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.btm-steps li { display:grid; grid-template-columns:28px minmax(0, 1fr); gap:12px; align-items:start; padding:12px 14px; border-radius:18px; background:var(--bt-tile); box-shadow:inset 0 0 0 1px var(--bt-line2); }
.btm-steps i { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:600 12px/1 var(--mono); font-style:normal; color:rgb(var(--bt-gold));
  background:rgba(var(--bt-gold), .08); box-shadow:inset 0 0 0 1px rgba(var(--bt-gold), .5); }
.btm-steps span { display:grid; gap:3px; min-width:0; padding-top:3px; }
.btm-steps b { font:600 14px/1.3 var(--body); color:var(--bt-ink); }
.btm-steps em { font:400 12.5px/1.45 var(--body); font-style:normal; color:var(--bt-ink2); }
.btm-tiles { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 10px; }
.btm-tile { flex:0 0 calc((100% - 20px) / 3); display:grid; justify-items:center; gap:3px; min-width:0; text-align:center; }
.btm-glass { position:relative; display:block; width:100%; aspect-ratio:1; border-radius:18px; overflow:hidden;
  background:radial-gradient(120% 90% at 20% 10%, rgba(120,150,190,.16), transparent 55%), linear-gradient(160deg, #1A2230, #0C1017 55%, #141B26);
  box-shadow:inset 0 0 0 1px rgba(200,220,240,.14), inset 0 1px 0 rgba(255,255,255,.1); transition:box-shadow .6s; }
.btm-glass::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 45%, transparent 55%); }
.btm-glass canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
.btm-tile b { margin-top:5px; font:600 13.5px/1.2 var(--body); color:var(--bt-ink); transition:color .6s; }
.btm-tile em { font:500 10.5px/1.25 var(--mono); font-style:normal; color:var(--bt-dim); }
.btm-tile.hold .btm-glass { box-shadow:inset 0 0 0 1px rgba(var(--bt-gold), .55), 0 0 22px -8px rgba(var(--bt-gold), .7); }
.btm-tile.hold b { color:rgb(var(--bt-gold)); }
.btm-src { margin:0; font:400 12px/1.5 var(--body); color:var(--bt-dim); }
.btm-src b { font-weight:600; color:var(--bt-ink2); }
.btm-src span { display:block; margin-top:2px; font-size:11px; }
@media (prefers-reduced-motion: reduce) { .btm-breath path, .btm-mist { animation:none; } }
/* the ways in: a button in the mist fold, and a link under the element meter */
.bts-guide { display:grid; grid-template-columns:44px minmax(0, 1fr) auto; align-items:center; gap:12px; width:100%; margin:0; padding:10px 12px; border:0; border-radius:16px;
  cursor:pointer; text-align:left; font:inherit; color:var(--bt-ink); -webkit-tap-highlight-color:transparent; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  background:var(--bt-grain), linear-gradient(180deg, rgba(246,222,147,.13), rgba(246,222,147,.04)); box-shadow:inset 0 1px 0 rgba(255,246,214,.22), inset 0 0 0 1px rgba(246,222,147,.4); }
.bts-guide::after { content:""; width:7px; height:7px; margin-right:4px; border-right:1.6px solid rgb(var(--bt-gold)); border-top:1.6px solid rgb(var(--bt-gold)); transform:rotate(45deg); }
.bts-guide:focus-visible, .bts-howlink:focus-visible { outline:2px solid rgb(var(--bt-gold)); outline-offset:2px; }
.bts-guide .ic { position:relative; width:44px; height:44px; border-radius:12px; overflow:hidden;
  background:linear-gradient(160deg, #1A2230, #0C1017 55%, #141B26); box-shadow:inset 0 0 0 1px rgba(200,220,240,.2); }
.bts-guide .ic i { position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:3px;
  background:radial-gradient(closest-side, rgba(238,244,250,.85), rgba(220,230,242,.35) 70%, transparent); animation:btmIc 4.2s ease-in-out infinite; }
@keyframes btmIc { 0%, 100% { opacity:.25; border-radius:50%; transform:scale(1.25); } 45%, 65% { opacity:.95; border-radius:3px; transform:scale(.8); } }
.bts-guide b { display:block; font:600 14px/1.25 var(--body); color:var(--bt-ink); }
.bts-guide em { display:block; margin-top:2px; font:400 12px/1.3 var(--body); font-style:normal; color:var(--bt-ink2); }
.bts-howlink { display:inline; margin:0 0 0 6px; padding:0; border:0; background:none; cursor:pointer; font:600 12px/1.4 var(--body); color:rgb(var(--bt-gold));
  text-decoration:underline; text-decoration-color:rgba(var(--bt-gold), .45); text-underline-offset:3px; }
@media (prefers-reduced-motion: reduce) { .bts-guide .ic i { animation:none; opacity:.8; } }

/* notes and the experimental word */
.bts-exp-note { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:start; gap:10px; padding:12px 14px; border-radius:16px;
  background:rgba(var(--bt-exp), .07); box-shadow:inset 0 0 0 1px rgba(var(--bt-exp), .28); }
.bts-exp-note svg { width:18px; height:18px; margin-top:1px; fill:none; stroke:rgb(var(--bt-exp)); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bts-exp-note p { margin:0; font:400 12.5px/1.5 var(--body); color:var(--bt-ink2); }
.bts-exp-note b { font-weight:600; color:rgb(var(--bt-exp)); }
.bts-fine { margin:0; font:400 12px/1.5 var(--body); color:var(--bt-dim); }
/* Breath Tap's element, by the reach (2026-10-14): the quick check's own figure, the marks counted down from the nose; the sheet is
   always dark, so the figure takes the dark set whatever the app's theme */
.bts-elem { display:grid; gap:10px; }
.bts-elq { margin:0; font:400 12.5px/1.45 var(--body); color:var(--bt-ink2); }
.bts-elq b { display:block; margin-bottom:3px; font:400 19px/1.2 var(--display); color:var(--bt-ink); }
.bts-fw { --ink:#E6DFCE; --lqs-skin:#5C4E41; --lqs-skin-l:#CDB89D; --lhs-gold:#F2D98A; --lhs-gold-rgb:242, 217, 138; --mk:34px;
  position:relative; width:min(100%, 280px); margin:4px auto 0; aspect-ratio:340 / 408; }
.bts-fw .lqs-svg { width:100%; height:100%; }
.btwrap .bts-fw .lqs-mk { color:#F7F2E6;
  background:radial-gradient(110% 110% at 32% 18%, rgba(255,255,255,.24), rgba(255,255,255,0) 46%), linear-gradient(180deg, #33303D 0%, #1E1C26 55%, #141219 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 5px rgba(0,0,0,.5), 0 0 0 1.5px rgba(240,213,126,.62), 0 6px 12px -6px rgba(0,0,0,.8); }
.btwrap .bts-fw .lqs-mk.on { color:#08130F; background:rgb(var(--bt-jade)); box-shadow:0 0 0 4px rgba(var(--bt-jade), .26); }
.btwrap .bts-fw .lqs-br path { stroke:#B9CCF0; }
.bts-elrow { display:flex; align-items:stretch; gap:8px; }
.bts-elfound { flex:1; min-width:0; display:grid; gap:3px; padding:11px 14px; border-radius:18px; background:rgba(var(--bt-jade), .1); box-shadow:inset 0 0 0 1px rgba(var(--bt-jade), .38); }
.bts-elfound > span { font:600 10px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--bt-dim); }
.bts-elfound b { font:400 28px/1.05 var(--display); color:var(--bt-ink); }
.bts-elfound em { font:400 11.5px/1.4 var(--body); font-style:normal; color:var(--bt-ink2); }
.bts-elfound em i { display:block; margin-top:2px; font-style:normal; color:rgb(var(--bt-jade)); }
.bts-elfound.differ em i { color:rgb(var(--bt-gold)); }
.bts-elfound.none { background:var(--bt-tile); box-shadow:inset 0 0 0 1px var(--bt-line); }
.bts-elfound.none b { font-size:20px; color:var(--bt-ink2); }
.bts-elhint { flex:1; min-width:0; margin:0; align-self:center; font:400 12px/1.45 var(--body); color:var(--bt-dim); }
.bts-cant { flex:none; align-self:center; height:38px; padding:0 13px; border:0; border-radius:999px; cursor:pointer; font:500 12.5px/1 var(--body); color:var(--bt-ink2);
  background:var(--bt-tile); box-shadow:inset 0 0 0 1px var(--bt-line); -webkit-tap-highlight-color:transparent; }
.bts-cant[aria-pressed="true"] { color:var(--bt-ink); box-shadow:inset 0 0 0 1px rgba(var(--bt-gold), .62); }
.bts-elem .bts-fold .bts-guide { margin-top:10px; }
/* not sure: said first and plainly, the reading under it only a lean (2026-10-14) */
.bts-unsure { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px; align-items:start; margin:0 0 12px; padding:15px 16px; border-radius:20px;
  background:rgba(var(--bt-gold), .14); box-shadow:inset 0 0 0 1.5px rgba(var(--bt-gold), .7), 0 12px 30px -16px rgba(var(--bt-gold), .8); }
.bts-unsure .ic { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; font:800 19px/1 var(--body); color:#1C1505; background:rgb(var(--bt-gold)); }
.bts-unsure b { display:block; font:400 22px/1.15 var(--display); color:var(--bt-ink); }
.bts-unsure p { margin:5px 0 0; font:400 13px/1.45 var(--body); color:var(--bt-ink); }
.bts-unsure p.tip { color:var(--bt-ink2); font-size:12.5px; }
.bts-hero.is-unsure { opacity:.6; filter:saturate(.5); }
/* the reading's cards (2026-10-15): the sound's measures, and one card for teaching it — three steps in one button style */
.bts-card { display:grid; gap:12px; margin:0; padding:14px 14px 16px; border-radius:24px; background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px var(--bt-line2); }
.bts-card-hd { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.bts-card-hd .bts-h { margin:0; }
.bts-card-hd em { font:400 11.5px/1.3 var(--body); font-style:normal; color:var(--bt-dim); text-align:right; }
.bts-step { display:grid; gap:9px; padding-top:12px; border-top:1px solid var(--bt-line2); }
.bts-step:first-of-type { padding-top:2px; border-top:0; }
.bts-step-hd { display:flex; align-items:center; gap:9px; }
.bts-step-hd i { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font:700 11px/1 var(--body); font-style:normal; color:#1C1505; background:rgb(var(--bt-gold)); }
.bts-step-hd b { font:600 14.5px/1.25 var(--body); color:var(--bt-ink); }
.bts-step-hd em { margin-left:auto; font:500 11px/1 var(--body); font-style:normal; color:var(--bt-dim); }
.bts-step-sub, .bts-step-say { margin:0; font:400 12px/1.45 var(--body); color:var(--bt-ink2); }
.bts-step-say { color:var(--bt-dim); }
.bts-g2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:1fr; gap:8px; }
.bts-g3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-auto-rows:1fr; gap:8px; }
.bts-gb { display:grid; place-items:center; align-content:center; gap:4px; min-width:0; min-height:46px; padding:9px 6px; border:0; border-radius:14px; cursor:pointer; text-align:center;
  font:500 13px/1.25 var(--body); color:var(--bt-ink2); -webkit-tap-highlight-color:transparent;
  background:var(--bt-grain), linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.12); }
.bts-gb.full { grid-column:1 / -1; min-height:40px; }
.bts-gb.rb, .bts-gb.sh { min-height:64px; }
.bts-gb b { font:400 22px/1 var(--display); color:var(--bt-ink); }
.bts-gb span { font:500 10.5px/1.2 var(--body); color:var(--bt-dim); }
.bts-gb.rb span { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bts-gb svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.bts-gb[aria-pressed="true"] { color:var(--bt-ink); background:var(--bt-grain), linear-gradient(180deg, rgba(246,222,147,.22), rgba(214,178,74,.08)); box-shadow:inset 0 1px 0 rgba(255,246,214,.35), inset 0 0 0 1px rgba(246,222,147,.62); }
.bts-gb[aria-pressed="true"] span { color:var(--bt-ink2); }
.bts-gb.snd { box-shadow:inset 0 0 0 1.5px rgba(var(--bt-exp), .75); }
/* sound's own guess: the ring alone (the line under the buttons says "read by sound"); no words added, so no label wraps */
.bts-gb:focus-visible { outline:2px solid rgb(var(--bt-gold)); outline-offset:2px; }
.bts-elline { display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:2px 10px; padding:10px 12px; border-radius:14px; background:rgba(var(--bt-jade), .1); box-shadow:inset 0 0 0 1px rgba(var(--bt-jade), .38); }
.bts-elline span { grid-column:1 / -1; font:600 9.5px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--bt-dim); }
.bts-elline b { font:400 22px/1.1 var(--display); color:var(--bt-ink); }
.bts-elline em { font:400 11.5px/1.35 var(--body); font-style:normal; color:var(--bt-ink2); }
.bts-elline.by-sound { background:rgba(var(--bt-exp), .1); box-shadow:inset 0 0 0 1px rgba(var(--bt-exp), .42); }
.bts-train .bts-learnc { margin-top:2px; }
/* the mark sound read (2026-10-14), and the training line under the figure */
.btwrap .bts-fw .lqs-mk.snd { color:#07131C; background:rgb(var(--bt-exp)); box-shadow:0 0 0 4px rgba(var(--bt-exp), .3), 0 0 16px rgba(var(--bt-exp), .45); }
.bts-elfound.by-sound { background:rgba(var(--bt-exp), .1); box-shadow:inset 0 0 0 1px rgba(var(--bt-exp), .42); }
.bts-elfound.by-sound em i { color:rgb(var(--bt-exp)); }
.bts-lstat { display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:16px; background:var(--bt-tile); box-shadow:inset 0 0 0 1px var(--bt-line2); }
.bts-lstat > span:last-child { flex:1; min-width:0; display:grid; gap:3px; }
.bts-lstat .ic { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(var(--bt-gold), .12); }
.bts-lstat .ic svg { width:17px; height:17px; fill:none; stroke:rgb(var(--bt-gold)); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bts-lstat b { font:600 13px/1.25 var(--body); color:var(--bt-ink); }
.bts-lstat em { font:400 11.5px/1.4 var(--body); font-style:normal; color:var(--bt-dim); }
.bts-lstat .bar { display:block; height:4px; margin-top:3px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden; }
.bts-lstat .bar i { display:block; height:100%; border-radius:2px; background:rgb(var(--bt-gold)); }
.bts-lstat.ok .ic { background:rgba(var(--bt-exp), .16); }
.bts-lstat.ok .ic svg { stroke:rgb(var(--bt-exp)); }
.bts-lstat.no .ic svg { stroke:var(--bt-dim); }
.bts-note { margin:0; font:400 12.5px/1.45 var(--body); color:var(--bt-ink2); }
.bts-note b { font-weight:600; color:var(--bt-ink); }
.bts-miss { display:grid; justify-items:center; gap:14px; padding:26px 8px 6px; text-align:center; }
.bts-miss svg { box-sizing:content-box; width:26px; height:26px; padding:16px; border-radius:50%; fill:none; stroke:rgb(var(--bt-gold)); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  background:rgba(var(--bt-gold), .1); box-shadow:inset 0 0 0 1px rgba(var(--bt-gold), .32); }
.bts-miss p { max-width:40ch; margin:0; font:400 14.5px/1.55 var(--body); color:var(--bt-ink2); }

/* the button that opens it, wherever it sits: a microphone, and the same Experimental tag */
.btopen svg { flex:0 0 auto; align-self:center; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.btopen .bt-exp-tag { align-self:center; padding:3px 8px; border-radius:999px; font:700 9px/1 var(--body); font-style:normal; letter-spacing:.12em; text-transform:uppercase;
  color:rgb(128, 188, 224); background:rgba(128, 188, 224, .12); box-shadow:inset 0 0 0 1px rgba(128, 188, 224, .4); }
:root[data-theme="light"] .btopen .bt-exp-tag { color:rgb(36, 108, 156); background:rgba(36, 108, 156, .08); box-shadow:inset 0 0 0 1px rgba(36, 108, 156, .35); }
@media (prefers-reduced-motion: reduce) {
  .btwrap, .btwrap .btsheet, .bts-body.enter > *, .bts-spot.now .pt, .bts-stage[data-cue] .bts-arrow .flow, .bts-stage[data-cue] .bts-arrow .ln, .bts-stage .bts-arrow .hd,
  .bts-stage[data-mode="idle"] .bts-glow, .bts-tile.lit { animation:none !important; }
  .bts-glow, .bts-prog, .bts-spot .lv, .bts-meter i, .bts-go, .bts-quiet { transition:none; }
}

/* ==== RESTORE: WHOSE CHECKS ARE IN THE FILE? (the user, 2026-09-24) =============================== */
.lrec-modes { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:4px; }
.lrec-mode { display:grid; justify-items:start; align-content:start; gap:9px; min-width:0; padding:14px; border:0; border-radius:16px; cursor:pointer; text-align:left;
  color:var(--ink-2); background:var(--st-tile, rgba(255,255,255,.05)); box-shadow:inset 0 0 0 1px var(--st-line-soft, rgba(255,255,255,.08));
  transition:box-shadow .2s, background .2s; -webkit-tap-highlight-color:transparent; }
.lrec-mode:hover { color:var(--ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 50%, transparent); }
.lrec-mode:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lrec-mode svg { width:22px; height:22px; fill:none; stroke:var(--brass-hi); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lrec-mode span { display:grid; gap:3px; min-width:0; }
.lrec-mode b { font:600 14px/1.25 var(--body); color:var(--ink); }
.lrec-mode em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--dim); overflow-wrap:anywhere; }
@media (max-width:359px) { .lrec-modes { grid-template-columns:minmax(0, 1fr); } }

/* ==== KEEPING THE RECORD: INSIDE AN APP'S OWN BROWSER (2026-09-24, ui-lite-keep.js) =================== */
.lkeep-inapp { position:fixed; z-index:9500; left:12px; right:12px; top:calc(10px + env(safe-area-inset-top)); display:grid; grid-template-columns:auto minmax(0, 1fr);
  gap:8px 12px; align-items:start; max-width:560px; margin:0 auto; padding:14px 14px 12px; border-radius:20px; color:var(--ink);
  background:linear-gradient(180deg, rgba(34,26,14,.96), rgba(18,14,9,.97)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(240,178,98,.55), 0 24px 48px -20px rgba(0,0,0,.9); }
.lkeep-inapp > svg { width:22px; height:22px; margin-top:1px; fill:none; stroke:#F0B262; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lkeep-inapp p { display:grid; gap:3px; margin:0; }
.lkeep-inapp b { font:600 14px/1.3 var(--body); }
.lkeep-inapp p span { font:400 12.5px/1.4 var(--body); color:var(--ink-2); }
.lkeep-acts { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lkeep-go, .lkeep-copy { display:inline-flex; align-items:center; height:38px; padding:0 14px; border:0; border-radius:12px; cursor:pointer; text-decoration:none; font:600 13px/1 var(--body); }
.lkeep-go { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.lkeep-copy { color:var(--ink); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.lkeep-x { margin-left:auto; width:34px; height:34px; border:0; border-radius:50%; cursor:pointer; font:400 20px/1 var(--body); color:var(--ink-2); background:rgba(255,255,255,.06); }
.lkeep-go:focus-visible, .lkeep-copy:focus-visible, .lkeep-x:focus-visible { outline:2px solid #F0B262; outline-offset:2px; }
:root[data-theme="light"] .lkeep-inapp { background:linear-gradient(180deg, #FFFDF8, #FBF4E6); box-shadow:inset 0 0 0 1px rgba(176,104,18,.45), 0 20px 40px -20px rgba(60,40,80,.45); }
:root[data-theme="light"] .lkeep-inapp > svg { stroke:#B06812; }
:root[data-theme="light"] .lkeep-copy, :root[data-theme="light"] .lkeep-x { background:rgba(40,30,60,.05); box-shadow:inset 0 0 0 1px rgba(40,30,60,.12); }

/* ==== PREDICTIONS ON WIDE SCREENS (the user, 2026-09-24: "many are breaking aesthetics") ==================
   Two columns that stack their own cards (lprTwo): a short card never leaves a hole beside a long one, and a
   long page keeps its short column in view as a sidebar. On a phone both columns dissolve into the one column,
   every card in its old place (--o). A flow (.lpr-flow) packs a catalogue — the acts, the matters, the parts of
   a score — into two balanced columns. Kaarya's day strip reads across the whole width, its windows in two. */
.lpr-colw, .lpr-flow { display:contents; }
.lpr-cell { order:var(--o, 0); display:grid; min-width:0; }
.lpr-grid.two > :not(.lpr-colw) { order:99; }
@media (min-width:1000px) {
  .lpr-grid.two > .lpr-colw { display:flex; flex-direction:column; gap:18px; min-width:0; }
  .lpr-grid.two > .lpr-colw.a { grid-column:1 / span 7; }
  .lpr-grid.two > .lpr-colw.b { grid-column:8 / -1; }
  .lpr-grid.two > .lpr-colw.b.stick { position:sticky; top:0; }
  .lpr-grid > .lpr-flow { display:block; grid-column:1 / -1; columns:2; column-gap:18px; }
  .lpr-flow > * { break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 18px; }
  .lpr-grid.katoday > .lpr-daycard, .lpr-grid.katoday > .lpr-wins { grid-column:1 / -1; }
  .lpr-grid.katoday .lpr-winlist { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:32px; }
  .lpr-grid.ghbegin > .lgc-begin { position:sticky; top:0; }
}

/* ==== PROGRESS, FOR EVERYONE (the user, 2026-09-24) ===============================================
   "More visual and less texty … easily understandable by even a layman user." A summary on top — the
   verdict, then and now on one bar, the three targets with the goal as a flag — then the three bodies,
   a card that reads them area by area, and plain words in the rest. Every number is the engine's own. */

/* the colour scale draws its own swatches wherever it sits (it was bare outside Diagnosis's legend) */
.ldx-scale i.sc { display:inline-block; width:10px; height:8px; border-radius:2px; }
.ldx-scale i.sc.s0 { background:var(--ldx-s0); } .ldx-scale i.sc.s1 { background:var(--ldx-s1); } .ldx-scale i.sc.s2 { background:var(--ldx-s2); }
.ldx-scale i.sc.s3 { background:var(--ldx-s3); } .ldx-scale i.sc.s4 { background:var(--ldx-s4); } .ldx-scale i.sc.s5 { background:var(--ldx-s5); }

/* ---- the summary ---- */
.lraG-card { gap:18px; }
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) .lraG-card {
  background:radial-gradient(130% 110% at 0% 0%, rgba(var(--acc-rgb), .18), transparent 58%), linear-gradient(180deg, var(--st-surface), var(--st-surface-2));
  box-shadow:inset 0 1px 0 rgba(var(--acc-rgb), .32), inset 0 0 0 1px rgba(var(--acc-rgb), .15), 0 34px 60px -44px rgba(var(--acc-rgb), .45), var(--st-shadow); }
.lraG-hd { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:26px; }
.lraG-verdict { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:14px; }
.lraG-vi { display:grid; place-items:center; width:48px; height:48px; border-radius:16px; color:var(--dim); background:var(--st-tile-hi); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraG-vi svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lraG-card.t-good .lraG-vi { color:var(--jade); background:color-mix(in srgb, var(--jade) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 40%, transparent), 0 0 24px -6px color-mix(in srgb, var(--jade) 50%, transparent); }
.lraG-card.t-mid .lraG-vi { color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 38%, transparent); }
.lraG-card.t-far .lraG-vi { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 40%, transparent); }
.lraG-verdict h3 { margin:0; font:500 25px/1.1 var(--display); letter-spacing:-.018em; color:var(--ink); text-wrap:balance; }
.lraG-verdict p { margin:4px 0 0; font:400 13px/1.45 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lraG-main { display:grid; gap:16px; min-width:0; }
@media (min-width:720px) { .lraG-main { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:22px; align-items:start; } }
.lraG-left, .lraG-right { display:grid; gap:16px; min-width:0; }
.lraG-hero { display:grid; gap:6px; padding:16px 16px 14px; border-radius:20px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraG-numrow { display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; }
.lraG-big { font:300 50px/1 var(--display); letter-spacing:-.035em; color:var(--ink); font-variant-numeric:tabular-nums; }
.lraG-big em { margin-left:2px; font:400 21px/1 var(--display); font-style:normal; color:var(--ink-2); }
.lraG-delta { display:inline-flex; align-items:baseline; gap:5px; padding:6px 11px; border-radius:999px; font:700 13px/1 var(--body); color:var(--ink-2);
  background:var(--st-tile-hi); box-shadow:inset 0 0 0 1px var(--st-line-soft); font-variant-numeric:tabular-nums; }
.lraG-delta em { font:500 11px/1 var(--body); font-style:normal; opacity:.85; }
.lraG-delta.up { color:var(--jade); background:color-mix(in srgb, var(--jade) 13%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 35%, transparent); }
.lraG-delta.down { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 35%, transparent); }
.lraG-bigk { font:400 12.5px/1.4 var(--body); color:var(--ink-2); }
.lraG-journey { display:grid; gap:10px; margin-top:10px; }
.lraG-jtrack { position:relative; height:10px; margin:0 8px; border-radius:999px; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.lraG-jseg { position:absolute; top:0; bottom:0; border-radius:999px; }
.lraG-jseg.up { background:linear-gradient(90deg, color-mix(in srgb, var(--jade) 40%, transparent), var(--jade)); box-shadow:0 0 14px color-mix(in srgb, var(--jade) 45%, transparent); }
.lraG-jseg.down { background:linear-gradient(90deg, var(--sindoor), color-mix(in srgb, var(--sindoor) 40%, transparent)); }
.lraG-jthen, .lraG-jnow { position:absolute; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; box-sizing:border-box; }
.lraG-jthen { background:var(--panel-2); border:2px solid var(--ink-2); }
.lraG-jnow { background:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--jade) 60%, transparent), 0 0 16px color-mix(in srgb, var(--jade) 70%, transparent); }
.lraG-jkey { display:flex; flex-wrap:wrap; gap:6px 18px; font:400 11.5px/1.2 var(--body); color:var(--dim); }
.lraG-jkey span { display:inline-flex; align-items:center; gap:6px; }
.lraG-jkey b { font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lraG-jkey i { width:10px; height:10px; border-radius:50%; box-sizing:border-box; }
.lraG-jkey i.then { border:2px solid var(--ink-2); }
.lraG-jkey i.now { background:var(--ink); box-shadow:0 0 0 2px color-mix(in srgb, var(--jade) 60%, transparent); }
.lraG-chart { display:grid; gap:6px; padding:0 2px; }
.lraG-ck { font:600 9.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lraG-chart svg { display:block; width:100%; height:auto; overflow:visible; }
.lraG-chart .gr { stroke:color-mix(in srgb, var(--ink) 10%, transparent); stroke-width:1; stroke-dasharray:2 4; vector-effect:non-scaling-stroke; }
.lraG-chart .fw { stroke:var(--brass-hi); stroke-width:1.3; stroke-dasharray:5 4; opacity:.8; vector-effect:non-scaling-stroke; }
.lraG-chart .ar { fill:url(#lraG-grad); }
.lraG-chart .g0 { stop-color:var(--jade); stop-opacity:.34; }
.lraG-chart .g1 { stop-color:var(--jade); stop-opacity:0; }
.lraG-chart .ln { fill:none; stroke:var(--jade); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.lraG-chart .dt { fill:var(--jade); }
.lraG-chart .last { fill:var(--ink); stroke:var(--jade); stroke-width:2; vector-effect:non-scaling-stroke; }
.lraG-axis { display:flex; justify-content:space-between; align-items:center; gap:8px; font:400 10.5px/1 var(--body); color:var(--dim); }
.lraG-axis .fw { display:inline-flex; align-items:center; gap:6px; color:var(--brass-hi); }
.lraG-axis .fw i { width:16px; height:0; border-top:1.5px dashed var(--brass-hi); }
/* the targets: the flag is the goal, the bar is you */
.lraG-goals { display:grid; gap:10px; min-width:0; }
.lraG-goalhd { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.lraG-count { font:500 11.5px/1 var(--body); color:var(--dim); white-space:nowrap; }
.lraG-count b { font-weight:700; color:var(--ink); }
.lraG-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.lraG-goal { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:6px 12px; padding:12px 14px 13px 12px; border-radius:18px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraG-goal[role="button"] { cursor:pointer; transition:box-shadow .2s, background .2s; -webkit-tap-highlight-color:transparent; }
.lraG-goal[role="button"]:hover { background:var(--st-tile-hi); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .4); }
.lraG-goal[role="button"]:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lraG-gi { grid-row:1 / span 2; align-self:start; display:grid; place-items:center; width:36px; height:36px; border-radius:12px; color:var(--dim); background:var(--st-tile-hi); }
.lraG-gi svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lraG-gi svg .f { fill:currentColor; stroke:none; opacity:.5; }
.lraG-gt { display:grid; gap:2px; min-width:0; }
.lraG-gt b { font:600 13.5px/1.25 var(--body); color:var(--ink); }
.lraG-gt em { font:400 11.5px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lraG-gv { display:grid; justify-items:end; gap:4px; }
.lraG-gv b { font:500 22px/1 var(--display); letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lraG-gv b em { margin-left:1px; font:500 11px/1 var(--body); font-style:normal; color:var(--dim); }
.lraG-gv > em { display:inline-flex; align-items:center; gap:3px; font:600 10.5px/1 var(--body); font-style:normal; color:var(--dim); white-space:nowrap; }
.lraG-gv > em svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.lraG-meter { grid-column:2 / -1; position:relative; height:6px; margin-top:2px; border-radius:999px; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.lraG-meter i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--dim); }
.lraG-meter u { position:absolute; top:-5px; bottom:-5px; width:2px; margin-left:-1px; border-radius:2px; background:var(--ink); opacity:.75; text-decoration:none; }
.lraG-goal.good .lraG-gi, .lraG-goal.good .lraG-gv > em { color:var(--jade); }
.lraG-goal.good .lraG-gi { background:color-mix(in srgb, var(--jade) 13%, transparent); }
.lraG-goal.good .lraG-meter i { background:var(--jade); box-shadow:0 0 10px color-mix(in srgb, var(--jade) 50%, transparent); }
.lraG-goal.mid .lraG-gi { color:var(--brass-hi); } .lraG-goal.mid .lraG-meter i { background:var(--brass-hi); }
.lraG-goal.far .lraG-gi { color:var(--sindoor); } .lraG-goal.far .lraG-meter i { background:var(--sindoor); }
/* three small tiles */
.lraG-tiles { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.lraG-right > .lraG-tiles { margin-top:2px; }
@media (max-width:359px) { .lraG-tiles { grid-template-columns:minmax(0, 1fr); } }
.lraG-tile { display:grid; align-content:start; gap:6px; padding:12px 12px 13px; border-radius:18px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); min-width:0; }
.lraG-ti { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; color:var(--dim); background:var(--st-tile-hi); }
.lraG-ti svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lraG-tile > b { margin-top:4px; font:400 25px/1 var(--display); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lraG-tile > b em { font:500 11px/1 var(--body); font-style:normal; color:var(--dim); }
.lraG-tl { font:600 11.5px/1.3 var(--body); color:var(--ink-2); }
.lraG-tile > em { font:400 10.5px/1.35 var(--body); font-style:normal; color:var(--dim); }
.lraG-tbar { position:relative; height:4px; border-radius:999px; background:color-mix(in srgb, var(--ink) 9%, transparent); overflow:hidden; }
.lraG-tbar i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--dim); }
.lraG-tile.good .lraG-ti { color:var(--jade); background:color-mix(in srgb, var(--jade) 13%, transparent); } .lraG-tile.good .lraG-tbar i { background:var(--jade); } .lraG-tile.good > b { color:var(--jade); }
.lraG-tile.mid .lraG-ti { color:var(--brass-hi); } .lraG-tile.mid .lraG-tbar i { background:var(--brass-hi); }
.lraG-tile.far .lraG-ti { color:var(--sindoor); } .lraG-tile.far .lraG-tbar i { background:var(--sindoor); } .lraG-tile.far > b { color:var(--sindoor); }
@media (max-width:420px) {
  .lraG-tile { padding:11px 10px 12px; }
  .lraG-tile > b { font-size:22px; }
  .lraG-verdict h3 { font-size:22px; }
  .lraG-big { font-size:44px; }
}

/* ---- the three bodies ---- */
.lraB-pick { display:none; }
.lraB-figs.n1 { grid-template-columns:minmax(0, 300px); justify-content:center; }
.lraB-key { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px; font:500 11.5px/1 var(--body); color:var(--dim); }
.lraB-key .ldx-scale em { margin:0 4px; }
.lraB-tap { display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); }
.lraB-tap svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:560px) {
  .lraB-pick { display:grid; }
  .lraB-figs, .lraB-figs.n1 { grid-template-columns:minmax(0, 1fr); }
  .lraB-fig:not(.on) { display:none; }
  /* the host hugs the figure, so its zoom buttons sit at the figure's own corner */
  .lraB-fig.on .lraB-body { width:fit-content; max-width:100%; margin:0 auto; }
  .lraB-fig.on .lraB-body > svg { width:auto; max-width:100%; height:min(440px, 112vw); margin:0 auto; }
  .lraB-card > .lal-hd { flex-wrap:wrap; }
  .lraB-card > .lal-hd > div { flex:1 1 100%; }
  .lraB-card > .lal-hd .lraB-seg { flex:1 1 100%; }
  .lraB-key { justify-content:center; }
}
/* the tap card on Realignment's bodies: usually, today, and what eased, at that point */
.lzm-cmp { --ldx-easy:#7DB99E; --ldx-load:#E6C88A; --ldx-strain:#D8734D;
  --ldx-s0:var(--ldx-easy); --ldx-s1:color-mix(in srgb, var(--ldx-easy) 55%, var(--ldx-load)); --ldx-s2:var(--ldx-load);
  --ldx-s3:color-mix(in srgb, var(--ldx-load) 60%, var(--ldx-strain)); --ldx-s4:var(--ldx-strain); --ldx-s5:color-mix(in srgb, var(--ldx-strain) 78%, #7A1F12);
  display:grid; gap:7px; padding:10px 11px 11px; border-radius:13px; background:var(--st-tile, rgba(255,255,255,.04)); box-shadow:inset 0 0 0 1px var(--st-line-soft, rgba(255,255,255,.06)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lzm-cmp { --ldx-easy:#3E8A69; --ldx-load:#B38A1E; --ldx-strain:#B9502B; } }
:root[data-theme="light"] .lzm-cmp { --ldx-easy:#3E8A69; --ldx-load:#B38A1E; --ldx-strain:#B9502B; }
.lzm-cmpk { font:600 9.5px/1.3 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lzm-cmprow { display:grid; grid-template-columns:58px minmax(0, 1fr) 36px; align-items:center; gap:8px; }
.lzm-cmprow span { font:500 11.5px/1.2 var(--body); color:var(--ink-2); }
.lzm-cmprow.at span { font-weight:700; color:var(--ink); }
.lzm-cmprow i { position:relative; height:6px; border-radius:999px; background:var(--st-tile-hi, rgba(255,255,255,.08)); overflow:hidden; }
.lzm-cmprow i em { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--dim); }
.lzm-cmprow i em.s0 { background:var(--ldx-s0); } .lzm-cmprow i em.s1 { background:var(--ldx-s1); } .lzm-cmprow i em.s2 { background:var(--ldx-s2); }
.lzm-cmprow i em.s3 { background:var(--ldx-s3); } .lzm-cmprow i em.s4 { background:var(--ldx-s4); } .lzm-cmprow i em.s5 { background:var(--ldx-s5); }
.lzm-cmprow b { font:600 12.5px/1 var(--body); text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); }
.lzm-cmprow b.na { grid-column:2 / -1; text-align:left; font-weight:500; font-size:11.5px; color:var(--dim); }
.lzm-cmpe { padding-top:7px; border-top:1px solid var(--st-line-soft, rgba(255,255,255,.06)); font:600 12px/1.35 var(--body); color:var(--ink-2); }
.lzm-cmpe.good { color:var(--jade); } .lzm-cmpe.far { color:var(--sindoor); } .lzm-cmpe.none { font-weight:500; color:var(--dim); }

/* ---- the bodies, read area by area ---- */
.lraK-card { gap:18px; }
.lraK-defs { position:absolute; width:0; height:0; overflow:hidden; }
.lraK-maps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
@media (max-width:640px) { .lraK-maps { grid-template-columns:minmax(0, 1fr); } }
.lraK-map { display:grid; grid-template-columns:auto minmax(0, 1fr); align-content:start; gap:3px 12px; padding:13px 14px 14px 13px; border-radius:18px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraK-mi { grid-row:1 / span 4; display:grid; place-items:center; width:40px; height:40px; border-radius:13px; color:rgb(var(--acc-rgb)); background:rgba(var(--acc-rgb), .12); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .3); }
.lraK-mi svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lraK-map.e .lraK-mi { color:var(--jade); background:color-mix(in srgb, var(--jade) 13%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 35%, transparent); }
.lraK-map > b { font:500 17px/1.2 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lraK-map > span { font:400 12px/1.4 var(--body); color:var(--ink-2); }
.lraK-map > em { margin-top:4px; font:600 12px/1.3 var(--body); font-style:normal; color:var(--ink); }
.lraK-map > em.good { color:var(--jade); } .lraK-map > em.far { color:var(--sindoor); }
.lraK-map > .lraK-most { font:400 11.5px/1.35 var(--body); color:var(--dim); }
.lraK-sec { display:grid; gap:10px; }
.lraK-sechd { display:flex; align-items:center; justify-content:space-between; gap:8px 14px; flex-wrap:wrap; }
.lraK-legend { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; font:500 11px/1 var(--body); color:var(--ink-2); }
.lraK-legend span { display:inline-flex; align-items:center; gap:6px; }
.lraK-legend i { width:14px; height:6px; border-radius:999px; background:var(--ldx-s3); }
.lraK-legend i.t { background:var(--ldx-s1); }
.lraK-legend em { font-style:normal; color:var(--dim); }
.lraK-areas { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.lraK-area { display:grid; grid-template-columns:30px minmax(0, 1fr); align-items:center; gap:12px; padding:8px 13px 8px 9px; border-radius:16px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraK-mini { display:block; width:30px; height:69px; }
.lraK-mini use { fill:color-mix(in srgb, var(--ink) 15%, transparent); }
.lraK-mini circle { fill:rgb(var(--acc-rgb)); }
.lraK-at { display:grid; gap:7px; min-width:0; }
.lraK-ahd { display:flex; align-items:center; justify-content:space-between; gap:6px 10px; flex-wrap:wrap; }
.lraK-ahd b { font:600 13.5px/1.2 var(--body); color:var(--ink); }
.lraK-chip { padding:5px 10px; border-radius:999px; font:600 11px/1 var(--body); white-space:nowrap; color:var(--ink-2); background:var(--st-tile-hi); }
.lraK-chip.good { color:var(--jade); background:color-mix(in srgb, var(--jade) 13%, transparent); }
.lraK-chip.far { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 12%, transparent); }
.lraK-chip.none { font-weight:500; color:var(--dim); }
.lraK-bars { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:5px 9px; }
.lraK-bl { font:500 10.5px/1 var(--body); color:var(--dim); }
.lraK-bar { position:relative; height:6px; border-radius:999px; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.lraK-bar i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--dim); }
.lraK-bar i.s0 { background:var(--ldx-s0); } .lraK-bar i.s1 { background:var(--ldx-s1); } .lraK-bar i.s2 { background:var(--ldx-s2); }
.lraK-bar i.s3 { background:var(--ldx-s3); } .lraK-bar i.s4 { background:var(--ldx-s4); } .lraK-bar i.s5 { background:var(--ldx-s5); }
.lraK-bv { min-width:32px; text-align:right; font:600 11.5px/1 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
@media (min-width:1000px) {
  .lraK-area { grid-template-columns:30px minmax(0, .8fr) minmax(0, 1.6fr); gap:16px; padding:6px 16px 6px 10px; }
  .lraK-at { display:contents; }
}
.lraK-keys { display:grid; gap:14px; padding:14px 15px; border-radius:18px; background:color-mix(in srgb, var(--ink) 3%, transparent); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
@media (min-width:760px) { .lraK-keys { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; } }
.lraK-key { display:grid; gap:8px; align-content:start; min-width:0; }
.lraK-kh { font:600 9.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lraK-key .ldx-scale { flex-wrap:wrap; font:500 11px/1 var(--body); color:var(--dim); }
.lraK-key .ldx-shapes { justify-content:flex-start; gap:7px 14px; }
.lraK-kx { display:flex; align-items:flex-start; gap:7px; font:400 11.5px/1.45 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lraK-kx b { font-weight:600; color:var(--ink); }
.lraK-kx svg { flex:0 0 auto; width:15px; height:15px; margin-top:1px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lraK-size { display:inline-flex; align-items:center; gap:7px; font:400 11.5px/1.3 var(--body); color:var(--ink-2); }
.lraK-size i { border-radius:50%; background:var(--ldx-s4); }
.lraK-size i:nth-child(1) { width:5px; height:5px; opacity:.55; } .lraK-size i:nth-child(2) { width:8px; height:8px; opacity:.78; } .lraK-size i:nth-child(3) { width:11px; height:11px; }

/* ---- holding it: each reading with its own bar ---- */
.lraH-ic { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:var(--dim); background:var(--st-tile-hi); }
.lraH-ic svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lraH-list li.good .lraH-ic { color:var(--jade); background:color-mix(in srgb, var(--jade) 13%, transparent); }
.lraH-list li.mid .lraH-ic { color:var(--brass-hi); } .lraH-list li.far .lraH-ic { color:var(--sindoor); }
.lraH-meter { position:relative; display:block; height:5px; margin-top:7px; border-radius:999px; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.lraH-meter i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--dim); }
.lraH-list li.good .lraH-meter i { background:var(--jade); } .lraH-list li.mid .lraH-meter i { background:var(--brass-hi); } .lraH-list li.far .lraH-meter i { background:var(--sindoor); }
.lraH-meter u { position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; border-radius:2px; background:var(--ink); opacity:.7; text-decoration:none; }
.lraH-from { display:block; margin-top:5px; font:400 10.5px/1.3 var(--body); color:var(--dim); }

/* ---- when you drift ---- */
.lra-dbar { position:relative; align-self:center; height:5px; border-radius:999px; background:color-mix(in srgb, var(--ink) 9%, transparent); overflow:hidden; }
.lra-dbar i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--sindoor); }
@media (max-width:400px) { .lra-dbar { margin-top:4px; } }
.lra-eltile { display:grid; gap:9px; padding:13px 14px; border-radius:18px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lra-elrow { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:12px; }
.lra-eltx { display:grid; gap:4px; min-width:0; }
.lra-eltx b { font:400 22px/1.1 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lra-eltx b em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); letter-spacing:0; }
.lra-eltile .lra-bar i.off { background:linear-gradient(90deg, color-mix(in srgb, var(--sindoor) 60%, transparent), var(--sindoor)); }
.lra-elsub { font:400 11.5px/1.4 var(--body); font-style:normal; color:var(--dim); }

/* ==== THE WAITING LINE (ui-lite-loader.js): the logomark turning, and a few words ==== */
.lkc-wait { display:flex; align-items:center; gap:14px; padding:4px 0; font:500 13.5px/1.4 var(--body); color:var(--ink-2); }
.lkc-wait .lkc-spin { flex:none; color:rgb(var(--acc-rgb, 214, 177, 115)); }

/* ==== THE DIAGNOSIS REPORT'S BUTTON AND SHEET (ui-lite-report.js) ==== */
.lrp-fab { display:none; position:fixed; z-index:20; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); align-items:center; gap:10px; height:50px; padding:0 20px 0 7px;
  border:0; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent; font:600 14px/1 var(--body); letter-spacing:.01em; color:#F6ECD2;
  background:linear-gradient(180deg, rgba(36,31,22,.9), rgba(15,13,10,.94)); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(240,213,126,.55), inset 0 1px 0 rgba(255,255,255,.08), 0 18px 36px -14px rgba(0,0,0,.9), 0 0 0 6px rgba(240,213,126,.07);
  transition:box-shadow .2s, transform .15s; }
.lite-has-chart .litedrawer[data-state="open"][data-mode="align"][data-stage="diagnosis"] .lrp-fab { display:inline-flex; animation:lraFabIn .5s cubic-bezier(.22,.9,.24,1) .2s backwards; }
.lrp-fab:hover { box-shadow:inset 0 0 0 1px rgba(240,213,126,.85), inset 0 1px 0 rgba(255,255,255,.1), 0 20px 40px -14px rgba(0,0,0,.9), 0 0 0 7px rgba(240,213,126,.1); }
.lrp-fab:active { transform:scale(.97); }
.lrp-fab:focus-visible { outline:2px solid #F0D57E; outline-offset:3px; }
.lrp-fab b { font-weight:600; white-space:nowrap; }
:root[data-theme="light"].lite-has-chart .litedrawer .lrp-fab { color:#2A2418; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(251,247,238,.97));
  box-shadow:inset 0 0 0 1px rgba(154,122,24,.5), 0 16px 32px -14px rgba(60,40,80,.4), 0 0 0 6px rgba(154,122,24,.07); }
.lite-has-chart .litedrawer[data-mode="align"][data-stage="diagnosis"] .litedrawer-body { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
@media (min-width:760px) {
  .lrp-fab { right:24px; bottom:calc(22px + env(safe-area-inset-bottom)); }
  .lite-has-chart .litedrawer[data-mode="align"][data-stage="diagnosis"] .litedrawer-body { padding-bottom:108px; }
}
@media (prefers-reduced-motion: reduce) { .lite-has-chart .litedrawer[data-state="open"][data-mode="align"][data-stage="diagnosis"] .lrp-fab { animation:none; } .lrp-fab { transition:none; } }
.lpk-report .lrp-body { padding:6px 2px 4px; }
.lrp-make, .lrp-ready { display:grid; justify-items:center; gap:14px; padding:20px 6px 8px; text-align:center; }
.lrp-make .lkc-spin { color:rgb(var(--acc-rgb)); }
.lrp-say { font:600 15.5px/1.3 var(--body); color:var(--ink); min-height:1.3em; }
.lrp-bar { display:block; width:min(300px, 84%); height:5px; border-radius:999px; background:var(--st-line); overflow:hidden; }
.lrp-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, rgba(var(--acc-rgb), .55), rgb(var(--acc-rgb))); transition:width .35s ease; }
.lrp-fine { margin:0; max-width:42ch; font:400 12px/1.55 var(--body); color:var(--dim); text-align:center; text-wrap:pretty; }
.lrp-doc { position:relative; display:block; width:60px; height:76px; color:rgb(var(--acc-rgb)); }
.lrp-doc svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.lrp-doc b { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); padding:3px 7px; border-radius:5px; font:700 10px/1 var(--body); letter-spacing:.1em; color:#1B1406;
  background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.lrp-meta { display:grid; gap:4px; }
.lrp-meta b { font:600 17px/1.3 var(--display); color:var(--ink); }
.lrp-meta span { font:500 13px/1.3 var(--body); color:var(--ink-2); }
.lrp-meta em { font:400 11px/1.4 var(--mono); font-style:normal; color:var(--dim); word-break:break-all; }
.lrp-acts { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:2px; }
.lrp-go, .lrp-alt { display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 22px; border:0; border-radius:999px; cursor:pointer; font:600 14px/1 var(--body); -webkit-tap-highlight-color:transparent; }
.lrp-go { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 26px -14px rgba(214,178,74,.9); }
.lrp-alt { color:var(--ink); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line); }
.lrp-go svg, .lrp-alt svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lrp-go:focus-visible, .lrp-alt:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:3px; }

/* ==== KAALCHAKRA REPORT — the pages, laid out off screen for the PDF (ui-lite-report.js, ui-lite-pdf.js) ====
   Paper, whatever the app's theme: the light palette is set here, on the stage, for everything drawn in it
   (the body maps take theirs from .krp .ldx-card). The type is Helvetica and Times, which the PDF draws
   natively; the wordmark alone is drawn in its own face. */
#krp-stage { position:fixed; left:-20000px; top:0; width:794px; pointer-events:none; z-index:-1; contain:layout style; }
.krp { --ink:#221F27; --ink-2:#4E4955; --dim:#857E8B; --brass:#9A7A18; --brass-hi:#735A0D; --brass-dim:#D8C79A;
  --sindoor:#C9462C; --jade:#2F8A6B; --soma:#6D5FA6; --ground:#FFFFFF; --panel:#FFFFFF; --panel-2:#F8F5F0;
  --body:Helvetica, Arial, 'Liberation Sans', 'Nimbus Sans', sans-serif; --display:var(--body); --mono:'Courier New', Courier, monospace;
  --serif:'Times New Roman', Times, 'Liberation Serif', serif;
  --st-tile:#F6F3EE; --st-tile-hi:#EEE8DF; --st-line:#E2DBD0; --st-line-soft:#ECE6DC; --acc-rgb:44, 109, 138;
  --ldx-easy:#3E8A69; --ldx-load:#B38A1E; --ldx-strain:#B9502B;
  --ldx-s0:var(--ldx-easy); --ldx-s1:color-mix(in srgb, var(--ldx-easy) 55%, var(--ldx-load)); --ldx-s2:var(--ldx-load);
  --ldx-s3:color-mix(in srgb, var(--ldx-load) 60%, var(--ldx-strain)); --ldx-s4:var(--ldx-strain); --ldx-s5:color-mix(in srgb, var(--ldx-strain) 78%, #7A1F12);
  --k-line:#E6E0D6; --k-soft:#F7F4EF; --k-blue:#2C6D8A;
  color:var(--ink); font:400 12px/1.5 var(--body); text-align:left; }
.krp * { animation:none !important; transition:none !important; }
.krp .ldx-card { --ldx-b:#946A00; --ldx-c:#2C6D8A; --ldx-skin-a:#E9DDC6; --ldx-skin-b:#DCCDB1; --ldx-skin-c:#CBB894; --ldx-light:#FFFFFF; --ldx-light-op:.55;
  --ldx-rim:rgba(70,50,20,.22); --ldx-floor:rgba(70,50,20,.22); --ldx-spine:rgba(106,80,0,.28);
  --ldx-easy:#3E8A69; --ldx-load:#B38A1E; --ldx-strain:#B9502B; --ldx-chan:#8A6A12; --ldx-chan-glow:rgba(138,106,18,.45); }
.krp .lel-s.e-jala { background:linear-gradient(180deg, #D9DEE6, #AEB7C4); }
.krp .lel-s.e-prithvi { background:linear-gradient(180deg, #E1BE4E, #BF9A1E); }
.krp .lband-tri, .krp .lband-future { display:none; }
.krp .lband-track { background:#EEE9E1; }
.krp .lband-lab { text-shadow:none; }
.krp ul, .krp ol { margin:0; padding:0; list-style:none; }
.krp ul > li { position:relative; padding-left:12px; }
.krp-li { position:absolute; left:1px; top:.62em; width:4px; height:4px; border-radius:50%; background:var(--brass); }
.krp p, .krp h1, .krp h2, .krp h3, .krp h4, .krp h5, .krp blockquote, .krp figure, .krp dl, .krp dd { margin:0; }
.krp button { all:unset; }
/* the page */
.krp-page { position:relative; box-sizing:border-box; width:794px; height:1123px; padding:34px 56px 28px; display:flex; flex-direction:column; background:#FFFFFF; overflow:hidden; margin:0 0 24px; }
.krp-ph { flex:none; display:flex; align-items:center; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--k-line); font:700 8.5px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.krp-ph-t { flex:1 1 auto; }
.krp-ph-who { font:500 10px/1 var(--body); letter-spacing:.02em; text-transform:none; color:var(--ink-2); }
.krp-lockup { display:inline-flex; align-items:center; gap:8px; color:var(--brass); }
.krp-logo { width:22px; height:22px; flex:none; }
.krp-lockup.sm .krp-logo { width:15px; height:15px; }
.krp-word { font:600 17px/1.1 'Red Hat Display', var(--body); letter-spacing:.015em; color:var(--brass-hi); text-transform:none; white-space:nowrap; }
.krp-lockup.sm .krp-word { font-size:12.5px; }
.krp-word span { font-weight:400; color:var(--dim); }
.krp-body { position:relative; flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:13px; padding-top:18px; }
.krp-body > * { flex:none; }
.krp-pf { flex:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:9px; border-top:1px solid var(--k-line); font:400 8.5px/1.3 var(--body); color:var(--dim); }
.krp-pn { font-weight:700; color:var(--ink-2); white-space:nowrap; }
/* the cover */
.krp-cover { padding:48px 60px 40px; }
.krp-cv-art { position:absolute; right:-165px; top:-160px; width:410px; height:410px; }
.krp-cv-band { position:relative; display:flex; align-items:center; justify-content:space-between; }
.krp-cover .krp-cv-band .krp-logo { width:34px; height:34px; }
.krp-cover .krp-cv-band .krp-word { font-size:27px; }
.krp-cv-by { font:700 9px/1 var(--body); letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }
.krp-cv-hero { position:relative; margin-top:96px; max-width:580px; }
.krp-kick { display:block; font:700 10px/1 var(--body); letter-spacing:.26em; text-transform:uppercase; color:var(--brass); }
.krp-cv-hero h1 { margin-top:16px; font:400 41px/1.08 var(--serif); letter-spacing:-.01em; color:var(--ink); }
.krp-cv-hero p { margin-top:16px; font:400 12.5px/1.6 var(--body); color:var(--ink-2); max-width:540px; }
.krp-cv-cols { position:relative; display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:22px; margin-top:34px; align-items:start; }
.krp-who { display:grid; border-top:1px solid var(--k-line); }
.krp-who > div { display:grid; grid-template-columns:92px minmax(0, 1fr); gap:12px; padding:7px 0; border-bottom:1px solid var(--k-line); }
.krp-who dt { font:700 8px/1.9 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.krp-who dd { font:500 11.5px/1.45 var(--body); color:var(--ink); }
.krp-who dd em { font-style:normal; font-size:10px; color:var(--dim); }
.krp-cv-state { display:grid; gap:12px; padding:16px 16px 14px; border-radius:14px; background:var(--k-soft); border:1px solid var(--k-line); }
.krp-status { display:inline-flex; align-items:center; gap:8px; font:700 11.5px/1 var(--body); color:var(--ink); }
.krp-status i { width:9px; height:9px; border-radius:50%; background:var(--dim); }
.krp-status.firm i { background:var(--jade); } .krp-status.soft i { background:var(--brass); } .krp-status.early i { background:var(--sindoor); }
.krp-stats { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 14px; }
.krp-stats b { display:block; font:400 26px/1 var(--serif); color:var(--ink); }
.krp-stats span { font:500 9.5px/1.3 var(--body); color:var(--dim); }
.krp-cv-trust { font:400 10px/1.45 var(--body); color:var(--ink-2); }
.krp-cv-read { position:relative; margin-top:24px; padding:16px 20px; border-radius:14px; border:1px solid var(--k-line); border-left:4px solid var(--brass); background:#FFFFFF; }
.krp-cv-headline { margin-top:8px; font:400 20px/1.3 var(--serif); color:var(--ink); }
.krp-cv-code { margin-top:8px; font:400 11px/1.5 var(--body); color:var(--ink-2); }
.krp-cv-code b { color:var(--brass-hi); }
.krp-cv-code span { color:var(--dim); }
.krp-toc { position:relative; margin-top:22px; }
.krp-toc ol { margin-top:8px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:30px; }
.krp-toc li { display:flex; align-items:baseline; gap:6px; padding:4px 0; font:500 10.5px/1.35 var(--body); color:var(--ink); }
.krp-toc li span { flex:0 1 auto; min-width:0; }
.krp-toc li em { font-style:normal; font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-right:6px; }
.krp-toc li i { flex:1 1 auto; min-width:12px; border-bottom:1px dotted #C9C0B2; }
.krp-toc li b { font-weight:700; }
.krp-cv-note { position:absolute; left:60px; right:60px; bottom:36px; padding-top:12px; border-top:1px solid var(--k-line); font:400 9.5px/1.55 var(--body); color:var(--ink-2); }
.krp-cv-note b { color:var(--ink); }
/* sections */
.krp-sec { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:16px; align-items:start; padding:4px 0 2px; }
.krp-sec-n { min-width:42px; font:400 34px/1 var(--serif); color:var(--brass); }
.krp-eyebrow { display:block; font:700 8px/1.3 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--brass); }
.krp-sec h2 { margin-top:5px; font:400 25px/1.15 var(--serif); color:var(--ink); }
.krp-sec p { margin-top:7px; font:400 11px/1.55 var(--body); color:var(--ink-2); max-width:610px; }
.krp-sub { padding-top:6px; border-top:1px solid var(--k-line); }
.krp-sub h3 { font:700 13px/1.3 var(--body); color:var(--ink); }
.krp-sub p { margin-top:3px; font:400 10.5px/1.5 var(--body); color:var(--ink-2); }
.krp-note { font:400 10px/1.55 var(--body); color:var(--ink-2); }
.krp-note b { color:var(--ink); }
.krp-care { padding:9px 12px; border-radius:10px; background:#FBF1EC; border:1px solid #F0D2C6; color:#6B2E1F; }
.krp-quiet { font:400 11px/1.5 var(--body); color:var(--dim); }
.krp-cont-note { display:none; margin-bottom:6px; font:700 7.5px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.krp-cont > .krp-cont-note, .krp-cont .krp-cont-note { display:block; }
.krp-cont .krp-say { display:none; }
.krp-pill { display:inline-block; padding:3px 8px; border-radius:999px; font:700 8.5px/1.25 var(--body); letter-spacing:.03em; white-space:nowrap; color:var(--ink-2); background:var(--st-tile-hi); }
.krp-pill.v-both { color:#8E3320; background:#F8E3DC; } .krp-pill.v-breath { color:#6B5100; background:#F5EBCB; }
.krp-pill.v-chart, .krp-pill.v-code { color:#2C5D74; background:#DFECF2; } .krp-pill.v-present { color:#236B52; background:#DDF0E7; }
/* what stands out */
.krp-finds .krp-items { display:grid; gap:7px; }
.krp-find { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; border:1px solid var(--k-line); background:#FFFFFF; }
.krp-find b { font:700 12px/1.3 var(--body); color:var(--ink); }
.krp-find p { margin-top:2px; font:400 10.5px/1.45 var(--body); color:var(--ink-2); }
.krp-lv { display:grid; justify-items:center; gap:3px; width:42px; color:var(--k-blue); }
.krp-lv svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.krp-lv em { font:700 7px/1 var(--body); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.krp-names { display:flex; flex-wrap:wrap; gap:7px; }
.krp-name { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; border:1px solid var(--k-line); background:#FFFFFF; font:700 11px/1.2 var(--body); color:var(--ink); }
.krp-name em { font:500 9.5px/1 var(--body); font-style:normal; color:var(--dim); }
.krp-name i { width:7px; height:7px; border-radius:50%; background:var(--sindoor); }
.krp-name.grave { border-color:#EBC9BD; background:#FFFBF9; }
/* organs */
.krp-syschips { display:flex; flex-wrap:wrap; gap:6px; }
.krp-sys { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:var(--k-soft); font:700 10.5px/1.2 var(--body); color:var(--ink); }
.krp-sys em { font:400 9.5px/1.2 var(--body); font-style:normal; color:var(--dim); }
.krp-sys i, .krp-org i { width:8px; height:8px; border-radius:50%; background:var(--dim); }
.krp-sys.b-strain i, .krp-org.b-strain i { background:#B9502B; } .krp-sys.b-load i, .krp-org.b-load i { background:#B38A1E; } .krp-sys.b-light i, .krp-org.b-light i { background:#6FA58B; }
.krp-band { display:inline-block; padding:2px 7px; border-radius:999px; font:700 8.5px/1.3 var(--body); white-space:nowrap; color:var(--ink-2); background:var(--st-tile-hi); }
.krp-band.b-strain { color:#FFFFFF; background:#B9502B; } .krp-band.b-load { color:#4A3900; background:#EED79C; } .krp-band.b-light { color:#1E5A42; background:#D7ECE1; }
.krp-orgwhys .krp-items { display:grid; gap:10px; }
.krp-orgwhy { padding:10px 12px; border-radius:12px; background:var(--k-soft); }
.krp-orgwhy > b { display:block; margin-bottom:4px; font:700 11.5px/1.3 var(--body); color:var(--ink); }
.krp-orgwhy li { font:400 10px/1.5 var(--body); color:var(--ink-2); }
.krp-orgwhy li b { color:var(--ink); }
.krp-orgwhy cite { font-style:normal; font-weight:600; font-size:9px; color:var(--brass-hi); }
.krp-orgwhy .ldx-org-class { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px; font:700 8px/1.3 var(--body); color:var(--ink-2); background:#FFFFFF; }
.krp-orgwhy .ldx-sk { font-style:italic; color:var(--dim); }
/* tables */
.krp-table { width:100%; border-collapse:collapse; font:400 10px/1.4 var(--body); color:var(--ink); }
.krp-table.fixed { table-layout:fixed; }
.krp-table th, .krp-table td { white-space:normal; overflow-wrap:anywhere; }
.krp-table tr:last-child td { border-bottom:1px solid var(--k-line); }
.krp-table th { padding:6px 8px; text-align:left; font:700 7.5px/1.2 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); border-bottom:1.5px solid var(--ink-2); vertical-align:bottom; }
.krp-table td { padding:6px 8px; vertical-align:top; border-bottom:1px solid var(--k-line); }
.krp-table td b { font-weight:700; }
.krp-table td em { font-style:normal; color:var(--dim); }
.krp-table .num, .krp-table td.num { text-align:right; white-space:nowrap; overflow-wrap:normal; font-family:var(--body); }
.krp-table .dim { color:var(--dim); }
.krp-table th.wide { width:34%; }
.krp-table tr.now td { background:#FBF6E8; }
.krp-points .krp-table td, .krp-points .krp-table th { padding:4px 6px; }
.krp-points .krp-table td { font-size:9px; line-height:1.35; }
/* the figures */
.krp-figrow { display:grid; grid-template-columns:250px minmax(0, 1fr); gap:24px; align-items:start; }
.krp-fig { display:grid; gap:8px; justify-items:center; padding:12px 8px 10px; border-radius:16px; background:#FAF7F1; border:1px solid var(--k-line); }
.krp-fig svg.ldx-body { display:block; width:226px; height:auto; }
.krp-fig figcaption { font:500 9px/1.35 var(--body); color:var(--dim); text-align:center; }
.krp-figside { display:grid; gap:14px; align-content:start; min-width:0; }
.krp-key { display:grid; gap:9px; padding:12px 14px; border-radius:12px; background:var(--k-soft); }
.krp-scale { display:inline-flex; align-items:center; gap:3px; font:700 8.5px/1 var(--body); color:var(--ink-2); }
.krp-scale em { font-style:normal; margin:0 5px; }
.krp-scale i { display:inline-block; width:13px; height:8px; border-radius:2px; }
.krp-scale .s0, .krp-dot.s0 { background:var(--ldx-s0); } .krp-scale .s1, .krp-dot.s1 { background:var(--ldx-s1); } .krp-scale .s2, .krp-dot.s2 { background:var(--ldx-s2); }
.krp-scale .s3, .krp-dot.s3 { background:var(--ldx-s3); } .krp-scale .s4, .krp-dot.s4 { background:var(--ldx-s4); } .krp-scale .s5, .krp-dot.s5 { background:var(--ldx-s5); }
.krp-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--dim); }
.krp-table td .krp-dot { width:7px; height:7px; margin-right:5px; vertical-align:middle; }
.krp-shapes { display:grid; gap:6px; }
.krp-shapes .ldx-shapes { justify-content:flex-start; gap:6px 12px; font:500 9px/1 var(--body); color:var(--ink-2); }
.krp-k2 { display:inline-flex; align-items:center; gap:6px; font:500 9.5px/1.3 var(--body); color:var(--ink-2); }
.krp-k2 svg { width:12px; height:12px; flex:none; }
.krp-tops ol { margin-top:6px; }
.krp-tops li { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:10px; align-items:center; padding:5px 0; border-bottom:1px solid var(--k-line); }
.krp-tops li b { font:700 10.5px/1.3 var(--body); color:var(--ink); }
.krp-tops li em { display:block; font:400 9px/1.3 var(--body); font-style:normal; color:var(--dim); }
.krp-tops li strong { font:700 10.5px/1 var(--body); color:var(--ink); }
/* the channels and the centres */
.krp-chanrow { display:grid; gap:12px; }
.krp-chanfigs { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.krp-chanrow .krp-fig svg.ldx-body { width:236px; }
.krp-chankey { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; }
.krp-chankey .krp-ckey { display:flex; flex-wrap:wrap; gap:6px 14px; }
.krp-line { display:inline-block; width:18px; height:3px; border-radius:2px; background:var(--ink-2); }
.krp-line.ida { background:var(--soma); } .krp-line.pin { background:var(--sindoor); } .krp-line.sus { background:var(--brass); } .krp-line.thin { height:1px; }
.krp-ckey { display:grid; gap:5px; }
.krp-ckey .ldx-ckey { display:inline-flex; align-items:center; gap:6px; font:500 9.5px/1.3 var(--body); color:var(--ink-2); }
.krp-ckey svg { width:12px; height:12px; }
.krp-ckey .o { fill:var(--brass); stroke:var(--brass); } .krp-ckey .r { fill:none; stroke:var(--ink-2); stroke-width:1.2; } .krp-ckey .k { fill:none; stroke:var(--sindoor); stroke-width:1.3; }
.krp-centres-hd { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.krp-centres-hd b { font:400 18px/1 var(--serif); color:var(--ink); }
.krp-centres-hd em { font:700 10px/1 var(--body); font-style:normal; color:var(--dim); }
.krp-ctable td { vertical-align:middle; }
.krp-cdot { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; vertical-align:middle; }
.krp-cbar { position:relative; display:block; width:100%; height:7px; border-radius:4px; background:var(--k-line); overflow:hidden; }
.krp-cbar b { position:absolute; top:0; bottom:0; left:0; }
.krp-cbar .go { background:var(--brass); } .krp-cbar .hold { background:var(--sindoor); }
.krp-held { font:700 7.5px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--sindoor); }
/* bands, taken from the app's own day cards */
.krp-bands { display:grid; gap:10px; padding:12px 14px 14px; border-radius:14px; border:1px solid var(--k-line); background:#FFFFFF; }
.krp-bands .lband-key { justify-content:flex-start; gap:6px 14px; font-size:10px; }
.krp-bands .lal-facts > div { padding:7px 2px; }
.krp-bands .lal-facts dt { font-size:11px; } .krp-bands .lal-facts dd { font-size:12px; }
.krp-bands .lel-note { margin:0; font:400 10px/1.5 var(--body); color:var(--ink-2); }
.krp-clist { display:grid; gap:4px; }
.krp-clist li { font:400 10.5px/1.45 var(--body); color:var(--ink-2); }
.krp-clist li b { color:var(--ink); }
/* what it means */
.krp-level { display:flex; align-items:center; gap:10px; padding:8px 0 5px; border-bottom:2px solid var(--ink); }
.krp-level h3 { font:400 22px/1 var(--serif); color:var(--ink); }
.krp-level em { margin-left:auto; font:700 9.5px/1 var(--body); font-style:normal; color:var(--dim); }
.krp-lvic { display:inline-grid; color:var(--k-blue); }
.krp-lvic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.krp-lvorg { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.krp-lvorg .krp-eyebrow { width:100%; }
.krp-org { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:var(--k-soft); font:700 10.5px/1.2 var(--body); color:var(--ink); }
.krp-org em { font:400 9.5px/1.2 var(--body); font-style:normal; color:var(--dim); }
.krp-read { padding:14px 16px; border-radius:14px; border:1px solid var(--k-line); border-left:4px solid var(--dim); background:#FFFFFF; }
.krp-read.v-both { border-left-color:#C9462C; } .krp-read.v-breath { border-left-color:#B38A1E; } .krp-read.v-chart, .krp-read.v-code { border-left-color:#2C6D8A; }
.krp-read.v-present { border-left-color:#2F8A6B; }
.krp-read > header { display:flex; align-items:center; gap:10px; }
.krp-read > header .krp-lv { width:auto; }
.krp-read > header b { flex:1 1 auto; font:700 13.5px/1.3 var(--body); color:var(--ink); }
.krp-say { margin-top:6px; font:400 11.5px/1.5 var(--body); color:var(--ink); }
.krp-wit { display:flex; flex-wrap:wrap; gap:6px 16px; font:500 9.5px/1.3 var(--body); color:var(--dim); }
.krp-wit b { font-weight:700; color:var(--ink); }
.krp-rbody { display:grid; gap:10px; margin-top:10px; }
.krp-rsec h5 { margin-bottom:4px; font:700 7.5px/1.2 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--brass); }
.krp-rsec p, .krp-rsec li { font:400 10.5px/1.5 var(--body); color:var(--ink-2); }
.krp-rsec p + p { margin-top:4px; }
.krp-rsec ul { display:grid; gap:3px; }
.krp-rsec li b { color:var(--ink); }
.krp-rsec li.grave b { color:#8E3320; }
.krp-rsec li em { font-style:italic; color:var(--dim); }
.krp-rsec .krp-note { margin-top:4px; }
.krp-q { margin-top:6px; padding:8px 12px; border-left:3px solid var(--brass-dim); background:#FAF7F0; }
.krp-q p { font:italic 400 11px/1.5 var(--serif); color:var(--ink); }
.krp-q cite { display:block; margin-top:3px; font:700 8.5px/1.3 var(--body); font-style:normal; letter-spacing:.03em; color:var(--brass-hi); }
.krp-tr { color:var(--dim); }
/* when */
.krp-now { display:grid; gap:8px; padding:14px 16px; border-radius:14px; background:var(--k-soft); }
.krp-now-hd { display:flex; align-items:center; gap:10px; }
.krp-now-hd b { display:block; margin-top:2px; font:400 18px/1.2 var(--serif); color:var(--ink); }
.krp-now-hd em { font:500 10px/1 var(--body); font-style:normal; color:var(--dim); }
.krp-glyph { display:inline-grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; background:#FFFFFF; border:1px solid var(--k-line);
  font:400 17px/1 'Segoe UI Symbol', 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Apple Symbols', 'DejaVu Sans', sans-serif; }
.krp-run { position:relative; display:block; height:6px; border-radius:3px; background:var(--k-line); overflow:hidden; }
.krp-run i { position:absolute; left:0; top:0; bottom:0; background:var(--brass); }
.krp-now p { font:400 11px/1.5 var(--body); color:var(--ink-2); }
.krp-now p b { color:var(--ink); }
.krp-heavy b { color:#8E3320 !important; } .krp-light b { color:#236B52 !important; }
.krp-ahead { display:grid; gap:6px; }
.krp-strip { position:relative; height:56px; border-radius:8px; background:var(--k-soft); overflow:hidden; }
.krp-seg { position:absolute; top:0; bottom:0; border-right:1px solid #FFFFFF; box-sizing:border-box; }
.krp-seg.now { background:#EFE6CF; }
.krp-seg b { position:absolute; left:2px; right:2px; bottom:0; border-radius:3px 3px 0 0; opacity:.7; }
.krp-seg.heavy b { opacity:1; }
.krp-axis { position:relative; height:12px; font:500 8.5px/1 var(--body); color:var(--dim); }
.krp-axis span { position:absolute; top:0; transform:translateX(-50%); }
.krp-axis .first { left:0; transform:none; }
.krp-skylist .krp-items { display:grid; }
.krp-sky { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--k-line); }
.krp-sky p { font:400 10.5px/1.45 var(--body); color:var(--ink-2); }
/* how sure */
.krp-ticks { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.krp-ticks > div { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:8px; align-items:center; padding:10px 12px; border-radius:12px; border:1px solid var(--k-line); font:500 10.5px/1.3 var(--body); }
.krp-ticks b { font:400 20px/1 var(--serif); }
.krp-ticks i, .krp-need i { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; color:#FFFFFF; background:var(--jade); }
.krp-ticks .miss i, .krp-need.miss i { background:var(--brass); }
.krp-ticks i svg, .krp-need i svg { width:12px; height:12px; }
.krp-needs .krp-items { display:grid; }
.krp-need { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:10px; padding:8px 0; border-bottom:1px solid var(--k-line); }
.krp-need b { font:700 11px/1.3 var(--body); color:var(--ink); }
.krp-need em { margin-left:8px; font:700 8px/1 var(--body); font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.krp-need p { margin-top:2px; font:400 10px/1.5 var(--body); color:var(--ink-2); }
.krp-verses .krp-items { display:grid; gap:8px; }
.krp-verse { display:grid; gap:6px; padding:10px 12px; border-radius:12px; border:1px solid var(--k-line); }
.krp-verse header { display:flex; gap:8px; align-items:center; }
.krp-verse header b { flex:1 1 auto; font:700 11px/1.35 var(--body); color:var(--ink); }
.krp-verse header em { font-style:normal; color:var(--dim); }
.krp-meters { display:flex; flex-wrap:wrap; gap:4px 18px; font:500 9.5px/1.3 var(--body); color:var(--dim); }
.krp-meters b { font-weight:700; color:var(--ink); }
.krp-meters em { font-style:normal; font-weight:400; color:var(--dim); }
.krp-verse p, .krp-verse li { font:400 10px/1.5 var(--body); color:var(--ink-2); }
.krp-cite { font:700 8.5px/1.35 var(--body); color:var(--brass-hi); }
.krp-chartblock { display:grid; gap:8px; }
.krp-chartblock p { font:400 10.5px/1.5 var(--body); color:var(--ink-2); }
.krp-chartblock p b { color:var(--ink); }
.krp-crow { padding:8px 12px; border-radius:10px; background:var(--k-soft); }
.krp-crow > b { font:700 11px/1.3 var(--body); } .krp-crow > em { font:500 9.5px/1 var(--body); font-style:normal; color:var(--dim); }
.krp-crow li { font:400 10px/1.5 var(--body); color:var(--ink-2); }
.krp-measures { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.krp-measures > div { display:grid; gap:4px; padding:12px; border-radius:12px; background:var(--k-soft); }
.krp-measures span { font:700 7.5px/1.3 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.krp-measures b { font:400 22px/1 var(--serif); color:var(--ink); }
.krp-measures b em { font:500 10px/1 var(--body); font-style:normal; color:var(--dim); }
.krp-measures > div > em { font:400 9px/1.35 var(--body); font-style:normal; color:var(--dim); }
/* method, sources and the disclaimers */
.krp-prose p { font:400 11px/1.6 var(--body); color:var(--ink-2); }
.krp-prose p + p { margin-top:8px; }
.krp-prose b { color:var(--ink); }
.krp-sources ul { margin-top:6px; display:grid; gap:4px; }
.krp-sources li { font:400 10.5px/1.5 var(--body); color:var(--ink-2); }
.krp-sources li b { color:var(--ink); }
.krp-legal { display:grid; gap:0; }
.krp-legal h4 { margin:12px 0 3px; font:700 11px/1.3 var(--body); color:var(--ink); }
.krp-legal p { font:400 10.5px/1.55 var(--body); color:var(--ink-2); }
.krp-legal .krp-legal-lead { font-size:12px; color:var(--ink); padding:12px 14px; border-radius:12px; background:var(--k-soft); }
.krp-legal-foot { margin-top:18px; padding-top:14px; border-top:1px solid var(--k-line); display:grid; gap:10px; }
.krp-legal-foot p b { color:var(--ink); }
.krp-legal .krp-copy { font-size:9px; color:var(--dim); }

/* the progress summary on a tablet (the user, 2026-09-24): then-and-now and the chart beside the three targets,
   the three tiles across the foot — so neither column ends in a hole; on a wide screen the tiles sit under the targets */
@media (min-width:720px) and (max-width:999px) {
  .lraG-main { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-areas:"hero goals" "chart goals" "tiles tiles"; row-gap:16px; }
  .lraG-left, .lraG-right { display:contents; }
  .lraG-hero { grid-area:hero; } .lraG-chart { grid-area:chart; align-self:end; } .lraG-goals { grid-area:goals; } .lraG-tiles { grid-area:tiles; }
}

/* ==== THE PHONE'S OWN CALENDAR (ui-timetable.js, the user 2026-09-24) ==== */
.lal-cal { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:14px; margin-top:10px; padding:12px 14px 12px 16px; border-radius:18px;
  background:var(--st-tile, rgba(255,255,255,.03)); box-shadow:inset 0 0 0 1px var(--st-line-soft, rgba(255,255,255,.06)); }
.lal-cal-ico { display:grid; place-items:center; width:40px; height:40px; border-radius:14px; color:var(--ink-2); background:var(--st-tile-hi, rgba(255,255,255,.05)); }
.lal-cal-ico svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lal-cal-tx { display:grid; gap:2px; min-width:0; }
.lal-cal-tx b { font:600 14px/1.25 var(--body); color:var(--ink); }
.lal-cal-tx span { font:400 12px/1.4 var(--body); color:var(--dim); text-wrap:pretty; }
.lal-cal-btn { height:36px; padding:0 16px; border:0; border-radius:999px; cursor:pointer; font:600 13px/1 var(--body); color:var(--ink); white-space:nowrap;
  background:var(--st-tile-hi, rgba(255,255,255,.06)); box-shadow:inset 0 0 0 1px var(--st-line, rgba(255,255,255,.1)); -webkit-tap-highlight-color:transparent; }
.lal-cal-btn:hover { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .45); }
.lal-cal-btn:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lal-cal.made .lal-cal-ico { color:var(--jade); }
.lal-cal.stale { background:color-mix(in srgb, var(--brass-hi) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 30%, transparent); }
.lal-cal.stale .lal-cal-ico { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.lal-cal.stale .lal-cal-btn { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:none; }
@media (max-width:380px) { .lal-cal { grid-template-columns:auto minmax(0, 1fr); } .lal-cal-btn { grid-column:1 / -1; justify-self:end; } }
.lpk-calendar .tcal { display:grid; gap:12px; padding:12px 2px 4px; }
.tcal-lede { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.tcal-k { font:600 10px/1.2 var(--body); letter-spacing:.18em; text-transform:uppercase; color:rgb(var(--acc-rgb)); }
.tcal-opts { display:grid; gap:8px; }
.tcal-opt { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:12px; width:100%; padding:11px 12px; border:0; border-radius:16px; cursor:pointer; text-align:left;
  font:inherit; color:var(--ink); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); -webkit-tap-highlight-color:transparent; }
.tcal-opt:disabled { opacity:.5; cursor:default; }
.tcal-opt.on { background:rgba(var(--acc-rgb), .1); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .5); }
.tcal-opt:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.tcal-ic { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:var(--ink-2); background:var(--st-tile); }
.tcal-opt.on .tcal-ic { color:rgb(var(--acc-rgb)); }
.tcal-ic svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tcal-tx { display:grid; gap:2px; min-width:0; }
.tcal-tx b { font:600 14px/1.25 var(--body); }
.tcal-tx em { font:400 11.5px/1.35 var(--body); font-style:normal; color:var(--dim); }
.tcal-n { font:600 15px/1 var(--body); font-variant-numeric:tabular-nums; color:var(--ink-2); }
.tcal-tick { width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--st-line); }
.tcal-opt.on .tcal-tick { background:rgb(var(--acc-rgb)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%231B1406' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow:none; }
.tcal-two { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.tcal-two > div { display:grid; gap:8px; }
@media (max-width:420px) { .tcal-two { grid-template-columns:minmax(0, 1fr); } }
.tcal-seg { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); padding:3px; border-radius:14px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.tcal-seg button { height:36px; border:0; border-radius:11px; cursor:pointer; background:none; font:500 13px/1 var(--body); color:var(--ink-2); -webkit-tap-highlight-color:transparent; }
.tcal-seg button[aria-checked="true"] { color:var(--ink); font-weight:600; background:rgba(var(--acc-rgb), .18); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .45); }
.tcal-seg button:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:-2px; }
.tcal-go { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:48px; margin-top:4px; border:0; border-radius:999px; cursor:pointer; font:600 14.5px/1 var(--body);
  color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 26px -14px rgba(214,178,74,.9); }
.tcal-go:disabled { opacity:.5; cursor:default; }
.tcal-go svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tcal-go:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:3px; }
.tcal-how { margin:0; padding:10px 12px; border-radius:12px; font:400 12px/1.5 var(--body); color:var(--ink-2); background:var(--st-tile); }
.tcal-how b { color:var(--ink); font-weight:600; }
.tcal-fine { margin:0; font:400 11px/1.5 var(--body); color:var(--dim); }
.tcal-done { display:grid; justify-items:center; gap:10px; padding:10px 4px 4px; text-align:center; }
.tcal-doneic { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.tcal-doneic svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tcal-done b { font:600 16px/1.3 var(--display); color:var(--ink); }
.tcal-done p { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.tcal-alts { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.tcal-alt { height:38px; padding:0 16px; border:0; border-radius:999px; cursor:pointer; font:600 12.5px/1 var(--body); color:var(--ink); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line); }

/* ==== THE ENCRYPTED BACKUP (ui-lite-vault.js, the user 2026-09-24) ==== */
.lvt-card { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:10px 14px; margin-top:12px; padding:14px 16px; border-radius:18px;
  background:var(--st-tile, rgba(255,255,255,.03)); box-shadow:inset 0 0 0 1px var(--st-line-soft, rgba(255,255,255,.06)); }
.lvt-card.on { background:color-mix(in srgb, var(--jade) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 28%, transparent); }
.lvt-card.err { background:color-mix(in srgb, var(--sindoor) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 28%, transparent); }
.lvt-ico { display:grid; place-items:center; width:40px; height:40px; border-radius:14px; color:var(--ink-2); background:var(--st-tile-hi, rgba(255,255,255,.05)); }
.lvt-card.on .lvt-ico { color:var(--jade); }
.lvt-ico svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lvt-tx { display:grid; gap:3px; min-width:0; }
.lvt-tx b { font:600 14px/1.25 var(--body); color:var(--ink); }
.lvt-tx span { font:400 12px/1.45 var(--body); color:var(--dim); text-wrap:pretty; }
.lvt-tx em { font:600 11.5px/1.3 var(--body); font-style:normal; color:var(--jade); }
.lvt-acts { grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.lvt-btn { height:36px; padding:0 16px; border:0; border-radius:999px; cursor:pointer; font:600 13px/1 var(--body); color:var(--ink); white-space:nowrap;
  background:var(--st-tile-hi, rgba(255,255,255,.06)); box-shadow:inset 0 0 0 1px var(--st-line, rgba(255,255,255,.1)); -webkit-tap-highlight-color:transparent; }
/* the gold one; never class it `go`, which the app styles large and in capitals everywhere */
.lvt-btn.prime { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:none; }
.lvt-btn:focus-visible, .lvt-go:focus-visible, .lvt-off:focus-visible { outline:2px solid rgb(var(--acc-rgb, 214, 177, 115)); outline-offset:2px; }
@media (min-width:560px) { .lvt-card { grid-template-columns:auto minmax(0, 1fr) auto; } .lvt-acts { grid-column:auto; } }
.lpk-vault .lvt-sheet { display:grid; gap:14px; padding:12px 2px 4px; }
.lvt-lede { margin:0; font:400 13px/1.55 var(--body); color:var(--ink-2); }
.lvt-lede b { color:var(--ink); font-weight:600; }
.lvt-code { display:grid; grid-template-columns:repeat(4, auto); justify-content:center; gap:8px 10px; padding:16px 12px; border-radius:16px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .35); user-select:all; -webkit-user-select:all; }
.lvt-code span { padding:6px 9px; border-radius:9px; font:600 17px/1 var(--mono); letter-spacing:.12em; color:var(--ink); background:rgba(var(--acc-rgb), .08); }
.lvt-pm input, .lvt-hide { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.lvt-pm, .lvt-restore { display:grid; gap:12px; margin:0; }
.lvt-go { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:48px; border:0; border-radius:999px; cursor:pointer; font:600 14.5px/1 var(--body);
  color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 26px -14px rgba(214,178,74,.9); }
.lvt-go:disabled { opacity:.75; cursor:default; }
.lvt-go svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lvt-go .lkc-spin { color:#1B1406; }
.lvt-row { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.lvt-field { display:grid; gap:6px; }
.lvt-field span { font:600 10px/1.2 var(--body); letter-spacing:.18em; text-transform:uppercase; color:rgb(var(--acc-rgb)); }
.lvt-field input { height:50px; padding:0 14px; border:0; border-radius:14px; font:600 16px/1 var(--mono); letter-spacing:.08em; color:var(--ink);
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line); }
.lvt-field input:focus { outline:2px solid rgb(var(--acc-rgb)); outline-offset:1px; }
.lvt-fine { margin:0; font:400 11.5px/1.5 var(--body); color:var(--dim); }
.lvt-ok, .lvt-err { margin:0; padding:10px 12px; border-radius:12px; font:500 13px/1.5 var(--body); }
.lvt-ok { color:var(--ink); background:color-mix(in srgb, var(--jade) 14%, transparent); }
.lvt-err { color:var(--ink); background:color-mix(in srgb, var(--sindoor) 14%, transparent); }
.lvt-off { justify-self:center; padding:8px 12px; border:0; background:none; cursor:pointer; font:500 12.5px/1.3 var(--body); color:var(--sindoor); text-decoration:underline; text-underline-offset:3px; }
/* the way back, offered on a new install: one quiet line above the form, its buttons small and never gold-filled,
   so the form's own gold button stays the only one (the user, 2026-09-25) */
.lvt-welcome { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 14px; padding:7px 7px 7px 14px; border-radius:18px;
  background:color-mix(in srgb, var(--brass-hi) 5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 22%, transparent); }
.lvt-w-ico { display:grid; place-items:center; flex:none; width:18px; height:18px; color:var(--brass-hi); }
.lvt-w-ico svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lvt-w-tx { flex:1 1 auto; font:500 13px/1.25 var(--body); color:var(--ink); white-space:nowrap; }
.lvt-w-acts { display:flex; align-items:center; gap:2px; margin-left:auto; }
.lvt-w-acts { gap:6px; }
.lvt-w-go { height:32px; padding:0 14px; border:0; border-radius:999px; cursor:pointer; font:600 12.5px/1 var(--body); white-space:nowrap; -webkit-tap-highlight-color:transparent;
  color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 45%, transparent); }
.lvt-w-go:focus-visible, .lvt-link:focus-visible { outline:2px solid rgb(var(--acc-rgb, 214, 177, 115)); outline-offset:2px; }
/* the key card, reached from Find your key: lit for a moment so the eye lands on it */
.lvt-card.lit { animation:lvt-lit 2.4s ease-out; }
@keyframes lvt-lit { 0%, 35% { box-shadow:inset 0 0 0 1.5px rgb(var(--acc-rgb)), 0 0 0 5px rgba(var(--acc-rgb), .16); } 100% { box-shadow:inset 0 0 0 1px var(--st-line-soft, rgba(255,255,255,.06)), 0 0 0 0 rgba(var(--acc-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .lvt-card.lit { animation:none; box-shadow:inset 0 0 0 1.5px rgb(var(--acc-rgb)); } }
@media (max-width:380px) { .lvt-w-ico { display:none; } }
/* where the key is: the three places, then the way on */
.lvt-where { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.lvt-where li { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:start; gap:12px; padding:12px 14px; border-radius:16px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft, rgba(255,255,255,.06)); }
.lvt-where-ico { display:grid; place-items:center; width:32px; height:32px; border-radius:11px; color:rgb(var(--acc-rgb)); background:rgba(var(--acc-rgb), .1); }
.lvt-where-ico svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lvt-where-tx { display:grid; gap:3px; min-width:0; }
.lvt-where-tx b { font:600 13.5px/1.3 var(--body); color:var(--ink); }
.lvt-where-tx span { font:400 12.5px/1.5 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lvt-link { justify-self:center; padding:6px 10px; border:0; background:none; cursor:pointer; font:500 12.5px/1.3 var(--body); color:var(--ink-2);
  text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--ink-2) 40%, transparent); text-underline-offset:3px; }

/* ==== WHEN THE DEVICE KEEPS ANOTHER CLOCK (the user, 2026-09-24: "timestamps correct for the user across any part of
   the globe"): the notice where times are read — Record and the person form — and one quiet line on home ==== */
.lclk-away { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:10px 12px; align-items:start; margin:0 0 14px; padding:14px 16px;
  border-radius:18px; background:color-mix(in srgb, var(--brass-hi) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 30%, transparent); }
.lclk-away .lclk-ico { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--brass-hi);
  background:color-mix(in srgb, var(--brass-hi) 14%, transparent); }
.lclk-away .lclk-ico svg, .lclk-chip svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lclk-away p { margin:0; display:grid; gap:3px; min-width:0; }
.lclk-away b { font:600 14.5px/1.3 var(--body); color:var(--ink); }
.lclk-away span { font:400 12.5px/1.5 var(--body); color:var(--ink-2); overflow-wrap:anywhere; }
.lclk-away .lclk-say { font:italic 500 12.5px/1.45 var(--body); color:var(--sindoor); }
.lclk-away .lclk-acts { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lclk-away .lclk-go, .lclk-away .lclk-alt { min-height:38px; padding:0 16px; border-radius:999px; font:600 13px/1 var(--body); cursor:pointer; }
.lclk-away .lclk-go { border:0; color:#1B1406; background:var(--brass-hi); }
.lclk-away .lclk-go[disabled] { opacity:.6; cursor:progress; }
.lclk-away .lclk-alt { border:1px solid color-mix(in srgb, var(--brass-hi) 45%, transparent); color:var(--ink); background:none; }
.lclk-away .lclk-x { margin-left:auto; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:none; color:var(--dim); font:400 20px/1 var(--body); cursor:pointer; }
.lclk-away :is(.lclk-go, .lclk-alt, .lclk-x):focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lclk-away .lclk-x:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); }
#lclk-person .lclk-away { margin:12px 16px 4px; }
.lclk-chip { display:flex; align-items:center; gap:8px; width:fit-content; max-width:100%; margin:10px auto 0; padding:7px 12px 7px 10px; border:0; border-radius:999px;
  background:color-mix(in srgb, var(--brass-hi) 9%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 26%, transparent);
  color:var(--ink-2); font:500 12px/1.3 var(--body); text-align:left; cursor:pointer; }
.lclk-chip svg { flex:0 0 auto; width:15px; height:15px; color:var(--brass-hi); }
.lclk-chip span { min-width:0; }
.lclk-chip b { flex:0 0 auto; font-weight:600; color:var(--brass-hi); white-space:nowrap; }
.lclk-chip:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lh-card .lclk-chip { margin:12px 0 2px; }
@media (max-width: 420px) { .lclk-chip { flex-wrap:wrap; border-radius:16px; } .lclk-chip span { flex:1 1 0; } .lclk-chip b { width:100%; padding-left:23px; } }

/* ==== WHERE YOU ARE NOW, LIVE (the user, 2026-09-24: GPS, automatic, in real time): the line under the field ==== */
#lgps-row { grid-column:1 / -1; }
.lgps { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:2px 18px 14px; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.lgps .lgps-ico { flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:var(--dim);
  background:color-mix(in srgb, var(--ink) 6%, transparent); }
.lgps .lgps-ico svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lgps.on .lgps-ico { color:var(--jade); background:color-mix(in srgb, var(--jade) 14%, transparent); }
.lgps.live .lgps-ico { box-shadow:0 0 0 0 color-mix(in srgb, var(--jade) 45%, transparent); animation:lgpsPulse 2.4s ease-out infinite; }
@keyframes lgpsPulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--jade) 45%, transparent); } 80%, 100% { box-shadow:0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .lgps.live .lgps-ico { animation:none; } }
.lgps .lgps-say { flex:1 1 180px; min-width:0; overflow-wrap:anywhere; }
.lgps .lgps-say b { font-weight:600; color:var(--ink); }
.lgps .lgps-say em { display:block; font-style:normal; font-size:11.5px; color:var(--dim); }
.lgps .lgps-acts { display:flex; gap:6px; }
.lgps .lgps-btn { min-height:32px; padding:0 14px; border-radius:999px; border:0; font:600 12.5px/1 var(--body); color:#1B1406; background:var(--brass-hi); cursor:pointer; }
.lgps .lgps-btn.quiet { color:var(--ink); background:none; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 45%, transparent); }
.lgps .lgps-btn:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lgps .lkc-spin { --lkc:18px; }

/* ---- Lite (the dial audit, 2026-09-25): Quiet keeps what its setting says — the signs, the houses, the planets,
   the lagna and the hands. The time rings and the life lanes went on showing through it. ---- */
#plate.quiet #ring-year,
#plate.quiet #lyr-ghatana,
#plate.quiet #lyr-grahan-year,
#plate.quiet #lyr-grahan-clock,
#plate.quiet #lyr-pragati,
#plate.quiet #lyr-swara,
#plate.quiet #lyr-tattva,
#plate.quiet #lyr-kaarya { display:none; }

/* ==== THE PERSON FORM, MINIMAL (the user, 2026-09-25) — ui-lite-person.js ====================================
   "All the auto fields should be hidden … no red text below Birth time not known … the Coming back to Kaalchakra
   banner the same width as the form card … minimalistic." Placed last so it settles every earlier rule. */

/* one width: the banner, the device-clock notice, the people and the form all sit the form's gutter in from the panel */
.lite-app #drawer-person { --lpf-gut:14px; }
@media (min-width:560px) { .lite-app #drawer-person { --lpf-gut:22px; } }   /* the form's own gutter (.intake padding) */
.lite-app #drawer-person > :is(.lvt-welcome, #lclk-person, .lpf-people) { margin-left:var(--lpf-gut); margin-right:var(--lpf-gut); }
/* clear of the heading row's close button, which has no padding under it (the user, 2026-09-25: the × collided with it) */
.lite-app #drawer-person > .lvt-welcome { margin-top:14px; margin-bottom:14px; }
/* the drawer styles its buttons large; these two stay the size the line gives them */
.lite-app #drawer-person > .lvt-welcome button { width:auto; min-height:0; margin:0; letter-spacing:normal; text-transform:none; }

/* what the form no longer shows: the switcher and chips (the list below does their work), the read-back, the notes,
   the hints under the toggle, the GPS paragraph, the here tile — and the auto fields, never, even when a place is not found */
.lite-app #drawer-person #personbar,
.lite-app #drawer-person .intake .saved,
.lite-app #drawer-person .intake #dtrow,
.lite-app #drawer-person .intake #hererow,
.lite-app #drawer-person .intake .note,
.lite-app #drawer-person .intake .optrow .placehint,
.lite-app #drawer-person #lgps-row { display:none !important; }
.lite-app #intake .lite-autofield,
.lite-app #intake.lite-manual-birth .lite-autofield.birth,
.lite-app #intake.lite-manual-here .lite-autofield.here { display:none !important; }
/* with the people listed, the form shows only when it is asked for (Add a person, or the pencil) */
html.lpf-listed .lite-app #drawer-person .intake:not([open]),
html.lpf-listed.lite-app #drawer-person .intake:not([open]) { display:none; }
.lite-app #drawer-person .intake summary { cursor:default; padding:6px 2px 16px; }
.lite-app #drawer-person .intake summary::before, .lite-app #drawer-person .intake summary::after { display:none !important; }
.lite-app #drawer-person .intake summary h2 { font:400 clamp(27px, 7vw, 34px)/1.1 var(--display); letter-spacing:-.005em; }

/* the place row says, quietly, when a place was not found — never in red */
.lite-app #drawer-person .lpf-say { display:block; margin-top:4px; font:500 12.5px/1.35 var(--body); color:var(--brass-hi); }
.lite-app #drawer-person .lpf-say[hidden] { display:none; }

/* where you are now: its GPS state as one mark at the end of the row */
.lite-app #drawer-person .intake label.lpf-hasgps { padding-right:62px; }
.lite-app #drawer-person .lpf-gps { position:absolute; right:12px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:38px; height:38px; margin:0; padding:0;
  border:0; border-radius:50%; cursor:pointer; color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 10%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 34%, transparent); }
.lite-app #drawer-person .lpf-gps[hidden] { display:none; }
.lite-app #drawer-person .lpf-gps svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lite-app #drawer-person .lpf-gps[data-st="on"], .lite-app #drawer-person .lpf-gps[data-st="live"] { color:var(--jade); background:color-mix(in srgb, var(--jade) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 40%, transparent); }
.lite-app #drawer-person .lpf-gps[data-st="live"]::after { content:""; position:absolute; inset:-1px; border-radius:50%; box-shadow:0 0 0 0 color-mix(in srgb, var(--jade) 50%, transparent); animation:lpfPulse 2.4s ease-out infinite; }
@keyframes lpfPulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--jade) 50%, transparent); } 80%, 100% { box-shadow:0 0 0 9px transparent; } }
.lite-app #drawer-person .lpf-gps[data-st="off"] { color:var(--dim); background:none; box-shadow:inset 0 0 0 1px var(--st-line, var(--rule)); }
.lite-app #drawer-person .lpf-gps:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lite-app #drawer-person .lpf-gps .lkc-spin { --lkc:16px; }
@media (prefers-reduced-motion: reduce) { .lite-app #drawer-person .lpf-gps[data-st="live"]::after { animation:none; } }

/* Birth time not known: one line */
.lite-app #drawer-person .intake .optrow .check { justify-content:space-between; padding:15px 18px; font:500 15px/1.3 var(--body); }

/* More options: the ayanamsa and how exactly the birth time is known */
.lite-app #drawer-person .lpf-more { margin:0 0 4px; }
.lite-app #drawer-person .lpf-more > summary { display:flex; align-items:center; gap:10px; padding:10px 6px; cursor:pointer; list-style:none; font:500 14px/1.2 var(--body); color:var(--ink-2); }
.lite-app #drawer-person .lpf-more > summary::-webkit-details-marker { display:none; }
.lite-app #drawer-person .lpf-more > summary em { font-style:normal; font-size:12.5px; color:var(--dim); }
.lite-app #drawer-person .lpf-more > summary i { margin-left:auto; display:grid; place-items:center; width:26px; height:26px; color:var(--dim); transition:transform .25s; }
.lite-app #drawer-person .lpf-more > summary i svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lite-app #drawer-person .lpf-more[open] > summary i { transform:rotate(90deg); }
.lite-app #drawer-person .lpf-more > summary:hover { color:var(--ink); }
.lite-app #drawer-person .lpf-more > summary:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:12px; }
.lite-app #drawer-person .lpf-more-in { display:grid; grid-template-columns:minmax(0,1fr); margin:2px 0 8px; border-radius:20px; overflow:hidden;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lite-app #drawer-person .lpf-more-in > label { position:relative; display:block; padding:12px 18px; }
.lite-app #drawer-person .lpf-more-in > label + label { border-top:1px solid var(--st-line-soft); }
.lite-app #drawer-person .lpf-more-in select { box-sizing:border-box; width:100%; min-height:30px; margin:0; padding:0; border:0; background:transparent; color:var(--ink); font:500 16px/1.3 var(--body); }

/* the buttons: one gold action, the sample as a quiet line */
.lite-app #drawer-person .intake .row-actions { margin-top:14px; gap:6px; }
.lite-app #drawer-person .intake #f-ref { border:0; min-height:40px; color:var(--dim); font:500 13.5px/1 var(--body); }
.lite-app #drawer-person .intake #f-ref:hover { color:var(--brass-hi); }
.lite-app #drawer-person .intake .err:not(:empty) { color:var(--brass-hi); }

/* the people: one list — tap to open, the pencil for the one on the dial, × to remove (asked twice), and Add a person */
.lite-app #drawer-person .lpf-people { margin-top:4px; margin-bottom:16px; border-radius:22px; overflow:hidden; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lite-app #drawer-person .lpf-ph { display:flex; align-items:center; justify-content:space-between; padding:14px 18px 6px; font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lite-app #drawer-person .lpf-ph em { font-style:normal; letter-spacing:0; }
.lite-app #drawer-person .lpf-list { list-style:none; margin:0; padding:0; }
.lite-app #drawer-person .lpf-row { display:flex; align-items:center; gap:4px; padding:0 10px 0 0; }
.lite-app #drawer-person .lpf-row + .lpf-row { box-shadow:inset 0 1px 0 var(--st-line-soft); }
.lite-app #drawer-person .lpf-open { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px; margin:0; padding:10px 8px 10px 16px; border:0; background:none; cursor:pointer; text-align:left; color:var(--ink); }
.lite-app #drawer-person .lpf-open:focus-visible { outline:2px solid var(--brass-hi); outline-offset:-2px; border-radius:14px; }
.lite-app #drawer-person .lpf-av { flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; font:600 13px/1 var(--body); letter-spacing:.02em;
  color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 30%, transparent); }
.lite-app #drawer-person .lpf-row.on .lpf-av { color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:none; }
.lite-app #drawer-person .lpf-tx { flex:1 1 auto; min-width:0; display:grid; gap:3px; }
.lite-app #drawer-person .lpf-tx b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 15.5px/1.2 var(--body); }
.lite-app #drawer-person .lpf-tx em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 12.5px/1.2 var(--body); font-style:normal; color:var(--dim); }
.lite-app #drawer-person .lpf-now { flex:0 0 auto; padding:5px 9px; border-radius:999px; font:600 10.5px/1 var(--body); letter-spacing:.04em; color:var(--jade); background:color-mix(in srgb, var(--jade) 13%, transparent); }
.lite-app #drawer-person .lpf-act { flex:0 0 auto; display:grid; place-items:center; width:36px; height:36px; margin:0; padding:0; border:0; border-radius:50%; cursor:pointer; background:none; color:var(--dim); }
.lite-app #drawer-person .lpf-act svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lite-app #drawer-person .lpf-act:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.lite-app #drawer-person .lpf-row.on .lpf-act { color:var(--brass-hi); }
.lite-app #drawer-person .lpf-act.lpf-sure { width:auto; height:32px; padding:0 13px; border-radius:999px; font:600 12.5px/1 var(--body); color:var(--ink);
  background:color-mix(in srgb, var(--sindoor) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sindoor) 40%, transparent); }
.lite-app #drawer-person .lpf-act:focus-visible { outline:2px solid var(--brass-hi); outline-offset:1px; }
.lite-app #drawer-person .lpf-add { display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:12px 16px 14px; border:0; background:none; cursor:pointer; text-align:left;
  font:500 15px/1.2 var(--body); color:var(--brass-hi); box-shadow:inset 0 1px 0 var(--st-line-soft); }
.lite-app #drawer-person .lpf-people > .lpf-add:first-child { box-shadow:none; padding-top:14px; }
.lite-app #drawer-person .lpf-plus { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:var(--brass-hi); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 40%, transparent); }
.lite-app #drawer-person .lpf-plus svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.lite-app #drawer-person .lpf-add:hover { background:color-mix(in srgb, var(--brass-hi) 6%, transparent); }
.lite-app #drawer-person .lpf-add:focus-visible { outline:2px solid var(--brass-hi); outline-offset:-2px; border-radius:0 0 22px 22px; }

/* the list of places opens over the rest of the form, not inside the card that holds the field (the card clips what
   runs past its rounded corners — with the form shorter, the list was cut after one row) */
.lite-app #drawer-person .intake .fields:has(.combopop:not([hidden])) { overflow:visible; z-index:5; position:relative; }
.lite-app #drawer-person .intake .fields .combopop { z-index:30; }
/* a place is named, not measured: no coordinates, zones or populations in the list */
.lite-app #drawer-person .combopop .cbsub { display:none; }
.lite-app #drawer-person .combopop .comborow { padding-top:12px; padding-bottom:12px; }
/* narrow screens: the gold initials already say who is on the dial */
@media (max-width:420px) { .lite-app #drawer-person .lpf-now { display:none; } }

/* ==== THE HOME ON THE WEBSITE HERO'S GROUND (the user, 2026-09-25: "the current bg of the home page in the webapp is
   complete black, I want the bg color to be the website's hero section bg color"). The deeper night (2026-09-17) took
   the ground to #030304 and cut the sky's glow to a trace; the ground and the glow go back to the hero's own — site.css
   --ground #08090C, and the hero's gold-to-violet light. The deeper night's panels, words and hairlines stay. ==== */
:root:not([data-theme="light"]) {
  --ground:#08090C; --ground-2:#0C0D11;
  --sky:radial-gradient(circle 560px at 82% 10%, rgba(214,177,115,.10), rgba(143,134,214,.05) 40%, transparent 68%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ground:#F4F1EC; --ground-2:#EBE6DE;
    --sky:radial-gradient(130% 60% at 50% -10%, #DCC3CF 0%, #EBD9D2 30%, #F3EDE7 58%, #F4F1EC 100%);
  }
}

/* ==== DAY THEME: SOFT LIFTS (the user, 2026-09-25: the form card "still having high shadow breaking the aesthetics")
   The Night theme's near-black lifts, rgba(0,0,0,.9-.95), read on the dark ground as depth and on the cream one as a dark
   smudge. Every card that carried one without a Day version lifts here with the day's own warm shade, as the home card
   and the Time table's first card already do. ==== */
:root[data-theme="light"].lite-app #drawer-person .intake .fields { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .2), 0 1px 2px rgba(70,52,20,.05), 0 14px 30px -24px rgba(70,52,20,.16); }
:root[data-theme="light"].lite-app #drawer-person .intake button.go { box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 8px 18px -12px rgba(150,112,24,.5); }
:root[data-theme="light"] .lal-ans button { box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 10px 22px -18px rgba(70,52,20,.28); }
:root[data-theme="light"] .tstwrap .tst { box-shadow:0 30px 70px -40px rgba(60,40,80,.38), inset 0 0 0 1px rgba(40,30,60,.08); }

/* ==== THE CLOSE DISC ON THE PERSON AND SETTINGS CARDS, QUIETER (the user, 2026-09-25: "the cross button … is still too
   big and breaking aesthetics and looks very close to the first card"): a 28px disc with a hairline cross in the quiet
   ink, level with the eyebrow beside it, a soft gold edge on hover rather than a gold fill, and air under the head ==== */
.lite-app :is(#drawer-person, #drawer-settings) .drawerhead { align-items:center; padding:18px 18px 6px 22px; }
.lite-app :is(#drawer-person, #drawer-settings) .drawerhead [data-close] { width:28px; height:28px; background:transparent; color:var(--dim);
  border-color:color-mix(in srgb, var(--st-line, rgba(255,255,255,.09)) 85%, transparent); transition:color .2s, border-color .2s, background .2s; }
.lite-app :is(#drawer-person, #drawer-settings) .drawerhead [data-close]::before,
.lite-app :is(#drawer-person, #drawer-settings) .drawerhead [data-close]::after { width:11px; height:1.5px; }
.lite-app :is(#drawer-person, #drawer-settings) .drawerhead [data-close]:hover { color:var(--ink); background:var(--st-tile, rgba(255,255,255,.035)); border-color:rgba(var(--acc-rgb), .55); }
.lite-app #drawer-person > .lvt-welcome { margin-top:22px; }
/* Find your key before any chart: one line in the banner saying what comes first (lvtNeedChart) */
.lvt-w-note { flex:1 1 100%; margin:4px 7px 5px 0; padding-top:9px; border-top:1px solid color-mix(in srgb, var(--rule, rgba(255,255,255,.12)) 70%, transparent);
  font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.lvt-w-note.in { animation:lvtnote .35s cubic-bezier(.16,1,.3,1); }
@keyframes lvtnote { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .lvt-w-note.in { animation:none; } }
.lite-has-chart .lvt-w-note { display:none; }   /* once a chart is open the line no longer holds */
/* ==== COMING BACK?, ONE ROW (the user, 2026-10-25: "On narrow screen the two buttons are shifted below"): the words and the two buttons
   stay on one line at any width; the words give way first, the buttons tighten below 420px; the note, when shown, takes the row under */
.lvt-welcome { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; }
.lvt-w-ico { grid-column:1; }
.lvt-w-tx { grid-column:2; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.lvt-w-acts { grid-column:3; }
.lvt-w-note { grid-column:1 / -1; }
@media (max-width:420px) {
  .lvt-welcome { column-gap:8px; padding-left:12px; }
  .lvt-w-acts { gap:5px; }
  .lvt-w-go { padding:0 11px; font-size:12px; }
}
@media (max-width:380px) {
  .lvt-welcome { grid-template-columns:minmax(0, 1fr) auto; }
  .lvt-w-tx { grid-column:1; }
  .lvt-w-acts { grid-column:2; }
}
@media (max-width:340px) {
  .lvt-welcome { column-gap:6px; padding-left:11px; }
  .lvt-w-go { padding:0 9px; }
}
/* END COMING BACK ONE ROW */
/* ==== BREATH ANALYSIS (2026-11-01, ui-lite-swipe.js lhsBalFold): the record's sides and elements, against the Swara Code ==== */
.lhs-now-bal { --lbl-l:#B9CBF2; --lbl-r:#F2913F; --lbl-b:#B69BE0; --lbl-jala:#F1ECDF; --lbl-tile:rgba(255,255,255,.04); --lbl-line:rgba(255,255,255,.08); --lbl-up:#F2B866; --lbl-dn:#8FB8E8; }
:root[data-theme="light"] .lhs-now-bal { --lbl-l:#5878C2; --lbl-r:#D2681E; --lbl-b:#8A69C4; --lbl-jala:#7F9BB4; --lbl-tile:rgba(40,30,60,.035); --lbl-line:rgba(40,30,60,.1); --lbl-up:#B5731A; --lbl-dn:#3F72B5; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lhs-now-bal { --lbl-l:#5878C2; --lbl-r:#D2681E; --lbl-b:#8A69C4; --lbl-jala:#7F9BB4; --lbl-tile:rgba(40,30,60,.035); --lbl-line:rgba(40,30,60,.1); --lbl-up:#B5731A; --lbl-dn:#3F72B5; }
}
.lhs-balf .lhs-fold-ico svg { fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.lbl { display:grid; gap:14px; text-transform:none; letter-spacing:normal; }
.lbl-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lbl-n { font:500 12px/1 var(--body); color:var(--ink-2); } .lbl-n b { font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.lbl-win { display:inline-flex; padding:3px; border-radius:999px; background:var(--lbl-tile); box-shadow:inset 0 0 0 1px var(--lbl-line); }
.lbl-win button { min-height:28px; padding:0 11px; border:0; border-radius:999px; background:none; cursor:pointer; font:600 11.5px/1 var(--body); color:var(--ink-2); -webkit-tap-highlight-color:transparent; }
.lbl-win button[aria-checked="true"] { color:var(--ink); background:rgba(var(--acc-rgb, 238, 201, 110), .18); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb, 238, 201, 110), .45); }
.lbl-win button:focus-visible { outline:2px solid var(--brass-hi); outline-offset:1px; }
.lbl-blk { display:grid; gap:10px; padding:12px; border-radius:16px; background:var(--lbl-tile); box-shadow:inset 0 0 0 1px var(--lbl-line); }
.lbl-hd { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; }
.lbl-k { font:600 10px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--brass-hi); margin-right:auto; }
.lbl-sub { font:500 11px/1 var(--body); color:var(--dim); }
.lbl-pill { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:999px; font:600 11px/1 var(--body); color:var(--ink); background:var(--lbl-tile); box-shadow:inset 0 0 0 1px var(--lbl-line); }
.lbl-pill small { font-size:10px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lbl-pill.left { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lbl-l) 60%, transparent); }
.lbl-pill.right { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lbl-r) 60%, transparent); }
.lbl-pill.b { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lbl-b) 60%, transparent); }
.lbl-rows { display:grid; gap:6px; }
.lbl-row { display:grid; grid-template-columns:36px minmax(0, 1fr); align-items:center; gap:8px; }
.lbl-rk { font:600 9.5px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lbl-bar { display:flex; gap:2px; height:22px; border-radius:8px; overflow:hidden; }
.lbl-bar.thin { height:6px; border-radius:4px; gap:1.5px; }
.lbl-s { display:grid; place-items:center; min-width:0; }
.lbl-s.l { background:var(--lbl-l); } .lbl-s.r { background:var(--lbl-r); } .lbl-s.b { background:var(--lbl-b); }
.lbl-row.x .lbl-s { opacity:.55; }
.lbl-row.kx .lbl-rk { color:var(--brass-hi); }
.lbl-row.kx .lbl-bar { box-shadow:0 0 0 1px color-mix(in srgb, var(--brass-hi) 55%, transparent); }
.lbl-s b { font:700 11px/1 var(--body); color:#14121B; font-variant-numeric:tabular-nums; }
.lbl-vd { margin:0; font:400 14px/1.5 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lbl-vd b { font-weight:600; color:var(--ink); } .lbl-vd small { font-size:11px; font-variant-numeric:tabular-nums; color:var(--ink-2); }
.lbl-ot { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:6px; }
.lbl-oc { position:relative; display:grid; gap:3px; padding:8px 9px 10px; border-radius:10px; background:var(--lbl-tile); box-shadow:inset 0 0 0 1px var(--lbl-line); overflow:hidden; }
.lbl-oc b { font:300 18px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; } .lbl-oc b small { font-size:10px; color:var(--ink-2); }
.lbl-oc em { font:500 11px/1.25 var(--body); font-style:normal; color:var(--ink-2); }
.lbl-oc i { position:absolute; left:0; bottom:0; height:3px; border-radius:0 2px 2px 0; background:var(--lbl-l); }
.lbl-oc.r i { background:var(--lbl-r); } .lbl-oc.k i { background:var(--brass-hi); }
.lbl .el-prithvi { --lbl-ec:#E4C04A; } .lbl .el-jala { --lbl-ec:var(--lbl-jala); } .lbl .el-agni { --lbl-ec:#E0573B; } .lbl .el-vayu { --lbl-ec:#7FB6DB; } .lbl .el-akasha { --lbl-ec:#C49BE0; }
.lbl-gs { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:4px; }
.lbl-g { display:grid; justify-items:center; align-content:start; gap:7px; min-width:0; padding:9px 0 8px; border:0; border-radius:12px; background:none; color:inherit; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.lbl-g[aria-pressed="true"] { background:var(--lbl-tile); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lbl-ec) 45%, transparent); }
.lbl-g:focus-visible { outline:2px solid var(--brass-hi); outline-offset:1px; }
.lbl-gv { font:300 17px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; } .lbl-gv small { font-size:10px; color:var(--ink-2); }
.lbl-gt { position:relative; width:18px; height:78px; border-radius:6px; background:var(--lbl-line); }
.lbl-gt i { position:absolute; display:block; }
.lbl-gt .bd { left:-6px; right:-6px; border-radius:3px; background:color-mix(in srgb, var(--ink) 10%, transparent); }
.lbl-gt .f { left:0; right:0; bottom:0; border-radius:6px; background:var(--lbl-ec); opacity:.7; }
.lbl-g.up .lbl-gt .f, .lbl-g.dn .lbl-gt .f { opacity:1; }
.lbl-gt .c { left:-8px; right:-8px; height:0; border-top:1.5px dashed var(--ink); opacity:.8; }
.lbl-gt .k { left:-11px; width:7px; height:7px; margin-bottom:-3.5px; border-radius:50%; background:var(--brass-hi); }
.lbl-gn { font:500 11px/1 var(--body); color:var(--ink-2); white-space:nowrap; }
.lbl-gst { font:600 10px/1 var(--body); font-style:normal; white-space:nowrap; padding:3px 6px; border-radius:999px; }
.lbl-gst.up { color:var(--lbl-up); background:color-mix(in srgb, var(--lbl-up) 15%, transparent); }
.lbl-gst.dn { color:var(--lbl-dn); background:color-mix(in srgb, var(--lbl-dn) 15%, transparent); }
.lbl-gst.eq { padding:3px 0; color:var(--ink-2); }
.lbl-gst.none { color:var(--dim); }
.lbl-pill.up { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lbl-up) 60%, transparent); }
.lbl-pill.dn { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lbl-dn) 60%, transparent); }
.lbl-key { display:flex; gap:12px; margin:-2px 0 0; padding:0; list-style:none; }
.lbl-key li { display:inline-flex; align-items:center; gap:5px; font:500 10.5px/1 var(--body); color:var(--ink-2); }
.lbl-key { justify-content:center; }
.lbl-key i { display:block; }
.lbl-key .ob i { width:7px; height:11px; border-radius:2px; background:linear-gradient(#E0573B, #7FB6DB); }
.lbl-key .xp i { width:14px; height:0; border-top:1.5px dashed var(--ink); opacity:.8; }
.lbl-key .kx i { width:7px; height:7px; border-radius:50%; background:var(--brass-hi); }
.lbl-tx { display:grid; gap:6px; padding:9px 11px; border-radius:12px; background:var(--lbl-tile); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lbl-ec) 35%, transparent); }
.lbl-txh { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.lbl-txh i { width:8px; height:8px; border-radius:50%; background:var(--lbl-ec); flex:0 0 auto; }
.lbl-txh b { font:600 12.5px/1.2 var(--body); color:var(--ink); }
.lbl-txh em { margin-left:auto; font:600 11px/1 var(--body); font-style:normal; font-variant-numeric:tabular-nums; color:var(--ink-2); }
.lbl-txh em.up { color:var(--lbl-up); } .lbl-txh em.dn { color:var(--lbl-dn); }
.lbl-ds { padding:2px 7px; border-radius:999px; font:600 9.5px/1.3 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--lbl-line); }
.lbl-chips { display:flex; flex-wrap:wrap; gap:5px; }
.lbl-chips span { padding:4px 8px; border-radius:999px; font:500 11px/1 var(--body); color:var(--ink); background:color-mix(in srgb, var(--lbl-ec) 14%, transparent); }
.lbl-tx cite { font:500 10px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lbl-wait { margin:0; font:500 12.5px/1.4 var(--body); color:var(--ink-2); } .lbl-wait b { color:var(--ink); }
.lbl-note { margin:0; font:500 10.5px/1.4 var(--body); color:var(--dim); text-wrap:pretty; }
@media (max-width:360px) { .lbl-gs { gap:2px; } .lbl-gv { font-size:15px; } .lbl-gn { font-size:10px; } .lbl-gst { font-size:9.5px; padding:3px 4px; } .lbl-gst.eq { padding:3px 0; font-size:9px; letter-spacing:-.02em; } }
/* END BREATH ANALYSIS */

/* ==== REALIGNMENT'S CAUTION, COMPACT (the user, 2026-09-26: "smaller and subtle … more visual than texty and concise
   and clear"): one row — the mark, the rule, Got it — over three pictured points; about a third of a phone's
   old card, and the page behind it only lightly dimmed while it waits ==== */
.lra-alert.lra-caut { --al-rgb:242, 138, 92; display:grid; gap:10px; padding:12px 12px 12px 12px; border-radius:18px;
  background:linear-gradient(135deg, rgba(var(--al-rgb), .12), rgba(var(--al-rgb), .03) 60%), var(--st-card, rgba(255,255,255,.045));
  box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .38), 0 10px 26px -18px rgba(0,0,0,.7); }
:root[data-theme="light"] .lra-alert.lra-caut { --al-rgb:182, 70, 30; }
.lra-caut-hd { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; }
.lra-caut-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(var(--al-rgb), .16); box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .45); }
.lra-caut-mark svg { width:16px; height:16px; fill:none; stroke:rgb(var(--al-rgb)); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lra-caut h3 { display:grid; gap:2px; margin:0; font:600 14px/1.2 var(--body); letter-spacing:0; color:var(--ink); }
.lra-caut-k { font:600 9.5px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:rgb(var(--al-rgb)); }
.lra-caut-ok { min-height:32px; padding:0 14px; border:0; border-radius:999px; cursor:pointer; font:600 12.5px/1 var(--body); color:var(--ink);
  background:var(--st-tile, rgba(255,255,255,.05)); box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .5); -webkit-tap-highlight-color:transparent; }
.lra-caut-ok:hover { background:rgba(var(--al-rgb), .14); }
.lra-caut-ok:focus-visible, .lra-caut-pts button:focus-visible { outline:2px solid rgb(var(--al-rgb)); outline-offset:2px; }
.lra-caut-pts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin:0; padding:0; list-style:none; }
.lra-caut-pts li, .lra-caut-pts button { display:grid; justify-items:center; align-content:start; gap:6px; min-width:0; text-align:center; }
.lra-caut-pts li { padding:9px 6px 8px; border-radius:12px; background:var(--st-tile, rgba(255,255,255,.035)); box-shadow:inset 0 0 0 1px var(--st-line-soft, rgba(255,255,255,.065)); }
.lra-caut-pts li.go { padding:0; background:none; box-shadow:none; }
.lra-caut-pts button { width:100%; height:100%; padding:9px 6px 8px; border:0; border-radius:12px; cursor:pointer; font:inherit; color:inherit;
  background:rgba(var(--al-rgb), .1); box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .4); -webkit-tap-highlight-color:transparent; }
.lra-caut-pts button:hover { background:rgba(var(--al-rgb), .18); }
.lra-caut-pts i { display:grid; place-items:center; width:26px; height:26px; }
.lra-caut-pts svg { width:19px; height:19px; fill:none; stroke:var(--ink-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lra-caut-pts li.harm svg, .lra-caut-pts button svg { stroke:rgb(var(--al-rgb)); }
.lra-caut-pts span { font:500 11px/1.3 var(--body); color:var(--ink-2); text-wrap:balance; }
.lra-caut-pts li.harm span, .lra-caut-pts button span { color:var(--ink); }
/* while it waits to be read, the page behind is only lightly dimmed (it was near-black) */
#lite-align.lra-hold > :not(#lal-ra-alert) { opacity:.5; filter:saturate(.7); }
/* after Got it: one quiet line */
.lra-caution { padding:8px 10px 8px 12px; border-radius:12px; }
.lra-caution svg { width:16px; height:16px; }
.lra-caution span { font:500 12.5px/1.3 var(--body); }
@media (max-width:360px) { .lra-caution span { font-size:12px; } }
/* a fold's cover screen: the whole bar is the button, so the Read pill gives its room to the line */
@media (max-width:300px) { .lra-caution em { display:none; } }

/* ==== THE CHECK NOW CARD'S SMOKE (the user, 2026-09-28: "subtle … just subtly visible inside the boundaries") ====
   The home card's smoke, lent while the drawer is open on Record (ui-lite-nowcard.js): behind the words, inside the
   card's edges, the glass and grain of the card kept. Screened in the dark, so only its light wisps show; faint by day. */
.lite-has-chart .litedrawer #lal-check > .lal-check { position:relative; isolation:isolate; }
.lal-smoke { position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit; pointer-events:none; }
.lal-smoke .lnow-smokecv { opacity:.7; mix-blend-mode:screen; }
/* by day the dark smoke would only grey the card: turned to its pastel negative and multiplied in, the same calm hues */
:root[data-theme="light"] .lal-smoke .lnow-smokecv { opacity:.5; filter:invert(1) hue-rotate(180deg) saturate(1.35); mix-blend-mode:multiply; }
/* the card and its three answers sit lighter on the page (the user, 2026-09-28: the drop shadow "too high" in both themes) */
.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"]) #lal-check > .lal-card {
  box-shadow:inset 0 1px 0 rgba(var(--acc-rgb), .3), inset 0 0 0 1px rgba(var(--acc-rgb), .15), 0 16px 34px -30px rgba(var(--acc-rgb), .24); }
#lal-check .lal-ans button { box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 8px 16px -14px rgba(0,0,0,.55); }
:root[data-theme="light"] #lal-check .lal-ans button { box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 6px 14px -12px rgba(70,52,20,.14); }
#lal-check .lal-ans button:hover { box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--tone) 55%, transparent), 0 10px 18px -14px rgba(0,0,0,.55); }
#lal-check .lal-ans button.on { box-shadow:inset 0 0 0 1.5px var(--tone), 0 0 0 4px color-mix(in srgb, var(--tone) 14%, transparent); }

/* ==== THE HOME'S BACKUP NUDGE (the user, 2026-09-28: "subtle and dont interfere with the aesthetics of the home page") ====
   One slim line above the home card, in the brass of the key card it leads to; Silence keeps it away until tomorrow. */
.lvt-nudge { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:10px; box-sizing:border-box;
  width:min(calc(100% - 32px), 560px); margin:14px auto 0; padding:6px 6px 6px 12px; border-radius:16px;
  background:color-mix(in srgb, var(--brass-hi) 5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 20%, transparent);
  animation:lvtNudgeIn .5s cubic-bezier(.22,.9,.24,1) .5s backwards; transition:opacity .25s, transform .25s; }
.lvt-nudge.out { opacity:0; transform:translateY(-4px); pointer-events:none; }
@keyframes lvtNudgeIn { from { opacity:0; transform:translateY(6px); } }
.lvt-n-ico { display:grid; place-items:center; width:18px; height:18px; color:var(--brass-hi); }
.lvt-n-ico svg, .lvt-n-mute svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lvt-n-tx { display:grid; gap:2px; min-width:0; }
.lvt-n-tx b { font:600 12.5px/1.2 var(--body); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lvt-n-tx em { font:400 11px/1.2 var(--body); font-style:normal; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lvt-nudge button { width:auto; min-height:0; margin:0; letter-spacing:normal; text-transform:none; -webkit-tap-highlight-color:transparent; }
.lvt-n-go { height:30px; padding:0 13px; border:0; border-radius:999px; cursor:pointer; font:600 12px/1 var(--body); white-space:nowrap; color:var(--brass-hi);
  background:color-mix(in srgb, var(--brass-hi) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 45%, transparent); }
.lvt-n-mute { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 9px; border:0; border-radius:999px; cursor:pointer; font:500 11.5px/1 var(--body); color:var(--dim); background:none; }
.lvt-n-mute:hover { color:var(--ink-2); }
.lvt-n-go:focus-visible, .lvt-n-mute:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
@media (max-width:370px) { .lvt-n-tx em, .lvt-n-mute span { display:none; } .lvt-n-mute { padding:0 7px; } }
@media (prefers-reduced-motion: reduce) { .lvt-nudge { animation:none; transition:none; } }

/* ==== BREATH TAP · WHICH MICROPHONE (the user, 2026-09-28: earphones or headphones as well as the phone's own) ==== */
.bts-src { display:grid; gap:10px; }
.bts-srcopt { display:grid; grid-template-columns:52px minmax(0, 1fr) 18px; align-items:center; gap:14px; width:100%; padding:14px 14px 14px 16px; border:0; border-radius:20px;
  cursor:pointer; text-align:left; font:inherit; color:var(--bt-ink); background:var(--bt-tile); box-shadow:inset 0 0 0 1px var(--bt-line2);
  -webkit-tap-highlight-color:transparent; transition:box-shadow .2s, transform .15s; }
.bts-srcopt:hover { box-shadow:inset 0 0 0 1px rgba(var(--bt-gold), .5); }
.bts-srcopt:active { transform:scale(.985); }
.bts-srcopt:focus-visible { outline:2px solid rgb(var(--bt-gold)); outline-offset:2px; }
.bts-srcopt .ic { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:rgba(var(--bt-gold), .1); box-shadow:inset 0 0 0 1px rgba(var(--bt-gold), .32); }
.bts-srcopt .ic svg { width:26px; height:26px; fill:none; stroke:rgb(var(--bt-gold)); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.bts-srcopt .tx { display:grid; gap:4px; min-width:0; }
.bts-srcopt b { font:600 15px/1.25 var(--body); color:var(--bt-ink); }
.bts-srcopt em { font:400 12.5px/1.35 var(--body); font-style:normal; color:var(--bt-dim); }
.bts-srcopt .on { justify-self:start; margin-top:3px; padding:3px 9px; border-radius:999px; font:600 10.5px/1.25 var(--body); font-style:normal;
  color:rgb(var(--bt-jade)); box-shadow:inset 0 0 0 1px rgba(var(--bt-jade), .45); overflow-wrap:anywhere; }
.bts-srcopt > svg { width:18px; height:18px; fill:none; stroke:var(--bt-dim); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bts-earhow { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.bts-earhow li { display:grid; justify-items:center; align-content:start; gap:5px; min-width:0; padding:12px 8px 11px; border-radius:16px; text-align:center;
  background:var(--bt-tile); box-shadow:inset 0 0 0 1px var(--bt-line2); }
.bts-earhow i { display:grid; place-items:center; width:34px; height:34px; }
.bts-earhow i svg { width:26px; height:26px; fill:none; stroke:rgb(var(--bt-gold)); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.bts-earhow b { font:600 12.5px/1.2 var(--body); color:var(--bt-ink); }
.bts-earhow span { font:400 11.5px/1.3 var(--body); color:var(--bt-dim); text-wrap:balance; }
.bts-ear .bud { fill:none; stroke:rgba(244,240,232,.42); stroke-width:1.7; stroke-linejoin:round; }
.bts-heard { display:inline-flex; align-items:center; justify-content:center; gap:6px; max-width:34ch; font:500 12px/1.35 var(--body); font-style:normal; color:var(--bt-dim); }
.bts-heard svg { flex:0 0 auto; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ==== DIAGNOSIS · HOW SURE, AT THE HEAD OF EVERY PAGE (the user, 2026-09-28: "just like caution for expert guidance in
   realignment tab") ====
   Realignment's caution in shape, in the colour of how firm the reading is: too early keeps the caution's ember, an
   early reading is brass, a firm one jade. Open on the Summary at each visit, the page behind lightly dimmed; then
   one line at the head of every Diagnosis page. */
.ldx-caut.t-soft, .ldx-caution.t-soft { --al-rgb:238, 201, 110; }
.ldx-caut.t-firm, .ldx-caution.t-firm { --al-rgb:98, 196, 152; }
:root[data-theme="light"] .ldx-caut.t-soft, :root[data-theme="light"] .ldx-caution.t-soft { --al-rgb:150, 110, 18; }
:root[data-theme="light"] .ldx-caut.t-firm, :root[data-theme="light"] .ldx-caution.t-firm { --al-rgb:28, 128, 88; }
#lal-dx-sure:not(:empty) { margin-bottom:2px; }
.ldx-sure-pts li { gap:4px; }
.ldx-sure-pts li.ok { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 40%, transparent); }
.ldx-sure-pts li.ok svg { stroke:var(--jade); }
.ldx-sure-pts li.miss svg { stroke:rgb(var(--al-rgb)); }
.ldx-sure-pts b { font:300 21px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.ldx-sure-pts b small { margin-left:1px; font:500 11px/1 var(--body); color:var(--dim); }
.ldx-sure-pts li.miss b { color:var(--ink-2); }
.ldx-sure-basis { margin:0; padding:0 2px; font:500 12.5px/1.45 var(--body); color:var(--ink); text-wrap:pretty; }
.ldx-sure-more { border-radius:12px; background:color-mix(in srgb, var(--ink) 3%, transparent); }
.ldx-sure-more > summary { list-style:none; cursor:pointer; padding:10px 12px; font:600 12px/1.2 var(--body); color:rgb(var(--al-rgb)); }
.ldx-sure-more > summary::-webkit-details-marker { display:none; }
.ldx-sure-more > summary::after { content:' +'; color:var(--dim); }
.ldx-sure-more[open] > summary::after { content:' \2212'; }
.ldx-sure-more > summary:focus-visible { outline:2px solid rgb(var(--al-rgb)); outline-offset:2px; border-radius:12px; }
.ldx-sure-more > :not(summary) { margin:0 10px 10px; }
.ldx-sure-more .ldx-missing li p { margin:0; grid-column:1 / -1; font:400 12px/1.45 var(--body); color:var(--ink-2); }
#lite-align.ldx-hold > :not(#lal-dx-sure) { opacity:.5; filter:saturate(.7); pointer-events:none; user-select:none; }
.ldx-caution span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ==== SWARATANTRA IN THE DRAWER — coming soon (the user, 2026-09-26) ====
   A fourth action in the dock, in cold light rather than the drawer's gold, with a small Soon mark; it opens only
   the coming-soon sheet (ui-lite-swaratantra.js; tools/lite-launch-guard.js holds every build to that). */
.litedock { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.litedock-ico { position:relative; }
.litedock-soon { position:absolute; top:-6px; right:-16px; padding:2px 5px 2px; border-radius:999px; font:700 7.5px/1.25 var(--body); font-style:normal;
  letter-spacing:.1em; text-transform:uppercase; color:#0C1A26; background:linear-gradient(180deg, #DCEBFF, #A9C8F2); box-shadow:0 3px 10px -3px rgba(159,194,242,.7); }
.litedock-b.soon .litedock-ico { color:#C7DDFF; box-shadow:inset 0 0 0 1px rgba(199,221,255,.38); background:radial-gradient(circle at 40% 30%, rgba(199,221,255,.14), transparent 70%); }
.litedock-b.soon .litedock-tx b { color:var(--dr-ink-2); }
.litedock-b.soon:hover { background:rgba(199,221,255,.06); }
/* on phones the dock says just "Guidance" (the user, 2026-09-26: "On mobile view, show just Guidance"); "Expert" is still
   read aloud, and from 760px, where each label has room beside its icon, it shows again */
@media (max-width:759.98px) {
  .litedock-long { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
}
@media (min-width:760px) {   /* the icon beside the label: the mark centred on its top edge, clear of the name */
  .litedock-soon { left:50%; right:auto; top:-8px; transform:translateX(-50%); }
}
:root[data-theme="light"].lite-app .litedock-b.soon .litedock-ico { color:#3D6BA6; box-shadow:inset 0 0 0 1px rgba(61,107,166,.34); background:radial-gradient(circle at 40% 30%, rgba(61,107,166,.1), transparent 70%); }
@media (max-width:370px) {
  .litedock-b { padding:12px 2px 11px; gap:6px; }
  .litedock-tx b { font-size:11.5px; }
  .litedock-soon { right:-12px; }
}

/* the sheet: golden-bronze glass (2026-10-20, was cold silver), SwaraTantra's trident, the name in Devanagari, the line, and breath-mist
   forming the five tattva shapes */
.lpk-swt .lswt { padding:2px 0 6px; }
.lswt-glass { position:relative; overflow:hidden; isolation:isolate; min-height:230px; display:grid; align-content:end; gap:8px; padding:24px 22px 22px; border-radius:22px;
  background:radial-gradient(70% 80% at 84% 22%, rgba(242,196,110,.24), transparent 64%), radial-gradient(60% 60% at 6% 100%, rgba(120,72,24,.32), transparent 70%),
    linear-gradient(140deg, rgba(92,60,24,.62), rgba(46,30,14,.78) 48%, rgba(78,50,20,.66));
  box-shadow:inset 0 0 0 1px rgba(232,190,112,.42), inset 0 1px 0 rgba(255,230,170,.32), inset 0 -18px 30px -24px rgba(0,0,0,.6), 0 20px 40px -26px rgba(0,0,0,.85); }
.lswt-glass::after { content:""; position:absolute; inset:-30% -60%; z-index:0; pointer-events:none;
  background:linear-gradient(104deg, transparent 42%, rgba(255,226,160,.09) 48.5%, rgba(255,226,160,.02) 51.5%, transparent 58%); animation:lswtsheen 9s ease-in-out infinite alternate; }
/* the trident: the ribbon's own art, upright on the right, a soft gold halo behind it */
.lswt-tri { position:absolute; z-index:1; right:7%; top:50%; height:76%; aspect-ratio:96 / 164; transform:translateY(-50%); pointer-events:none; }
.lswt-tri::before { content:""; position:absolute; inset:-14% -70% 20%; border-radius:50%; background:radial-gradient(closest-side, rgba(244,200,112,.32), rgba(244,200,112,.08) 60%, transparent); }
.lswt-tri img { position:relative; display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(244,200,112,.22)); }
@keyframes lswtsheen { from { transform:translateX(-22%); } to { transform:translateX(22%); } }
.lswt-deva { position:relative; z-index:2; font:400 16px/1.3 var(--deva); letter-spacing:0; color:rgba(240,204,138,.82); }
.lswt-line { position:relative; z-index:2; margin:0; max-width:64%; font:300 22px/1.25 var(--display); letter-spacing:-.012em; color:#FBEBCB; text-wrap:balance; }
/* a short screen (a phone on its side): the glass gives up height, so the line shows without scrolling the sheet */
@media (max-height:560px) { .lswt-glass { min-height:150px; padding:18px 20px; } .lswt-line { font-size:20px; } }
.lswt-mist { position:absolute; inset:0; z-index:1; pointer-events:none; }
.lswt-mist .m { position:absolute; opacity:0; filter:blur(9px); transform-origin:50% 60%; animation:lswtbreath 11s ease-in-out infinite; animation-delay:-1s; will-change:opacity, transform; }
.lswt-mist .m, .lswt-mist .m b { --mc:rgba(255,222,160,.42); }
.lswt-mist .ci { width:74px; aspect-ratio:1; right:34%; top:12%; border-radius:50%; background:radial-gradient(closest-side, var(--mc), rgba(255,222,160,.14) 72%, transparent); }
.lswt-mist .sq { width:70px; aspect-ratio:1; right:9%; top:10%; border-radius:16%; background:var(--mc); animation-delay:1.2s; }
.lswt-mist .cr { width:84px; aspect-ratio:1; right:20%; top:34%; animation-delay:3.4s; }
.lswt-mist .cr b { position:absolute; inset:0; border-radius:50%; background:var(--mc);      /* masked on the child: a mask on the blurred element would cut its edge sharp */
  -webkit-mask-image:radial-gradient(circle at 66% 38%, transparent 47%, #000 49%); mask-image:radial-gradient(circle at 66% 38%, transparent 47%, #000 49%); }
.lswt-mist .tr { width:78px; aspect-ratio:1.08; right:5%; top:40%; animation-delay:5.6s; }
.lswt-mist .tr b { position:absolute; inset:0; background:var(--mc); clip-path:polygon(50% 4%, 97% 92%, 3% 92%); }
.lswt-mist .sp { width:86px; aspect-ratio:1.3; right:46%; top:26%; animation-delay:7.8s; }
.lswt-mist .sp b { position:absolute; width:18%; aspect-ratio:1; border-radius:50%; background:var(--mc); }
.lswt-mist .sp b:nth-child(1) { left:6%; top:12%; } .lswt-mist .sp b:nth-child(2) { left:40%; top:4%; width:14%; } .lswt-mist .sp b:nth-child(3) { left:72%; top:20%; }
.lswt-mist .sp b:nth-child(4) { left:20%; top:58%; width:15%; } .lswt-mist .sp b:nth-child(5) { left:58%; top:54%; }
@keyframes lswtbreath { 0% { opacity:0; transform:scale(.84) translateY(4px); } 12% { opacity:.62; transform:scale(.97); } 22% { opacity:.5; transform:scale(1); }
  34% { opacity:0; transform:scale(1.07) translateY(-8px); } 100% { opacity:0; transform:scale(1.07) translateY(-8px); } }
:root[data-theme="light"].lite-app .lswt-glass { background:radial-gradient(70% 80% at 84% 22%, rgba(214,160,64,.26), transparent 64%), linear-gradient(140deg, #F8EBD2, #EFDDBA 50%, #F6E7C9);
  box-shadow:inset 0 0 0 1px rgba(150,104,36,.32), inset 0 1px 0 rgba(255,255,255,.75), 0 16px 34px -26px rgba(90,60,20,.45); }
:root[data-theme="light"].lite-app .lswt-deva { color:rgba(120,80,24,.78); }
:root[data-theme="light"].lite-app .lswt-line { color:#3A2610; }
:root[data-theme="light"].lite-app .lswt-mist .m, :root[data-theme="light"].lite-app .lswt-mist .m b { --mc:rgba(170,120,40,.28); }
:root[data-theme="light"].lite-app .lswt-tri::before { background:radial-gradient(closest-side, rgba(214,160,64,.3), rgba(214,160,64,.08) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .lswt-mist .m, .lswt-glass::after { animation:none; } .lswt-mist .sq { opacity:.4; } .lswt-mist .cr { opacity:.3; } }
/* ==== SWARATANTRA, LIVE (2026-10-16; ui-lite-swaratantra.js) ====
   The gate in the sheet; the layer over the whole app, its own styles arriving with its files (kaalchakra-lite-app/17-swaratantra.css):
   here only what shows before they arrive, and the reveal. */
.lswt-gate { display:grid; gap:12px; } .lswt-gate .lswt-glass { min-height:128px; padding:20px 20px 18px; }   /* the gate is read whole: its art short */
@media (max-height:700px) { .lswt-gate .lswt-glass { min-height:96px; } .lswt-gate .lswt-line { font-size:19px; } }
.lswt-gsay { margin:2px 2px 0; font:400 14px/1.5 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lswt-needs li b { font-weight:600; }
.lswt-grow { margin-top:2px; }
.lswt-gnote, .lswt-gfine { margin:0 2px; font:500 11.5px/1.45 var(--body); color:var(--dim); }
.lswt-layer { position:fixed; inset:0; z-index:9750; pointer-events:none; }
.lswt-layer[hidden] { display:none; }
.lswt-layer > .hm-st { position:absolute; inset:0; overflow:auto; background:#05060c; clip-path:circle(0 at var(--rx, 50%) var(--ry, 50%));
  transform:scale(1.04); transform-origin:var(--rx, 50%) var(--ry, 50%);
  transition:clip-path .42s cubic-bezier(.5,0,.75,0), transform .42s cubic-bezier(.5,0,.75,0); }
.lswt-layer.open { pointer-events:auto; }
/* IN AND BACK, AT ONCE (the user, 2026-10-18: "everything should appear and reappear lightning fast with high class transition and premium
   look"): the sky opens from the finger in a little over half a second, settling from a breath larger as it comes; back, it falls to the
   finger faster still. The open screen carries no transform (none, not a scale), so nothing fixed inside it is held by it */
.lswt-layer.open > .hm-st { clip-path:circle(150% at var(--rx, 50%) var(--ry, 50%)); transform:none; pointer-events:auto;
  transition:clip-path .58s cubic-bezier(.2,.75,.2,1), transform .58s cubic-bezier(.2,.75,.2,1); }
:root[data-theme="light"] .lswt-layer > .hm-st { background:#F3EDDF; }
.lswt-wait { position:fixed; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; }   /* the screen's middle, whatever box holds it (SwaraTantra's .ap is relative, and empty while it waits) */
.lswt-wait .lswt-deva { font:400 24px/1 var(--deva); color:rgba(236,204,140,.85); letter-spacing:.02em; }   /* SwaraTantra's gold, as its own wait goes on (st-home.css .ap-wait) */
:root[data-theme="light"] .lswt-wait .lswt-deva { color:rgba(112,80,26,.78); }
/* THE TRIDENT ALONE (lswtOrbit; SwaraTantra's own wait, st-proto.js apWait, draws the same; the user, 2026-10-18: "remove the planets …
   Keep only trident with highly professional and aesthetic effects with progress bar"): a halo of gold breathing behind it, a faint ring
   with one thin arc of light running round it, and a gleam that passes over the metal now and then, masked to the trident's own shape so
   only the metal catches the light. Drawn only while something is waited for */
.lsw-orbit { position:relative; width:204px; height:204px; display:grid; place-items:center; }
.lsw-orbit::before { content:""; position:absolute; inset:8px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(236,204,140,.12); }
.lsw-halo { position:absolute; inset:22px; border-radius:50%; background:radial-gradient(closest-side, rgba(242,196,110,.22), rgba(242,196,110,.06) 60%, transparent);
  animation:lswHalo 3.2s ease-in-out infinite; }      /* the Swara Sutra header's own halo (st-home.css .lnow-shiva.st-tri::before), breathing */
.lsw-arc { position:absolute; inset:8px; border-radius:50%; will-change:transform;
  background:conic-gradient(from 0deg, rgba(226,188,104,0) 0deg, rgba(226,188,104,0) 210deg, rgba(226,188,104,.45) 300deg, rgba(242,214,150,.9) 354deg, rgba(226,188,104,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  filter:drop-shadow(0 0 3px rgba(226,188,104,.45)); animation:lswSpin 2.6s linear infinite; }
.lsw-tw { position:relative; display:block; height:124px; aspect-ratio:179 / 305; }
.lsw-tri { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.65));
  -webkit-user-drag:none; user-select:none; }      /* its bronze as the header draws it: no glow added */
.lsw-sheen { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  -webkit-mask-size:cover; mask-size:cover; -webkit-mask-position:50% 0; mask-position:50% 0; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  background:linear-gradient(105deg, transparent 40%, rgba(255,247,222,.42) 50%, transparent 60%) 0 0 / 260% 100% no-repeat; animation:lswSheen 3.4s ease-in-out infinite; }   /* as the header's passing light (.tri-shine), soft */
:root[data-theme="light"] .lsw-orbit::before { box-shadow:inset 0 0 0 1px rgba(112,80,26,.16); }
:root[data-theme="light"] .lsw-halo { background:radial-gradient(closest-side, rgba(200,150,50,.26), rgba(200,150,50,.07) 58%, transparent); }
:root[data-theme="light"] .lsw-arc { background:conic-gradient(from 0deg, rgba(150,108,36,0) 0deg, rgba(150,108,36,0) 210deg, rgba(150,108,36,.5) 300deg, rgba(122,84,24,1) 354deg, rgba(150,108,36,0) 360deg);
  filter:none; }
@keyframes lswSpin { to { transform:rotate(360deg); } }
@keyframes lswHalo { 0%, 100% { opacity:.62; transform:scale(.93); } 50% { opacity:1; transform:scale(1.05); } }
@keyframes lswSheen { 0% { background-position:120% 0; } 55%, 100% { background-position:-20% 0; } }
/* the hairline under it: the reading's share when it is known, a glint running along it while it is not */
.lsw-bar { position:relative; width:96px; height:2px; margin-top:6px; border-radius:1px; background:rgba(236,204,140,.14); overflow:hidden; }
.lsw-bar i { position:absolute; top:0; bottom:0; left:0; width:6%; border-radius:1px; background:linear-gradient(90deg, rgba(236,204,140,.3), rgba(243,207,132,.95)); transition:width .3s ease; }
.lsw-bar.run i { width:40%; background:linear-gradient(90deg, transparent, rgba(243,207,132,.95), transparent); animation:lswRun 1.3s ease-in-out infinite; }
@keyframes lswRun { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
:root[data-theme="light"] .lsw-bar { background:rgba(112,80,26,.12); }
:root[data-theme="light"] .lsw-bar i { background:linear-gradient(90deg, rgba(150,108,36,.3), rgba(150,108,36,.9)); }
:root[data-theme="light"] .lsw-bar.run i { background:linear-gradient(90deg, transparent, rgba(150,108,36,.85), transparent); }
@media (prefers-reduced-motion: reduce) { .lsw-arc, .lsw-halo, .lsw-sheen, .lsw-bar.run i { animation:none; } .lsw-sheen { display:none; } }
html.lswt-open body { overflow:hidden; }
html.lswt-open .lpk-wrap { z-index:9790; }
/* Kriya started's first check (ui-lite-swaratantra.js lkxCheckNow): the breath card's own sheets over the layer — the side and the reach, the
   practices, Undo or Confirm — under the token's moment and its toast */
html.lkx-over .lmm-ask, html.lkx-over .lmm, html.lkx-over .obsm-wrap { z-index:9770; }
html.lswt-open.lite-has-chart .litedrawer[data-state="open"] { z-index:9760; }   /* Rog Nivaaran's pages, opened from SwaraTantra's page, over its layer (2026-10-17) */   /* a sheet SwaraTantra opens (its calendar, a picker) shows over it */
.lswt-callist li { justify-content:flex-start; }
@media (prefers-reduced-motion: reduce) { .lswt-layer > .hm-st, .lswt-layer.open > .hm-st { transition:none; transform:none; } }
/* SwaraTantra over the whole screen (2026-10-18, for speed): the app beneath holds still — its animations paused, Rog Nivaaran's pages
   (opened over the layer from inside .wrap) keeping theirs */
html.lswt-shown .wrap *:not(.litedrawer, .litedrawer *) { animation-play-state:paused !important; }
/* SPEED (2026-10-20, "the entire webapp is lagging"): with SwaraTantra over the whole screen, the app beneath (div.wrap, some 9,000 elements)
   is neither styled nor laid out — every redraw in SwaraTantra had restyled it too. The drawer lives in it: while the drawer is open the app
   is drawn as before. Its clocks still run; it is drawn again the moment SwaraTantra closes. */
html.lswt-shown:not(.litedrawer-open) body > .wrap { content-visibility:hidden; }

/* ==== THE KEYBOARD (the user, 2026-09-27: it "hides the most part of the form and can't be scrolled to reveal them") ====
   ui-lite-keyboard.js gives the keyboard's height as --kb, with .lite-kb on the root, while a field is typed in.
   Every sheet that holds a field ends above the keys instead of running on under them, the page gets that much room
   below its end, and a field brought into view stops short of the keys. With no keyboard, none of this applies. */
.lite-kb { scroll-padding-bottom:calc(var(--kb, 0px) + 12px); }
.lite-app.lite-kb body { padding-bottom:calc(var(--kb, 0px) + 16px); }
.lite-kb.lite-has-chart #drawer-person:not([hidden]),
.lite-kb.lite-has-chart .litedrawer[data-state="open"],
.lite-kb .tmtwrap, .lite-kb .lpk-wrap, .lite-kb .btwrap { bottom:var(--kb, 0px); }
/* Mahakaal's chat (the user, 2026-10-10: the input "completely masked" by the keys; "shift up with the keyboard … just like whatsapp"): the
   sheet ends above the keys and gives up height from its thread, so the box stays in sight and the latest words above it */
.lite-kb .lmk-wrap { top:var(--kbtop, 0px); bottom:var(--kb, 0px); }
/* every lifted sheet pinned to the part of the page that is seen: when Safari slides the page down under the keys, the top moves
   with the bottom and the sheet keeps its size, so nothing under the person's finger falls (ui-lite-keyboard.js, "held still") */
.lite-kb.lite-has-chart #drawer-person:not([hidden]) { top:calc(var(--lite-sheet-top, var(--lite-head, 72px)) + var(--kbtop, 0px)); }
.lite-kb.lite-has-chart .litedrawer[data-state="open"] { top:calc(var(--lite-head, 72px) + var(--kbtop, 0px)); }
.lite-kb .tmtwrap, .lite-kb .lpk-wrap, .lite-kb .btwrap { top:var(--kbtop, 0px); }
.lite-kb .lmk-sheet { max-height:calc(100% - max(8px, env(safe-area-inset-top))); }
.lite-kb .lmk-sheet.mkc-on { height:calc(100% - max(8px, env(safe-area-inset-top))); max-height:none; }
.lite-kb .mkc-foot { padding-bottom:10px; }
.lite-kb.lite-has-chart #drawer-person:not([hidden]) { padding-bottom:0; }    /* the home bar is under the keys now */
.lite-kb .lpk-wrap .lpk-sheet { max-height:min(86vh, 640px, 100%); }
.lite-kb .lpk-wrap .lpk-sheet.lpk-guide { max-height:min(92vh, 900px, 100%); }
.lite-kb.lite-app #drawer-settings { max-height:calc(100dvh - var(--lite-head, 72px) - 24px - var(--kb, 0px) - var(--kbtop, 0px)); }
.lite-kb [role="combobox"] { scroll-margin-top:44px; }      /* a place brought up to the top keeps its label in sight */
/* the keys only assumed (full screen, and nothing tells the page of them; 2026-09-28): nothing is lifted, since a
   guess cannot know when the keys go down. The sheet that holds the field gets that much room past its end, and a
   field brought into view stops short of where the keys would be. */
.lite-kbpad { scroll-padding-bottom:calc(var(--kbpad, 0px) + 12px); }
.lite-app.lite-kbpad body { padding-bottom:calc(var(--kbpad, 0px) + 16px); }
.lite-kbpad :is(#drawer-person, #drawer-settings, .tmtsheet, .tstwrap .tst, .lpk-sheet, .bts-body, .litedrawer-body) { scroll-padding-bottom:var(--kbpad, 0px); }
.lite-kbpad :is(#drawer-person, #drawer-settings, .tmtsheet, .tstwrap .tst, .lpk-sheet, .bts-body, .litedrawer-body)::after {
  content:""; display:block; flex:0 0 auto; grid-column:1 / -1; height:var(--kbpad, 0px); pointer-events:none; }
.lite-kbpad [role="combobox"] { scroll-margin-top:44px; }

/* ==== A NEW VERSION IS READY (ui-lite-update.js; the user, 2026-09-27) ====
   Shown only when reloading at once would have lost what the reader was doing: a tap brings the new build. Dark
   glass in both themes, like the app's other notices, on one line, with a gold point that pulses twice. */
.lup-pill { position:fixed; z-index:9800; left:50%; top:calc(10px + env(safe-area-inset-top)); display:inline-flex; align-items:center; gap:10px;
  max-width:calc(100vw - 24px); box-sizing:border-box; margin:0; padding:7px 7px 7px 14px; border:0; border-radius:999px; cursor:pointer;
  font:500 13px/1.2 var(--body); color:#F4ECD8; white-space:nowrap; -webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg, rgba(36,31,22,.94), rgba(15,13,10,.95)); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(240,213,126,.30), inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px -18px rgba(0,0,0,.9);
  transform:translate(-50%, -14px); opacity:0; transition:transform .4s cubic-bezier(.22,.9,.24,1), opacity .4s; }
.lup-pill.in { transform:translate(-50%, 0); opacity:1; }
.lup-pill i { flex:none; width:7px; height:7px; border-radius:50%; background:#F6DE93; box-shadow:0 0 0 0 rgba(246,222,147,.6); animation:luppt 2.4s ease-out .5s 2; }
.lup-pill span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.lup-pill b { flex:none; padding:7px 13px; border-radius:999px; font:600 12px/1 var(--body); letter-spacing:.02em; color:#1A1408;
  background:linear-gradient(180deg, #F6DE93, #D6AE45); box-shadow:inset 0 1px 0 rgba(255,255,255,.45); }
.lup-pill:active b { filter:brightness(.94); }
.lup-pill:focus-visible { outline:2px solid #F6DE93; outline-offset:3px; }
@keyframes luppt { 70% { box-shadow:0 0 0 8px rgba(246,222,147,0); } 100% { box-shadow:0 0 0 0 rgba(246,222,147,0); } }
@media (prefers-reduced-motion: reduce) { .lup-pill { transition:opacity .2s; } .lup-pill i { animation:none; } }

/* ==== BREATH TAP'S WAY IN (the user, 2026-09-27: "a prominent disc button for breath tap in between the record card
   and the feature buttons card on the slider/drawer", and prominently in Record, with Experimental still marked) ====
   One button: a disc in the two nostrils' colours, Ida's violet running into Pingala's coral, that breathes; its name
   with the Experimental mark, what it does, and a chevron. Full width, in the drawer and in Record. */
.lbt-row:empty { display:none; }
.lbt-disc { position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:13px; width:100%; margin:0;
  padding:9px 14px 9px 9px; border:0; border-radius:22px; cursor:pointer; text-align:left; font:inherit; color:var(--dr-ink, var(--ink));
  background:linear-gradient(100deg, rgba(160,144,232,.15), rgba(255,255,255,.035) 45%, rgba(238,128,100,.12));
  box-shadow:inset 0 0 0 1px rgba(200,180,240,.26), 0 16px 34px -24px rgba(0,0,0,.9);
  -webkit-tap-highlight-color:transparent; transition:transform .15s ease, filter .2s ease; }
.lbt-disc:hover { filter:brightness(1.07); }
.lbt-disc:active { transform:scale(.985); }
.lbt-disc:focus-visible { outline:2px solid #F6DE93; outline-offset:2px; }
.lbt-orb { position:relative; display:grid; place-items:center; width:50px; height:50px; border-radius:50%;
  background:radial-gradient(circle at 34% 26%, rgba(255,255,255,.55), rgba(255,255,255,0) 34%), linear-gradient(115deg, #9C8BE4 0%, #B38BC4 48%, #EC8363 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 10px 24px -10px rgba(156,139,228,.9), 0 6px 18px -10px rgba(236,131,99,.8); }
.lbt-orb svg { position:relative; z-index:1; width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 1px 2px rgba(40,20,60,.5)); }
.lbt-orb i { position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 1.5px rgba(196,176,240,.6); animation:lbtRing 3.4s ease-out infinite; }
.lbt-orb i + i { animation-delay:1.7s; box-shadow:0 0 0 1.5px rgba(240,150,120,.5); }
@keyframes lbtRing { from { transform:scale(1); opacity:.85; } to { transform:scale(1.6); opacity:0; } }
.lbt-tx { display:grid; gap:4px; min-width:0; }
.lbt-k { display:flex; flex-wrap:wrap; align-items:center; gap:6px 9px; }
.lbt-k b { font:500 16px/1.2 var(--display); letter-spacing:-.005em; color:var(--dr-ink, var(--ink)); }
.lbt-s { font:400 12px/1.3 var(--body); color:var(--dr-ink-2, var(--ink-2)); }
.lbt-go { width:18px; height:18px; fill:none; stroke:var(--dr-ink-2, var(--dim)); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lbt-disc .bt-exp-tag { padding:3px 8px; border-radius:999px; font:700 8.5px/1 var(--body); font-style:normal; letter-spacing:.12em; text-transform:uppercase;
  color:rgb(128, 188, 224); background:rgba(128, 188, 224, .12); box-shadow:inset 0 0 0 1px rgba(128, 188, 224, .42); }
.lbt-disc.in-record { margin-top:10px; }
:root[data-theme="light"] .lbt-disc { background:linear-gradient(100deg, rgba(156,139,228,.14), rgba(255,255,255,.7) 45%, rgba(236,131,99,.12));
  box-shadow:inset 0 0 0 1px rgba(122,107,168,.28), 0 14px 28px -22px rgba(60,40,80,.5); }
:root[data-theme="light"] .lbt-disc .bt-exp-tag { color:rgb(36, 108, 156); background:rgba(36, 108, 156, .08); box-shadow:inset 0 0 0 1px rgba(36, 108, 156, .35); }
@media (prefers-reduced-motion: reduce) { .lbt-orb i { animation:none; opacity:0; } .lbt-disc { transition:none; } }

/* no scroll bar on Breath Tap (the user, 2026-09-27: "dont show vertical page scroll bar on the breath tap page"): its
   body still scrolls by touch, wheel and keys, and the page behind is held still (html.bt-open) */
.btwrap .bts-body, .btwrap .btsheet { scrollbar-width:none; -ms-overflow-style:none; }
.btwrap .bts-body::-webkit-scrollbar, .btwrap .btsheet::-webkit-scrollbar { display:none; width:0; height:0; }

/* ==== NO VERTICAL SCROLL BARS (the user, 2026-09-27: "Hide all the page vertical scroll bar across the entire webapp
   including help cards, info cards etc.", and "hide the vertical scroll bar but not remove the scrolling effect") ====
   Every vertical bar in Lite is hidden: the page, the drawer, every sheet, card, list and pop-up. Everything still
   scrolls by touch, wheel, trackpad and keys. Blink and WebKit draw bars through ::-webkit-scrollbar, and its
   :vertical state is the vertical bar alone, so a sideways row keeps its own thin bar; Firefox cannot tell the two
   apart, so there every bar is hidden. */
html.lite-app::-webkit-scrollbar:vertical, html.lite-app *::-webkit-scrollbar:vertical { width:0 !important; background:transparent !important; }
@supports not selector(::-webkit-scrollbar) { html.lite-app, html.lite-app * { scrollbar-width:none !important; } }

/* ==== WHAT TO BREATHE THROUGH NOW, THE HOME'S FIRST CARD (the user, 2026-09-27: first under the name; "the animated
   shiva outline adjacent … left side that shows which nostril should run now"; "make this card design more premium as it
   is the main first card"; Shiva "slightly more close to the Breathe through text"; "the smoke bg … changing colours as in
   the breath tap bg design"; the breath's smoke continuous, "just like the website", coming "out of the card"; the element
   drawn by the breath; "check your breath c2a in more premium and minimalistic style") ====
   Layers, bottom to top: the smoke (ui-lite-nowcard.js, clipped to the card), the glass (a tint lit from the left by the
   nostril's colour, a sheen, the grain), then Shiva with his breath and the words. The breath's canvas is not clipped: it
   leaves the card at its lower edge. */
.lite-has-chart .litesum .lcalm.lcalm-box.lnow { position:relative; isolation:isolate; overflow:visible; display:grid; grid-template-columns:auto minmax(0, 1fr);
  align-items:center; gap:4px 8px; margin:0; padding:10px 16px 10px 6px; border:0; border-radius:26px; text-align:left;
  background:linear-gradient(180deg, #15131E, #0D0C13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px color-mix(in srgb, var(--nc) 38%, transparent),
    0 10px 22px -18px color-mix(in srgb, var(--nc) 40%, #000); }   /* a close, soft lift (the user, 2026-09-27: the big glow under it was too much) */
.lnow-smoke { position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.lnow-smokecv { display:block; width:100%; height:100%; opacity:.9; }
.lite-has-chart .litesum .lnow::after { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(55% 120% at 0% 50%, color-mix(in srgb, var(--nc) 26%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.015) 45%, rgba(0,0,0,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.lnow-shiva, .lnow-tx { position:relative; z-index:2; }
.lnow-shiva { display:block; width:clamp(84px, 24vw, 100px); aspect-ratio:196 / 380; }
.lnow-shiva::before { content:""; position:absolute; inset:14% -12% 42%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--nc) 34%, transparent), transparent 72%);
  animation:lnowAura 5.4s ease-in-out infinite; }
.lnow-shiva svg { display:block; width:100%; height:100%; overflow:visible; }
/* the breath: from above the nostrils to below the card (LNC_BOX: x −38…278, y 120…420 of the drawing's 22…218, −84…296) */
.lnow-breath { position:absolute; left:-30.61%; width:161.22%; top:53.68%; height:78.95%; pointer-events:none; }
.lnow-mistcv { display:block; width:100%; height:100%; }
.lnow .sh-face path { fill:none; stroke:url(#lnowInk); stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.lnow .sh-face .moon { fill:rgba(235,211,162,.2); }
.lnow .sh-face .eye { fill:rgba(255,227,174,.16); }
.lnow .sh-face .glow { fill:url(#lnowEye); }
/* the tripund as Mahakaal's card wears it (the user, 2026-10-08): cream lines of ash a touch heavier than the outline, the red bindu
   breathing; in the Day theme the ash is darker, so the lines still read on the light ground */
.lnow .sh-face .tri path { stroke:#EDE6D6; stroke-width:1.6; }
.lnow .sh-face .tri .bindu { fill:#D9452B; stroke:none; }
.lnow .sh-face .tri .bindu-glow { fill:rgba(217,69,43,.45); stroke:none; animation:lmkBindu 4.6s ease-in-out infinite; }
:root[data-theme="light"] .lnow .sh-face .tri path { stroke:#A0968A; }
@media (prefers-reduced-motion: reduce) { .lnow .sh-face .tri .bindu-glow { animation:none; } }
.lnow .sh-face { animation:lnowFace 5.4s ease-in-out infinite; }
.lnow .sh-nose path { fill:url(#lnowInk); }
.lnow .sh-nose .f { opacity:.5; } .lnow .sh-nose .f2 { opacity:.3; } .lnow .sh-nose .t { opacity:.6; }
.lnow .sh-n { fill:#08070F; stroke:rgba(255,244,218,.45); stroke-width:1; vector-effect:non-scaling-stroke; transition:stroke .4s; }
.lnow[data-nadi="ida"] .sh-n.l, .lnow[data-nadi="pingala"] .sh-n.r, .lnow[data-nadi="sushumna"] .sh-n { stroke:var(--nc); filter:drop-shadow(0 0 3px var(--nc)); }
@keyframes lnowFace { 0%, 100% { opacity:.55; } 22% { opacity:1; } 44% { opacity:.6; } }   /* lit on the out-breath: the mist's own 5.4 s breath, out for 2.4 s */
@keyframes lnowAura { 0%, 100% { opacity:.5; transform:scale(.94); } 22% { opacity:1; transform:scale(1.04); } 44% { opacity:.55; transform:scale(.95); } }
.lnow-tx { display:grid; gap:5px; min-width:0; }
.lite-has-chart .litesum .lnow .lcalm-k { font:600 10px/1.2 var(--body); letter-spacing:.22em; text-transform:uppercase; color:color-mix(in srgb, var(--nc) 70%, var(--ink)); }
.lite-has-chart .litesum .lnow .lcalm-nadi { font:400 clamp(25px, 7vw, 31px)/1.04 var(--display); letter-spacing:-.018em; color:var(--ink);
  background:linear-gradient(90deg, color-mix(in srgb, var(--nc) 80%, #fff), color-mix(in srgb, var(--nc) 35%, var(--ink)) 85%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lnow-until { display:inline-flex; align-items:center; gap:6px; margin-top:2px; font:500 13px/1.2 var(--body); color:var(--ink-2); }
.lnow-until svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.lnow-until b { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.lnow-el { display:inline-flex; align-items:center; gap:7px; font:400 12px/1.3 var(--body); color:var(--dim); }
.lnow-el .lel-s { flex:none; width:8px; height:8px; border-radius:50%; }
/* Check your breath: a small glass pill, lit at its edge by the nostril's colour; the arrow leans on when pointed at */
.lnow-cta { justify-self:start; display:inline-flex; align-items:center; gap:8px; margin:8px 0 2px; padding:9px 12px 9px 15px; border:0; border-radius:999px; cursor:pointer;
  font:600 12.5px/1 var(--body); letter-spacing:.01em; color:var(--ink); -webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px color-mix(in srgb, var(--nc) 50%, rgba(255,255,255,.14)), 0 8px 18px -12px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3); transition:filter .2s, transform .15s; }
.lnow-cta svg { width:15px; height:15px; fill:none; stroke:color-mix(in srgb, var(--nc) 75%, #fff); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s cubic-bezier(.22,.9,.24,1); }
.lnow-cta:hover { filter:brightness(1.1); }
.lnow-cta:hover svg { transform:translateX(3px); }
.lnow-cta:active { transform:scale(.97); }
.lnow-cta:focus-visible { outline:2px solid color-mix(in srgb, var(--nc) 70%, #fff); outline-offset:2px; }
:root[data-theme="light"].lite-has-chart .litesum .lcalm.lcalm-box.lnow { background:linear-gradient(180deg, #FFFFFF, #FBF8F2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nc) 34%, transparent), 0 1px 2px rgba(70,52,20,.05), 0 10px 22px -18px color-mix(in srgb, var(--nc) 40%, rgba(70,52,20,.4)); }
:root[data-theme="light"] .lnow .lnow-smokecv { opacity:.2; }
:root[data-theme="light"].lite-has-chart .litesum .lnow::after { background:radial-gradient(55% 120% at 0% 50%, color-mix(in srgb, var(--nc) 18%, transparent), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.2)); }
:root[data-theme="light"] .lnow .sh-face path, :root[data-theme="light"] .lnow .sh-n { stroke:#9C7B35; }
:root[data-theme="light"] .lnow .sh-nose path { fill:#9C7B35; }
:root[data-theme="light"] .lnow .sh-face .glow { opacity:.5; }
:root[data-theme="light"] .lnow-cta { color:#2C2410; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.7));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nc) 45%, rgba(0,0,0,.08)), 0 8px 18px -14px rgba(70,52,20,.4); }
@media (prefers-reduced-motion: reduce) { .lnow .sh-face, .lnow-shiva::before { animation:none; } .lnow-cta, .lnow-cta svg { transition:none; } }

/* the home summary's two slots take no box of their own: the cards inside them are the grid's items (ldSummary) */
.lsum-part { display:contents; }

/* ===== ONE DAY AXIS (ui-lite-dayaxis.js, 2026-09-27) =====================================================
   The words under every sunrise-to-sunrise band, each at its own time: a grid whose tracks share the width in
   proportion to the day. The outer box is a size container, so no label can widen the card (the Oslo stretch).
   It takes the place of the flex rows of .lband-axis, .vscale, .lsw-scale and .lpr-lifeaxis wherever those are
   written by ldayAxis(); their fonts and margins stay. Sunset steps aside only where three times cannot fit —
   the widths below are each font's three widest times with the gaps between them. */
.ldax, .lband-axis.ldax, .vscale.ldax, .lsw-scale.ldax, .lpr-lifeaxis.ldax { display:block; container:ldax / inline-size; min-width:0; }
.ldax-g { display:grid; align-items:baseline; }
.ldax-g > span { grid-row:1; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* the least room between two times, 8px, lives in the labels: 4px on each side that faces another */
.ldax-g > .ldax-s { justify-self:start; padding-right:4px; }
.ldax-g > .ldax-c { justify-self:center; padding:0 4px; }
.ldax-g > .ldax-e { justify-self:end; padding-left:4px; }
@container ldax (max-width: 190px) { .lband-axis .ldax-c, .lsw-scale .ldax-c { display:none; } }
@container ldax (max-width: 215px) { .vscale .ldax-c { display:none; } }
@container ldax (max-width: 245px) { .lpr-lifeaxis .ldax-c { display:none; } }
/* the Swara tab's smaller pair shows no scale, as before */
.lsw-pair .lsw-scale.ldax { display:none; }
/* the day with no sunrise (ldNoDayCard): a line where the band would be, and the way to set another place */
.lpattern-say { margin:2px 0 0; font:400 14px/1.5 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lpattern-none .lpattern-go { justify-self:start; margin:0 0 -6px -10px; font:600 13px/1 var(--body); color:rgb(var(--acc-rgb)); }
/* the home card's grid: one column that can never be wider than the card, whatever sits in it */
.lpattern { grid-template-columns:minmax(0, 1fr); }

/* ---- Add to calendar, rebuilt (ui-timetable.js ttCalOpen; 2026-09-28): prepared a day at a time, four ways in ---- */
.tcal-addhd { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px; }
.tcal-prog { display:inline-flex; align-items:center; gap:7px; font:500 12px/1.2 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.tcal-prog i { width:12px; height:12px; border-radius:50%; border:1.6px solid rgba(var(--acc-rgb), .3); border-top-color:rgb(var(--acc-rgb)); animation:tcalSpin .8s linear infinite; }
@keyframes tcalSpin { to { transform:rotate(360deg); } }
.tcal-dests { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
@media (max-width:360px) { .tcal-dests { grid-template-columns:minmax(0, 1fr); } }
.tcal-dest { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:10px; width:100%; padding:11px 12px; border:0; border-radius:16px; cursor:pointer; text-align:left;
  color:var(--ink); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line); -webkit-tap-highlight-color:transparent; transition:box-shadow .2s, background .2s; }
.tcal-dest:not(:disabled):hover { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .5); }
.tcal-dest:disabled { opacity:.45; cursor:progress; }
.tcal-dest:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.tcal-dic { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:rgb(var(--acc-rgb)); background:rgba(var(--acc-rgb), .1); }
.tcal-dic svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tcal-dest .tcal-tx b { font-size:13.5px; }
.tcal-back { justify-self:start; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px 0 8px; border:0; border-radius:999px; cursor:pointer;
  font:600 12.5px/1 var(--body); color:var(--ink-2); background:var(--st-tile); }
.tcal-back svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tcal-acct { margin-top:-2px; }
.tcal-list { display:grid; margin:0; padding:0; list-style:none; border-radius:16px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--st-line); }
.tcal-list li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-top:1px solid var(--st-line); }
.tcal-list li:first-child { border-top:0; }
.tcal-lt { display:grid; gap:2px; min-width:0; }
.tcal-lt b { font:600 12.5px/1.2 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.tcal-lt em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tcal-la { flex:none; display:inline-flex; align-items:center; height:32px; padding:0 14px; border-radius:999px; text-decoration:none; font:600 12.5px/1 var(--body); color:#1B1406;
  background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.tcal-la:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.tcal-more { justify-self:center; }
.tcal-bulk { display:grid; gap:8px; padding:12px; border-radius:16px; background:var(--st-tile); }
.tcal-bulk p { margin:0; font:400 12px/1.5 var(--body); color:var(--ink-2); }
.tcal-bulk b { color:var(--ink); font-weight:600; }
.tcal-bulk .tcal-alt { justify-self:start; }
@media (prefers-reduced-motion: reduce) { .tcal-prog i { animation:none; } }

/* ==== THE TIME TABLE'S BREATH CARD IN THE CHECK NOW CARD'S DRESS (the user, 2026-09-29: "Your Breath Now card in
   time table has background same as the Check Now card of the Record tab") ====
   The gold light from the top left over a faint glass, the drawer's fine grain, the gold rim, and the home card's
   smoke lent while the card is in sight (ui-lite-nowcard.js, the same .lal-smoke host Check now uses). By day the
   Check now card is plain white under its gold, so the grain is left off there too. Breath Tap sits under the three
   answers as the Record tab draws it, a full-width row of its own. */
.tstwrap .tst { --tst-glass:rgba(255,255,255,.05); --tst-glass-2:rgba(255,255,255,.022); --tst-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="light"] .tstwrap .tst { --tst-glass:#FFFFFF; --tst-glass-2:#FDFBF8; --tst-grain:none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tstwrap .tst { --tst-glass:#FFFFFF; --tst-glass-2:#FDFBF8; --tst-grain:none; }
}
.tstwrap .tst-card.breath { isolation:isolate; gap:14px; padding:20px 18px; border-radius:24px;
  background:var(--tst-grain), radial-gradient(130% 120% at 0% 0%, rgba(var(--acc-rgb), .17), transparent 58%), linear-gradient(180deg, var(--tst-glass), var(--tst-glass-2));
  box-shadow:inset 0 1px 0 rgba(var(--acc-rgb), .3), inset 0 0 0 1px rgba(var(--acc-rgb), .15), 0 16px 34px -30px rgba(var(--acc-rgb), .24); }
.tstwrap .tst-card.breath.off {
  box-shadow:inset 0 1px 0 rgba(var(--acc-rgb), .3), inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 44%, transparent), 0 16px 34px -30px rgba(var(--acc-rgb), .24); }
@media (min-width:760px) { .tstwrap .tst-card.breath { padding:24px; border-radius:26px; } }
.tstwrap .tst-card.breath .lal-smoke { border-radius:inherit; }
.lbt-disc.in-tt { margin:0; }

/* ==== AN OPENED ROW: THREE FACTS, ONE LINE, THE STEPS (the user, 2026-09-29: "clearly mention, which side is on as
   swara code, which side this act requires, what is your current breath … less text and more clarity") ====
   The facts on hairlines in one quiet tile, each side as the two nostrils drawn (the lit one flows) and a mark where it
   meets the act's side or does not; one line under them says what to do; each step one line; Details folds the rest. */
.tst-facts { display:grid; margin:0; padding:2px 12px; list-style:none; border-radius:16px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.tst-fact { display:grid; grid-template-columns:minmax(0, 1fr) auto 20px; align-items:center; gap:10px; min-height:46px; padding:8px 0; }
.tst-fact + .tst-fact { border-top:1px solid var(--st-line-soft); }
.tst-fk { min-width:0; font:500 12.5px/1.3 var(--body); color:var(--ink-2); }
.tst-fact.need .tst-fk { color:rgb(var(--acc-rgb)); }
.tst-fv { display:grid; justify-items:end; gap:4px; min-width:0; text-align:right; }
.tst-fv b { display:inline-flex; align-items:center; gap:8px; font:600 14.5px/1.1 var(--body); color:var(--ink); }
.tst-fv b.n-ida { color:var(--soma); }
.tst-fv b.n-pingala { color:var(--sindoor); }
.tst-fv b.n-sushumna { color:var(--brass-hi); }
.tst-fv b.n-none { font-weight:500; color:var(--dim); }
.tst-fv em { display:inline-flex; align-items:center; font:400 11.5px/1.2 var(--body); font-style:normal; color:var(--dim); white-space:nowrap; }
.tst-nos { flex:0 0 auto; display:block; width:24px; height:10px; }
.tst-nos.n-ida { background:radial-gradient(circle at 5px 5px, var(--soma) 0 4.2px, transparent 4.7px), radial-gradient(circle at 19px 5px, color-mix(in srgb, var(--ink) 16%, transparent) 0 4.2px, transparent 4.7px); }
.tst-nos.n-pingala { background:radial-gradient(circle at 5px 5px, color-mix(in srgb, var(--ink) 16%, transparent) 0 4.2px, transparent 4.7px), radial-gradient(circle at 19px 5px, var(--sindoor) 0 4.2px, transparent 4.7px); }
.tst-nos.n-sushumna { background:radial-gradient(circle at 5px 5px, var(--brass-hi) 0 4.2px, transparent 4.7px), radial-gradient(circle at 19px 5px, var(--brass-hi) 0 4.2px, transparent 4.7px); }
.tst-fm { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; font-style:normal; }
.tst-fm svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.tst-fact.ok .tst-fm { color:var(--jade); background:color-mix(in srgb, var(--jade) 16%, transparent); }
.tst-fact.off .tst-fm { color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 16%, transparent); }
.tst-verdict { display:flex; align-items:flex-start; gap:10px; margin:0; padding:10px 12px; border-radius:14px; font:500 13px/1.45 var(--body); color:var(--ink); text-wrap:pretty; }
.tst-verdict i { flex:0 0 auto; display:grid; place-items:center; width:22px; height:22px; margin-top:-1px; border-radius:50%; font-style:normal; }
.tst-verdict i svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.tst-verdict.ok { background:color-mix(in srgb, var(--jade) 9%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 26%, transparent); }
.tst-verdict.ok i { color:var(--jade); background:color-mix(in srgb, var(--jade) 16%, transparent); }
.tst-verdict.warn { background:color-mix(in srgb, var(--brass-hi) 9%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 30%, transparent); }
.tst-verdict.warn i { color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 16%, transparent); }
.tst-verdict.plain { padding:0; font-weight:400; color:var(--ink-2); }
.tst-prep.short p { margin-top:2px; }
.tst-details .tst-dbody { display:grid; gap:14px; margin-top:10px; }
.tst-dsec { display:grid; gap:8px; }
.tst-src { margin:3px 0 0; font:500 11px/1.3 var(--body); letter-spacing:.02em; color:var(--dim); }

/* ==== THE TIME POINT OF THE MOMENT (the user, 2026-09-29: highlighted, "glowing subtly to be significantly visible",
   by the running time — in Planned and in My table) ====
   The one running now: a gold wash from its time, a brighter rim, a soft glow outside it and a Now tag before its name.
   Between two, the next one: rim and wash at half, tagged Next. Held still — no animation (Lite's speed notes). */
.tst-row.now { border-radius:16px; border-top-color:transparent;
  background:linear-gradient(90deg, rgba(var(--acc-rgb), .17), rgba(var(--acc-rgb), .07) 55%, rgba(var(--acc-rgb), .035));
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .52), 0 0 0 3px rgba(var(--acc-rgb), .07), 0 10px 30px -12px rgba(var(--acc-rgb), .6); }
.tst-row.next { border-radius:16px; border-top-color:transparent; background:rgba(var(--acc-rgb), .055);
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .3), 0 8px 24px -16px rgba(var(--acc-rgb), .45); }
.tst-row.now + .tst-row, .tst-row.next + .tst-row { border-top-color:transparent; }
.tst-row.now .tst-time b { color:rgb(var(--acc-rgb)); }
.tst-live { display:inline-block; margin-right:7px; padding:2px 7px; border-radius:999px; font:700 9px/1.45 var(--body); font-style:normal;
  letter-spacing:.12em; text-transform:uppercase; vertical-align:1.5px; color:#1B1406; background:rgb(var(--acc-rgb));
  box-shadow:0 0 12px rgba(var(--acc-rgb), .55); }
.tst-live.next { color:rgb(var(--acc-rgb)); background:rgba(var(--acc-rgb), .14); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .42); }

/* ==== A HELD CARD NO TALLER THAN THE DRAWER'S WINDOW (the user, 2026-09-29: How sure's "What would make it surer", opened,
   could not be scrolled to — the sticky card only moved once the dimmed page under it ran out) ====
   Held to the height of the window it sticks in (ui-lite-shell.js lalHoldMax), it scrolls inside itself. */
.lal-alertholder:has(> .lra-alert) > .lra-alert { max-height:var(--lal-hold-max, calc(100dvh - 200px)); overflow-x:hidden; overflow-y:auto;
  overscroll-behavior:contain; scrollbar-width:none; }
/* it scrolls, but shows no bar (the user, 2026-09-29) */
.lal-alertholder:has(> .lra-alert) > .lra-alert::-webkit-scrollbar { display:none; width:0; height:0; }
/* opened to read what would make it surer, the card turns solid and the page under it fades further, so nothing shows
   through the words (the user, 2026-09-29: "the transparency should be decreased automatically … so that user can clearly
   read") */
.ldx-caut { --ldx-solid:#16151C; transition:background-color .3s ease, box-shadow .3s ease; }
:root[data-theme="light"] .ldx-caut { --ldx-solid:#FFFDF8; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ldx-caut { --ldx-solid:#FFFDF8; } }
.ldx-caut:has(.ldx-sure-more[open]) { background-color:var(--ldx-solid);
  box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .46), 0 18px 40px -18px rgba(0,0,0,.8); }
:root[data-theme="light"] .ldx-caut:has(.ldx-sure-more[open]) { box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .46), 0 14px 30px -20px rgba(90,72,30,.35); }
#lite-align.ldx-hold:has(.ldx-sure-more[open]) > :not(#lal-dx-sure) { opacity:.18; transition:opacity .3s ease; }
@media (prefers-reduced-motion: reduce) { .ldx-caut, #lite-align.ldx-hold > :not(#lal-dx-sure) { transition:none; } }

/* ==== THE PINNED WAYS ON, SMALLER AND QUIETER (the user, 2026-09-29: Download report and Expert consultation "too
   prominent and big … covers a large part of screen specially on the mobile devices") ====
   A 40px pill round a 30px gold disc, a hairline and a soft shadow in place of the halo; scrolled down, it tucks into
   the disc alone, and its words come back on the way up or at the top (ui-lite-shell.js). Always in view, never large. */
.lra-fab, .lrp-fab { height:40px; gap:8px; padding:0 14px 0 5px; font-size:12.5px;
  box-shadow:inset 0 0 0 1px rgba(240,213,126,.38), inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px -12px rgba(0,0,0,.85);
  transition:padding .32s cubic-bezier(.22,.9,.24,1), gap .32s cubic-bezier(.22,.9,.24,1), box-shadow .2s, transform .15s; }
.lra-fab:hover, .lrp-fab:hover { box-shadow:inset 0 0 0 1px rgba(240,213,126,.72), inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px -12px rgba(0,0,0,.9); }
:is(.lra-fab, .lrp-fab) .lra-fab-ico { width:30px; height:30px; box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 3px 8px -4px rgba(214,178,74,.7); }
:is(.lra-fab, .lrp-fab) .lra-fab-ico svg { width:16px; height:16px; }
.lra-fab b, .lrp-fab b { display:inline-block; max-width:12em; overflow:hidden; transition:max-width .32s cubic-bezier(.22,.9,.24,1), opacity .2s ease; }
.litedrawer.fab-tuck :is(.lra-fab, .lrp-fab) { gap:0; padding:0 5px; }
.litedrawer.fab-tuck :is(.lra-fab, .lrp-fab) b { max-width:0; opacity:0; }
:root[data-theme="light"].lite-has-chart .litedrawer :is(.lra-fab, .lrp-fab) { box-shadow:inset 0 0 0 1px rgba(154,122,24,.4), 0 10px 22px -14px rgba(60,40,80,.35); }
.lite-has-chart .litedrawer[data-mode="align"]:is([data-stage="realign"], [data-stage="diagnosis"]) .litedrawer-body { padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
@media (min-width:760px) {
  .lite-has-chart .litedrawer[data-mode="align"]:is([data-stage="realign"], [data-stage="diagnosis"]) .litedrawer-body { padding-bottom:84px; }
}
@media (prefers-reduced-motion: reduce) { .lra-fab, .lrp-fab, .lra-fab b, .lrp-fab b { transition:none; } }

/* ==== YOUR RECORD, TOWARD A FIRM READING (the user, 2026-09-29: "add cards for remaining minimum no. of breath records
   (as per the diagnosis tab's how sure card) in the home page arranged perfectly and designed in a world-class
   professional manner") ====
   The home's own surface (the In tune card's glass and grain), How sure's status in How sure's colours, three quiet
   tiles — a thin ring filling toward its bar, what is still to record in the middle, the count under it — and one
   calm way to the next check. Firm, the card folds to a line. */
.lrh { --lrh-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  position:relative; display:grid; gap:14px; min-width:0; margin:0; padding:18px 16px 16px; border-radius:26px;
  background:var(--lrh-grain), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014)), var(--st-card);
  box-shadow:inset 0 0 0 1px var(--st-line-soft), 0 26px 50px -40px rgba(0,0,0,.9); }
:root[data-theme="light"] .lrh { background:#FFFFFF; box-shadow:inset 0 0 0 1px var(--st-line-soft), 0 1px 2px rgba(70,52,20,.05), 0 14px 30px -24px rgba(70,52,20,.16); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lrh { background:#FFFFFF; box-shadow:inset 0 0 0 1px var(--st-line-soft), 0 1px 2px rgba(70,52,20,.05), 0 14px 30px -24px rgba(70,52,20,.16); } }
@media (min-width:760px) { .lrh { padding:22px 20px 18px; } }
.lrh-hd { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:start; gap:10px; }
.lrh-title { margin:4px 0 0; font:500 clamp(19px, 5.2vw, 22px)/1.15 var(--display); letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
.lrh-pill { --lrh-rgb:242, 138, 92; margin-top:1px; padding:5px 10px; border-radius:999px; font:600 10.5px/1 var(--body); letter-spacing:.02em; white-space:nowrap;
  color:rgb(var(--lrh-rgb)); background:rgba(var(--lrh-rgb), .1); box-shadow:inset 0 0 0 1px rgba(var(--lrh-rgb), .4); }
.lrh-pill.t-soft { --lrh-rgb:238, 201, 110; }
.lrh-pill.t-firm { --lrh-rgb:98, 196, 152; }
:root[data-theme="light"] .lrh-pill { --lrh-rgb:182, 70, 30; }
:root[data-theme="light"] .lrh-pill.t-soft { --lrh-rgb:150, 110, 18; }
:root[data-theme="light"] .lrh-pill.t-firm { --lrh-rgb:28, 128, 88; }
.lrh-lede { margin:-6px 0 0; font:400 12.5px/1.4 var(--body); color:var(--ink-2); }
.lrh-tiles { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.lrh-t { display:grid; justify-items:center; align-content:start; gap:7px; min-width:0; padding:14px 6px 12px; border-radius:18px; text-align:center;
  background:color-mix(in srgb, var(--ink) 3.5%, transparent); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lrh-ring { position:relative; display:grid; place-items:center; width:64px; height:64px; }
.lrh-ring svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.lrh-ring circle { fill:none; stroke-width:3.2; }
.lrh-ring .t { stroke:color-mix(in srgb, var(--ink) 9%, transparent); }
.lrh-ring .a { stroke:rgb(var(--acc-rgb)); stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(var(--acc-rgb), .4)); }
.lrh-t.ok .lrh-ring .a { stroke:var(--jade); filter:drop-shadow(0 0 4px color-mix(in srgb, var(--jade) 45%, transparent)); }
.lrh-ring b { position:relative; font:300 22px/1 var(--display); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.lrh-done { position:relative; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font-style:normal; color:var(--jade); background:color-mix(in srgb, var(--jade) 16%, transparent); }
.lrh-done svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lrh-k { display:inline-flex; align-items:center; justify-content:center; gap:5px; max-width:100%; font:500 11.5px/1.25 var(--body); color:var(--ink); }
.lrh-k svg { flex:0 0 auto; width:13px; height:13px; fill:none; stroke:rgb(var(--acc-rgb)); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lrh-t.ok .lrh-k svg { stroke:var(--jade); }
.lrh-t em { font:500 10.5px/1.2 var(--body); font-style:normal; color:var(--dim); font-variant-numeric:tabular-nums; }
.lrh-go { justify-self:start; display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 16px 0 18px; border:0; border-radius:999px; cursor:pointer;
  font:600 13px/1 var(--body); color:var(--ink); background:rgba(var(--acc-rgb), .1); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .45);
  -webkit-tap-highlight-color:transparent; transition:background .2s, box-shadow .2s, transform .15s; }
.lrh-go svg { width:16px; height:16px; fill:none; stroke:rgb(var(--acc-rgb)); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lrh-go:hover { background:rgba(var(--acc-rgb), .16); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .7); }
.lrh-go:active { transform:scale(.98); }
.lrh-go:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lrh.firm { gap:10px; }
.lrh-sum { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0; font:400 12.5px/1.3 var(--body); color:var(--ink-2); }
.lrh-sum b { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.lrh-sum i { width:3px; height:3px; border-radius:50%; background:var(--dim); }
.lrh-wait .lrh-lede { margin:-4px 0 0; color:var(--dim); }
@media (max-width:360px) { .lrh-ring { width:56px; height:56px; } .lrh-ring b { font-size:19px; } .lrh-k { font-size:11px; } .lrh-t { padding:12px 4px 10px; } }
@media (prefers-reduced-motion: reduce) { .lrh-go { transition:none; } }

/* ==== BREATH TAP: HOW TO BREATHE FOR IT (the user, 2026-09-29: "not to forcefully blow but … normal breath in and out
   just elevated enough to record hsssh sound produced … visible till the user completes the recording") ====
   One fixed note on every screen that listens, in the sheet's own tile, with a soft breath-wave for its mark. */
.bts-gentle { display:flex; align-items:flex-start; gap:10px; max-width:40ch; margin:0 auto; padding:10px 13px; border-radius:14px; text-align:left;
  font:400 12.5px/1.45 var(--body); color:var(--bt-ink2); background:var(--bt-tile); box-shadow:inset 0 0 0 1px var(--bt-line2); }
.bts-gentle svg { flex:0 0 auto; width:20px; height:20px; margin-top:1px; fill:none; stroke:rgb(var(--bt-exp)); stroke-width:1.7; stroke-linecap:round; }
.bts-gentle b { font-weight:600; color:var(--bt-ink); }
.bts-gentle i { font-style:italic; color:var(--bt-ink); }
.lrh-okmark { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:var(--jade); background:color-mix(in srgb, var(--jade) 14%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 40%, transparent); }
.lrh-okmark svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ==== THE HOME'S CARDS, ONE FAMILY (the user, 2026-09-29: "make the bg of the Your Swara Code card same as In tune with
   card"; "properly align shiva outline with the text section … with high aesthetics and symmetry") ====
   Your Swara Code, In tune and Your record share one surface — a faint glass, the fine grain, a hairline — and one
   radius and padding. The first card: the face's box holds the face alone, so centred on the words it sits level with
   them, with even room at both sides; the breath hangs below it (LNC_BOX: y 120…420 of the drawing's −84…196), and
   the face is lit with each breath out of the website's 4.8 s breath, in step with the mist (ui-lite-nowcard.js). */
.lite-has-chart .litesum { --hs-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
:root[data-theme="light"].lite-has-chart .litesum { --hs-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]).lite-has-chart .litesum { --hs-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } }
.lite-has-chart .litesum .lh-card.lpattern {
  background:var(--hs-grain), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), var(--st-card);
  box-shadow:inset 0 0 0 1px var(--st-line-soft), 0 26px 50px -40px rgba(0,0,0,.9); }
:root[data-theme="light"].lite-has-chart .litesum .lh-card.lpattern { background:var(--hs-grain), #FFFFFF;
  box-shadow:inset 0 0 0 1px var(--st-line-soft), 0 1px 2px rgba(70,52,20,.05), 0 14px 30px -24px rgba(70,52,20,.16); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]).lite-has-chart .litesum .lh-card.lpattern { background:var(--hs-grain), #FFFFFF;
    box-shadow:inset 0 0 0 1px var(--st-line-soft), 0 1px 2px rgba(70,52,20,.05), 0 14px 30px -24px rgba(70,52,20,.16); }
}
.lite-has-chart .litesum .lsync { border-radius:26px; padding:16px 16px 14px; }
@media (min-width:760px) { .lite-has-chart .litesum .lsync { padding:20px 20px 16px; } }

.lite-has-chart .litesum .lcalm.lcalm-box.lnow { gap:4px 14px; padding:16px 18px 16px 16px; }
/* room to breathe between the face and the words (the user, 2026-09-29: "very closely spaced and tight … without breaking
   center alignment and symmetry"): the face stays centred on the words, the pair is centred across the card with equal
   margins either side, and the gap between them grows with the screen */
.lite-has-chart .litesum .lcalm.lcalm-box.lnow { grid-template-columns:auto minmax(0, auto); justify-content:center;
  column-gap:clamp(18px, 5.4vw, 34px); padding:18px clamp(16px, 4.6vw, 30px); }
.lnow-shiva { align-self:center; width:clamp(86px, 24vw, 104px); aspect-ratio:196 / 302; }      /* the face's frame (ui-lite-shell.js ldShiva) */
.lnow-breath { top:84.106%; height:99.338%; }      /* y 120…420 of the drawing, its frame from -134, 302 tall (2026-10-23: the real Moon, larger and higher; was -112: 82.857%) */
.lnow .sh-face { animation:lnowFace 4.8s ease-in-out var(--lnow-ph, 0s) infinite; }
.lnow-shiva::before { animation:lnowAura 4.8s ease-in-out var(--lnow-ph, 0s) infinite; }
@keyframes lnowFace { 0%, 100% { opacity:.55; } 26% { opacity:1; } 52% { opacity:.64; } }
@keyframes lnowAura { 0%, 100% { opacity:.5; transform:scale(.94); } 26% { opacity:1; transform:scale(1.04); } 52% { opacity:.58; transform:scale(.95); } }
@media (prefers-reduced-motion: reduce) { .lnow .sh-face, .lnow-shiva::before { animation:none; } }
/* the record card's tiles in line: the count and "more" in the ring, one short label each, the pill on the eyebrow row */
.lrh-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:24px; }
.lrh-title { margin:-4px 0 0; }
.lrh-ring b { display:grid; justify-items:center; gap:2px; }
.lrh-ring b small { font:600 7.5px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.lrh-k { white-space:nowrap; }
.lrh-done { width:30px; height:30px; margin:0; }
/* the tick sits in the middle of its disc: the ring's own drawing is the only svg laid over the ring (the user, 2026-09-29:
   the green tick "is not aligned properly" — the ring's rule had caught the tick's svg too and pinned it top left) */
.lrh-ring .lrh-done svg { position:static; inset:auto; display:block; width:15px; height:15px; }

/* SHIVA, KRIYA-AWARE (ui-lite-swaratantra.js lkxFace, 2026-10-22): one centred line under the face and the words, across the card — the side
   the Swara Sutra asks, a gold diamond, the cotton — on a quiet glass capsule so the breath's mist passes under it; one line at any width */
/* KRIYA LEADS THE CARD (ui-lite-shell.js ldSwaraHero, 2026-10-22): beside Shiva, SwaraTantra's trident and "Kriya ongoing" in the eyebrow's
   place, "Breathe through" over the side, its time and element as ever, the cotton line when a check found the breath elsewhere, and the
   way to the Kriya's Swara Sutra where the Swara Code's own stands */
.lnow-kxk { display:inline-flex; align-items:center; gap:7px; }
.lnow-kxtri { flex:none; display:block; width:auto; height:19px; aspect-ratio:179 / 305; object-fit:cover; object-position:50% 0; filter:drop-shadow(0 0 5px rgba(255,204,96,.45)); }
.lnow-kxb { margin-top:2px; font:500 12px/1.1 var(--body); letter-spacing:.02em; color:var(--ink-2); }
.lnow-kxb + .lcalm-nadi { margin-top:-2px; }
.lnow-kxc { display:inline-flex; align-items:center; gap:7px; font:500 12.5px/1.3 var(--body); color:var(--ink-2); }
.lnow-kxc b { font-weight:600; color:var(--ink); }
.lnow-kxc svg { flex:none; width:16px; height:16px; fill:none; stroke:#EDE4D0; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
:root[data-theme="light"] .lnow-kxc svg { stroke:#7A6448; }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-kxc { font-size:13px; }
/* the Kriya's Swara Sutra in a sheet (ui-lite-swaratantra.js lkxSutraSheet): the Start Kriya overlay's card, at the sheet's width */
.lkx-sutsheet { display:block; width:100%; margin:0; }
.lkx-sutsheet .kx-card.kx-insheet { width:100%; margin:0; padding:4px 2px 10px; border:0; background:none; box-shadow:none; }
.lkx-sutwait { margin:6px 2px; font:500 13px/1.45 var(--body); color:var(--ink-2); }
/* the cotton in the nostril the Kriya closes: a soft tuft, cream, its edge drawn as the face is */
.lnow .sh-cot circle { fill:#F3EEE2; stroke:rgba(196,180,150,.55); stroke-width:.8; vector-effect:non-scaling-stroke; }
.lnow .sh-cot { filter:drop-shadow(0 0 2px rgba(255,248,230,.45)); }
.lnow .sh-cot-l { fill:none; stroke:rgba(150,132,100,.55); stroke-width:.8; stroke-linecap:round; vector-effect:non-scaling-stroke; }
:root[data-theme="light"] .lnow .sh-cot circle { fill:#FFFFFF; stroke:rgba(140,118,80,.6); }
:root[data-theme="light"] .lnow .sh-cot { filter:drop-shadow(0 1px 1.5px rgba(90,70,40,.25)); }
.lnow-kx { grid-column:1 / -1; justify-self:center; position:relative; z-index:3; display:flex; align-items:center; justify-content:center; gap:11px;
  max-width:100%; box-sizing:border-box; margin:0; padding:7px 15px; border-radius:999px; white-space:nowrap;
  font:500 12.5px/1.2 var(--body); color:var(--ink-2); background:none; text-shadow:0 0 6px rgba(6,7,11,.95), 0 0 14px rgba(6,7,11,.8);
  box-shadow:inset 0 0 0 1px rgba(242,207,122,.26); }   /* clear: the breath's mist passes behind it; no blur to redraw while the page scrolls */
.lnow-kx b { font-weight:700; color:var(--ink); }
.lnow-kxb, .lnow-kxc { display:inline-flex; align-items:center; gap:7px; }
.lnow-kxb i { flex:none; width:8px; height:8px; border-radius:50%; background:var(--kxs); box-shadow:0 0 0 3px color-mix(in srgb, var(--kxs) 22%, transparent), 0 0 9px var(--kxs); }
.lnow-kxb.s-left { --kxs:var(--soma); } .lnow-kxb.s-right { --kxs:var(--sindoor); } .lnow-kxb.s-both { --kxs:var(--brass-hi); }
.lnow-kxd { flex:none; width:5px; height:5px; transform:rotate(45deg); border-radius:1px; background:linear-gradient(135deg, #FFE7A3, #C99A45); }
.lnow-kxc svg { flex:none; width:16px; height:16px; fill:none; stroke:#EDE4D0; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:400px) { .lnow-kx { gap:9px; padding:7px 13px; font-size:12px; } .lnow-kxw { display:none; } }
:root[data-theme="light"] .lnow-kx { text-shadow:0 0 6px rgba(255,253,248,.95); box-shadow:inset 0 0 0 1px rgba(176,122,26,.32); }
:root[data-theme="light"] .lnow-kxc svg { stroke:#7A6448; }

/* ==== THE FIRST CARD'S TWO WAYS ON (the user, 2026-09-29): Check your breath, and beside it How to check ==== */
.lnow-acts { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:8px 0 2px; }
.lnow-acts .lnow-cta { margin:0; }
.lnow-how { display:inline-flex; align-items:center; gap:6px; padding:6px 2px; border:0; background:none; cursor:pointer;
  font:500 12px/1 var(--body); color:var(--ink-2); -webkit-tap-highlight-color:transparent; transition:color .2s; }
.lnow-how svg { width:16px; height:16px; fill:none; stroke:color-mix(in srgb, var(--nc) 72%, #fff); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lnow-how:hover { color:var(--ink); }
.lnow-how:focus-visible { outline:2px solid color-mix(in srgb, var(--nc) 70%, #fff); outline-offset:2px; border-radius:8px; }
:root[data-theme="light"] .lnow-how { color:#5A4E3A; }
:root[data-theme="light"] .lnow-how svg { stroke:color-mix(in srgb, var(--nc) 80%, #3A2E1A); }

/* ==== YOUR RECORD, FOLDED (the user, 2026-09-29: "in default state keep the your Record card collapsed … world-class") ====
   One bar: the eyebrow, where the record stands in the display face, what is still to record, a small ring for each of
   the three (a tick in jade once met) and a chevron. Opened, the tiles rise in under it. */
.lrh.lrh-fold { gap:0; padding:0; overflow:hidden; }
.lrh-bar { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:center; gap:12px; width:100%; margin:0; padding:16px 16px 16px 18px;
  border:0; border-radius:inherit; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
div.lrh-bar { cursor:default; }
.lrh-bar:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:-3px; }
.lrh-bar-tx { display:grid; gap:4px; min-width:0; }
.lrh-bar-tx b { font:500 17.5px/1.2 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lrh-bar-tx em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); font-variant-numeric:tabular-nums; text-wrap:balance; }
.lrh-mini { display:flex; gap:6px; }
.lrh-mini i { position:relative; display:grid; place-items:center; width:26px; height:26px; }
.lrh-mini i::before { content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(rgb(var(--acc-rgb)) calc(var(--p) * 1turn), color-mix(in srgb, var(--ink) 11%, transparent) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
.lrh-mini i.ok::before { background:var(--jade); }
.lrh-mini i svg { position:relative; width:12px; height:12px; fill:none; stroke:var(--jade); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.lrh-chev { width:18px; height:18px; fill:none; stroke:var(--dim); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s cubic-bezier(.22,.9,.24,1), stroke .2s; }
.lrh.open .lrh-chev { transform:rotate(180deg); }
.lrh-bar:hover .lrh-chev { stroke:var(--ink-2); }
.lrh-more { display:grid; gap:14px; padding:0 16px 16px; }
/* the opening slide only on the tap that opens it (.anim, ui-lite-shell.js ldAnim) — a redraw of the open card never replays it */
.lrh.anim .lrh-more { animation:lrhIn .32s cubic-bezier(.22,.9,.24,1) both; }
@keyframes lrhIn { from { opacity:0; transform:translateY(-6px); } }
.lrh-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lrh-row .lrh-lede { margin:0; }
@media (min-width:760px) { .lrh-bar { padding:20px 20px 20px 22px; } .lrh-more { padding:0 20px 20px; } }
@media (max-width:360px) { .lrh-mini { gap:4px; } .lrh-mini i { width:22px; height:22px; } .lrh-bar { gap:9px; } }
@media (prefers-reduced-motion: reduce) { .lrh.anim .lrh-more { animation:none; } .lrh-chev { transition:none; } }

/* ==== YOUR RECORD, FROM THE FIRST CHECK (the user, 2026-09-30: the line "should start with the first record … make it front
   card and in its collapsed card when open should show the targets"; and How's your day plotted with it) ====
   Your days lead the card: in tune (circles) and How's your day (diamonds) on one 0–100 scale, the day under the finger
   read above them as the legend; two figures under them; the targets fold at the foot. Two hues checked for colour-blind
   separation (ΔE 12 dark, 10.8 light) and told apart by their marks as well. */
/* 2026-10-01 (the user: "design the your record card more beautifully and clear and concise using Your Swara Code card
   color theme"): the Swara Code card's gold title, and its band's lilac and gold for the two lines — lilac for in tune,
   gold for How's your day (CVD ΔE 26.7 on the night card, 20.3 on the day card) */
.lrt { --lrt-on:#A093DB; --lrt-day:#F2D98A; --lrt-surface:#15131B; gap:12px; container:lrt / inline-size; }
:root[data-theme="light"] .lrt { --lrt-on:#6D5FA6; --lrt-day:#7C5B00; --lrt-surface:#FFFFFF; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lrt { --lrt-on:#6D5FA6; --lrt-day:#7C5B00; --lrt-surface:#FFFFFF; } }
.lrt-hd { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:6px 10px; }
.lrt-hd-tx { display:grid; flex:1 1 200px; gap:3px; min-width:0; }   /* the count drops under the title before the title breaks up */
.lrt-title { margin:0; text-wrap:balance; }
.lrt-aside { flex:none; margin-top:2px; font:500 11px/1.2 var(--body); color:var(--dim); white-space:nowrap; font-variant-numeric:tabular-nums; }
.lrt-wait { margin:0; font:400 12.5px/1.4 var(--body); color:var(--dim); }
.lrt-plot { display:grid; gap:6px; }
.lrt-read { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 14px; min-height:17px; margin:0; font:400 12px/1.4 var(--body); color:var(--ink-2); }
.lrt-when { font:600 12px/1.4 var(--body); color:var(--ink); }
.lrt-kv { display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap; }
.lrt-kv i { align-self:center; flex:none; width:8px; height:8px; border-radius:50%; background:var(--lrt-on); }
.lrt-kv.day i { width:7px; height:7px; border-radius:1px; transform:rotate(45deg); background:var(--lrt-day); }
.lrt-kv b { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.lrt-kv em { font-style:normal; color:var(--dim); }
.lrt-pw { position:relative; margin-left:24px; }
.lrt-pw svg { display:block; width:100%; height:auto; overflow:visible; touch-action:pan-y; cursor:crosshair; -webkit-tap-highlight-color:transparent; }
.lrt-yax span { position:absolute; right:calc(100% + 7px); transform:translateY(-50%); font:500 9.5px/1 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }
.lrt-xax { position:relative; height:13px; margin-left:24px; }
.lrt-xax span { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; font:500 10px/1.2 var(--body); color:var(--dim); }
.lrt-xax span.first { transform:none; }
.lrt-xax span.last { transform:translateX(-100%); }
.lrt-plot .gr { stroke:color-mix(in srgb, var(--ink) 10%, transparent); stroke-width:1; stroke-dasharray:2 4; vector-effect:non-scaling-stroke; }
.lrt-plot .gr.base { stroke:color-mix(in srgb, var(--ink) 18%, transparent); stroke-dasharray:none; }
.lrt-plot .ar { fill:url(#lrt-grad); }
.lrt-plot .g0 { stop-color:var(--lrt-on); stop-opacity:.3; }
.lrt-plot .g1 { stop-color:var(--lrt-on); stop-opacity:0; }
.lrt-plot .on-ln, .lrt-plot .day-ln { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.lrt-plot .on-ln { stroke:var(--lrt-on); }
.lrt-plot .day-ln { stroke:var(--lrt-day); filter:drop-shadow(0 0 2.5px color-mix(in srgb, var(--lrt-day) 55%, transparent)); }
.lrt-plot .on-dt { fill:var(--lrt-on); }
.lrt-plot .day-dt { fill:var(--lrt-day); }
.lrt-plot .cx { stroke:color-mix(in srgb, var(--ink) 30%, transparent); stroke-width:1; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.lrt-plot .pk { fill:var(--lrt-surface); stroke-width:2; vector-effect:non-scaling-stroke; }
.lrt-plot .pk.on { stroke:var(--lrt-on); }
.lrt-plot .pk.day { stroke:var(--lrt-day); }
.lrt-stats { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.lrt-stat { display:grid; align-content:start; gap:4px; min-width:0; padding:12px 12px 11px; border-radius:16px;
  background:color-mix(in srgb, var(--ink) 4%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.lrt-stat.corr { grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:11px; }
.lrt-stat-tx { display:grid; gap:4px; min-width:0; }
.lrt-k { font:600 9.5px/1.25 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lrt-big { font:300 30px/1 var(--display); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.lrt-stat.lift .lrt-big { color:var(--lrt-on); }
.lrt-stat.lift.neg .lrt-big, .lrt-stat.lift.zero .lrt-big { color:var(--ink-2); }
.lrt-stat em { font:400 11.5px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.lrt-sc { flex:none; width:64px; height:48px; overflow:visible; }
.lrt-sc rect { fill:none; stroke:color-mix(in srgb, var(--ink) 12%, transparent); stroke-width:1; vector-effect:non-scaling-stroke; }
.lrt-sc circle { fill:var(--lrt-on); opacity:.85; }
.lrt-sc line { stroke:var(--lrt-day); stroke-width:1.6; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.lrt-note { margin:-2px 0 0; font:400 11.5px/1.45 var(--body); color:var(--dim); }
.lrt-fold { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; width:100%; margin:0; padding:12px 0 0;
  border:0; border-top:1px solid var(--st-line-soft); border-radius:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent; }
.lrt-fold:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:3px; border-radius:8px; }
.lrt-fold:hover .lrh-chev { stroke:var(--ink-2); }
.lrt-fold-tx { display:grid; gap:2px; min-width:0; }
.lrt-fold-tx b { font:600 13px/1.25 var(--body); color:var(--ink); }
.lrt-fold-tx em { font:400 11.5px/1.35 var(--body); font-style:normal; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lrt .lrh-more.lrt-more { padding:0; }
/* the targets, last in the fold (2026-10-01: the figures and the targets fold together under the line) */
.lrt-tg { display:grid; gap:10px; padding-top:12px; border-top:1px solid var(--st-line-soft); }
.lrt-tg .lrh-row { align-items:center; }
.lrt-keep { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px; }
.lrt-keep p { flex:1 1 200px; margin:0; font:400 12px/1.45 var(--body); color:var(--ink-2); }
/* the figures stack when the CARD is narrow (the home column on a desk is about 400 px wide), not by the screen */
@container lrt (max-width:460px) { .lrt-stats { grid-template-columns:1fr; } .lrt-stat.lift { grid-template-columns:auto minmax(0, 1fr); align-items:baseline; column-gap:10px; }
  .lrt-stat.lift .lrt-k { grid-column:1 / -1; } }

/* ==== HOW TO CHECK YOUR BREATH (the user, 2026-09-29; ui-lite-howto.js) ====
   The studio sheet, taller, its scroll bar hidden; five cards, a picture beside the words (above them on a phone); each
   picture moves on its own loop, only while the sheet is open, and holds still for less motion. */
.lpk-sheet.lpk-howto { max-width:600px; max-height:min(92vh, 880px); scrollbar-width:none; }
.lpk-sheet.lpk-howto::-webkit-scrollbar { display:none; width:0; height:0; }
.lht { display:grid; gap:12px; padding-top:12px; }
.lht-lede { margin:0; font:400 13.5px/1.5 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lht-c { display:grid; grid-template-columns:150px minmax(0, 1fr); align-items:center; gap:16px; padding:12px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lht-art { position:relative; display:grid; place-items:center; height:176px; border-radius:16px; overflow:hidden;
  background:radial-gradient(90% 70% at 50% 28%, rgba(var(--acc-rgb), .1), transparent 70%), linear-gradient(180deg, #14131B, #0B0A10); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.lht-tx { display:grid; gap:6px; min-width:0; align-content:center; }
.lht-n { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font:700 11px/1 var(--body); color:#1B1406; background:rgb(var(--acc-rgb)); }
.lht-k { font:600 10px/1.2 var(--body); letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--acc-rgb), .95); }
.lht-tx h4 { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0; font:500 17px/1.2 var(--display); letter-spacing:-.005em; color:var(--ink); }
.lht-tx p { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lht-tx p b { font-weight:600; color:var(--ink); }
.lht-exp { padding:3px 8px; border-radius:999px; font:700 8.5px/1 var(--body); font-style:normal; letter-spacing:.12em; text-transform:uppercase;
  color:rgb(128, 188, 224); background:rgba(128, 188, 224, .12); box-shadow:inset 0 0 0 1px rgba(128, 188, 224, .42); }
.lht-go { display:grid; padding:6px 0 2px; }
.lht-go-b { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; border:0; border-radius:16px; cursor:pointer;
  font:600 14px/1 var(--body); color:#1B1406; background:linear-gradient(180deg, #F6DE93, #D9B656); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 12px 24px -16px rgba(214,178,74,.9); }
.lht-go-b svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lht-go-b:focus-visible { outline:2px solid #F6DE93; outline-offset:3px; }
@media (max-width:460px) { .lht-c { grid-template-columns:minmax(0, 1fr); gap:12px; } .lht-art { height:196px; } }

/* the face and the joined palms */
.lht-face { height:100%; max-height:166px; width:auto; overflow:visible; }
.lht-ink path { fill:none; stroke:#EAD7AC; stroke-width:1.25; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.lht-ink .fill { fill:#EAD7AC; stroke:none; }
.lht-ink .nos { fill:#0A0910; stroke:rgba(255,244,218,.55); stroke-width:1; }
.lht-hands .palm { fill:url(#lhtSkin); stroke:#EAD7AC; stroke-width:1.25; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.lht-hands .finger, .lht-hands .thumb { fill:none; stroke:#EAD7AC; stroke-width:1; stroke-linecap:round; opacity:.55; vector-effect:non-scaling-stroke; }
.lht-air circle { fill:#FFF1D6; opacity:0; transform-box:fill-box; transform-origin:center; }
.lht-air.l circle { fill:#E4DDFF; }
.lht-air.r circle { fill:#FFD9CC; }
.lht-warm { opacity:0; }
.lht-tag .t { font:600 19px var(--body); letter-spacing:.03em; fill:#EFE7D6; opacity:0; }
.lht-tag .t.l { fill:#C9BEFF; } .lht-tag .t.r { fill:#FFB9A2; } .lht-tag .t.b { fill:#F6DE93; }
.lht-face .lht-hands { transform-box:view-box; }
/* 1 · the palms rise, joined, to just under the nose; the open side breathes onto them */
.s1 .lht-hands { animation:lhtRise 4.8s cubic-bezier(.3,.7,.2,1) infinite; }
@keyframes lhtRise { 0% { transform:translateY(64px); opacity:0; } 26% { transform:none; opacity:1; } 90% { transform:none; opacity:1; } 100% { transform:none; opacity:0; } }
.s1 .lht-air.l circle, .s2 .lht-air.l circle, .s3 .lht-air circle { animation:lhtPuff 2.4s ease-out infinite; }
.lht-air circle:nth-child(2) { animation-delay:.8s !important; }
.lht-air circle:nth-child(3) { animation-delay:1.6s !important; }
@keyframes lhtPuff { 0% { transform:translate(0, 0) scale(.6); opacity:0; } 16% { opacity:.85; } 100% { transform:translate(-9px, 16px) scale(2.6); opacity:0; } }
.lht-air.r circle { animation-name:lhtPuffR; }
@keyframes lhtPuffR { 0% { transform:translate(0, 0) scale(.6); opacity:0; } 16% { opacity:.85; } 100% { transform:translate(9px, 16px) scale(2.6); opacity:0; } }
/* 2 · the palms come closer; near enough, the open side's palm feels the warm air */
/* closer: the hands, held at their touching fingertips, draw in round the nose */
.s2 .lht-hands { transform-origin:120px 28px; animation:lhtCloser 4.8s ease-in-out infinite; }
@keyframes lhtCloser { 0%, 100% { transform:scale(1.16); } 42%, 78% { transform:none; } }
.s2 .lht-warm.l { animation:lhtWarm 4.8s ease-in-out infinite; }
@keyframes lhtWarm { 0%, 32% { opacity:0; } 48%, 76% { opacity:1; } 92%, 100% { opacity:0; } }
/* 3 · left, then right, then both, each named */
.s3 .lht-air.l, .s3 .lht-warm.l { animation:lhtPhL 9.6s linear infinite; }
.s3 .lht-air.r, .s3 .lht-warm.r { animation:lhtPhR 9.6s linear infinite; }
.s3 .t.l { animation:lhtTagL 9.6s linear infinite; }
.s3 .t.r { animation:lhtTagR 9.6s linear infinite; }
.s3 .t.b { animation:lhtTagB 9.6s linear infinite; }
@keyframes lhtPhL { 0%, 30% { opacity:1; } 34%, 64% { opacity:0; } 68%, 100% { opacity:1; } }
@keyframes lhtPhR { 0%, 31% { opacity:0; } 35%, 97% { opacity:1; } 100% { opacity:0; } }
@keyframes lhtTagL { 0% { opacity:0; } 4%, 29% { opacity:1; } 33%, 67% { opacity:0; } 71%, 96% { opacity:1; } 100% { opacity:0; } }
@keyframes lhtTagR { 0%, 34% { opacity:0; } 38%, 96% { opacity:1; } 100% { opacity:0; } }
@keyframes lhtTagB { 0%, 67% { opacity:0; } 71%, 96% { opacity:1; } 100% { opacity:0; } }

/* the drawn phone: the app's own shapes, small */
.lht-phone { position:relative; width:112px; height:168px; padding:5px; border-radius:22px; background:linear-gradient(180deg, #2A2833, #16151C);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 14px 28px -16px rgba(0,0,0,.9); }
.lht-phone::before { content:""; position:absolute; top:8px; left:50%; width:28px; height:5px; margin-left:-14px; border-radius:3px; background:#08070C; z-index:3; }
.lht-screen { position:relative; width:100%; height:100%; border-radius:17px; overflow:hidden; background:#0B0A10; font-family:var(--body); }
.lht-card { position:absolute; left:6px; right:6px; top:18px; display:grid; gap:3px; padding:8px 8px 9px; border-radius:11px;
  background:linear-gradient(135deg, rgba(156,139,228,.32), rgba(35,32,54,.95) 70%); box-shadow:inset 0 0 0 1px rgba(176,160,238,.35); }
.lht-card-k { font-size:5px; letter-spacing:.16em; text-transform:uppercase; color:#C9BEFF; }
.lht-card b { font:400 11px/1 var(--display); color:#D9D0FF; }
.lht-cta { position:relative; justify-self:start; margin-top:3px; padding:3px 6px; border-radius:999px; font-size:5.5px; font-weight:600; color:#F4F0E8;
  background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(176,160,238,.5); }
.lht-card2 { position:absolute; left:6px; right:6px; top:78px; height:30px; border-radius:10px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.lht-card2.s { top:114px; height:22px; }
.lht-drawer { position:absolute; left:0; right:0; bottom:0; height:62%; padding:6px 7px 8px; border-radius:14px 14px 0 0; display:grid; align-content:start; gap:6px;
  background:linear-gradient(180deg, rgba(40,38,52,.97), rgba(20,19,26,.99)); box-shadow:0 -10px 20px -12px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1);
  transform:translateY(102%); z-index:2; }
.lht-grip { justify-self:center; width:22px; height:3px; border-radius:2px; background:rgba(176,160,238,.6); }
.lht-q { font-size:5.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8F899F; text-align:center; }
.lht-ans { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px; }
.lht-ans .a { position:relative; display:grid; justify-items:center; gap:4px; padding:7px 2px 6px; border-radius:8px; background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.lht-ans .a b { font:400 7px/1 var(--display); color:#F4F0E8; }
.lht-dots { display:flex; gap:3px; }
.lht-dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.14); }
.lht-dots.l i:first-child, .lht-dots.b i { background:var(--soma); }
.lht-dots.b i { background:var(--brass-hi); }
.lht-dots.r i:last-child { background:var(--sindoor); }
.lht-saved { display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:5px 6px; border-radius:8px; font-size:6px; font-weight:600; color:#8EE0BC;
  background:rgba(98,196,152,.12); box-shadow:inset 0 0 0 1px rgba(98,196,152,.4); opacity:0; }
.lht-saved svg { width:8px; height:8px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.lht-tap { position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,.2) 55%, transparent 70%); opacity:0; transform:scale(.4); }
/* the drawer's check, played: the card, a tap, the drawer rises, a tap on Left, saved */
.lht-phone.dr .lht-cta .lht-tap { animation:lhtTap1 7s ease-out infinite; }
.lht-phone.dr .lht-drawer { animation:lhtDrawer 7s cubic-bezier(.22,.9,.24,1) infinite; }
.lht-phone.dr .a.l .lht-tap { animation:lhtTap2 7s ease-out infinite; }
.lht-phone.dr .a.l { animation:lhtPick 7s ease-out infinite; }
.lht-phone.dr .lht-saved { animation:lhtSaved 7s ease-out infinite; }
@keyframes lhtTap1 { 0%, 10% { opacity:0; transform:scale(.4); } 13% { opacity:1; transform:scale(1); } 20%, 100% { opacity:0; transform:scale(1.8); } }
@keyframes lhtDrawer { 0%, 15% { transform:translateY(102%); } 27%, 86% { transform:none; } 96%, 100% { transform:translateY(102%); } }
@keyframes lhtTap2 { 0%, 38% { opacity:0; transform:scale(.4); } 41% { opacity:1; transform:scale(1); } 48%, 100% { opacity:0; transform:scale(1.8); } }
@keyframes lhtPick { 0%, 40% { background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
  43%, 86% { background:rgba(156,139,228,.2); box-shadow:inset 0 0 0 1px rgba(176,160,238,.8); } 96%, 100% { background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); } }
@keyframes lhtSaved { 0%, 45% { opacity:0; transform:translateY(4px); } 50%, 84% { opacity:1; transform:none; } 90%, 100% { opacity:0; } }
/* Breath Tap, played: the disc in the drawer, a tap, the phone's edge under the left nostril, listening, the answer */
.lht-phone.bt .lht-drawer { transform:none; height:46%; }
.lht-disc { position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:5px; padding:4px 6px 4px 4px; border-radius:10px;
  background:linear-gradient(100deg, rgba(160,144,232,.2), rgba(255,255,255,.04) 45%, rgba(238,128,100,.16)); box-shadow:inset 0 0 0 1px rgba(200,180,240,.3); }
.lht-orb { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:linear-gradient(115deg, #9C8BE4, #EC8363); }
.lht-orb svg { width:10px; height:10px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
.lht-disc-tx { display:grid; gap:2px; }
.lht-disc-tx b { font:400 7.5px/1 var(--display); color:#F4F0E8; }
.lht-disc-tx em { justify-self:start; padding:1px 3px; border-radius:4px; font-size:4.5px; font-style:normal; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgb(128, 188, 224); box-shadow:inset 0 0 0 1px rgba(128, 188, 224, .45); }
.lht-dock { display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; }
.lht-dock i { height:14px; border-radius:6px; background:rgba(255,255,255,.06); }
.lht-bt { position:absolute; inset:0; z-index:3; display:grid; justify-items:center; align-content:center; gap:8px; padding:14px 8px; background:linear-gradient(180deg, #17151F, #0C0B11); opacity:0; }
.lht-bt-k { font:400 9px/1.1 var(--display); color:#F4F0E8; }
.lht-bt-nose svg { width:46px; height:32px; }
.lht-bt-nose path { fill:none; stroke:#EAD7AC; stroke-width:1.5; stroke-linejoin:round; }
.lht-bt-nose .edge { stroke:#9C8BE4; stroke-width:3; stroke-linecap:round; }
.lht-meter { display:flex; align-items:center; gap:2px; height:14px; }
.lht-meter i { width:3px; height:4px; border-radius:2px; background:rgb(98, 196, 152); }
.lht-bt-cue { font-size:6px; color:#C3BCD0; }
.lht-result { position:absolute; left:8px; right:8px; bottom:14px; z-index:4; display:grid; justify-items:center; gap:4px; padding:8px 6px; border-radius:10px;
  background:rgba(156,139,228,.16); box-shadow:inset 0 0 0 1px rgba(176,160,238,.6); opacity:0; }
.lht-result b { font:400 10px/1 var(--display); color:#D9D0FF; }
.lht-result em { font-size:6px; font-style:normal; color:#C3BCD0; }
.lht-phone.bt .lht-disc .lht-tap { animation:lhtTap1 8s ease-out infinite; }
.lht-phone.bt .lht-bt { animation:lhtBt 8s ease-in-out infinite; }
.lht-phone.bt .lht-meter i { animation:lhtMeter .9s ease-in-out infinite alternate; }
.lht-phone.bt .lht-meter i:nth-child(2) { animation-delay:.15s; } .lht-phone.bt .lht-meter i:nth-child(3) { animation-delay:.3s; }
.lht-phone.bt .lht-meter i:nth-child(4) { animation-delay:.45s; } .lht-phone.bt .lht-meter i:nth-child(5) { animation-delay:.6s; }
.lht-phone.bt .lht-result { animation:lhtResult 8s ease-out infinite; }
@keyframes lhtBt { 0%, 14% { opacity:0; transform:translateY(8px); } 20%, 86% { opacity:1; transform:none; } 94%, 100% { opacity:0; } }
@keyframes lhtMeter { from { height:3px; opacity:.5; } to { height:13px; opacity:1; } }
@keyframes lhtResult { 0%, 56% { opacity:0; transform:translateY(6px) scale(.97); } 62%, 86% { opacity:1; transform:none; } 94%, 100% { opacity:0; } }
:root[data-theme="light"] .lht-art { background:radial-gradient(90% 70% at 50% 28%, rgba(var(--acc-rgb), .12), transparent 70%), linear-gradient(180deg, #1B1A22, #111017); }
@media (prefers-reduced-motion: reduce) {
  .lht *, .lht *::before { animation:none !important; }
  .s1 .lht-air.l circle:first-child, .s2 .lht-air.l circle:first-child { opacity:.5; }
  .s2 .lht-warm.l, .s3 .lht-warm.l, .s3 .t.l { opacity:1; }
  .lht-phone.dr .lht-drawer { transform:none; } .lht-phone.dr .lht-saved { opacity:1; }
  .lht-phone.bt .lht-result { opacity:1; }
}

/* the backup's quiet line above the first card on a wide screen too (the user, 2026-09-29: on desktop and tablet it sat at
   the bottom — the two-column home had no place for it, so it fell to the grid's end) */
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  .lite-has-chart .stage:has(> .lvt-nudge) { grid-template-rows:auto auto auto; }
  .lite-has-chart .stage:has(> .lvt-nudge) .platearea { grid-row:1 / span 3; }
  .lite-has-chart .stage > .lvt-nudge { grid-column:2; grid-row:2; width:100%; margin:0; }
  .lite-has-chart .stage:has(> .lvt-nudge) .litesum { grid-row:3; }
}
/* the dial holds still beside the cards on a wide screen (the user, 2026-09-29: with the record card open "the entire page
   including the dial is scrolled up and down which is breaking the symmetry. Let just the card column scroll"): it sits at
   the top of its column and stays in view while the cards go by */
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  :root:not([data-demo]).lite-has-chart .stage .platearea { position:sticky; top:calc(var(--lite-head, 72px) - 8px); align-self:start;
    height:calc(100svh - var(--lite-head, 72px) + 8px); margin-top:calc(-1 * var(--lite-headgap, 14px)); margin-bottom:calc(-1 * var(--lite-peek, 48px)); justify-content:center; }
  /* centred between the header's lower edge and the screen's foot, where the drawer's collapsed tab sits (the user, 2026-09-29:
     the dial looked shifted up; "make sure that the dial does not collide with the collapsed drawer"): sized so its lower edge
     always stays 16px above the tab — (8 + 24 + peek − peek) / 2 — whatever the tab's height */
  :root:not([data-demo]).lite-has-chart .stage .dialbox svg,
  :root:not([data-demo]).lite-has-chart .stage .dialbox svg:is(*) {
    width:min(100%, calc(100svh - var(--lite-head, 72px) - 2 * var(--lite-peek, 48px) - 24px), 1000px) !important; }
}
.lrh-mini i:not(.ok) svg { width:12px; height:12px; stroke:var(--ink-2); stroke-width:1.8; opacity:.85; }

/* ==== YOUR SWARA CODE: THE COLOUR KEY, FOLDED (the user, 2026-09-29) ====
   A quiet toggle under the band, on the card's hairline, carrying the three nostril colours; opened, the key below it. */
.lband-fold { display:grid; gap:10px; }
.lite-has-chart .litesum .lh-card .lband-fold { padding-top:10px; border-top:1px solid var(--st-line-soft); }
.lite-has-chart .litesum .lh-card .lband-fold .lband-key, .lite-has-chart .litesum .lh-card .lband-fold .lband-key.slim { margin:0; padding-top:0; border-top:0; }
.lband-foldbtn { justify-self:start; display:inline-flex; align-items:center; gap:8px; padding:4px 2px; border:0; background:none; cursor:pointer;
  font:500 12px/1 var(--body); color:var(--ink-2); -webkit-tap-highlight-color:transparent; transition:color .2s; }
.lband-foldbtn:hover { color:var(--ink); }
.lband-foldbtn:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; border-radius:8px; }
.lband-foldsw { display:inline-flex; gap:3px; }
.lband-foldsw i { width:10px; height:5px; border-radius:3px; }
.lband-foldsw i.n-ida { background:var(--soma); } .lband-foldsw i.n-pingala { background:var(--sindoor); } .lband-foldsw i.n-sushumna { background:var(--brass-hi); }
.lband-foldbtn svg { width:15px; height:15px; fill:none; stroke:var(--dim); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s cubic-bezier(.22,.9,.24,1); }
.lband-fold.open .lband-foldbtn svg { transform:rotate(180deg); }
/* the fold's row: the key's toggle left, the next sunrise right (the user, 2026-09-29) */
.lband-foldrow { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.lband-rise { display:inline-flex; align-items:center; gap:6px; margin-left:auto; font:500 12px/1 var(--body); color:var(--dim); white-space:nowrap; }
.lband-rise svg { width:16px; height:16px; fill:none; stroke:var(--brass-hi); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lband-rise b { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.lband-fold.open.anim .lband-key { animation:lrhIn .28s cubic-bezier(.22,.9,.24,1) both; }
@media (prefers-reduced-motion: reduce) { .lband-foldbtn svg { transition:none; } .lband-fold.open.anim .lband-key { animation:none; } }

/* the guide's phones play the real app (recorded, lite/src/media): a taller picture, a phone the screen's own shape */
.lht-c.ph { grid-template-columns:176px minmax(0, 1fr); }
.lht-c.ph .lht-art { height:356px; }
.lht-phone.rec { width:156px; height:324px; padding:6px; border-radius:28px; }
.lht-phone.rec::before { top:10px; width:34px; height:6px; margin-left:-17px; }
.lht-phone.rec .lht-screen { border-radius:22px; background:#0B0A10; }
.lht-video { display:block; width:100%; height:100%; object-fit:cover; }
/* the mirror test, folded in after step 3 (ui-lite-howto.js lhtMirror): Breath Tap's mirror guide worn in this guide's
   colours — its own styles read Breath Tap's variables, set here from the studio's */
.lht-mir { --bt-gold:var(--acc-rgb); --bt-ink:var(--ink); --bt-ink2:var(--ink-2); --bt-dim:var(--dim);
  --bt-tile:color-mix(in srgb, var(--ink) 3.5%, transparent); --bt-line:var(--st-line-soft); --bt-line2:var(--st-line-soft); }
.lht-mir-art { width:auto; height:100%; max-height:176px; }
.lht-mir-art .f > * { fill:#E8EFF8; opacity:.82; }
.lht-mir-art .l text { font:600 8.6px var(--body); letter-spacing:.05em; fill:#AFBACB; }
.lht-n.ic { background:rgba(var(--acc-rgb), .14); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .55); }
.lht-n.ic svg { width:13px; height:13px; fill:none; stroke:rgb(var(--acc-rgb)); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lht-mir-tg { justify-self:start; display:inline-flex; align-items:center; gap:6px; margin-top:2px; padding:8px 12px 8px 14px; border:0; border-radius:999px; cursor:pointer;
  font:600 12px/1 var(--body); color:rgb(var(--acc-rgb)); background:rgba(var(--acc-rgb), .1); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .35); -webkit-tap-highlight-color:transparent; }
.lht-mir-tg svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s cubic-bezier(.22,.9,.24,1); }
.lht-mir.open .lht-mir-tg svg { transform:rotate(180deg); }
.lht-mir-tg:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lht-mir-more { grid-column:1 / -1; display:grid; gap:12px; padding:2px 0 0; animation:lrhIn .32s cubic-bezier(.22,.9,.24,1) both; }
.lht-mir-more[hidden] { display:none; }
.lht-mir-more > .lht-k { margin:4px 2px -2px; }
/* the drawing keeps the guide's dark picture ground in both themes, as its lines are drawn light */
.lht-mir .btm-fig { background:radial-gradient(90% 70% at 50% 40%, rgba(var(--acc-rgb), .1), transparent 70%), linear-gradient(180deg, #14131B, #0B0A10); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.lht-mir .btm-fig figcaption { color:#C3BCD0; }
@media (prefers-reduced-motion: reduce) { .lht-mir-more { animation:none; } .lht-mir-tg svg { transition:none; } }
@media (max-width:460px) { .lht-c.ph { grid-template-columns:minmax(0, 1fr); } .lht-c.ph .lht-art { height:366px; } }

/* the recorded phone shows the app's own top edge: no drawn notch over it */
.lht-phone.rec::before { display:none; }
/* the wide home centred as one group (the user, 2026-09-29: "the dial looks shifted more right … the contents are not
   perfectly centered"): the dial's column is as wide as the dial itself, not a stretch of empty room round it, so the grid
   (already justify-content:center) centres dial, gap and cards together, with equal margins either side */
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  :root:not([data-demo]).lite-has-chart .stage {
    grid-template-columns:minmax(0, min(calc(100svh - var(--lite-head, 72px) - 2 * var(--lite-peek, 48px) - 24px), 1000px)) minmax(340px, 400px); }
}
/* more room between the dial and the cards, as before (the user, 2026-09-29), growing with the screen — about 60px on a
   tablet, 100 at 1440 wide, 170 at 1855 — and the group still centred */
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  :root:not([data-demo]).lite-has-chart .stage { column-gap:clamp(56px, calc(16vw - 130px), 200px); }
}

/* ==== HOW'S YOUR DAY GOING TO BE (the user, 2026-09-29: the flagship — "world class, premium look and compact and concise
   manner with layman friendly language") ====
   The home cards' own glass with a faint gold light in its corner. Folded: the question, the day's word and figure in the
   day's colour, and the two rings (the cosmic rhythm, your breath). Opened: the day's meter — a half dial from demanding
   (ember) through gold to strong (jade), a white mark at the day's figure — one plain line, the three that make it, and
   the chart's own reasons on hairlines. */
.ldy { --ldy-c:var(--brass-hi); position:relative; display:grid; min-width:0; margin:0; padding:0; overflow:hidden; border-radius:26px;
  background:var(--hs-grain), radial-gradient(120% 90% at 100% 0%, rgba(var(--acc-rgb), .1), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), var(--st-card);
  box-shadow:inset 0 0 0 1px var(--st-line-soft), 0 26px 50px -40px rgba(0,0,0,.9); }
:root[data-theme="light"] .ldy { background:var(--hs-grain), radial-gradient(120% 90% at 100% 0%, rgba(var(--acc-rgb), .08), transparent 62%), #FFFFFF;
  box-shadow:inset 0 0 0 1px var(--st-line-soft), 0 1px 2px rgba(70,52,20,.05), 0 14px 30px -24px rgba(70,52,20,.16); }
/* the six grades, ember to jade (ui-lite-day-engine.js LDY.GRADES) */
.ldy { --gc-ugly:var(--sindoor); --gc-bad:color-mix(in srgb, var(--sindoor) 55%, var(--brass-hi)); --gc-average:#CDBF9E; --gc-good:var(--brass-hi);
  --gc-better:color-mix(in srgb, var(--jade) 55%, var(--brass-hi)); --gc-great:var(--jade); }
:root[data-theme="light"] .ldy { --gc-average:#8A7A55; }
.ldy .g-ugly { --ldy-c:var(--gc-ugly); } .ldy .g-bad { --ldy-c:var(--gc-bad); } .ldy .g-average { --ldy-c:var(--gc-average); }
.ldy .g-good { --ldy-c:var(--gc-good); } .ldy .g-better { --ldy-c:var(--gc-better); } .ldy .g-great { --ldy-c:var(--gc-great); }
.ldy-bar { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:center; gap:12px; width:100%; margin:0; padding:16px 16px 16px 18px;
  border:0; border-radius:inherit; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ldy-bar:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:-3px; }
.ldy-bar-tx { display:grid; gap:4px; min-width:0; }
.ldy-bar-tx b { font:500 18px/1.2 var(--display); letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
.ldy-bar-tx em { display:inline-flex; align-items:center; gap:7px; font:600 12.5px/1.2 var(--body); font-style:normal; color:var(--ldy-c); font-variant-numeric:tabular-nums; }
.ldy-bar-tx em i { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.ldy-rings { display:flex; gap:6px; }
.ldy-mr { position:relative; display:grid; place-items:center; width:38px; height:38px; font-style:normal; }
.ldy-mr svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ldy-mr circle { fill:none; stroke-width:3; }
.ldy-mr .t { stroke:color-mix(in srgb, var(--ink) 10%, transparent); }
.ldy-mr .a { stroke:var(--brass-hi); stroke-linecap:round; }
.ldy-mr .a2 { stroke:#EADFC4; stroke-width:2.2; stroke-linecap:round; opacity:.85; }
:root[data-theme="light"] .ldy-mr .a2 { stroke:#A88E55; }
.ldy-mr.own .a { stroke:var(--jade); }
.ldy-mr.chart .a { stroke:var(--gc-chart); }
/* the birth chart's own colour, apart from the cosmic rhythm's gold and the nostrils' lilac and red */
.ldy { --gc-chart:#E6DCC6; }
:root[data-theme="light"] .ldy { --gc-chart:#6E6452; }
.ldy-mr b { position:relative; font:600 10.5px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.ldy .lrh-chev { flex:0 0 auto; }
.ldy.open .lrh-chev { transform:rotate(180deg); }
.ldy-more { display:grid; gap:14px; padding:0 16px 16px; }
.ldy.anim .ldy-more { animation:lrhIn .34s cubic-bezier(.22,.9,.24,1) both; }
/* the meter */
.ldy-gauge { position:relative; justify-self:center; width:min(100%, 300px); }
.ldy-gauge svg { display:block; width:100%; height:auto; overflow:visible; }
/* six equal steps: each in its grade's colour, quiet; the day's step lit, its word in ink */
.ldy-gauge .sg { fill:none; stroke-width:9; stroke-linecap:butt; opacity:.2; }
.ldy-gauge .sg.on { opacity:1; stroke-width:11; filter:drop-shadow(0 0 7px var(--ldy-c)); }
.ldy-gauge .s-ugly { stroke:var(--gc-ugly); } .ldy-gauge .s-bad { stroke:var(--gc-bad); } .ldy-gauge .s-average { stroke:var(--gc-average); }
.ldy-gauge .s-good { stroke:var(--gc-good); } .ldy-gauge .s-better { stroke:var(--gc-better); } .ldy-gauge .s-great { stroke:var(--gc-great); }
.ldy-gauge .sw { font:500 8.2px/1 var(--body); letter-spacing:.02em; fill:var(--dim); }
.ldy-gauge .sw.on { font-weight:700; fill:var(--ldy-c); }
.ldy-gauge .halo { fill:var(--ldy-c); opacity:.28; }
.ldy-gauge .mk { fill:#FFFFFF; stroke:var(--ldy-c); stroke-width:2.5; filter:drop-shadow(0 0 6px var(--ldy-c)); }
.ldy-read { position:absolute; left:0; right:0; bottom:2px; display:grid; justify-items:center; gap:4px; }
.ldy-read b { font:300 44px/1 var(--display); letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.ldy-read span { font:600 13px/1 var(--body); letter-spacing:.02em; color:var(--ldy-c); }
.ldy-gloss { margin:-4px 0 0; font:400 13.5px/1.45 var(--body); color:var(--ink-2); text-align:center; text-wrap:balance; }
/* the three that make it */
.ldy-ps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; container-type:inline-size; }
.ldy-p { display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:auto auto 1fr; justify-items:center; align-content:stretch; gap:7px; min-width:0; margin:0; padding:12px 6px 10px; border:0; border-radius:18px; text-align:center;
  color:inherit; font:inherit; background:color-mix(in srgb, var(--ink) 3.5%, transparent); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
button.ldy-p { cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s; }
button.ldy-p:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); }
button.ldy-p:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.ldy-p .ldy-mr { width:54px; height:54px; }
.ldy-p .ldy-mr b { font-size:14px; font-weight:500; }
.ldy-p.none .ldy-mr b, .ldy-mr.none b { color:var(--dim); }
/* while the checks are read: a dotted track holds the ring's place (no motion — infinite animation slows Lite) */
.ldy-mr.wait .t { stroke-dasharray:1.5 4.2; stroke-linecap:round; stroke:color-mix(in srgb, var(--ink) 22%, transparent); }
.ldy-p-tx { display:grid; gap:3px; min-width:0; max-width:100%; }
.ldy-p-tx b { font:600 12px/1.2 var(--body); color:var(--ink); overflow-wrap:anywhere; text-wrap:balance; }
.ldy-p-tx em { font:400 10.5px/1.3 var(--body); font-style:normal; color:var(--dim); text-wrap:balance; overflow-wrap:anywhere; }
/* where a part stands against its own usual day */
.ldy-tag { align-self:end; max-width:100%; margin-top:1px; padding:3px 7px; border-radius:999px; text-decoration:none; font:600 9.6px/1.15 var(--body); letter-spacing:.02em; white-space:normal; text-align:center;
  color:var(--dim); background:color-mix(in srgb, var(--ink) 7%, transparent); }
.ldy-tag.t-up { color:var(--jade); background:color-mix(in srgb, var(--jade) 14%, transparent); }
.ldy-tag.t-down { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 13%, transparent); }
/* why the day has this grade: the rule that set it, or how the parts stand */
.ldy-rule { display:flex; align-items:flex-start; justify-content:center; gap:7px; margin:-6px auto 0; max-width:34em; font:500 11.5px/1.4 var(--body); color:var(--ink-2); text-align:left; text-wrap:pretty; }
.ldy-rule svg { flex:0 0 auto; width:14px; height:14px; margin-top:1px; fill:none; stroke:var(--ldy-c); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ldy-rule.held span { color:var(--ink); }
/* the chart's reasons */
.ldy-why { display:grid; gap:6px; }
.ldy-k { font:600 10px/1.2 var(--body); letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--acc-rgb), .95); }
.ldy-why ul { display:grid; margin:0; padding:0; list-style:none; }
.ldy-why li { display:grid; grid-template-columns:8px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--st-line-soft); }
.ldy-why li:first-child { border-top:0; }
.ldy-why li i { width:7px; height:7px; border-radius:50%; background:var(--dim); }
.ldy-why li.up i { background:var(--jade); } .ldy-why li.down i { background:var(--sindoor); }
.ldy-why li span { display:grid; gap:2px; min-width:0; }
.ldy-why li b { font:500 12.5px/1.25 var(--body); color:var(--ink); }
.ldy-why li em { font:400 11px/1.3 var(--body); font-style:normal; color:var(--dim); text-wrap:pretty; }
.ldy-why li u { text-decoration:none; font:600 10.5px/1 var(--body); letter-spacing:.04em; color:var(--dim); }
.ldy-why li.up u { color:var(--jade); } .ldy-why li.down u { color:var(--sindoor); }
.ldy-foot { margin:0; font:400 11px/1.4 var(--body); color:var(--dim); text-wrap:pretty; }
/* the weights: one bar in the ring cards' order and colours, each part as wide as its weight, its name under it */
.ldy-wts { display:grid; gap:8px; }
.ldy-wbar { display:grid; gap:0 3px; }
.ldy-wbar .w { display:grid; gap:6px; min-width:0; }
.ldy-wbar .w i { height:6px; border-radius:3px; background:var(--wc); }
.ldy-wbar .w em { font:500 10.5px/1.25 var(--body); font-style:normal; color:var(--ink-2); text-wrap:balance; }
/* narrow phones (360 px and under): the three panels tighten, and the rings with them */
@container (max-width:285px) {
  .ldy-p { gap:6px; padding:10px 4px 9px; }
  .ldy-p .ldy-mr { width:46px; height:46px; }
  .ldy-p .ldy-mr b { font-size:13px; }
  .ldy-p-tx b { font-size:11px; }
  .ldy-p-tx em { font-size:9.8px; }
  .ldy-tag { font-size:8.8px; padding:3px 5px; letter-spacing:0; }
}
.ldy-wbar .w b { font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.ldy-wbar .cosmic { --wc:var(--brass-hi); } .ldy-wbar .own { --wc:var(--jade); } .ldy-wbar .chart { --wc:var(--gc-chart); }
.ldy-wnote { margin:0; font:400 10.5px/1.3 var(--body); color:var(--dim); }
@media (min-width:760px) { .ldy-bar { padding:20px 20px 20px 22px; } .ldy-more { padding:0 20px 20px; } }
@media (max-width:360px) { .ldy-rings { gap:4px; } .ldy-mr { width:34px; height:34px; } .ldy-p .ldy-mr { width:48px; height:48px; } .ldy-bar { gap:9px; } }
@media (prefers-reduced-motion: reduce) { .ldy.anim .ldy-more { animation:none; } }

/* =====================================================================================================================
   THE SWIPE HOME, THE DOCK AND SWARA TOKENS (the user, 2026-10-01)
   ui-lite-swipe.js (.lhs-*) · the drawer's dock in shell.html (.lhd-*) · ui-lite-tokens.js (.ltk-*, .lgi-*)
   One dial and seven pages under it; the drawer's five ways on, always in view; tokens in the app's own brass.
   Every colour is a token below, redefined for the day theme, so both themes resolve as one set.
   ===================================================================================================================== */
:root {
  --lhs-tt:227, 211, 176; --lhs-today:98, 193, 158; --lhs-now:240, 213, 126; --lhs-ka:244, 170, 88; --lhs-gh:238, 136, 162;
  --lhs-jy:150, 162, 246; --lhs-sk:88, 204, 210; --lhs-dx:236, 132, 110; --lhs-cx:180, 139, 224; --lhs-sv:56, 216, 196;
  --lhs-card:rgba(255,255,255,.035); --lhs-card-2:rgba(255,255,255,.055); --lhs-line:rgba(255,255,255,.075); --lhs-line-2:rgba(255,255,255,.13);
  --lhs-well:rgba(255,255,255,.05); --lhs-rail:rgba(10,10,15,.78); --lhs-rail-solid:rgb(12,12,17); --lhs-gold:#F2D98A; --lhs-gold-rgb:242, 217, 138;
  --ltk-up:#7FD6AE; --ltk-down:#F2B36B; --lhs-ida:#A093DB; --lhs-pingala:#EC7760; --lhs-good:#62C19E; --lhs-ok:#E2C46C; --lhs-hard:#EC7760;
}
:root[data-theme="light"] {
  --lhs-tt:128, 102, 52; --lhs-today:36, 116, 86; --lhs-now:150, 110, 18; --lhs-ka:170, 92, 14; --lhs-gh:176, 56, 94;
  --lhs-jy:70, 82, 182; --lhs-sk:18, 118, 126; --lhs-dx:178, 72, 46; --lhs-cx:118, 74, 168; --lhs-sv:10, 124, 111;
  --lhs-card:#FFFFFF; --lhs-card-2:#FFFFFF; --lhs-line:rgba(40,30,60,.09); --lhs-line-2:rgba(40,30,60,.16);
  --lhs-well:rgba(40,30,60,.045); --lhs-rail:rgba(246,242,234,.86); --lhs-rail-solid:rgb(246,242,234); --lhs-gold:#8A6A12; --lhs-gold-rgb:150, 110, 18;
  --ltk-up:#24805A; --ltk-down:#B0601A; --lhs-ida:#6A59B0; --lhs-pingala:#C4472E; --lhs-good:#2E8F69; --lhs-ok:#A88418; --lhs-hard:#C4472E;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --lhs-tt:128, 102, 52; --lhs-today:36, 116, 86; --lhs-now:150, 110, 18; --lhs-ka:170, 92, 14; --lhs-gh:176, 56, 94;
    --lhs-jy:70, 82, 182; --lhs-sk:18, 118, 126; --lhs-dx:178, 72, 46; --lhs-cx:118, 74, 168; --lhs-sv:10, 124, 111;
    --lhs-card:#FFFFFF; --lhs-card-2:#FFFFFF; --lhs-line:rgba(40,30,60,.09); --lhs-line-2:rgba(40,30,60,.16);
    --lhs-well:rgba(40,30,60,.045); --lhs-rail:rgba(246,242,234,.86); --lhs-rail-solid:rgb(246,242,234); --lhs-gold:#8A6A12; --lhs-gold-rgb:150, 110, 18;
    --ltk-up:#24805A; --ltk-down:#B0601A; --lhs-ida:#6A59B0; --lhs-pingala:#C4472E; --lhs-good:#2E8F69; --lhs-ok:#A88418; --lhs-hard:#C4472E;
  }
}

/* ---- the classic home under the layer: kept, out of sight --------------------------------------------------------- */
html.lhs-on.lite-has-chart .wholine { display:none !important; }
html.lhs-on #lite-summary > [data-part="rest"] { display:none !important; }
/* where the sun does not rise today, the home has no Now card: the card that says so stands on Now instead */
html.lhs-on #lite-summary > [data-part="rest"]:has(> .lpattern-none) { display:contents !important; }
html.lhs-on.lite-has-chart #lite-summary { width:100%; max-width:none; margin:0 !important; padding:0 !important; }
html.lhs-on.lite-has-chart .lhs-page .lvt-nudge { margin:0 0 12px; width:100%; }

/* ---- the dial: each page's parts lit, the rest at a sixth; the clock's marks and hands always lit --------------------- */
html.lhs-on #plate [data-lhs] { transition:opacity .45s cubic-bezier(.22,.9,.24,1), filter .45s cubic-bezier(.22,.9,.24,1); }
html.lhs-on #plate [data-lhs-dim] { opacity:.16 !important; filter:saturate(.25); }
:root[data-theme="light"].lhs-on #plate [data-lhs-dim] { opacity:.2 !important; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]).lhs-on #plate [data-lhs-dim] { opacity:.2 !important; } }
@media (prefers-reduced-motion: reduce) { html.lhs-on #plate [data-lhs] { transition:none; } }

/* the dial on a phone or tablet: the whole of it, with the Now card in the first screen */
@media (max-width:979px), (max-aspect-ratio:5/4) {
  html.lhs-on.lite-has-chart .dialbox svg,
  html.lhs-on.lite-has-chart .dialbox svg:is(*) {
    width:clamp(min(100%, 260px, calc(100svh - var(--lite-head, 72px) - var(--lite-peek, 104px) - 16px)), calc(100svh - var(--lite-head, 72px) - var(--lite-peek, 104px) - 214px), min(100%, 620px)) !important;
  }
  html.lhs-on.lite-has-chart .stage { padding-bottom:0; }
}

/* ---- the rail: the seven pages by name, the one on show centred, as a camera's modes --------------------------------- */
.lhs-rail, .lhs-pager { display:none; }
html.lhs-on.lite-has-chart .lhs-rail {
  display:block; position:sticky; top:var(--lhs-top, 0px); z-index:40; width:100%; margin:6px 0 0;
  background:linear-gradient(180deg, var(--lhs-rail), color-mix(in srgb, var(--lhs-rail) 70%, transparent));
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
}
/* ON A TOUCH SCREEN, NO BLUR UNDER THE RAIL (2026-10-23, the user: "the scrolled shiva outline card sometimes get locked at the swipe pages
   tab rail and remains stuck their while all page normally scrolls"; and the hang after quick flings): a blurred glass that stays put while
   the page moves under it is drawn afresh every frame of a scroll, and a phone's browser can keep showing an old picture of what passed
   under it — Shiva's card, held at the rail. The rail is its own ground there, nearly opaque, its foot fading as before */
@media (hover:none) and (pointer:coarse) {
  html.lhs-on.lite-has-chart .lhs-rail { -webkit-backdrop-filter:none; backdrop-filter:none;
    background:linear-gradient(180deg, var(--lhs-rail-solid), color-mix(in srgb, var(--lhs-rail-solid) 90%, transparent)); }
}
.lhs-rail-in { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; padding:0 calc(50% - 46px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image:linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.lhs-rail-in::-webkit-scrollbar { display:none; }
.lhs-rail button { flex:0 0 auto; position:relative; height:42px; padding:0 12px; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font:600 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; color:color-mix(in srgb, var(--ink) 40%, transparent); transition:color .25s; }
.lhs-rail button:hover { color:color-mix(in srgb, var(--ink) 70%, transparent); }
.lhs-rail button[aria-current="page"] { color:rgb(var(--pa)); }
.lhs-rail button[aria-current="page"]::after { content:""; position:absolute; left:50%; bottom:5px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%;
  background:currentColor; box-shadow:0 0 10px currentColor; }
.lhs-rail button:focus-visible { outline:2px solid rgb(var(--pa)); outline-offset:-6px; border-radius:12px; }
.lhs-rail [data-k="tt"], .lhs-page[data-page="tt"] { --pa:var(--lhs-tt); }
.lhs-rail [data-k="today"], .lhs-page[data-page="today"] { --pa:var(--lhs-today); }
.lhs-rail [data-k="now"], .lhs-page[data-page="now"] { --pa:var(--lhs-now); }
.lhs-rail [data-k="sv"], .lhs-page[data-page="sv"] { --pa:var(--lhs-sv); }
.lhs-rail [data-k="ka"], .lhs-page[data-page="ka"] { --pa:var(--lhs-ka); }
.lhs-rail [data-k="gh"], .lhs-page[data-page="gh"] { --pa:var(--lhs-gh); }
.lhs-rail [data-k="jy"], .lhs-page[data-page="jy"] { --pa:var(--lhs-jy); }
.lhs-rail [data-k="sk"], .lhs-page[data-page="sk"] { --pa:var(--lhs-sk); }

/* ---- the pager: one page wide, swiped sideways; as tall as the page on show ----------------------------------------- */
html.lhs-on.lite-has-chart .lhs-pager {
  display:flex; align-items:flex-start; width:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; transition:height .32s cubic-bezier(.22,.9,.24,1);
}
.lhs-pager::-webkit-scrollbar { display:none; }
.lhs-pager.lhs-dragging { scroll-snap-type:none; cursor:grabbing; -webkit-user-select:none; user-select:none; }
.lhs-page { flex:0 0 100%; width:100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always; }
/* SPEED (2026-10-20): a swipe page out of view is neither styled nor laid out until it comes into view (the pager's height is the shown
   page's, set in code: lhsHeight); its last size kept meanwhile */
html.lhs-on .lhs-page { content-visibility:auto; contain-intrinsic-block-size:auto 900px; }
/* one column that never grows past the page: a child's unbreakable row (Panchang's month bar, 2026-10-12) had widened the
   track by up to 82px and spilled the page into Now's */
/* the app never zooms out: something a moment too wide (the Panchang page, 2026-10-12) made a phone shrink the whole page to fit,
   the Ribbon left small and low "without any effect". With minimum-scale=1 in the viewport tag (lite/src/shell.html) */
html.lite-app, html.lite-app body { overflow-x:clip; }
/* the menu card scrolls on a short screen, its bar hidden (the user, 2026-10-12: full-screen on a large screen showed it) */
.lrb-card::-webkit-scrollbar { display:none; }
.lhs-in { box-sizing:border-box; display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; width:100%; max-width:560px; margin:0 auto; padding:14px 16px 26px; color:var(--ink); }
.lhs-page[data-page="now"] .lhs-in { display:block; padding-top:12px; }
@media (prefers-reduced-motion: reduce) { html.lhs-on.lite-has-chart .lhs-pager { transition:none; } }

/* ---- NOW, open on the page (the user, 2026-10-01: "design the home page Now by keeping the shiva outline and flowing
   nostril animation and redesigned text section with no bg card as on other swipe screen. Keep the color theme as on the
   dial"). The home's own card (ldSwaraHero, ui-lite-nowcard.js) with its glass and its smoke put away: Shiva's face, its aura
   and the breath leaving the open nostril stay; the words stand on the page in the dial's brass, the nostril in its own
   colour as the dial's swara ring draws it. Only on the swipe home: the classic card is untouched. ---- */
html.lhs-on .lhs-page #lite-summary .lnow {
  background:none !important; box-shadow:none !important; border:0 !important; border-radius:0; overflow:visible;
  grid-template-columns:auto minmax(0, auto); justify-content:center; column-gap:clamp(28px, 8vw, 54px); padding:8px 6px 6px 2px; }   /* 2px to the left: Shiva's drawing stands 3px inside its box, the longest line fills its own, so the ink is centred on the dial's line */
/* a little more air between Shiva and the words (the user, 2026-10-23: "Give slightly more separation between the shiva outline and its
   right-side text section and then align everything centered with respect to the upper dial"): the pair stays centred as one under the
   dial's centre line, the gap widening with the screen */
html.lhs-on .lhs-page #lite-summary .lnow::after, html.lhs-on .lhs-page #lite-summary .lnow .lnow-smoke { display:none !important; }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-shiva { width:clamp(96px, 27vw, 124px); }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-shiva::before { inset:10% -22% 36%; }     /* with the drawing, 28 units lower in its box */
html.lhs-on .lhs-page #lite-summary .lnow .lnow-tx { gap:8px; }
html.lhs-on .lhs-page #lite-summary .lnow .lcalm-k { font:600 10px/1.2 var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--brass-hi); }
html.lhs-on .lhs-page #lite-summary .lnow .lcalm-nadi { font-size:clamp(31px, 8.6vw, 42px); line-height:1.02; }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-until { margin-top:2px; font:500 14px/1.2 var(--body); color:var(--ink-2); }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-until svg { stroke:var(--brass-hi); }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-until b { font-size:15px; color:var(--ink); }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-el { font:500 12.5px/1.3 var(--body); color:var(--ink-2); }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-el .lel-s { width:9px; height:9px; box-shadow:0 0 8px currentColor; }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-acts { margin:10px 0 0; padding-top:14px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--brass-hi) 55%, transparent), color-mix(in srgb, var(--brass-hi) 6%, transparent) 80%, transparent) top left / 100% 1px no-repeat; }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-cta { padding:10px 15px 10px 17px; font:600 13px/1 var(--body); color:var(--brass-hi);
  background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 58%, transparent); }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-cta svg { stroke:currentColor; }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-cta:hover { filter:none; background:color-mix(in srgb, var(--brass-hi) 11%, transparent); }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-how { color:var(--ink-2); }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-how svg { stroke:var(--brass-hi); }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-cta:focus-visible, html.lhs-on .lhs-page #lite-summary .lnow .lnow-how:focus-visible { outline-color:var(--brass-hi); }
@media (max-width:359px) { html.lhs-on .lhs-page #lite-summary .lnow { column-gap:22px; } }
/* SHIVA AND THE WORDS, NEVER MEETING (the user, 2026-10-23: "On narrow screen, the shiva outline is colliding with the right text section of
   its own card. there should be perfect symmetry"): Shiva's width is read from the card's own width (30%, between 74px and 124px), not the
   screen's — a card narrower than the screen (a larger text size, a display zoom) no longer leaves the face too wide for its side; the
   pair stays centred with equal margins, the gap never under 16px */
html.lhs-on .lhs-page #lite-summary .lnow { container-type:inline-size; }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-shiva { width:clamp(74px, 30cqi, 124px); }

/* ---- the wide screen: the dial holds the left, the rail and the pages the right ------------------------------------- */
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  html.lhs-on.lite-has-chart .stage { grid-template-rows:auto minmax(0, 1fr); align-content:start; }
  html.lhs-on.lite-has-chart .lhs-rail { grid-column:2; grid-row:1; align-self:start; margin:0; border-radius:0 0 16px 16px; }
  html.lhs-on.lite-has-chart .lhs-pager { grid-column:2; grid-row:2; align-self:start; }
  html.lhs-on.lite-has-chart .lhs-in { padding:16px 2px 30px; }
}

/* ---- the words and the shapes every page shares ---------------------------------------------------------------------- */
.lhs-eb { font:600 10px/1.2 var(--body); letter-spacing:.18em; text-transform:uppercase; color:rgb(var(--pa, var(--lhs-now))); }
.lhs-meta { font:500 12px/1.35 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lhs-say { margin:0; font:400 14px/1.5 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lhs-h { margin:0; font:500 22px/1.2 var(--display); letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
.lhs-wait { margin:0; padding:22px 4px; font:400 14px/1.5 var(--body); color:var(--ink-2); text-align:center; }
.lhs-sechd { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.lhs-sec { display:grid; gap:10px; }
.lhs-card { display:grid; gap:10px; padding:14px 16px; border-radius:20px; background:var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.lhs-foot { margin:2px 0 0; font:400 11px/1.45 var(--body); color:var(--dim); text-align:center; }
.lhs-acts { display:flex; flex-wrap:wrap; align-items:center; gap:8px 6px; padding-top:2px; }
.lhs-act { display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 18px 0 20px; border:0; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font:600 14px/1 var(--body); color:rgb(var(--pa)); background:rgba(var(--pa), .12); box-shadow:inset 0 0 0 1px rgba(var(--pa), .45); transition:background .2s, transform .15s; }
.lhs-act:hover { background:rgba(var(--pa), .2); }
.lhs-act:active { transform:scale(.97); }
.lhs-act svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.lhs-link { display:inline-flex; align-items:center; gap:4px; height:44px; padding:0 12px; border:0; border-radius:999px; background:none; cursor:pointer; font:600 13.5px/1 var(--body); color:var(--ink-2); }
.lhs-link svg { flex:0 0 auto; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.lhs-link:hover svg { transform:translateX(2px); }
.lhs-link:hover { color:var(--ink); background:var(--lhs-well); }
.lhs-act:focus-visible, .lhs-link:focus-visible, .lhs-tile:focus-visible, .lhs-pick:focus-visible, .lhs-mt:focus-visible, .lhs-fig:focus-visible, .lhs-check:focus-visible, .lhs-i:focus-visible {
  outline:2px solid rgb(var(--pa, var(--lhs-now))); outline-offset:2px; }
.lhs-pick { display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:2px 0; border:0; background:none; cursor:pointer; text-align:left;
  font:500 19px/1.2 var(--display); color:var(--ink); }
.lhs-pick svg { flex:0 0 auto; width:18px; height:18px; fill:none; stroke:var(--dim); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lhs-bar { display:block; height:5px; border-radius:3px; overflow:hidden; background:var(--lhs-line); }
.lhs-bar i { display:block; height:100%; border-radius:3px; background:rgb(var(--pa, var(--lhs-now))); }
.lhs-legend { display:flex; flex-wrap:wrap; gap:4px 14px; font:500 11px/1.2 var(--body); color:var(--dim); }
.lhs-legend span { display:inline-flex; align-items:center; gap:6px; }
.lhs-legend i { width:14px; height:6px; border-radius:3px; }
.lhs-legend i.good { background:var(--lhs-good); } .lhs-legend i.ok { background:var(--lhs-ok); } .lhs-legend i.hard { background:var(--lhs-hard); }
.lhs-legend i.soft { background:color-mix(in srgb, var(--lhs-ok) 40%, transparent); }

/* a day strip, sunrise to sunrise, and a lifetime strip: the part to come dimmed, a pin at now */
.lhs-strip, .lhs-life { position:relative; padding-top:6px; }
.lhs-strip-t, .lhs-life-t { position:relative; height:14px; border-radius:7px; overflow:hidden; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-strip-t i, .lhs-life-t i { position:absolute; top:0; bottom:0; }
.lhs-strip-t i.good, .lhs-life-t i.good { background:var(--lhs-good); }
.lhs-strip-t i.ok { background:var(--lhs-ok); }
.lhs-life-t i.good { opacity:.55; } .lhs-life-t i.good.deliv { opacity:1; }
.lhs-life-t i.hard { background:var(--lhs-hard); opacity:.4; } .lhs-life-t i.hard.deliv { opacity:.95; }
.lhs-life-t i.soft { background:var(--lhs-ok); opacity:.22; } .lhs-life-t i.none { display:none; }
.lhs-strip-f { position:absolute; top:0; bottom:0; right:0; background:color-mix(in srgb, var(--ground) 52%, transparent); }
.lhs-pin { position:absolute; top:1px; bottom:15px; width:0; pointer-events:none; }
.lhs-pin::before { content:""; position:absolute; left:-1.5px; top:0; bottom:0; width:3px; border-radius:2px; background:var(--ink);
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--ground) 80%, transparent), 0 0 10px color-mix(in srgb, var(--ink) 55%, transparent); }
.lhs-strip-ax { position:relative; display:flex; justify-content:space-between; margin-top:7px; font:500 10.5px/1 var(--mono); color:var(--dim); font-variant-numeric:tabular-nums; }
.lhs-strip-ax .mid { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }

/* ---- TODAY ------------------------------------------------------------------------------------------------------------- */
.lhs-hd { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.lhs-title { margin:0; font:500 28px/1.05 var(--display); letter-spacing:-.015em; color:var(--ink); }
.lhs-sub { margin:5px 0 0; font:500 12px/1.4 var(--body); color:var(--ink-2); }
.lhs-live { display:inline-flex; align-items:center; gap:7px; margin-top:4px; padding:6px 11px; border-radius:999px; font:600 12.5px/1 var(--mono);
  color:var(--ink); background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); font-variant-numeric:tabular-nums; }
.lhs-live i { width:7px; height:7px; border-radius:50%; background:var(--lhs-good); box-shadow:0 0 0 3px color-mix(in srgb, var(--lhs-good) 25%, transparent); }

.lhs-day { --g:169, 200, 115; position:relative; display:grid; gap:12px; padding:18px 18px 16px; border-radius:24px; overflow:hidden;
  background:radial-gradient(130% 110% at 0% 0%, rgba(var(--g), .2), transparent 58%), var(--lhs-card);
  box-shadow:inset 0 0 0 1px rgba(var(--g), .32), 0 24px 50px -34px rgba(0,0,0,.9); }
.lhs-day.g-ugly { --g:181, 71, 58; } .lhs-day.g-bad { --g:217, 116, 79; } .lhs-day.g-average { --g:201, 174, 106; }
.lhs-day.g-good { --g:169, 200, 115; } .lhs-day.g-better { --g:108, 197, 154; } .lhs-day.g-great { --g:63, 179, 166; }
.lhs-day-top { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.lhs-day-top > div { display:grid; gap:6px; min-width:0; }
.lhs-day-w { font:500 26px/1.05 var(--display); letter-spacing:-.015em; color:var(--ink); }
.lhs-day-n { font:600 40px/.9 var(--mono); letter-spacing:-.03em; color:rgb(var(--g)); font-variant-numeric:tabular-nums; }
.lhs-steps { position:relative; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:3px; height:8px; }
.lhs-steps i { border-radius:4px; opacity:.28; }
.lhs-steps i.on { opacity:1; }
.lhs-steps i.s-ugly { background:#B5473A; } .lhs-steps i.s-bad { background:#D9744F; } .lhs-steps i.s-average { background:#C9AE6A; }
.lhs-steps i.s-good { background:#A9C873; } .lhs-steps i.s-better { background:#6CC59A; } .lhs-steps i.s-great { background:#3FB3A6; }
.lhs-steps b { position:absolute; top:-4px; width:4px; height:16px; margin-left:-2px; border-radius:2px; background:var(--ink);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ground) 80%, transparent); }
.lhs-day-say { margin:0; font:400 13.5px/1.5 var(--body); color:var(--ink-2); }
.lhs-figs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.lhs-fig { display:grid; justify-items:start; align-content:start; gap:3px; min-width:0; padding:10px 11px; border:0; border-radius:14px; text-align:left;
  background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); color:var(--ink); }
button.lhs-fig { cursor:pointer; }
button.lhs-fig:hover { box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
.lhs-fig-v { font:600 19px/1 var(--mono); font-variant-numeric:tabular-nums; }
.lhs-fig-k { font:500 11px/1.25 var(--body); color:var(--ink-2); }
.lhs-fig em { font:500 10.5px/1.2 var(--body); font-style:normal; color:var(--dim); }
.lhs-fig em.t-up { color:var(--ltk-up); } .lhs-fig em.t-down { color:var(--ltk-down); }

.lhs-band .lband { padding-top:20px; }
.lhs-key { display:inline-flex; align-items:center; gap:5px; margin-left:auto; font:500 11px/1 var(--body); color:var(--dim); }
.lhs-key i { width:12px; height:6px; border-radius:3px; margin-left:6px; }
.lhs-key i.n-ida { background:var(--soma); } .lhs-key i.n-pingala { background:var(--sindoor); } .lhs-key i.n-sushumna { background:var(--brass-hi); }
.lhs-i { display:grid; place-items:center; width:30px; height:30px; margin:-4px 0; border:0; border-radius:50%; background:none; cursor:pointer; color:var(--dim); }
.lhs-i svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.lhs-i:hover { color:var(--ink); background:var(--lhs-well); }

.lhs-check { display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:10px 14px; border:0; border-radius:18px; cursor:pointer; text-align:left; color:var(--ink);
  background:linear-gradient(100deg, rgba(var(--lhs-gold-rgb), .1), rgba(var(--lhs-gold-rgb), .03)); box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .3); }
.lhs-check > span:first-of-type { flex:1 1 auto; display:grid; gap:3px; min-width:0; }
.lhs-check b { font:600 14.5px/1.2 var(--body); font-variant-numeric:tabular-nums; }
.lhs-check em { font:500 12px/1.3 var(--body); font-style:normal; color:var(--ink-2); }
.lhs-dot { flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--lhs-gold); box-shadow:0 0 0 4px rgba(var(--lhs-gold-rgb), .18); }
.lhs-check.now .lhs-dot { background:var(--lhs-good); box-shadow:0 0 0 4px color-mix(in srgb, var(--lhs-good) 25%, transparent), 0 0 14px var(--lhs-good); }
.lhs-earn { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; color:var(--lhs-gold); white-space:nowrap; }
.lhs-earn i { font:500 11.5px/1 var(--body); font-style:normal; color:var(--ink-2); }
.lhs-earn b { font:600 14px/1 var(--mono); }

.lhs-tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.lhs-tile { --ta:var(--lhs-now); display:grid; align-content:start; gap:6px; min-width:0; min-height:104px; padding:13px 14px; border:0; border-radius:18px; cursor:pointer; text-align:left;
  color:var(--ink); background:radial-gradient(120% 100% at 100% 0%, rgba(var(--ta), .12), transparent 62%), var(--lhs-card);
  box-shadow:inset 0 0 0 1px var(--lhs-line); transition:box-shadow .2s, transform .15s; -webkit-tap-highlight-color:transparent; }
.lhs-tile:hover { box-shadow:inset 0 0 0 1px rgba(var(--ta), .45); }
.lhs-tile:active { transform:scale(.98); }
.lhs-tile .lhs-eb { color:rgb(var(--ta)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lhs-tile-b { font:500 20px/1.15 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lhs-tile-b em { font:500 12px/1 var(--body); font-style:normal; color:var(--ink-2); letter-spacing:0; }
.lhs-tile-s { font:400 12px/1.35 var(--body); color:var(--ink-2); }
.lhs-tile.ka { --ta:var(--lhs-ka); } .lhs-tile.gh { --ta:var(--lhs-gh); } .lhs-tile.dx { --ta:var(--lhs-dx); }
.lhs-tile.cx { --ta:var(--lhs-cx); } .lhs-tile.jy { --ta:var(--lhs-jy); } .lhs-tile.rec { --ta:var(--lhs-gold-rgb); }
@media (max-width:339px) { .lhs-tiles, .lhs-figs { grid-template-columns:minmax(0, 1fr); } }

/* ---- KAARYA ------------------------------------------------------------------------------------------------------------ */
.lhs-lead { display:flex; align-items:center; gap:14px; min-width:0; }
.lhs-lead-tx { display:grid; gap:2px; min-width:0; }
.lhs-verdict { font:500 15px/1.2 var(--body); }
.lhs-ring { --rs:56px; position:relative; flex:0 0 auto; display:grid; place-items:center; width:var(--rs); height:var(--rs); }
.lhs-ring svg { position:absolute; inset:0; width:100%; height:100%; }
.lhs-ring .bg { fill:none; stroke:var(--lhs-line); stroke-width:4; }
.lhs-ring .fg { fill:none; stroke:var(--tone); stroke-width:4; stroke-linecap:round; }
.lhs-ring b { position:relative; font:600 18px/1 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.lhs-chks { display:flex; flex-wrap:wrap; gap:6px; }
.lhs-chk { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 11px; border-radius:999px; font:600 12px/1 var(--body);
  color:var(--ink-2); background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-chk svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.lhs-chk.ok { color:var(--lhs-good); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 45%, transparent); }
.lhs-chk.no { color:var(--lhs-hard); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-hard) 45%, transparent); }

/* ---- GHATANA ----------------------------------------------------------------------------------------------------------- */
.lhs-mts { display:flex; flex-wrap:wrap; gap:6px; }
.lhs-mt { height:34px; padding:0 13px; border:0; border-radius:999px; cursor:pointer; font:500 12.5px/1 var(--body); color:var(--ink);
  background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
.lhs-mt.on { color:rgb(var(--pa)); background:rgba(var(--pa), .12); box-shadow:inset 0 0 0 1.5px rgba(var(--pa), .6); }
.lhs-mt.more { color:var(--ink-2); }
.lhs-card.g-good { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 40%, transparent); }
.lhs-card.g-hard { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-hard) 40%, transparent); }
.lhs-tier { flex:0 0 auto; padding:5px 10px; border-radius:999px; font:600 11px/1 var(--body); color:var(--ink-2); background:var(--lhs-well); }
.lhs-tier.good { color:var(--lhs-good); background:color-mix(in srgb, var(--lhs-good) 14%, transparent); }
.lhs-tier.hard { color:var(--lhs-hard); background:color-mix(in srgb, var(--lhs-hard) 14%, transparent); }
.lhs-tier.soft { color:var(--lhs-ok); background:color-mix(in srgb, var(--lhs-ok) 14%, transparent); }

/* ---- JYOTISH ----------------------------------------------------------------------------------------------------------- */
.lhs-pls { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.lhs-pl { display:grid; gap:4px; min-width:0; padding:12px; border-radius:16px; background:var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-pl b { font:500 16px/1.2 var(--display); color:var(--ink); }
.lhs-pl .deva { display:block; margin-top:2px; font:400 13px/1.2 var(--deva); color:var(--ink-2); }
.lhs-pl em { font:400 11px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lhs-prow { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:12px; }
.lhs-prow + .lhs-prow { padding-top:10px; border-top:1px solid var(--lhs-line); }
.lhs-badge { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; font:400 17px/1 var(--deva); color:var(--g);
  background:color-mix(in srgb, var(--g) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--g) 45%, transparent); }
.lhs-prow > div { display:grid; gap:7px; min-width:0; }
.lhs-prow-t { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.lhs-prow-t b { font:600 13.5px/1.25 var(--body); color:var(--ink); }
.lhs-prow-t em { font:500 11.5px/1.2 var(--mono); font-style:normal; color:var(--ink-2); white-space:nowrap; }
.lhs-prow .lhs-bar i { background:var(--g); }

/* ---- SANKALPA ---------------------------------------------------------------------------------------------------------- */
.lhs-steps4 { list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin:0; padding:0; }
.lhs-steps4 li { display:grid; gap:8px; align-content:start; padding:12px 10px; border-radius:16px; background:var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-steps4 span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font:600 12px/1 var(--mono); color:rgb(var(--pa)); background:rgba(var(--pa), .14); }
.lhs-steps4 b { font:500 12.5px/1.3 var(--body); color:var(--ink); }
@media (max-width:379px) { .lhs-steps4 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* ---- TIME TABLE -------------------------------------------------------------------------------------------------------- */
.lhs-tt-b { display:flex; align-items:center; gap:9px; font:500 18px/1.25 var(--display); color:var(--ink); }
.lhs-ttnow { background:radial-gradient(120% 120% at 0% 0%, rgba(var(--pa), .12), transparent 60%), var(--lhs-card); }
.lhs-side { flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--lhs-line-2); }
.lhs-side.n-ida { background:var(--lhs-ida); } .lhs-side.n-pingala { background:var(--lhs-pingala); } .lhs-side.n-sushumna { background:var(--brass-hi); }
.lhs-state { font:500 12px/1.35 var(--body); color:var(--ink-2); }
.lhs-state.ok { color:var(--lhs-good); } .lhs-state.warn { color:var(--ltk-down); }
.lhs-ttrows { list-style:none; display:grid; margin:0; padding:0 4px; }
.lhs-ttrows li { display:grid; grid-template-columns:48px auto minmax(0, 1fr); align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--lhs-line);
  font:400 13.5px/1.3 var(--body); color:var(--ink-2); }
.lhs-ttrows li b { font:500 12.5px/1 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.lhs-ttrows li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* =====================================================================================================================
   THE DOCK — the drawer's ways on, in view under every page (shell.html .lhd)
   2026-10-01, the user: the breath check and Breath Tap moved to Now; "redesign the drawer and make the start Swara
   alignment as a primary and prominent button". Guidance and SwaraTantra either side; the token line and the wallet above.
   ===================================================================================================================== */
.lhd { display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; padding:0 12px 6px; }
.litedrawer[data-state="open"] .lhd { display:none; }
.lhd-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; min-height:30px; padding:0 4px; }
.lhd-st { flex:1 1 auto; min-width:0; overflow:hidden; }
.lhd-chip { flex:0 0 auto; }
.ltk-st { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:0; border:0; background:none; font:500 12px/1.2 var(--body); color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.ltk-st i { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--lhs-good); box-shadow:0 0 0 3px color-mix(in srgb, var(--lhs-good) 22%, transparent); }
.ltk-st b { font-weight:600; color:var(--ink); }
.ltk-st.now { color:var(--ink); }
.ltk-st.now i { box-shadow:0 0 0 3px color-mix(in srgb, var(--lhs-good) 30%, transparent), 0 0 12px var(--lhs-good); }
.ltk-st.now b { color:var(--lhs-gold); }
.ltk-st.warn { color:var(--ltk-down); cursor:pointer; }
.ltk-st.paused { color:var(--ink-2); }
.ltk-st .ltk-pm { width:12px; height:12px; }
.ltk-chip { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px 0 5px; border:0; border-radius:14px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font:600 13px/1 var(--display); color:var(--lhs-gold); background:rgba(var(--lhs-gold-rgb), .09); box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .32); font-variant-numeric:tabular-nums; }
.ltk-chip:hover { background:rgba(var(--lhs-gold-rgb), .16); }
.ltk-chip .ltk-pm { width:11px; height:11px; color:var(--ink-2); }
.ltk-chip:focus-visible, .ltk-st:focus-visible { outline:2px solid var(--lhs-gold); outline-offset:2px; }
/* a place of the studio, on the swipe home: its name, and its own pages when it has more than one (ui-lite-shell.js lalHead) */
.lst-sec { gap:10px; }
.lst-title { display:flex; align-items:center; gap:10px; margin:0; padding:4px 2px 0; font:500 21px/1.2 var(--display); letter-spacing:-.005em; color:var(--ink); }
/* THE PAGE'S HEAD ON ITS PAGE'S EDGE (the user, 2026-10-08: Check times, Database, Health Scan and Realign "headers … are not properly
   aligned"): the head took the studio's 600/680px measure, centred, while the page under it runs 600, 760 and then 1100px wide, so the
   title stood 2px off the cards on a phone and 216px in from them on a desktop. Now the head has the page's own measure at every width,
   and its sides make up the difference between the sheet's top row (10px) and its body (14px, then 28px from 760px): the icon's left
   edge is the cards' left edge. */
.lite-has-chart .litedrawer .lst.lst-sec { max-width:calc(600px + 8px); padding:0 4px 2px; }
.lst-sec .lst-title { padding:4px 0 0; }
@media (min-width:760px) { .lite-has-chart .litedrawer .lst.lst-sec { max-width:calc(760px + 36px); padding:0 18px 2px; } }
@media (min-width:1000px) { .lite-has-chart .litedrawer .lst.lst-sec { max-width:calc(1100px + 36px); } }
.lst-title svg { flex:none; width:21px; height:21px; fill:none; stroke:rgb(var(--acc-rgb)); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* a narrow phone: the drawer's first stop keeps its edges */
@media (max-width:359px) { .lhd { padding:0 6px 6px; } }
/* tablets and desktops: centred in the sheet */
@media (min-width:760px) { .lhd { max-width:640px; margin:0 auto; padding:0 6px 4px; } }

/* ---- choosing the act or the matter, and adding to the Time table, from the pages (in the app's own sheet) ------------ */
.lhs-pk-note { display:flex; align-items:flex-start; gap:8px; margin:12px 0 4px; padding:10px 12px; border-radius:14px; font:500 12.5px/1.45 var(--body); color:var(--ink-2);
  background:rgba(var(--acc-rgb), .07); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .22); }
.lhs-pk-note svg { flex:0 0 auto; width:17px; height:17px; margin-top:1px; fill:none; stroke:rgb(var(--acc-rgb)); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lpk-opt .lhs-opt-live { flex:0 0 auto; width:7px; height:7px; margin-right:-2px; border-radius:50%; background:var(--lhs-good); box-shadow:0 0 0 3px color-mix(in srgb, var(--lhs-good) 22%, transparent); }
.lpk-opt .lhs-opt-live.ok { background:var(--lhs-ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--lhs-ok) 22%, transparent); }
.lpk-opt .lhs-opt-live.hard { background:var(--lhs-hard); box-shadow:0 0 0 3px color-mix(in srgb, var(--lhs-hard) 22%, transparent); }
.lpk-opt .lhs-opt-tag { flex:0 0 auto; margin-left:auto; padding:3px 8px; border-radius:999px; font:600 10.5px/1 var(--body); font-style:normal; color:var(--ink-2);
  background:color-mix(in srgb, var(--ink) 7%, transparent); }
.lpk-opt.lhs-opt { justify-content:flex-start; gap:10px; }
.lpk-opt.lhs-opt > span { flex:1 1 auto; min-width:0; text-align:left; }
.lpk-opt .lhs-opt-tag + svg { margin-left:8px; }
.lhs-add { display:grid; gap:10px; padding:4px 0 2px; }
.lhs-add .lhs-eb { margin-top:6px; color:rgb(var(--acc-rgb)); }
.lhs-chips { display:flex; flex-wrap:wrap; gap:6px; }
.lhs-chip { min-height:36px; padding:6px 13px; border:0; border-radius:999px; cursor:pointer; font:500 12.5px/1.25 var(--body); color:var(--ink); text-align:left;
  background:var(--st-tile, rgba(255,255,255,.04)); box-shadow:inset 0 0 0 1px var(--st-line, rgba(255,255,255,.09)); -webkit-tap-highlight-color:transparent; }
.lhs-chip:hover { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .45); }
.lhs-chip.on { color:var(--ink); background:rgba(var(--acc-rgb), .16); box-shadow:inset 0 0 0 1.5px rgba(var(--acc-rgb), .65); }
.lhs-chip:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
.lhs-add .ltk-go { margin-top:8px; }
.lhs-add-done { display:grid; justify-items:center; gap:6px; padding:16px 0 6px; text-align:center; }
.lhs-add-done svg { width:34px; height:34px; padding:7px; border-radius:50%; fill:none; stroke:var(--ltk-up); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  background:color-mix(in srgb, var(--ltk-up) 14%, transparent); }
.lhs-add-done b { font:500 19px/1.2 var(--display); color:var(--ink); }
.lhs-add-done span { max-width:36ch; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.lhs-add-go { display:grid; gap:8px; padding-top:6px; }
.lhs-add-go .ltk-ghost { width:100%; height:44px; }
.lhs-added { display:flex; align-items:center; gap:8px; margin:0; padding:9px 6px 9px 12px; border-radius:14px; font:500 12.5px/1.35 var(--body); color:var(--ink-2);
  background:color-mix(in srgb, var(--ltk-up) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ltk-up) 35%, transparent); }
.lhs-added svg { flex:0 0 auto; width:16px; height:16px; fill:none; stroke:var(--ltk-up); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lhs-added span { flex:1 1 auto; min-width:0; }
.lhs-added b { color:var(--ink); font-variant-numeric:tabular-nums; }
.lhs-link.sm { height:32px; padding:0 10px; font-size:12.5px; }
.lhs-begin { gap:8px; }
.lhs-begin-act { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; font:500 14px/1.35 var(--body); color:var(--ink); }
.lhs-begin-act em { font:500 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.lhs-acts .lhs-link:first-child { padding-left:2px; }
.lhs-begin .lhs-acts { padding-top:4px; }
.lhs-act svg:first-child { margin-left:-4px; }

/* the first stop: the breath widget, then the wallet's line */
/* the first stop: the dock, then the wallet's line, with air between them and above the breath card (classic home) */
.lite-has-chart .litedrawer[data-state="half"] .liteacts, .lite-has-chart .litedrawer[data-state="peek"] .liteacts { padding-top:10px; gap:14px; }
.lite-has-chart .litedrawer .liteacts > .lqk-host + .lhd { margin-top:8px; }
.ltk-dwrow:empty { display:none; }
.ltk-dwrow { margin-top:8px; }

/* =====================================================================================================================
   SWARA TOKENS — the mark, the toast, the wallet, the gates and the invoice (ui-lite-tokens.js)
   ===================================================================================================================== */
.ltk-coin, .ltk-badge, .ltk-logo, .ltk-glyph { display:block; flex:0 0 auto; }
.ltk-mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.ltk-pm { fill:currentColor; }

/* the toast: what a check earned, or a spend with its Undo */
.ltk-toast { position:fixed; left:50%; bottom:calc(var(--lite-peek, 96px) + 12px + env(safe-area-inset-bottom)); z-index:9800; display:flex; align-items:center; gap:10px;
  box-sizing:border-box; width:max-content; max-width:min(calc(100vw - 24px), 440px); padding:10px 10px 10px 12px; border-radius:18px; color:var(--ink);
  background:linear-gradient(180deg, #24222D, #17151E); box-shadow:0 18px 40px -16px rgba(0,0,0,.85), inset 0 0 0 1px rgba(242,217,138,.24);
  transform:translate(-50%, 14px); opacity:0; pointer-events:none; transition:transform .3s cubic-bezier(.22,.9,.24,1), opacity .3s; }
.ltk-toast.in { transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
.ltk-toast-tx { display:grid; gap:2px; min-width:0; }
.ltk-toast-tx b { font:600 16px/1.1 var(--mono); color:#F7F2E6; }
.ltk-toast-tx b.up { color:#7FD6AE; } .ltk-toast-tx b.down { color:#F2B36B; }
.ltk-toast-tx span { font:500 12px/1.3 var(--body); color:#C9C3D6; }
.ltk-toast-tx em { display:block; margin-top:2px; font:400 11px/1.3 var(--body); font-style:normal; color:#9D97AD; }
.ltk-toast .ltk-pm { width:20px; height:20px; color:#BFD0FF; }
.ltk-toast-go { flex:0 0 auto; height:34px; margin-left:4px; padding:0 13px; border:0; border-radius:12px; cursor:pointer; font:600 12.5px/1 var(--body); color:#F2D98A; background:rgba(242,217,138,.13); }
.ltk-toast-go:hover { background:rgba(242,217,138,.22); }
.ltk-toast.warn { box-shadow:0 18px 40px -16px rgba(0,0,0,.85), inset 0 0 0 1px rgba(242,179,107,.45); }
@media (prefers-reduced-motion: reduce) { .ltk-toast { transition:opacity .2s; transform:translate(-50%, 0); } }

/* ---- THE MOMENT: Swara tokens earned or used, over the app (the user, 2026-10-02; ui-lite-tokens.js lfxShow). The coin turns up out
   of a light that breathes; rays, a ring and sparks for tokens earned, embers for tokens used, a quiet lilac for tokens given back.
   One stage, centred a little above the middle; a veil that a tap puts away. ---- */
.ltk-fx { position:fixed; inset:0; z-index:9900; display:grid; place-items:center; pointer-events:none;
  --fx-rgb:242, 217, 138; --fx-g1:#FFF5D6; --fx-g2:#F4D98C; --fx-g3:#D9AE52; --fx-ink:#F4EFE4; --fx-ink2:#BDB6CB; --fx-veil:7, 6, 11; --fx-spark:#FFF1C9; }
.ltk-fx.down { --fx-rgb:240, 164, 96; --fx-g1:#FFE6CC; --fx-g2:#F2B36B; --fx-g3:#D7893F; --fx-spark:#FFD8AE; }
.ltk-fx.back { --fx-rgb:190, 176, 255; --fx-g1:#F6F2FF; --fx-g2:#DCD1FF; --fx-g3:#B5A4F4; --fx-spark:#EFE9FF; }
.ltk-fx-scrim { position:absolute; inset:0; pointer-events:auto; cursor:pointer; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(115% 85% at 50% 40%, rgba(var(--fx-veil), .62) 0%, rgba(var(--fx-veil), .76) 48%, rgba(var(--fx-veil), .88) 100%);
  -webkit-backdrop-filter:blur(9px) saturate(.85); backdrop-filter:blur(9px) saturate(.85); }
.ltk-fx.in .ltk-fx-scrim { opacity:1; }
.ltk-fx.out .ltk-fx-scrim { opacity:0; transition-duration:.5s; }
.ltk-fx.out .ltk-fx-scrim, .ltk-fx.out .ltk-fx-acts { pointer-events:none; }          /* leaving, it no longer stands in the way */
.ltk-fx-stage { position:relative; display:grid; justify-items:center; width:min(340px, calc(100vw - 48px)); margin-top:-7vh; text-align:center; pointer-events:none; }
.ltk-fx-art { position:relative; width:220px; height:196px; display:grid; place-items:center; }
/* the light behind the coin, breathing */
.ltk-fx-glow { position:absolute; left:50%; top:50%; width:280px; height:280px; margin:-140px 0 0 -140px; border-radius:50%; opacity:0; transform:scale(.4);
  background:radial-gradient(circle, rgba(var(--fx-rgb), .6) 0%, rgba(var(--fx-rgb), .3) 22%, rgba(var(--fx-rgb), .1) 46%, rgba(var(--fx-rgb), 0) 68%); }
.ltk-fx.in .ltk-fx-glow { animation:lfxGlow .75s cubic-bezier(.2,.8,.2,1) forwards, lfxBreathe 2.8s ease-in-out .75s infinite; }
@keyframes lfxGlow { to { opacity:1; transform:scale(1); } }
@keyframes lfxBreathe { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:.86; transform:scale(1.08); } }
/* a faint halo of rays, turning slowly: tokens earned */
.ltk-fx-rays { position:absolute; left:50%; top:50%; width:360px; height:360px; margin:-180px 0 0 -180px; border-radius:50%; opacity:0;
  background:repeating-conic-gradient(from 0deg, rgba(var(--fx-rgb), .2) 0deg 2.4deg, rgba(var(--fx-rgb), 0) 2.4deg 20deg);
  -webkit-mask:radial-gradient(circle, transparent 0 30%, #000 42%, rgba(0,0,0,.45) 56%, transparent 70%); mask:radial-gradient(circle, transparent 0 30%, #000 42%, rgba(0,0,0,.45) 56%, transparent 70%); }
.ltk-fx.up.in .ltk-fx-rays { animation:lfxRays 1.1s ease .3s forwards, lfxTurn 18s linear infinite; }
.ltk-fx.big.in .ltk-fx-rays { animation-name:lfxRaysBig, lfxTurn; }
@keyframes lfxRays { to { opacity:.75; } }
@keyframes lfxRaysBig { to { opacity:1; } }
@keyframes lfxTurn { to { transform:rotate(360deg); } }
/* the ring that leaves the coin (closes on it, for tokens used) */
.ltk-fx-ring { position:absolute; left:50%; top:50%; width:116px; height:116px; margin:-58px 0 0 -58px; border-radius:50%; opacity:0;
  box-shadow:0 0 0 1.5px rgba(var(--fx-rgb), .8), 0 0 24px rgba(var(--fx-rgb), .32); }
.ltk-fx.in .ltk-fx-ring { animation:lfxRing 1s cubic-bezier(.15,.7,.25,1) .45s forwards; }
.ltk-fx.in .ltk-fx-ring.r2 { animation-delay:.68s; }
@keyframes lfxRing { 0% { opacity:.85; transform:scale(.92); } 100% { opacity:0; transform:scale(2.4); } }
.ltk-fx.down.in .ltk-fx-ring { animation-name:lfxRingIn; }
@keyframes lfxRingIn { 0% { opacity:0; transform:scale(2.1); } 55% { opacity:.55; } 100% { opacity:0; transform:scale(.96); } }
.ltk-fx.back .ltk-fx-ring.r2 { display:none; }
/* sparks out of it (earned); embers drifting up (used) */
.ltk-fx-bits { position:absolute; left:50%; top:50%; width:0; height:0; }
.ltk-fx-bits i { position:absolute; left:0; top:0; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius:50%; opacity:0;
  background:var(--fx-spark); box-shadow:0 0 6px 1px rgba(var(--fx-rgb), .85); }
.ltk-fx.up.in .ltk-fx-bits i { animation:lfxSpark .85s cubic-bezier(.12,.75,.3,1) calc(.42s + var(--d)) forwards; }
@keyframes lfxSpark { 0% { opacity:1; transform:translate(0, 0) scale(1); } 100% { opacity:0; transform:translate(var(--x), var(--y)) scale(.35); } }
.ltk-fx.down.in .ltk-fx-bits i { animation:lfxEmber 1.7s ease-out calc(.5s + var(--d)) forwards; }
@keyframes lfxEmber { 0% { opacity:0; transform:translate(0, 12px) scale(.6); } 25% { opacity:.85; } 100% { opacity:0; transform:translate(var(--x), var(--y)) scale(1.05); } }
/* the coin: the app's own, turning up and settling, a glint across it, floating as the light breathes */
.ltk-fx-shadow { position:absolute; left:50%; bottom:24px; width:86px; height:12px; margin-left:-43px; border-radius:50%; opacity:0;
  background:radial-gradient(ellipse, rgba(0,0,0,.5), rgba(0,0,0,0) 70%); }
.ltk-fx.in .ltk-fx-shadow { animation:lfxShow .6s ease .45s forwards; }
.ltk-fx-coin { position:relative; width:112px; height:112px; perspective:720px; opacity:0; }
.ltk-fx.in .ltk-fx-coin { animation:lfxShow .35s ease forwards; }
@keyframes lfxShow { to { opacity:1; } }
.ltk-fx-spin { position:absolute; inset:0; display:block; border-radius:50%; transform-style:preserve-3d; will-change:transform;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(var(--fx-rgb), .5)); }
.ltk-fx-spin .ltk-coin { display:block; width:112px; height:112px; }
.ltk-fx.up.in .ltk-fx-spin { animation:lfxFlip 1s cubic-bezier(.18,.82,.22,1.1) forwards, lfxFloat 2.8s ease-in-out 1s infinite; }
@keyframes lfxFlip { 0% { transform:translateY(36px) scale(.3) rotateY(-720deg); } 72% { transform:translateY(-6px) scale(1.06) rotateY(-12deg); } 100% { transform:translateY(0) scale(1) rotateY(0deg); } }
@keyframes lfxFloat { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
.ltk-fx.down.in .ltk-fx-spin { animation:lfxSettle .75s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes lfxSettle { 0% { transform:translateY(-24px) scale(.84) rotateY(170deg); } 62% { transform:translateY(3px) scale(1.02) rotateY(-6deg); } 100% { transform:translateY(0) scale(.97) rotateY(0deg); } }
.ltk-fx.back.in .ltk-fx-spin { animation:lfxRise .75s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes lfxRise { 0% { transform:translateY(70px) scale(.36); } 100% { transform:translateY(0) scale(1); } }
.ltk-fx-glint { position:absolute; inset:0; border-radius:50%; overflow:hidden; pointer-events:none; }
.ltk-fx-glint::after { content:''; position:absolute; top:-20%; bottom:-20%; left:-60%; width:36%; transform:skewX(-18deg); opacity:0;
  background:linear-gradient(90deg, rgba(255,248,226,0), rgba(255,248,226,.6), rgba(255,248,226,0)); }
.ltk-fx.up.in .ltk-fx-glint::after, .ltk-fx.back.in .ltk-fx-glint::after { animation:lfxGlint .85s ease 1s forwards; }
@keyframes lfxGlint { 0% { left:-60%; opacity:0; } 20% { opacity:1; } 100% { left:130%; opacity:0; } }
/* the figure, counting; what it was for; a bonus as a chip; the way on */
.ltk-fx-amt { display:grid; justify-items:center; gap:6px; margin-top:-4px; opacity:0; transform:translateY(10px); }
.ltk-fx.in .ltk-fx-amt { animation:lfxUp .55s cubic-bezier(.2,.8,.2,1) .3s forwards; }
@keyframes lfxUp { to { opacity:1; transform:none; } }
.ltk-fx-amt b { display:flex; align-items:baseline; font:500 54px/1 var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums lining-nums;
  color:var(--fx-g2); background:linear-gradient(180deg, var(--fx-g1) 0%, var(--fx-g2) 52%, var(--fx-g3) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 16px rgba(var(--fx-rgb), .32)); }
.ltk-fx.big .ltk-fx-amt b { font-size:62px; }
.ltk-fx-sign { align-self:center; margin:-.06em 3px 0 0; font-size:.6em; font-weight:400; }
.ltk-fx-amt small { font:600 10.5px/1.2 var(--body); letter-spacing:.22em; text-transform:uppercase; color:rgba(var(--fx-rgb), .92); }
.ltk-fx-why { max-width:30ch; margin:12px 0 0; font:400 14.5px/1.45 var(--body); color:var(--fx-ink); opacity:0; text-wrap:balance; }
.ltk-fx.in .ltk-fx-why { animation:lfxUp .55s cubic-bezier(.2,.8,.2,1) .5s forwards; }
.ltk-fx.warn .ltk-fx-why { color:var(--fx-g2); }
.ltk-fx-extra { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:10px 0 0; padding:0; opacity:0; }
.ltk-fx.in .ltk-fx-extra { animation:lfxUp .55s cubic-bezier(.2,.8,.2,1) .66s forwards; }
.ltk-fx-extra li { display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 6px; border-radius:999px; font:500 12px/1.25 var(--body); color:var(--fx-ink);
  background:rgba(var(--fx-rgb), .1); box-shadow:inset 0 0 0 1px rgba(var(--fx-rgb), .34); }
.ltk-fx-acts { display:flex; gap:8px; margin-top:16px; opacity:0; pointer-events:auto; }
.ltk-fx.in .ltk-fx-acts { animation:lfxUp .55s cubic-bezier(.2,.8,.2,1) .8s forwards; }
.ltk-fx-go { position:relative; overflow:hidden; height:38px; padding:0 20px; border:0; border-radius:999px; cursor:pointer; font:600 13px/1 var(--body); letter-spacing:.01em;
  color:var(--fx-g2); background:rgba(var(--fx-rgb), .12); box-shadow:inset 0 0 0 1px rgba(var(--fx-rgb), .38); transition:background .2s ease; }
.ltk-fx-go:hover { background:rgba(var(--fx-rgb), .2); }
.ltk-fx-go:focus-visible { outline:2px solid rgba(var(--fx-rgb), .85); outline-offset:3px; }
.ltk-fx-tm { position:absolute; left:16px; right:16px; bottom:6px; height:2px; border-radius:2px; background:rgba(var(--fx-rgb), .75); transform-origin:left center; }
.ltk-fx.in .ltk-fx-tm { animation:lfxTimer 15.2s linear forwards; }      /* the Undo's fifteen seconds (ui-lite-tokens.js LTK_UNDO_MS) */
/* a spend's two answers, side by side: Undo counting its seconds, Confirm settling it at once (the user, 2026-10-04) */
.ltk-secs { margin-left:6px; font:600 12px/1 var(--mono); font-variant-numeric:tabular-nums; opacity:.85; }
.ltk-fx-go.keep { color:#1C1206; background:var(--fx-g2); box-shadow:0 10px 22px -12px rgba(var(--fx-rgb), .9); }
.ltk-fx-go.keep:hover { background:var(--fx-g1); }
.ltk-toast-acts { flex:0 0 auto; display:flex; gap:6px; margin-left:4px; }
.ltk-toast-acts .ltk-toast-go { margin-left:0; }
.ltk-toast-go.keep { color:#1C1206; background:#F2D98A; }
.ltk-toast-go.keep:hover { background:#F7E3A2; }
@keyframes lfxTimer { to { transform:scaleX(0); } }
.ltk-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
/* leaving: a coin earned or given back drops into the wallet below; a coin used fades where it stands */
@keyframes lfxOut { from { opacity:1; } to { opacity:0; } }
.ltk-fx.out .ltk-fx-amt, .ltk-fx.out .ltk-fx-why, .ltk-fx.out .ltk-fx-extra, .ltk-fx.out .ltk-fx-acts, .ltk-fx.out .ltk-fx-shadow { animation:lfxOut .28s ease forwards; transform:none; }
.ltk-fx.out .ltk-fx-glow { animation:lfxGlowOut .5s ease forwards; }
@keyframes lfxGlowOut { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(1.3); } }
.ltk-fx.out .ltk-fx-rays { animation:lfxOut .35s ease forwards; }
.ltk-fx.out .ltk-fx-coin { animation:none; opacity:1; }
.ltk-fx.up.out .ltk-fx-spin, .ltk-fx.back.out .ltk-fx-spin { animation:lfxDrop .58s cubic-bezier(.55,0,.75,.3) forwards; }
@keyframes lfxDrop { 0% { transform:translateY(0) scale(1); opacity:1; } 100% { transform:translateY(38vh) scale(.14); opacity:0; } }
.ltk-fx.down.out .ltk-fx-spin { animation:lfxFade .45s ease forwards; }
@keyframes lfxFade { from { transform:scale(.97); opacity:1; } to { transform:scale(.7); opacity:0; } }
/* for less motion: the same moment, standing still */
.ltk-fx.still .ltk-fx-rays, .ltk-fx.still .ltk-fx-ring, .ltk-fx.still .ltk-fx-glint, .ltk-fx.still .ltk-fx-bits { display:none; }
.ltk-fx.still.in .ltk-fx-glow { animation:lfxShow .25s ease forwards; transform:none; }
.ltk-fx.still.in .ltk-fx-spin { animation:none; }
.ltk-fx.still.in .ltk-fx-coin, .ltk-fx.still.in .ltk-fx-amt, .ltk-fx.still.in .ltk-fx-why, .ltk-fx.still.in .ltk-fx-extra, .ltk-fx.still.in .ltk-fx-acts, .ltk-fx.still.in .ltk-fx-shadow { animation:lfxShow .25s ease forwards; transform:none; }
.ltk-fx.still.out .ltk-fx-spin, .ltk-fx.still.out .ltk-fx-glow { animation:lfxOut .25s ease forwards; transform:none; }
.ltk-fx.still .ltk-fx-tm { animation:none; }
@media (prefers-reduced-motion: reduce) { .ltk-fx .ltk-fx-rays { animation:none !important; } }
/* the day theme: a warm veil, the gold deepened so it reads on it */
:root[data-theme="light"] .ltk-fx { --fx-veil:250, 246, 236; --fx-ink:#2A2316; --fx-ink2:#5A513F; --fx-g1:#D8A93E; --fx-g2:#B5841C; --fx-g3:#86600F; --fx-spark:#E8B84A; }
:root[data-theme="light"] .ltk-fx.down { --fx-g1:#D98436; --fx-g2:#B5621C; --fx-g3:#874312; --fx-spark:#E39A55; }
:root[data-theme="light"] .ltk-fx.back { --fx-g1:#8576DC; --fx-g2:#6352C2; --fx-g3:#4A3B9E; --fx-spark:#A99BF0; }
:root[data-theme="light"] .ltk-fx-scrim { background:radial-gradient(115% 85% at 50% 40%, rgba(255,251,240,.7) 0%, rgba(250,246,236,.82) 48%, rgba(244,239,226,.92) 100%); }
:root[data-theme="light"] .ltk-fx-spin { filter:drop-shadow(0 12px 18px rgba(60,40,10,.28)) drop-shadow(0 0 16px rgba(var(--fx-rgb), .55)); }
:root[data-theme="light"] .ltk-fx-amt small { color:var(--fx-g3); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ltk-fx { --fx-veil:250, 246, 236; --fx-ink:#2A2316; --fx-ink2:#5A513F; --fx-g1:#D8A93E; --fx-g2:#B5841C; --fx-g3:#86600F; --fx-spark:#E8B84A; }
  :root:not([data-theme="dark"]) .ltk-fx.down { --fx-g1:#D98436; --fx-g2:#B5621C; --fx-g3:#874312; --fx-spark:#E39A55; }
  :root:not([data-theme="dark"]) .ltk-fx.back { --fx-g1:#8576DC; --fx-g2:#6352C2; --fx-g3:#4A3B9E; --fx-spark:#A99BF0; }
  :root:not([data-theme="dark"]) .ltk-fx-scrim { background:radial-gradient(115% 85% at 50% 40%, rgba(255,251,240,.7) 0%, rgba(250,246,236,.82) 48%, rgba(244,239,226,.92) 100%); }
  :root:not([data-theme="dark"]) .ltk-fx-spin { filter:drop-shadow(0 12px 18px rgba(60,40,10,.28)) drop-shadow(0 0 16px rgba(var(--fx-rgb), .55)); }
  :root:not([data-theme="dark"]) .ltk-fx-amt small { color:var(--fx-g3); }
}

/* the wallet sheet */
.lpk-sheet { --ltk-gold:rgb(var(--acc-rgb)); }
.lpk-sheet .ltk { display:grid; gap:16px; padding:14px 0 4px; }
.ltk-eb { font:600 10px/1.2 var(--body); letter-spacing:.18em; text-transform:uppercase; color:rgb(var(--acc-rgb)); }
.ltk-hero { display:grid; justify-items:center; gap:5px; padding:4px 0 2px; text-align:center; }
.ltk-hero .ltk-coin { margin-bottom:6px; filter:drop-shadow(0 12px 24px rgba(0,0,0,.45)); }
.ltk-bal { font:600 42px/1 var(--mono); letter-spacing:-.03em; color:rgb(var(--acc-rgb)); }
.ltk-unit { font:600 10.5px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); }
.ltk-keep { margin:8px 0 0; max-width:40ch; font:500 12.5px/1.5 var(--body); color:var(--ink-2); }
.ltk-keep.paused { color:#BFD0FF; }
.ltk-link { padding:0; border:0; background:none; cursor:pointer; font:inherit; font-weight:600; color:rgb(var(--acc-rgb)); text-decoration:underline; text-underline-offset:3px; }
.ltk-next { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:4px 12px; padding:12px 14px; border-radius:16px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.ltk-next .ltk-eb, .ltk-next b { grid-column:1; }
.ltk-next b { font:500 14px/1.35 var(--body); color:var(--ink); }
.ltk-next .ltk-amt { grid-column:2; grid-row:1 / span 2; font:600 15px/1 var(--mono); color:var(--ltk-up); white-space:nowrap; }
.ltk-next.now { background:color-mix(in srgb, var(--ltk-up) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ltk-up) 45%, transparent); }
.ltk-held { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; border-radius:14px; background:rgba(150,162,246,.07); box-shadow:inset 0 0 0 1px rgba(150,162,246,.3); }
.ltk-held > span { flex:1 1 180px; display:grid; gap:2px; min-width:0; }
.ltk-held b { font:600 13px/1.3 var(--body); color:var(--ink); }
.ltk-held em { font:500 11px/1.3 var(--mono); font-style:normal; color:var(--dim); }
.ltk-list { display:grid; gap:6px; }
.ltk-list-hd { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px; }
.ltk-seg { display:inline-flex; padding:3px; border-radius:999px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.ltk-seg button { height:28px; padding:0 12px; border:0; border-radius:999px; background:none; cursor:pointer; font:600 12px/1 var(--body); color:var(--ink-2); }
.ltk-seg button[aria-pressed="true"] { color:var(--ink); background:rgba(var(--acc-rgb), .18); }
.ltk-rows { list-style:none; display:grid; margin:0; padding:0; }
.ltk-day { padding:12px 2px 6px; font:600 10px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.ltk-row { display:grid; grid-template-columns:44px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:9px 2px; border-top:1px solid var(--st-line-soft); }
.ltk-row time { font:500 12px/1 var(--mono); color:var(--dim); }
.ltk-row-tx { display:grid; gap:2px; min-width:0; }
.ltk-row-tx b { font:500 13.5px/1.25 var(--body); color:var(--ink); }
.ltk-row-tx em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 11.5px/1.3 var(--body); font-style:normal; color:var(--ink-2); }
.ltk-row-amt { display:grid; justify-items:end; gap:3px; }
.ltk-row-amt b { font:600 14px/1 var(--mono); } .ltk-row-amt b.up { color:var(--ltk-up); } .ltk-row-amt b.down { color:var(--ltk-down); }
.ltk-row-amt em { font:400 11px/1 var(--mono); font-style:normal; color:var(--dim); }
.ltk-empty { padding:14px 2px; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.ltk-moreli { display:flex; justify-content:center; padding:10px 0 0; }
.ltk-ghost { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:38px; padding:0 14px; border:0; border-radius:12px; cursor:pointer;
  font:600 12.5px/1 var(--body); color:var(--ink); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line); }
.ltk-ghost:hover { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .5); }
.ltk-foot { display:flex; flex-wrap:wrap; gap:8px; padding-top:10px; }
.ltk-fine { margin:0; font:400 11px/1.5 var(--body); color:var(--dim); }
.ltk-go { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; height:50px; border:0; border-radius:16px; cursor:pointer;
  font:700 14px/1 var(--body); color:#1B1406; background:linear-gradient(180deg, #F8E9B8 0%, #EFD489 46%, #D6B24A 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 14px 28px -16px rgba(214,178,74,.85); transition:filter .2s, transform .15s; }
.ltk-go:hover { filter:brightness(1.05); }
.ltk-go:active { transform:scale(.985); }
.ltk-go:disabled { opacity:.55; cursor:default; filter:none; transform:none; }
.ltk-go.sm { width:auto; height:40px; padding:0 15px; border-radius:13px; font-size:13px; }
.ltk-go svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ltk-go:focus-visible, .ltk-ghost:focus-visible, .ltk-link:focus-visible, .ltk-seg button:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }

/* the large figures in the display face (the mono face slashes its zero): balances, rewards, totals */
.ltk-bal, .ltk-chip, .ltk-chip .ltk-mono, .ltk-dw-tx b, .ltk-next .ltk-amt, .ltk-row-amt b, .ltk-toast-tx b, .lgi-total b, .lhs-earn b, .lhs-day-n, .lhs-fig-v, .lhs-ring b {
  font-family:var(--display); font-variant-numeric:tabular-nums lining-nums; }
.ltk-repgate .ltk-note .ltk-mono { font-family:var(--display); font-variant-numeric:tabular-nums lining-nums; }
.ltk-bal { font-weight:500; letter-spacing:-.02em; }

/* How tokens work */
.ltk-help { display:grid; gap:18px; }
.ltk-help-hero { display:grid; justify-items:center; gap:8px; padding:4px 0; text-align:center; }
.ltk-help-hero h3 { margin:6px 0 0; font:500 25px/1.15 var(--display); color:var(--ink); }
.ltk-help-hero p { max-width:42ch; margin:0; font:400 13.5px/1.55 var(--body); color:var(--ink-2); }
.ltk-sec { display:grid; gap:8px; padding-top:14px; border-top:1px solid var(--st-line-soft); }
.ltk-sec h4 { margin:0; font:500 16px/1.3 var(--display); color:var(--ink); }
.ltk-tbl { list-style:none; display:grid; margin:0; padding:0; }
.ltk-tbl li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--st-line-soft); }
.ltk-tbl li:first-child { border-top:0; }
.ltk-tbl li > span { display:grid; gap:2px; min-width:0; }
.ltk-tbl li > span b { font:500 13.5px/1.3 var(--body); color:var(--ink); }
.ltk-tbl li > span em { font:400 11.5px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.ltk-tbl li > b { font:600 14px/1 var(--mono); color:rgb(var(--acc-rgb)); white-space:nowrap; text-align:right; }
.ltk-note { margin:0; font:400 12.5px/1.55 var(--body); color:var(--ink-2); }
.ltk-note b { color:var(--ink); }
.ltk-fade { display:flex; align-items:flex-end; gap:4px; height:62px; padding:0 2px; }
.ltk-fade i { flex:1; border-radius:4px 4px 2px 2px; background:rgba(var(--acc-rgb), .32); }
.ltk-fade i.full { background:rgb(var(--acc-rgb)); }
.ltk-fade-ax { display:flex; justify-content:space-between; font:500 10.5px/1 var(--mono); color:var(--dim); }

/* the pause for illness or travel */
.ltk-pause { display:grid; gap:14px; }
.ltk-lede { margin:0; font:400 14px/1.5 var(--body); color:var(--ink-2); }
.ltk-whys { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.ltk-why { display:flex; align-items:center; gap:10px; min-width:0; padding:12px; border:0; border-radius:16px; cursor:pointer; text-align:left; color:var(--ink);
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line); }
.ltk-why[aria-pressed="true"] { background:rgba(var(--acc-rgb), .12); box-shadow:inset 0 0 0 1.5px rgba(var(--acc-rgb), .62); }
.ltk-why-ico { flex:0 0 auto; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(var(--acc-rgb), .1); }
.ltk-why-ico svg { width:20px; height:20px; fill:none; stroke:rgb(var(--acc-rgb)); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ltk-why > span:last-child { display:grid; gap:2px; min-width:0; }
.ltk-why b { font:600 14px/1.2 var(--body); } .ltk-why em { font:400 11.5px/1.3 var(--body); font-style:normal; color:var(--ink-2); }
.ltk-weeks { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.ltk-weeks button { height:42px; border:0; border-radius:12px; cursor:pointer; font:600 12.5px/1 var(--body); color:var(--ink); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line); }
.ltk-weeks button[aria-pressed="true"] { background:rgba(var(--acc-rgb), .16); box-shadow:inset 0 0 0 1.5px rgba(var(--acc-rgb), .65); }
.ltk-weeks button:disabled { opacity:.4; cursor:default; }
.ltk-psum { display:grid; gap:10px; padding:14px; border-radius:16px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.ltk-psum > div { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ltk-psum > div span { font:500 12px/1 var(--body); color:var(--ink-2); }
.ltk-psum > div b { font:600 16px/1 var(--mono); color:var(--ink); }
.ltk-psum ul { display:grid; gap:4px; margin:0; padding:0 0 0 18px; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.ltk-psum p { margin:0; font:400 12px/1.45 var(--body); color:var(--ink-2); }
.ltk-limit { display:flex; justify-content:space-between; gap:10px; }
.ltk-paused { display:grid; justify-items:center; gap:10px; padding:10px 0; text-align:center; color:#BFD0FF; }
.ltk-paused h3 { margin:0; font:500 20px/1.2 var(--display); color:var(--ink); }
.ltk-paused p { max-width:36ch; margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
:root[data-theme="light"] .ltk-paused, :root[data-theme="light"] .ltk-keep.paused { color:#3D4F8A; }

/* starting a Realignment run, at the head of Realignment */
.lra-alert.ltk-gate { --al-rgb:242, 217, 138; gap:14px; }
:root[data-theme="light"] .lra-alert.ltk-gate { --al-rgb:150, 110, 18; }
.ltk-gate-hd { display:flex; align-items:center; gap:14px; }
.ltk-gate-hd h3 { margin:0 0 4px; font:500 19px/1.2 var(--display); color:var(--ink); }
.ltk-gate-hd p { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.ltk-gate-hd p b { color:var(--ink); }
.ltk-gate-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding-top:12px;
  border-top:1px solid rgba(var(--al-rgb), .22); font:500 12.5px/1.4 var(--body); color:var(--ink-2); }
.ltk-gate-row b { color:var(--ink); }
.ltk-run { display:flex; align-items:center; gap:8px; margin:8px 0 0; font:500 12.5px/1.4 var(--body); color:var(--ink-2); }

/* the phone calendar's line, in the calendar sheet */
.ltk-calbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0 4px; padding:10px 12px; border-radius:16px;
  background:rgba(var(--acc-rgb), .08); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .34); }
.ltk-calbar.short { background:color-mix(in srgb, var(--ltk-down) 9%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ltk-down) 42%, transparent); }
.ltk-calbar-tx { flex:1 1 180px; display:grid; gap:2px; min-width:0; }
.ltk-calbar-tx b { font:600 13px/1.3 var(--body); color:var(--ink); }
.ltk-calbar-tx em { font:400 11.5px/1.4 var(--body); font-style:normal; color:var(--ink-2); }

/* the full report's minimum */
.ltk-repgate { justify-items:center; text-align:center; }
.ltk-repgate h3 { max-width:26ch; margin:6px 0 0; font:500 19px/1.25 var(--display); color:var(--ink); text-wrap:balance; }
.ltk-repgate p { max-width:40ch; margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.ltk-meter { width:100%; height:10px; border-radius:5px; overflow:hidden; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.ltk-meter i { display:block; height:100%; border-radius:5px; background:linear-gradient(90deg, #D6B24A, #F8E9B8); }

/* Expert Guidance's consultation and plans are buttons now (they open the invoice first) */
button.lgd-talk { width:100%; border:0; font:inherit; text-align:left; cursor:pointer; }
button.lgd-cta { width:100%; border:0; cursor:pointer; }

/* the invoice */
.lgi { display:grid; gap:14px; padding:12px 0 4px; }
.lgi-back { justify-self:start; display:inline-flex; align-items:center; gap:4px; height:34px; padding:0 10px 0 4px; border:0; border-radius:10px; cursor:pointer;
  font:600 13px/1 var(--body); color:var(--ink-2); background:none; }
.lgi-back:hover { color:var(--ink); background:var(--st-tile); }
.lgi-back svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lgi-card { display:grid; padding:16px; border-radius:20px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line); }
.lgi-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:1px dashed var(--st-line); font:500 12px/1 var(--mono); color:var(--dim); }
.lgi-item { display:flex; justify-content:space-between; gap:12px; padding:14px 0 8px; }
.lgi-item > span { display:grid; gap:3px; min-width:0; }
.lgi-item > span b { font:600 14px/1.3 var(--body); color:var(--ink); }
.lgi-item > span em { font:400 12px/1.4 var(--body); font-style:normal; color:var(--ink-2); }
.lgi-item > b { font:600 15px/1.3 var(--mono); color:var(--ink); white-space:nowrap; }
.lgi-line { display:flex; justify-content:space-between; gap:12px; padding:7px 0; font:500 13px/1.3 var(--body); color:var(--ink-2); }
.lgi-line b { font:500 13.5px/1.3 var(--mono); color:var(--ink); white-space:nowrap; }
.lgi-line.free span, .lgi-line.free b, .lgi-line.off b { color:var(--ltk-up); }
.lgi-line.free span { font-weight:600; }
.lgi-total { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:8px; padding-top:12px; border-top:1px solid var(--st-line);
  font:600 11px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.lgi-total b { font:600 26px/1 var(--mono); letter-spacing:-.01em; text-transform:none; color:var(--ink); }
.lgi-left { margin:8px 0 0; font:400 11.5px/1.4 var(--body); color:var(--dim); text-align:right; }
.lgi-tok { display:flex; align-items:center; gap:10px; margin:2px 0 6px; padding:10px 12px; border-radius:14px; background:rgba(var(--acc-rgb), .08); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .3); }
.lgi-tok > span { flex:1 1 auto; display:grid; gap:2px; min-width:0; }
.lgi-tok b { font:600 13px/1.3 var(--body); color:var(--ink); }
.lgi-tok em { font:400 11.5px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.lgi-sw { position:relative; flex:0 0 auto; width:46px; height:28px; border:0; border-radius:14px; cursor:pointer; background:var(--st-line); transition:background .2s; }
.lgi-sw i { position:absolute; left:3px; top:3px; width:22px; height:22px; border-radius:50%; background:#FFFFFF; box-shadow:0 2px 6px rgba(0,0,0,.3); transition:transform .2s; }
.lgi-sw[aria-checked="true"] { background:rgb(var(--acc-rgb)); }
.lgi-sw[aria-checked="true"] i { transform:translateX(18px); }
.lgi-sw:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .lgi-sw, .lgi-sw i { transition:none; } }

/* ---- the invoice as a PDF page (drawn by KPDF from the page in .krp's stage, A4), redesigned (the user, 2026-10-02: "Make
   the invoice design a world-class and highly professional and polished style and design"): an ink band with a gold line,
   the lockup and the document, the parties, the amount due on a dark panel, the line, the sums and the words, notes, and a
   footer with both offices. KPDF draws solid fills, hairlines and one radius per box in Helvetica and Times: no shadows,
   no pseudo-elements, no mono (it would be Courier). ---- */
.krp-page.lgi-page { gap:0; padding:0; color:#1F1C25; background:#FFFFFF; }
.lgi-p-band { position:absolute; left:0; right:0; top:0; height:10px; background:#1E1A28; }
.lgi-p-gold { position:absolute; left:0; right:0; top:10px; height:2px; background:#C6A03A; }
.lgi-p-in { flex:1; display:flex; flex-direction:column; min-height:0; padding:58px 64px 34px; }
.lgi-p-hd { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.lgi-p-brand { display:grid; gap:10px; justify-items:start; }
.lgi-p-lock { gap:12px; color:#A8862C; }
.lgi-p-lock .krp-logo { width:36px; height:36px; }
.lgi-p-lock .krp-word { font:600 27px/1 'Red Hat Display', sans-serif; letter-spacing:.01em; color:#1E1A28; }
.lgi-p-lock .krp-word span { font-weight:400; color:#A8862C; }
.lgi-p-by { font:600 9.5px/1.2 'Red Hat Display', sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#8D8696; }
.lgi-p-doc { display:grid; justify-items:end; gap:6px; text-align:right; }
.lgi-p-kind { font:700 10px/1 'Red Hat Display', sans-serif; letter-spacing:.24em; text-transform:uppercase; color:#9A7A22; }
.lgi-p-no { font:700 21px/1.1 'Red Hat Display', sans-serif; letter-spacing:.02em; color:#1E1A28; }
.lgi-p-date { font:400 12px/1.3 'Red Hat Display', sans-serif; color:#6E6777; }
.lgi-p-k { display:block; margin-bottom:9px; font:700 9px/1 'Red Hat Display', sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#8D8696; }
.lgi-p-parties { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px; margin-top:40px; padding-top:26px; border-top:1px solid #E8E2D5; }
.lgi-p-party { display:flex; flex-direction:column; gap:3px; min-width:0; font:400 11.5px/1.5 'Red Hat Display', sans-serif; color:#4F4A58; }
.lgi-p-party > b { margin-bottom:2px; font:700 13.5px/1.35 'Red Hat Display', sans-serif; color:#1E1A28; }
.lgi-p-gst { margin-top:6px; color:#1E1A28; }
.lgi-p-gst b { font-weight:700; letter-spacing:.04em; }
.lgi-p-facts dl { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:7px 14px; margin:0; }
.lgi-p-facts dt { color:#8D8696; }
.lgi-p-facts dd { margin:0; font-weight:600; color:#1E1A28; }
.lgi-p-chip { display:inline-block; padding:2px 9px; border-radius:99px; font:700 10px/1.5 'Red Hat Display', sans-serif; letter-spacing:.04em; }
.lgi-p-chip.due { color:#8A5A12; background:#FBF1DA; border:1px solid #E9CF92; }
.lgi-p-chip.free { color:#245A44; background:#E5F2EA; border:1px solid #A9D2BA; }
.lgi-p-due { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:30px; padding:22px 28px; border-radius:16px; background:#1E1A28; color:#F5F1EA; }
.lgi-p-due .lgi-p-k { margin-bottom:9px; color:#D9BC67; }
.lgi-p-amt { display:block; font:400 40px/1 'Marcellus', 'Times New Roman', serif; letter-spacing:-.005em; color:#FFFFFF; }
.lgi-p-amt .lgi-p-rs { margin-right:3px; font:400 .74em/1 'Red Hat Display', sans-serif; color:#D9BC67; }
.lgi-p-due-r { display:grid; justify-items:end; gap:4px; max-width:290px; text-align:right; font:400 11.5px/1.45 'Red Hat Display', sans-serif; color:#C9C2D3; }
.lgi-p-due-r b { font:600 13px/1.35 'Red Hat Display', sans-serif; color:#FFFFFF; }
.lgi-p-lines { width:100%; margin-top:32px; border-collapse:collapse; font:400 12.5px/1.45 'Red Hat Display', sans-serif; color:#1E1A28; }
.lgi-p-lines th { padding:0 0 10px; border-bottom:1.5px solid #1E1A28; text-align:left; font:700 9px/1 'Red Hat Display', sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#6E6777; }
.lgi-p-lines td { padding:14px 0 15px; border-bottom:1px solid #E8E2D5; vertical-align:top; }
.lgi-p-lines .n { padding-left:22px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lgi-p-lines td b { display:block; font:700 13.5px/1.35 'Red Hat Display', sans-serif; }
.lgi-p-lines td small { display:block; margin-top:3px; font-size:11.5px; color:#6E6777; }
.lgi-p-totals { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:36px; align-items:start; margin-top:18px; }
.lgi-p-words { padding-top:6px; }
.lgi-p-words p { margin:0; font:500 12px/1.5 'Red Hat Display', sans-serif; color:#3A3542; }
.lgi-p-sum { width:100%; border-collapse:collapse; font:400 12.5px/1.4 'Red Hat Display', sans-serif; color:#4F4A58; }
.lgi-p-sum td { padding:6px 0; }
.lgi-p-sum td.n { padding-left:16px; text-align:right; white-space:nowrap; color:#1E1A28; font-variant-numeric:tabular-nums; }
.lgi-p-sum tr.off td, .lgi-p-sum tr.off td.n { color:#2B6A4E; }
.lgi-p-sum tr.tot td { padding-top:12px; border-top:1.5px solid #1E1A28; font:700 15px/1.3 'Red Hat Display', sans-serif; color:#1E1A28; }
.lgi-p-notes { margin-top:34px; padding:18px 20px; border-radius:12px; background:#FAF7F0; border:1px solid #EDE6D6; }
.lgi-p-notes p { margin:0; font:400 11px/1.6 'Red Hat Display', sans-serif; color:#57515F; }
.lgi-p-notes p + p { margin-top:5px; }
.lgi-p-ft { margin-top:auto; padding-top:18px; border-top:1px solid #E8E2D5; }
.lgi-p-cols { display:grid; grid-template-columns:1.1fr 1.2fr 1.1fr 1.1fr; gap:18px; }
.lgi-p-cols div { display:flex; flex-direction:column; gap:2px; min-width:0; font:400 9.5px/1.5 'Red Hat Display', sans-serif; color:#6E6777; }
.lgi-p-cols b { margin-bottom:2px; font:700 8.5px/1.3 'Red Hat Display', sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#1E1A28; }
.lgi-p-cg { margin:14px 0 0; text-align:center; font:400 9px/1.4 'Red Hat Display', sans-serif; letter-spacing:.06em; color:#9C95A5; }
/* the on-screen invoice names the seller and its GSTIN under the number */
.lgi-seller { margin:10px 0 0; font:500 11px/1.4 var(--body); letter-spacing:.02em; color:var(--dim); }

/* the day theme: the toast and the dock's dark tags keep their own ground; the rest reads the tokens above */
:root[data-theme="light"] .ltk-toast { background:linear-gradient(180deg, #FFFFFF, #F7F3EA); box-shadow:0 18px 40px -18px rgba(60,40,80,.45), inset 0 0 0 1px rgba(150,110,18,.3); }
:root[data-theme="light"] .ltk-toast-tx b { color:#1E1A12; } :root[data-theme="light"] .ltk-toast-tx b.up { color:#24805A; } :root[data-theme="light"] .ltk-toast-tx b.down { color:#B0601A; }
:root[data-theme="light"] .ltk-toast-tx span { color:#4A4232; } :root[data-theme="light"] .ltk-toast-tx em { color:#7A6E56; }
:root[data-theme="light"] .ltk-toast-go { color:#6A5000; background:rgba(150,110,18,.12); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ltk-toast { background:linear-gradient(180deg, #FFFFFF, #F7F3EA); box-shadow:0 18px 40px -18px rgba(60,40,80,.45), inset 0 0 0 1px rgba(150,110,18,.3); }
  :root:not([data-theme="dark"]) .ltk-toast-tx b { color:#1E1A12; } :root:not([data-theme="dark"]) .ltk-toast-tx b.up { color:#24805A; } :root:not([data-theme="dark"]) .ltk-toast-tx b.down { color:#B0601A; }
  :root:not([data-theme="dark"]) .ltk-toast-tx span { color:#4A4232; } :root:not([data-theme="dark"]) .ltk-toast-tx em { color:#7A6E56; }
  :root:not([data-theme="dark"]) .ltk-toast-go { color:#6A5000; background:rgba(150,110,18,.12); }
  :root:not([data-theme="dark"]) .ltk-paused, :root:not([data-theme="dark"]) .ltk-keep.paused { color:#3D4F8A; }
  :root:not([data-theme="dark"]) .lra-alert.ltk-gate { --al-rgb:150, 110, 18; }
}

/* =====================================================================================================================
   NOW, COMPOSED (the user, 2026-10-01): "remove the check breath card from the drawer and place it on Now … below the
   Breath through Now section in the same themed style. Also add breath tap button below this"; then "below the check card
   … add the first card from realign progress page in home page themed style … same parameters". Sections on the page,
   not cards: a brass hairline between them, the dial's colours throughout.
   ===================================================================================================================== */
.lhs-now-sec { position:relative; margin-top:24px; padding-top:22px; }
.lhs-now-sec::before { content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--brass-hi) 34%, transparent) 18%, color-mix(in srgb, var(--brass-hi) 34%, transparent) 82%, transparent); }
.lhs-now-sec:empty, .lhs-now-sec[hidden], .lhs-now-check:not(:has(.lqk)) { display:none; }
.lhs-now-bt { margin-top:12px; padding-top:0; }
.lhs-now-bt::before { content:none; }
/* Mahakaal's guess of the breath, under the check's three buttons (ui-lite-bp.js; 2026-10-16: "Just keep the Side | Element | Finger
   width"): three equal cells on the buttons' own symmetry; once checked, a minute green tick or red cross on each cell's top edge; the
   accuracy small and on the left under them */
.lhs-now-guess { margin:18px 0 6px; }
.lhs-now-guess[hidden] { display:none; }
.lbp-card { display:grid; gap:9px; padding:14px 14px 10px; border-radius:20px; background:var(--lhs-well);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-gold) 28%, var(--lhs-line-2)); }
/* the one line saying what the card is: Mahakaal's guess, gold; of what, quiet */
.lbp-say { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; margin:-2px 0 8px; padding-left:2px; font:400 11.5px/1.3 var(--body); color:var(--ink-2); }
.lbp-say b { font:600 10px/1.3 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--lhs-gold); }
.lbp-say span { display:inline-flex; align-items:center; gap:8px; }
.lbp-say span::before { content:""; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }
.lbp-cells { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.lbp-cell { position:relative; display:grid; justify-items:center; gap:3px; padding:4px 4px 2px; text-align:center; }
.lbp-cell + .lbp-cell { box-shadow:inset 1px 0 0 var(--lhs-line-2); }
.lbp-cell b { font:600 17px/1.15 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lbp-cell em { font:400 10.5px/1.2 var(--body); font-style:normal; letter-spacing:.06em; color:var(--ink-2); white-space:nowrap; }
.lbp-card.done .lbp-cell { padding-top:12px; }
.lbp-mk { position:absolute; top:-7px; left:50%; width:16px; height:16px; margin-left:-8px; }
.lbp-mk svg, .lbp-dm svg { display:block; width:100%; height:100%; overflow:visible; }
.lbp-mk circle, .lbp-dm circle { fill:var(--lbp-tone); stroke:none; }
.lbp-mk path, .lbp-dm path { fill:none; stroke:#FFFFFF; stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round; }
.lbp-mk.ok, .lbp-dm.ok { --lbp-tone:var(--lhs-good); }
.lbp-mk.no, .lbp-dm.no { --lbp-tone:var(--lhs-hard); }
/* the foot is the fold's switch: the accuracy small on the left, "Your day" and a chevron on the right */
.lbp-tog { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:30px; margin:0; padding:2px 2px 0; border:0; background:none;
  cursor:pointer; text-align:left; color:var(--ink-2); -webkit-tap-highlight-color:transparent; }
.lbp-acc { font:400 10px/1.2 var(--body); letter-spacing:.04em; color:var(--ink-2); }
.lbp-acc b { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.lbp-togw { display:inline-flex; align-items:center; gap:4px; font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--lhs-gold); }
.lbp-togw svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.lbp-card.open .lbp-togw svg { transform:rotate(180deg); }
.lbp-tog:focus-visible { outline:2px solid var(--lhs-gold); outline-offset:2px; border-radius:8px; }
/* the day opened: two bands sunrise to sunrise (the side, the element), the checks' marks on them, now, the times; three rings; a line */
.lbp-day { display:grid; gap:10px; padding-top:10px; border-top:1px solid var(--lhs-line-2); --lbp-halo:#0B0A10; }
:root[data-theme="light"] .lbp-day { --lbp-halo:#FFFFFF; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lbp-day { --lbp-halo:#FFFFFF; } }
.lbp-plot { position:relative; display:grid; gap:3px; padding:8px 0 8px; }
.lbp-band { display:flex; gap:1px; overflow:hidden; border-radius:6px; }
.lbp-band.s { height:18px; }
.lbp-band.e { height:7px; gap:0; border-radius:4px; }
.lbp-run { display:flex; align-items:center; justify-content:center; min-width:0; overflow:hidden; background:color-mix(in srgb, var(--ink-2) 18%, transparent); }
.lbp-run > span { position:relative; z-index:1; overflow:hidden; white-space:nowrap; padding:0 2px; font:700 9px/1 var(--body); color:#FFFFFF; text-shadow:0 1px 1.5px rgba(0,0,0,.45); }
.lbp-s-both > span { color:#2A1E04; text-shadow:none; }
/* the Swara Code band's own colours (.lband-s, .lel-s) */
.lbp-s-left { background:linear-gradient(180deg, color-mix(in srgb, var(--soma) 85%, white 15%), var(--soma)); }
.lbp-s-right { background:linear-gradient(180deg, color-mix(in srgb, var(--sindoor) 85%, white 15%), var(--sindoor)); }
.lbp-s-both { background:linear-gradient(180deg, #FFF0B4, var(--brass-hi) 70%, var(--brass)); }
.lbp-band.s { position:relative; }
.lbp-band.s::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 48%, rgba(0,0,0,.14)); }
.lbp-dm { position:absolute; z-index:2; width:14px; height:14px; margin-left:-7px; }
.lbp-dm circle { stroke:var(--lbp-halo); stroke-width:2.6; }
.lbp-dm.s { top:-1px; }
.lbp-dm.e { bottom:-1px; }
/* now: the small triangle Today's checks uses (.lband-tri), in the ink of each theme, pointing down at the band */
.lbp-tri { position:absolute; z-index:1; top:1px; width:0; height:0; margin-left:-4px; pointer-events:none;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid var(--ink);
  filter:drop-shadow(0 0 3px color-mix(in srgb, var(--ink) 45%, transparent)); }
.lbp-axis { position:relative; height:12px; margin-top:-6px; font:500 9.5px/12px var(--body); letter-spacing:.03em; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lbp-axis span { position:absolute; top:0; white-space:nowrap; }
.lbp-axis span.mid { transform:translateX(-50%); }
.lbp-axis span.end { right:0; }
.lbp-rings { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.lbp-ring { display:grid; justify-items:center; gap:2px; text-align:center; }
.lbp-rg { position:relative; width:40px; height:40px; }
.lbp-rg svg { width:100%; height:100%; }
.lbp-rg .bg { fill:none; stroke:var(--lhs-line-2); stroke-width:3; }
.lbp-rg .fg { fill:none; stroke:var(--tone, var(--lhs-gold)); stroke-width:3; stroke-linecap:round; }
.lbp-ring.good { --tone:var(--lhs-good); } .lbp-ring.ok { --tone:var(--lhs-ok); } .lbp-ring.hard { --tone:var(--lhs-hard); }
.lbp-rg b { position:absolute; inset:0; display:grid; place-items:center; font:600 12px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.lbp-rg b span { position:relative; display:inline-block; line-height:1; }
.lbp-rg b small { position:relative; top:-.55em; margin-left:1px; font-size:.55em; color:var(--ink-2); }
.lbp-rg b.w3 { font-size:10.5px; }
.lbp-ring em { font:400 10px/1.2 var(--body); font-style:normal; letter-spacing:.04em; color:var(--ink-2); white-space:nowrap; }
.lbp-ring i { font:500 9.5px/1.1 var(--body); font-style:normal; color:color-mix(in srgb, var(--ink-2) 80%, transparent); font-variant-numeric:tabular-nums; }
.lbp-key { display:flex; flex-wrap:wrap; justify-content:center; gap:3px 11px; margin:-2px 0 0; font:400 9.5px/1.2 var(--body); letter-spacing:.03em; color:var(--ink-2); }
.lbp-key span { display:inline-flex; align-items:center; gap:4px; }
.lbp-key i { width:7px; height:7px; border-radius:50%; }
.lbp-dnote { margin:0; font:400 10px/1.35 var(--body); letter-spacing:.02em; color:var(--ink-2); }
/* THE DAY'S SWARA SUTRA ON THE RECORD CARD (ui-lite-swaratantra.js lsuHtml): the guess card's fold and band (.lbp-*), with the sessions
   framed, Kriya's points as small diamonds over the band, and the line under the sides naming the next Kriya; gold while one is open now */
.lsu { margin-top:10px; padding-top:8px; border-top:1px solid var(--lhs-line-2, rgba(255,255,255,.08)); }
.lsu-k { display:grid; gap:2px; min-width:0; text-align:left; }
.lsu-k b { font:700 9.5px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--lhs-gold, #F2D98A); }
.lsu-k em { font:500 12px/1.3 var(--body); font-style:normal; color:var(--ink-2); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lsu.due .lsu-k em { color:var(--lhs-gold, #F2D98A); font-weight:600; }
.lsu.due .lsu-k em::before { content:""; display:inline-block; width:7px; height:7px; margin:0 6px 1px 0; border-radius:50%; background:var(--lhs-gold, #F2D98A); box-shadow:0 0 8px var(--lhs-gold, #F2D98A); vertical-align:middle; }
.lsu-gow svg { transform:rotate(-90deg); }
.lsu.open .lbp-togw svg { transform:rotate(180deg); }
.lsu-plot { padding:12px 0 16px; }
/* under the band: each session a short gold bar, Kriya's point a diamond on it; over it, the checks and now, as on the guess card */
.lsu-ses { position:absolute; bottom:6px; height:3px; min-width:5px; margin:0; border-radius:2px; pointer-events:auto;
  background:linear-gradient(90deg, #FFF0BE, var(--lhs-gold, #F2D98A) 40%, #C99A3E); box-shadow:0 0 6px rgba(var(--lhs-gold-rgb, 242, 217, 138), .6); }
.lsu-pin { position:absolute; z-index:2; bottom:3.5px; width:8px; height:8px; margin-left:-4px; transform:rotate(45deg); border-radius:1.5px;
  background:linear-gradient(135deg, #FFF0BE, var(--lhs-gold, #F2D98A) 55%, #B5802F); box-shadow:0 0 0 1.5px var(--lbp-halo, #0B0A10), 0 0 6px rgba(var(--lhs-gold-rgb, 242, 217, 138), .7); }
.lsu-pin.kept { background:var(--jade, #6FD3A8); box-shadow:0 0 0 1.5px var(--lbp-halo, #0B0A10); }
.lsu-times { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:0; font:500 11px/1.35 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lsu-times em { font:700 9.5px/1.2 var(--body); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--lhs-gold, #F2D98A); }
.lsu-times b { font-weight:600; color:var(--ink); }
.lsu-times .now b { color:var(--lhs-gold, #F2D98A); }
.lsu-times .kept { color:var(--jade, #6FD3A8); } .lsu-times .kept b { color:inherit; }
.lsu-times .past { opacity:.55; }
.lsu .lsu-k em { white-space:normal; }
/* Kriya's time on: the header holds a polished gold button (into SwaraTantra's Kriya) and a small chevron for the day */
.lsu-hd { display:flex; align-items:center; gap:10px; min-height:30px; }
.lsu-hd .lsu-k { flex:1; }
.lsu-cta { flex:none; min-height:34px; margin:0; padding:0 16px; border:0; border-radius:999px; cursor:pointer; white-space:nowrap;
  font:700 12.5px/1 var(--body); letter-spacing:.02em; color:#241405; text-shadow:0 1px 0 rgba(255,240,200,.55);
  background:radial-gradient(130% 70% at 50% 0%, rgba(255,250,228,.55), transparent 60%),
    linear-gradient(180deg, #FFF0BE 0%, #F2CF7A 16%, #DDAE48 42%, #B5802F 74%, #D9A35A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(92,54,12,.45), inset 0 0 0 1px rgba(122,82,22,.55),
    0 0 16px -2px rgba(242,190,90,.6), 0 6px 14px -6px rgba(0,0,0,.6);
  -webkit-tap-highlight-color:transparent; transition:transform .15s ease, filter .2s ease; }
.lsu-cta:active { transform:translateY(1px) scale(.97); }
@media (hover:hover) { .lsu-cta:hover { filter:brightness(1.06); } }
.lsu-cta:focus-visible { outline:2px solid var(--lhs-gold, #F2D98A); outline-offset:3px; }
.lsu-chev { flex:none; width:30px; height:30px; display:grid; place-items:center; margin:0; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; color:var(--lhs-gold, #F2D98A); }
.lsu-chev svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.lsu.open .lsu-chev svg { transform:rotate(180deg); }
/* the whole fold one button while Kriya's time is on — quiet (the user, 2026-10-18: "too loud, make it subtle and elegant"): a slim dark
   row in a fine gold frame, a small gold mark breathing once in, the words in gold, an arrow */
.lsu.one { border-top:0; padding-top:4px; }
.lsu-one { display:flex; align-items:center; gap:11px; width:100%; min-height:48px; margin:0; padding:8px 12px 8px 14px; box-sizing:border-box; cursor:pointer;
  border:1px solid transparent; border-radius:16px; text-align:left; color:var(--lhs-gold, #F2D98A); -webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg, rgba(42,32,18,.92), rgba(22,17,10,.94)) padding-box,
    linear-gradient(150deg, rgba(248,228,170,.75) 0%, rgba(165,122,52,.55) 30%, rgba(92,61,22,.45) 55%, rgba(226,188,104,.7) 80%, rgba(122,83,32,.5) 100%) border-box;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.1), 0 6px 14px -10px rgba(0,0,0,.8); transition:background .2s ease, transform .15s ease; }
.lsu-one:active { transform:scale(.99); }
@media (hover:hover) { .lsu-one:hover { background:linear-gradient(180deg, rgba(52,40,22,.94), rgba(26,20,12,.95)) padding-box,
  linear-gradient(150deg, rgba(255,240,196,.9) 0%, rgba(190,142,64,.7) 30%, rgba(110,74,26,.55) 55%, rgba(240,204,120,.85) 80%, rgba(140,96,38,.6) 100%) border-box; } }
.lsu-one:focus-visible { outline:2px solid var(--lhs-gold, #F2D98A); outline-offset:2px; }
.lsu-od { flex:none; width:8px; height:8px; border-radius:50%; background:var(--lhs-gold, #F2D98A); box-shadow:0 0 0 3px rgba(var(--lhs-gold-rgb, 242, 217, 138), .14), 0 0 8px rgba(var(--lhs-gold-rgb, 242, 217, 138), .6);
  animation:lsuOd 2.4s ease-in-out 2; }
@keyframes lsuOd { 0%, 100% { box-shadow:0 0 0 3px rgba(var(--lhs-gold-rgb, 242, 217, 138), .14), 0 0 8px rgba(var(--lhs-gold-rgb, 242, 217, 138), .6); }
  50% { box-shadow:0 0 0 6px rgba(var(--lhs-gold-rgb, 242, 217, 138), .06), 0 0 12px rgba(var(--lhs-gold-rgb, 242, 217, 138), .8); } }
.lsu-ot { flex:1; display:grid; gap:2px; min-width:0; }
.lsu-ot b { font:600 13.5px/1.2 var(--body); letter-spacing:.01em; color:var(--lhs-gold, #F2D98A); }
.lsu-ot em { font:500 11px/1.3 var(--body); font-style:normal; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lsu-oa { flex:none; width:16px; height:16px; fill:none; stroke:var(--lhs-gold, #F2D98A); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
:root[data-theme="light"] .lsu-one { background:linear-gradient(180deg, rgba(255,252,244,.96), rgba(246,238,222,.96)) padding-box,
  linear-gradient(150deg, #E9CB86 0%, #A27A36 30%, #E8C985 60%, #8E6626 100%) border-box; color:#7A5418; }
:root[data-theme="light"] .lsu-ot b, :root[data-theme="light"] .lsu-oa { color:#7A5418; stroke:#7A5418; }
@media (prefers-reduced-motion:reduce) { .lsu-od { animation:none; } }
.lsu .lbp-togw { flex:none; white-space:nowrap; }
.lsu .lbp-tri.lsu-tri { z-index:3; top:0; margin-left:-5px; border-left-width:5px; border-right-width:5px; border-top:7px solid var(--lhs-gold, #F2D98A);
  filter:drop-shadow(0 0 3px rgba(var(--lhs-gold-rgb, 242, 217, 138), .8)); }
.lsu-nowl { position:absolute; z-index:2; top:8px; bottom:4px; width:1.5px; margin-left:-.75px; border-radius:1px; pointer-events:none;
  background:linear-gradient(180deg, var(--lhs-gold, #F2D98A), rgba(var(--lhs-gold-rgb, 242, 217, 138), .25)); box-shadow:0 0 4px rgba(var(--lhs-gold-rgb, 242, 217, 138), .6); }
@media (max-width:360px) { .lbp-card { padding:13px 11px 9px; } .lbp-cell b { font-size:15.5px; } .lbp-cell em { font-size:10px; letter-spacing:.03em; }
  .lbp-rg { width:36px; height:36px; } .lbp-ring em { font-size:9.5px; letter-spacing:.02em; } }
@media (prefers-reduced-motion:reduce) { .lbp-togw svg { transition:none; } }
/* the card's own "Check your breath" goes: the check stands right under it */
html.lhs-on .lhs-page #lite-summary .lnow .lnow-cta { display:none; }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-acts { margin-top:6px; padding-top:8px; }
/* the breath check, open on the page */
.lhs-now-check { --dr-lit:var(--brass-hi); --dr-ink:var(--ink); --dr-ink-2:var(--ink-2); }
html.lhs-on .lhs-now-check .lqk { gap:14px; padding:0; border-radius:18px; background:none !important; box-shadow:none !important; }
.lhs-now-check .lqk-k { font:600 10px/1.2 var(--body); letter-spacing:.24em; color:var(--brass-hi); }
.lhs-now-check .lqk .lal-next-tx b { font:500 13px/1.3 var(--body); color:var(--ink-2); }
.lhs-now-check .lqk .lal-next.due .lal-next-tx b { color:var(--ink); }
.lhs-now-check .lqk-seg { background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
.lhs-now-check .lqk .lal-ans { gap:10px; }
html.lhs-on .lhs-now-check .lqk .lal-ans button { min-height:58px; border-radius:16px; font-size:15px; background:none; box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
html.lhs-on .lhs-now-check .lqk .lal-ans button:hover { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--tone) 10%, transparent); }
.lhs-now-check.lhs-pulse .lqk { animation:lhsPulse 1.5s cubic-bezier(.22,.9,.24,1) 1; }
@keyframes lhsPulse { 0% { box-shadow:0 0 0 0 rgba(var(--lhs-gold-rgb), 0); } 22% { box-shadow:0 0 0 8px rgba(var(--lhs-gold-rgb), .22); } 100% { box-shadow:0 0 0 22px rgba(var(--lhs-gold-rgb), 0); } }
/* Breath Tap, a row of its own under the check */
html.lhs-on .lhs-now-bt .lbt-disc { padding:10px 6px 10px 2px; border-radius:18px; background:none; box-shadow:none; }
html.lhs-on .lhs-now-bt .lbt-disc:hover { filter:none; background:var(--lhs-well); }
.lhs-now-bt .lbt-orb { width:46px; height:46px; }
.lhs-now-bt .lbt-orb i { animation-iteration-count:3; }
/* Realignment's progress, the same card, worn open */
.lhs-now-prog { --acc-rgb:238, 201, 110; --st-tile:rgba(255,255,255,.04); --st-tile-hi:rgba(255,255,255,.065); --st-line:rgba(255,255,255,.085);
  --st-line-soft:rgba(255,255,255,.055); --st-top:rgba(255,255,255,.06); --st-card:transparent; }
:root[data-theme="light"] .lhs-now-prog { --acc-rgb:150, 110, 18; --st-tile:rgba(40,30,60,.035); --st-tile-hi:rgba(40,30,60,.06); --st-line:rgba(40,30,60,.11); --st-line-soft:rgba(40,30,60,.07); --st-top:rgba(255,255,255,.9); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lhs-now-prog { --acc-rgb:150, 110, 18; --st-tile:rgba(40,30,60,.035); --st-tile-hi:rgba(40,30,60,.06); --st-line:rgba(40,30,60,.11); --st-line-soft:rgba(40,30,60,.07); --st-top:rgba(255,255,255,.9); }
}
html.lhs-on .lhs-now-prog .lraG-card { margin:0; padding:0; border:0; border-radius:0; background:none !important; box-shadow:none !important; }
html.lhs-on .lhs-now-prog .lraG-card::before, html.lhs-on .lhs-now-prog .lraG-card::after { content:none !important; }
.lhs-wait.sm { padding:8px 0; font-size:12.5px; text-align:left; }

/* ---- the check first: the pages past Now wait while a turn is unchecked ---------------------------------------------- */
.lhs-pager.lhs-locked .lhs-page:is([data-page="sv"], [data-page="ka"], [data-page="gh"], [data-page="jy"], [data-page="sk"]) { display:none; }
.lhs-rail .lhs-lock { display:none; }
.lhs-rail .lhs-lock svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lhs-rail.lhs-locked [aria-disabled="true"] { color:color-mix(in srgb, var(--ink) 26%, transparent); }
.lhs-rail.lhs-locked [aria-disabled="true"] .lhs-lock { display:inline-block; width:11px; height:11px; margin-left:5px; vertical-align:-1px; }
.lhs-gate { display:grid; justify-items:center; gap:12px; padding:30px 16px 28px; text-align:center; }
.lhs-gate-ico { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; color:var(--brass-hi);
  background:rgba(var(--lhs-gold-rgb), .08); box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .4); }
.lhs-gate-ico svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lhs-gate h3 { margin:4px 0 0; font:500 22px/1.2 var(--display); color:var(--ink); text-wrap:balance; }
.lhs-gate p { max-width:34ch; margin:0; font:400 14px/1.5 var(--body); color:var(--ink-2); }
.lhs-gate .lhs-act { margin-top:6px; }
.lhs-hint { position:fixed; left:50%; bottom:calc(var(--lite-peek, 96px) + 12px + env(safe-area-inset-bottom)); z-index:9790; display:flex; align-items:center; gap:10px;
  box-sizing:border-box; width:max-content; max-width:min(calc(100vw - 24px), 460px); padding:10px 10px 10px 12px; border-radius:18px; color:#F7F2E6;
  background:linear-gradient(180deg, #24222D, #17151E); box-shadow:0 18px 40px -16px rgba(0,0,0,.85), inset 0 0 0 1px rgba(242,217,138,.3);
  transform:translate(-50%, 14px); opacity:0; pointer-events:none; transition:transform .3s cubic-bezier(.22,.9,.24,1), opacity .3s; }
.lhs-hint.in { transform:translate(-50%, 0); opacity:1; pointer-events:auto; }
.lhs-hint-ico { flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#F2D98A; background:rgba(242,217,138,.1); }
.lhs-hint-ico svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.lhs-hint-tx { display:grid; gap:2px; min-width:0; }
.lhs-hint-tx b { font:600 14px/1.2 var(--body); color:#F7F2E6; }
.lhs-hint-tx em { font:400 12px/1.35 var(--body); font-style:normal; color:#C9C3D6; }
.lhs-hint-go { flex:0 0 auto; height:34px; padding:0 14px; border:0; border-radius:12px; cursor:pointer; font:700 12.5px/1 var(--body); color:#1B1406;
  background:linear-gradient(180deg, #F6E2A0, #D9B84C); }
:root[data-theme="light"] .lhs-hint { color:#1E1A12; background:linear-gradient(180deg, #FFFFFF, #F7F3EA); box-shadow:0 18px 40px -18px rgba(60,40,80,.45), inset 0 0 0 1px rgba(150,110,18,.3); }
:root[data-theme="light"] .lhs-hint-tx b { color:#1E1A12; } :root[data-theme="light"] .lhs-hint-tx em { color:#4A4232; }
:root[data-theme="light"] .lhs-hint-ico { color:#6A5000; background:rgba(150,110,18,.1); }
@media (prefers-reduced-motion: reduce) { .lhs-hint { transition:opacity .2s; transform:translate(-50%, 0); } .lhs-now-check.lhs-pulse .lqk { animation:none; } }

/* ---- the token gate in Realignment, a card of its own (no longer Realignment's caution) ---------------------------- */
.ltk-gate { --al-rgb:242, 217, 138; display:grid; gap:14px; padding:20px 18px 18px; border-radius:24px; overflow:hidden;
  background:radial-gradient(120% 90% at 0% 0%, rgba(var(--al-rgb), .16), transparent 60%), linear-gradient(180deg, #17140F, #0D0B09);
  box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .45), 0 30px 64px -30px rgba(0,0,0,.95); }
:root[data-theme="light"] .ltk-gate { --al-rgb:150, 110, 18; background:radial-gradient(120% 90% at 0% 0%, rgba(var(--al-rgb), .1), transparent 60%), #FFFDF8;
  box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .38), 0 24px 54px -28px rgba(60,40,80,.45); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ltk-gate { --al-rgb:150, 110, 18; background:radial-gradient(120% 90% at 0% 0%, rgba(var(--al-rgb), .1), transparent 60%), #FFFDF8;
    box-shadow:inset 0 0 0 1px rgba(var(--al-rgb), .38), 0 24px 54px -28px rgba(60,40,80,.45); }
}

/* ---- the wide screen, centred (the user, 2026-10-01: "the dial seems shifted downwards. Align everything in center"):
   the dial and the column beside it share one band, from the header's foot to the dock's top, each centred in it ---- */
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  html.lhs-on.lite-has-chart .stage { grid-template-rows:auto; align-items:start; }
  :root:not([data-demo]).lhs-on.lite-has-chart .stage .platearea { grid-row:1; height:calc(100svh - var(--lite-head, 72px) + 8px - var(--lite-peek, 72px)); margin-bottom:0; }
  html.lhs-on.lite-has-chart .lhs-col { grid-column:2; grid-row:1; align-self:start; display:flex; flex-direction:column; justify-content:center;
    min-height:calc(100svh - var(--lite-head, 72px) + 8px - var(--lite-peek, 72px)); margin-top:calc(-1 * var(--lite-headgap, 14px)); }
  html.lhs-on.lite-has-chart .lhs-col > .lhs-rail, html.lhs-on.lite-has-chart .lhs-col > .lhs-pager { align-self:stretch; }
  :root:not([data-demo]).lhs-on.lite-has-chart .stage .dialbox svg,
  :root:not([data-demo]).lhs-on.lite-has-chart .stage .dialbox svg:is(*) {
    width:min(100%, calc(100svh - var(--lite-head, 72px) - var(--lite-peek, 72px) - 40px), 1000px) !important; }
  :root:not([data-demo]).lhs-on.lite-has-chart .stage {
    grid-template-columns:minmax(0, min(calc(100svh - var(--lite-head, 72px) - var(--lite-peek, 72px) - 40px), 1000px)) minmax(340px, 420px); }
}

/* ---- Realignment, recommended or not, on Now: ring meters until the record is firm, then Realignment's own verdict ---- */
.lhs-now-rec { display:grid; gap:12px; }
/* Since sunrise on Now says on or off the Swara Code for every check: the card after a check would say it twice (the user, 2026-10-03) */
html.lhs-on .lhs-now-check .lal-mcard { display:none; }
/* the rings centred under the line, each in its third as the ways row above it (the user, 2026-10-03: "Center align rings with the
   yelow separator line aboe"); Realignment's quiet line under them, centred too */
.lhs-now-rec .lhs-mrs li { justify-content:center; }
/* the Test Subject's record buttons, shut: one quiet line says why */
.lal-demo { display:flex; align-items:center; gap:8px; margin:8px 0 0; font:500 12px/1.4 var(--body); color:var(--ink-2); }
.lal-demo i { flex:none; width:7px; height:7px; border-radius:50%; background:var(--brass-hi); opacity:.8; }

.lhs-now-rec .lhs-rs.note { text-align:center; }
.lhs-rec-say { margin:0; font:400 13.5px/1.5 var(--body); color:var(--ink-2); }
.lhs-mrs { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:0; padding:0; }
.lhs-mrs li { display:flex; align-items:center; gap:9px; min-width:0; }
.lhs-mr { position:relative; flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; }
.lhs-mr svg { position:absolute; inset:0; width:100%; height:100%; }
.lhs-mr .t { fill:none; stroke:var(--lhs-line-2); stroke-width:3; }
.lhs-mr .a { fill:none; stroke:var(--brass-hi); stroke-width:3; stroke-linecap:round; }
.lhs-mr b { position:relative; font:600 13px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.lhs-mr b svg { position:static; width:16px; height:16px; fill:none; stroke:var(--lhs-good); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.lhs-mrs li.ok .a { stroke:var(--lhs-good); }
.lhs-mr-k { display:grid; gap:1px; min-width:0; }
.lhs-mr-k b { font:600 12px/1.15 var(--body); color:var(--ink); }
.lhs-mr-k em { overflow:hidden; font:400 11px/1.2 var(--body); font-style:normal; color:var(--ink-2); white-space:nowrap; text-overflow:ellipsis; }
/* three abreast at every width (the user, 2026-10-04: on some phones the rings stood one under another — every screen under 360 px,
   a small phone or a large display size): there each ring's words go under it, centred, and the row stays a row */
@media (max-width:359px) {
  .lhs-mrs { gap:6px; }
  .lhs-mrs li { flex-direction:column; justify-content:flex-start; gap:5px; text-align:center; }
  .lhs-mr-k { justify-items:center; }
  .lhs-mr-k em { white-space:normal; overflow:visible; text-overflow:clip; }
}
.lhs-rec { display:flex; align-items:flex-start; gap:12px; }
.lhs-rec-ico { flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--brass-hi);
  background:rgba(var(--lhs-gold-rgb), .08); box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .4); }
.lhs-rec-ico svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.lhs-rec.good .lhs-rec-ico { color:var(--lhs-good); background:color-mix(in srgb, var(--lhs-good) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 45%, transparent); }
.lhs-rec > div { display:grid; gap:4px; min-width:0; }
.lhs-rec b { font:500 19px/1.2 var(--display); color:var(--ink); }
.lhs-rec.need b { color:var(--brass-hi); }
.lhs-rec.good b { color:var(--lhs-good); }
.lhs-rec p { margin:0; font:400 13.5px/1.5 var(--body); color:var(--ink-2); }
.lhs-now-rec .lhs-acts { padding-top:0; }
.lhs-now-rec .lhs-act { --pa:var(--lhs-now); }
.lhs-now-sec .lhs-sechd { margin-bottom:2px; }

@media (min-width:760px) { .lhd { max-width:520px; } }

/* ---- Now: more air between Shiva's section and the breath check (the user, 2026-10-01) ---- */
.lhs-now-check { margin-top:38px; padding-top:28px; }

/* ---- Your progress, a fold under the recommendation ---- */
.lhs-now-rec { --acc-rgb:238, 201, 110; --st-tile:rgba(255,255,255,.04); --st-tile-hi:rgba(255,255,255,.065); --st-line:rgba(255,255,255,.085);
  --st-line-soft:rgba(255,255,255,.055); --st-top:rgba(255,255,255,.06); --st-card:transparent; }
:root[data-theme="light"] .lhs-now-rec { --acc-rgb:150, 110, 18; --st-tile:rgba(40,30,60,.035); --st-tile-hi:rgba(40,30,60,.06); --st-line:rgba(40,30,60,.11); --st-line-soft:rgba(40,30,60,.07); --st-top:rgba(255,255,255,.9); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lhs-now-rec { --acc-rgb:150, 110, 18; --st-tile:rgba(40,30,60,.035); --st-tile-hi:rgba(40,30,60,.06); --st-line:rgba(40,30,60,.11); --st-line-soft:rgba(40,30,60,.07); --st-top:rgba(255,255,255,.9); }
}
.lhs-fold { display:grid; gap:14px; margin-top:4px; padding-top:12px; border-top:1px solid var(--lhs-line); }
.lhs-fold-b { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:4px 2px; border:0; background:none; cursor:pointer; text-align:left;
  color:var(--ink); -webkit-tap-highlight-color:transparent; }
.lhs-fold-b .lhs-eb { flex:0 0 auto; color:var(--brass-hi); }
.lhs-fold-b em { flex:1 1 auto; min-width:0; overflow:hidden; font:500 13px/1.3 var(--body); font-style:normal; color:var(--ink-2); white-space:nowrap; text-overflow:ellipsis; }
.lhs-fold-b svg { flex:0 0 auto; width:18px; height:18px; margin-left:auto; fill:none; stroke:var(--ink-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s cubic-bezier(.22,.9,.24,1); }
.lhs-fold.open .lhs-fold-b svg { transform:rotate(180deg); }
.lhs-fold-b:hover em { color:var(--ink); }
.lhs-fold-b:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:10px; }
.lhs-fold-in { animation:lrhIn .28s cubic-bezier(.22,.9,.24,1) both; }
html.lhs-on .lhs-fold-in .lraG-card { margin:0; padding:0; border:0; border-radius:0; background:none !important; box-shadow:none !important; }
html.lhs-on .lhs-fold-in .lraG-card::before, html.lhs-on .lhs-fold-in .lraG-card::after { content:none !important; }
.lhs-fold-in .lraG-hd .lal-eyebrow { display:none; }
@media (prefers-reduced-motion: reduce) { .lhs-fold-in { animation:none; } .lhs-fold-b svg { transition:none; } }

/* ---- the swipe pages lay out by their own column, not the screen (the user, 2026-10-01: the right side overflowing on desktop and
   tablet): Realignment's progress card keeps its one-column form inside the pages, however wide the screen ---- */
html.lhs-on .lhs-col .lraG-main { grid-template-columns:minmax(0, 1fr) !important; grid-template-areas:none !important; gap:16px; }
html.lhs-on .lhs-col .lraG-left, html.lhs-on .lhs-col .lraG-right { display:grid !important; }
html.lhs-on .lhs-col :is(.lraG-hero, .lraG-chart, .lraG-goals, .lraG-tiles) { grid-area:auto !important; }
html.lhs-on .lhs-col .lhs-in { overflow-wrap:anywhere; }

/* =====================================================================================================================
   POLISH (the user, 2026-10-01: "make everything highly polished and structured and aesthetic")
   ===================================================================================================================== */
/* the drawer's first stop: one column of equal widths, centred — the check line over Start Swara Alignment, the pair of ways
   on under it, the wallet's line last (the balance shown once) */
.lhd-bar { justify-content:center; min-height:26px; padding:0; }
.lhd-st { flex:0 1 auto; text-align:center; }
.lhd-bar .ltk-st { justify-content:center; }
.lite-has-chart .litedrawer .liteacts > .lhd, .lite-has-chart .litedrawer .liteacts > .ltk-dwrow { width:100%; max-width:520px; margin-left:auto; margin-right:auto; box-sizing:border-box; }
.lite-has-chart .litedrawer .liteacts > .lhd { padding:0; }
.lite-has-chart .litedrawer .liteacts > .ltk-dwrow { margin-top:0; }
.lhd { gap:12px; }

/* Your progress, opened from Start Swara Alignment: Start Swara Realignment at its foot */
.lhs-prog-go { display:grid; justify-items:center; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid var(--lhs-line); text-align:center; }
.lhs-prog-go span { max-width:36ch; font:400 12px/1.45 var(--body); color:var(--ink-2); }
.lhs-act.lhs-act-main { justify-content:center; width:100%; height:54px; border-radius:18px; font:700 15px/1 var(--body); color:#1B1406;
  background:linear-gradient(180deg, #F8E9B8 0%, #EFD489 46%, #D6B24A 100%); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 14px 30px -16px rgba(214,178,74,.85); }
.lhs-act.lhs-act-main:hover { filter:brightness(1.05); background:linear-gradient(180deg, #F8E9B8 0%, #EFD489 46%, #D6B24A 100%); }
.lhs-act.lhs-act-main svg { stroke:#1B1406; }
.lhs-fold-b { padding:6px 2px; }

/* Left, Both and Right on Now: lit plainly in the dial's brass on the dark ground, and solid on the day's paper */
html.lhs-on .lhs-now-check .lqk .lal-ans button {
  color:var(--ink); font:500 16px/1 var(--display);
  background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(240,213,126,.36), 0 12px 26px -18px rgba(0,0,0,.95); }
html.lhs-on .lhs-now-check .lqk .lal-ans button:hover {
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 75%, transparent), 0 0 0 4px color-mix(in srgb, var(--tone) 14%, transparent); }
html.lhs-on .lhs-now-check .lqk .lal-ans button i { width:30px; height:12px; }
:root[data-theme="light"].lhs-on .lhs-now-check .lqk .lal-ans button {
  color:#241D10; background:linear-gradient(180deg, #FFFFFF, #FBF7EE);
  box-shadow:inset 0 0 0 1px rgba(122,91,10,.38), 0 1px 2px rgba(70,52,20,.08), 0 10px 22px -16px rgba(70,52,20,.45); }
:root[data-theme="light"].lhs-on .lhs-now-check .lqk .lal-ans button:hover {
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 80%, #5A4410), 0 0 0 4px color-mix(in srgb, var(--tone) 14%, transparent), 0 10px 22px -16px rgba(70,52,20,.45); }
:root[data-theme="light"].lhs-on .lhs-now-check .lqk-seg { background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(122,91,10,.3); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]).lhs-on .lhs-now-check .lqk .lal-ans button {
    color:#241D10; background:linear-gradient(180deg, #FFFFFF, #FBF7EE);
    box-shadow:inset 0 0 0 1px rgba(122,91,10,.38), 0 1px 2px rgba(70,52,20,.08), 0 10px 22px -16px rgba(70,52,20,.45); }
  :root:not([data-theme="dark"]).lhs-on .lhs-now-check .lqk-seg { background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(122,91,10,.3); }
}

/* ---- Start Swara Realignment: a quiet row that unfolds Your progress (never a button that starts anything by itself) ---- */
.lhs-fold { display:grid; gap:14px; margin-top:6px; padding-top:0; border-top:0; }
.lhs-fold-b { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; width:100%; min-height:62px; padding:10px 12px 10px 10px;
  border:0; border-radius:18px; cursor:pointer; text-align:left; color:var(--ink); -webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg, rgba(var(--lhs-gold-rgb), .07), rgba(var(--lhs-gold-rgb), .02)); box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .32);
  transition:box-shadow .2s, background .2s; }
.lhs-fold-b:hover { box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .55); }
.lhs-fold-b:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:18px; }
.lhs-fold-ico { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--brass-hi); background:rgba(var(--lhs-gold-rgb), .1); }
.lhs-fold-ico svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lhs-fold-tx { display:grid; gap:3px; min-width:0; }
.lhs-fold-tx b { font:600 15px/1.2 var(--body); color:var(--ink); }
.lhs-fold-tx em { overflow:hidden; font:400 12.5px/1.3 var(--body); font-style:normal; color:var(--ink-2); white-space:nowrap; text-overflow:ellipsis; }
.lhs-fold-chev { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
.lhs-fold-b .lhs-fold-chev svg { width:16px; height:16px; margin:0; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s cubic-bezier(.22,.9,.24,1); }
.lhs-fold.open .lhs-fold-b .lhs-fold-chev svg { transform:rotate(180deg); }
.lhs-fold.open .lhs-fold-b { border-radius:18px; }
/* inside: the practice first, then Realignment's own card (its own heading shown) */
.lhs-fold-in .lraG-hd .lal-eyebrow { display:inline; }
.lhs-prog-top { display:grid; justify-items:stretch; gap:8px; padding:4px 0 16px; border-bottom:1px solid var(--lhs-line); }
.lhs-prog-top > span { font:400 12px/1.45 var(--body); color:var(--ink-2); text-align:center; }
.lhs-prog-top .lra-nextline { width:100%; margin:0; }
.lhs-prog-wait { margin:0; padding:10px 12px; border-radius:14px; font:400 13px/1.5 var(--body); color:var(--ink-2); background:var(--lhs-well); }
.lhs-prog-more { justify-self:center; margin-top:4px; }
.lhs-fold-in { display:grid; gap:16px; }

/* ---- the breath check says what it earns now, and when that drops ---- */
.lhs-earn:empty, .lhs-earn[hidden] { display:none; }
.lhs-earn { margin-top:14px; }
.lhs-earn-row { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:4px 10px; padding:10px 12px; border-radius:14px;
  background:linear-gradient(100deg, rgba(var(--lhs-gold-rgb), .09), rgba(var(--lhs-gold-rgb), .02)); box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .24); }
.lhs-earn-row .ltk-badge { grid-row:1 / span 2; }
.lhs-earn-v { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; min-width:0; }
.lhs-earn-v span { font:600 10px/1.2 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--brass-hi); }
.lhs-earn-v b { font:600 14px/1.2 var(--display); color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
.lhs-earn-row em { grid-column:2; font:400 12px/1.4 var(--body); font-style:normal; color:var(--ink-2); }
:root[data-theme="light"] .lhs-earn-row { background:linear-gradient(100deg, rgba(150,110,18,.08), #FFFFFF); box-shadow:inset 0 0 0 1px rgba(150,110,18,.28); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lhs-earn-row { background:linear-gradient(100deg, rgba(150,110,18,.08), #FFFFFF); box-shadow:inset 0 0 0 1px rgba(150,110,18,.28); } }

/* ---- Now, the breath given room (the user, 2026-10-01): the breath leaves Shiva's nostril and, as it thins, takes the running
   element's form in its own colour (ui-lite-nowcard.js) — the section holds that whole fall, so nothing below covers it ---- */
html.lhs-on .lhs-now-top { padding-bottom:30px; }
.lhs-now-check { margin-top:42px; }
/* the card's own two ways on leave it: the check is right under it, and How to check is on the check */
html.lhs-on .lhs-page #lite-summary .lnow .lnow-acts { display:none; }
.lnow-el.none { color:var(--dim); }
/* on the day's paper the breath and its forms are drawn dark, in their own hues, so they stay plain to see */
:root[data-theme="light"].lhs-on .lhs-page #lite-summary .lnow .lnow-mistcv { filter:invert(1) hue-rotate(180deg) saturate(1.6) brightness(.9); mix-blend-mode:multiply; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]).lhs-on .lhs-page #lite-summary .lnow .lnow-mistcv { filter:invert(1) hue-rotate(180deg) saturate(1.6) brightness(.9); mix-blend-mode:multiply; }
}
/* ---- a little more air either side of the rail (the user, 2026-10-01) ---- */
html.lhs-on.lite-has-chart .lhs-rail { margin-top:16px; }
.lhs-page[data-page="now"] .lhs-in { padding-top:24px; }
.lhs-in { padding-top:20px; }
/* ---- How to check, on the breath card ---- */
.lhs-how { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; width:100%; margin-top:10px; padding:10px 12px 10px 10px;
  border:0; border-radius:16px; cursor:pointer; text-align:left; color:var(--ink); background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line);
  -webkit-tap-highlight-color:transparent; transition:box-shadow .2s; }
.lhs-how:hover { box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .45); }
.lhs-how:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lhs-how-ico { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:var(--brass-hi); background:rgba(var(--lhs-gold-rgb), .1); }
.lhs-how-ico svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.lhs-how-tx { display:grid; gap:2px; min-width:0; }
.lhs-how-tx b { font:600 14px/1.2 var(--body); color:var(--ink); }
.lhs-how-tx em { font:400 12px/1.3 var(--body); font-style:normal; color:var(--ink-2); }
.lhs-how > svg { width:16px; height:16px; fill:none; stroke:var(--ink-2); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
:root[data-theme="light"] .lhs-how { background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(122,91,10,.22); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lhs-how { background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(122,91,10,.22); } }

/* ---- what a check earns now, on the switch itself (the user, 2026-10-01) ---- */
.lqk-seg button { display:inline-flex; align-items:center; gap:6px; }
.lqk-tok { padding:2px 6px; border-radius:999px; font:700 10.5px/1 var(--display); font-variant-numeric:tabular-nums lining-nums; letter-spacing:.01em;
  color:var(--lhs-gold, #F2D98A); background:rgba(var(--lhs-gold-rgb, 242, 217, 138), .14); }
.lqk-seg button[aria-selected="true"] .lqk-tok { color:#1B1406; background:rgba(27,20,6,.14); }
html.lhs-on .lhs-now-check .lqk-seg button { min-height:30px; padding:0 12px; font-size:12px; }

/* ---- Your progress, simple (the user, 2026-10-01): a fold of the day-by-day analysis; "Eligible for realignment" on it while shut
   once the record is firm; at the base, the way to the drawer's Start Swara Realignment ---- */
.lhs-fold-tx .lhs-elig { justify-self:start; display:inline-flex; align-items:center; gap:5px; margin-top:4px; padding:4px 9px 4px 7px; border-radius:999px;
  font:700 10.5px/1 var(--body); font-style:normal; letter-spacing:.04em; color:var(--lhs-good); background:color-mix(in srgb, var(--lhs-good) 13%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 42%, transparent); }
.lhs-fold-tx .lhs-elig svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.lhs-rec-go { display:grid; justify-items:stretch; gap:8px; margin-top:4px; text-align:center; }
.lhs-rec-go > span { font:400 12px/1.45 var(--body); color:var(--ink-2); }
.lhs-rec-go .lhs-act-main svg { width:17px; height:17px; }
/* the token notice for Start Swara Realignment */
.lpk-sheet.lpk-pay { max-width:440px; }
.lhs-pay { display:grid; justify-items:center; gap:12px; padding:16px 0 6px; text-align:center; }
.lhs-pay .ltk-coin { filter:drop-shadow(0 12px 24px rgba(0,0,0,.4)); }
.lhs-pay h3 { margin:2px 0 0; font:500 22px/1.2 var(--display); color:var(--ink); }
.lhs-pay > p { max-width:36ch; margin:0; font:400 13.5px/1.5 var(--body); color:var(--ink-2); }
.lhs-pay-tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; width:100%; margin:4px 0 2px; }
.lhs-pay-tiles span { display:grid; gap:4px; padding:12px; border-radius:16px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lhs-pay-tiles em { font:600 10px/1 var(--body); font-style:normal; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
.lhs-pay-tiles b { font:500 26px/1 var(--display); font-variant-numeric:tabular-nums lining-nums; color:var(--ink); }
.lhs-pay-tiles .ok b { color:var(--ltk-up); } .lhs-pay-tiles .short b { color:var(--ltk-down); }
.lhs-pay .ltk-go, .lhs-pay .ltk-ghost { width:100%; }
.lhs-pay .ltk-ghost { height:44px; }
.lhs-pay-short { margin:0; font:500 13.5px/1.45 var(--body); color:var(--ltk-down); }

/* ---- Left, Both, Right on Now: raised discs, lit from above (the user, 2026-10-01: "bigger circular disc with elevated lighting
   effect giving appearance of elevated button") — each with its side's colour at the rim, pressing in when touched ---- */
html.lhs-on .lhs-now-check .lqk .lal-ans { grid-template-columns:repeat(3, minmax(0, 1fr)); justify-items:center; align-items:center; gap:8px; padding:8px 0 6px; }
html.lhs-on .lhs-now-check .lqk .lal-ans button {
  --disc:clamp(86px, 25vw, 108px);
  width:var(--disc); height:var(--disc); min-height:0; padding:0; border:0; border-radius:50%;
  display:grid; grid-auto-flow:row; place-content:center; justify-items:center; gap:9px;
  font:600 14.5px/1 var(--body); letter-spacing:.01em; color:#F7F2E6;
  background:
    radial-gradient(110% 110% at 32% 18%, rgba(255,255,255,.26), rgba(255,255,255,0) 46%),
    radial-gradient(90% 70% at 50% 108%, color-mix(in srgb, var(--tone) 34%, transparent), transparent 70%),
    linear-gradient(180deg, #33303D 0%, #1E1C26 55%, #141219 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.32),
    inset 0 -4px 8px rgba(0,0,0,.5),
    0 0 0 2px color-mix(in srgb, var(--tone) 62%, transparent),
    0 12px 20px -8px rgba(0,0,0,.9),
    0 22px 40px -18px color-mix(in srgb, var(--tone) 70%, transparent);
  transition:transform .14s ease, box-shadow .2s ease, filter .2s ease; -webkit-tap-highlight-color:transparent; }
html.lhs-on .lhs-now-check .lqk .lal-ans button:hover {
  filter:brightness(1.08);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.36), inset 0 -4px 8px rgba(0,0,0,.5),
    0 0 0 2.5px color-mix(in srgb, var(--tone) 85%, transparent), 0 14px 24px -8px rgba(0,0,0,.9),
    0 24px 46px -16px color-mix(in srgb, var(--tone) 85%, transparent); }
html.lhs-on .lhs-now-check .lqk .lal-ans button:active {
  transform:translateY(3px) scale(.97);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 5px rgba(0,0,0,.55),
    0 0 0 2px color-mix(in srgb, var(--tone) 70%, transparent), 0 5px 10px -6px rgba(0,0,0,.9),
    0 10px 20px -14px color-mix(in srgb, var(--tone) 60%, transparent); }
html.lhs-on .lhs-now-check .lqk .lal-ans button:focus-visible { outline:2px solid var(--tone); outline-offset:4px; }
html.lhs-on .lhs-now-check .lqk .lal-ans button i { width:30px; height:12px; }
html.lhs-on .lhs-now-check .lqk .lal-ans button b { font:inherit; color:inherit; }
html.lhs-on .lhs-now-check .lqk .lal-ans button.is-done i { width:24px; height:24px; }
html.lhs-on .lhs-now-check .lqk .lal-ans button:disabled { cursor:default; }
/* the day theme: ivory discs, raised on the paper */
:root[data-theme="light"].lhs-on .lhs-now-check .lqk .lal-ans button {
  color:#241D10;
  background:
    radial-gradient(110% 110% at 32% 18%, #FFFFFF, rgba(255,255,255,0) 50%),
    radial-gradient(90% 70% at 50% 108%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #FFFDF8 0%, #F4ECDC 60%, #E8DCC3 100%);
  box-shadow:
    inset 0 1.5px 0 #FFFFFF, inset 0 -4px 8px rgba(120,90,30,.2),
    0 0 0 2px color-mix(in srgb, var(--tone) 70%, #8A6A12 15%),
    0 12px 20px -9px rgba(80,60,20,.5), 0 22px 36px -20px color-mix(in srgb, var(--tone) 60%, transparent); }
:root[data-theme="light"].lhs-on .lhs-now-check .lqk .lal-ans button:active { transform:translateY(3px) scale(.97);
  box-shadow:inset 0 1px 0 #FFFFFF, inset 0 -2px 5px rgba(120,90,30,.22), 0 0 0 2px color-mix(in srgb, var(--tone) 75%, #8A6A12 15%), 0 5px 10px -6px rgba(80,60,20,.5); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]).lhs-on .lhs-now-check .lqk .lal-ans button {
    color:#241D10;
    background:
      radial-gradient(110% 110% at 32% 18%, #FFFFFF, rgba(255,255,255,0) 50%),
      radial-gradient(90% 70% at 50% 108%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 70%),
      linear-gradient(180deg, #FFFDF8 0%, #F4ECDC 60%, #E8DCC3 100%);
    box-shadow:
      inset 0 1.5px 0 #FFFFFF, inset 0 -4px 8px rgba(120,90,30,.2),
      0 0 0 2px color-mix(in srgb, var(--tone) 70%, #8A6A12 15%),
      0 12px 20px -9px rgba(80,60,20,.5), 0 22px 36px -20px color-mix(in srgb, var(--tone) 60%, transparent); }
}
@media (prefers-reduced-motion: reduce) { html.lhs-on .lhs-now-check .lqk .lal-ans button { transition:none; } }

/* ---- Today's tiles: the body, mind and spirit card across the full width, read on the card (no link out) ---- */
.lhs-tile.wide { grid-column:1 / -1; min-height:0; }
.lhs-tile.static { cursor:default; }
.lhs-tile.static:hover { box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-tile.static:active { transform:none; }
.lhs-bms { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:4px 0 2px; }
.lhs-bms-c { display:grid; align-content:start; gap:3px; min-width:0; padding:10px; border-radius:14px; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-bms-c b { font:500 22px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
.lhs-bms-c span { font:600 10px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--ta)); }
.lhs-bms-c em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); overflow-wrap:anywhere; }
.lhs-tile.rec.wide { grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:12px; }
.lhs-tile.rec.wide .lhs-eb { grid-column:1 / -1; }
@media (max-width:339px) { .lhs-bms { grid-template-columns:minmax(0, 1fr); } }

/* ---- Your progress: the icon stays put; only the chevron turns (one rule had turned every icon in the row) ---- */
.lhs-fold-b svg { margin-left:0; transition:none; }
.lhs-fold.open .lhs-fold-b svg { transform:none; }
.lhs-fold-b .lhs-fold-ico svg { width:20px; height:20px; stroke:currentColor; }
.lhs-fold-b .lhs-fold-chev svg { transition:transform .25s cubic-bezier(.22,.9,.24,1); }
.lhs-fold.open .lhs-fold-b .lhs-fold-chev svg { transform:rotate(180deg); }
.lhs-fold-ico, .lhs-fold-chev { flex:0 0 auto; align-self:center; }
@media (prefers-reduced-motion: reduce) { .lhs-fold-b .lhs-fold-chev svg { transition:none; } }

/* ---- the nostril's name keeps its descenders: its gradient is painted inside the line box, so the box makes room for a g or a y ---- */
html.lhs-on .lhs-page #lite-summary .lnow .lcalm-nadi { line-height:1.14; padding-bottom:.1em; margin-bottom:-.08em; }

/* ---- Start Swara Realignment needs two things: a firm record and the tokens — each ticked or still to come ---- */
.ltk-needs { list-style:none; display:grid; gap:8px; width:100%; margin:4px 0 2px; padding:0; text-align:left; }
.ltk-needs li { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:10px; padding:10px 12px; border-radius:14px;
  background:var(--st-tile, rgba(255,255,255,.04)); box-shadow:inset 0 0 0 1px var(--st-line-soft, rgba(255,255,255,.06)); }
.ltk-needs li svg { width:22px; height:22px; padding:4px; border-radius:50%; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.ltk-needs li.ok svg { stroke:var(--ltk-up); background:color-mix(in srgb, var(--ltk-up) 14%, transparent); }
.ltk-needs li.no svg { stroke:var(--ltk-down); stroke-width:2; background:color-mix(in srgb, var(--ltk-down) 12%, transparent); }
.ltk-needs li span { display:grid; gap:2px; min-width:0; }
.ltk-needs li b { font:600 13.5px/1.25 var(--body); color:var(--ink); }
.ltk-needs li em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.ltk-needs li.no em { color:var(--ltk-down); }
.ltk-gate .ltk-needs { margin:0; }
/* ---- Your progress, dim until the targets are met (the user, 2026-10-01) ---- */
.lhs-fold.dim:not(.open) .lhs-fold-b { opacity:.5; filter:saturate(.35); }
.lhs-fold.dim:not(.open) .lhs-fold-b:hover { opacity:.72; }

/* =====================================================================================================================
   THE SWIPE PAGES, ROUND TWO (the user, 2026-10-01): what suits the breath now, an act's day on a tap, before you begin for
   the eligible, My table, Realignment in one word, today's sky; and Left, Both, Right held together on a tablet
   ===================================================================================================================== */
/* ---- the three discs: their own width each, close together, centred (a tablet spread them a third of the page apart) ---- */
html.lhs-on .lhs-now-check .lqk .lal-ans { --disc:clamp(86px, 25vw, 108px); grid-template-columns:repeat(3, var(--disc)); justify-content:center; column-gap:clamp(12px, 5vw, 26px); }
html.lhs-on .lhs-now-check .lqk .lal-ans button { --disc:inherit; }
@media (max-width:359px) { html.lhs-on .lhs-now-check .lqk .lal-ans { --disc:clamp(72px, 24vw, 86px); column-gap:8px; } }

/* ---- Suits your breath now: Kaarya's and Ghatana's own lists, on top of their pages ---- */
.lhs-suit { display:grid; gap:10px; padding:14px 14px 12px; border-radius:20px;
  background:radial-gradient(120% 140% at 0% 0%, rgba(var(--pa, var(--lhs-now)), .1), transparent 62%), var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-suit .lhs-sechd { align-items:flex-start; }
.lhs-btag { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:5px; min-width:0; font:500 12px/1.35 var(--body); color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums; }
.lhs-btag.code { color:var(--dim); }
.lhs-nos { flex:0 0 auto; display:inline-block; width:22px; height:9px; }
.lhs-nos.n-ida { background:radial-gradient(circle at 5px 4.5px, var(--lhs-ida) 0 3.6px, transparent 4px), radial-gradient(circle at 17px 4.5px, var(--lhs-line-2) 0 3.6px, transparent 4px); }
.lhs-nos.n-pingala { background:radial-gradient(circle at 5px 4.5px, var(--lhs-line-2) 0 3.6px, transparent 4px), radial-gradient(circle at 17px 4.5px, var(--lhs-pingala) 0 3.6px, transparent 4px); }
.lhs-nos.n-sushumna { background:radial-gradient(circle at 5px 4.5px, var(--brass-hi) 0 3.6px, transparent 4px), radial-gradient(circle at 17px 4.5px, var(--brass-hi) 0 3.6px, transparent 4px); }
.lhs-elsw { flex:0 0 auto; display:inline-block; width:9px; height:9px; border-radius:3px; vertical-align:0; }
.lhs-sas { display:flex; flex-wrap:wrap; gap:7px; }
.lhs-sa { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 13px 0 11px; border:0; border-radius:999px; cursor:pointer; font:500 13px/1.2 var(--body); color:var(--ink);
  background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line-2); transition:box-shadow .2s, background .2s, transform .12s; -webkit-tap-highlight-color:transparent; }
.lhs-sa:hover { box-shadow:inset 0 0 0 1px rgba(var(--pa, var(--lhs-now)), .55); }
.lhs-sa:active { transform:scale(.97); }
.lhs-sa:focus-visible { outline:2px solid rgb(var(--pa, var(--lhs-now))); outline-offset:2px; }
.lhs-sa.on { background:rgba(var(--pa, var(--lhs-now)), .14); box-shadow:inset 0 0 0 1.5px rgba(var(--pa, var(--lhs-now)), .65); }
.lhs-sa-d { flex:0 0 auto; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--lhs-line-2); }
.lhs-sa.t-excellent .lhs-sa-d, .lhs-suit-k .lhs-sa-d.t-excellent { background:var(--lhs-good); box-shadow:0 0 0 3px color-mix(in srgb, var(--lhs-good) 22%, transparent), 0 0 9px color-mix(in srgb, var(--lhs-good) 55%, transparent); }
.lhs-sa.t-good .lhs-sa-d, .lhs-suit-k .lhs-sa-d.t-good { background:var(--lhs-good); }
.lhs-sa.t-workable .lhs-sa-d, .lhs-suit-k .lhs-sa-d.t-workable { background:var(--lhs-ok); }
.lhs-sa.g-on .lhs-sa-d, .lhs-suit-k .lhs-sa-d.g-on { background:var(--lhs-good); box-shadow:0 0 0 3px color-mix(in srgb, var(--lhs-good) 22%, transparent); }
.lhs-sa.g-soft .lhs-sa-d { background:color-mix(in srgb, var(--lhs-ok) 65%, transparent); }
.lhs-sa.g-hard .lhs-sa-d { background:var(--lhs-hard); }
.lhs-sa.g-off .lhs-sa-d, .lhs-suit-k .lhs-sa-d.g-off { background:transparent; box-shadow:inset 0 0 0 1.5px var(--lhs-line-2); }
.lhs-suit-k { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:0; font:500 11px/1.3 var(--body); color:var(--dim); }
.lhs-suit-k span { display:inline-flex; align-items:center; gap:5px; }
.lhs-suit-k em { margin-left:auto; font-style:normal; color:var(--ink-2); }
.lhs-suit-lede { margin:0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.lhs-suit .lhs-link.sm { justify-self:start; margin-left:-10px; }
.lhs-suit .lhs-link svg, .lhs-prepl-ico svg { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.lhs-say.sm { font-size:13px; }
.lhs-legend .lhs-legend-go { margin:-8px 0 -8px auto; }

/* ---- An act's (or a matter's) day, on a tap: every window in the next 24 hours, a + for each ---- */
.lpk-lhsday .lhs-dayb { display:grid; gap:12px; padding:2px 0 6px; }
.lhs-dayb.k-ka { --pa:var(--lhs-ka); } .lhs-dayb.k-gh { --pa:var(--lhs-gh); }
.lhs-day-k { display:flex; flex-wrap:wrap; align-items:center; gap:3px 6px; margin:0; font:500 13.5px/1.4 var(--body); color:var(--ink); }
.lhs-day-k em { flex-basis:100%; font:400 12px/1.35 var(--body); font-style:normal; color:var(--dim); }
.lhs-dayb > .lhs-tier { justify-self:start; }
.lhs-dw { list-style:none; display:grid; margin:0; padding:0; }
.lhs-dw li { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:10px; padding:9px 2px; border-top:1px solid var(--lhs-line); }
.lhs-dw li:first-child { border-top:0; }
.lhs-dw-d { width:9px; height:9px; border-radius:50%; background:var(--lhs-ok); }
.lhs-dw li.t-excellent .lhs-dw-d, .lhs-dw li.t-good .lhs-dw-d { background:var(--lhs-good); }
.lhs-dw li.t-excellent .lhs-dw-d { box-shadow:0 0 0 3px color-mix(in srgb, var(--lhs-good) 22%, transparent); }
.lhs-dw-t { display:grid; gap:3px; min-width:0; }
.lhs-dw-t b { display:flex; align-items:baseline; gap:6px; font:500 15px/1.15 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lhs-dw-t b small { font:600 9.5px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.lhs-dw-t em { font:400 12px/1.3 var(--body); font-style:normal; color:var(--ink-2); }
.lhs-dw li.open .lhs-dw-t em { color:var(--lhs-good); font-weight:600; }
.lhs-dw-g { padding:5px 9px; border-radius:999px; font:600 11px/1 var(--body); color:var(--ink-2); background:var(--lhs-well); white-space:nowrap; }
.lhs-dw li.t-excellent .lhs-dw-g { color:var(--lhs-good); background:color-mix(in srgb, var(--lhs-good) 13%, transparent); }
.lhs-dw-add { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; cursor:pointer; color:rgb(var(--pa, var(--lhs-now)));
  background:rgba(var(--pa, var(--lhs-now)), .12); box-shadow:inset 0 0 0 1px rgba(var(--pa, var(--lhs-now)), .42); transition:transform .12s, background .2s; -webkit-tap-highlight-color:transparent; }
.lhs-dw-add svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.lhs-dw-add:hover { background:rgba(var(--pa, var(--lhs-now)), .2); }
.lhs-dw-add:active { transform:scale(.94); }
.lhs-dw-add:focus-visible { outline:2px solid rgb(var(--pa, var(--lhs-now))); outline-offset:2px; }
.lhs-dw-add.done { cursor:default; color:var(--ltk-up); background:color-mix(in srgb, var(--ltk-up) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ltk-up) 45%, transparent); }
.lhs-dw-to { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.lhs-dw-to > span { margin-right:4px; font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lhs-dayb .lhs-pk-note { margin:2px 0 0; }
.lhs-dayb .lhs-acts { padding-top:0; }
@media (max-width:339px) { .lhs-dw li { gap:8px; } .lhs-dw-g { display:none; } }

/* ---- Before you begin: for the eligible, the practices (Kaarya's Now card's own); for the rest, what is still to go ---- */
.lhs-prepl { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:12px; padding:12px 14px 12px 12px; border-radius:18px;
  background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-prepl-ico { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:var(--dim); background:var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
.lhs-prepl-ico svg { width:17px; height:17px; stroke-width:1.8; }
.lhs-prepl.ok .lhs-prepl-ico { color:var(--lhs-good); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 45%, transparent); }
.lhs-prepl-tx { display:grid; gap:3px; min-width:0; }
.lhs-prepl-tx b { font:600 13.5px/1.3 var(--body); color:var(--ink); }
.lhs-prepl-tx em { font:400 12.5px/1.45 var(--body); font-style:normal; color:var(--ink-2); }
.lhs-prepf .lhs-fold-ico { color:var(--lhs-good); background:color-mix(in srgb, var(--lhs-good) 12%, transparent); }
.lhs-prepf .lhs-fold-b { background:linear-gradient(180deg, color-mix(in srgb, var(--lhs-good) 7%, transparent), color-mix(in srgb, var(--lhs-good) 2%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 32%, transparent); }
.lhs-prepf .lhs-fold-b:hover { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 55%, transparent); }
.lhs-prep-g { display:grid; gap:8px; }
.lhs-prep-g + .lhs-prep-g { margin-top:6px; }
.lhs-prep-k { font:600 10px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.lhs-prep { list-style:none; display:grid; gap:11px; margin:0; padding:0; }
.lhs-prep li { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:start; gap:11px; }
.lhs-prep-n { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font:600 11.5px/1 var(--mono); color:rgb(var(--pa, var(--lhs-now))); background:rgba(var(--pa, var(--lhs-now)), .14); }
.lhs-prep li div { display:grid; gap:3px; min-width:0; }
.lhs-prep li b { font:600 13.5px/1.35 var(--body); color:var(--ink); }
.lhs-prep li b em { margin-left:4px; font:500 11.5px/1 var(--mono); font-style:normal; color:var(--ink-2); white-space:nowrap; }
.lhs-prep li p { margin:0; font:400 12.5px/1.5 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lhs-prep li p.lhs-prep-c { color:var(--ltk-down); }
.lhs-prep-note { margin:2px 0 0; font:400 11.5px/1.45 var(--body); color:var(--dim); }
.lhs-prepsh { display:grid; gap:10px; padding:14px; border-radius:18px; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-prepsh .lhs-elig { justify-self:start; display:inline-flex; align-items:center; gap:5px; padding:4px 9px 4px 7px; border-radius:999px; font:700 10.5px/1 var(--body); font-style:normal;
  letter-spacing:.04em; color:var(--lhs-good); background:color-mix(in srgb, var(--lhs-good) 13%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 42%, transparent); }
.lhs-prepsh .lhs-elig svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---- My table on the Time table page: one card, now or next and the two after ---- */
.lhs-mine-c { gap:8px; }
.lhs-mine-lead { display:grid; gap:8px; }
.lhs-mine-c .lhs-ttrows { padding:0; }
.lhs-mine-go { justify-self:start; margin:0 0 -6px -10px; }

/* ---- Realignment, in one word ---- */
.lhs-rs { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:9px 12px 9px 16px; border-radius:18px;
  background:var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-rs-k { font:500 17px/1.2 var(--display); color:var(--ink); }
.lhs-rs-v { display:inline-flex; align-items:center; gap:7px; padding:8px 13px 8px 11px; border-radius:999px; font:600 12.5px/1 var(--body); color:var(--ink-2); white-space:nowrap;
  background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
.lhs-rs-v i { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--dim); }
.lhs-rs.yes .lhs-rs-v { color:var(--lhs-gold); background:rgba(var(--lhs-gold-rgb), .12); box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .48); }
.lhs-rs.yes .lhs-rs-v i { background:var(--lhs-gold); box-shadow:0 0 0 3px rgba(var(--lhs-gold-rgb), .22); }
.lhs-rs.no .lhs-rs-v { color:var(--lhs-good); background:color-mix(in srgb, var(--lhs-good) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 42%, transparent); }
.lhs-rs.no .lhs-rs-v i { background:var(--lhs-good); }
.lhs-rs.wait .lhs-rs-v { font-weight:500; }
.lhs-rs + .lhs-mrs { margin-top:2px; }
/* said in passing: no card, a quiet line under the rings (the user, 2026-10-03) */
.lhs-rs.note { display:block; min-height:0; margin:-2px 0 0; padding:0 2px; border-radius:0; background:none; box-shadow:none;
  font:400 12px/1.4 var(--body); color:var(--dim); }
.lhs-rs.note .lhs-rs-k { font:inherit; color:inherit; }
.lhs-rs.note .lhs-rs-v { display:inline; padding:0; border-radius:0; background:none; box-shadow:none; font:500 12px/1.4 var(--body); color:var(--ink-2); white-space:normal; }

/* ---- Today's sky on Jyotish: the Moon now, the day's five limbs, the sky from your Moon ---- */
.lhs-sky { display:grid; gap:14px; padding:16px; border-radius:22px;
  background:radial-gradient(90% 120% at 0% 0%, rgba(var(--lhs-jy), .16), transparent 60%), radial-gradient(70% 90% at 100% 100%, rgba(var(--lhs-gold-rgb), .07), transparent 70%), var(--lhs-card);
  box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-sky-hero { display:flex; align-items:center; gap:16px; min-width:0; }
.lhs-moon { flex:0 0 auto; width:76px; height:76px; overflow:visible; filter:drop-shadow(0 0 14px rgba(240, 228, 196, .26)); }
.lhs-moon .dark { fill:rgba(255,255,255,.07); }
.lhs-moon .lit { fill:#F1E7CB; }
.lhs-moon .rim { fill:none; stroke:rgba(255,255,255,.24); stroke-width:1; }
.lhs-sky-tx { display:grid; gap:3px; min-width:0; }
.lhs-sky-t { font:500 22px/1.15 var(--display); letter-spacing:-.005em; color:var(--ink); text-wrap:balance; }
.lhs-sky-tx .deva { font:400 14px/1.25 var(--deva); color:var(--ink-2); }
.lhs-sky-tx em { font:400 12.5px/1.4 var(--body); font-style:normal; color:var(--ink-2); }
.lhs-limbs { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; margin:0; }
.lhs-limb { display:grid; align-content:start; gap:4px; min-width:0; padding:9px 9px 10px; border-radius:12px; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-limb dt { font:600 9.5px/1.2 var(--body); letter-spacing:.12em; text-transform:uppercase; color:rgb(var(--lhs-jy)); }
.lhs-limb dd { display:grid; gap:2px; min-width:0; margin:0; }
.lhs-limb dd b { font:500 13.5px/1.2 var(--body); color:var(--ink); overflow-wrap:anywhere; }
.lhs-limb dd small { font:400 11px/1.3 var(--body); color:var(--ink-2); overflow-wrap:anywhere; }
.lhs-limb .deva { font-family:var(--deva); }
@media (max-width:539px) { .lhs-limbs { grid-template-columns:repeat(6, minmax(0, 1fr)); } .lhs-limb { grid-column:span 2; } .lhs-limb:nth-child(n+4) { grid-column:span 3; } }
.lhs-skyyou { gap:12px; }
.lhs-gcs { list-style:none; display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); gap:6px; margin:0; padding:0; }
.lhs-gcs li { position:relative; display:grid; justify-items:center; gap:4px; min-width:0; padding:8px 0 7px; border-radius:14px; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-gcs li.good { background:color-mix(in srgb, var(--lhs-good) 11%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 48%, transparent); }
.lhs-gc-g { font:400 17px/1 var(--display), serif; color:var(--g); font-variant-emoji:text; }
.lhs-gcs b { font:600 11.5px/1 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.lhs-gcs li i { position:absolute; top:3px; right:5px; font:700 8px/1 var(--body); font-style:normal; color:var(--dim); }
.lhs-gcs-k { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:0; font:500 11px/1.3 var(--body); color:var(--dim); }
.lhs-gcs-k span { display:inline-flex; align-items:center; gap:5px; margin-left:auto; }
.lhs-gcs-k span i { width:10px; height:10px; border-radius:4px; background:color-mix(in srgb, var(--lhs-good) 28%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 60%, transparent); }
@media (max-width:379px) { .lhs-gcs { grid-template-columns:repeat(5, minmax(0, 1fr)); } }
.lhs-skyrows { list-style:none; display:grid; margin:0; padding:0 2px; }
.lhs-skyrows li { display:grid; grid-template-columns:auto 70px minmax(0, 1fr); align-items:baseline; column-gap:10px; row-gap:2px; padding:10px 0; border-top:1px solid var(--lhs-line); }
.lhs-skyrows li:first-child { border-top:0; }
.lhs-skyrows li > i { align-self:center; width:8px; height:8px; border-radius:50%; background:var(--lhs-ok); }
.lhs-skyrows li.good > i { background:var(--lhs-good); } .lhs-skyrows li.bad > i { background:var(--lhs-hard); }
.lhs-skyrows li > span { font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lhs-skyrows li > b { font:500 14px/1.3 var(--body); color:var(--ink); }
.lhs-skyrows li > em { grid-column:3; font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
/* the day theme: an ivory Moon on its paper, the planets' paler colours deepened */
:root[data-theme="light"] .lhs-moon { filter:drop-shadow(0 4px 10px rgba(80, 60, 20, .18)); }
:root[data-theme="light"] .lhs-moon .dark { fill:#E6E0D2; }
:root[data-theme="light"] .lhs-moon .lit { fill:#FFFDF6; }
:root[data-theme="light"] .lhs-moon .rim { stroke:rgba(80, 60, 20, .32); }
:root[data-theme="light"] .lhs-gc-g { color:color-mix(in srgb, var(--g) 62%, #241D10); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lhs-moon { filter:drop-shadow(0 4px 10px rgba(80, 60, 20, .18)); }
  :root:not([data-theme="dark"]) .lhs-moon .dark { fill:#E6E0D2; }
  :root:not([data-theme="dark"]) .lhs-moon .lit { fill:#FFFDF6; }
  :root:not([data-theme="dark"]) .lhs-moon .rim { stroke:rgba(80, 60, 20, .32); }
  :root:not([data-theme="dark"]) .lhs-gc-g { color:color-mix(in srgb, var(--g) 62%, #241D10); }
}
@media (prefers-reduced-motion: reduce) { .lhs-sa, .lhs-dw-add { transition:none; } }

/* ---- Your progress (and Before you begin), open: one outline round the whole card, as it was round the closed one
   (the user, 2026-10-01) ---- */
.lhs-fold.open { gap:0; padding-bottom:14px; border-radius:18px;
  background:linear-gradient(180deg, rgba(var(--lhs-gold-rgb), .07), rgba(var(--lhs-gold-rgb), .02)); box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .32); }
.lhs-fold.open .lhs-fold-b { background:none; box-shadow:none; border-radius:18px 18px 0 0; }
.lhs-fold.open .lhs-fold-b:hover { box-shadow:none; }
.lhs-fold.open .lhs-fold-in { padding:4px 14px 0; }
.lhs-fold.lhs-prepf.open { background:linear-gradient(180deg, color-mix(in srgb, var(--lhs-good) 7%, transparent), color-mix(in srgb, var(--lhs-good) 2%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 32%, transparent); }
.lhs-fold.lhs-prepf.open .lhs-fold-b { background:none; box-shadow:none; }

/* ---- Record your breath, quietly, in the drawer's half — on every page but Now ---- */
.lhs-dq { display:grid; gap:8px; margin:0 0 10px; padding:10px 12px 12px; border-radius:18px; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-dq[hidden] { display:none; }
.lhs-dq-hd { display:flex; align-items:center; gap:8px; min-width:0; }
.lhs-dq-k { font:600 10px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.lhs-dq-due { padding:3px 8px; border-radius:999px; font:700 10px/1 var(--body); letter-spacing:.04em; color:var(--lhs-gold); background:rgba(var(--lhs-gold-rgb), .12); }
.lhs-dq-hd .lqk-tok { margin-left:auto; }
.lhs-dq .lal-ans { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.lhs-dq .lal-ans button { grid-auto-flow:column; justify-content:center; align-items:center; gap:8px; min-height:42px; padding:0 8px; border-radius:14px; font:600 13px/1 var(--body);
  color:var(--ink); background:var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
.lhs-dq .lal-ans button:hover { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 60%, transparent); }
.lhs-dq .lal-ans button i { width:26px; height:11px; border-radius:6px; }
.lhs-dq .lal-ans .n-ida i { background:radial-gradient(circle at 6.5px 5.5px, var(--soma) 0 4.2px, transparent 4.6px), radial-gradient(circle at 19.5px 5.5px, color-mix(in srgb, var(--ink) 14%, transparent) 0 4.2px, transparent 4.6px); }
.lhs-dq .lal-ans .n-pingala i { background:radial-gradient(circle at 6.5px 5.5px, color-mix(in srgb, var(--ink) 14%, transparent) 0 4.2px, transparent 4.6px), radial-gradient(circle at 19.5px 5.5px, var(--sindoor) 0 4.2px, transparent 4.6px); }
.lhs-dq .lal-ans .n-sushumna i { background:radial-gradient(circle at 6.5px 5.5px, var(--brass-hi) 0 4.2px, transparent 4.6px), radial-gradient(circle at 19.5px 5.5px, var(--brass-hi) 0 4.2px, transparent 4.6px); }
.lhs-dq .lal-ans button.is-done i { width:20px; height:20px; }
.lhs-dq .lal-ans button.is-done i .lfl-tick { width:12px; height:12px; }

/* ---- Guidance: an invoice that waits for eligibility ---- */
.lgi-lock { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:12px; padding:12px 14px 12px 12px; border-radius:16px;
  background:var(--st-tile, rgba(255,255,255,.04)); box-shadow:inset 0 0 0 1px var(--st-line, rgba(255,255,255,.09)); }
.lgi-lock-ico { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:var(--dim); box-shadow:inset 0 0 0 1px var(--st-line, rgba(255,255,255,.12)); }
.lgi-lock-ico svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lgi-lock-tx { display:grid; gap:3px; min-width:0; }
.lgi-lock-tx b { font:600 13.5px/1.3 var(--body); color:var(--ink); }
.lgi-lock-tx em { font:400 12.5px/1.45 var(--body); font-style:normal; color:var(--ink-2); }

/* ---- Suits your breath now, as a list with room inside; more air between every page's sections (the user, 2026-10-01:
   "the boundary are very close to immediate text"; "too cluttered look and tight spacing of the right side column") ---- */
.lhs-in { gap:20px; }
.lhs-sec { gap:12px; }
.lhs-suit { gap:6px; padding:18px 18px 8px; border-radius:22px; }
.lhs-suit-hd { display:grid; gap:6px; padding-bottom:6px; }
.lhs-suit-lede { font-size:12.5px; color:var(--ink-2); }
.lhs-srs { list-style:none; display:grid; margin:0 -6px; padding:0; }
.lhs-srs li + li { border-top:1px solid var(--lhs-line); }
.lhs-sr { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:12px; width:100%; min-height:50px; padding:8px 6px; border:0; border-radius:12px;
  cursor:pointer; text-align:left; color:var(--ink); background:none; -webkit-tap-highlight-color:transparent; transition:background .18s; }
.lhs-sr:hover { background:var(--lhs-well); }
.lhs-sr:active { background:var(--lhs-card-2); }
.lhs-sr:focus-visible { outline:2px solid rgb(var(--pa, var(--lhs-now))); outline-offset:-2px; }
.lhs-sr-l { min-width:0; font:500 14px/1.3 var(--body); color:var(--ink); }
.lhs-sr.on .lhs-sr-l { font-weight:600; color:rgb(var(--pa, var(--lhs-now))); }
.lhs-sr > svg { width:16px; height:16px; fill:none; stroke:var(--dim); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.lhs-sr:hover > svg { transform:translateX(2px); stroke:var(--ink-2); }
.lhs-sr-d { width:9px; height:9px; border-radius:50%; background:var(--lhs-line-2); }
.lhs-sr-d.t-excellent { background:var(--lhs-good); box-shadow:0 0 0 3px color-mix(in srgb, var(--lhs-good) 22%, transparent), 0 0 9px color-mix(in srgb, var(--lhs-good) 50%, transparent); }
.lhs-sr-d.t-good { background:var(--lhs-good); }
.lhs-sr-d.t-workable { background:var(--lhs-ok); }
.lhs-sr-d.g-on { background:var(--lhs-good); box-shadow:0 0 0 3px color-mix(in srgb, var(--lhs-good) 22%, transparent); }
.lhs-sr-d.g-soft { background:color-mix(in srgb, var(--lhs-ok) 65%, transparent); }
.lhs-sr-d.g-hard { background:var(--lhs-hard); }
.lhs-sr-d.g-off { background:transparent; box-shadow:inset 0 0 0 1.5px var(--lhs-line-2); }
.lhs-sr-t { padding:4px 9px; border-radius:999px; font:600 11px/1 var(--body); font-style:normal; color:var(--ink-2); background:var(--lhs-well); white-space:nowrap; }
.lhs-sr-t.t-excellent, .lhs-sr-t.g-on { color:var(--lhs-good); background:color-mix(in srgb, var(--lhs-good) 12%, transparent); }
.lhs-sr-t.t-workable { color:var(--lhs-ok); background:color-mix(in srgb, var(--lhs-ok) 12%, transparent); }
.lhs-sr-t.g-hard { color:var(--lhs-hard); background:color-mix(in srgb, var(--lhs-hard) 12%, transparent); }
.lhs-sr-more { justify-self:start; display:inline-flex; align-items:center; gap:4px; height:40px; margin:2px 0 4px -4px; padding:0 8px; border:0; border-radius:10px; cursor:pointer;
  font:600 12.5px/1 var(--body); color:var(--ink-2); background:none; }
.lhs-sr-more:hover { color:var(--ink); background:var(--lhs-well); }
.lhs-sr-more svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.lhs-sr-more[aria-expanded="true"] svg { transform:rotate(180deg); }
.lhs-suit > .lhs-say.sm { padding:4px 0 10px; }
.lhs-suit > .lhs-link.sm { margin:0 0 6px -10px; }
/* the other new cards, the same room inside */
.lhs-sky { padding:18px; }
.lhs-prepl { padding:14px 16px 14px 14px; }
.lhs-dq { padding:12px 14px 14px; }
@media (max-width:359px) { .lhs-suit { padding:16px 14px 6px; } .lhs-sr { gap:10px; } .lhs-sr-t { display:none; } }
@media (prefers-reduced-motion: reduce) { .lhs-sr, .lhs-sr > svg, .lhs-sr-more svg { transition:none; } }

/* ---- the drawer's Record card off Now: Now's own card, Quick and Detailed, worn quietly ---- */
.lhs-dq { display:block; margin:0 0 10px; padding:0; border-radius:0; background:none; box-shadow:none; }
.lhs-dq .lqk { gap:9px; padding:11px 12px 12px 14px; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-dq .lqk .lal-ans button { min-height:40px; background:var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
.lhs-dq .lqk .lal-ans button:hover { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 60%, transparent); }

/* ---- How's your day: how it reads, in two steps, the one it is on lit (2026-10-01) ---- */
.ldy-how { display:grid; gap:8px; }
.ldy-how ol { list-style:none; display:grid; gap:6px; margin:0; padding:0; counter-reset:ldyh; }
.ldy-how li { position:relative; display:grid; gap:2px; padding:8px 10px 8px 34px; border-radius:12px; background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); counter-increment:ldyh; }
.ldy-how li::before { content:counter(ldyh); position:absolute; left:9px; top:8px; display:grid; place-items:center; width:17px; height:17px; border-radius:50%;
  font:700 10px/1 var(--body); color:var(--dim); box-shadow:inset 0 0 0 1px currentColor; }
.ldy-how li b { font:600 12px/1.3 var(--body); color:var(--ink-2); }
.ldy-how li em { font:400 11.5px/1.35 var(--body); font-style:normal; color:var(--dim); text-wrap:pretty; }
.ldy-how li.on { background:rgba(var(--acc-rgb, 238, 201, 110), .08); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb, 238, 201, 110), .35); }
.ldy-how li.on::before { color:rgb(var(--acc-rgb, 238, 201, 110)); background:rgba(var(--acc-rgb, 238, 201, 110), .14); box-shadow:none; }
.ldy-how li.on b { color:var(--ink); } .ldy-how li.on em { color:var(--ink-2); }
.ldy-how li.done::before { content:"✓"; color:var(--jade); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 60%, transparent); }
:root[data-theme="light"] .ldy-how li { background:rgba(40,30,60,.035); box-shadow:inset 0 0 0 1px rgba(40,30,60,.08); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ldy-how li { background:rgba(40,30,60,.035); box-shadow:inset 0 0 0 1px rgba(40,30,60,.08); } }
.lhs-day-how { margin:2px 0 0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lhs-prepl-go { justify-self:start; margin:4px 0 -6px -10px; }

/* ---- the Time table page: Realignment's word, and with a run paid for the Time table's own breath facts (2026-10-01) ---- */
.lhs-ttgate { display:grid; gap:8px; padding:12px 14px; border-radius:16px; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-ttgate .lhs-rs { margin:0; }
.lhs-ttgate-tx { margin:0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lhs-ttgate-go { justify-self:start; }
.lhs-ttfx { --acc-rgb:var(--lhs-gold-rgb); --st-tile:var(--lhs-well); --st-line-soft:var(--lhs-line); display:grid; gap:8px; margin-top:2px; }
.lhs-ttfx .tst-facts { padding:0 12px; }
.lhs-ttfx .tst-fact { min-height:40px; padding:6px 0; }
.lhs-ttfx .tst-verdict { font-size:12.5px; }
.lhs-ttfx-plain { margin:0; }
.lhs-ttr-tx { display:grid; gap:3px; min-width:0; }
.lhs-ttr-tx > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lhs-ttrows li .lhs-ttfx-line { display:flex; align-items:center; min-width:0; font:500 11.5px/1.3 var(--body); font-style:normal; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lhs-ttfx-line.ok { color:var(--lhs-good); }
.lhs-ttfx-line.warn { color:var(--ltk-down); }

/* ---- one check a turn (2026-10-01): the record buttons shut until the Swara Code turns, and a line saying when ---- */
.lal-ans.is-shut button, .tst-obs.is-shut button, .lsk-sides.is-shut button { opacity:.42; cursor:not-allowed; filter:saturate(.55); }
.lal-lock { display:flex; align-items:center; gap:8px; margin:10px 2px 0; font:500 12.5px/1.4 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lal-lock i { flex:0 0 auto; width:16px; height:16px; border-radius:50%; background:color-mix(in srgb, var(--jade, #62C19E) 18%, transparent);
  -webkit-mask:radial-gradient(circle, #000 0 60%, transparent 61%); mask:radial-gradient(circle, #000 0 60%, transparent 61%);
  box-shadow:inset 0 0 0 2px var(--jade, #62C19E); }
.lal-lockcard { display:flex; align-items:flex-start; gap:12px; margin-top:6px; padding:14px 16px; border-radius:16px;
  background:color-mix(in srgb, var(--jade, #62C19E) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade, #62C19E) 26%, transparent); }
.lal-lockcard > i { flex:0 0 auto; width:22px; height:22px; margin-top:1px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--jade, #62C19E);
  background:radial-gradient(circle, var(--jade, #62C19E) 0 4px, transparent 4.5px); }
.lal-lockcard b { display:block; font:600 14px/1.3 var(--body); color:var(--ink); }
.lal-lockcard span { display:block; margin-top:3px; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.lbt-disc.is-shut, .btopen.is-shut { opacity:.5; filter:saturate(.4); cursor:not-allowed; }
.lbt-disc.is-shut .lbt-orb i, .lbt-disc.is-shut .lbt-orb { animation:none !important; }

/* ---- the undo bar on every breath card: five minutes, three times a turn; Confirm makes the check final (2026-10-01) ---- */
.lal-undo { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding:10px 10px 10px 14px; border-radius:16px;
  background:color-mix(in srgb, var(--jade, #62C19E) 9%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade, #62C19E) 30%, transparent);
  animation:lalUndoIn .32s cubic-bezier(.22,.9,.24,1) both; }
@keyframes lalUndoIn { from { opacity:0; transform:translateY(6px) scale(.98); } to { opacity:1; transform:none; } }
.lal-undo-tx { display:grid; gap:2px; min-width:0; }
.lal-undo-tx b { font:600 13px/1.25 var(--body); color:var(--ink); }
.lal-undo-tx em { font:400 11.5px/1.3 var(--body); font-style:normal; color:var(--ink-2); }
.lal-undo-acts { display:flex; flex:0 0 auto; gap:6px; }
.lal-undo-b, .lal-undo-ok { min-height:34px; padding:0 13px; border:0; border-radius:999px; cursor:pointer; font:600 12.5px/1 var(--body); }
.lal-undo-b { color:var(--ink); background:transparent; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 26%, transparent); }
.lal-undo-ok { color:#0E1512; background:var(--jade, #62C19E); }
.lal-undo-b:focus-visible, .lal-undo-ok:focus-visible { outline:2px solid var(--jade, #62C19E); outline-offset:2px; }
@media (max-width:360px) { .lal-undo { flex-wrap:wrap; } .lal-undo-acts { width:100%; justify-content:flex-end; } }
@media (prefers-reduced-motion:reduce) { .lal-undo { animation:none; } }

/* ---- Today: could it have been better? (2026-10-01) — lived, on your code, full potential on one scale ---- */
.lhs-better { position:relative; display:grid; gap:12px; padding:16px 16px 14px; border-radius:22px; overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%, rgba(var(--lhs-gold-rgb), .14), transparent 62%), var(--lhs-card); box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .26); }
.lhs-better.b-full { background:radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--lhs-good) 18%, transparent), transparent 62%), var(--lhs-card);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 34%, transparent); }
.lhs-better-hd { display:grid; gap:6px; }
.lhs-better-t { font:500 22px/1.15 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lhs-better.b-up .lhs-better-t { color:var(--lhs-gold); }
.lhs-better.b-full .lhs-better-t { color:var(--lhs-good); }
.lhs-gauge { position:relative; height:14px; margin:4px 0 2px; }
.lhs-gauge i { position:absolute; top:0; bottom:0; left:0; display:block; border-radius:7px; }
.lhs-gauge .lg-track { right:0; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-gauge .lg-best { background:repeating-linear-gradient(135deg, rgba(var(--lhs-gold-rgb), .42) 0 4px, rgba(var(--lhs-gold-rgb), .16) 4px 8px); }
.lhs-gauge .lg-now { background:linear-gradient(90deg, rgba(var(--lhs-gold-rgb), .55), var(--lhs-gold)); box-shadow:0 0 18px -4px rgba(var(--lhs-gold-rgb), .7); }
.lhs-better.b-full .lhs-gauge .lg-now { background:linear-gradient(90deg, color-mix(in srgb, var(--lhs-good) 55%, transparent), var(--lhs-good)); box-shadow:0 0 18px -4px var(--lhs-good); }
.lhs-gauge .lg-pot { top:-4px; bottom:-4px; width:2px; margin-left:-1px; border-radius:1px; background:var(--ink); opacity:.75; }
.lhs-better-k { display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; padding:0; list-style:none; font:500 12px/1.3 var(--body); color:var(--ink-2); }
.lhs-better-k li { display:inline-flex; align-items:center; gap:7px; }
.lhs-better-k b { font:600 13px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
.lhs-better-k i { width:12px; height:8px; border-radius:3px; }
.lhs-better-k .k-now { background:var(--lhs-gold); }
.lhs-better.b-full .lhs-better-k .k-now { background:var(--lhs-good); }
.lhs-better-k .k-best { background:repeating-linear-gradient(135deg, rgba(var(--lhs-gold-rgb), .55) 0 3px, rgba(var(--lhs-gold-rgb), .18) 3px 6px); }
.lhs-better-k .k-pot { width:2px; height:12px; border-radius:1px; background:var(--ink); opacity:.75; }
.lhs-better-say { margin:0; font:400 13.5px/1.55 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lhs-better-say b { font-weight:600; color:var(--ink); }
.lhs-better-next { margin:0; font:500 12.5px/1.4 var(--body); color:var(--ink); }
.lhs-better-go { justify-self:start; }

/* ---- the name on Now's Shiva card, quietly (2026-10-01); a way to the You sheet (2026-10-07) ---- */
.lnow-who { display:block; max-width:100%; margin:0 0 7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:500 12px/1.2 var(--body); letter-spacing:.04em; color:var(--ink-2); opacity:.72; }
button.lnow-who { display:inline-flex; align-items:center; gap:4px; padding:4px 8px 4px 0; border:0; background:none; cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent; }
button.lnow-who span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
button.lnow-who svg { flex:0 0 auto; width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
button.lnow-who:hover, button.lnow-who:focus-visible { opacity:1; }
button.lnow-who:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; border-radius:6px; }
html:not(.lhs-on) .lnow-who { display:none; }
/* "Planets say · now" (2026-10-16): one line at every width; on narrow phones the words' column is tightened so it stands about as
   tall as Shiva beside it (the user: "the text section seems large in height as compared to shiva outline. Fix the symmetry") */
html.lhs-on .lhs-page #lite-summary .lnow .lcalm-k { white-space:nowrap; }
@media (max-width:400px) { html.lhs-on .lhs-page #lite-summary .lnow .lcalm-k { letter-spacing:.18em; } }
@media (max-width:359px) {
  html.lhs-on .lhs-page #lite-summary .lnow .lcalm-k { font-size:9.5px; letter-spacing:.14em; }
  html.lhs-on .lhs-page #lite-summary .lnow .lnow-tx { gap:6px; }
  html.lhs-on .lhs-page #lite-summary .lnow .lnow-who { margin-bottom:2px; }
}

/* ---- the wallet, redesigned (2026-10-01): balance and status; seven days in three figures; one line for the next reward;
   the activity by day, a mark for each kind; three quiet links ---- */
.ltkw { display:grid; gap:18px; }
.ltkw-hero { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:6px 14px; padding:16px; border-radius:22px;
  background:radial-gradient(120% 120% at 0% 0%, rgba(var(--acc-rgb), .16), transparent 60%), var(--st-tile); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .22); }
.ltkw-hero .ltk-coin { grid-row:1 / span 2; filter:drop-shadow(0 10px 18px rgba(0,0,0,.4)); }
.ltkw-balwrap { display:flex; align-items:baseline; gap:10px; min-width:0; }
.ltkw-bal { font:500 38px/1 var(--display); letter-spacing:-.025em; color:rgb(var(--acc-rgb)); font-variant-numeric:tabular-nums lining-nums; }
.ltkw-unit { font:600 10px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; }
.ltkw-status { display:inline-flex; align-items:center; gap:7px; justify-self:start; min-width:0; padding:5px 10px 5px 8px; border-radius:999px;
  font:500 11.5px/1.2 var(--body); color:var(--ink-2); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.ltkw-status i { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--ltk-up); box-shadow:0 0 8px var(--ltk-up); }
.ltkw-status.paused i { background:#9DB4FF; box-shadow:0 0 8px #9DB4FF; }
.ltkw-status.sample i { background:var(--dim); box-shadow:none; }
.ltkw-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border-radius:18px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.ltkw-st { display:grid; gap:4px; min-width:0; padding:12px 12px 13px; }
.ltkw-st + .ltkw-st { box-shadow:inset 1px 0 0 var(--st-line-soft); }
.ltkw-st span { font:600 9.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.ltkw-st b { font:500 20px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
.ltkw-st em { font:400 11px/1.2 var(--body); font-style:normal; color:var(--ink-2); }
.ltkw-next { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; padding:12px 14px; border-radius:16px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.ltkw-next > i { width:10px; height:10px; border-radius:50%; background:rgb(var(--acc-rgb)); box-shadow:0 0 0 4px rgba(var(--acc-rgb), .16); }
.ltkw-next.now { background:color-mix(in srgb, var(--ltk-up) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ltk-up) 42%, transparent); }
.ltkw-next.now > i { background:var(--ltk-up); box-shadow:0 0 0 4px color-mix(in srgb, var(--ltk-up) 22%, transparent); }
.ltkw-next span { display:grid; gap:2px; min-width:0; }
.ltkw-next b { font:500 13.5px/1.3 var(--body); color:var(--ink); }
.ltkw-next em { font:400 11.5px/1.3 var(--body); font-style:normal; color:var(--ink-2); }
.ltkw-next strong { font:600 14px/1 var(--display); color:var(--ltk-up); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ltkw-held { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:10px; padding:12px 14px; border-radius:16px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.ltkw-held span { display:grid; gap:2px; min-width:0; }
.ltkw-held b { font:500 13px/1.3 var(--body); color:var(--ink); }
.ltkw-held em { font:400 11.5px/1.3 var(--body); font-style:normal; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ltkw-held-acts { display:flex !important; gap:6px; }
.ltkw-chip { height:30px; padding:0 12px; border:0; border-radius:999px; cursor:pointer; font:600 12px/1 var(--body); color:#14100A; background:rgb(var(--acc-rgb)); }
.ltkw-chip.ghost { color:var(--ink); background:transparent; box-shadow:inset 0 0 0 1px var(--st-line); }
.ltkw-list { display:grid; gap:4px; }
.ltkw-list-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:4px; }
.ltkw-rows { list-style:none; display:grid; margin:0; padding:0; }
.ltkw-day { padding:14px 2px 6px; font:600 10px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.ltkw-tx { display:grid; grid-template-columns:34px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:9px 2px; }
.ltkw-tx + .ltkw-tx { border-top:1px solid var(--st-line-soft); }
.ltkw-ico { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); color:var(--ink-2); }
.ltkw-ico svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ltkw-tx.k-quick .ltkw-ico, .ltkw-tx.k-detailed .ltkw-ico, .ltkw-tx.k-tap .ltkw-ico { color:var(--ltk-up); }
.ltkw-tx.k-welcome .ltkw-ico, .ltkw-tx.k-streak .ltkw-ico { color:rgb(var(--acc-rgb)); }
.ltkw-tx.k-spend .ltkw-ico, .ltkw-tx.k-lapse .ltkw-ico { color:var(--ltk-down); }
.ltkw-tx-t { display:grid; gap:2px; min-width:0; }
.ltkw-tx-t b { font:500 13.5px/1.25 var(--body); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ltkw-tx-t em { font:400 11.5px/1.3 var(--body); font-style:normal; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ltkw-tx-t time { color:var(--dim); }
.ltkw-amt { font:600 15px/1 var(--display); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }
.ltkw-amt.up { color:var(--ltk-up); } .ltkw-amt.down { color:var(--ltk-down); }
.ltkw-empty { padding:16px 2px; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.ltkw-moreli { display:grid; padding-top:10px; }
.ltkw-more { justify-self:center; height:34px; padding:0 16px; border:0; border-radius:999px; cursor:pointer; font:600 12.5px/1 var(--body); color:var(--ink); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.ltkw-links { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; padding-top:2px; }
.ltkw-links button { padding:6px 2px; border:0; background:none; cursor:pointer; font:600 12.5px/1 var(--body); color:rgb(var(--acc-rgb)); }
.ltkw-links button:hover { text-decoration:underline; text-underline-offset:3px; }
.ltkw-links button:focus-visible, .ltkw-chip:focus-visible, .ltkw-more:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
@media (max-width:360px) { .ltkw-bal { font-size:32px; } .ltkw-st { padding:11px 9px 12px; } .ltkw-st b { font-size:18px; } }

/* =====================================================================
   SWARA TOKENS, INTRODUCED: the three-step carousel over the home (ui-lite-tkintro.js; the user, 2026-10-02: "highly
   professional, world class and premium and polished in design and concise with less text and more visuals")
   One night world in both themes, the coin's own: its dark ground, its gold, the breath's lilac moon and coral sun. The art
   is drawn at 300 × 180 and scaled to the card (--lti-s); only the slide shown moves (.on), and nothing moves for reduced
   motion, where every piece rests in its final state.
   ===================================================================== */
.lti { position:fixed; inset:0; z-index:9400; display:grid; place-items:center;
  padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background:rgba(5,6,9,0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0);
  transition:background .4s ease, -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease;
  overscroll-behavior:contain; touch-action:none; font-family:var(--body); color:#F1EBDD; -webkit-tap-highlight-color:transparent; }
.lti.in { background:rgba(5,6,9,.64); -webkit-backdrop-filter:blur(12px) saturate(115%); backdrop-filter:blur(12px) saturate(115%); }
.lti.out { pointer-events:none; }
.lti-card { position:relative; width:min(400px, 100%); max-height:calc(100dvh - 24px); overflow:hidden auto; overscroll-behavior:contain; touch-action:pan-y;
  display:grid; padding:14px 18px 16px; border-radius:30px; isolation:isolate;
  background:
    radial-gradient(120% 62% at 88% -6%, rgba(214,177,115,.19), rgba(143,134,214,.07) 44%, transparent 72%),
    radial-gradient(90% 55% at 0% 106%, rgba(185,173,240,.09), transparent 62%),
    linear-gradient(180deg, #121319 0%, #0A0B10 100%);
  box-shadow:0 0 0 1px rgba(238,232,220,.09), inset 0 1px 0 rgba(255,255,255,.07), 0 50px 120px -30px rgba(0,0,0,.92), 0 18px 40px -24px rgba(0,0,0,.8);
  opacity:0; transform:translateY(28px) scale(.965); transition:opacity .45s ease, transform .7s cubic-bezier(.2,.85,.2,1); }
.lti.in .lti-card { opacity:1; transform:none; }
.lti.out .lti-card { opacity:0; transform:translateY(14px) scale(.98); transition-duration:.32s; }
.lti button { -webkit-tap-highlight-color:transparent; }
.lti button:focus-visible { outline:2px solid #E9CC72; outline-offset:3px; }
.lti-card:focus { outline:none; }

/* the top line: whose carousel, and the way out */
.lti-top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; }
.lti-brand { display:inline-flex; align-items:center; gap:8px; font:700 10.5px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:#E9CC72; }
.lti-brand svg { flex:none; display:block; }
.lti-skip { height:34px; padding:0 4px 0 14px; border:0; border-radius:10px; background:none; cursor:pointer; font:600 13px/1 var(--body); color:#ABA4BB; transition:color .2s; }
.lti-skip:hover { color:#F1EBDD; }
.lti[data-step="3"] .lti-skip { visibility:hidden; }

/* the slides: a track the finger moves */
.lti-view { position:relative; overflow:hidden; margin:2px -18px 0; touch-action:pan-y; cursor:grab; }
.lti-view:active { cursor:grabbing; }
.lti-track { display:flex; transition:transform .62s cubic-bezier(.22,.8,.22,1); will-change:transform; }
.lti-slide { flex:0 0 100%; min-width:0; box-sizing:border-box; padding:0 18px; display:grid; gap:16px; align-content:start; user-select:none; -webkit-user-select:none; }
.lti-artbox { position:relative; width:calc(300px * var(--lti-s, 1)); height:calc(180px * var(--lti-s, 1)); margin:4px auto 0; }
.lti-art { position:absolute; left:0; top:0; width:300px; height:180px; transform:scale(var(--lti-s, 1)); transform-origin:0 0; pointer-events:none; }
.lti-copy { display:grid; gap:8px; text-align:center; }
.lti-h { margin:0; font:600 25px/1.1 var(--display); letter-spacing:-.022em; color:#F7F1E3; text-wrap:balance; }
.lti-p { margin:0 auto; max-width:31ch; font:400 14.5px/1.5 var(--body); color:#BBB4C6; text-wrap:pretty; }
.lti-slide.on .lti-copy, .lti-slide.on .lti-facts, .lti-slide.on .lti-stats, .lti-slide.on .lti-fine, .lti-slide.on .lti-wallet { animation:lti-up .62s cubic-bezier(.2,.8,.2,1) .14s both; }
.lti-slide.on .lti-facts, .lti-slide.on .lti-stats, .lti-slide.on .lti-fine { animation-delay:.24s; }
@keyframes lti-up { from { opacity:0; transform:translateY(10px); } }

/* 1 · three facts, each its own mark */
.lti-facts { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.lti-facts li { display:grid; justify-items:center; align-content:start; gap:8px; padding:12px 4px 11px; border-radius:18px; text-align:center; white-space:nowrap;
  font:600 11.5px/1.25 var(--body); color:#DAD3E3; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(238,232,220,.07); }
.lti-fi { display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(246,226,162,.24), rgba(246,226,162,.05)); box-shadow:inset 0 0 0 1px rgba(233,204,114,.3); }
.lti-fi svg, .lti-ti svg, .lti-chip svg { width:17px; height:17px; fill:none; stroke:#EED692; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* 2 · four rewards in one strip */
.lti-stats { list-style:none; margin:0; padding:4px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)); box-shadow:inset 0 0 0 1px rgba(238,232,220,.07); }
.lti-stats li { display:grid; justify-items:center; gap:6px; padding:11px 2px 10px; }
.lti-stats li + li { box-shadow:-1px 0 0 rgba(238,232,220,.07); }
.lti-stats b { font:600 19px/1 var(--display); color:#F2D98A; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.lti-stats span { font:700 9.5px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; color:#968FA8; }

/* 3 · the small print, and the wallet */
.lti-fine { margin:-4px 0 0; text-align:center; font:400 11.5px/1.45 var(--body); color:#8E89A3; }
.lti-wallet { justify-self:center; margin-top:-8px; height:30px; padding:0 10px; border:0; border-radius:10px; background:none; cursor:pointer; font:600 12.5px/1 var(--body); color:#E9CC72; }
.lti-wallet:hover { text-decoration:underline; text-underline-offset:3px; }

/* the foot: back, where you are, on */
.lti-foot { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:10px; margin-top:18px; }
.lti-back { width:46px; height:46px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#E9E2D2;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(238,232,220,.1); transition:opacity .25s, background .2s; }
.lti-back:hover { background:rgba(255,255,255,.08); }
.lti-back.off { opacity:0; pointer-events:none; }
.lti-back svg, .lti-next svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lti-dots { display:flex; justify-content:center; align-items:center; }
.lti-dot { position:relative; width:18px; height:30px; padding:0; border:0; background:none; cursor:pointer; transition:width .4s cubic-bezier(.2,.8,.2,1); }
.lti-dot::before { content:''; position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:99px; transform:translate(-50%, -50%);
  background:rgba(238,232,220,.24); transition:width .4s cubic-bezier(.2,.8,.2,1), background .3s; }
.lti-dot.on { width:34px; }
.lti-dot.on::before { width:24px; background:linear-gradient(90deg, #F6E2A2, #D6B24A); box-shadow:0 0 10px rgba(233,204,114,.5); }
.lti-next { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:46px; padding:0 17px 0 21px; border:0; border-radius:999px; cursor:pointer; white-space:nowrap;
  font:700 14px/1 var(--body); color:#1B1406; background:linear-gradient(180deg, #F8E9B8 0%, #EFD489 46%, #D6B24A 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 16px 30px -16px rgba(214,178,74,.9); transition:filter .2s, transform .15s; }
.lti-next:hover { filter:brightness(1.05); }
.lti-next:active { transform:scale(.97); }
.lti-next.lti-last { padding:0 19px 0 22px; }

/* ---- the art · 1: the coin turning in its light, the moon and the sun going round it ---- */
.lti-halo { position:absolute; left:35px; top:-25px; width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle, rgba(233,204,114,.26) 0%, rgba(233,204,114,.08) 36%, rgba(143,134,214,.06) 54%, transparent 70%); }
.lti-orbits { position:absolute; left:0; top:0; width:300px; height:180px; overflow:visible; }
.lti-orbits circle { fill:none; stroke:rgba(238,232,220,.1); stroke-width:1; }
.lti-orbits circle.d { stroke:rgba(233,204,114,.3); stroke-dasharray:1.4 5; }
.lti-orb { position:absolute; left:70px; top:10px; width:160px; height:160px; }
.lti-moon, .lti-sun { position:absolute; left:73px; width:14px; height:14px; border-radius:50%; }
.lti-moon { top:-7px; box-shadow:inset 5px -1px 0 0 #C7BCF6, 0 0 14px rgba(185,173,240,.55); }
.lti-sun { bottom:-7px; background:radial-gradient(circle at 40% 35%, #FFE1D2, #F08A72 62%); box-shadow:0 0 14px rgba(240,138,114,.85), 0 0 0 4px rgba(240,138,114,.12); }
.lti-floor { position:absolute; left:102px; top:146px; width:96px; height:14px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.7), transparent); }
.lti-coin3d { position:absolute; left:98px; top:36px; width:104px; height:104px; perspective:520px; }
.lti-coinface { position:relative; width:104px; height:104px; border-radius:50%; filter:drop-shadow(0 14px 20px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(233,204,114,.24)); }
.lti-coinface .ltk-coin { display:block; }
.lti-sheen { position:absolute; inset:3px; border-radius:50%; mix-blend-mode:screen; opacity:0;
  background:linear-gradient(112deg, transparent 36%, rgba(255,246,220,.5) 48%, transparent 60%) no-repeat; background-size:260% 100%; background-position:130% 0; }
.lti-spark { position:absolute; left:calc(150px + var(--x)); top:118px; width:4px; height:4px; margin-left:-2px; border-radius:50%; opacity:0;
  background:#F6E2A2; box-shadow:0 0 8px rgba(246,226,162,.95); }
.lti-slide.on .lti-orb { animation:lti-spin 18s linear infinite; }
.lti-slide.on .lti-coinface { animation:lti-sway 7s ease-in-out infinite; }
.lti-slide.on .lti-floor { animation:lti-floor 7s ease-in-out infinite; }
.lti-slide.on .lti-sheen { animation:lti-sheen 5.4s ease-in-out .8s infinite; }
.lti-slide.on .lti-spark { animation:lti-rise 3.4s ease-out var(--d) infinite; }
@keyframes lti-spin { to { transform:rotate(360deg); } }
@keyframes lti-sway { 0%, 100% { transform:rotateY(-22deg) rotateX(7deg) translateY(0); } 50% { transform:rotateY(22deg) rotateX(-4deg) translateY(-7px); } }
@keyframes lti-floor { 0%, 100% { transform:scaleX(1); opacity:.95; } 50% { transform:scaleX(.8); opacity:.6; } }
@keyframes lti-sheen { 0% { background-position:130% 0; opacity:1; } 55% { background-position:-40% 0; opacity:1; } 56%, 100% { opacity:0; } }
@keyframes lti-rise { 0% { opacity:0; transform:translateY(0) scale(.6); } 18% { opacity:1; } 100% { opacity:0; transform:translateY(-96px) scale(1.1); } }

/* ---- the art · 2: the hour after a check time, value by value; the month that keeps them ---- */
.lti-fade { position:absolute; left:2px; top:6px; width:188px; height:168px; }
.lti-bars { position:absolute; left:4px; bottom:26px; display:flex; align-items:flex-end; gap:4px; height:100px; }
.lti-bars i { display:block; width:11px; height:calc(100px * var(--v)); border-radius:4px 4px 2px 2px; transform-origin:50% 100%;
  background:linear-gradient(180deg, #EBCB6E, #9C7A2C); opacity:calc(.26 + .62 * var(--v)); }
.lti-bars i.full { opacity:1; background:linear-gradient(180deg, #FBEFC4, #E7C565 55%, #C79E3E); box-shadow:0 0 14px rgba(233,204,114,.45); }
.lti-brace { position:absolute; left:4px; bottom:134px; width:calc(var(--full) * 15px - 4px); height:7px; box-sizing:border-box;
  border:1.5px solid rgba(246,226,162,.8); border-bottom:0; border-radius:3px 3px 0 0; }
.lti-brace b { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); white-space:nowrap; font:700 11px/1 var(--body); letter-spacing:.01em; color:#F2D98A; }
.lti-axis { position:absolute; left:4px; right:8px; bottom:6px; display:flex; justify-content:space-between; padding-top:7px;
  border-top:1px solid rgba(238,232,220,.16); font:600 10px/1 var(--body); letter-spacing:.02em; color:#8E89A3; }
.lti-pop { position:absolute; padding:5px 9px; border-radius:99px; font:700 12px/1 var(--display); color:#1B1406; opacity:0;
  background:linear-gradient(180deg, #F8E9B8, #D6B24A); box-shadow:0 6px 14px -6px rgba(214,178,74,.8); }
.lti-pop.p1 { left:66px; bottom:104px; }
.lti-pop.p2 { left:118px; bottom:82px; }
.lti-life { position:absolute; left:196px; top:8px; width:104px; display:grid; justify-items:center; gap:12px; }
.lti-ring { position:relative; width:96px; height:96px; }
.lti-ring svg { display:block; width:96px; height:96px; transform:rotate(-90deg); overflow:visible; }
.lti-ring .trk { fill:none; stroke:rgba(238,232,220,.09); stroke-width:6; }
.lti-ring .arc { fill:none; stroke:url(#ltiRingG); stroke-width:6; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:24;
  filter:drop-shadow(0 0 5px rgba(240,138,114,.45)); }
.lti-ring-n { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:3px; }
.lti-ring-n b { font:600 30px/1 var(--display); letter-spacing:-.03em; color:#F7F1E3; font-variant-numeric:tabular-nums; }
.lti-ring-n em { font:700 9.5px/1 var(--body); font-style:normal; letter-spacing:.16em; text-transform:uppercase; color:#968FA8; }
.lti-chip { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px 0 6px; border-radius:99px; white-space:nowrap;
  font:600 10.5px/1 var(--body); color:#CFC8DA; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(238,232,220,.09); }
.lti-chip svg { width:13px; height:13px; }
.lti-slide.on .lti-bars i { animation:lti-grow .75s cubic-bezier(.2,.8,.2,1) calc(.22s + var(--k) * .05s) both; }
.lti-slide.on .lti-brace { animation:lti-up .5s ease .4s both; }
.lti-slide.on .lti-pop { animation:lti-pop 3.6s cubic-bezier(.2,.8,.2,1) 1s infinite; }
.lti-slide.on .lti-pop.p2 { animation-delay:2.2s; }
.lti-slide.on .lti-ring .arc { animation:lti-drain 6.4s cubic-bezier(.45,0,.55,1) .5s infinite; }
@keyframes lti-grow { from { transform:scaleY(0); } }
@keyframes lti-pop { 0% { opacity:0; transform:translateY(10px) scale(.8); } 14%, 52% { opacity:1; transform:none; } 80%, 100% { opacity:0; transform:translateY(-16px) scale(.96); } }
@keyframes lti-drain { 0% { stroke-dashoffset:0; opacity:1; } 72% { stroke-dashoffset:97; opacity:1; } 80% { stroke-dashoffset:100; opacity:0; } 90% { stroke-dashoffset:0; opacity:0; } 100% { stroke-dashoffset:0; opacity:1; } }

/* ---- the art · 3: four doors round the coin, a token travelling to each ---- */
.lti-rays { position:absolute; left:0; top:0; width:300px; height:180px; }
.lti-rays path { fill:none; stroke:rgba(233,204,114,.32); stroke-width:1.2; stroke-dasharray:2 4; }
.lti-tile { position:absolute; width:128px; height:66px; box-sizing:border-box; padding:9px 10px 9px 9px; border-radius:16px;
  display:grid; grid-template-columns:30px minmax(0, 1fr); grid-template-rows:auto auto; column-gap:8px; row-gap:4px; align-content:center;
  background:linear-gradient(180deg, rgba(29,30,39,.97), rgba(19,20,27,.97)); box-shadow:inset 0 0 0 1px rgba(238,232,220,.08), 0 10px 22px -14px rgba(0,0,0,.85); }
.lti-tile.t1 { left:4px; top:6px; }
.lti-tile.t2 { left:168px; top:6px; }
.lti-tile.t3 { left:4px; top:108px; }
.lti-tile.t4 { left:168px; top:108px; }
.lti-ti { grid-row:1 / span 2; align-self:center; display:grid; place-items:center; width:30px; height:30px; border-radius:10px;
  background:rgba(233,204,114,.1); box-shadow:inset 0 0 0 1px rgba(233,204,114,.24); }
.lti-tile > b { display:flex; align-items:center; gap:4px; min-width:0; font:600 17px/1 var(--display); letter-spacing:-.01em; color:#F7F1E3; font-variant-numeric:tabular-nums; white-space:nowrap; }
.lti-tb { display:inline-grid; flex:none; }
.lti-tb svg { display:block; }
.lti-tl { display:grid; gap:2px; min-width:0; }
.lti-tl strong { font:600 11px/1.1 var(--body); color:#DAD3E3; }
.lti-tl em { font:400 10px/1.1 var(--body); font-style:normal; color:#8E89A3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lti-hub { position:absolute; left:128px; top:68px; z-index:2; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#0D0E14;
  box-shadow:0 0 0 5px rgba(13,14,20,.92), 0 0 0 6px rgba(233,204,114,.28), 0 0 26px rgba(233,204,114,.45); }
.lti-hub svg { display:block; }
.lti-run { position:absolute; left:147px; top:87px; z-index:1; width:6px; height:6px; border-radius:50%; opacity:0; background:#F6E2A2; box-shadow:0 0 10px rgba(246,226,162,.95); }
.lti-run.r1 { --tx:-46px; --ty:-29px; }
.lti-run.r2 { --tx:46px; --ty:-29px; }
.lti-run.r3 { --tx:-46px; --ty:29px; }
.lti-run.r4 { --tx:46px; --ty:29px; }
.lti-slide.on .lti-tile { animation:lti-in .62s cubic-bezier(.2,.8,.2,1) both; }
.lti-slide.on .lti-tile.t2 { animation-delay:.08s; }
.lti-slide.on .lti-tile.t3 { animation-delay:.16s; }
.lti-slide.on .lti-tile.t4 { animation-delay:.24s; }
.lti-slide.on .lti-hub { animation:lti-beat 2.8s ease-in-out .6s infinite; }
.lti-slide.on .lti-run { animation:lti-run 2.8s cubic-bezier(.3,.6,.4,1) .6s infinite; }
.lti-slide.on .lti-run.r2 { animation-delay:1.3s; }
.lti-slide.on .lti-run.r3 { animation-delay:2s; }
.lti-slide.on .lti-run.r4 { animation-delay:2.7s; }
@keyframes lti-in { from { opacity:0; transform:translateY(8px) scale(.96); } }
@keyframes lti-beat { 0%, 100% { transform:scale(1); } 10% { transform:scale(1.08); } 22% { transform:scale(1); } }
@keyframes lti-run { 0% { opacity:0; transform:translate(0, 0) scale(.6); } 16% { opacity:1; } 72% { opacity:1; } 100% { opacity:0; transform:translate(var(--tx), var(--ty)) scale(1); } }

/* the help's way back to it */
.ltk-tour { display:inline-flex; align-items:center; gap:7px; margin-top:10px; height:34px; padding:0 14px; border:0; border-radius:99px; cursor:pointer;
  font:600 12.5px/1 var(--body); color:var(--ink); background:var(--st-tile, rgba(255,255,255,.05)); box-shadow:inset 0 0 0 1px var(--st-line, rgba(238,232,220,.12)); }
.ltk-tour:hover { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .5); }
.ltk-tour i { width:0; height:0; border-left:7px solid rgb(var(--acc-rgb)); border-top:4.5px solid transparent; border-bottom:4.5px solid transparent; }

@media (max-width:340px) {
  .lti-card { padding:12px 14px 14px; border-radius:26px; }
  .lti-view { margin:2px -14px 0; }
  .lti-slide { padding:0 14px; gap:13px; }
  .lti-h { font-size:22px; }
  .lti-p { font-size:13.5px; }
  .lti-facts li { padding:11px 3px 10px; font-size:10.5px; }
  .lti-stats b { font-size:17px; }
  .lti-next { padding:0 14px 0 17px; }
}
@media (max-height:640px) {
  .lti-slide { gap:12px; }
  .lti-foot { margin-top:14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lti, .lti *, .lti *::before, .lti *::after { animation:none !important; transition:none !important; }
  .lti-pop { opacity:1; }
}

/* =====================================================================
   THE SKY METER on Now (ui-lite-swipe.js lhsSkyMeter; the user, 2026-10-02: "Sky meter in linear form"): sunrise to
   tomorrow's sunrise on one thin line between the Shiva card and the breath check. The day warm, the night deep; the hours
   ticked under it; by day the sun, an ember at the horizons and pale gold at midday; by night the moon in its phase. What is
   still to come is dimmed (a mask, so the line never needs the page's colour behind it). The times are the bands' own.
   ===================================================================== */
.lhs-skym { position:relative; margin:20px 4px 0; }
.lhs-skym[hidden] { display:none; }
.lhs-skym:not([hidden]) + .lhs-now-check { margin-top:18px; }
.lhs-skym-row { position:relative; height:26px; }
.lhs-skym-tr { position:absolute; left:0; right:0; top:11px; height:4px; border-radius:99px;
  background:linear-gradient(90deg, #E9876A 0%, #F2BE78 calc(var(--xs) * .2), #F7E4A8 calc(var(--xs) * .5), #F2BE78 calc(var(--xs) * .8), #E57F5C var(--xs),
    #5A4A8C calc(var(--xs) + .8%), #2B2954 calc(var(--xs) + (100% - var(--xs)) * .5), #4A3F7E calc(100% - .8%), #E9876A 100%);
  -webkit-mask:linear-gradient(90deg, #000 var(--x, 0%), rgba(0,0,0,.3) var(--x, 0%)); mask:linear-gradient(90deg, #000 var(--x, 0%), rgba(0,0,0,.3) var(--x, 0%)); }
.lhs-skym-tk { position:absolute; top:18px; width:1px; height:3px; margin-left:-.5px; background:var(--ink-2); opacity:.28; }
.lhs-skym-tk.mj { height:5px; opacity:.5; }
.lhs-skym-st { position:absolute; top:3px; width:2px; height:2px; margin-left:-1px; border-radius:50%; background:#E6E0FF; opacity:.55; box-shadow:0 0 4px rgba(230,224,255,.7); }
.lhs-skym-st.lo { top:6px; opacity:.38; }
.lhs-skym-mk { position:absolute; top:13px; left:0; width:0; height:0; z-index:1; transition:left 3.9s linear; }
.lhs-skym-sun { position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:50%; opacity:var(--sa, 1);
  background:radial-gradient(circle at 38% 34%, #FFFDF4 0%, var(--sun, #FFE7B0) 54%, var(--sun, #FFE7B0) 100%);
  box-shadow:0 0 0 3px var(--sunrim, rgba(255,240,200,.3)), 0 0 calc(var(--glow, 10) * 1px) calc(var(--glow, 10) * .3px) var(--sun, #FFE7B0);
  transition:background .9s ease, box-shadow .9s ease, opacity .9s ease; }
.lhs-skym-moon { position:absolute; left:-9px; top:-9px; width:18px; height:18px; filter:drop-shadow(0 0 calc(var(--mg, 4) * 1px) rgba(240,228,196,.7)); }
.lhs-skym-moon .lhs-moon { display:block; width:18px; height:18px; filter:none; }
.lhs-skym-moon .lhs-moon .dark { fill:#1D1C36; }
.lhs-skym-moon .lhs-moon .rim { stroke:rgba(241,231,203,.45); stroke-width:2; }
.lhs-skym-mk:not(.night) .lhs-skym-moon, .lhs-skym-mk.night .lhs-skym-sun { display:none; }
.lhs-skym-ax { margin-top:5px; font:500 11px/1.2 var(--body); letter-spacing:.01em; color:var(--dim); }
.lhs-skym-ax b { font-weight:600; color:var(--ink-2); }
.lhs-skym-ax .ldax-e b { color:var(--brass-hi); }
.lhs-skym-ax.ldax { display:block; container:ldax / inline-size; min-width:0; }
@container ldax (max-width: 300px) { .lhs-skym-ax .lhs-skym-w { display:none; } }
@container ldax (max-width: 180px) { .lhs-skym-ax .lhs-skym-t { display:none; } }
@container ldax (max-width: 250px) { .lhs-skym-ax .ldax-c { display:none; } }
@media (prefers-reduced-motion: reduce) { .lhs-skym-mk, .lhs-skym-sun { transition:none; } }

/* Breath Tap's last step, Recorded (ui-breathtap.js 'saved'): the side found, and the same Undo and Confirm as every breath
   check card, in the sheet's own ink (the user, 2026-10-02) */
.bts-saved { display:grid; justify-items:center; gap:6px; padding:18px 0 4px; text-align:center; }
.bts-saved-ok { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; margin-bottom:6px;
  background:radial-gradient(circle at 35% 30%, rgba(98,196,152,.32), rgba(98,196,152,.08)); box-shadow:inset 0 0 0 1px rgba(98,196,152,.45), 0 0 30px rgba(98,196,152,.25); }
.bts-saved-ok svg { width:26px; height:26px; fill:none; stroke:#7EE0B6; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.bts-saved b { font:600 22px/1.15 var(--display); color:var(--bt-ink); }
.bts-saved em { font:400 13px/1.4 var(--body); font-style:normal; color:var(--bt-ink2); }
.btsheet .lal-undo, .btsheet .lal-lock { --ink:var(--bt-ink); --ink-2:var(--bt-ink2); }
.btsheet .lal-undo { margin:14px 0 2px; }
.swarabtns.is-shut button { opacity:.45; cursor:default; }

/* the key card in its own sheet, from the home's banner (ui-lite-vault.js lvtCardSheet): History's card, and three lines on
   what the backup is */
.lvt-cardsheet .lvt-card { margin-top:4px; }
.lvt-points { list-style:none; margin:16px 2px 2px; padding:0; display:grid; gap:12px; }
.lvt-points li { display:grid; grid-template-columns:28px minmax(0, 1fr); align-items:center; gap:10px; }
.lvt-points svg { justify-self:center; width:20px; height:20px; fill:none; stroke:var(--brass-hi); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lvt-points b { display:block; font:600 13px/1.3 var(--body); color:var(--ink); }
.lvt-points em { display:block; font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); }

/* the check set against the Swara Code, once it is final (ui-lite-shell.js obsMatch; the user, 2026-10-02): a quiet word in the
   shared note, jade when on, brass when off with its tiny "keep checking", the next-check line under both */
.lal-lock.has-m { align-items:flex-start; }
.lal-lock.has-m > i { margin-top:1px; }
.lal-lock.m-off > i { background:color-mix(in srgb, var(--brass-hi) 16%, transparent); box-shadow:inset 0 0 0 2px var(--brass-hi); }
.lal-lock .lal-m-hd { font-weight:600; color:var(--ink); }
.lal-lock.m-on .lal-m-hd, .lal-lockcard.m-on .lal-m-hd { color:var(--jade, #62C19E); }
.lal-lock.m-off .lal-m-hd, .lal-lockcard.m-off .lal-m-hd { color:var(--brass-hi); }
.lal-lock .lal-m-say { color:var(--ink-2); }
.lal-m-tiny { display:block; margin-top:3px; font:500 11px/1.35 var(--body); letter-spacing:.01em; color:color-mix(in srgb, var(--brass-hi) 80%, var(--ink-2)); }
.lal-lock .lal-m-next { display:block; margin-top:4px; font:400 11.5px/1.35 var(--body); font-style:normal; color:var(--dim); }
.lal-lockcard-m { margin:0 0 8px; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.lal-lockcard-m .lal-m-hd { font-weight:600; }
.lal-lockcard.m-off { background:color-mix(in srgb, var(--brass-hi) 6%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 24%, transparent); }
.lal-lockcard.m-off > i { box-shadow:inset 0 0 0 2px var(--brass-hi); background:radial-gradient(circle, var(--brass-hi) 0 4px, transparent 4.5px); }

/* the check against the Swara Code, as a small card where its note was (ui-lite-shell.js obsMatchCard; the user, 2026-10-02): the
   word in jade or brass, the two sides, keep checking when off, Your progress, and a × */
.lal-mcard { --mc:var(--brass-hi); position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:12px 0 4px; padding:11px 42px 11px 13px;
  border-radius:14px; text-align:left; background:color-mix(in srgb, var(--mc) 9%, color-mix(in srgb, var(--ink) 5%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mc) 26%, transparent); }
.lal-mcard.m-on { --mc:var(--jade, #62C19E); }
.lal-mcard-tx { display:grid; gap:2px; min-width:0; flex:1 1 170px; }
.lal-mcard .lal-m-hd { font:600 13.5px/1.3 var(--body); color:var(--mc); }
.lal-mcard-sides { font:500 12.5px/1.35 var(--body); color:var(--ink-2); }
.lal-mcard .lal-m-tiny { margin-top:1px; }
.lal-mcard .lal-m-prog { margin-top:0; }
.lal-mcard-x { position:absolute; top:7px; right:7px; width:28px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; cursor:pointer;
  font:400 19px/1 var(--body); color:var(--ink-2); background:transparent; transition:background .2s, color .2s; }
.lal-mcard-x:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 9%, transparent); }
.lal-mcard-x:focus-visible { outline:2px solid var(--mc); outline-offset:1px; }
/* "See your progress" under the note a final check leaves (ui-lite-shell.js obsMatchCard), and Your progress lit when reached */
.lal-m-prog { display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:4px 11px 4px 10px; border:0; border-radius:99px; cursor:pointer;
  font:600 11.5px/1.35 var(--body); color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
  transition:background .2s, box-shadow .2s; }
.lal-m-prog::after { content:''; width:5px; height:5px; border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg); opacity:.65; }
.lal-m-prog:hover { background:color-mix(in srgb, var(--ink) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 45%, transparent); }
.lal-m-prog:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lal-lockcard-m .lal-m-prog { display:flex; width:max-content; }
.lhs-now-rec.lhs-lit { border-radius:18px; animation:lhsLit 2.6s ease both; }
@keyframes lhsLit { 0%, 100% { box-shadow:0 0 0 0 transparent; } 18%, 62% { box-shadow:0 0 0 2px color-mix(in srgb, var(--brass-hi) 50%, transparent), 0 0 28px -6px color-mix(in srgb, var(--brass-hi) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .lhs-now-rec.lhs-lit { animation:none; } }

/* the calendar sheet: which account the events reach (ui-timetable.js, the user, 2026-10-02) */
.tcal-acct { display:flex; align-items:flex-start; gap:10px; margin:2px 0 10px; padding:10px 12px; border-radius:14px; font:400 12px/1.45 var(--body); color:var(--ink-2);
  background:color-mix(in srgb, var(--brass-hi) 6%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 22%, transparent); }
.tcal-acct i { flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:color-mix(in srgb, var(--brass-hi) 12%, transparent); }
.tcal-acct svg { width:16px; height:16px; fill:none; stroke:var(--brass-hi); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tcal-acct b { display:block; margin-bottom:1px; font-weight:600; font-size:12.5px; color:var(--ink); }

/* the wallet says whose it is when the device holds more than one person (ui-lite-tokens.js, 2026-10-02); a carry, its own mark */
.ltkw-who { grid-column:1 / -1; grid-row:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 10px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.ltkw-hero.has-who .ltk-coin { grid-row:2 / span 2; }
.ltkw-tx.k-carry .ltkw-ico { color:var(--ink-2); }

/* the wallet: today's checks against the day's cap, each person their own (ui-lite-tokens.js, 2026-10-02) */
.ltkw-cap { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:9px 12px; padding:12px 14px 13px; border-radius:16px;
  background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.ltkw-cap-k { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 9.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.ltkw-cap-n { font:500 11.5px/1 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }
.ltkw-cap-n b { font:500 17px/1 var(--display); color:var(--ink); letter-spacing:-.01em; }
.ltkw-cap-bar { grid-column:1 / -1; position:relative; height:6px; border-radius:99px; overflow:hidden; background:color-mix(in srgb, var(--ink) 9%, transparent); }
.ltkw-cap-bar i { position:absolute; inset:0 auto 0 0; border-radius:inherit; background:linear-gradient(90deg, rgba(var(--acc-rgb), .5), rgb(var(--acc-rgb))); box-shadow:0 0 10px rgba(var(--acc-rgb), .35); }
.ltkw-cap.full .ltkw-cap-k { color:var(--ltk-up); }
.ltkw-cap.full .ltkw-cap-bar i { background:linear-gradient(90deg, color-mix(in srgb, var(--ltk-up) 55%, transparent), var(--ltk-up)); box-shadow:0 0 10px color-mix(in srgb, var(--ltk-up) 40%, transparent); }
/* the introduction's second step: the day's cap (ui-lite-tkintro.js) */
.lti-cap { margin:-2px 0 0; text-align:center; font:500 11.5px/1.4 var(--body); color:#B3ACC6; }
.lti-cap b { font-weight:700; color:#F2D98A; font-variant-numeric:tabular-nums; }

/* the report, brought to the Diagnosis as it is now (ui-lite-report.js, 2026-10-02): the cover's basis; the three witnesses
   drawn in SVG (the PDF draws no box-shadow); the organs under each map; the centres' sentence; each verse's needs; Next; the
   sky's states */
.krp-cv-basis { margin:6px 0 0; font:400 10px/1.45 var(--body); color:var(--ink-2); }
.krp-witt td { vertical-align:middle; }
.krp-witt tr.agree td:first-child b { color:#6B4F06; }
.krp-agree { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; border:1px solid #E3CF96; background:#FBF4E1; font:700 9px/1.5 var(--body); color:#7A5B0C; }
.krp-wd { display:inline-flex; align-items:center; gap:5px; }
.krp-wd svg { width:13px; height:13px; flex:none; }
.krp-wd em { font:500 9.5px/1.2 var(--body); font-style:normal; color:var(--ink-2); }
.krp-wd.na em, .krp-wd.off em { color:var(--dim); }
.krp-orgline { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.krp-orgline .krp-eyebrow { flex:0 0 100%; }
.krp-csay { margin:2px 0 8px; font:400 10.5px/1.5 var(--body); color:var(--ink-2); }
.krp-rneeds { display:flex; flex-wrap:wrap; gap:5px; margin:6px 0 0; }
.krp-rneed { padding:3px 9px; border-radius:999px; border:1px solid var(--k-line); font:600 9.5px/1.3 var(--body); color:var(--ink); }
.krp-rneed em { font-weight:400; font-style:normal; color:var(--dim); }
.krp-rneed.essential { border-color:#EBC9BD; background:#FFF8F5; }
.krp-next { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid var(--k-line); }
.krp-next b { display:block; font:700 12px/1.3 var(--body); color:var(--ink); }
.krp-next p { margin:3px 0 0; font:400 10.5px/1.45 var(--body); color:var(--ink-2); }
.krp-sky { padding:8px 10px; border-radius:10px; border:1px solid var(--k-line); }
.krp-sky.st-brings, .krp-sky.st-bad { border-color:#EBC9BD; background:#FFF8F5; }
.krp-sky.st-eases, .krp-sky.st-relief { border-color:#BFDCCB; background:#F5FBF7; }
.krp-sky.st-held { border-color:#E3D7B4; background:#FCF9F0; }

/* the calendar waits for a firm record (ui-lite-tokens.js ltkCalendarGate, 2026-10-02); Sankalpa's gate on its form */
.ltk-calbar.locked .ltk-calbar-ico { flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.ltk-calbar.locked .ltk-calbar-ico svg { width:16px; height:16px; fill:none; stroke:var(--ink-2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lsk-gate { margin:4px 0 12px; }

/* the drawer's breath card in the dock's own column (the user, 2026-10-02: "the shown breath check button card is bigger in
   dimension than the below situated buttons of the drawer. Make everything symmetric"): the same centred width as the dock and the
   wallet's line, their corners, and the dock's own gap under it */
.lite-has-chart .litedrawer .liteacts > .lhs-dq { width:100%; max-width:520px; margin:0 auto 12px; box-sizing:border-box; border-radius:20px; }

/* =====================================================================================================================
   TODAY · THE DAY'S HARVEST (the user, 2026-10-03; ui-lite-swipe.js lhsPaintToday, .ltd-*)
   One arc on the scale of the day lived — your breath, the same checks on your Swara Code, the day's potential — the next check
   under it, every check since sunrise as a bead on the Swara Code's band, the Swarodaya's verse, and the rest at a glance.
   Every colour is a token here, redefined for the day theme, so both themes resolve as one set.
   ===================================================================================================================== */
:root {
  --ltd-g0:#B8893A; --ltd-g1:#F7E3A2; --ltd-gold:#F2D98A; --ltd-glow:242, 217, 138; --ltd-on:#62C19E; --ltd-on-rgb:98, 193, 158;
  --ltd-off:#E2A866; --ltd-trk:rgba(255,255,255,.065); --ltd-hatch0:rgba(242,217,138,.08); --ltd-hatch1:rgba(242,217,138,.62);
  --ltd-pot:rgba(242,217,138,.3); --ltd-knob:#FFF8E2; --ltd-panel:rgba(255,255,255,.028); --ltd-rule:rgba(255,255,255,.07);
}
:root[data-theme="light"] {
  --ltd-g0:#7C5A0C; --ltd-g1:#C99A2C; --ltd-gold:#8A6A12; --ltd-glow:150, 110, 18; --ltd-on:#2E8F69; --ltd-on-rgb:46, 143, 105;
  --ltd-off:#B0601A; --ltd-trk:rgba(40,30,60,.08); --ltd-hatch0:rgba(150,110,18,.07); --ltd-hatch1:rgba(150,110,18,.55);
  --ltd-pot:rgba(150,110,18,.26); --ltd-knob:#FFFFFF; --ltd-panel:#FFFFFF; --ltd-rule:rgba(40,30,60,.09);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ltd-g0:#7C5A0C; --ltd-g1:#C99A2C; --ltd-gold:#8A6A12; --ltd-glow:150, 110, 18; --ltd-on:#2E8F69; --ltd-on-rgb:46, 143, 105;
    --ltd-off:#B0601A; --ltd-trk:rgba(40,30,60,.08); --ltd-hatch0:rgba(150,110,18,.07); --ltd-hatch1:rgba(150,110,18,.55);
    --ltd-pot:rgba(150,110,18,.26); --ltd-knob:#FFFFFF; --ltd-panel:#FFFFFF; --ltd-rule:rgba(40,30,60,.09);
  }
}
.ltd-part[hidden] { display:none !important; }
.ltd-part { min-width:0; }
.lhs-page[data-page="today"] .lhs-in { gap:24px; }
.ltd-sechd { display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0; }
.ltd-hd .lhs-sub { margin-top:6px; }

/* ---- the hero: no box, a light the arc stands in ------------------------------------------------------------------- */
.ltd-hero { position:relative; display:grid; justify-items:center; gap:10px; padding:4px 0 2px; isolation:isolate; }
.ltd-hero-top { margin-bottom:6px; }
.ltd-hero::before { content:''; position:absolute; z-index:-1; left:50%; top:8%; width:min(118%, 460px); aspect-ratio:1.6; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(var(--ltd-glow), .15), rgba(var(--ltd-glow), .05) 55%, transparent 76%); pointer-events:none; }
.ltd-hero-top { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; }
.ltd-upd { font:500 10.5px/1 var(--body); letter-spacing:.04em; color:var(--dim); }
.ltd-upd::before { content:''; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--ltd-gold); vertical-align:1px;
  animation:ltdBlink 1.2s ease-in-out infinite; }
@keyframes ltdBlink { 50% { opacity:.25; } }
.ltd-arc { position:relative; width:min(100%, 340px); }
.ltd-arcsvg { display:block; width:100%; height:auto; overflow:visible; }
.ltd-arcsvg path { fill:none; }
.ltd-arcsvg .a-trk { stroke:var(--ltd-trk); stroke-width:16; stroke-linecap:round; }
.ltd-arcsvg .a-open { stroke:var(--ltd-pot); stroke-width:16; }
.ltd-arcsvg .a-code { stroke:url(#ltdArcH); stroke-width:16; }
.ltd-arcsvg .a-now { stroke:url(#ltdArcG); stroke-width:16; stroke-linecap:round; filter:drop-shadow(0 0 7px rgba(var(--ltd-glow), .35)); }
.ltd-arcsvg stop.g0 { stop-color:var(--ltd-g0); } .ltd-arcsvg stop.g1 { stop-color:var(--ltd-g1); }
.ltd-arcsvg rect.h0 { fill:var(--ltd-hatch0); } .ltd-arcsvg rect.h1 { fill:var(--ltd-hatch1); }
.ltd-arcsvg .a-ceil { fill:var(--ground); stroke:var(--ltd-gold); stroke-width:2; }
.ltd-arcsvg .a-max { font:600 12px/1 var(--mono); fill:var(--ltd-gold); font-variant-numeric:tabular-nums; }
.ltd-arcsvg .a-max tspan { font-size:9.5px; }
.ltd-arcsvg .a-halo { fill:rgba(var(--ltd-glow), .2); }
.ltd-arcsvg .a-knob { fill:var(--ltd-knob); stroke:var(--ltd-g1); stroke-width:2; }
.ltd-read { position:absolute; left:50%; bottom:2px; transform:translateX(-50%); display:grid; justify-items:center; gap:4px; width:62%; text-align:center; }
.ltd-read-k { font:600 10px/1.2 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--ltd-gold); }
.ltd-read-n { font:300 66px/.92 var(--display); letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
.ltd-hero.p-pot .ltd-read-n { color:var(--ltd-gold); }
/* the unit: the per cent of full resonance, small and raised beside the figure */
.ltd-read-v { display:inline-flex; align-items:flex-start; gap:2px; }
.ltd-pc { margin-top:.5em; font:400 24px/1 var(--display); font-style:normal; color:var(--ink-2); }
.ltd-hero.p-pot .ltd-pc { color:var(--ltd-gold); opacity:.75; }
.ltd-read-s { font:500 12px/1.2 var(--body); color:var(--ink-2); }
.ltd-hero.p-pot .ltd-read-s { color:var(--dim); }
.ltd-say { margin:0; max-width:34ch; font:400 13.5px/1.45 var(--body); color:var(--ink-2); text-align:center; text-wrap:balance; }
.ltd-say b { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.ltd-held { display:flex; align-items:flex-start; gap:8px; margin:0; max-width:36ch; font:500 12px/1.4 var(--body); color:var(--ltk-down); text-align:left; }
.ltd-held svg { flex:none; width:16px; height:16px; margin-top:1px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.ltd-trio { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); width:100%; margin:4px 0 0; padding:0; list-style:none; }
.ltd-trio li { display:grid; justify-items:center; align-content:start; gap:3px; min-width:0; padding:0 4px; text-align:center; }
.ltd-trio li + li { box-shadow:inset 1px 0 0 var(--ltd-rule); }
.ltd-trio i { width:22px; height:5px; border-radius:3px; margin-bottom:3px; }
.ltd-trio .t-now i { background:linear-gradient(90deg, var(--ltd-g0), var(--ltd-g1)); }
.ltd-trio .t-code i { background:repeating-linear-gradient(135deg, var(--ltd-hatch1) 0 2px, var(--ltd-hatch0) 2px 4.5px); }
.ltd-trio .t-pot i { background:var(--ltd-pot); box-shadow:inset 0 0 0 1px rgba(var(--ltd-glow), .45); }
.ltd-trio b { font:500 21px/1 var(--display); letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
.ltd-trio b small { margin-left:1px; font-size:.6em; font-weight:500; color:var(--ink-2); }
.ltd-trio span { font:500 11px/1.25 var(--body); color:var(--ink-2); }
.ltd-trio em { font:500 10px/1.2 var(--body); font-style:normal; color:var(--dim); }
/* growing, once, when the hero is written anew: the arc from where it stood, the knob after it, the rest settling */
.ltd-hero.grow .a-now { animation:ltdArcIn 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ltdArcIn { from { stroke-dasharray:var(--from, 0) 100; } }
.ltd-hero.grow .a-knob, .ltd-hero.grow .a-halo { animation:ltdFadeIn .5s ease .75s both; }
.ltd-hero.grow .a-code, .ltd-hero.grow .a-open { animation:ltdFadeIn .7s ease .2s both; }
@keyframes ltdFadeIn { from { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .ltd-hero.grow .a-now, .ltd-hero.grow .a-knob, .ltd-hero.grow .a-halo, .ltd-hero.grow .a-code, .ltd-hero.grow .a-open, .ltd-upd::before { animation:none; } }

/* ---- the next check: one wide button, what it can add on your code, what it pays ----------------------------------- */
.ltd-cta { display:flex; align-items:center; gap:12px; width:100%; min-height:62px; padding:10px 12px 10px 16px; border:0; border-radius:20px; cursor:pointer; text-align:left; color:var(--ink);
  background:var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line-2); transition:transform .15s ease, box-shadow .2s ease; }
.ltd-cta:active { transform:scale(.985); }
.ltd-cta:focus-visible { outline:2px solid var(--ltd-gold); outline-offset:3px; }
.ltd-cta.open { background:linear-gradient(135deg, rgba(var(--ltd-on-rgb), .2), rgba(var(--ltd-on-rgb), .07) 60%), var(--lhs-card);
  box-shadow:inset 0 0 0 1px rgba(var(--ltd-on-rgb), .45); }
.ltd-cta-dot { flex:none; width:10px; height:10px; border-radius:50%; background:var(--dim); }
.ltd-cta.open .ltd-cta-dot { background:var(--ltd-on); box-shadow:0 0 0 4px rgba(var(--ltd-on-rgb), .22), 0 0 14px var(--ltd-on); }
html[data-lhs-page="today"] .ltd-cta.open .ltd-cta-dot { animation:ltdPulse 2.2s ease-in-out infinite; }
@keyframes ltdPulse { 50% { box-shadow:0 0 0 7px rgba(var(--ltd-on-rgb), .08), 0 0 18px var(--ltd-on); } }
.ltd-cta-tx { flex:1 1 auto; display:grid; gap:3px; min-width:0; }
.ltd-cta-l1 { display:flex; align-items:baseline; gap:4px 9px; min-width:0; }
.ltd-cta-l1 b { flex:none; font:600 15px/1.2 var(--body); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ltd-cta-tx em { font:500 12px/1.3 var(--body); font-style:normal; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ltd-cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:3px; }
.ltd-cta > svg { flex:none; width:16px; height:16px; fill:none; stroke:var(--dim); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ltd-cta-tk { flex:none; display:inline-flex; align-items:center; gap:5px; padding:4px 9px 4px 6px; border-radius:999px; background:rgba(var(--ltd-glow), .1); }
.ltd-cta-tk b { font:600 12px/1 var(--mono); color:var(--ltd-gold); }
/* ---- the gain, first (the user, 2026-10-04): what the next check can add to today's Swara Resonance leads the banner ---- */
.ltd-cta.gain { position:relative; overflow:hidden; gap:12px; min-height:0; padding:14px 12px 14px 14px; border-radius:22px;
  background:radial-gradient(130% 150% at 0% 0%, rgba(var(--ltd-glow), .22), rgba(var(--ltd-glow), .05) 52%, transparent 78%), var(--lhs-card);
  box-shadow:inset 0 0 0 1px rgba(var(--ltd-glow), .36); }      /* its hairline only: no glow beneath (the user, 2026-10-07) */
.ltd-cta.gain.open { background:radial-gradient(130% 150% at 0% 0%, rgba(var(--ltd-on-rgb), .26), rgba(var(--ltd-on-rgb), .06) 52%, transparent 78%), var(--lhs-card);
  box-shadow:inset 0 0 0 1px rgba(var(--ltd-on-rgb), .48); }
.ltd-cta-gain { flex:none; display:grid; justify-items:center; align-content:center; gap:3px; min-width:66px; padding-right:11px;
  box-shadow:1px 0 0 rgba(var(--ltd-glow), .22); }
.ltd-cta.gain.open .ltd-cta-gain { box-shadow:1px 0 0 rgba(var(--ltd-on-rgb), .3); }
.ltd-cta-gain b { font:400 38px/.9 var(--display); letter-spacing:-.035em; font-variant-numeric:tabular-nums lining-nums; color:var(--ltd-gold);
  background:linear-gradient(180deg, var(--ltd-g1), var(--ltd-g0)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ltd-cta.gain.open .ltd-cta-gain b { color:var(--ltd-on); background:linear-gradient(180deg, color-mix(in srgb, var(--ltd-on) 72%, #fff), var(--ltd-on));
  -webkit-background-clip:text; background-clip:text; }
.ltd-cta-gain small { margin-left:1px; font-size:.5em; letter-spacing:0; }
.ltd-cta-gain em { font:600 9.5px/1 var(--body); font-style:normal; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); }
.ltd-cta-hl { font:500 15px/1.3 var(--display); color:var(--ink); text-wrap:balance; }
.ltd-cta-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:7px; }
.ltd-cta-when { display:inline-flex; align-items:flex-start; gap:7px; min-width:0; max-width:100%; font:500 12px/1.2 var(--body); color:var(--ink-2); }
/* the time, and what it is, side by side, the second under the first where the line is short (a 320 px phone, the turn open) */
.ltd-cta-wt { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:7px; row-gap:1px; min-width:0; }
.ltd-cta-when b { font-weight:600; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ltd-cta-when em { font-style:normal; white-space:nowrap; }
.ltd-cta.gain .ltd-cta-dot { width:7px; height:7px; margin-top:4px; }
@media (max-width:340px) { .ltd-cta.gain { gap:10px; padding:12px 8px 12px 12px; } .ltd-cta-gain { min-width:50px; padding-right:9px; } .ltd-cta-gain b { font-size:30px; } .ltd-cta-hl { font-size:13.5px; } }

/* ---- how it is read, folded ------------------------------------------------------------------------------------------ */
.ltd-how { display:grid; justify-items:center; gap:10px; margin-top:-8px; }
.ltd-how-b { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:0; border-radius:999px; background:none; cursor:pointer;
  font:500 12px/1 var(--body); color:var(--dim); }
.ltd-how-b svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .25s ease; }
.ltd-how.open .ltd-how-b svg { transform:rotate(180deg); }
.ltd-how-b:hover, .ltd-how-b:focus-visible { color:var(--ink-2); }
.ltd-how-l { display:grid; gap:10px; width:100%; margin:0; padding:14px 16px; list-style:none; border-radius:18px; background:var(--ltd-panel); box-shadow:inset 0 0 0 1px var(--ltd-rule); }
.ltd-how-l li { display:grid; grid-template-columns:22px minmax(0, 1fr); gap:10px; align-items:start; }
.ltd-how-l li.u { grid-template-columns:minmax(0, 1fr); padding-top:8px; box-shadow:inset 0 1px 0 var(--ltd-rule); }
.ltd-how-l li.d { grid-template-columns:minmax(0, 1fr); padding-bottom:10px; box-shadow:inset 0 -1px 0 var(--ltd-rule); }
.ltd-how-l li.d b { color:var(--ltd-gold); }
.ltd-how-l i { width:22px; height:5px; margin-top:7px; border-radius:3px; }
.ltd-how-l .t-now i { background:linear-gradient(90deg, var(--ltd-g0), var(--ltd-g1)); }
.ltd-how-l .t-code i { background:repeating-linear-gradient(135deg, var(--ltd-hatch1) 0 2px, var(--ltd-hatch0) 2px 4.5px); }
.ltd-how-l .t-pot i { background:var(--ltd-pot); box-shadow:inset 0 0 0 1px rgba(var(--ltd-glow), .45); }
.ltd-how-l span { font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.ltd-how-l b { display:block; margin-bottom:1px; font:600 12.5px/1.3 var(--body); color:var(--ink); }
.ltd-how-l li.u span { font-size:11.5px; color:var(--dim); }

/* ---- since sunrise: the Swara Code's band, every check a bead over it -------------------------------------------------- */
.ltd-since { display:grid; gap:10px; min-width:0; }
.ltd-since .ltd-sechd { flex-wrap:wrap; row-gap:6px; }
.ltd-since .ltd-sechd .lhs-eb { white-space:nowrap; }
.ltd-count { display:inline-flex; flex-wrap:wrap; align-items:center; gap:5px; min-width:0; font:500 12px/1.2 var(--body); color:var(--ink-2); white-space:nowrap; }
.ltd-count b { font:600 12.5px/1 var(--mono); color:var(--ink); }
.ltd-count > i { font-style:normal; color:var(--dim); }
.ltd-earned { display:inline-flex; align-items:center; gap:4px; margin-left:6px; font:600 11.5px/1 var(--mono); color:var(--ltd-gold); }
.ltd-band.lband { padding-top:0; }
.ltd-band .lband-hold { padding-top:22px; }
.ltd-band .lband-track { height:12px; border-radius:6px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.ltd-band .lband-track::after { background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%); }
.ltd-band .lband-future { background:color-mix(in srgb, var(--ground) 62%, transparent); box-shadow:-1.5px 0 0 var(--ink); }
.ltd-ticks { position:absolute; left:0; right:0; top:0; height:22px; pointer-events:none; }
.ltd-tick { position:absolute; bottom:3px; width:3px; height:13px; margin-left:-1.5px; border-radius:2px; }
.ltd-tick.on { background:var(--ltd-on); box-shadow:0 0 6px rgba(var(--ltd-on-rgb), .6); }
.ltd-tick.off { background:var(--ltd-off); opacity:.9; }
.ltd-tick.pick { height:19px; width:4px; margin-left:-2px; box-shadow:0 0 0 2px var(--ground), 0 0 10px currentColor; }
.ltd-tick.pick.on { color:var(--ltd-on); } .ltd-tick.pick.off { color:var(--ltd-off); }
.ltd-next { position:absolute; bottom:3px; width:12px; height:12px; margin-left:-6px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--ltd-gold); opacity:.9; }
.ltd-next::after { content:''; position:absolute; inset:-4px; border-radius:50%; box-shadow:0 0 0 1px rgba(var(--ltd-glow), .5); }
html[data-lhs-page="today"] .ltd-next::after { animation:ltdRing 2.4s ease-out infinite; }
@keyframes ltdRing { from { transform:scale(.7); opacity:1; } to { transform:scale(1.6); opacity:0; } }
.ltd-chks { display:flex; flex-wrap:wrap; gap:6px; }
.ltd-chk { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px 0 7px; border:0; border-radius:999px; cursor:pointer;
  font:600 12px/1 var(--mono); color:var(--ink-2); background:var(--ltd-panel); box-shadow:inset 0 0 0 1px var(--ltd-rule); transition:background .15s ease, box-shadow .15s ease; }
.ltd-chk i { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; }
.ltd-chk svg { width:12px; height:12px; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ltd-chk.on i { background:var(--ltd-on); } .ltd-chk.on svg { stroke:var(--ground); }
.ltd-chk.off i { box-shadow:inset 0 0 0 1.6px var(--ltd-off); } .ltd-chk.off svg { stroke:var(--ltd-off); }
.ltd-chk.pick { color:var(--ink); }
.ltd-chk.pick.on { background:rgba(var(--ltd-on-rgb), .14); box-shadow:inset 0 0 0 1.5px rgba(var(--ltd-on-rgb), .7); }
.ltd-chk.pick.off { background:color-mix(in srgb, var(--ltd-off) 12%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ltd-off) 70%, transparent); }
.ltd-chk:focus-visible { outline:2px solid var(--ltd-gold); outline-offset:2px; }
.ltd-pick { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:2px 0 0; font:500 12px/1.3 var(--body); color:var(--ink-2); }
/* the picked check on one line, whatever the width: its words wrap in their own column, the on/off tag stays beside them (the user,
   2026-10-03: "in mobile view, the off your swara code tag label is again shifting down. They should br in line with the left text") */
.ltd-pick:not(.none) { flex-wrap:nowrap; }
.ltd-pick-tx { display:flex; flex-wrap:wrap; align-items:center; gap:2px 12px; flex:1 1 auto; min-width:0; }
.ltd-pick:not(.none) .v { flex:none; white-space:nowrap; }
.ltd-pick:not(.none) > b { flex:none; white-space:nowrap; }      /* the time never breaks (the user, 2026-10-03: "Line break in time") */
.ltd-pick b { font:600 12.5px/1 var(--mono); color:var(--ink); }
.ltd-pick em { font-style:normal; font-weight:600; }
.ltd-pick em.n-ida { color:var(--lhs-ida); } .ltd-pick em.n-pingala { color:var(--lhs-pingala); } .ltd-pick em.n-sushumna { color:var(--ltd-gold); }
.ltd-pick .v { margin-left:auto; padding:4px 9px; border-radius:999px; font:600 11px/1 var(--body); }
.ltd-pick .v.on { color:var(--ltd-on); background:rgba(var(--ltd-on-rgb), .12); }
.ltd-pick .v.off { color:var(--ltd-off); background:color-mix(in srgb, var(--ltd-off) 13%, transparent); }
.ltd-pick.none { color:var(--dim); }
/* the picked check's three parts start on one line, as a row of a table (the user, 2026-10-04: "the top boundary of the time,
   breath right and swara code left, and Off your swara code should be aligned"): the time and the words on one 16 px line, the
   tag's top on it, whatever wraps beneath */
.ltd-pick:not(.none) { align-items:flex-start; }
.ltd-pick:not(.none) > b, .ltd-pick:not(.none) .ltd-pick-tx { line-height:16px; }
/* Your record, at the foot of Start Swara Realignment's sheet: open to everyone, whatever Realignment's state (2026-10-04) */
.lhs-pay-rec { display:flex; align-items:center; gap:10px; width:100%; margin:6px 0 0; padding:11px 12px; border:0; border-radius:14px; cursor:pointer;
  text-align:left; color:var(--ink); background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); -webkit-tap-highlight-color:transparent; }
.lhs-pay-rec > svg { flex:none; width:20px; height:20px; fill:none; stroke:var(--brass-hi); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lhs-pay-rec span { flex:1 1 auto; display:grid; gap:2px; min-width:0; }
.lhs-pay-rec b { font:600 13.5px/1.2 var(--body); }
.lhs-pay-rec em { font:400 12px/1.3 var(--body); font-style:normal; color:var(--ink-2); }
.lhs-pay-rec > svg.go { width:14px; height:14px; stroke:var(--dim); stroke-width:1.8; }
.lhs-pay-rec:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
/* Diagnosis and Realign, locked while Realignment is not on (lalHead): a small lock beside the name, kept on the narrowest phone */
.lst-seg button svg.lst-lock { width:12px; height:12px; margin-left:-3px; opacity:.6; stroke-width:1.9; }
@media (max-width:330px) { .lst-seg button svg.lst-lock { display:inline; } }
/* Now's way to the code, on one line: the mark, the words and the arrow (the user, 2026-10-04) */
.lnow-code { flex-wrap:nowrap; max-width:100%; }
.lnow-code span { white-space:nowrap; }
/* ---- the check, put to the reader in the middle of the screen (ui-lite-shell.js obsModal*, the user, 2026-10-04) ---- */
/* the veil whole from its first frame, so nothing under it shows first; only the card moves in. While it stands, the bar under the
   record buttons that it stands for is kept out of sight (html.obsm-on, ui-lite-shell.js obsModalOpen) */
.obsm-wrap { position:fixed; inset:0; z-index:9700; display:grid; place-items:center; padding:20px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left));
  background:rgba(3, 5, 10, .62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.obsm-wrap.out { opacity:0; transition:opacity .16s ease; }
html.obsm-on .lal-undo { visibility:hidden; }
html.obsm-on .btwrap .lal-undo { visibility:visible; }
.obsm { width:min(360px, 100%); display:grid; justify-items:center; gap:10px; padding:22px 18px 16px; border-radius:26px; text-align:center;
  color:var(--ink); background:var(--lhs-card); box-shadow:0 34px 70px -24px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--lhs-line-2);
  animation:obsmIn .24s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes obsmIn { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:none; } }
.obsm-k { font:600 10.5px/1 var(--body); letter-spacing:.22em; text-transform:uppercase; color:var(--brass-hi); font-variant-numeric:tabular-nums; }
.obsm-side { display:flex; align-items:center; justify-content:center; gap:11px; margin:2px 0 0; font:400 30px/1.1 var(--display); letter-spacing:-.01em; color:var(--ink); }
.obsm-side i { flex:none; width:12px; height:12px; border-radius:50%; background:currentColor; box-shadow:0 0 14px currentColor; }
.obsm-side.n-ida { color:var(--lhs-ida); } .obsm-side.n-pingala { color:var(--lhs-pingala); } .obsm-side.n-sushumna { color:var(--brass-hi); }
.obsm-say { max-width:30ch; margin:0; font:400 13.5px/1.45 var(--body); color:var(--ink-2); }
/* the finger-width the check was saved with, and its element (2026-10-07) */
.obsm-fw { margin:-4px 0 0; font:500 13.5px/1.35 var(--body); color:var(--ink-2); }
.obsm-fw b { font-weight:600; color:var(--lhs-gold); }
.obsm .lal-bothq { width:100%; margin:2px 0 0; }
.obsm-acts { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr); gap:10px; width:100%; margin-top:6px; }
.obsm-acts button { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding:0 14px; border:0; border-radius:15px; cursor:pointer;
  font:600 15px/1 var(--body); -webkit-tap-highlight-color:transparent; transition:transform .12s ease, background .2s ease; }
.obsm-acts button:active { transform:scale(.97); }
.obsm-undo { color:var(--ink); background:transparent; box-shadow:inset 0 0 0 1.5px var(--lhs-line-2); }
.obsm-ok { color:#08130F; background:var(--jade); box-shadow:0 12px 26px -14px var(--jade); }
.obsm-ok.is-ok { color:#08130F; }
.obsm-ok svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.obsm-acts button:disabled { cursor:default; }
.obsm-acts button:focus-visible { outline:2px solid var(--brass-hi); outline-offset:3px; }
.obsm-fine { max-width:34ch; margin:2px 0 0; font:400 11.5px/1.45 var(--body); color:var(--dim); }
@media (prefers-reduced-motion: reduce) { .obsm-wrap.out, .obsm-acts button { transition:none; } .obsm { animation:none; } }
.ltd-key { justify-self:start; margin-left:0; }
@media (prefers-reduced-motion: reduce) { html[data-lhs-page="today"] .ltd-cta.open .ltd-cta-dot, html[data-lhs-page="today"] .ltd-next::after { animation:none; } }

/* ---- the verse: the Swarodaya's own words, set as an epigraph ----------------------------------------------------------- */
.ltd-verse { position:relative; display:grid; justify-items:center; gap:10px; margin:6px 0 0; padding:18px 14px 16px; text-align:center; isolation:isolate; }
.ltd-verse::before { content:''; position:absolute; z-index:-1; inset:0; border-radius:26px;
  background:radial-gradient(90% 70% at 50% 0%, rgba(var(--ltd-glow), .09), transparent 70%); box-shadow:inset 0 1px 0 rgba(var(--ltd-glow), .2); }
.ltd-v-mark svg { display:block; width:64px; height:16px; fill:none; stroke-width:1.5; stroke-linecap:round; }
.ltd-v-mark .m { fill:var(--lhs-ida); stroke:none; opacity:.9; }
.ltd-v-mark .w { stroke:var(--ltd-gold); }
.ltd-v-mark .s { stroke:var(--lhs-pingala); fill:none; }
.ltd-verse blockquote { display:grid; gap:8px; margin:0; }
.ltd-v-sa { margin:0; font:400 14.5px/1.7 var(--deva); color:var(--ltd-gold); text-wrap:balance; }
.ltd-v-en { margin:0 auto; max-width:34ch; font:400 12.5px/1.5 var(--body); color:var(--ink-2); text-wrap:balance; }
.ltd-verse figcaption { font:500 10px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.ltd-verse figcaption i { font-style:normal; margin:0 4px; }

/* ---- at a glance: a line each, in one quiet list ------------------------------------------------------------------------ */
.ltd-glance { display:grid; gap:10px; }
.ltd-rows { display:grid; border-radius:20px; overflow:hidden; background:var(--ltd-panel); box-shadow:inset 0 0 0 1px var(--ltd-rule); }
.ltd-row { --ta:var(--lhs-now); display:grid; grid-template-columns:34px minmax(0, 1fr) auto auto; align-items:center; gap:12px; min-height:60px; padding:10px 12px 10px 14px;
  border:0; background:none; text-align:left; color:var(--ink); }
.ltd-row + .ltd-row { box-shadow:inset 0 1px 0 var(--ltd-rule); }
.ltd-row.ltd-link { cursor:pointer; }
.ltd-row.ltd-link:hover { background:rgba(var(--ta), .05); }
.ltd-row.ltd-link:active { background:rgba(var(--ta), .09); }
.ltd-row.ltd-link:focus-visible { outline:2px solid rgb(var(--ta)); outline-offset:-2px; }
.ltd-row.ka { --ta:var(--lhs-ka); } .ltd-row.gh { --ta:var(--lhs-gh); } .ltd-row.jy { --ta:var(--lhs-jy); } .ltd-row.cx { --ta:var(--lhs-cx); } .ltd-row.dx { --ta:var(--lhs-dx); }
.ltd-ico { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:rgba(var(--ta), .12); color:rgb(var(--ta)); }
.ltd-ico svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ltd-row-tx { display:grid; gap:3px; min-width:0; }
.ltd-row-tx b { font:600 14px/1.2 var(--body); color:var(--ink); }
.ltd-row-tx em { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.ltd-row-v { font:500 19px/1 var(--display); color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums; }
.ltd-row-v small { margin-left:1px; font:500 11px/1 var(--body); color:var(--dim); }
.ltd-row > svg { width:16px; height:16px; fill:none; stroke:var(--dim); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ltd-row:not(.ltd-link) { grid-template-columns:34px minmax(0, 1fr) auto; }
.ltd-row.tall { grid-template-columns:34px minmax(0, 1fr); grid-template-areas:"ico tx" ". bms"; row-gap:10px; }
.ltd-row.tall .ltd-ico { grid-area:ico; } .ltd-row.tall .ltd-row-tx { grid-area:tx; }
.ltd-bms { grid-area:bms; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.ltd-bms-c { display:grid; gap:2px; padding:8px 10px; border-radius:12px; background:rgba(var(--ta), .07); font:500 11px/1.2 var(--body); color:var(--ink-2); text-transform:capitalize; }
.ltd-bms-c b { font:500 18px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }

/* Your progress, open: where Realignment starts, said at the card's own foot; the one way there a quiet pill (the user, 2026-10-03:
   "start realignment should not be clickable but open the drawer should be made clickable in subtle but elegant and clear and
   no confusion style") */
.lhs-fold-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; padding:14px 2px 2px; border-top:1px solid var(--lhs-line); }
.lhs-ff-tx { display:grid; gap:3px; min-width:0; }
.lhs-ff-tx b { font:600 13.5px/1.25 var(--body); color:var(--ink); }
.lhs-ff-tx em { font:400 11.5px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lhs-ff-go { flex:none; display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 13px 0 15px; border:0; border-radius:999px; cursor:pointer;
  font:600 12.5px/1 var(--body); color:var(--lhs-gold); background:rgba(var(--lhs-gold-rgb), .1); box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .38);
  transition:background .2s ease, transform .15s ease; }
.lhs-ff-go svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lhs-ff-go:hover { background:rgba(var(--lhs-gold-rgb), .17); }
.lhs-ff-go:active { transform:scale(.97); }
.lhs-ff-go:focus-visible { outline:2px solid var(--lhs-gold); outline-offset:2px; }

/* Confirm, on sight (THE CHECK, AT ONCE): green and ticked in the frame it is tapped, Undo set aside, until the card is drawn again */
.lal-undo-ok { display:inline-flex; align-items:center; gap:6px; transition:transform .15s ease, box-shadow .2s ease; }
.lal-undo-ok:active { transform:scale(.96); }
.lal-undo-ok.is-ok { cursor:default; box-shadow:0 0 0 3px color-mix(in srgb, var(--jade, #62C19E) 30%, transparent), 0 0 16px color-mix(in srgb, var(--jade, #62C19E) 55%, transparent); }
.lal-undo-ok .lfl-tick { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.lal-undo-b:disabled { opacity:.4; cursor:default; }

/* ---- today's check times: the card at the page's foot, and its sheet (Record's turns, with the sun set among them) ---- */
.lpk-ltdtimes { max-height:min(86vh, 760px); }
.ltd-tsh { display:grid; gap:12px; padding:2px 18px 18px; }
.ltd-tsh-lede { margin:0; font:400 13px/1.45 var(--body); color:var(--ink-2); }
.ltd-tsh-lede b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.ltd-tl { display:grid; margin:0; padding:0; list-style:none; border-radius:16px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--ltd-rule); }
.ltd-tl li { display:grid; grid-template-columns:48px 74px minmax(0, 1fr) 22px; align-items:center; gap:8px; min-height:40px; padding:6px 12px; }
.ltd-tl li + li { box-shadow:inset 0 1px 0 var(--ltd-rule); }
.ltd-tl time { font:600 12.5px/1 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.ltd-tl-sun { background:linear-gradient(90deg, rgba(var(--ltd-glow), .16), rgba(var(--ltd-glow), .04)); }
.ltd-tl-sun { grid-template-columns:22px 48px minmax(0, 1fr) !important; }
.ltd-tl-sun i { display:grid; place-items:center; color:var(--ltd-gold); }
.ltd-tl-sun i svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ltd-tl-sun b { font:600 12px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--ltd-gold); }
.ltd-tl-side { display:inline-flex; align-items:center; gap:7px; font:600 12.5px/1 var(--body); color:var(--ink); }
.ltd-tl-side i { width:10px; height:10px; border-radius:50%; }
.ltd-tl-side.n-ida i { background:var(--lhs-ida); } .ltd-tl-side.n-pingala i { background:var(--lhs-pingala); } .ltd-tl-side.n-sushumna i { background:var(--ltd-gold); }
.ltd-tl-dur { font:500 11px/1.3 var(--mono); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ltd-tl-turn.pause { min-height:32px; }
.ltd-tl-turn.pause .ltd-tl-side { font-weight:500; color:var(--ink-2); }
.ltd-tl-turn.missed time, .ltd-tl-turn.missed .ltd-tl-side { color:var(--dim); }
.ltd-tl-turn.now { background:rgba(var(--ltd-on-rgb), .1); box-shadow:inset 3px 0 0 var(--ltd-on); }
.ltd-tl-st { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; justify-self:end; }
.ltd-tl-st svg { width:12px; height:12px; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ltd-tl-st.on { background:var(--ltd-on); } .ltd-tl-st.on svg { stroke:var(--ground); }
.ltd-tl-st.off { box-shadow:inset 0 0 0 1.6px var(--ltd-off); } .ltd-tl-st.off svg { stroke:var(--ltd-off); }
.ltd-tl-st.now { width:auto; height:auto; padding:3px 7px; border-radius:999px; font:700 9.5px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--ground); background:var(--ltd-on); }
.ltd-tl-st.missed { font:600 12px/1 var(--body); color:var(--dim); }
@media (max-width:360px) { .ltd-tl li { grid-template-columns:44px 62px minmax(0, 1fr) 22px; gap:6px; padding:6px 10px; } }

/* every check time today: a quiet way in under the check's tag, to a sheet with a free calendar on top (see .ltd-cal) */
.ltd-alltimes { justify-self:start; display:inline-flex; align-items:center; gap:7px; margin:-2px 0 0 -2px; padding:6px 8px; border:0; border-radius:999px; background:none; cursor:pointer;
  font:600 12.5px/1 var(--body); color:var(--ltd-gold); }
.ltd-alltimes svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ltd-alltimes svg:last-child { width:14px; height:14px; opacity:.8; }
.ltd-alltimes:hover { background:rgba(var(--ltd-glow), .08); }
.ltd-alltimes:focus-visible { outline:2px solid var(--ltd-gold); outline-offset:2px; }

/* ---- the fruit: four, each with today's max (a pale fill to a dashed line) and what is reached of it (jade) ---------------- */
.ltd-fruit { display:grid; justify-items:center; gap:12px; width:100%; }
.ltd-fruit ul { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items:start; width:100%; margin:0; padding:0; list-style:none; }
.ltd-fruit li { display:flex; justify-content:center; min-width:0; }
.ltd-fr-b { display:grid; justify-items:center; gap:5px; min-width:0; padding:4px 2px; border:0; border-radius:14px; background:none; cursor:pointer; text-align:center; color:inherit;
  font:inherit; -webkit-tap-highlight-color:transparent; transition:transform .15s ease; }
.ltd-fr-b:active { transform:scale(.96); }
.ltd-fr-b:focus-visible { outline:2px solid var(--ltd-gold); outline-offset:2px; }
.ltd-fr-o { position:relative; display:grid; place-items:center; width:50px; height:50px; border-radius:50%; overflow:hidden; isolation:isolate;
  background:var(--ltd-trk); box-shadow:inset 0 0 0 1px rgba(var(--ltd-glow), .28); }
.ltd-fr-o .mxf { position:absolute; z-index:-2; left:0; right:0; bottom:0; height:var(--m); background:rgba(var(--ltd-glow), .17); border-top:1.5px dashed rgba(var(--ltd-glow), .85); }
.ltd-fr-o .fl { position:absolute; z-index:-1; left:0; right:0; bottom:0; height:var(--f); background:linear-gradient(0deg, rgba(var(--ltd-on-rgb), .95), rgba(var(--ltd-on-rgb), .55));
  box-shadow:0 -1px 0 rgba(var(--ltd-on-rgb), 1); }
.ltd-fr-o svg { width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ltd-fr-o.grow .fl { animation:ltdFill 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ltdFill { from { height:var(--f0, 0%); } }
.ltd-fruit b { font:500 11px/1.2 var(--body); color:var(--ink-2); white-space:nowrap; }
.ltd-fruit li em { font:500 10.5px/1.2 var(--mono); font-style:normal; color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ltd-fruit li em span { font-weight:700; color:var(--ltd-on); }
.ltd-fruit li.is-empty em span { color:var(--dim); }
/* not read yet (Health before a check reads the element): the ring drawn dashed, waiting, the sign inside it faint */
.ltd-fruit li.need .ltd-fr-o { box-shadow:none; background:transparent; }
.ltd-fruit li.need .ltd-fr-o::after { content:''; position:absolute; inset:0; border-radius:50%; border:1.5px dashed rgba(var(--ltd-glow), .55); pointer-events:none; }
.ltd-fruit li.need .ltd-fr-o svg { opacity:.5; }
.ltd-fr-key { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; margin:0; font:500 10.5px/1.2 var(--body); color:var(--dim); }
.ltd-fr-key span { display:inline-flex; align-items:center; gap:6px; }
.ltd-fr-key i { width:14px; height:8px; border-radius:2px; }
.ltd-fr-key .k-now i { background:var(--ltd-on); }
.ltd-fr-key .k-max i { background:rgba(var(--ltd-glow), .2); box-shadow:inset 0 1.5px 0 rgba(var(--ltd-glow), .85); }
@media (prefers-reduced-motion: reduce) { .ltd-fr-o.grow .fl { animation:none; } }
@media (max-width:360px) { .ltd-fr-o { width:42px; height:42px; } .ltd-fr-o svg { width:19px; height:19px; } .ltd-fruit b { font-size:10px; } .ltd-fruit li em { font-size:9.5px; } }
.ltd-how-l li.d b.i { display:inline; margin:0 4px 0 0; color:var(--ink); }

/* ---- room between the page's parts (the user, 2026-10-03: "very tightly spaced … give cleaner and uncluttered look") ---------- */
.ltd-part[data-ltd="fruit"] { margin-top:4px; }
.ltd-part[data-ltd="cta"] { margin-top:8px; }
.ltd-part[data-ltd="since"], .ltd-part[data-ltd="glance"] { margin-top:26px; }
.ltd-part[data-ltd="foot"] { margin-top:10px; }

/* ---- add to calendar, free: an info card at the top of today's check times; Google, Outlook, the phone, the file --------------- */
.ltd-cal { display:grid; gap:12px; padding:14px; border-radius:20px; background:linear-gradient(135deg, rgba(var(--ltd-glow), .11), transparent 70%), var(--ltd-panel);
  box-shadow:inset 0 0 0 1px rgba(var(--ltd-glow), .3); }
.ltd-cal-hd { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:11px; }
.ltd-cal-ic { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; color:var(--ltd-gold); background:rgba(var(--ltd-glow), .14); }
.ltd-cal-ic svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ltd-cal-ic.big { width:56px; height:56px; border-radius:18px; }
.ltd-cal-ic.big svg { width:28px; height:28px; }
.ltd-cal-tx { display:grid; gap:2px; min-width:0; }
.ltd-cal-tx b { font:600 15px/1.2 var(--body); color:var(--ink); }
.ltd-cal-tx em { font:500 11.5px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.ltd-free { padding:4px 9px; border-radius:999px; font:700 10px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--ltd-on); background:rgba(var(--ltd-on-rgb), .14);
  box-shadow:inset 0 0 0 1px rgba(var(--ltd-on-rgb), .4); }
.ltd-cal-ds { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.ltd-cal-d { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:9px; min-height:52px; padding:8px 10px; border:0; border-radius:14px; cursor:pointer; text-align:left; color:var(--ink);
  background:var(--lhs-card-2); box-shadow:inset 0 0 0 1px var(--lhs-line-2); transition:box-shadow .2s ease, transform .15s ease; -webkit-tap-highlight-color:transparent; }
.ltd-cal-d:not(:disabled):hover { box-shadow:inset 0 0 0 1px rgba(var(--ltd-glow), .55); }
.ltd-cal-d:not(:disabled):active { transform:scale(.98); }
.ltd-cal-d:focus-visible { outline:2px solid var(--ltd-gold); outline-offset:2px; }
.ltd-cal-d:disabled { opacity:.45; cursor:progress; }
.ltd-cal-di { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; color:var(--ltd-gold); background:rgba(var(--ltd-glow), .1); }
.ltd-cal-di svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ltd-cal-dt { display:grid; gap:1px; min-width:0; }
.ltd-cal-dt b { font:600 13px/1.2 var(--body); }
.ltd-cal-dt em { font:500 10.5px/1.2 var(--body); font-style:normal; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ltd-cal-rem { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px; }
.ltd-cal-rem > span { font:500 12px/1.2 var(--body); color:var(--ink-2); white-space:nowrap; }
.ltd-seg { display:inline-grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); padding:3px; border-radius:12px; background:var(--ltd-trk); box-shadow:inset 0 0 0 1px var(--ltd-rule); }
.ltd-seg button { min-height:30px; padding:0 11px; border:0; border-radius:9px; cursor:pointer; background:none; font:500 12px/1 var(--body); color:var(--ink-2); white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.ltd-seg button[aria-checked="true"] { color:var(--ink); font-weight:600; background:rgba(var(--ltd-glow), .2); box-shadow:inset 0 0 0 1px rgba(var(--ltd-glow), .5); }
.ltd-seg button:focus-visible { outline:2px solid var(--ltd-gold); outline-offset:-2px; }
.ltd-seg.wide { display:grid; width:100%; }
.ltd-cal-kept { display:flex; align-items:center; gap:8px; margin:0; font:500 12px/1.3 var(--body); color:var(--ltd-on); }
.ltd-cal-kept svg { flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ltd-tl-box { position:relative; max-height:max(190px, calc(min(86vh, 760px) - 410px)); overflow-y:auto; overscroll-behavior:contain; border-radius:16px; }
/* the calendar's own views, in the same sheet */
.ltd-calv { display:grid; gap:12px; padding:2px 18px 18px; }
.ltd-calv-back { justify-self:start; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px 0 8px; border:0; border-radius:999px; cursor:pointer;
  font:600 12.5px/1 var(--body); color:var(--ink-2); background:var(--ltd-trk); }
.ltd-calv-back svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ltd-calv-back:focus-visible { outline:2px solid var(--ltd-gold); outline-offset:2px; }
.ltd-calv-lede { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.ltd-calv-lede b { color:var(--ink); font-weight:600; }
.ltd-calv-list { display:grid; margin:0; padding:0; list-style:none; border-radius:16px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--ltd-rule); }
.ltd-calv-list li { display:grid; grid-template-columns:44px minmax(0, 1fr) auto; align-items:center; gap:10px; min-height:46px; padding:6px 10px 6px 12px; }
.ltd-calv-list li + li { box-shadow:inset 0 1px 0 var(--ltd-rule); }
.ltd-calv-list time { font:600 12.5px/1 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.ltd-calv-list span { font:400 12px/1.35 var(--body); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ltd-cal-la { display:inline-flex; align-items:center; height:30px; padding:0 14px; border-radius:999px; text-decoration:none; font:600 12.5px/1 var(--body); color:var(--ground);
  background:linear-gradient(180deg, var(--ltd-g1), var(--ltd-g0)); }
.ltd-cal-la:focus-visible { outline:2px solid var(--ltd-gold); outline-offset:2px; }
.ltd-calv-alt { justify-self:center; height:38px; padding:0 16px; border:0; border-radius:999px; cursor:pointer; font:600 12.5px/1 var(--body); color:var(--ink);
  background:var(--lhs-card-2); box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
.ltd-calv-alt:focus-visible { outline:2px solid var(--ltd-gold); outline-offset:2px; }
.ltd-calv-bulk { display:grid; gap:8px; padding:12px; border-radius:16px; background:var(--ltd-panel); box-shadow:inset 0 0 0 1px var(--ltd-rule); }
.ltd-calv-bulk b { font:600 12.5px/1.2 var(--body); color:var(--ink); }
.ltd-calv-bulk p { margin:0; font:400 12px/1.5 var(--body); color:var(--ink-2); }
.ltd-calv-bulk p b { font-size:inherit; }
.ltd-calv-bulk .ltd-calv-alt { justify-self:start; }
.ltd-calv-done { display:grid; justify-items:center; gap:10px; padding:8px 4px 4px; text-align:center; }
.ltd-calv-done > b { font:600 16px/1.3 var(--display); color:var(--ink); }
.ltd-calv-done > p { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); }
.ltd-calv-alts { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.ltd-calv-how { padding:10px 12px; border-radius:12px; font-size:12px !important; background:var(--ltd-trk); text-align:left; }
.ltd-calv-how b { color:var(--ink); font-weight:600; }
@media (max-width:360px) { .ltd-cal { padding:12px; } .ltd-cal-d { padding:8px; gap:7px; } .ltd-cal-di { width:26px; height:26px; } .ltd-calv { padding:2px 14px 16px; } }

/* ---- the code itself, a quiet way in from the breath card (the user, 2026-10-03): opens the Swara Code sheet ------------------ */
.lnow-code { justify-self:start; display:inline-flex; align-items:center; gap:7px; margin:2px 0 0 -7px; padding:6px 9px 6px 7px; border:0; border-radius:999px;
  background:none; cursor:pointer; font:600 12.5px/1 var(--body); letter-spacing:.01em; color:color-mix(in srgb, var(--nc) 70%, #fff);
  -webkit-tap-highlight-color:transparent; transition:background .2s ease; }
.lnow-code svg { flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.lnow-code svg.go { width:13px; height:13px; opacity:.7; transition:transform .25s cubic-bezier(.22,.9,.24,1); }
.lnow-code:hover { background:color-mix(in srgb, currentColor 9%, transparent); }
.lnow-code:hover svg.go { transform:translateX(2px); }
.lnow-code:active { transform:scale(.97); }
.lnow-code:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
:root[data-theme="light"] .lnow-code { color:color-mix(in srgb, var(--nc) 78%, #3A2E1A); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lnow-code { color:color-mix(in srgb, var(--nc) 78%, #3A2E1A); } }
html.lhs-on .lhs-page #lite-summary .lnow .lnow-code { margin-top:4px; color:var(--brass-hi); }
@media (prefers-reduced-motion: reduce) { .lnow-code, .lnow-code svg.go { transition:none; } }

/* ---- the quick check's header: the label, then the check and the switch on one line (the user, 2026-10-03: "On mobile devices,
   the toggles for quick and detailed check and left side check time are always shifted … They should be on the same line") ---- */
.lqk-hd { display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.lqk-l { display:grid; gap:7px; flex:1 1 auto; min-width:0; }
.lqk-l .lal-next { min-width:0; }
.lqk-l .lal-next-tx b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lqk-hd > .lqk-seg { flex:0 0 auto; align-self:center; margin-left:0; }
@media (max-width:340px) { .lqk-hd > .lqk-seg button { padding:0 8px; } .lqk-hd { gap:8px; } }

/* =====================================================================================================================
   KAARYA AND GHATANA, REDRAWN (the user, 2026-10-03; ui-lite-swipe.js lhsKaarya / lhsGhatana, .lkg-*)
   The head, the map of every act or matter lit by what suits now, a short list, one card for the one you follow, a line for
   Before you begin. The page's own colour (--pa) leads; tiers keep the app's own (--lhs-good, --lhs-ok, --lhs-hard).
   ===================================================================================================================== */
.lhs-page[data-page="ka"] .lhs-in, .lhs-page[data-page="gh"] .lhs-in, .lhs-page[data-page="sv"] .lhs-in { gap:24px; }
.lkg-hd .lhs-btag { margin-top:8px; max-width:52%; }
.lkg-hd .lhs-live { margin-top:6px; }
/* the figure and the map */
.lkg-hero { display:grid; gap:14px; }
.lkg-fig { display:flex; align-items:center; gap:14px; min-width:0; }
.lkg-fig b { flex:none; font:300 56px/.86 var(--display); letter-spacing:-.035em; color:rgb(var(--pa)); font-variant-numeric:tabular-nums lining-nums; }
.lkg-fig span { max-width:24ch; font:500 14px/1.35 var(--body); color:var(--ink-2); text-wrap:balance; }
.lkg-map { display:grid; border-radius:20px; background:var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line); overflow:hidden; }
.lkg-r + .lkg-r { box-shadow:inset 0 1px 0 var(--lhs-line); }
.lkg-row { display:grid; grid-template-columns:30px minmax(0, 1fr) auto 18px 14px; align-items:center; gap:10px; width:100%; min-height:48px; padding:7px 12px 7px 10px;
  border:0; background:none; cursor:pointer; text-align:left; color:var(--ink); -webkit-tap-highlight-color:transparent; transition:background .18s ease; }
.lkg-row:hover { background:var(--lhs-well); }
.lkg-row:focus-visible { outline:2px solid rgb(var(--pa)); outline-offset:-2px; }
.lkg-ico { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; color:rgb(var(--pa)); background:rgba(var(--pa), .11); }
.lkg-ico svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lkg-nm { min-width:0; font:500 13.5px/1.2 var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lkg-dots { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; max-width:116px; }
.lkg-dots i { width:8px; height:8px; border-radius:50%; background:transparent; box-shadow:inset 0 0 0 1.2px var(--lhs-line-2); }
.lkg-dots i.t-excellent, .lkg-key i.t-excellent { background:var(--lhs-good); box-shadow:0 0 7px color-mix(in srgb, var(--lhs-good) 65%, transparent); }
.lkg-dots i.t-good, .lkg-key i.t-good { background:color-mix(in srgb, var(--lhs-good) 55%, transparent); box-shadow:none; }
.lkg-dots i.g-on, .lkg-key i.g-on { background:var(--lhs-good); box-shadow:none; }
.lkg-dots i.t-workable, .lkg-key i.t-workable { background:var(--lhs-ok); box-shadow:none; }
.lkg-dots i.g-soft, .lkg-key i.g-soft { background:color-mix(in srgb, var(--lhs-ok) 62%, transparent); box-shadow:none; }
.lkg-dots i.g-hard, .lkg-key i.g-hard { background:var(--lhs-hard); box-shadow:none; }
.lkg-n { font:600 14px/1 var(--mono); text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }
.lkg-chev { display:grid; place-items:center; }
.lkg-chev svg { width:14px; height:14px; fill:none; stroke:var(--dim); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
.lkg-r.open .lkg-chev svg { transform:rotate(180deg); }
.lkg-r.open .lkg-row { background:var(--lhs-well); }
.lkg-open { padding:4px 12px 10px 50px; background:var(--lhs-well); }
.lkg-open .lhs-srs { margin:0 -6px; }
.lkg-open .lhs-sr { min-height:44px; }
.lkg-none { margin:0; padding:8px 0; font:400 12.5px/1.4 var(--body); color:var(--dim); }
.lkg-hero > .lkg-none { padding:14px 16px; border-radius:16px; background:var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line); font-size:13px; color:var(--ink-2); }
.lkg-key { display:flex; flex-wrap:wrap; gap:6px 14px; margin:-2px 2px 0; font:500 11px/1.2 var(--body); color:var(--dim); }
.lkg-key span { display:inline-flex; align-items:center; gap:6px; }
.lkg-key i { width:8px; height:8px; border-radius:50%; box-shadow:inset 0 0 0 1.2px var(--lhs-line-2); }
.lkg-check { justify-self:start; margin-left:-10px; }
.lkg-check svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* the short list: no box of its own on these pages */
.lhs-suit.lkg-best { gap:4px; padding:0; border-radius:0; background:none; box-shadow:none; }
.lkg-best .lhs-sechd { align-items:center; }
.lkg-more svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.lkg-more[aria-expanded="true"] svg { transform:rotate(180deg); }
/* the one you follow: a card */
.lkg-card { display:grid; gap:12px; padding:18px 18px 16px; border-radius:22px;
  background:radial-gradient(130% 120% at 0% 0%, rgba(var(--pa), .09), transparent 60%), var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lkg-card-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lkg-pick { margin-top:-6px; font:500 22px/1.2 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lkg-pick svg { width:16px; height:16px; fill:none; stroke:var(--ink-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.lkg-now { display:flex; align-items:center; gap:14px; min-width:0; }
.lkg-now-tx { display:grid; gap:4px; min-width:0; }
.lkg-now-k { font:600 10px/1.2 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.lkg-now-tx b { font:500 19px/1.15 var(--display); }
.lkg-cs { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:2px; }
.lkg-c { display:inline-flex; align-items:center; gap:4px; font:500 12px/1.2 var(--body); color:var(--ink-2); }
.lkg-c svg { width:13px; height:13px; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lkg-c.ok svg { stroke:var(--lhs-good); } .lkg-c.no svg { stroke:var(--lhs-hard); }
.lkg-c > i { width:6px; height:6px; margin:0 3px; border-radius:50%; background:var(--lhs-line-2); }
.lkg-win .lhs-strip { padding-top:2px; }
.lkg-act-ft { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 10px; margin-top:-2px; }
.lkg-next { display:inline-flex; align-items:center; gap:7px; font:500 13px/1.3 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lkg-next b { font-weight:600; color:var(--ink); }
.lkg-live { width:8px; height:8px; border-radius:50%; background:var(--lhs-good); box-shadow:0 0 0 4px color-mix(in srgb, var(--lhs-good) 18%, transparent); }
.lkg-act-ft .lhs-link.sm { margin-right:-8px; }
.lkg-add { justify-self:stretch; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; margin-top:2px; border:0; border-radius:15px; cursor:pointer;
  font:600 14px/1 var(--body); color:rgb(var(--pa)); background:rgba(var(--pa), .1); box-shadow:inset 0 0 0 1px rgba(var(--pa), .38);
  -webkit-tap-highlight-color:transparent; transition:background .2s ease, transform .15s ease; }
.lkg-add:hover { background:rgba(var(--pa), .16); }
.lkg-add:active { transform:scale(.98); }
.lkg-add:focus-visible { outline:2px solid rgb(var(--pa)); outline-offset:2px; }
.lkg-add svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.lkg-card .lhs-added { margin:0; }
/* a matter: its word, its lifetime, its period, Begin */
.lkg-say { margin:-4px 0 0; font:400 13px/1.45 var(--body); color:var(--ink-2); }
.lkg-life { margin-top:2px; }
.lkg-meta { margin:-4px 0 0; font:500 12px/1.3 var(--body); color:var(--dim); }
.lkg-begin { display:grid; gap:6px; margin-top:4px; padding-top:14px; box-shadow:inset 0 1px 0 var(--lhs-line); }
.lkg-begin-act { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; font:500 14px/1.3 var(--body); color:var(--ink); }
.lkg-begin-act em { font:500 11.5px/1.2 var(--body); font-style:normal; color:var(--dim); }
.lkg-when { font:500 18px/1.25 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.lkg-when-k { font:500 12px/1.3 var(--body); color:var(--lhs-good); }
.lkg-begin-ft { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:6px; }
.lkg-begin-ft .lkg-add { flex:1 1 180px; margin-top:0; }
/* the matters of an open row: a tap follows one */
.lkg-m { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:12px; width:100%; min-height:44px; padding:6px; border:0; border-radius:12px;
  background:none; cursor:pointer; text-align:left; color:var(--ink); -webkit-tap-highlight-color:transparent; }
.lkg-m:hover { background:var(--lhs-card-2); }
.lkg-m:focus-visible { outline:2px solid rgb(var(--pa)); outline-offset:-2px; }
.lkg-m.on .lhs-sr-l { font-weight:600; color:rgb(var(--pa)); }
.lkg-m-on svg { width:15px; height:15px; fill:none; stroke:rgb(var(--pa)); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* =====================================================================================================================
   SWAASTHYA (ui-lite-swipe.js lhsSwaasthya; the user, 2026-10-07: "today's realtime breath by breath health scan … in the same theme as
   swipe pages but beautiful and elegant … clear and crisp"): worn as the pages past Now are — the head, the figure, a line for right
   now, thin rows over the day, two cards, Realignment's line, the way to the full Health Scan. Its own turquoise leads (--pa, --lhs-sv;
   the user, 2026-10-07: "Change the color theme from red to turquoise for swaasthya").
   ===================================================================================================================== */
.lsv-hero { gap:16px; }
/* right now: the check that still holds, against the code at this minute */
.lsv-now { display:grid; gap:6px; padding:14px 16px 13px; border-radius:18px; background:var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lsv-now-k { font:600 10px/1.2 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.lsv-now b { font:500 21px/1.15 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lsv-now.none b { font-size:17px; color:var(--ink-2); }
.lsv-now em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--dim); font-variant-numeric:tabular-nums; }
.lsv-now .lkg-cs { margin-top:0; }
.lsv-now .lkg-check { margin:2px 0 -4px -10px; justify-self:start; }
/* a card of the hero's own: the side over the day */
.lsv-card { display:grid; gap:12px; padding:16px 16px 14px; border-radius:20px; background:var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line); }
/* THE ROWS OVER THE DAY: a word on the left, a thin track each, the part to come dimmed, now marked; one axis under them */
/* the labels' column as wide as its longest word, each label on one line (2026-10-07: "Code is breaking its line in mobile screen
   sizes": a fixed 38 px split CO/DE where the phone's font ran wider) */
.lsv-bands { display:grid; grid-template-columns:max-content minmax(0, 1fr); align-items:center; gap:8px 10px; }
.lsv-bl { font:600 9.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; color:var(--ink-2); }
.lsv-bl.code { color:var(--dim); }
.lsv-bl.off { color:var(--lhs-hard); }
.lsv-bt { position:relative; height:14px; border-radius:7px; overflow:hidden; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lsv-bt i { position:absolute; top:0; bottom:0; }
.lsv-bt i.n-ida { background:var(--lhs-ida); }
.lsv-bt i.n-pingala { background:var(--lhs-pingala); }
.lsv-bt i.n-sushumna { background:var(--brass-hi); }
.lsv-bt i.e-prithvi { background:linear-gradient(180deg, #F0D57A, #D9B23A); }
.lsv-bt i.e-jala { background:linear-gradient(180deg, #FFFFFF, #E3DCCB); }
.lsv-bt i.e-agni { background:linear-gradient(180deg, #EC7D63, #D2472C); }
.lsv-bt i.e-vayu { background:linear-gradient(180deg, #A2CBE6, #6AA5CF); }
.lsv-bt i.e-akasha { background:linear-gradient(180deg, #D6B8EC, #B386D6); }
.lsv-bt i.skip { background:repeating-linear-gradient(135deg, var(--lhs-line-2) 0 2px, transparent 2px 5px); }
/* an element found against another of the code's: a hard line under it */
.lsv-bt i.off::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--lhs-hard); }
.lsv-bt em { position:absolute; inset:0; display:flex; align-items:center; padding-left:9px; font:400 10.5px/1 var(--body); font-style:normal; color:var(--dim); white-space:nowrap; overflow:hidden; }
.lsv-bf { position:absolute; top:0; bottom:0; right:0; background:color-mix(in srgb, var(--ground) 50%, transparent); pointer-events:none; }
.lsv-bn { position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; border-radius:1px; background:var(--ink); box-shadow:0 0 6px color-mix(in srgb, var(--ink) 40%, transparent); pointer-events:none; }
.lsv-bands .lhs-strip-ax { margin-top:-1px; }
.lsv-card .lkg-key i, .lsv-ekey i { width:14px; height:8px; border-radius:4px; box-shadow:none; }
.lsv-card .lkg-key i.n-ida { background:var(--lhs-ida); } .lsv-card .lkg-key i.n-pingala { background:var(--lhs-pingala); } .lsv-card .lkg-key i.n-sushumna { background:var(--brass-hi); }
.lsv-ekey i.e-prithvi { background:#E5C25A; } .lsv-ekey i.e-jala { background:#EFEADF; box-shadow:inset 0 0 0 1px var(--lhs-line-2); } .lsv-ekey i.e-agni { background:#E0654A; }
.lsv-ekey i.e-vayu { background:#86B8DB; } .lsv-ekey i.e-akasha { background:#C49FE1; }
.lsv-ekey i.skip { background:repeating-linear-gradient(135deg, var(--lhs-line-2) 0 2px, transparent 2px 5px); box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
:root[data-theme="light"] .lsv-bt i.e-jala { background:linear-gradient(180deg, #D9DEE6, #AEB7C4); }
:root[data-theme="light"] .lsv-bt i.e-prithvi { background:linear-gradient(180deg, #E1BE4E, #BF9A1E); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lsv-bt i.e-jala { background:linear-gradient(180deg, #D9DEE6, #AEB7C4); }
  :root:not([data-theme="dark"]) .lsv-bt i.e-prithvi { background:linear-gradient(180deg, #E1BE4E, #BF9A1E); }
}
/* the element: its ring and its words */
.lsv-sub { font:400 12px/1.35 var(--body); color:var(--dim); }
.lsv-el .lkg-now-tx b { font-size:20px; }
/* the code: two in-tune rings, the organs as chips, what the texts read as a short list */
.lsv-stats { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.lsv-stat { display:flex; align-items:center; gap:10px; min-width:0; padding:10px 12px; border-radius:16px; background:var(--lhs-well); }
.lsv-stat > span:last-child { font:500 12px/1.3 var(--body); color:var(--ink-2); }
.lsv-dash { display:grid; place-items:center; width:40px; height:40px; font:500 16px/1 var(--display); color:var(--dim); }
.lsv-org { display:grid; gap:8px; }
.lsv-k { font:600 10px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.lsv-chips { display:flex; flex-wrap:wrap; gap:6px; }
.lsv-chips span { padding:6px 11px; border-radius:999px; font:500 12.5px/1.15 var(--body); color:var(--ink); background:rgba(var(--pa), .1); box-shadow:inset 0 0 0 1px rgba(var(--pa), .32); }
.lsv-tx { display:grid; margin:0; padding:0; list-style:none; }
.lsv-tx li { display:grid; grid-template-columns:28px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:9px 0; }
.lsv-tx li + li { box-shadow:inset 0 1px 0 var(--lhs-line); }
.lsv-tx i { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:rgb(var(--pa)); background:rgba(var(--pa), .1); }
.lsv-tx i svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lsv-tx li.pos i { color:var(--lhs-good); background:color-mix(in srgb, var(--lhs-good) 12%, transparent); }
.lsv-tx b { display:block; font:500 13.5px/1.25 var(--body); color:var(--ink); }
.lsv-tx em { display:block; margin-top:2px; font:400 12px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lsv-pill { padding:4px 9px; border-radius:999px; font:600 10.5px/1.1 var(--body); white-space:nowrap; color:var(--ink-2); background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lsv-tx li.on .lsv-pill { color:rgb(var(--pa)); background:rgba(var(--pa), .1); box-shadow:inset 0 0 0 1px rgba(var(--pa), .36); }
/* where a sign shows (the user, 2026-10-08): the Swara Code in the page's turquoise, the breath now in gold, both in the two; a long pill
   wraps rather than squeezing the sign's own words */
.lsv-tx .lsv-pill { max-width:124px; white-space:normal; text-align:center; line-height:1.2; }
.lsv-tx li.s-breath:not(.pos) .lsv-pill { color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 36%, transparent); }
.lsv-tx li.s-both:not(.pos) .lsv-pill { color:#fff; background:linear-gradient(90deg, rgba(var(--pa), .62), color-mix(in srgb, var(--brass-hi) 62%, transparent)); box-shadow:none; }
.lsv-tx li.pos .lsv-pill { color:var(--lhs-good); background:color-mix(in srgb, var(--lhs-good) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 36%, transparent); }
/* the texts' words lead an organ's row, the organ under them, small and bold (the user, 2026-10-08) */
.ldx-org-tx.sf > b { font:500 14px/1.32 var(--body); color:var(--ink); text-wrap:pretty; }
.ldx-org-tx .ldx-org-at { font:400 11.5px/1.35 var(--body); color:var(--dim); }
.ldx-org-tx .ldx-org-at b { font:600 11.5px/1.35 var(--body); color:var(--ink-2); }
.lsv-body .ldx-pill { max-width:116px; white-space:normal; text-align:center; line-height:1.2; }
/* Swaasthya's body today (2026-10-07): Health Scan's Body map, its Now, held still and short — the figure, its key and its reading */
.lsv-body { gap:12px; }
.lsv-live { display:inline-flex; align-items:center; gap:6px; font:600 10.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--lhs-good); }
.lsv-live i { width:7px; height:7px; border-radius:50%; background:var(--lhs-good); box-shadow:0 0 0 3px color-mix(in srgb, var(--lhs-good) 22%, transparent); }
.lsv-seg { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px; padding:4px; border-radius:14px; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lsv-seg button { min-height:36px; padding:0 10px; border:0; border-radius:10px; cursor:pointer; font:600 12.5px/1 var(--body); color:var(--ink-2); background:none;
  -webkit-tap-highlight-color:transparent; transition:background .18s ease, color .18s ease; }
.lsv-seg button[aria-selected="true"] { color:rgb(var(--pa)); background:rgba(var(--pa), .12); box-shadow:inset 0 0 0 1px rgba(var(--pa), .4); }
.lsv-seg button:focus-visible { outline:2px solid rgb(var(--pa)); outline-offset:2px; }
.lsv-bsub { margin:-4px 0 0; }
.lsv-fig { display:grid; place-items:center; min-width:0; }
.lsv-fig .ldx-body { width:auto; max-width:100%; height:min(44vh, 318px); }
.lsv-legend { margin-top:-4px; justify-content:center; gap:4px 10px; font-size:11px; }
.lsv-body .ldx-organs, .lsv-body .ldx-centres { margin:0; padding:12px 0 0; border-radius:0; background:none; box-shadow:inset 0 1px 0 var(--lhs-line); }
/* the seven centres, two lines each: the name and its word, then the bar with what arrives and what goes on beside it */
.lsv-body .ldx-centres { gap:8px; }
.lsv-body .ldx-centres-grade b { font-size:19px; }
.lsv-body .ldx-centres-say { font-size:12px; }
.lsv-body .ldx-crows { gap:1px; }
.lsv-body .ldx-crows li { grid-template-columns:auto minmax(0, 1fr) auto; column-gap:8px; row-gap:4px; padding:5px 6px; font-size:12px; }
.lsv-body .ldx-crows .dot { grid-column:1; grid-row:1; }
.lsv-body .ldx-crows .nm { grid-column:2; grid-row:1; }
.lsv-body .ldx-crows .nm em { display:none; }
.lsv-body .ldx-crows .pill { grid-column:3; grid-row:1; padding:2px 7px; font-size:10px; }
.lsv-body .ldx-crows .bar { grid-column:2; grid-row:2; height:5px; }
.lsv-body .ldx-crows .pct { grid-column:3; grid-row:2; font-size:10px; line-height:1; white-space:nowrap; text-align:right; }
.lsv-body .ldx-crows .pct br { display:none; }
.lsv-body .ldx-crows .pct em::before { content:" · "; }
.lsv-body .ldx-crows .knot { grid-column:2 / -1; padding:1px 7px; font-size:10px; }
.lsv-note { margin:-2px 0 0; font:400 11.5px/1.45 var(--body); color:var(--dim); }
.lsv-full { justify-self:start; margin:-2px 0 -4px -8px; }
@media (max-width:340px) { .lsv-stats { grid-template-columns:minmax(0, 1fr); } .lsv-bands { gap:8px; } .lsv-bl { letter-spacing:.1em; } }
/* Before you begin, in a line */
.lhs-prepl.slim { grid-template-columns:auto minmax(0, 1fr) auto; gap:10px; padding:4px 2px; border-radius:0; background:none; box-shadow:none; }
.lhs-prepl.slim .lhs-prepl-ico { width:30px; height:30px; }
.lhs-prepl.slim .lhs-prepl-ico svg { width:15px; height:15px; }
.lhs-prepl.slim .lhs-prepl-tx b { font-size:12.5px; }
.lhs-prepl.slim .lhs-prepl-tx em { font-size:11.5px; color:var(--dim); }
.lhs-prepl.slim .lhs-prepl-go { margin-right:-4px; }
@media (max-width:360px) {
  .lkg-fig b { font-size:46px; }
  .lkg-row { grid-template-columns:28px minmax(0, 1fr) auto 16px 12px; gap:8px; padding-right:10px; }
  .lkg-dots { max-width:92px; gap:3px; } .lkg-dots i { width:7px; height:7px; }
  .lkg-open { padding-left:44px; }
  .lkg-card { padding:16px 14px 14px; }
}
@media (prefers-reduced-motion: reduce) { .lkg-row, .lkg-chev svg, .lkg-add, .lkg-more svg { transition:none; } }

/* ---- Your breath, compact (the user, 2026-10-03): the discs a little smaller, the plain lock line left to the header ("Checked ·
   next 16:23"), and the three ways on in one quiet row under the check — an icon each, a word each, no card ------------------ */
html.lhs-on .lhs-now-check .lqk .lal-ans { --disc:clamp(80px, 23vw, 98px); }
html.lhs-on .lhs-now-check .lal-lock { display:none; }
html.lhs-on .lhs-now-bt { margin-top:4px; }
.lhs-ways { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:start; gap:6px; padding-top:14px; box-shadow:inset 0 1px 0 var(--lhs-line); }
.lhs-way, html.lhs-on .lhs-ways .lbt-disc { display:grid; justify-items:center; align-content:start; gap:6px; width:100%; min-width:0; margin:0; padding:6px 4px; border:0; border-radius:14px;
  background:none; box-shadow:none; cursor:pointer; text-align:center; color:var(--ink-2); -webkit-tap-highlight-color:transparent; transition:background .18s ease; }
.lhs-way:hover, html.lhs-on .lhs-ways .lbt-disc:hover { background:var(--lhs-well); filter:none; }
.lhs-way:focus-visible, html.lhs-on .lhs-ways .lbt-disc:focus-visible { outline:2px solid var(--brass-hi); outline-offset:-2px; }
.lhs-way-i { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--brass-hi); background:rgba(var(--lhs-gold-rgb), .08);
  box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .22); }
.lhs-way-i svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lhs-way b, html.lhs-on .lhs-ways .lbt-k b { font:500 11.5px/1.25 var(--body); color:var(--ink-2); }
html.lhs-on .lhs-ways .lbt-orb { width:34px; height:34px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
html.lhs-on .lhs-ways .lbt-orb i { display:none; }
html.lhs-on .lhs-ways .lbt-orb svg { width:16px; height:16px; filter:none; }
html.lhs-on .lhs-ways .lbt-tx { display:grid; justify-items:center; gap:3px; }
html.lhs-on .lhs-ways .lbt-k { display:grid; justify-items:center; gap:3px; }
html.lhs-on .lhs-ways .lbt-disc .bt-exp-tag { padding:2px 5px; font-size:7px; letter-spacing:.1em; }
html.lhs-on .lhs-ways .lbt-s, html.lhs-on .lhs-ways .lbt-go { display:none; }
html.lhs-on .lhs-ways .lbt-disc.is-shut { opacity:.45; }
@media (max-width:340px) { .lhs-way b, html.lhs-on .lhs-ways .lbt-k b { font-size:10.5px; } .lhs-way-i, html.lhs-on .lhs-ways .lbt-orb { width:30px; height:30px; } }

/* the Breath Tap cell in the row of three: one column, like its neighbours */
html.lhs-on .lhs-ways .lbt-disc { grid-template-columns:minmax(0, 1fr); }
html.lhs-on .lhs-ways .lbt-k { display:flex; flex-direction:column; align-items:center; gap:4px; }
html.lhs-on .lhs-ways .lbt-disc .bt-exp-tag { white-space:nowrap; }

/* ---- last, so they hold over the rules they adjust (lite-responsive, 2026-10-03) ---- */
/* narrow phones: Your breath's label and its switch on two rows rather than off the page; the discs a little smaller */
@media (max-width:300px) {
  .lqk-hd { flex-wrap:wrap; }
  html.lhs-on .lhs-now-check .lqk .lal-ans { --disc:clamp(62px, 22vw, 98px); }
}
/* Kaarya's and Ghatana's short list: its rows' hover reaching no further than the page */
.lkg-best .lhs-srs { margin:0 -2px; }
/* Now's rings, centred: on a narrow phone a ring's words wrap rather than being cut ("at sunri…") */
@media (max-width:400px) { .lhs-now-rec .lhs-mr-k em { white-space:normal; overflow:visible; text-overflow:clip; } }

/* =====================================================================================================================
   THE CONSOLE — the drawer's first stop as one dial of real buttons (the user, 2026-10-05: "the drawer buttons in a circle …
   in the dial theme but minimalistic, real button appearance like gaming console"; "Slightly increase the gap between the
   text label and the buttons"; "Make the bg style glassmorphic and grainier like the current drawer's bg style"; "a beautiful
   tapping effect for user to feel and get urge to tap"; "rotatable by the user at any point of time"; "make every effect
   fast so the drawer of dial buttons don't lag"). shell.html .lhc; ui-lite-shell.js lhc*.
   One drawing of 276 units, scaled to the screen by --u. A glass plate with the drawer's own grain and no blur of its own (the
   sheet's blur shows through it; a second backdrop filter would cost every frame); a ring of sixty minutes with the names
   printed on it as the dial prints its signs, 6 units clear of the wells; a lamp at each name: jade open, grey locked, blue
   soon. Five domed caps in wells on one orbit, kept upright as the ring turns; Start Swara Realignment the one gold cap, fixed,
   in a deeper well, its ring breathing. Every motion is a move or a fade the compositor draws (transform, opacity), and the
   idle ones run only while the drawer stands at its first stop.
   ===================================================================================================================== */
.lhc {
  position:relative; flex:none; width:var(--s); height:var(--s); margin:2px auto 6px; container-type:inline-size;
  touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
/* the console's measures and colours, the wallet's key at its foot sharing them (.lhc-wrow) */
.lhc, .lhc-wrow {
  /* 276 wide where the screen allows; on a short phone smaller (to 200), so the first stop never hides the whole home */
  --s:min(276px, calc(100vw - 44px), max(200px, calc(64vh - 196px))); --u:calc(var(--s) / 276);
  --lhc-ink:#BDB6A5; --lhc-ink-dim:#7F796A; --lhc-tick:rgba(242,217,138,.22); --lhc-orbit:rgba(242,217,138,.10);
  --lhc-mark:#F0D57E; --lhc-mark-glow:rgba(240,213,126,.40); --lhc-mark-off:#7E796B; --lhc-mark-soon:#9C98C4;
  --lhc-cap:radial-gradient(circle at 50% 28%, #2D313D 0%, #1D2029 46%, #13151C 100%);
  --lhc-cap-off:radial-gradient(circle at 50% 28%, #262A34 0%, #191B23 46%, #111318 100%);
  --lhc-cap-sh:0 3px 4px rgba(0,0,0,.75), 0 1px 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.13), inset 0 -2px 4px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.035);
  --lhc-gloss:rgba(255,255,255,.16);
  --lhc-well:radial-gradient(circle at 50% 72%, #0C0D12 0%, #050609 72%);
  --lhc-well-sh:inset 0 3px 5px rgba(0,0,0,.92), inset 0 -1px 1px rgba(255,255,255,.07), 0 1px 0 rgba(255,255,255,.04);
  --lhc-cwell:#050609; --lhc-cwell-sh:inset 0 3px 6px rgba(0,0,0,.92), inset 0 -1px 1px rgba(255,255,255,.08);
  --lhc-on:#62C19E; --lhc-off:#4D4A41; --lhc-soon:#9DB2F0;
  --lhc-lit:242,217,138; --lhc-lit-soon:157,178,240; --lhc-halo:242,217,138;
  --lhc-tint:rgba(20,20,28,.40); --lhc-sheen:rgba(255,255,255,.075); --lhc-edge:rgba(255,255,255,.16);
  --lhc-bezel:rgba(242,217,138,.32); --lhc-bezel-2:rgba(242,217,138,.12); --lhc-gap:rgba(6,6,10,.55);
  --lhc-stud:radial-gradient(circle at 50% 30%, #30343F, #15171D); --lhc-stud-ink:#C9C2B1; --lhc-stud-ring:#0B0C10;
  --lhc-tag:#24324A; --lhc-tag-ink:#BFD0FF; --lhc-tag-ring:#14161D;
}
@supports (height:1svh) { .lhc, .lhc-wrow { --s:min(276px, calc(100vw - 44px), max(200px, calc(64svh - 196px))); } }
/* a phone on its side: the console beside the check line and the wallet, so the first stop fits the short screen */
@media (orientation:landscape) and (max-height:500px) {
  .lite-has-chart .litedrawer .liteacts { grid-template-columns:auto minmax(0, 1fr); grid-template-areas:"con bar" "con wal"; column-gap:24px; row-gap:10px; align-items:center; }
  .lite-has-chart .litedrawer .liteacts > .lhd { display:contents; }
  .lite-has-chart .litedrawer .liteacts .lhd-bar { grid-area:bar; align-self:end; }
  .lite-has-chart .litedrawer .liteacts .lhc { grid-area:con; --s:min(236px, calc(100vh - 110px)); margin:4px 8px; }
  .lite-has-chart .litedrawer .liteacts > .ltk-dwrow { grid-area:wal; align-self:start; }
  .lite-has-chart .litedrawer .liteacts .lhc-wrow { --s:min(236px, calc(100vh - 110px)); }
  .lite-has-chart .litedrawer .liteacts > .lqk-host { grid-column:1 / -1; }
}
/* a small console keeps its names readable: a size up in the drawing, a little less spacing */
@container (max-width:250px) { .lhc .lhc-name { font-size:11px; letter-spacing:1.5px; } }
/* the plate: glass, the drawer's grain on it, a sheen from the top left, the dial's two gold rings round it */
.lhc-plate { position:absolute; inset:0; border-radius:50%;
  background:var(--dr-grain, none), radial-gradient(120% 85% at 32% 0%, var(--lhc-sheen), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 55%, rgba(0,0,0,.10)), var(--lhc-tint);
  box-shadow:inset 0 1px 0 var(--lhc-edge), inset 0 -1px 0 rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 0 1px var(--lhc-bezel), 0 0 0 5px var(--lhc-gap), 0 0 0 6px var(--lhc-bezel-2), 0 18px 34px -12px rgba(0,0,0,.55); }
/* the ring that turns: the print, the lamps and the five wells; the plate's light and the gold cap stay where they are */
.lhc-ring { position:absolute; inset:0; pointer-events:none; transform:rotate(var(--lhc-rot, 0deg)); }
.lhc-ring.is-turning { will-change:transform; }
.lhc-ring.is-snap, .lhc-ring.is-snap .lhc-k { transition:transform .26s cubic-bezier(.2,.9,.3,1.12); }
.lhc-print { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.lhc-ticks { fill:none; stroke:var(--lhc-tick); stroke-width:3.5; stroke-dasharray:.9 13.054; stroke-dashoffset:.45; }
.lhc-orbit { fill:none; stroke:var(--lhc-orbit); stroke-width:1; }
.lhc-name { font:600 9.5px var(--body); letter-spacing:2px; fill:var(--lhc-ink); transition:opacity .16s ease; }
.lhc.dx-lock .lhc-name[data-for="dx"] { fill:var(--lhc-ink-dim); }
.lhc.is-turning .lhc-name, .lhc-ring.is-snap .lhc-name { opacity:.42; }
.lhc.is-settling .lhc-name { opacity:0; transition:none; }
/* iOS's tick (ui-lite-shell.js lhcTick): a switch nobody sees or touches */
.lhc-tick, .lhc-tick input, .lhc-tick label { position:fixed; left:0; top:0; width:1px; height:1px; margin:0; padding:0; overflow:hidden; opacity:0; pointer-events:none; }
/* the five places, clockwise from the top: a well's centre, and its lamp's on the ring of minutes */
.lhc .s0 { --x:50%; --y:19.203%; --lx:50%; --ly:1.721%; }
.lhc .s1 { --x:79.290%; --y:40.482%; --lx:95.917%; --ly:35.080%; }
.lhc .s2 { --x:68.101%; --y:74.917%; --lx:78.377%; --ly:89.058%; }
.lhc .s3 { --x:31.899%; --y:74.917%; --lx:21.623%; --ly:89.058%; }
.lhc .s4 { --x:20.710%; --y:40.482%; --lx:4.083%; --ly:35.080%; }
.lhc-lamp { position:absolute; left:calc(var(--lx) - 2.2 * var(--u)); top:calc(var(--ly) - 2.2 * var(--u)); width:calc(4.4 * var(--u)); height:calc(4.4 * var(--u));
  border-radius:50%; pointer-events:none; background:var(--lhc-on); box-shadow:0 0 0 calc(2 * var(--u)) color-mix(in srgb, var(--lhc-on) 22%, transparent); }
.lhc-lamp[data-for="tantra"] { background:var(--lhc-soon); box-shadow:0 0 0 calc(2 * var(--u)) color-mix(in srgb, var(--lhc-soon) 22%, transparent); }
.lhc.dx-lock .lhc-lamp[data-for="dx"] { background:var(--lhc-off); box-shadow:none; }
/* a well, and its cap: domed, lit from above, its mark backlit; the well turns with the ring, the cap stays upright */
.lhc-k { position:absolute; left:calc(var(--x) - 29 * var(--u)); top:calc(var(--y) - 29 * var(--u)); width:calc(58 * var(--u)); height:calc(58 * var(--u));
  display:grid; place-items:center; margin:0; padding:0; border:0; border-radius:50%; cursor:pointer; pointer-events:auto; color:inherit;
  background:var(--lhc-well); box-shadow:var(--lhc-well-sh); transform:rotate(calc(-1 * var(--lhc-rot, 0deg)));
  -webkit-tap-highlight-color:transparent; outline:none; }
.lhc-k::before { content:""; position:absolute; inset:calc(2 * var(--u)); border-radius:50%; pointer-events:none; opacity:0; transition:opacity 70ms ease-out;
  box-shadow:inset 0 0 0 1px rgba(var(--lhc-lit), .38), inset 0 0 calc(10 * var(--u)) rgba(var(--lhc-lit), .30); }
.lhc-k:focus-visible { box-shadow:var(--lhc-well-sh), 0 0 0 2px var(--lhs-gold, #F2D98A); }
.lhc-cap { position:relative; display:grid; place-items:center; width:calc(50 * var(--u)); height:calc(50 * var(--u)); border-radius:50%;
  background:var(--lhc-cap); box-shadow:var(--lhc-cap-sh); transition:transform 70ms ease-out; }
.lhc-cap::before { content:""; position:absolute; left:16%; right:16%; top:6%; height:40%; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, var(--lhc-gloss) 0%, rgba(255,255,255,0) 72%); }
.lhc-cap::after { content:""; position:absolute; inset:10%; border-radius:50%; pointer-events:none; opacity:0; transition:opacity 70ms ease-out;
  background:radial-gradient(circle, rgba(var(--lhc-lit), .42) 0%, rgba(var(--lhc-lit), .12) 46%, rgba(var(--lhc-lit), 0) 72%); }
.lhc-cap > svg { position:relative; z-index:1; width:calc(21 * var(--u)); height:calc(21 * var(--u)); fill:none; stroke:var(--lhc-mark); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 3px var(--lhc-mark-glow)); }
/* pressed: the cap sinks into its well, its mark lights the cap and the light shows round its rim — at once, no waiting */
.lhc-k:active .lhc-cap { transform:translateY(calc(1.5 * var(--u))) scale(.955); }
.lhc-k:active .lhc-cap::after, .lhc-k:active::before { opacity:1; }
@media (hover:hover) { .lhc-k:hover .lhc-cap::after { opacity:.45; } .lhc-k:hover::before { opacity:.5; } }
/* a turn is not a press */
.lhc.is-turning .lhc-k .lhc-cap { transform:none; }
.lhc.is-turning .lhc-k .lhc-cap::after, .lhc.is-turning .lhc-k::before { opacity:0; }
.lhc-k.is-locked .lhc-cap { background:var(--lhc-cap-off); }
.lhc-k.is-locked .lhc-cap > svg { stroke:var(--lhc-mark-off); filter:none; }
.lhc-k.soon { --lhc-lit:var(--lhc-lit-soon); }
.lhc-k.soon .lhc-cap > svg { stroke:var(--lhc-mark-soon); filter:none; }
/* the lock and the Soon mark hang at the cap's foot, clear of every name wherever the ring has turned */
.lhc-stud { position:absolute; z-index:2; left:50%; top:90%; width:calc(15 * var(--u)); height:calc(15 * var(--u)); margin:calc(-7.5 * var(--u)) 0 0 calc(-7.5 * var(--u));
  display:none; place-items:center; border-radius:50%; background:var(--lhc-stud);
  box-shadow:0 0 0 1.5px var(--lhc-stud-ring), 0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.lhc-k.is-locked .lhc-stud { display:grid; }
.lhc-stud svg { width:calc(8.5 * var(--u)); height:calc(8.5 * var(--u)); fill:none; stroke:var(--lhc-stud-ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lhc-tag { position:absolute; z-index:2; left:50%; top:90%; transform:translate(-50%, -50%); padding:calc(2 * var(--u)) calc(4 * var(--u)); border-radius:6px;
  font:700 calc(7.5 * var(--u))/1 var(--body); font-style:normal; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:var(--lhc-tag-ink); background:var(--lhc-tag); box-shadow:0 0 0 2px var(--lhc-tag-ring); }
/* the light a touch sends out (ui-lite-shell.js lhcRing animates it) */
.lhc-rip { position:absolute; left:50%; top:50%; width:calc(50 * var(--u)); height:calc(50 * var(--u)); margin:calc(-25 * var(--u)) 0 0 calc(-25 * var(--u));
  border-radius:50%; pointer-events:none; opacity:0;
  box-shadow:0 0 0 1.5px rgba(var(--lhc-lit), .9), 0 0 calc(12 * var(--u)) 1px rgba(var(--lhc-lit), .4); }
/* the centre: Start Swara Realignment, one gold cap, machined, in a deeper well */
.lhc-core { position:absolute; left:calc(50% - 51 * var(--u)); top:calc(50% - 51 * var(--u)); width:calc(102 * var(--u)); height:calc(102 * var(--u));
  display:grid; place-items:center; margin:0; padding:0; border:0; border-radius:50%; cursor:pointer; color:#22190A;
  background:var(--lhc-cwell); box-shadow:var(--lhc-cwell-sh); -webkit-tap-highlight-color:transparent; outline:none; }
.lhc-core::before { content:""; position:absolute; inset:calc(-3 * var(--u)); border-radius:50%; pointer-events:none; opacity:.55;
  box-shadow:0 0 0 1px rgba(var(--lhc-halo), .45), 0 0 calc(16 * var(--u)) 1px rgba(var(--lhc-halo), .24); }
.lhc-core::after { content:""; position:absolute; inset:calc(3 * var(--u)); border-radius:50%; pointer-events:none; opacity:0; transition:opacity 70ms ease-out;
  box-shadow:inset 0 0 0 1px rgba(var(--lhc-halo), .45), inset 0 0 calc(14 * var(--u)) rgba(var(--lhc-halo), .38); }
.lhc-core:focus-visible { box-shadow:var(--lhc-cwell-sh), 0 0 0 2px var(--lhs-gold, #F2D98A); }
.lhc-gold { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(5 * var(--u));
  width:calc(92 * var(--u)); height:calc(92 * var(--u)); border-radius:50%; overflow:hidden; transition:transform 70ms ease-out;
  background:radial-gradient(ellipse 62% 36% at 50% 7%, rgba(255,255,255,.55), rgba(255,255,255,0) 72%),
    radial-gradient(circle closest-side, transparent 81.5%, rgba(70,48,0,.24) 81.5% 83%, rgba(255,250,228,.34) 83% 84.5%, transparent 84.5%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.045) 0 1px, rgba(0,0,0,0) 1px 2px),
    radial-gradient(circle at 50% 26%, #FFF6D6 0%, #F4DB90 28%, #DDB752 62%, #A98119 100%);
  box-shadow:0 7px 12px rgba(0,0,0,.6), 0 2px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(255,236,170,.55), inset 0 2px 1px rgba(255,255,255,.6), inset 0 -6px 10px rgba(112,76,0,.45); }
.lhc-gold::after { content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:38%; pointer-events:none; opacity:0;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%); transform:translateX(-140%) skewX(-18deg); }
.lhc-gold > svg { position:relative; width:calc(26 * var(--u)); height:calc(26 * var(--u)); fill:none; stroke:#22190A; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.lhc-gold > b { position:relative; font:700 calc(9 * var(--u))/1 var(--body); letter-spacing:.24em; margin-right:-.24em; text-transform:uppercase; color:#22190A; }
.lhc-gold > b.lhc-st { font-size:calc(7.6 * var(--u)); letter-spacing:.08em; margin-right:-.08em; }   /* SwaraTantra on the gold cap (2026-10-17), eleven letters where Realign had seven */
.lhc-core:active .lhc-gold { transform:translateY(calc(2 * var(--u))) scale(.975); }
.lhc-core:active::after { opacity:1; }
@media (hover:hover) { .lhc-core:hover::after { opacity:.45; } }
.lhc-core .lhc-rip { width:calc(92 * var(--u)); height:calc(92 * var(--u)); margin:calc(-46 * var(--u)) 0 0 calc(-46 * var(--u)); --lhc-lit:var(--lhc-halo); }
/* THE WALLET at the console's foot (the user, 2026-10-05: "show wallet button also like the dial buttons with its statistics
   mentioned below it in one line"): the same well and domed cap, pressed the same way, its figures in one line under it, the
   name as the ring prints its names. Not on the ring: it is the balance, not a way on, so it never turns. ui-lite-tokens.js */
.lhc-wrow { display:flex; justify-content:center; }
.lhc-wal { display:flex; flex-direction:column; align-items:center; gap:calc(7 * var(--u)); max-width:100%; margin:0; padding:0 6px 2px; border:0; border-radius:14px;
  background:none; color:inherit; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; outline:none; -webkit-user-select:none; user-select:none; }
.lhc-wk { position:relative; display:grid; place-items:center; flex:none; width:calc(58 * var(--u)); height:calc(58 * var(--u)); border-radius:50%;
  background:var(--lhc-well); box-shadow:var(--lhc-well-sh); }
.lhc-wk::before { content:""; position:absolute; inset:calc(2 * var(--u)); border-radius:50%; pointer-events:none; opacity:0; transition:opacity 70ms ease-out;
  box-shadow:inset 0 0 0 1px rgba(var(--lhc-lit), .38), inset 0 0 calc(10 * var(--u)) rgba(var(--lhc-lit), .30); }
/* the cap is the Swara coin, seated in the well: its own colours (the dial's line-mark styles undone), the dome's gloss over it */
.lhc-cap.coin { background:none; box-shadow:0 3px 5px rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.5); }
.lhc-cap.coin > svg { width:100%; height:100%; fill:initial; stroke:initial; stroke-width:initial; stroke-linecap:initial; stroke-linejoin:initial; filter:none; }
.lhc-cap.coin::before, .lhc-cap.coin::after { z-index:2; }
.lhc-wal:active .lhc-cap { transform:translateY(calc(1.5 * var(--u))) scale(.955); }
.lhc-wal:active .lhc-cap::after, .lhc-wal:active .lhc-wk::before { opacity:1; }
@media (hover:hover) { .lhc-wal:hover .lhc-cap::after { opacity:.45; } .lhc-wal:hover .lhc-wk::before { opacity:.5; } }
.lhc-wal:focus-visible .lhc-wk { box-shadow:var(--lhc-well-sh), 0 0 0 2px var(--lhs-gold, #F2D98A); }
.lhc-wl { display:flex; align-items:baseline; justify-content:center; gap:6px; max-width:100%; white-space:nowrap; line-height:1; }
.lhc-wn { font:600 10px/1 var(--body); letter-spacing:.2em; margin-right:-.2em; text-transform:uppercase; color:var(--lhc-ink); }
.lhc-wl i { font:500 11px/1 var(--body); font-style:normal; color:var(--lhc-ink-dim); }
.lhc-wl b { font:600 13px/1 var(--mono); color:var(--lhc-mark); font-variant-numeric:tabular-nums; }
.lhc-wl em { font:600 11.5px/1 var(--body); font-style:normal; color:var(--ltk-up); }
.lhc-wp { font:500 11.5px/1 var(--body); color:var(--lhc-ink-dim); }
@media (prefers-reduced-motion: reduce) { .lhc-wk::before { transition:none; } }
/* the idle invitation, only while the first stop is up: the gold cap's ring breathes (in 2.5 s, out 3.5 s) and a glint
   crosses the gold now and then; Your progress's "Open the drawer" lights it twice (ui-lite-swipe.js lhsToDrawer) */
.litedrawer[data-state="half"] .lhc-core::before { animation:lhcBreathe 6s ease-in-out infinite; }
.litedrawer[data-state="half"] .lhc-gold::after { animation:lhcGlint 7s cubic-bezier(.4,0,.2,1) 1.6s infinite; }
.litedrawer[data-state="half"] .lhc-core.lhd-pulse::before { animation:lhcCall 2.2s cubic-bezier(.22,.9,.24,1) 1; }
@keyframes lhcBreathe { 0%, 100% { opacity:.4; } 42% { opacity:1; } }
@keyframes lhcGlint { 0%, 80% { opacity:0; transform:translateX(-140%) skewX(-18deg); } 81% { opacity:1; } 100% { opacity:1; transform:translateX(330%) skewX(-18deg); } }
@keyframes lhcCall { 0% { opacity:.5; transform:scale(1); } 18% { opacity:1; transform:scale(1.14); } 42% { opacity:.7; transform:scale(1.03); }
  64% { opacity:1; transform:scale(1.16); } 100% { opacity:.55; transform:scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .litedrawer[data-state="half"] .lhc-core::before, .litedrawer[data-state="half"] .lhc-gold::after { animation:none; }
  .litedrawer[data-state="half"] .lhc-core.lhd-pulse::before { animation:none; opacity:1; box-shadow:0 0 0 2px #F2D98A; }
  .lhc-cap, .lhc-gold, .lhc-k::before, .lhc-cap::after, .lhc-core::after, .lhc-name { transition:none; }
  .lhc-ring.is-snap, .lhc-ring.is-snap .lhc-k { transition:none; }
}
/* the day theme: ivory caps in sand wells, a pale glass plate, the names in ink, the brass darker */
:root[data-theme="light"].lite-app .lhc, :root[data-theme="light"].lite-app .lhc-wrow {
  --lhc-ink:#5B5242; --lhc-ink-dim:#A99F8A; --lhc-tick:rgba(138,106,18,.34); --lhc-orbit:rgba(138,106,18,.16);
  --lhc-mark:#8A6A12; --lhc-mark-glow:rgba(201,162,39,.30); --lhc-mark-off:#B3A98F; --lhc-mark-soon:#6B74B8;
  --lhc-cap:radial-gradient(circle at 50% 26%, #FFFFFF 0%, #FBF6EC 42%, #EADFC8 100%);
  --lhc-cap-off:radial-gradient(circle at 50% 26%, #F8F5EE 0%, #EFE9DC 45%, #E1D8C5 100%);
  --lhc-cap-sh:0 3px 4px rgba(90,70,30,.30), 0 1px 1px rgba(90,70,30,.22), inset 0 1px 0 #FFFFFF, inset 0 -2px 4px rgba(120,90,30,.16), inset 0 0 0 1px rgba(138,106,18,.14);
  --lhc-gloss:rgba(255,255,255,.95);
  --lhc-well:radial-gradient(circle at 50% 70%, #E6DCC8 0%, #D6CAB1 75%);
  --lhc-well-sh:inset 0 3px 5px rgba(90,70,30,.34), inset 0 -1px 1px rgba(255,255,255,.85), 0 1px 0 rgba(255,255,255,.75);
  --lhc-cwell:#D9CDB4; --lhc-cwell-sh:inset 0 3px 6px rgba(90,70,30,.38), inset 0 -1px 1px rgba(255,255,255,.85);
  --lhc-on:#2E9C75; --lhc-off:#C9BFAA; --lhc-soon:#5D78C8;
  --lhc-lit:184,138,28; --lhc-lit-soon:93,120,200; --lhc-halo:184,138,28;
  --lhc-tint:rgba(255,253,248,.40); --lhc-sheen:rgba(255,255,255,.75); --lhc-edge:rgba(255,255,255,.95);
  --lhc-bezel:rgba(138,106,18,.42); --lhc-bezel-2:rgba(138,106,18,.16); --lhc-gap:rgba(255,255,255,.6);
  --lhc-stud:radial-gradient(circle at 50% 30%, #FFFFFF, #E8DFCC); --lhc-stud-ink:#6E6450; --lhc-stud-ring:#F6F2EA;
  --lhc-tag:#E2E8FA; --lhc-tag-ink:#34488A; --lhc-tag-ring:#F6F2EA;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]).lite-app .lhc, :root:not([data-theme="dark"]).lite-app .lhc-wrow {
    --lhc-ink:#5B5242; --lhc-ink-dim:#A99F8A; --lhc-tick:rgba(138,106,18,.34); --lhc-orbit:rgba(138,106,18,.16);
    --lhc-mark:#8A6A12; --lhc-mark-glow:rgba(201,162,39,.30); --lhc-mark-off:#B3A98F; --lhc-mark-soon:#6B74B8;
    --lhc-cap:radial-gradient(circle at 50% 26%, #FFFFFF 0%, #FBF6EC 42%, #EADFC8 100%);
    --lhc-cap-off:radial-gradient(circle at 50% 26%, #F8F5EE 0%, #EFE9DC 45%, #E1D8C5 100%);
    --lhc-cap-sh:0 3px 4px rgba(90,70,30,.30), 0 1px 1px rgba(90,70,30,.22), inset 0 1px 0 #FFFFFF, inset 0 -2px 4px rgba(120,90,30,.16), inset 0 0 0 1px rgba(138,106,18,.14);
    --lhc-gloss:rgba(255,255,255,.95);
    --lhc-well:radial-gradient(circle at 50% 70%, #E6DCC8 0%, #D6CAB1 75%);
    --lhc-well-sh:inset 0 3px 5px rgba(90,70,30,.34), inset 0 -1px 1px rgba(255,255,255,.85), 0 1px 0 rgba(255,255,255,.75);
    --lhc-cwell:#D9CDB4; --lhc-cwell-sh:inset 0 3px 6px rgba(90,70,30,.38), inset 0 -1px 1px rgba(255,255,255,.85);
    --lhc-on:#2E9C75; --lhc-off:#C9BFAA; --lhc-soon:#5D78C8;
    --lhc-lit:184,138,28; --lhc-lit-soon:93,120,200; --lhc-halo:184,138,28;
    --lhc-tint:rgba(255,253,248,.40); --lhc-sheen:rgba(255,255,255,.75); --lhc-edge:rgba(255,255,255,.95);
    --lhc-bezel:rgba(138,106,18,.42); --lhc-bezel-2:rgba(138,106,18,.16); --lhc-gap:rgba(255,255,255,.6);
    --lhc-stud:radial-gradient(circle at 50% 30%, #FFFFFF, #E8DFCC); --lhc-stud-ink:#6E6450; --lhc-stud-ring:#F6F2EA;
    --lhc-tag:#E2E8FA; --lhc-tag-ink:#34488A; --lhc-tag-ring:#F6F2EA;
  }
}
/* Today's checks on Now: Since sunrise folded under one line (ui-lite-swipe.js lhsSinceFold); the section's own hairline is its edge */
.lhs-now-since > .lhs-fold { margin-top:0; padding-top:0; border-top:0; }
.lhs-sincef .ltd-sechd .ltd-count { display:none; }   /* the fold's own line says the count */
/* =====================================================================================================================
   NOW: THE BREATH CARD (the user, 2026-10-05: "Add the same drawer dial like bg style to the web app's home page check breath
   record section to look like a card but with elegant theme like on the dial in the drawer"; then "dont give grainier look. But
   elegant solid color theme", "dark grey professional"; and "remove both yellow separator lines from home page", "Remove the
   yellow separator line above the today's checks card"). The check and its three ways are one solid dark grey card in the dial's two
   gold rims, no grain, nothing moving; Now's sections part by space alone. The three discs share the card in equal columns, never past it.
   ===================================================================================================================== */
html.lhs-on .lhs-now-sec::before { content:none; }
html.lhs-on .lhs-now-sec { padding-top:0; }
/* the card: the check, and its three ways under it (the user: "Keep how to check, breath tap and Add notification in the same
   breath check record card") */
html.lhs-on .lhs-now-check { position:relative; margin-top:30px; padding:20px 14px 16px; border-radius:24px; background:#191B21;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.035),
    0 0 0 1px rgba(242,217,138,.30), 0 0 0 5px rgba(8,9,12,.92), 0 0 0 6px rgba(242,217,138,.10), 0 16px 32px -14px rgba(0,0,0,.6); }
html.lhs-on .lhs-now-check .lhs-now-bt { margin-top:18px; }
html.lhs-on .lhs-now-bt .lhs-ways { box-shadow:none; padding-top:0; }
/* the next check never cut short in the card: its words wrap beside the switch rather than end in "…" */
html.lhs-on .lhs-now-check .lqk-l .lal-next-tx b { white-space:normal; overflow:visible; text-overflow:clip; }
html.lhs-on .lhs-now-check .lqk .lal-ans { grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:clamp(8px, 3.5vw, 16px); }
html.lhs-on .lhs-now-check .lqk .lal-ans button { width:100%; max-width:104px; height:auto; aspect-ratio:1 / 1; justify-self:center; }
/* "Check your breath" from elsewhere lights the card's edge, not its fill */
html.lhs-on .lhs-now-check::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
html.lhs-on .lhs-now-check.lhs-pulse .lqk { animation:none; }
html.lhs-on .lhs-now-check.lhs-pulse::after { animation:lhsPulse 1.5s cubic-bezier(.22,.9,.24,1) 1; }
@media (prefers-reduced-motion: reduce) { html.lhs-on .lhs-now-check.lhs-pulse::after { animation:none; } }
/* below the card a wider breath, then Today's checks, Realignment and Your progress close together (the user, 2026-10-05: "Shift
   the Today checks and every card below it slightly with more gap with the breath check record card and reduce the gap shown
   between the today's checks, Realignment and your progress card … a very uncluttered and clean look") */
html.lhs-on .lhs-now-since { margin-top:38px; }
html.lhs-on .lhs-now-rec { margin-top:12px; }
html.lhs-on .lhs-now-rec .lhs-fold { margin-top:0; }
:root[data-theme="light"].lhs-on .lhs-now-check { background:#FBF8F2;
  box-shadow:inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(120,90,30,.05),
    0 0 0 1px rgba(138,106,18,.38), 0 0 0 5px rgba(255,255,255,.75), 0 0 0 6px rgba(138,106,18,.14), 0 16px 32px -16px rgba(90,70,30,.28); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]).lhs-on .lhs-now-check { background:#FBF8F2;
    box-shadow:inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(120,90,30,.05),
      0 0 0 1px rgba(138,106,18,.38), 0 0 0 5px rgba(255,255,255,.75), 0 0 0 6px rgba(138,106,18,.14), 0 16px 32px -16px rgba(90,70,30,.28); }
}
/* Ready for realignment, under Your progress (the user, 2026-10-05): the words alone in its card, the gold dot before them
   (ui-lite-swipe.js lhsRecRow) */
.lhs-rs.solo { justify-content:flex-start; }
.lhs-rs.solo .lhs-rs-v { gap:10px; padding:0; background:none; box-shadow:none; font:500 17px/1.2 var(--display); color:var(--ink); white-space:normal; }
.lhs-rs.solo .lhs-rs-v i { width:9px; height:9px; background:var(--lhs-gold); box-shadow:0 0 0 4px rgba(var(--lhs-gold-rgb), .2); }
/* the card's header (2026-10-05): "Your breath" and the Quick | Detailed switch on one line, the check's own line under them at
   full width, so neither wraps nor is cut; the switch a size more compact. Stacked under 350px. */
html.lhs-on .lhs-now-check .lqk-hd { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"eb sg" "st st"; align-items:center; column-gap:8px; row-gap:8px; }
html.lhs-on .lhs-now-check .lqk-l { display:contents; }
html.lhs-on .lhs-now-check .lqk-l .lqk-k { grid-area:eb; font-size:9.5px; letter-spacing:.16em; white-space:nowrap; }
html.lhs-on .lhs-now-check .lqk-l .lal-next { grid-area:st; }
html.lhs-on .lhs-now-check .lqk-hd > .lqk-seg { grid-area:sg; justify-self:end; }
html.lhs-on .lhs-now-check .lqk-seg button { padding:0 9px; gap:4px; }
html.lhs-on .lhs-now-check .lqk-seg .lqk-tok { font-size:10px; padding:1px 4px; }
@media (max-width:349px) {
  html.lhs-on .lhs-now-check .lqk-hd { grid-template-columns:minmax(0, 1fr); grid-template-areas:"eb" "sg" "st"; }
  html.lhs-on .lhs-now-check .lqk-hd > .lqk-seg { justify-self:start; }
}

/* =====================================================================================================================
   THE MIST MIRROR (ui-lite-mistmirror.js; the user, 2026-10-05): the question after a tap, and the detailed check on the
   phone's own glass. The question is a card in the middle of the screen, as Undo and Confirm are; the Mirror a sheet over
   everything — true black where the glass is the mirror, the app's own dark elsewhere. Nothing moves but a card arriving.
   ===================================================================================================================== */
html.lmm-on, html.lmm-on body { overscroll-behavior:none; }
/* THE QUESTION, worn as Undo and Confirm's card (the user, 2026-10-06: "Make the detailed check or stay quick card design in the same
   theme as the Undo and confirm card"): the same veil, the same card in the middle of the screen, a short kicker (here the tick on the
   side just tapped), one big line, a line under it, the two answers side by side — the quiet one and the green one — and a fine line */
.lmm-ask { position:fixed; inset:0; z-index:9400; display:flex; overflow-y:auto; overscroll-behavior:contain; box-sizing:border-box;
  padding:20px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left)); font-family:var(--body); color:var(--ink);
  background:rgba(3, 5, 10, .62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:lmmIn .16s ease-out both; }
@keyframes lmmIn { from { opacity:0; } to { opacity:1; } }
.lmm-card { width:min(360px, 100%); box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 18px 16px; border-radius:26px;
  text-align:center; color:var(--ink); background:var(--lhs-card); box-shadow:0 34px 70px -24px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--lhs-line-2);
  animation:obsmIn .24s cubic-bezier(.2, .9, .25, 1) both; }
.lmm-ask > .lmm-card { margin:auto; flex:none; }
.lmm-card:focus { outline:none; }
.lmm-card h3 { margin:2px 0 0; font:400 26px/1.15 var(--display); letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
.lmm-tick { display:inline-flex; align-items:center; gap:6px; font:600 10.5px/1 var(--body); letter-spacing:.22em; text-transform:uppercase; color:var(--lhs-good, #62C19E); }
.lmm-tick .lfl-tick { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.lmm-say { max-width:30ch; margin:0; font:400 13.5px/1.45 var(--body); color:var(--ink-2); }
/* what a detailed check adds: a tile each, a word or two, side by side; the whole sentence kept for a screen reader */
.lmm-gains { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:6px; width:100%; margin:4px 0 0; padding:0; list-style:none; }
.lmm-gains li { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; padding:10px 4px 9px; border-radius:14px; background:var(--lhs-well);
  box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lmm-gi { display:grid; place-items:center; width:26px; height:26px; margin-bottom:2px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .35); }
.lmm-gi svg { width:14px; height:14px; fill:none; stroke:var(--lhs-gold); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lmm-gains b { font:600 12.5px/1.2 var(--body); color:var(--ink); }
.lmm-gains em { font:400 11px/1.25 var(--body); font-style:normal; color:var(--dim); }
/* the two answers: Keep it quick as Undo is, Detailed check as Confirm is */
.lmm-orow { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr); gap:10px; width:100%; margin-top:6px; }
.lmm-quiet, .lmm-pill { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:50px; padding:0 12px; border:0; border-radius:15px; cursor:pointer;
  font:600 15px/1 var(--body); -webkit-tap-highlight-color:transparent; transition:transform .12s ease; }
.lmm-quiet { color:var(--ink); background:transparent; box-shadow:inset 0 0 0 1.5px var(--lhs-line-2); }
.lmm-pill { color:#08130F; background:var(--jade); box-shadow:0 12px 26px -14px var(--jade); }
.lmm-pill svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lmm-quiet:active, .lmm-pill:active { transform:scale(.97); }
.lmm-quiet:focus-visible, .lmm-pill:focus-visible, .lmm-skip:focus-visible { outline:2px solid var(--brass-hi); outline-offset:3px; }
.lmm-fine { max-width:34ch; margin:2px 0 0; font:400 11.5px/1.45 var(--body); color:var(--dim); }
/* Both's four flows, as quiet tiles on the same card, and Skip under them */
.lmm-both { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; width:100%; margin-top:4px; }
.lmm-both button { display:grid; justify-items:center; gap:3px; padding:12px 6px 11px; border:0; border-radius:15px; cursor:pointer; color:var(--ink); background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--lhs-line-2); font:600 13.5px/1.2 var(--body); -webkit-tap-highlight-color:transparent; transition:transform .12s ease; }
.lmm-both button:active { transform:scale(.97); }
.lmm-both button em { font:400 11.5px/1.2 var(--body); font-style:normal; color:var(--dim); }
.lmm-both button svg { width:22px; height:22px; color:var(--lhs-gold); fill:currentColor; }
.lmm-skip { min-height:40px; padding:0 16px; border:0; border-radius:12px; cursor:pointer; font:600 13.5px/1 var(--body); color:var(--ink-2); background:none; -webkit-tap-highlight-color:transparent; }
/* a narrow phone: the green answer first, the two one above the other */
@media (max-width:340px) { .lmm-orow { grid-template-columns:1fr; } .lmm-orow .lmm-pill { order:-1; } }
/* a phone on its side: the tiles say their word alone */
@media (max-height:520px) { .lmm-card { gap:8px; padding:16px 16px 12px; } .lmm-gains em { display:none; } .lmm-gains li { padding:8px 4px; } }
.lmm-go, .lmm-ghost, .lmm-link { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:46px; padding:0 18px; border:0; border-radius:14px;
  cursor:pointer; font:600 14.5px/1 var(--body); -webkit-tap-highlight-color:transparent; }
.lmm-go { color:#1B1406; background:linear-gradient(180deg, #F2DE9F 0%, #DDBB59 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.45); }
.lmm-go svg, .lmm-ghost svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lmm-go small { padding:3px 7px; border-radius:8px; font:700 12px/1 var(--body); background:rgba(27,20,6,.12); }
.lmm-go:disabled { opacity:.45; cursor:default; box-shadow:none; }
.lmm-ghost { font-weight:600; color:#E6DFCE; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.13); }
.lmm-link { min-height:40px; padding:0 6px; font:500 13.5px/1.3 var(--body); color:#857F6E; background:none; }
.lmm-go:focus-visible, .lmm-ghost:focus-visible, .lmm-link:focus-visible, .lmm-both button:focus-visible, .lmm-tile:focus-visible, .lmm-chip:focus-visible,
  .lmm-swb:focus-visible, .lmm-x:focus-visible { outline:2px solid #F2D98A; outline-offset:3px; }
.lmm-go.sm, .lmm-ghost.sm { min-height:44px; padding:0 14px; font-size:14px; }
.lmm-link.sm { min-height:44px; }
.lmm-go.wide { width:100%; min-height:50px; font-size:15px; }

/* the sheet */
.lmm { position:fixed; inset:0; z-index:9500; display:flex; flex-direction:column; overflow:hidden; background:#0A0C12; color:#E6DFCE; font-family:var(--body);
  -webkit-user-select:none; user-select:none; }
.lmm.is-glass { background:#000; overflow:hidden; touch-action:none; }
.lmm-head { position:relative; flex:none; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:8px; width:min(520px, 100%); box-sizing:border-box;
  margin:0 auto; padding:max(12px, env(safe-area-inset-top)) 12px 0; }
.lmm-brand { font:600 11px/1 var(--body); letter-spacing:.24em; margin-right:-.24em; text-align:center; color:#F0D57E; }
.lmm-hsp { width:44px; height:44px; }
/* the steps (the user, 2026-10-05: "proper step-wise UI/UX for no confusion"): "Step n of 6 · its name" over one segment a step */
/* 2026-10-07, "slick, small and premium": a hairline a step (jade once done, gold now), the line small under them */
.lmm-steps { flex:none; display:flex; flex-direction:column; gap:8px; width:min(480px, 100%); box-sizing:border-box; margin:10px auto 0; padding:0 22px; }
.lmm-step { font:600 9.5px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:#7D7766; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lmm-step b { font-weight:700; color:#F0D57E; }
.lmm-seg { display:flex; gap:4px; height:3px; }
.lmm-seg i { position:relative; flex:1 1 0; border-radius:3px; background:rgba(255,255,255,.1); }
.lmm-seg i::after { content:""; position:absolute; inset:0; border-radius:inherit; transform-origin:0 50%; transform:scaleX(0); }
.lmm-seg i.was::after { transform:none; background:#62C19E; }
.lmm-seg i.now::after { transform:none; background:linear-gradient(90deg, rgba(240,213,126,.5), #F0D57E); box-shadow:0 0 9px rgba(240,213,126,.5); }
.lmm-seg.fwd i.just::after { animation:lqsFill .45s cubic-bezier(.3,.7,.2,1) both; }
.lmm-seg.fwd i.now::after { animation:lqsFill .55s .28s cubic-bezier(.3,.7,.2,1) both; }
.lmm-steps.sm { flex:1 1 auto; min-width:0; width:auto; margin:0; padding:0; gap:6px; }
.lmm-steps.sm .lmm-step { font-size:9px; }
/* the narrowest phones: "Step 3 of 5 · Breathe" ran 7px past its room at 280px (the full run, 2026-10-11) */
@media (max-width: 300px) { .lmm-step { letter-spacing:.1em; } }
.lmm-steps.sm .lmm-seg { height:2.5px; }
.lmm-x { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer; color:#B9B3A3; background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.lmm-x svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.lmm-x.glass { position:absolute; z-index:3; right:12px; top:max(14px, env(safe-area-inset-top)); }
.lmm-body { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:12px; width:min(480px, 100%); box-sizing:border-box; margin:0 auto; padding:18px 20px 12px; }
.lmm-body h2, .lmm-shapebody h2 { margin:0; font:600 25px/1.15 var(--display); letter-spacing:-.01em; color:#F2EDE2; text-wrap:balance; }
.lmm-lede { margin:0; font:400 14.5px/1.5 var(--body); color:#B9B3A3; }
.lmm-small { margin:0; font:400 12.5px/1.45 var(--body); color:#857F6E; }
.lmm-k { display:block; font:600 11px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:#857F6E; }
.lmm-k.L { color:#A093DB; } .lmm-k.R { color:#EC7760; }
.lmm-foot { flex:none; display:flex; flex-direction:column; gap:8px; width:min(480px, 100%); box-sizing:border-box; margin:0 auto; padding:10px 20px max(18px, env(safe-area-inset-bottom)); }
.lmm-foot.two { display:grid; grid-template-columns:1fr 1.4fr; gap:10px; }
.lmm-go, .lmm-ghost, .lmm-quiet, .lmm-pill { white-space:nowrap; }
/* a narrow phone: the two answers one above the other, the way on first, never words broken over two lines */
@media (max-width:340px) {
  .lmm-foot.two { grid-template-columns:1fr; gap:8px; }
  .lmm-foot.two > .lmm-go { order:-1; }
}

/* prepare */
.lmm-prows { display:flex; flex-direction:column; gap:6px; }
.lmm-prow { display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:16px; background:#14161D; }
.lmm-pico { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(242,217,138,.08); }
.lmm-pico svg { width:19px; height:19px; fill:none; stroke:#F0D57E; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lmm-prow b { display:block; font:600 14.5px/1.3 var(--body); color:#F2EDE2; }
.lmm-prow em { display:block; font:400 12.5px/1.4 var(--body); font-style:normal; color:#B9B3A3; }
.lmm-never { display:flex; align-items:center; gap:10px; margin:0; padding:10px 12px; border-radius:14px; font:400 12.5px/1.4 var(--body); color:#F3C2B8;
  background:rgba(236,119,96,.08); box-shadow:inset 0 0 0 1px rgba(236,119,96,.35); }
.lmm-never svg { flex:none; width:18px; height:18px; fill:none; stroke:#EC7760; stroke-width:2; stroke-linecap:round; }

/* the drawings: the app's own type on them, the numbered marks matching the numbered lines under them */
.lmm-art text { font-family:var(--body); }
.lmm-artl { font:700 10px var(--body); letter-spacing:1.3px; }
.lmm-artn { font:700 11px var(--body); }
.lmm-badge circle { fill:#F0D57E; }
.lmm-badge text { font:700 10.5px var(--body); fill:#1B1406; }
.lmm-holds { display:grid; gap:12px; }
@media (min-width:600px) { .lmm-holds { grid-template-columns:1fr 1fr; align-items:start; } }
.lmm-fig { margin:0; display:flex; flex-direction:column; gap:10px; padding:12px 12px 14px; border-radius:20px; background:#12141A; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.lmm-fig svg { display:block; width:100%; height:auto; max-height:36vh; }
.lmm-fig figcaption { display:grid; gap:7px; }
.lmm-fig figcaption p { display:flex; gap:9px; margin:0; font:400 13.5px/1.45 var(--body); color:#B9B3A3; }
.lmm-fig figcaption b { flex:none; display:grid; place-items:center; width:20px; height:20px; margin-top:1px; border-radius:50%; font:700 10.5px/1 var(--body); color:#1B1406; background:#F0D57E; }
/* on a computer: what the Mirror needs, said at its first step */
.lmm-pc { display:flex; align-items:flex-start; gap:10px; margin:0; padding:10px 12px; border-radius:14px; font:400 13px/1.45 var(--body); color:#C9D6F2;
  background:rgba(157,178,240,.08); box-shadow:inset 0 0 0 1px rgba(157,178,240,.25); }
.lmm-pc svg { flex:none; width:18px; height:18px; margin-top:1px; fill:none; stroke:#9DB2F0; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* the glass is read along the phone's length: on its side it asks to be turned */
.lmm-turn { display:none; }
@media (orientation:landscape) and (max-height:500px) {
  .lmm.is-glass .lmm-turn { display:grid; position:absolute; inset:0; z-index:6; place-items:center; margin:0; padding:24px 80px; text-align:center; background:#000;
    font:600 16px/1.45 var(--body); color:#F2EDE2; }
}
.lmm-ok { color:#62C19E; } .lmm-warn { color:#EC7760; }

/* the glass (the user, 2026-10-05: the nose at the bottom of the screen, "the usual position"): the light, the nose mark and the
   ruler at the bottom edge, where the upper lip rests; the words and the buttons in a bar at the top */
.lmm-light { position:absolute; left:0; right:0; bottom:0; height:5px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,241,207,0) 0%, #FFF1CF 18%, #FFF6E2 50%, #FFF1CF 82%, rgba(255,241,207,0) 100%); }
.lmm-light::after { content:""; position:absolute; left:-10%; right:-10%; bottom:0; height:240px; pointer-events:none;
  background:radial-gradient(70% 100% at 50% 100%, rgba(255,236,190,.2) 0%, rgba(255,236,190,.06) 45%, rgba(255,236,190,0) 75%); }
.lmm-nose { position:absolute; left:50%; bottom:12px; z-index:2; display:flex; flex-direction:column-reverse; align-items:center; gap:3px; transform:translateX(-50%); pointer-events:none; }
.lmm-nose svg { width:22px; height:12px; fill:none; stroke:#F0D57E; stroke-width:1.8; stroke-linecap:round; transform:rotate(180deg); }
.lmm-nose span { font:600 9px/1 var(--body); letter-spacing:.2em; color:rgba(240,213,126,.75); }
.lmm-marks { position:absolute; inset:0; pointer-events:none; }
.lmm-mline { position:absolute; left:0; right:0; height:1.5px; margin-top:-.75px; background:linear-gradient(90deg, #F2D98A, rgba(242,217,138,.5) 70%, rgba(242,217,138,0)); }
.lmm-mline.L { background:linear-gradient(90deg, #A093DB, rgba(160,147,219,.45) 70%, rgba(160,147,219,0)); }
.lmm-mline.R { background:linear-gradient(270deg, #EC7760, rgba(236,119,96,.45) 70%, rgba(236,119,96,0)); }
.lmm-mring { position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; box-shadow:0 0 0 1.5px rgba(242,217,138,.9), 0 0 18px rgba(242,217,138,.45); }
/* the left nostril mists the screen's left half (the bottom edge at the lip, the glass upright to the person); each label stands
   on its own side, above its line, on the clear glass beyond the mist */
.lmm-mlab { position:absolute; left:52px; padding:5px 10px; border-radius:999px; font:600 12px/1 var(--body); color:#1B1406; background:#F2D98A; transform:translateY(calc(-100% - 6px)); }
.lmm-mlab.L { background:#C9C1F2; } .lmm-mlab.R { left:auto; right:12px; background:#F6B3A6; }
.lmm-gbar { position:absolute; left:0; right:0; top:0; z-index:3; display:flex; flex-direction:column; gap:10px; padding:max(14px, env(safe-area-inset-top)) 16px 16px;
  background:#000; box-shadow:0 12px 16px 2px #000; }
.lmm-gsay { margin:0; font:400 13.5px/1.45 var(--body); color:#B9B3A3; }
.lmm-gsay b { font-weight:600; color:#F2EDE2; }
.lmm-gsay .L { color:#C9C1F2; } .lmm-gsay .R { color:#F6B3A6; }
/* on the glass the leave button sits in the bar, away from the bottom edge where the lip rests */
.lmm-x.bar { flex:none; width:40px; height:40px; }
.lmm-grow { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.lmm-gtop { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:28px; }
.lmm-gtop .lmm-link.sm { flex:none; min-height:36px; }
.lmm-narrow { display:none; }
@media (max-width:340px) { .lmm-wide { display:none; } .lmm-narrow { display:inline; } }
/* the glass over the lip stays clear for the mist: the question and the shapes sit high, under the bar */
.lmm-shapebody { position:absolute; left:0; right:0; top:0; bottom:0; overflow:auto; display:flex; flex-direction:column; gap:12px;
  padding:calc(136px + env(safe-area-inset-top, 0px)) 16px 64px; box-sizing:border-box; }
.lmm-tiles { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
.lmm-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:96px; padding:8px 2px; border:0; border-radius:16px; cursor:pointer;
  color:#B9B3A3; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); font:500 11.5px/1.2 var(--body); -webkit-tap-highlight-color:transparent; }
.lmm-tile i { display:grid; place-items:center; width:32px; height:32px; }
.lmm-tile i svg { width:30px; height:30px; }
.lmm-tile.on { color:#F2D98A; background:rgba(242,217,138,.10); box-shadow:inset 0 0 0 1.5px rgba(242,217,138,.75), 0 0 22px rgba(242,217,138,.18); }

/* reconcile */
.lmm-vs { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lmm-vsc { display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:18px; background:#191B21; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
.lmm-vsc b { font:600 17px/1.25 var(--display); color:#F2EDE2; }
.lmm-vsc em { font:400 12px/1.4 var(--body); font-style:normal; color:#857F6E; }

/* result */
.lmm-seal { display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 12px 16px; border-radius:22px; text-align:center; background:radial-gradient(120% 90% at 50% 0%, rgba(242,217,138,.1), rgba(242,217,138,0) 60%), #12141A; }
.lmm-seal span { font:600 28px/1.15 var(--display); letter-spacing:-.01em; color:#F2EDE2; }
.lmm-seal em { padding:5px 11px; border-radius:999px; font:600 12.5px/1 var(--body); font-style:normal; color:#B9B3A3; background:rgba(255,255,255,.05); }
.lmm-seal em.ok { color:#62C19E; background:rgba(98,193,158,.12); box-shadow:inset 0 0 0 1px rgba(98,193,158,.45); }
.lmm-seal.e-agni span { color:#F3A08F; } .lmm-seal.e-jala span { color:#C9D9F2; } .lmm-seal.e-vayu span { color:#BFE3D4; }
.lmm-seal.e-prithvi span { color:#F2D98A; } .lmm-seal.e-akasha span { color:#D9D0F5; }
.lmm-evs { display:flex; flex-direction:column; padding:4px 14px; border-radius:20px; background:#191B21;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(242,217,138,.26), 0 0 0 5px #0A0C12, 0 0 0 6px rgba(242,217,138,.09); }
.lmm-ev { display:flex; align-items:center; gap:12px; padding:11px 0; }
.lmm-ev + .lmm-ev { box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.lmm-evi { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#F0D57E; background:rgba(255,255,255,.05); }
.lmm-evi svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lmm-ev > span:nth-child(2) { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lmm-ev b { font:600 14px/1.3 var(--body); color:#F2EDE2; }
.lmm-ev em { font:400 12px/1.3 var(--body); font-style:normal; color:#857F6E; }
.lmm-evv { font:600 13px/1 var(--body); color:#F0D57E; }
.lmm-code { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 4px; }
.lmm-code span { display:flex; flex-direction:column; gap:2px; }
.lmm-code em { font:400 12px/1.2 var(--body); font-style:normal; color:#857F6E; }
.lmm-code b { font:600 14.5px/1.3 var(--body); color:#E6DFCE; }
.lmm-code i { padding:6px 11px; border-radius:999px; font:600 12px/1 var(--body); font-style:normal; color:#B9B3A3; background:rgba(255,255,255,.05); }
.lmm-code i.ok { color:#62C19E; background:rgba(98,193,158,.12); box-shadow:inset 0 0 0 1px rgba(98,193,158,.45); }
.lmm-more { border-radius:16px; background:#12141A; padding:2px 12px; }
.lmm-more summary { cursor:pointer; padding:10px 0; font:600 13.5px/1.2 var(--body); color:#E6DFCE; list-style:none; }
.lmm-more summary::-webkit-details-marker { display:none; }
.lmm-more summary em { margin-left:6px; font:400 12px/1 var(--body); font-style:normal; color:#857F6E; }
.lmm-mrow { display:flex; flex-direction:column; gap:8px; padding:4px 0 12px; }
.lmm-sw { display:flex; flex-wrap:wrap; gap:8px; }
.lmm-swb { flex:none; }
.lmm-swb { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.lmm-swb i { width:24px; height:24px; border-radius:50%; }
.lmm-swb.on { box-shadow:inset 0 0 0 2px #F2D98A; }
.lmm-chips { display:flex; flex-wrap:wrap; gap:6px; }
.lmm-chip { min-height:44px; min-width:44px; padding:0 15px; border:0; border-radius:999px; cursor:pointer; font:600 13px/1 var(--body); color:#B9B3A3; background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.lmm-chip.on { color:#1B1406; background:#F2D98A; box-shadow:none; }
/* the reach felt below the nose (2026-10-06): its four counts as one even row under its line, the next line ruled off again */
.lmm-chips.lmm-hrc { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; padding:0 0 12px; }
.lmm-hrc .lmm-chip { min-width:0; padding:0 6px; font-variant-numeric:tabular-nums; }
.lmm-hrc + .lmm-ev { box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
/* prepare, compact (2026-10-06): the four ways to cool the glass as four small tiles */
.lmm-ptiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.lmm-pt { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; padding:12px; border-radius:16px; background:#14161D; }
.lmm-pt b { font:600 14px/1.25 var(--body); color:#F2EDE2; }
.lmm-pt em { margin-top:-3px; font:400 12px/1.3 var(--body); font-style:normal; color:#9E988A; }
.lmm-ghost svg { margin-left:-2px; }
/* the light on the glass (2026-10-06: "fix the lighting for the screen so that mist is properly visible"): fine bright lines on black
   over the whole glass, which a mist blurs into a milky glow, its far end too; or an even glow; or black for a bright room */
.lmm-field { position:absolute; inset:0; z-index:0; pointer-events:none; }
.lmm[data-light="lines"] .lmm-field { background:repeating-linear-gradient(0deg, rgba(255, 246, 226, .6) 0 1px, rgba(0, 0, 0, 0) 1px 5px); }
.lmm[data-light="glow"] .lmm-field { background:radial-gradient(130% 100% at 50% 100%, #4A443A 0%, #2F2B25 55%, #1D1B17 100%); }
.lmm[data-light="lines"] .lmm-light::after, .lmm[data-light="glow"] .lmm-light::after { opacity:.3; }
.lmm-nose span { padding:2px 6px; border-radius:6px; background:#000; }
/* LEFT and RIGHT on the glass, either side of the middle the taps are sorted by */
.lmm-lanes { position:absolute; inset:0; pointer-events:none; }
.lmm-lanes::before { content:""; position:absolute; left:50%; top:36%; bottom:40px; border-left:1.5px dashed rgba(255, 255, 255, .3); }
.lmm-lanes span { position:absolute; bottom:46px; padding:5px 10px; border-radius:999px; transform:translateX(-50%); font:700 10px/1 var(--body); letter-spacing:.2em; background:#000; }
.lmm-lanes .L { left:27%; color:#C9C1F2; box-shadow:inset 0 0 0 1px rgba(160, 147, 219, .65); }
.lmm-lanes .R { left:73%; color:#F6B3A6; box-shadow:inset 0 0 0 1px rgba(236, 119, 96, .65); }
/* the light's switch, in the bar */
.lmm-lt { flex:none; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; cursor:pointer; color:#F0D57E; background:rgba(242, 217, 138, .1);
  box-shadow:inset 0 0 0 1px rgba(242, 217, 138, .4); -webkit-tap-highlight-color:transparent; }
.lmm-lt svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.lmm[data-light="dark"] .lmm-lt { color:#857F6E; background:rgba(255, 255, 255, .05); box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .14); }
.lmm-lt:focus-visible { outline:2px solid #F2D98A; outline-offset:3px; }
/* a pill for each mist: tap its top, then ticked with its reach */
.lmm-pills { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.lmm-pl { --pc:rgba(160, 147, 219, .6); --pf:#C9C1F2; display:flex; align-items:center; gap:9px; min-width:0; padding:7px 10px; border-radius:14px; background:#000;
  box-shadow:inset 0 0 0 1.5px var(--pc); }
.lmm-pl.R { --pc:rgba(236, 119, 96, .6); --pf:#F6B3A6; }
.lmm-pl > i { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--pc); }
.lmm-pl:not(.done) > i { box-shadow:none; border:1.5px dashed var(--pf); box-sizing:border-box; }
.lmm-pl > span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.lmm-pl b { font:600 12.5px/1.1 var(--body); color:var(--pf); }
.lmm-pl em { font:400 11.5px/1.15 var(--body); font-style:normal; color:#B9B3A3; }
.lmm-pl.done { background:rgba(160, 147, 219, .16); }
.lmm-pl.R.done { background:rgba(236, 119, 96, .16); }
.lmm-pl.done > i { color:#1B1406; background:var(--pf); box-shadow:none; }
.lmm-pl.done > i svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.lmm-pl.done em { color:#F2EDE2; font-weight:600; }
/* the shape's question and tiles on solid black, high under the bar; the lit glass below them for the breath */
.lmm-shapebox { display:flex; flex-direction:column; gap:12px; margin:-12px -16px 0; padding:12px 16px 18px; background:#000; box-shadow:0 16px 20px 2px #000; }
/* the hold's last line names the two sides in their colours */
.lmm-fig figcaption em { font-style:normal; font-weight:600; }
.lmm-fig figcaption em.L { color:#C9C1F2; } .lmm-fig figcaption em.R { color:#F6B3A6; }
@media (prefers-reduced-motion: reduce) { .lmm-ask, .lmm-card { animation:none; } }
/* BLACK (the user, 2026-10-07: "add a complete dark screen pitch black view bg also and set it as default"): nothing lit at all — no
   lines, no glow, no light at the bottom edge — the mist seen by the room's own light; the guides on the glass dimmed to a hint */
.lmm[data-light="black"] .lmm-light { display:none; }
.lmm[data-light="black"] .lmm-lanes::before { border-left-color:rgba(255, 255, 255, .16); }
.lmm[data-light="black"] .lmm-lanes span { opacity:.72; }
.lmm[data-light="black"] .lmm-nose { opacity:.75; }
.lmm[data-light="black"] .lmm-lt { color:#857F6E; background:rgba(255, 255, 255, .05); box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .14); }
/* the finger-width on the result, only when the quick check could not feel it: its five marks in one row */
.lmm-chips.lmm-hrc { grid-template-columns:repeat(5, minmax(0, 1fr)); }
/* the two signs naming different elements: the person keeps one (2026-10-07) */
.lmm-pick { display:flex; flex-direction:column; gap:9px; padding:13px 12px 12px; border-radius:18px; background:#191B21; box-shadow:inset 0 0 0 1px rgba(242,217,138,.32); }
.lmm-pickq { margin:0; font:600 14px/1.35 var(--body); color:#F2EDE2; }
.lmm-pickr { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.lmm-pk { display:flex; flex-direction:column; align-items:center; gap:5px; min-height:64px; padding:10px 6px; border:0; border-radius:14px; cursor:pointer; color:#E6DFCE;
  background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); -webkit-tap-highlight-color:transparent; }
.lmm-pk em { font:500 11.5px/1.2 var(--body); font-style:normal; color:#9E988A; }
.lmm-pk b { font:600 19px/1.1 var(--display); }
.lmm-pk.e-agni b { color:#F3A08F; } .lmm-pk.e-jala b { color:#C9D9F2; } .lmm-pk.e-vayu b { color:#BFE3D4; } .lmm-pk.e-prithvi b { color:#F2D98A; } .lmm-pk.e-akasha b { color:#D9D0F5; }
.lmm-pk.on { background:rgba(242,217,138,.10); box-shadow:inset 0 0 0 1.5px rgba(242,217,138,.8), 0 0 18px rgba(242,217,138,.14); }
.lmm-pk.on em { color:#F2D98A; }
.lmm-pk:focus-visible { outline:2px solid #F2D98A; outline-offset:3px; }

/* =====================================================================================================================
   THE QUICK CHECK IN STEPS (ui-lite-mistmirror.js; the user, 2026-10-07): on the card in the middle of the screen, under one bar
   of steps — Side · Flow (Both only) · Reach — the flow's and the reach's buttons worn as Left, Both and Right are on Now; the
   guide figure with its marks in the body's own fingers and the hand lowered with the out-breath; then the Mirror test's offer.
   ===================================================================================================================== */
.lqs-card { --lqs-skin:#5C4E41; --lqs-skin-l:#CDB89D; position:relative; width:min(384px, 100%); gap:11px; padding:18px 16px 10px; }
/* Cancel, in the card's corner: the whole check dropped (2026-10-07) */
.lqs-x { position:absolute; top:8px; right:8px; z-index:1; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; cursor:pointer;
  color:var(--ink-2); background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line-2); -webkit-tap-highlight-color:transparent; }
.lqs-x:hover { color:var(--ink); }
.lqs-x:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lqs-x svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
:root[data-theme="light"] .lqs-card { --lqs-skin:#EAD8C2; --lqs-skin-l:#9A7C5A; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lqs-card { --lqs-skin:#EAD8C2; --lqs-skin-l:#9A7C5A; } }
.lqs-card h3 { font-size:23px; }
.lqs-card .lmm-say { max-width:36ch; font-size:13px; }
/* THE BAR (2026-10-07: "slick, small and premium"): a hairline a step, jade once done, gold now, faint to come; one small line under
   it. In the card's top row, up to the corner's ×. */
.lqs-prog { display:flex; flex-direction:column; gap:7px; width:100%; box-sizing:border-box; padding:9px 44px 0 4px; }
.lqs-seg { display:flex; gap:4px; height:3px; }
.lqs-seg i { position:relative; flex:1 1 0; border-radius:3px; background:color-mix(in srgb, var(--ink) 12%, transparent); }
.lqs-seg i::after { content:""; position:absolute; inset:0; border-radius:inherit; transform-origin:0 50%; transform:scaleX(0); }
.lqs-seg i.was::after { transform:none; background:var(--jade); }
.lqs-seg i.now::after { transform:none; background:linear-gradient(90deg, rgba(var(--lhs-gold-rgb), .5), var(--lhs-gold)); box-shadow:0 0 9px rgba(var(--lhs-gold-rgb), .45); }
.lqs-seg.fwd i.just::after { animation:lqsFill .45s cubic-bezier(.3,.7,.2,1) both; }
.lqs-seg.fwd i.now::after { animation:lqsFill .55s .28s cubic-bezier(.3,.7,.2,1) both; }
@keyframes lqsFill { from { transform:scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .lqs-seg.fwd i::after, .lmm-seg.fwd i::after { animation:none; } }
.lqs-pk { display:block; min-width:0; font:600 9.5px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lqs-pk b { font-weight:700; color:var(--lhs-gold); }
.lqs-pk.ok { color:var(--jade); }
.lqs-pk .lfl-tick { display:inline-block; width:11px; height:11px; margin:0 5px 0 0; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
/* the two conditions, as two small chips under the question (2026-10-07: "sit or stand with straight spine", "dont breath
   forcefully"), their marks in the breath's own colour */
.lqs-cond { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:-3px 0 0; }
.lqs-cond span { display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 8px; border-radius:999px; font:500 12px/1.2 var(--body); white-space:nowrap;
  color:var(--ink-2); background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lqs-cond svg { flex:none; width:14px; height:14px; fill:none; stroke:color-mix(in srgb, var(--soma) 78%, var(--ink)); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* THE BUTTONS, worn as Left, Both and Right are on Now (the user, 2026-10-07: "with button theme same as the left, right and both"): raised
   discs lit from above, each with its colour at the rim, pressing in when touched; ivory on the day's paper. What a disc means is said
   under it. Side and flow carry the sides' two dots; the reach its count. */
.lqs-btns { display:grid; justify-items:center; align-items:start; gap:12px 8px; width:100%; padding:4px 0 2px; }
.lqs-btns.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.lqs-btns.two { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 10px; }
.lqs-btns.five { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px 4px; }
.lqs-b { --tone:var(--brass-hi); --disc:clamp(80px, 24vw, 100px); display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; max-width:100%; margin:0; padding:0;
  border:0; background:none; cursor:pointer; color:var(--ink); -webkit-tap-highlight-color:transparent; }
.lqs-btns.two .lqs-b { --disc:clamp(78px, 23vw, 92px); }
.lqs-btns.five .lqs-b { --disc:clamp(50px, 14.2vw, 58px); }
.lqs-disc { position:relative; display:grid; place-content:center; justify-items:center; gap:8px; width:var(--disc); height:var(--disc); border-radius:50%;
  font:600 14px/1.1 var(--body); letter-spacing:.01em; color:#F7F2E6; text-align:center;
  background:
    radial-gradient(110% 110% at 32% 18%, rgba(255,255,255,.26), rgba(255,255,255,0) 46%),
    radial-gradient(90% 70% at 50% 108%, color-mix(in srgb, var(--tone) 34%, transparent), transparent 70%),
    linear-gradient(180deg, #33303D 0%, #1E1C26 55%, #141219 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.32), inset 0 -4px 8px rgba(0,0,0,.5), 0 0 0 2px color-mix(in srgb, var(--tone) 62%, transparent),
    0 12px 20px -8px rgba(0,0,0,.9), 0 22px 40px -18px color-mix(in srgb, var(--tone) 70%, transparent);
  transition:transform .14s ease, box-shadow .2s ease, filter .2s ease; }
.lqs-disc b { font:inherit; color:inherit; }
.lqs-btns.two .lqs-disc { gap:7px; font-size:13.5px; line-height:1.15; }
.lqs-btns.five .lqs-disc { font:500 19px/1 var(--display); font-variant-numeric:tabular-nums lining-nums; }
.lqs-b:hover .lqs-disc { filter:brightness(1.08); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.36), inset 0 -4px 8px rgba(0,0,0,.5),
    0 0 0 2.5px color-mix(in srgb, var(--tone) 85%, transparent), 0 14px 24px -8px rgba(0,0,0,.9), 0 24px 46px -16px color-mix(in srgb, var(--tone) 85%, transparent); }
.lqs-b:active .lqs-disc { transform:translateY(3px) scale(.97); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 5px rgba(0,0,0,.55),
    0 0 0 2px color-mix(in srgb, var(--tone) 70%, transparent), 0 5px 10px -6px rgba(0,0,0,.9), 0 10px 20px -14px color-mix(in srgb, var(--tone) 60%, transparent); }
.lqs-b:focus-visible { outline:none; }
.lqs-b:focus-visible .lqs-disc { outline:2px solid var(--tone); outline-offset:4px; }
.lqs-b em { max-width:100%; font:400 11px/1.25 var(--body); font-style:normal; color:var(--dim); text-align:center; }
.lqs-btns.five .lqs-b em { font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lqs-b.on .lqs-disc { box-shadow:inset 0 1.5px 0 rgba(255,255,255,.36), inset 0 -4px 8px rgba(0,0,0,.5), 0 0 0 2.5px var(--tone), 0 0 0 7px color-mix(in srgb, var(--tone) 18%, transparent),
    0 14px 24px -8px rgba(0,0,0,.9); }
.lqs-b.is-done .lqs-disc { color:var(--jade); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3), inset 0 -4px 8px rgba(0,0,0,.5), 0 0 0 2.5px var(--jade),
    0 0 0 7px color-mix(in srgb, var(--jade) 18%, transparent), 0 14px 24px -8px rgba(0,0,0,.9); }
.lqs-b.is-done em { color:var(--jade); }
:root[data-theme="light"] .lqs-disc { color:#241D10;
  background:radial-gradient(110% 110% at 32% 18%, #FFFFFF, rgba(255,255,255,0) 50%), radial-gradient(90% 70% at 50% 108%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #FFFDF8 0%, #F4ECDC 60%, #E8DCC3 100%);
  box-shadow:inset 0 1.5px 0 #FFFFFF, inset 0 -4px 8px rgba(120,90,30,.2), 0 0 0 2px color-mix(in srgb, var(--tone) 70%, #8A6A12 15%),
    0 12px 20px -9px rgba(80,60,20,.5), 0 22px 36px -20px color-mix(in srgb, var(--tone) 60%, transparent); }
:root[data-theme="light"] .lqs-b.is-done .lqs-disc { color:#1E6B4E; box-shadow:inset 0 1.5px 0 #FFFFFF, inset 0 -4px 8px rgba(120,90,30,.2), 0 0 0 2.5px #2E8F69, 0 0 0 7px rgba(46,143,105,.16); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lqs-disc { color:#241D10;
    background:radial-gradient(110% 110% at 32% 18%, #FFFFFF, rgba(255,255,255,0) 50%), radial-gradient(90% 70% at 50% 108%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 70%),
      linear-gradient(180deg, #FFFDF8 0%, #F4ECDC 60%, #E8DCC3 100%);
    box-shadow:inset 0 1.5px 0 #FFFFFF, inset 0 -4px 8px rgba(120,90,30,.2), 0 0 0 2px color-mix(in srgb, var(--tone) 70%, #8A6A12 15%),
      0 12px 20px -9px rgba(80,60,20,.5), 0 22px 36px -20px color-mix(in srgb, var(--tone) 60%, transparent); }
  :root:not([data-theme="dark"]) .lqs-b.is-done .lqs-disc { color:#1E6B4E; box-shadow:inset 0 1.5px 0 #FFFFFF, inset 0 -4px 8px rgba(120,90,30,.2), 0 0 0 2.5px #2E8F69, 0 0 0 7px rgba(46,143,105,.16); }
}
/* their marks: the sides' two dots, as on Now; the flows' two dots at the flows' weights */
.lqs-disc i { flex:none; display:block; width:30px; height:12px; border-radius:6px; }
.lqs-b.n-ida i { background:radial-gradient(circle at 7px 6px, var(--soma) 0 4.6px, transparent 5px), radial-gradient(circle at 23px 6px, color-mix(in srgb, var(--ink) 14%, transparent) 0 4.6px, transparent 5px); }
.lqs-b.n-pingala i { background:radial-gradient(circle at 7px 6px, color-mix(in srgb, var(--ink) 14%, transparent) 0 4.6px, transparent 5px), radial-gradient(circle at 23px 6px, var(--sindoor) 0 4.6px, transparent 5px); }
.lqs-b.n-sushumna i, .lqs-b.f-even i { background:radial-gradient(circle at 7px 6px, var(--brass-hi) 0 4.6px, transparent 5px), radial-gradient(circle at 23px 6px, var(--brass-hi) 0 4.6px, transparent 5px); }
.lqs-b.f-left i { background:radial-gradient(circle at 7px 6px, var(--soma) 0 5.6px, transparent 6px), radial-gradient(circle at 23px 6px, color-mix(in srgb, var(--sindoor) 55%, transparent) 0 3px, transparent 3.4px); }
.lqs-b.f-right i { background:radial-gradient(circle at 7px 6px, color-mix(in srgb, var(--soma) 55%, transparent) 0 3px, transparent 3.4px), radial-gradient(circle at 23px 6px, var(--sindoor) 0 5.6px, transparent 6px); }
.lqs-b.f-flicker i { position:relative; background:none; }
.lqs-b.f-flicker i::before, .lqs-b.f-flicker i::after { content:""; position:absolute; top:1.4px; width:9.2px; height:9.2px; border-radius:50%; animation:lqsFlick 1.8s ease-in-out infinite; }
.lqs-b.f-flicker i::before { left:2.4px; background:var(--soma); }
.lqs-b.f-flicker i::after { left:18.4px; background:var(--sindoor); animation-delay:-.9s; }
@keyframes lqsFlick { 0%, 100% { opacity:1; } 50% { opacity:.18; } }
.lqs-b.is-done .lqs-disc i { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:color-mix(in srgb, var(--jade) 22%, transparent); }
.lqs-b.is-done .lqs-disc i::before, .lqs-b.is-done .lqs-disc i::after { content:none; }
.lqs-b.is-done .lqs-disc i .lfl-tick { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
/* THE FIGURE: the outline, its marks in the body's own fingers, the heart's line, and the hand */
/* room above and below the drawing (the user, 2026-10-07: "enhance the gap between the text sections and human body drawing above
   and below", "enhance the gap here more", "further enhance the gap of human drawing"); the drawing taller now that it is the control,
   its marks' discs sized to it (--mk) so neighbours never touch */
.lqs-fig { --fh:clamp(230px, 46vh, 360px); --mk:clamp(28px, calc(var(--fh) * .108), 40px); position:relative; flex:none; width:calc(var(--fh) * 340 / 408); max-width:100%;
  aspect-ratio:340 / 408; margin:36px auto 26px; }
@supports (height:1svh) { .lqs-fig { --fh:clamp(230px, 46svh, 360px); margin:clamp(28px, 5svh, 44px) auto clamp(20px, 3.5svh, 32px); } }
/* the smallest phones (568 px tall): the drawing a little shorter and its margins tighter, so the card fits with no scroll */
@media (max-height:600px) { .lqs-fig { --fh:clamp(210px, 41vh, 300px); margin:22px auto 14px; } }
@supports (height:1svh) { @media (max-height:600px) { .lqs-fig { --fh:clamp(210px, 41svh, 300px); margin:22px auto 14px; } } }
.lqs-svg { display:block; width:100%; height:100%; overflow:visible; }
.lqs-body { fill:color-mix(in srgb, var(--ink) 6%, transparent); }
.lqs-ol { fill:none; stroke:color-mix(in srgb, var(--ink) 58%, transparent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lqs-ft path { fill:none; stroke:color-mix(in srgb, var(--ink) 34%, transparent); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.lqs-lv { fill:none; stroke:rgba(var(--lhs-gold-rgb), .6); stroke-width:1.1; stroke-dasharray:3 4; }
.lqs-dot { fill:var(--lhs-gold); }
.lqs-hl { stroke:rgba(217,102,122,.55); stroke-dasharray:1.6 3.4; }
.lqs-hlt { font:700 8.6px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; fill:color-mix(in srgb, var(--ink) 55%, transparent); }
.lqs-heart { fill:#D9667A; } .lqs-hring { fill:none; stroke:rgba(217,102,122,.5); stroke-width:1.2; }
.lqs-br path { fill:none; stroke:color-mix(in srgb, var(--soma) 70%, #FFFFFF); stroke-width:1.7; stroke-linecap:round; stroke-dasharray:3 5; opacity:0; }
:root[data-theme="light"] .lqs-br path { stroke:#5E7FB0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lqs-br path { stroke:#5E7FB0; } }
.lqs-skin { fill:var(--lqs-skin); stroke:var(--lqs-skin-l); stroke-width:1.3; stroke-linejoin:round; }
.lqs-kn { fill:none; stroke:var(--lqs-skin-l); stroke-width:1.1; stroke-linecap:round; opacity:.7; }
.lqs-skin-s { stop-color:var(--lqs-skin); }
.lqs-arm { fill:url(#lqs-arm); }
.lqs-felt { fill:color-mix(in srgb, var(--jade) 70%, #FFFFFF); opacity:0; filter:blur(2.2px); }
.lqs-say { font:700 8.4px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; fill:color-mix(in srgb, var(--ink) 50%, transparent); }
.lqs-say.ok { fill:var(--jade); }
/* the marks' own buttons, on the figure at the end of each line */
.lqs-mk { position:absolute; left:85.9%; z-index:1; display:grid; place-items:center; width:var(--mk, 32px); height:var(--mk, 32px); margin:0 0 0 -3px; padding:0; border:0; border-radius:50%; cursor:pointer;
  transform:translateY(-50%); color:#F7F2E6; font:500 calc(var(--mk, 32px) * .44)/1 var(--display); font-variant-numeric:tabular-nums lining-nums;
  background:radial-gradient(110% 110% at 32% 18%, rgba(255,255,255,.24), rgba(255,255,255,0) 46%), linear-gradient(180deg, #33303D 0%, #1E1C26 55%, #141219 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 5px rgba(0,0,0,.5), 0 0 0 1.5px rgba(240,213,126,.62), 0 6px 12px -6px rgba(0,0,0,.8); -webkit-tap-highlight-color:transparent;
  transition:box-shadow .2s ease, background .2s ease, transform .15s ease; }
:root[data-theme="light"] .lqs-mk { color:#241D10; background:radial-gradient(110% 110% at 32% 18%, #FFFFFF, rgba(255,255,255,0) 50%), linear-gradient(180deg, #FFFDF8 0%, #F4ECDC 60%, #E8DCC3 100%);
  box-shadow:inset 0 1px 0 #FFFFFF, inset 0 -2px 5px rgba(120,90,30,.2), 0 0 0 1.5px rgba(138,106,18,.6), 0 6px 12px -7px rgba(80,60,20,.5); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lqs-mk { color:#241D10; background:radial-gradient(110% 110% at 32% 18%, #FFFFFF, rgba(255,255,255,0) 50%), linear-gradient(180deg, #FFFDF8 0%, #F4ECDC 60%, #E8DCC3 100%);
    box-shadow:inset 0 1px 0 #FFFFFF, inset 0 -2px 5px rgba(120,90,30,.2), 0 0 0 1.5px rgba(138,106,18,.6), 0 6px 12px -7px rgba(80,60,20,.5); }
}
.lqs-mk::before { content:""; position:absolute; inset:-6px; border-radius:50%; }
.lqs-mk:hover { box-shadow:inset 0 0 0 1.6px var(--lhs-gold), 0 0 0 4px rgba(var(--lhs-gold-rgb), .14); }
.lqs-mk:active { transform:translateY(-50%) scale(.93); }
.lqs-mk:focus-visible { outline:2px solid var(--lhs-gold); outline-offset:3px; }
.lqs-mk.on, .lqs-mk.is-done { color:#08130F; background:var(--jade); box-shadow:0 0 0 4px color-mix(in srgb, var(--jade) 24%, transparent); }
.lqs-mk.is-done i { display:none; }
.lqs-fig[data-demo="4"] .lqs-mk[data-lqs-reach="4"], .lqs-fig[data-demo="8"] .lqs-mk[data-lqs-reach="8"], .lqs-fig[data-demo="12"] .lqs-mk[data-lqs-reach="12"],
.lqs-fig[data-demo="16"] .lqs-mk[data-lqs-reach="16"] { box-shadow:inset 0 0 0 1.6px var(--lhs-gold), 0 0 0 5px rgba(var(--lhs-gold-rgb), .22), 0 0 16px rgba(var(--lhs-gold-rgb), .35); }
/* the offer: the element the finger-width showed, then the Mirror test's question */
.lqs-found { display:flex; flex-direction:column; align-items:center; gap:5px; width:100%; box-sizing:border-box; padding:12px 10px 11px; border-radius:18px;
  background:radial-gradient(120% 100% at 50% 0%, rgba(var(--lhs-gold-rgb), .12), transparent 70%), var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lqs-fel { font:400 30px/1.1 var(--display); letter-spacing:-.01em; color:var(--ink); }
.lqs-found.both .lqs-fel { font-size:22px; }
.lqs-found em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--dim); }
.lqs-found.e-agni .lqs-fel { color:#EC8C76; } .lqs-found.e-jala .lqs-fel { color:#9DB8E6; } .lqs-found.e-vayu .lqs-fel { color:#8FD0B8; }
.lqs-found.e-prithvi .lqs-fel { color:var(--lhs-gold); } .lqs-found.e-akasha .lqs-fel { color:#C3B5F0; }
:root[data-theme="light"] .lqs-found.e-agni .lqs-fel { color:#B8452B; } :root[data-theme="light"] .lqs-found.e-jala .lqs-fel { color:#2F5E9E; }
:root[data-theme="light"] .lqs-found.e-vayu .lqs-fel { color:#23795A; } :root[data-theme="light"] .lqs-found.e-akasha .lqs-fel { color:#5B48A6; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lqs-found.e-agni .lqs-fel { color:#B8452B; } :root:not([data-theme="dark"]) .lqs-found.e-jala .lqs-fel { color:#2F5E9E; }
  :root:not([data-theme="dark"]) .lqs-found.e-vayu .lqs-fel { color:#23795A; } :root:not([data-theme="dark"]) .lqs-found.e-akasha .lqs-fel { color:#5B48A6; }
}
.lqs-card .lmm-orow { margin-top:2px; }
/* the figure held still on the guide's own card (ui-lite-howto.js): the guide's art is dark by day too, so the night's inks */
.lht-c.fw .lht-art { height:250px; }
.lht-fw { --ink:#E6DFCE; --lqs-skin:#5C4E41; --lqs-skin-l:#CDB89D; --lhs-gold:#F2D98A; --lhs-gold-rgb:242, 217, 138; height:100%; aspect-ratio:340 / 408; padding:8px 0; box-sizing:border-box; }
.lht-fw .lqs-svg { width:auto; height:100%; }
/* the two steps over Left, Both and Right on the record card */
.lqs-prog.lqs-home { padding:2px 0 0; margin:0 0 12px; }
/* the two answers side by side at every width, each on one line (the user, 2026-10-07: "too lengthy to break the line") */
.lqs-card .lmm-orow { grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr); }
.lqs-card .lmm-orow .lmm-pill { order:0; }
.lqs-card .lmm-quiet, .lqs-card .lmm-pill { white-space:nowrap; }
.lqs-tk { display:inline-flex; align-items:center; gap:3px; margin-left:3px; padding:2px 6px 2px 3px; border-radius:999px; font:700 12px/1 var(--body); font-variant-numeric:tabular-nums;
  background:rgba(8, 19, 15, .16); }
.lqs-tk .ltk-badge { display:block; flex:none; }
.lqs-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:40px; }
.lqs-back { display:inline-flex; align-items:center; gap:4px; padding-left:6px; }
.lqs-back svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.lqs-snooze { font-size:12.5px; color:var(--dim); }
@media (max-width:360px) { .lqs-btns.five .lqs-b em { font-size:9.5px; } .lqs-card { padding:16px 12px 8px; } }
@media (prefers-reduced-motion: reduce) { .lqs-disc, .lqs-mk { transition:none; } .lqs-b.f-flicker i::before, .lqs-b.f-flicker i::after { animation:none; } .lqs-b.f-flicker i::after { opacity:.35; } }

/* =====================================================================================================================
   THE SKY DIAL — the drawer's face while it rests (ui-lite-skydial.js; the user, 2026-10-05, from the "Sky Dial" design).
   A wheel three quarters of the screen wide, its hub below the edge: the time band and the sky in one drawing, the pages band
   its own layer turned by a transform (the compositor's), the press the drawer's own key half risen at the centre, only its
   arrow. Dark translucent space throughout, in both themes; no backdrop filter. While a page scrolls it fades nearly away;
   while the drawer is up it steps down out of the way; at rest the drawer itself is out of sight. The swing and the bounce
   are single plays on the four-second beat.
   ===================================================================================================================== */
.lsd { display:none; }
html.lsd-on .lsd {
  display:block; position:fixed; z-index:61; left:50%; bottom:env(safe-area-inset-bottom, 0px);
  width:min(100vw, 430px, 86vh); aspect-ratio:390 / 118; translate:-50% 0; overflow:hidden;
  touch-action:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:opacity .3s ease, translate .32s cubic-bezier(.22,.9,.24,1);
}
@supports (height:1svh) { html.lsd-on .lsd { width:min(100vw, 430px, 86svh); } }
html.lsd-on .lsd.quiet { opacity:.2; }
html.lsd-on.litedrawer-half .lsd, html.lsd-on.litedrawer-open .lsd { opacity:0; translate:-50% 22px; pointer-events:none; }
html.lsd-on.lite-has-chart .litedrawer[data-state="peek"] { transform:translateY(100%); }
.lsd-svg { position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; pointer-events:none; }
.lsd-svg .lsd-tl { fill:#9C9585; font:500 7.2px var(--mono, ui-monospace, monospace); letter-spacing:.3px; }
/* the pages band: a square about the hub, turned whole */
.lsd-pages { position:absolute; left:13.3333%; top:22.8814%; width:73.3333%; aspect-ratio:1; pointer-events:none;
  transform-origin:50% 50%; transition:transform .34s cubic-bezier(.22,.9,.24,1.04); }
.lsd-pages.is-turning { transition:none; will-change:transform; }
.lsd-swing { position:absolute; inset:0; transform-origin:50% 50%; }
/* "slight but significant autorotation": a swing either way and back, now and then, until the person has turned it once */
.lsd-swing.swing { animation:lsdSwing 1.9s cubic-bezier(.33,.7,.3,1) 1; }
@keyframes lsdSwing { 0% { rotate:0deg; } 24% { rotate:-14deg; } 54% { rotate:9deg; } 78% { rotate:-3deg; } 100% { rotate:0deg; } }
.lsd-pages svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.lsd-pn { fill:#8E887A; font:600 8.2px var(--body); letter-spacing:1.6px; transition:fill .2s ease; }
.lsd-pn.on { fill:#EBCF7B; font-weight:700; }
/* the press: the drawer's own key, as the console's are made, half risen from the edge; its arrow only */
.lsd-well { position:absolute; left:50%; bottom:0; width:21.0256%; aspect-ratio:1; translate:-50% 50%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 72%, #0C0D12 0%, #050609 72%);
  box-shadow:inset 0 3px 5px rgba(0,0,0,.92), inset 0 -1px 1px rgba(255,255,255,.07), 0 1px 0 rgba(255,255,255,.04); }
.lsd-press { position:absolute; left:50%; bottom:0; width:17.9487%; aspect-ratio:1; translate:-50% 50%; margin:0; padding:0; border:0; border-radius:50%;
  cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 50% 28%, #2D313D 0%, #1D2029 46%, #13151C 100%);
  box-shadow:0 3px 4px rgba(0,0,0,.75), 0 1px 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.13), inset 0 -2px 4px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.035);
  transition:transform 70ms ease-out; }
.lsd-press::before { content:""; position:absolute; left:16%; right:16%; top:6%; height:40%; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 72%); }
.lsd-press svg { position:absolute; left:50%; top:12%; width:34%; height:34%; translate:-50% 0; fill:none; stroke:#F0D57E; stroke-width:2.3;
  stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 3px rgba(240,213,126,.4)); }
.lsd-press:active { transform:translateY(1.5px) scale(.97); }
.lsd-press:focus-visible { box-shadow:0 3px 4px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.13), 0 0 0 2px #F2D98A; }
/* "bouncing … slightly to indicate it is a drawer": a hop and a smaller one, now and then */
.lsd-press.bob { animation:lsdBob 1.25s cubic-bezier(.22,.9,.24,1) 1; }
@keyframes lsdBob { 0%, 100% { translate:-50% 50%; } 26% { translate:-50% 38%; } 52% { translate:-50% 50%; } 74% { translate:-50% 45%; } }
/* an eclipse in progress, named on the dial's shoulder */
.lsd-cap { position:absolute; left:1.6%; top:2%; max-width:44%; display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:6px; align-items:center;
  padding:4px 9px 5px 8px; border-radius:9px; background:rgba(9,10,15,.82); box-shadow:inset 0 0 0 .7px rgba(233,174,78,.42); pointer-events:none; }
.lsd-cap[hidden] { display:none; }
.lsd-cap i { width:5px; height:5px; border-radius:50%; background:#E9AE4E; }
.lsd-cap i.lunar { background:#C8673C; }
.lsd-cap b { font:700 9.5px/1.2 var(--body); color:#E9E3D4; white-space:nowrap; }
.lsd-cap em { grid-column:1 / -1; font:500 8.5px/1.25 var(--body); font-style:normal; color:#9C9585; }
/* turning the pages band: the pages dim so the dial reads clearly; the page chosen comes up out of the dimming (the user,
   2026-10-05: "smooth and without any lag") — opacity only, on its own layer while it moves */
html.lsd-on #lhs-pager { transition:height .32s cubic-bezier(.22,.9,.24,1), opacity .36s cubic-bezier(.25,.8,.3,1); }
html.lsd-on #lhs-rail { transition:opacity .36s cubic-bezier(.25,.8,.3,1); }
html.lsd-turning #lhs-pager, html.lsd-turning #lhs-rail { opacity:.16; transition-duration:.32s, .16s; }
html.lsd-turning #lhs-rail { transition-duration:.16s; }
html.lsd-turning #lhs-pager, html.lsd-turning #lhs-rail, html.lsd-landing #lhs-pager, html.lsd-landing #lhs-rail { will-change:opacity; }
@media (prefers-reduced-motion: reduce) {
  html.lsd-on .lsd, .lsd-pages, .lsd-press, html.lsd-on #lhs-pager, html.lsd-on #lhs-rail { transition:none; }
  .lsd-swing.swing, .lsd-press.bob { animation:none; }
}
/* ---- THE CORNER: phones and tablets (the user, 2026-10-07; ui-lite-skydial.js lsdGeo, html.lsd-corner) ----------------------------
   The wheel in a square box in the bottom-right corner, its hub 66 of 240 in from both edges (72.5%), the drawing turned -45 degrees
   about it: the ring runs from the bottom edge to the right edge, symmetric about the diagonal, the mark on the diagonal. The press a
   whole disc on the hub, its arrow at its centre. Only the wheel itself takes a touch; the box's empty corners pass it through. */
html.lsd-on.lsd-corner .lsd { left:auto; right:env(safe-area-inset-right, 0px); width:min(56.41vw, 243px); aspect-ratio:1; translate:0 0; pointer-events:none; }
@supports (height:1svh) { html.lsd-on.lsd-corner .lsd { width:min(56.41vw, 243px, 38.5svh); } }
html.lsd-on.lsd-corner.litedrawer-half .lsd, html.lsd-on.lsd-corner.litedrawer-open .lsd { translate:0 22px; }
html.lsd-corner .lsd-svg [data-lsd-hit] { pointer-events:auto; }
/* the hub 172 of 220 in (78.18%): the ring nearer the corner, under the thumb (the user, 2026-10-07) */
html.lsd-corner .lsd-pages { left:13.1818%; top:13.1818%; width:130%; }
html.lsd-corner .lsd-well { left:78.1818%; top:78.1818%; bottom:auto; width:40.9091%; translate:-50% -50%; }
html.lsd-corner .lsd-press { left:78.1818%; top:78.1818%; bottom:auto; width:36.3636%; translate:-50% -50%; pointer-events:auto; }   /* 80 of 220: a size up (the user, 2026-10-07) */
html.lsd-corner .lsd-press::before { top:8%; height:42%; }
html.lsd-corner .lsd-press svg { top:50%; translate:-50% -58%; width:36%; height:36%; }
/* the Kaalchakra mark on the press (2026-10-07): in the risen half on the desktop, whole at the centre in the corner */
.lsd-press svg.lsd-mark { top:7%; width:40%; height:40%; stroke:none; color:#F0D57E; filter:drop-shadow(0 0 3px rgba(240,213,126,.35)); }
html.lsd-corner .lsd-press svg.lsd-mark { top:50%; translate:-50% -50%; width:54%; height:54%; }
html.lsd-corner .lsd-press.bob { animation-name:lsdBobC; }
@keyframes lsdBobC { 0%, 100% { translate:-50% -50%; } 26% { translate:-50% -62%; } 52% { translate:-50% -50%; } 74% { translate:-50% -55%; } }
html.lsd-corner .lsd-cap { left:4%; top:4%; max-width:70%; }

/* =====================================================================================================================
   THE DRAWER ON THE HOME'S OWN GROUND (the user, 2026-10-05: "make the drawer bg too like the homepage theme (dark
   greyish)"). The misted glass of 2026-09-21 read lighter and warmer than the page it rose over: the blurred page and
   the white haze lifted it to #1D1D1F-#2E2C29 against the home's #08090C. The sheet is now the page's own ground
   (--ground, in either theme), so the drawer and the home are one surface. The fine grain of 2026-09-22 stays, fainter,
   so it textures the ground without lifting it; the white haze goes; under an opaque ground no backdrop blur is drawn
   (faster too). The gold hairline along the top edge, the shadow above it and the studio's stage glows stay.
   ===================================================================================================================== */
:root.lite-app.lite-has-chart .litedrawer {
  --dr-glass:linear-gradient(180deg, var(--ground), var(--ground));
  --dr-mist:linear-gradient(transparent, transparent);
  --dr-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"].lite-app.lite-has-chart .litedrawer {
  --dr-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]).lite-app.lite-has-chart .litedrawer {
    --dr-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}
:root.lite-app.lite-has-chart .litedrawer::before,
:root.lite-app.lite-has-chart .litedrawer:is([data-mode="align"],[data-mode="predict"])::before { -webkit-backdrop-filter:none; backdrop-filter:none; }

/* =====================================================================================================================
   THE WIDE SCREEN WITH THE SKY DIAL (the user, 2026-10-05: "on the desktop screen the main dial seems shifted slightly upwards
   breaking the symmetry of the page. arrange everything in a well-structured symmetry. Also check on tab devices" and "enhance the
   separation of the right side card column from the semicircular dial on the desktop"). The dial sat at the top of its band (the
   plate area is a column, its dial at the column's head) while the cards beside it ran on below. Now, wherever the two columns
   stand (from 980px wide, the screen at least 5:4): the dial and the cards are both centred on one line, the full height from the
   header's foot to the screen's foot; the dial is sized to leave the sky dial its own room beneath it (twice the peek and a
   gap); and the sky dial stands under the dial, centred on it (--lsd-x, measured by ui-lite-skydial.js lsdPlace), so the
   column of cards has nothing under it and stands well apart. Phones and tablets held upright keep the one column.
   ===================================================================================================================== */
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  html.lsd-on.lhs-on.lite-has-chart body { padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
  :root:not([data-demo]).lsd-on.lhs-on.lite-has-chart .stage .platearea { height:calc(100svh - var(--lite-head, 72px)); justify-content:center; }
  html.lsd-on.lhs-on.lite-has-chart .lhs-col { min-height:calc(100svh - var(--lite-head, 72px)); }
  :root:not([data-demo]).lsd-on.lhs-on.lite-has-chart .stage .dialbox svg,
  :root:not([data-demo]).lsd-on.lhs-on.lite-has-chart .stage .dialbox svg:is(*) {
    width:min(100%, calc(100svh - var(--lite-head, 72px) - 2 * var(--lite-peek, 72px) - 40px), 1000px) !important; }
  :root:not([data-demo]).lsd-on.lhs-on.lite-has-chart .stage {
    grid-template-columns:minmax(0, min(calc(100svh - var(--lite-head, 72px) - 2 * var(--lite-peek, 72px) - 40px), 1000px)) minmax(340px, 420px); }
  html.lsd-on .lsd { left:var(--lsd-x, 50%); }
}

/* =====================================================================================================================
   WHAT MAHAKAAL SAYS (ui-lite-mahakaal.js; EXPERIMENTAL; the user, 2026-10-05): the pill on every breath card where the Quick |
   Detailed switch was, the key beside the wallet with the tripund for its sign, and the message sheet, "brief and direct ...
   in a glance within a beautiful message design"; version 2 (2026-10-06) in the app's own colours, Night and Day, its reading in
   folds, and the invitation with the website's Shiva on the Mahakaal disc. The pill takes the card's own theme.
   ===================================================================================================================== */
.lmk-tri { width:20px; height:20px; fill:none; stroke:#EDE6D6; stroke-width:2.1; stroke-linecap:round; }
.lmk-tri circle { fill:#D9452B; stroke:none; filter:drop-shadow(0 0 2px rgba(217,69,43,.65)); }

/* ---- the pill ---- */
.lmk-pill { flex:none; display:inline-flex; align-items:center; gap:7px; height:34px; margin:0; padding:0 11px 0 4px; border:0; border-radius:999px; cursor:pointer;
  font:600 12px/1 var(--body); letter-spacing:.01em; color:#F2EDE2; white-space:nowrap; -webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.015)), #141319;
  box-shadow:inset 0 0 0 1px rgba(242,217,138,.42), 0 8px 18px -12px rgba(0,0,0,.9); transition:transform 90ms ease-out, box-shadow .2s ease; }
.lmk-pmark { display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 50% 32%, #2B2833, #111015); box-shadow:inset 0 0 0 1px rgba(242,217,138,.32); }
.lmk-pmark .lmk-tri { width:19px; height:19px; }
.lmk-pcost { margin-left:1px; padding:3px 6px; border-radius:999px; font:700 10.5px/1 var(--mono, monospace); font-style:normal; color:#1B1406; background:#F2D98A; }
.lmk-pill:not(:disabled):hover { box-shadow:inset 0 0 0 1px rgba(242,217,138,.7), 0 8px 18px -12px rgba(0,0,0,.9); }
.lmk-pill:not(:disabled):active { transform:scale(.97); }
.lmk-pill:focus-visible { outline:2px solid #F2D98A; outline-offset:2px; }
.lmk-pill:disabled { cursor:default; opacity:.45; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
/* the Test Subject: every way to Mahakaal drawn shut, as its breath buttons are (a tap says why: ui-lite-mahakaal.js lmkDemoSay) */
.lmk-pill.lmk-demo-off { cursor:default; opacity:.45; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.lmk-demo-off { opacity:.45; cursor:default; }
:root[data-theme="light"] .lmk-pill { color:#2C2410; background:linear-gradient(180deg, #FFFFFF, #FBF6EA); box-shadow:inset 0 0 0 1px rgba(150,110,18,.45), 0 8px 18px -14px rgba(60,40,10,.35); }
:root[data-theme="light"] .lmk-pill .lmk-pmark { background:radial-gradient(circle at 50% 32%, #34303B, #18161D); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lmk-pill { color:#2C2410; background:linear-gradient(180deg, #FFFFFF, #FBF6EA); box-shadow:inset 0 0 0 1px rgba(150,110,18,.45), 0 8px 18px -14px rgba(60,40,10,.35); }
  :root:not([data-theme="dark"]) .lmk-pill .lmk-pmark { background:radial-gradient(circle at 50% 32%, #34303B, #18161D); }
}

/* ---- the key beside the wallet, as the console's keys are made ---- */
/* the two keys in two equal halves that never spill past the drawer (the user, 2026-10-05: "both wallet and Mahakaal texts are
   overflowing in this mobile device screens size"); the wallet's figures stay on one line where its half has room, and fold onto
   two under its key where it has not ("WALLET · 150", then "+10 today") */
.lhc-keys { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:start; justify-items:center; column-gap:clamp(6px, 3vw, 22px);
  width:min(100%, 420px); margin:0 auto; }
.lhc-keys:has(> #lmk-drawer-key[hidden]), .lhc-keys:has(> #lbt-drawer-key[hidden]) { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.lhc-keys:has(> #lmk-drawer-key[hidden]):has(> #lbt-drawer-key[hidden]) { grid-template-columns:minmax(0, 1fr); }
.lhc-keys > .lhc-wrow { width:100%; min-width:0; container-type:inline-size; }
.lhc-keys .lhc-wal { max-width:100%; }
/* the row stands where the wallet's row stood: the drawer's measure, both keys level (the wallet's own top margin dropped), and on a
   phone on its side the wallet's grid place */
.lhc-keys > .ltk-dwrow { margin-top:0; }
.lite-has-chart .litedrawer .liteacts > .lhc-keys { max-width:min(100%, 400px); box-sizing:border-box; }
@media (orientation:landscape) and (max-height:500px) {
  .lite-has-chart .litedrawer .liteacts > .lhc-keys { grid-area:wal; align-self:start; }
}
.lhc-keys .lhc-wl { flex-wrap:wrap; white-space:normal; row-gap:5px; }
.lhc-keys .lhc-wl b + i { display:none; }
.lhc-keys .lhc-wl em, .lhc-keys .lhc-wl .lhc-wp { flex-basis:100%; text-align:center; }
@container (min-width: 214px) {
  .lhc-keys .lhc-wl { flex-wrap:nowrap; white-space:nowrap; }
  .lhc-keys .lhc-wl b + i { display:inline; }
  .lhc-keys .lhc-wl em, .lhc-keys .lhc-wl .lhc-wp { flex-basis:auto; }
}
.lhc-cap.lmk-cap > svg.lmk-tri { width:calc(30 * var(--u)); height:calc(30 * var(--u)); fill:none; stroke:#EDE6D6; stroke-width:2.1; filter:none; }
.lhc-cap.lmk-cap > svg.lmk-tri circle { fill:#D9452B; stroke:none; }
.lmk-key { position:relative; }
/* Breath Tap's key (2026-10-07): the microphone on the console's cap; shut with the turn */
.lbt-key { position:relative; }
.lhc-cap.lbt-cap > svg { width:calc(22 * var(--u)); height:calc(22 * var(--u)); }
.lbt-key.is-shut { opacity:.45; }
.lmk-exp { margin-top:calc(4 * var(--u)); padding:3px 7px; border-radius:999px; font:700 7.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase;
  color:#C9C1F2; background:rgba(160,147,219,.12); box-shadow:inset 0 0 0 1px rgba(160,147,219,.5); }

/* ---- the sheet and the invitation: the studio's own colours, in both themes (the user, 2026-10-06: "overlay theme should be just
   like the web app theme"); the medal, the folds' icons and Shiva's disc stay the drawer key's dark cap in both, as the pill's mark does ---- */
.lmk-wrap, .lmk-inv {
  --lmk-ink:#EEE8D8; --lmk-ink2:#C2BCCB; --lmk-dim:#8E89A3; --lmk-gold:#F2D98A; --lmk-gold-rgb:242, 217, 138;
  --lmk-panel:linear-gradient(180deg, #1B1C22 0%, #121318 60%); --lmk-panel-end:#121318; --lmk-card:rgba(255,255,255,.035);
  --lmk-line:rgba(255,255,255,.075); --lmk-line2:rgba(255,255,255,.13); --lmk-well:rgba(255,255,255,.045); --lmk-deep:rgba(0,0,0,.2);
  --lmk-ida:#A093DB; --lmk-ping:#EC7760; --lmk-good:#62C19E; --lmk-good-ink:#0E2A1F; --lmk-heavy:#EC7760; --lmk-light:#A093DB; --lmk-dayc:#E2C46C;
  --lmk-cap:radial-gradient(circle at 50% 28%, #2D313D 0%, #1D2029 46%, #13151C 100%);
  --lmk-cap-sh:0 3px 4px rgba(0,0,0,.75), 0 1px 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.13), inset 0 -2px 4px rgba(0,0,0,.5);
  --lmk-veil:rgba(3,3,6,.66); --lmk-glow:rgba(242,190,90,.30); --lmk-ghost:rgba(255,255,255,.055); --lmk-chip:#C9C1F2; --lmk-chipline:rgba(160,147,219,.6);
}
:root[data-theme="light"] .lmk-wrap, :root[data-theme="light"] .lmk-inv {
  --lmk-ink:#221F27; --lmk-ink2:#4E4955; --lmk-dim:#857E8B; --lmk-gold:#8A6A12; --lmk-gold-rgb:150, 110, 18;
  --lmk-panel:linear-gradient(180deg, #FFFDF8 0%, #F7F1E5 70%); --lmk-panel-end:#F7F1E5; --lmk-card:#FFFFFF;
  --lmk-line:rgba(40,30,60,.09); --lmk-line2:rgba(40,30,60,.16); --lmk-well:rgba(40,30,60,.045); --lmk-deep:rgba(40,30,60,.05);
  --lmk-ida:#6A59B0; --lmk-ping:#C4472E; --lmk-good:#2E8F69; --lmk-good-ink:#FFFFFF; --lmk-heavy:#C4472E; --lmk-light:#6A59B0; --lmk-dayc:#A88418;
  --lmk-veil:rgba(60,48,30,.38); --lmk-glow:rgba(201,162,39,.30); --lmk-chip:#4E3FA0; --lmk-chipline:rgba(106,89,176,.45);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lmk-wrap, :root:not([data-theme="dark"]) .lmk-inv {
    --lmk-ink:#221F27; --lmk-ink2:#4E4955; --lmk-dim:#857E8B; --lmk-gold:#8A6A12; --lmk-gold-rgb:150, 110, 18;
    --lmk-panel:linear-gradient(180deg, #FFFDF8 0%, #F7F1E5 70%); --lmk-panel-end:#F7F1E5; --lmk-card:#FFFFFF;
    --lmk-line:rgba(40,30,60,.09); --lmk-line2:rgba(40,30,60,.16); --lmk-well:rgba(40,30,60,.045); --lmk-deep:rgba(40,30,60,.05);
    --lmk-ida:#6A59B0; --lmk-ping:#C4472E; --lmk-good:#2E8F69; --lmk-good-ink:#FFFFFF; --lmk-heavy:#C4472E; --lmk-light:#6A59B0; --lmk-dayc:#A88418;
    --lmk-veil:rgba(60,48,30,.38); --lmk-glow:rgba(201,162,39,.30); --lmk-chip:#4E3FA0; --lmk-chipline:rgba(106,89,176,.45);
  }
}

/* ---- the sheet: it scrolls with no bar showing (the user, 2026-10-06: "hide the vertical scroll bar but page still should be properly
   scrolled"), its last lines fading under the edge ---- */
.lmk-wrap { position:fixed; inset:0; z-index:9600; display:flex; align-items:flex-end; justify-content:center; background:var(--lmk-veil);
  opacity:0; transition:opacity .24s ease; -webkit-tap-highlight-color:transparent; }
.lmk-wrap.in { opacity:1; }
.lmk-sheet { position:relative; display:flex; flex-direction:column; width:min(100%, 560px); max-height:min(92svh, 900px); overflow:hidden; border-radius:28px 28px 0 0;
  color:var(--lmk-ink); font-family:var(--body); background:var(--lmk-panel);
  box-shadow:inset 0 1px 0 rgba(var(--lmk-gold-rgb), .28), 0 -24px 60px -24px rgba(0,0,0,.6); transform:translateY(16px); transition:transform .3s cubic-bezier(.22,.9,.24,1); }
.lmk-sheet::before { content:""; flex:none; display:block; width:44px; height:5px; margin:10px auto 0; border-radius:3px; background:rgba(var(--lmk-gold-rgb), .55); }
.lmk-sheet::after { content:""; position:absolute; left:0; right:0; bottom:0; height:30px; background:linear-gradient(rgba(0,0,0,0), var(--lmk-panel-end)); pointer-events:none; }
.lmk-wrap.in .lmk-sheet { transform:none; }
.lmk-hd { flex:none; display:grid; grid-template-columns:auto minmax(0, 1fr) 40px; align-items:center; gap:12px; padding:10px 16px 12px; }
.lmk-medal { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--lmk-cap); box-shadow:var(--lmk-cap-sh); }
.lmk-medal .lmk-tri { width:29px; height:29px; }
.lmk-ttl { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
/* the name as every Mahakaal label wears it, Marcellus in gold capitals, spaced (the user, 2026-10-09: "use the same font for mahakaal in
   chat bot header where mahakaal experimental is written"), sized for the head */
.lmk-ttl b { display:flex; align-items:center; gap:10px; font:400 16.5px/1.1 var(--mark, 'Marcellus', serif); letter-spacing:.24em; text-transform:uppercase; color:var(--lmk-gold); }
.lmk-ttl em { padding:4px 7px; border-radius:999px; font:700 8.5px/1 var(--body); font-style:normal; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lmk-chip); background:rgba(160,147,219,.1); box-shadow:inset 0 0 0 1px var(--lmk-chipline); }
.lmk-hwhen { font:500 12px/1.3 var(--body); color:var(--lmk-dim); }
.lmk-x { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; cursor:pointer; color:#CFC8B8; background:var(--lmk-cap); box-shadow:var(--lmk-cap-sh); }
.lmk-x svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.lmk-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; -ms-overflow-style:none;
  padding:2px 14px max(34px, env(safe-area-inset-bottom)); transition:opacity .22s ease; }
.lmk-body::-webkit-scrollbar { display:none; width:0; height:0; }
.lmk-body.fade { opacity:0; }
/* version 1's message, for a reading kept from before the update */
.lmk-when { margin:0 0 6px; font:500 11.5px/1.3 var(--body); letter-spacing:.04em; color:var(--lmk-dim); }
.lmk-head { margin:0 0 6px; font:600 22px/1.2 var(--display); letter-spacing:-.01em; color:var(--lmk-ink); text-wrap:balance; }
.lmk-part { padding:12px 0 10px; }
.lmk-part + .lmk-part { box-shadow:inset 0 1px 0 var(--lmk-line); }
.lmk-part h4 { display:flex; align-items:center; gap:7px; margin:0 0 6px; font:700 10.5px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--lmk-gold); }
.lmk-pi { display:grid; place-items:center; width:16px; height:16px; }
.lmk-pi svg { width:15px; height:15px; fill:none; stroke:var(--lmk-gold); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lmk-part p { margin:0; font:400 15px/1.55 var(--body); color:var(--lmk-ink2); }
.lmk-part.k-body p { font-size:14px; color:var(--lmk-dim); }
.lmk-part.k-wants p { color:var(--lmk-ink); }
.lmk-link { margin:8px 0 0; padding:0; border:0; background:none; cursor:pointer; font:600 13px/1.3 var(--body); color:var(--lmk-gold); }
.lmk-link.quiet { color:var(--lmk-dim); font-weight:500; }
.lmk-close { margin:12px 0 0; padding-top:12px; box-shadow:inset 0 1px 0 var(--lmk-line); font:500 15px/1.5 var(--body); color:var(--lmk-gold); }
.lmk-foot { margin:12px 4px 0; font:400 11.5px/1.45 var(--body); color:var(--lmk-dim); }
/* the first open after a check: asked first, never taken by surprise */
.lmk-pay { display:grid; gap:14px; padding:6px 0 4px; }
.lmk-say { margin:0; font:400 15.5px/1.55 var(--body); color:var(--lmk-ink2); }
.lmk-terms { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.lmk-terms li { display:flex; align-items:center; gap:9px; font:400 13.5px/1.4 var(--body); color:var(--lmk-ink2); }
.lmk-terms li::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--lmk-gold); }
.lmk-terms b { color:var(--lmk-ink); font-weight:600; }
.lmk-go { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; border:0; border-radius:16px; cursor:pointer;
  font:700 15px/1 var(--body); color:#1B1406; background:linear-gradient(180deg, #F8E9B8 0%, #EFD489 46%, #D6B24A 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 14px 28px -16px rgba(214,178,74,.85); }
.lmk-go .ltk-badge, .lmk-inv-go .ltk-badge { display:block; flex:none; filter:drop-shadow(0 1px 1px rgba(60,40,6,.35)); }
.lmk-coin { font-family:var(--mono, monospace); }
.lmk-short { margin:0; padding:10px 12px; border-radius:14px; font:400 13px/1.45 var(--body); color:var(--lmk-heavy); background:rgba(236,119,96,.08); box-shadow:inset 0 0 0 1px rgba(236,119,96,.35); }
/* the last reading held? */
.lmk-held { display:grid; gap:10px; padding:6px 0 4px; }
.lmk-held .lmk-k { margin:0; font:700 10.5px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--lmk-dim); }
.lmk-held blockquote { margin:0; padding:2px 0 2px 12px; box-shadow:inset 2px 0 0 var(--lmk-gold); font:400 15px/1.5 var(--body); color:var(--lmk-ink2); }
.lmk-q { margin:4px 0 0; font:600 16px/1.3 var(--display); color:var(--lmk-ink); }
.lmk-hrow { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.lmk-hrow button { min-height:44px; padding:8px 4px; border:0; border-radius:14px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font:600 14px/1 var(--body); color:var(--lmk-ink); background:var(--lmk-well); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .3); }
.lmk-hrow .lmk-tk { margin-left:0; }
.lmk-hrow button:active { transform:scale(.97); }

/* ---- version 2: the reading in folds (draft 5) ---- */
.lmk-r { display:flex; flex-direction:column; gap:12px; }
.lmk-r > * { flex-shrink:0; }
.lmk-lead { border-radius:22px; padding:16px 16px 14px; display:flex; flex-direction:column; gap:12px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(var(--lmk-gold-rgb), .12), rgba(var(--lmk-gold-rgb), 0) 62%), var(--lmk-card); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .22); }
.lmk-lead > p { margin:0; font:400 16px/1.5 var(--body); color:var(--lmk-ink); }
.lmk-rows { display:flex; flex-direction:column; gap:8px; padding-top:11px; border-top:1px solid var(--lmk-line); }
.lmk-lr { display:grid; grid-template-columns:66px minmax(0, 1fr); gap:10px; align-items:baseline; font:500 14px/1.4 var(--body); color:var(--lmk-ink); }
.lmk-lr > span { font:700 10px/1.6 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--lmk-dim); }
.lmk-lr .lmk-t { margin-right:7px; font-size:13px; }
.lmk-t { font:600 12px/1 var(--mono, monospace); color:var(--lmk-gold); white-space:nowrap; }
.lmk-dot { display:inline-block; width:9px; height:9px; margin-right:8px; border-radius:50%; background:var(--lmk-ping); box-shadow:0 0 0 3px rgba(236,119,96,.18); vertical-align:1px; }
.lmk-since { border-radius:18px; padding:13px 14px; display:flex; flex-direction:column; gap:8px; background:var(--lmk-card); box-shadow:inset 0 0 0 1px var(--lmk-line); }
.lmk-since h4 { margin:0; font:700 10.5px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--lmk-gold); }
.lmk-since ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.lmk-since li { position:relative; padding-left:15px; font:400 14px/1.5 var(--body); color:var(--lmk-ink2); }
.lmk-since li::before { content:""; position:absolute; left:1px; top:.62em; width:5px; height:5px; border-radius:50%; background:rgba(var(--lmk-gold-rgb), .7); }
.lmk-now { margin:2px 0 0; font:600 14px/1.4 var(--body); color:var(--lmk-ink); }
/* the folds */
.lmk-folds { border-radius:20px; overflow:hidden; background:var(--lmk-card); box-shadow:inset 0 0 0 1px var(--lmk-line); }
.lmk-f + .lmk-f { border-top:1px solid var(--lmk-line); }
.lmk-f > summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:32px minmax(0, 1fr) auto 16px; align-items:center; gap:11px; padding:13px 14px; -webkit-tap-highlight-color:transparent; }
.lmk-f > summary::-webkit-details-marker, .lmk-why > summary::-webkit-details-marker, .lmk-feel summary::-webkit-details-marker { display:none; }
.lmk-fi { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--lmk-cap); box-shadow:var(--lmk-cap-sh); }
.lmk-fi svg { width:16px; height:16px; fill:none; stroke:#F0D57E; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.lmk-ft { font:600 14.5px/1.25 var(--body); color:var(--lmk-ink); }
.lmk-fs { max-width:132px; font:500 12px/1.3 var(--body); color:var(--lmk-dim); text-align:right; }
.lmk-chev { width:16px; height:16px; fill:none; stroke:var(--lmk-dim); stroke-width:2; stroke-linecap:round; transition:transform .2s ease; }
.lmk-f[open] > summary .lmk-chev { transform:rotate(180deg); }
.lmk-fb { padding:0 14px 16px; display:flex; flex-direction:column; gap:10px; }
.lmk-fb > * { flex-shrink:0; }
/* "Why": every reason, the "not" times and the sources in a fold of their own */
.lmk-why > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:4px 0; font:600 12.5px/1 var(--body); color:var(--lmk-gold); }
.lmk-why > summary svg, .lmk-feel summary > i svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; transition:transform .18s; }
.lmk-why[open] > summary svg, .lmk-feel details[open] summary > i svg { transform:rotate(180deg); }
.lmk-wb { margin-top:6px; padding:10px 11px; border-radius:11px; display:flex; flex-direction:column; gap:7px; background:var(--lmk-deep); font:400 13px/1.5 var(--body); color:var(--lmk-ink2); }
.lmk-wb p { margin:0; }
.lmk-wb b { color:var(--lmk-ink); font-weight:600; }
.lmk-src { font:500 11px/1.45 var(--body); color:var(--lmk-dim); }
/* today's dos and don'ts */
.lmk-way { border-radius:14px; padding:11px 12px; }
.lmk-way > b { display:block; margin-bottom:7px; font:600 13.5px/1.3 var(--body); }
.lmk-way ul { margin:0; padding-left:17px; display:flex; flex-direction:column; gap:5px; font:400 13.5px/1.5 var(--body); color:var(--lmk-ink2); }
.lmk-way.bad { background:rgba(236,119,96,.07); box-shadow:inset 0 0 0 1px rgba(236,119,96,.28); } .lmk-way.bad > b { color:var(--lmk-heavy); }
.lmk-way.good { background:rgba(98,193,158,.07); box-shadow:inset 0 0 0 1px rgba(98,193,158,.32); } .lmk-way.good > b { color:var(--lmk-good); }
.lmk-r [data-cut-on] { display:none; }
.lmk-r.cut [data-cut-on] { display:revert; }
.lmk-r.cut [data-cut-off] { display:none; }
.lmk-plain { margin:0; font:400 14px/1.5 var(--body); color:var(--lmk-ink); }
.lmk-care { margin:0; font:400 12px/1.45 var(--body); color:var(--lmk-dim); }
/* how you may be feeling */
.lmk-guess { margin:0; display:flex; flex-direction:column; gap:3px; }
.lmk-guess span { font:500 12px/1.3 var(--body); color:var(--lmk-dim); }
.lmk-guess b { font:600 20px/1.25 var(--display); letter-spacing:-.005em; color:var(--lmk-ink); }
.lmk-map { display:block; width:100%; height:auto; }
.lmk-mbox { fill:var(--lmk-well); stroke:var(--lmk-line2); }
.lmk-max { stroke:var(--lmk-line2); stroke-dasharray:3 4; }
.lmk-mlab { fill:var(--lmk-dim); font:600 9px var(--body); letter-spacing:.08em; }
.lmk-mq { fill:var(--lmk-ink2); font:500 10px var(--body); opacity:.85; }
.lmk-mtr { fill:none; stroke:rgba(var(--lmk-gold-rgb), .55); stroke-width:1.5; stroke-dasharray:2 4; stroke-linecap:round; }
.lmk-mpast { fill:var(--lmk-panel-end); stroke:rgba(var(--lmk-gold-rgb), .7); stroke-width:1.5; }
.lmk-mt { fill:var(--lmk-dim); font:500 8.5px var(--mono, monospace); }
.lmk-mnow { fill:var(--lmk-ping); stroke:var(--lmk-panel-end); stroke-width:2; }
.lmk-mglow { fill:rgba(236,119,96,.2); }
.lmk-mnt { fill:var(--lmk-ink); font:700 9.5px var(--body); }
.lmk-feel { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
.lmk-feel details { border-radius:12px; background:var(--lmk-well); }
.lmk-feel summary { list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:9px 10px; }
.lmk-feel summary b { font:600 14px/1.35 var(--body); color:var(--lmk-ink); }
.lmk-feel summary > i { flex:none; display:inline-flex; align-items:center; gap:3px; font:600 11.5px/1.5 var(--body); font-style:normal; color:var(--lmk-gold); }
.lmk-feel .lmk-wb { margin:0 8px 8px; }
.lmk-mk { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--lmk-heavy); vertical-align:1px; }
.lmk-feel .up .lmk-mk { background:var(--lmk-light); }
.lmk-ask { display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:14px; background:var(--lmk-well); }
.lmk-ask > span { font:600 13.5px/1.3 var(--body); color:var(--lmk-ink); }
.lmk-ask .lmk-sub { font:500 12px/1.3 var(--body); color:var(--lmk-dim); }
.lmk-seg3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.lmk-seg3 button, .lmk-chip { min-height:38px; border:0; border-radius:11px; cursor:pointer; font:600 13px/1 var(--body); color:var(--lmk-ink2); background:var(--lmk-card); box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.lmk-chips { display:flex; flex-wrap:wrap; gap:6px; }
.lmk-chip { min-height:32px; padding:0 11px; border-radius:999px; font-size:12.5px; }
.lmk-seg3 button.on, .lmk-chip.on { color:var(--lmk-good-ink); background:var(--lmk-good); box-shadow:none; }
.lmk-said, .lmk-wnote { margin:0; display:flex; align-items:center; gap:7px; font:500 12.5px/1.4 var(--body); color:var(--lmk-good); }
.lmk-said[hidden], .lmk-wnote:empty { display:none; }
.lmk-said svg, .lmk-wnote svg { flex:none; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lmk-help { margin:0; font:400 13.5px/1.5 var(--body); color:var(--lmk-ink2); }
.lmk-help b { color:var(--lmk-gold); font-weight:600; }
/* the answers' Swara tokens: the count under the lead, the amount on each answer's buttons (as the check cards show theirs) */
.lmk-earn { position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; padding:10px 12px 12px; border-radius:16px; overflow:hidden;
  background:rgba(var(--lmk-gold-rgb), .07); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .26); }
.lmk-earn-tk { display:grid; place-items:center; }
.lmk-earn-t { font:600 13px/1.35 var(--body); color:var(--lmk-ink); }
.lmk-earn-n { font:700 12.5px/1 var(--mono, monospace); color:var(--lmk-gold); white-space:nowrap; }
.lmk-earn-bar { position:absolute; left:12px; right:12px; bottom:5px; height:3px; border-radius:2px; background:rgba(var(--lmk-gold-rgb), .16); }
.lmk-earn-bar > i { display:block; height:100%; border-radius:2px; background:linear-gradient(90deg, #E9CC72, #F2D98A); transition:width .5s ease; }
.lmk-earn.done { background:rgba(98,193,158,.08); box-shadow:inset 0 0 0 1px rgba(98,193,158,.4); }
.lmk-earn.done .lmk-earn-n { color:var(--lmk-good); }
.lmk-tk { display:inline-flex; align-items:center; gap:3px; margin-left:7px; padding:2px 6px 2px 3px; border-radius:999px; vertical-align:middle;
  font:700 11px/1 var(--mono, monospace); color:var(--lmk-gold); background:rgba(var(--lmk-gold-rgb), .1); }
.lmk-tk .ltk-badge { display:block; flex:none; }
.lmk-tk.got { color:var(--lmk-good); background:rgba(98,193,158,.12); }
.lmk-tk.got b::after { content:" ✓"; }
.lmk-want.kept .lmk-wacts .y .lmk-tk, .lmk-seg3 button.on .lmk-tk, .lmk-chip.on .lmk-tk { color:inherit; background:rgba(255,255,255,.22); }
.lmk-sub .lmk-tk { font-size:10.5px; }
.lmk-rise { position:fixed; z-index:9700; display:inline-flex; align-items:center; gap:4px; transform:translate(-50%, 0); pointer-events:none;
  font:700 15px/1 var(--mono, monospace); color:#F2D98A; text-shadow:0 1px 6px rgba(0,0,0,.45); animation:lmkRiseTk 1.2s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes lmkRiseTk { 0% { opacity:0; transform:translate(-50%, 6px) scale(.9); } 18% { opacity:1; transform:translate(-50%, -6px) scale(1.05); } 100% { opacity:0; transform:translate(-50%, -54px) scale(1); } }
/* what you may want next */
.lmk-honest { margin:0; font:400 13px/1.5 var(--body); color:var(--lmk-dim); }
.lmk-want { border-radius:16px; padding:12px 12px 11px; display:flex; flex-direction:column; gap:6px; background:var(--lmk-well); }
.lmk-wt { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.lmk-tone { display:inline-flex; align-items:center; gap:6px; font:700 10px/1 var(--body); letter-spacing:.13em; text-transform:uppercase; color:var(--lmk-dayc); }
.lmk-tone::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.lmk-want.heavy .lmk-tone { color:var(--lmk-heavy); } .lmk-want.light .lmk-tone { color:var(--lmk-light); }
.lmk-time { flex:none; padding:5px 7px; border-radius:8px; font:600 11.5px/1 var(--mono, monospace); color:var(--lmk-gold); background:rgba(var(--lmk-gold-rgb), .1); white-space:nowrap; }
.lmk-want h5 { margin:1px 0 0; font:600 15px/1.3 var(--body); color:var(--lmk-ink); }
.lmk-want > p { margin:0; font:400 13.5px/1.5 var(--body); color:var(--lmk-ink2); }
.lmk-want > p > b:first-child { margin-right:7px; font:700 10px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--lmk-dim); }
.lmk-want > p.do > b:first-child { color:var(--lmk-gold); }
.lmk-wacts { display:flex; gap:6px; margin-top:3px; }
.lmk-wacts button { flex:1; min-height:38px; border:0; border-radius:11px; cursor:pointer; font:600 13px/1 var(--body); }
.lmk-wacts .y { color:var(--lmk-good); background:rgba(98,193,158,.14); box-shadow:inset 0 0 0 1px rgba(98,193,158,.45); }
.lmk-wacts .n { color:var(--lmk-dim); background:none; box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.lmk-want.kept .lmk-wacts .y { color:var(--lmk-good-ink); background:var(--lmk-good); box-shadow:none; }
.lmk-want.dropped > :not(.lmk-wacts):not(.lmk-wnote) { opacity:.45; }
.lmk-want.dropped .lmk-wacts .n { color:var(--lmk-ink); box-shadow:inset 0 0 0 1px var(--lmk-ink2); }
.lmk-want.dropped .lmk-wnote { color:var(--lmk-dim); }
/* pulls you may feel today */
.lmk-lean { margin:0; padding-left:16px; display:flex; flex-direction:column; gap:4px; }
.lmk-sw { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:14px; background:var(--lmk-well); }
.lmk-sw span { font:400 13px/1.45 var(--body); color:var(--lmk-ink2); }
.lmk-sw b { display:block; font:600 14px/1.35 var(--body); color:var(--lmk-ink); }
.lmk-tg { position:relative; flex:none; width:46px; height:28px; border:0; border-radius:14px; cursor:pointer; background:var(--lmk-line2); }
.lmk-tg::after { content:""; position:absolute; left:3px; top:3px; width:22px; height:22px; border-radius:50%; background:#FFFFFF; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .18s; }
.lmk-tg.on { background:var(--lmk-good); } .lmk-tg.on::after { transform:translateX(18px); }
.lmk-pull { border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:6px; background:var(--lmk-well); }
.lmk-pull h5 { margin:0; font:600 15px/1.3 var(--body); color:var(--lmk-ink); }
.lmk-pull > p { margin:0; font:400 13.5px/1.5 var(--body); color:var(--lmk-ink2); }
.lmk-pull > p b { color:var(--lmk-ink); font-weight:600; }
.lmk-no { color:var(--lmk-heavy) !important; font-weight:600; }
.lmk-hl { display:flex; align-items:baseline; gap:10px; padding:9px 11px; border-radius:11px; text-decoration:none; background:var(--lmk-card); box-shadow:inset 0 0 0 1px var(--lmk-line); }
.lmk-hl b { font:600 15px/1 var(--mono, monospace); color:var(--lmk-ink); }
.lmk-hl span { font:400 13px/1.4 var(--body); color:var(--lmk-ink2); }
/* what I'd do next, inside you, the sky */
.lmk-tl { margin:0; padding:0; list-style:none; }
.lmk-tl li { display:grid; grid-template-columns:94px minmax(0, 1fr); gap:10px; padding:9px 0; border-top:1px solid var(--lmk-line); font:400 13.5px/1.5 var(--body); color:var(--lmk-ink2); }
.lmk-tl li:first-child { border-top:0; padding-top:2px; }
.lmk-tl time { font:600 12px/1.5 var(--mono, monospace); color:var(--lmk-gold); }
.lmk-tl b { color:var(--lmk-ink); font-weight:600; }
.lmk-tl .lmk-link { margin:0; font-size:13.5px; }
.lmk-sky { margin:0; display:flex; flex-direction:column; }
.lmk-sky div { display:grid; grid-template-columns:86px minmax(0, 1fr); gap:10px; padding:8px 0; border-top:1px solid var(--lmk-line); }
.lmk-sky div:first-child { border-top:0; padding-top:2px; }
.lmk-sky dt { font:700 10px/1.7 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--lmk-dim); }
.lmk-sky dd { margin:0; font:400 13.5px/1.5 var(--body); color:var(--lmk-ink); }
.lmk-end { margin:4px 4px 0; font:400 15px/1.5 var(--body); color:var(--lmk-ink); }
.lmk-wrap button:focus-visible, .lmk-wrap summary:focus-visible, .lmk-inv button:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:2px; border-radius:8px; }

/* ---- version 3, THE CALL (2026-10-07: Draft A's screen in Draft B's voice, Draft C's Ask on a button): the headline, you right
   now, the call with its time and its odds; then a line each for the work, the body, today and tonight; whether the last call held ---- */
.lmk-r3 { gap:12px; }
.mk3-pills { display:flex; flex-wrap:wrap; gap:6px; }
.mk3-pl { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font:600 11.5px/1.2 var(--body); color:var(--lmk-ink2); background:var(--lmk-well);
  box-shadow:inset 0 0 0 1px var(--lmk-line); }
.mk3-pl.ok { color:var(--lmk-good); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-good) 45%, transparent); }
.mk3-pl.no { color:var(--lmk-heavy); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-heavy) 45%, transparent); }
.mk3-d { display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; background:var(--lmk-dim); }
.mk3-d.left { background:var(--lmk-ida); } .mk3-d.right { background:var(--lmk-ping); } .mk3-d.both { background:var(--lmk-gold); } .mk3-d.none { background:transparent; box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.mk3-hl { margin:2px 0 0; font:500 24px/1.18 var(--display); letter-spacing:-.015em; color:var(--lmk-ink); text-wrap:balance; }
.mk3-sub { margin:-4px 0 0; font:400 13.5px/1.45 var(--body); color:var(--lmk-ink2); }
.mk3-k { display:block; font:600 10px/1.25 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--lmk-dim); }
.mk3-blk { display:grid; gap:8px; padding:14px 14px 13px; border-radius:18px; background:var(--lmk-card); box-shadow:inset 0 0 0 1px var(--lmk-line); }
.mk3-rows { display:grid; gap:8px; }
.mk3-row { display:grid; grid-template-columns:84px minmax(0, 1fr); gap:8px; align-items:baseline; }
.mk3-row p, .mk3-p { margin:0; font:400 14.5px/1.45 var(--body); color:var(--lmk-ink); }
.mk3-yn { display:grid; gap:7px; }
.mk3-btns { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:6px; }
.mk3-btns .mk3-bt { justify-content:center; }
.mk3-q { display:block; font:500 12px/1.3 var(--body); color:var(--lmk-dim); }
.mk3-bt { display:inline-flex; align-items:center; gap:4px; min-height:34px; padding:0 12px; border:0; border-radius:11px; cursor:pointer; font:600 13px/1 var(--body); color:var(--lmk-ink);
  background:transparent; box-shadow:inset 0 0 0 1.3px var(--lmk-line2); -webkit-tap-highlight-color:transparent; }
.mk3-bt[aria-pressed="true"] { color:var(--lmk-good-ink); background:var(--lmk-good); box-shadow:none; }
.mk3-bt .lmk-tk { margin-left:4px; }
.mk3-call { display:grid; gap:10px; padding:15px 14px 14px; border-radius:20px;
  background:radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--lmk-good) 16%, transparent), transparent 62%), var(--lmk-card);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-good) 38%, transparent); }
.mk3-call.wait, .mk3-call.none { background:radial-gradient(120% 70% at 0% 0%, rgba(var(--lmk-gold-rgb), .14), transparent 62%), var(--lmk-card); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .34); }
.mk3-verd { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mk3-vb { display:inline-flex; align-items:baseline; gap:6px; padding:6px 11px; border-radius:11px; font:700 12.5px/1.1 var(--body); letter-spacing:.06em; }
.mk3-vb small { font:600 11.5px/1 var(--mono, ui-monospace, monospace); letter-spacing:0; }
.mk3-vb.pre { color:var(--lmk-gold); box-shadow:inset 0 0 0 1.3px rgba(var(--lmk-gold-rgb), .55); }
.mk3-vb.go { color:var(--lmk-good-ink); background:var(--lmk-good); }
.mk3-vb.wt { color:#1B1406; background:var(--lmk-gold); }
.mk3-arr { color:var(--lmk-dim); font-size:14px; }
.mk3-cl { margin:0; font:500 15px/1.42 var(--body); color:var(--lmk-ink); }
.mk3-meter { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:5px; }
.mk3-meter span { position:relative; padding-top:10px; font:600 10.5px/1.25 var(--body); color:var(--lmk-dim); text-align:center; }
.mk3-meter span::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:2px; }
.mk3-meter .m-not::before { background:color-mix(in srgb, var(--lmk-heavy) 60%, transparent); }
.mk3-meter .m-mixed::before { background:rgba(var(--lmk-gold-rgb), .7); }
.mk3-meter .m-favoured::before { background:var(--lmk-good); }
.mk3-meter .on { color:var(--lmk-ink); }
.mk3-meter .on::after { content:""; position:absolute; top:-3.5px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--lmk-ink); box-shadow:0 0 0 3px var(--lmk-panel-end); }
.mk3-acts { display:flex; flex-wrap:wrap; gap:8px; }
.mk3-go, .mk3-askb { flex:1 1 150px; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 14px; border:0; border-radius:13px; cursor:pointer;
  font:600 14px/1 var(--body); -webkit-tap-highlight-color:transparent; }
.mk3-go { color:var(--lmk-good-ink); background:var(--lmk-good); }
.mk3-askb { color:var(--lmk-ink); background:transparent; box-shadow:inset 0 0 0 1.3px rgba(var(--lmk-gold-rgb), .5); }
.mk3-go svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.mk3-ai { display:grid; place-items:center; width:20px; height:20px; }
.mk3-ai .lmk-tri { width:19px; height:19px; }
.mk3-rem { display:grid; gap:8px; padding-top:2px; }
.mk3-cals { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.mk3-cal { display:grid; justify-items:center; gap:3px; padding:10px 6px; border:0; border-radius:13px; cursor:pointer; text-decoration:none; text-align:center; color:var(--lmk-ink);
  background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line); }
.mk3-cal svg { width:20px; height:20px; fill:none; stroke:var(--lmk-gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.mk3-cal b { font:600 12.5px/1.2 var(--body); } .mk3-cal em { font:400 10.5px/1.2 var(--body); font-style:normal; color:var(--lmk-dim); }
.mk3-chips { display:flex; flex-wrap:wrap; gap:6px; }
.mk3-chip { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:0; border-radius:999px; cursor:pointer; font:600 12.5px/1.15 var(--body); text-align:left;
  color:var(--lmk-ink); background:var(--lmk-well); box-shadow:inset 0 0 0 1.2px var(--lmk-line2); -webkit-tap-highlight-color:transparent; }
.mk3-chip.sel, .mk3-chip.on, .mk3-chip[aria-pressed="true"] { color:var(--lmk-good-ink); background:var(--lmk-good); box-shadow:none; }
.mk3-chip.sug { color:var(--lmk-gold); box-shadow:inset 0 0 0 1.2px rgba(var(--lmk-gold-rgb), .55); }
.mk3-chip.quiet { color:var(--lmk-ink2); background:transparent; }
.mk3-chips.sm .mk3-chip { min-height:30px; padding:0 10px; font-size:12px; }
.mk3-fine { margin:0; font:400 11.5px/1.45 var(--body); color:var(--lmk-dim); }
.mk3-kh { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mk3-link { padding:4px 0; border:0; background:none; cursor:pointer; font:600 12px/1 var(--body); color:var(--lmk-gold); }
.mk3-fams { display:grid; gap:10px; }
.mk3-search { display:grid; gap:6px; }
.mk3-search input, .mk3-find input { width:100%; box-sizing:border-box; height:42px; padding:0 12px; border:0; border-radius:12px; font:400 15px/1 var(--body); color:var(--lmk-ink);
  background:var(--lmk-well); box-shadow:inset 0 0 0 1.2px var(--lmk-line2); }
.mk3-search input:focus-visible, .mk3-find input:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:1px; }
.mk3-famlist { display:grid; gap:8px; max-height:340px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.mk3-fam { display:grid; gap:6px; }
.mk3-jobs { display:flex; flex-wrap:wrap; gap:5px; padding-left:8px; }
.mk3-job { padding:5px 9px; border:0; border-radius:9px; cursor:pointer; font:500 12px/1.2 var(--body); color:var(--lmk-ink2); background:transparent; box-shadow:inset 0 0 0 1px var(--lmk-line); }
.mk3-find { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; }
.mk3-find.mk3-tell { align-items:center; }
.mk3-bt:disabled { opacity:.5; cursor:default; }
.mk3-found { display:grid; gap:6px; }
.mk3-found:empty { display:none; }
.mk3-tl ul { margin:0; padding:0; list-style:none; }
.mk3-tl li { display:grid; grid-template-columns:46px 12px minmax(0, 1fr); gap:8px; align-items:baseline; padding:7px 0; border-top:1px solid var(--lmk-line); }
.mk3-tl li:first-child { border-top:0; }
.mk3-tl time { font:500 12.5px/1.3 var(--mono, ui-monospace, monospace); color:var(--lmk-ink2); font-variant-numeric:tabular-nums; }
.mk3-tl .mk3-d { transform:translateY(-1px); }
.mk3-tl b { font:600 13.5px/1.3 var(--body); color:var(--lmk-ink); } .mk3-tl em { font:400 12px/1.3 var(--body); font-style:normal; color:var(--lmk-dim); }
.mk3-tl li.k-call b { color:var(--lmk-good); }
.mk3-subs { display:grid; gap:6px; }
.mk3-held blockquote { margin:0; padding:2px 0 2px 12px; box-shadow:inset 2px 0 0 var(--lmk-gold); font:400 14px/1.45 var(--body); color:var(--lmk-ink2); }
.mk3-nx { margin:0; text-align:center; font:500 12px/1.3 var(--body); color:var(--lmk-dim); }
.mk3-back { justify-self:start; display:inline-flex; align-items:center; gap:4px; padding:4px 2px; border:0; background:none; cursor:pointer; font:600 13px/1 var(--body); color:var(--lmk-ink2); }
.mk3-back svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mk3-big { margin:0; font:600 28px/1.05 var(--display); color:var(--lmk-ink); letter-spacing:-.01em; }
.mk3-big small { display:block; margin-top:7px; font:500 13.5px/1.3 var(--body); color:var(--lmk-good); letter-spacing:0; }
.mk3-call.wait .mk3-big small, .mk3-call.none .mk3-big small { color:var(--lmk-gold); }
.mk3-why { display:grid; gap:7px; }
.mk3-why p { position:relative; margin:0; padding-left:14px; font:400 13px/1.45 var(--body); color:var(--lmk-ink2); }
.mk3-why p::before { content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--lmk-gold); }
.mk3-help { display:flex; gap:8px; }
.mk3-help span { flex:1; display:grid; gap:2px; padding:8px 10px; border-radius:12px; background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line); }
.mk3-help b { font:600 15px/1.2 var(--mono, ui-monospace, monospace); color:var(--lmk-ink); } .mk3-help em { font:500 11px/1.3 var(--body); font-style:normal; color:var(--lmk-dim); }
.lmk-r3 button:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:2px; }

/* ---- the invitation: the website's Shiva on the Mahakaal disc, after the token moment (z: over the sheets, under the moment). Quiet
   and small since 2026-10-07 (the user: "subtle, premium and compact but eye catching in the same overlay bg style as the finger width
   card"): the finger-width card's veil and glass, warmed by a breath of gold at its top; the disc small in a bezel, a halo breathing
   behind it; one line; Later and Open side by side, as Not now and Mirror test are ---- */
.lmk-inv { position:fixed; inset:0; z-index:9650; display:flex; overflow-y:auto; overscroll-behavior:contain; box-sizing:border-box;
  padding:20px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left)); opacity:0; transition:opacity .24s ease; }
.lmk-inv.in { opacity:1; }
.lmk-inv.out { opacity:0; }
.lmk-inv-veil { position:fixed; inset:0; background:rgba(3, 5, 10, .62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.lmk-inv-card { position:relative; flex:none; width:min(340px, 100%); box-sizing:border-box; margin:auto; display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:24px 18px 14px; border-radius:26px; text-align:center; color:var(--ink); font-family:var(--body);
  background:radial-gradient(120% 58% at 50% 0%, rgba(var(--lhs-gold-rgb), .1), rgba(var(--lhs-gold-rgb), 0) 64%), var(--lhs-card);
  box-shadow:0 34px 70px -24px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--lhs-line-2), inset 0 1px 0 rgba(var(--lhs-gold-rgb), .22); }
.lmk-inv.in .lmk-inv-card { animation:obsmIn .32s cubic-bezier(.2, .9, .25, 1) both; }
.lmk-inv-card:focus { outline:none; }
.lmk-halo { position:relative; width:124px; height:124px; display:grid; place-items:center; margin:0 0 4px; }
.lmk-glow { position:absolute; inset:-22px; border-radius:50%; background:radial-gradient(circle, rgba(var(--lhs-gold-rgb), .2) 0%, rgba(var(--lhs-gold-rgb), 0) 66%); animation:lmkBreathe 6s ease-in-out infinite; }
.lmk-ring { position:absolute; inset:6px; border-radius:50%; box-shadow:0 0 0 1px rgba(var(--lhs-gold-rgb), .55); opacity:0; }
.lmk-inv.in .lmk-ring { animation:lmkRing 2.2s .4s ease-out both; }
.lmk-disc { position:relative; width:112px; height:112px; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 44%, rgba(255,236,204,.10), rgba(255,236,204,0) 58%), radial-gradient(circle at 50% 28%, #2D313D 0%, #1D2029 46%, #13151C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), inset 0 -3px 6px rgba(0,0,0,.5), 0 0 0 1px rgba(242,217,138,.5), 0 0 0 5px rgba(242,217,138,.07),
    0 18px 30px -14px rgba(0,0,0,.8); }
.lmk-disc::before { content:""; position:absolute; left:18%; right:18%; top:5%; height:34%; border-radius:50%; background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 72%); pointer-events:none; }
.lmk-disc::after { content:""; position:absolute; inset:7px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(242,217,138,.16); pointer-events:none; }
.lmk-shv { position:relative; display:block; width:100%; height:100%; }
/* THE OUTLINE ALONE on the invitation (the user, 2026-10-08: "remove the disc from the shiva outline … Just keep shiva outline glowing and
   dimming just like other shiva outline on the home page"): no cap and no ring; the face breathes as the home card's does (lnowFace, its
   4.8 s), lit by a faint warm glow, with the soft light behind it */
.lmk-halo.bare { width:100px; height:148px; margin:0 0 2px; }
.lmk-halo.bare .lmk-glow { inset:-8px -30px; }
.lmk-halo.bare .lmk-shv { overflow:visible; filter:drop-shadow(0 0 5px rgba(255,220,160,.38)); }
.lmk-halo.bare .lmk-shv .sv { animation:lnowFace 4.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lmk-halo.bare .lmk-shv .sv { animation:none; } }
.lmk-shv .sv { animation:lmkShvBreath 6s ease-in-out infinite; }
.lmk-shv .sv path { fill:none; stroke:url(#lmkShvInk); stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.lmk-shv .sv .sv-moon { fill:rgba(235,211,162,.16); }
.lmk-shv .sv .sv-eye { stroke-width:1.35; fill:rgba(255,227,174,.12); }
.lmk-shv .nos { fill:#07060F; fill-opacity:.92; stroke:url(#lmkShvNose); stroke-width:1; stroke-opacity:.45; vector-effect:non-scaling-stroke; }
.lmk-shv .nos.lit { animation:lmkNosLit 6s ease-in-out infinite; }
.lmk-shv .tri path { fill:none; stroke:#EDE6D6; stroke-width:3.6; stroke-linecap:round; }
.lmk-shv .bindu { fill:#D9452B; }
.lmk-shv .bindu-glow { fill:rgba(217,69,43,.45); animation:lmkBindu 4.6s ease-in-out infinite; }
.lmk-inv-tag { display:inline-flex; align-items:center; gap:8px; }
/* the app's own type (the user, 2026-10-09: "Mahakaal shall only have its own font type only when the UI/Ux is open for Mahakaal chat
   bot (only where the mahaakaal name is there)"): the invitation's tag is not the chat */
.lmk-word { padding-left:.16em; font:600 11px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--lhs-gold); }
.lmk-expc { padding:3px 6px; border-radius:999px; font:700 7.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--lmk-chip); background:rgba(160,147,219,.08); box-shadow:inset 0 0 0 1px var(--lmk-chipline); }
.lmk-inv-card h3 { margin:0; font:400 21px/1.2 var(--display); letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
/* the hour under the guess (the user, 2026-10-08): quieter than the question, the reason to open */
.lmk-inv-hook { margin:-6px 0 0; font:400 14px/1.4 var(--body); color:var(--ink-2); text-wrap:balance; }
/* Later and Open, side by side: the quiet one and the gold one */
.lmk-inv-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr); gap:10px; width:100%; margin-top:6px; }
.lmk-inv-later, .lmk-inv-go { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:48px; padding:0 12px; border:0; border-radius:15px; cursor:pointer;
  font:600 15px/1 var(--body); white-space:nowrap; -webkit-tap-highlight-color:transparent; transition:transform .12s ease; }
.lmk-inv-later { color:var(--ink); background:transparent; box-shadow:inset 0 0 0 1.5px var(--lhs-line-2); }
.lmk-inv-go { color:#1B1406; background:linear-gradient(180deg, #F6E4A8 0%, #E9C96E 55%, #D4AD4C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 12px 26px -14px rgba(214,178,74,.8); }
.lmk-inv-later:active, .lmk-inv-go:active { transform:scale(.97); }
.lmk-inv-tk { display:inline-flex; align-items:center; gap:3px; padding:2px 7px 2px 3px; border-radius:999px; font:700 12px/1 var(--body); font-variant-numeric:tabular-nums;
  background:rgba(27, 20, 6, .13); }
.lmk-inv-tk .ltk-badge { display:block; flex:none; }
.lmk-inv-chev { flex:none; width:15px; height:15px; margin-right:-2px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lmk-inv-meta { margin-top:-2px; font:500 11px/1.3 var(--body); color:var(--dim); }
@keyframes lmkBreathe { 0%, 100% { opacity:.55; transform:scale(.96); } 50% { opacity:1; transform:scale(1.03); } }
@keyframes lmkShvBreath { 0%, 100% { opacity:.66; } 45% { opacity:1; } }
@keyframes lmkNosLit { 0%, 100% { stroke-opacity:.45; } 45% { stroke-opacity:.95; } }
@keyframes lmkBindu { 0%, 100% { opacity:.25; } 50% { opacity:.9; } }
@keyframes lmkRise { from { opacity:0; transform:translateY(14px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes lmkRing { 0% { opacity:1; transform:scale(.82); } 100% { opacity:0; transform:scale(1.65); } }
@media (min-width:760px) {
  .lmk-wrap { align-items:center; }
  .lmk-sheet { border-radius:28px; max-height:min(86vh, 900px); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .22), 0 30px 80px -30px rgba(0,0,0,.95); }
  .lmk-sheet::before { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .lmk-wrap, .lmk-sheet, .lmk-body, .lmk-inv { transition:none; }
  .lmk-inv.in .lmk-inv-card, .lmk-glow, .lmk-inv.in .lmk-ring, .lmk-shv .sv, .lmk-shv .nos.lit, .lmk-shv .bindu-glow { animation:none !important; }
  .lmk-ring { display:none; }
}


/* =====================================================================================================================
   THE FIRST STOP NEVER TALLER THAN THE DRAWER (the user, 2026-10-05: "On mobile devices, i see this issue when half open the drawer
   with breath check record card on today and timetable pages"). There the first stop holds the breath card, the console and the
   two keys: on a phone it measured taller than the drawer (938 against 815 at 480x883), so the half stop lifted the drawer off the
   screen's top and hung its foot, the keys, over the page. Now the half stop never goes past the header, and the first stop
   scrolls inside the drawer when it is taller than the screen; measured, it is never more than the drawer (ldMeasure reads it).
   ===================================================================================================================== */
.lite-has-chart .litedrawer[data-state="half"] { transform:translateY(max(0px, calc(100% - var(--lite-half, 190px)))); }
.lite-has-chart .litedrawer[data-state="half"] .liteacts { max-height:calc(100svh - var(--lite-head, 72px) - 56px - env(safe-area-inset-bottom, 0px));
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }


/* =====================================================================
   THE APP LOOK (the user, 2026-10-07: "remove the header on the top with add person, timetable, website and settings button.
   It is giving more browser like look. I want complete and high-level app like look")
   =====================================================================
   The bar stays in the page only as the safe area's height (an iPhone's status bar; 10px in a browser): the layout and every
   sheet are measured from it (ui-lite-shell.js ldMeasure: --lite-head, --lite-sheet-top), so the dial now rises to the top and
   the sheets open from it. Its buttons are hidden and still wired: the You key and its sheet press them. */
:root:not([data-demo]).lite-app .topbar { position:sticky; top:0; display:block; height:max(10px, env(safe-area-inset-top, 0px)); min-height:0; margin:0; padding:0;
  border:0; border-radius:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; overflow:hidden; visibility:hidden; pointer-events:none; }
/* the key: the person's initials on the dial's top corner, in the glass of the dial's own zoom keys */
.lme-key { position:absolute; z-index:5; top:2px; right:2px; display:grid; place-items:center; width:38px; height:38px; padding:0; border-radius:50%; cursor:pointer;
  color:var(--brass-hi); border:1px solid color-mix(in srgb, var(--brass-hi) 38%, transparent); background:var(--glass, rgba(10,10,14,.72));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 6px 18px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-tap-highlight-color:transparent; transition:transform .16s ease, border-color .2s ease; }
.lme-key:hover { border-color:color-mix(in srgb, var(--brass-hi) 70%, transparent); }
.lme-key:active { transform:scale(.94); }
.lme-key:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lme-ini { font:600 13px/1 var(--body); letter-spacing:.03em; font-variant-numeric:tabular-nums; }
.lme-ini svg { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
:root[data-demo] .lme-key, html:not(.lite-has-chart) .lme-key { display:none !important; }
/* the desktop (the two-column home): the screen's top-left corner, held there while the card column scrolls (the user, 2026-10-07) */
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  :root:not([data-demo]).lite-app .lme-key { position:fixed; z-index:61; top:calc(max(10px, env(safe-area-inset-top, 0px)) + 10px); left:max(22px, env(safe-area-inset-left, 0px)); right:auto; width:42px; height:42px; }
  :root:not([data-demo]).lite-app .lme-ini { font-size:14px; }
}
@media (prefers-reduced-motion: reduce) { .lme-key { transition:none; } }
/* the brand on the dial's top-left corner, phones and tablets (the user, 2026-10-08: "on the webapp top left corner should have Kaalchakra
   logo and branding which should be clickable to get to website"; then "Just show kaalchakra logo in the same size as the user circular
   button on the right" — the name had run into the dial's ring): the logo alone, in a disc that is the You key's own, mirrored across the
   dial (ui-lite-person.js lmePlace); a link to the website, as the You sheet's is */
.lme-brandm { position:absolute; z-index:5; top:2px; left:2px; display:grid; place-items:center; width:38px; height:38px; padding:0; border-radius:50%; cursor:pointer;
  text-decoration:none; color:var(--brass-hi); border:1px solid color-mix(in srgb, var(--brass-hi) 38%, transparent); background:var(--glass, rgba(10,10,14,.72));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 6px 18px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-tap-highlight-color:transparent; transition:transform .16s ease, border-color .2s ease; }
.lme-brandm .lme-logo { width:22px; height:22px; color:var(--brass); }
.lme-brandm:active { transform:scale(.94); }
.lme-brandm:hover { border-color:color-mix(in srgb, var(--brass-hi) 70%, transparent); }
.lme-brandm:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
:root[data-demo] .lme-brandm, html:not(.lite-has-chart) .lme-brandm { display:none !important; }
@media (min-width:980px) and (min-aspect-ratio:5/4) { .lme-brandm { display:none !important; } }
@media (prefers-reduced-motion: reduce) { .lme-brandm { transition:none; } }
/* the You sheet, in the pickers' own sheet (ui-lite-pickers.js lpkSheet) */
.lpk-sheet.lpk-me { max-width:520px; }
.lme { display:grid; gap:14px; padding:14px 0 4px; }
.lme-who { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lme-av { flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; font:600 14px/1 var(--body); letter-spacing:.02em;
  color:#1B1406; background:linear-gradient(180deg, #F8E9B8, #D6B24A); }
.lme-tx { flex:1 1 auto; min-width:0; display:grid; gap:3px; text-align:left; }
.lme-tx b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 15.5px/1.2 var(--body); color:var(--ink); }
.lme-tx em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 12.5px/1.25 var(--body); font-style:normal; color:var(--dim); }
.lme-on { flex:0 0 auto; padding:5px 9px; border-radius:999px; font:600 10.5px/1 var(--body); letter-spacing:.04em; color:var(--jade); background:color-mix(in srgb, var(--jade) 13%, transparent); }
.lme-list { display:grid; gap:2px; }
.lme-row { display:flex; align-items:center; gap:13px; width:100%; min-height:58px; margin:0; padding:8px 10px 8px 8px; border:0; border-radius:16px; cursor:pointer; text-align:left;
  text-decoration:none; color:var(--ink); background:none; -webkit-tap-highlight-color:transparent; transition:background .16s ease; }
.lme-row:hover { background:var(--st-tile); }
.lme-row:active { background:rgba(var(--acc-rgb), .1); }
.lme-row:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:-2px; }
.lme-row + .lme-row { box-shadow:inset 0 1px 0 var(--st-line-soft); }
.lme-ic { flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:13px; color:rgb(var(--acc-rgb));
  background:rgba(var(--acc-rgb), .09); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .22); }
.lme-ic svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lme-go { flex:0 0 auto; display:grid; place-items:center; width:20px; color:var(--dim); }
.lme-go svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lme-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px; padding:12px 4px 2px; border-top:1px solid var(--st-line-soft); text-align:center; }
.lme-logo { width:20px; height:20px; color:var(--brass); }
.lme-mark { font:600 15px/1 var(--display); letter-spacing:.02em; color:var(--brass-hi); }
.lme-mark span { font-weight:400; color:var(--dim); }
.lme-foot em { flex:1 0 100%; font:500 9.5px/1.4 var(--mono, ui-monospace, monospace); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-dim, var(--dim)); }
.lme-foot small { flex:1 0 100%; font:400 11px/1.3 var(--body); color:var(--dim); }


/* =====================================================================
   TODAY IN THE RIGHT PAGES' THEME (the user, 2026-10-07: "keep all the content as it is but redesign it to match the theme of the
   Swaasthya, kaarya, ghatna, jyotish and samkalp")
   =====================================================================
   The verse, the fruit, Since sunrise and At a glance stand in their cards (.lkg-card: the page's own colour, --pa, in a corner
   glow; the hairline; 22px corners; the eyebrow inside, the count beside it); the arc stays open on the page as their figures do;
   the CTA keeps its gain and takes their corners. */
.lhs-page[data-page="today"] .ltd-verse { margin:0; padding:20px 16px 16px; border-radius:22px; overflow:hidden;
  background:radial-gradient(130% 120% at 0% 0%, rgba(var(--pa), .09), transparent 60%), var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lhs-page[data-page="today"] .ltd-verse::before { inset:0 0 auto; height:70%; border-radius:0; box-shadow:none;
  background:radial-gradient(70% 90% at 50% 0%, rgba(var(--ltd-glow), .1), transparent 72%); }
.lhs-page[data-page="today"] .ltd-fruit.lkg-card { justify-items:center; gap:14px; width:auto; }
.lhs-page[data-page="today"] .ltd-fruit.lkg-card > .lkg-card-hd { justify-self:stretch; }
.lhs-page[data-page="today"] .ltd-since.lkg-card { gap:12px; }
.lhs-page[data-page="today"] .ltd-since.lkg-card .ltd-sechd { align-items:center; }
.lhs-page[data-page="today"] .ltd-since.lkg-card .ltd-alltimes { margin-top:0; }
.lhs-page[data-page="today"] .ltd-glance.lkg-card { gap:6px; padding-bottom:6px; }
.lhs-page[data-page="today"] .ltd-glance.lkg-card .ltd-rows { margin:0 -10px; border-radius:0; overflow:visible; background:none; box-shadow:none; }
.lhs-page[data-page="today"] .ltd-glance.lkg-card .ltd-row { position:relative; padding-left:10px; padding-right:10px; border-radius:0; }
.lhs-page[data-page="today"] .ltd-glance.lkg-card .ltd-row + .ltd-row { box-shadow:none; }
.lhs-page[data-page="today"] .ltd-glance.lkg-card .ltd-row + .ltd-row::before { content:''; position:absolute; left:10px; right:10px; top:0; height:1px; background:var(--lhs-line); }
.lhs-page[data-page="today"] .ltd-glance.lkg-card .ltd-row.ltd-link:hover { border-radius:14px; }
/* one rhythm: the cards' 24px, the older part margins set aside on this page (the fruit and the CTA sat tight under the arc) */
.lhs-page[data-page="today"] .ltd-part[data-ltd="since"], .lhs-page[data-page="today"] .ltd-part[data-ltd="glance"] { margin-top:0; }
.lhs-page[data-page="today"] .ltd-part[data-ltd="fruit"], .lhs-page[data-page="today"] .ltd-part[data-ltd="cta"] { margin-top:0; }
.lhs-page[data-page="today"] .ltd-cta { border-radius:22px; }
.lhs-page[data-page="today"] .ltd-how { margin-top:-12px; }


/* =====================================================================
   THE DESKTOP'S TOP ROW AND A BIGGER DIAL (the user, 2026-10-07: "on the desktop you can increase the size of the main dial but
   maintaining symmetry and esthetics"; "include the header KaalChakra with the Kaalchakra logo as a brand by Aitele research LLP and
   align the user profile button in the top left corner and kaalchakra branding and the main header tabs of the swipe pages perfectly";
   "keep the header brand logo in the center with the brand name and by Aitele research LLP below it in a perfectly aligned, symmetric
   and elegant manner")
   =====================================================================
   One line through the tabs' middle (ui-lite-person.js lmeDesk): the You key at the left on it, the brand centred on the dial's axis
   on it (the axis the sky dial stands on), the tabs held where they rest. The dial fills the room between the brand's foot
   (--ldesk-head) and the sky dial, the same 14px above it and below. Phones and tablets keep the app look: no brand row. */
.lme-brand { display:none; }
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  /* the brand at the screen's bottom-left corner, a size down (the user, 2026-10-07: "Shift the kaalchakra branding from header to the
     bottom-left corner of the desktop screen in slightly less size"): its left edge on the You key's, the logo and name over the byline */
  :root:not([data-demo]).lite-app.lite-has-chart .lme-brand { position:fixed; z-index:61; left:max(22px, env(safe-area-inset-left, 0px)); bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    display:grid; justify-items:center; gap:4px; text-align:center; white-space:nowrap; text-decoration:none; cursor:pointer; border-radius:10px;
    -webkit-tap-highlight-color:transparent; transition:opacity .2s ease, filter .2s ease; }
  /* a link to the website (the user, 2026-10-08): it brightens under the pointer, and shows a ring to the keyboard */
  :root:not([data-demo]).lite-app.lite-has-chart .lme-brand:hover { filter:brightness(1.18); }
  :root:not([data-demo]).lite-app.lite-has-chart .lme-brand:focus-visible { outline:2px solid var(--brass-hi); outline-offset:6px; }
  :root:not([data-demo]).lite-app.lite-has-chart .lme-brand.lme-hide { opacity:0; visibility:hidden; }
  .lme-brand-l { display:inline-flex; align-items:center; gap:8px; }
  .lme-brand .lme-logo { width:22px; height:22px; color:var(--brass); }
  .lme-brand-m { font:600 18px/1 var(--display); letter-spacing:.02em; color:var(--brass-hi); }
  .lme-brand-m span { font-weight:400; color:var(--dim); }
  .lme-brand-by { margin-right:-.22em; font:600 7.5px/1 var(--body); letter-spacing:.22em; text-transform:uppercase; color:color-mix(in srgb, var(--dim) 86%, transparent); }
  html.lhs-on.lite-has-chart .lhs-rail { top:var(--ldesk-rail-top, var(--lhs-top, 0px)); }
  /* the tabs head the row: the column of cards starts at the top, never centred down the screen while its page is short */
  html.lhs-on.lite-has-chart .lhs-col { justify-content:flex-start; }
  :root:not([data-demo]).lsd-on.lhs-on.lite-has-chart .stage .platearea { box-sizing:border-box; justify-content:center;
    padding-top:calc(var(--ldesk-head, 74px) + 14px - var(--lite-head, 18px) + 8px); padding-bottom:calc(var(--lite-peek, 130px) + 14px); }
  :root:not([data-demo]).lsd-on.lhs-on.lite-has-chart .stage .dialbox svg,
  :root:not([data-demo]).lsd-on.lhs-on.lite-has-chart .stage .dialbox svg:is(*) {
    width:min(100%, calc(100svh - var(--ldesk-head, 74px) - var(--lite-peek, 130px) - 28px), 1000px) !important; }
  :root:not([data-demo]).lsd-on.lhs-on.lite-has-chart .stage { max-width:1600px;
    grid-template-columns:minmax(0, min(calc(100svh - var(--ldesk-head, 74px) - var(--lite-peek, 130px) - 28px), 1000px)) minmax(340px, 420px); }
}


/* ---- MAHAKAAL, THE PERSON (2026-10-07): Do · Don't, and Love · right now (ui-lite-mahakaal.js lmk3Todo, lmk3Love) ---- */
.mk3-dd { display:grid; gap:10px; }
@media (min-width:420px) { .mk3-dd { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:14px; } }
.mk3-dd ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; align-content:start; }
.mk3-dd li { display:grid; grid-template-columns:18px minmax(0, 1fr); gap:8px; align-items:start; font:400 13.5px/1.45 var(--body); color:var(--lmk-ink); }
.mk3-dd li svg { width:16px; height:16px; margin-top:2px; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.mk3-do li svg { stroke:var(--lmk-good); }
.mk3-dont li svg { stroke:var(--lmk-heavy); }
.mk3-dd li b { font-weight:600; font-variant-numeric:tabular-nums; }
.mk3-love { position:relative; overflow:hidden; }
.mk3-love::before { content:""; position:absolute; inset:0 0 auto; height:70px; pointer-events:none; background:radial-gradient(90% 100% at 0% 0%, rgba(238,136,162,.12), transparent 70%); }
.mk3-love > * { position:relative; }
.mk3-tone { flex:0 0 auto; padding:4px 9px; border-radius:999px; font:600 10.5px/1 var(--body); letter-spacing:.04em; }
.mk3-tone.t-warm { color:#F2A9BD; background:rgba(238,136,162,.14); }
.mk3-tone.t-tense { color:#E9A07A; background:rgba(224,122,95,.14); }
.mk3-tone.t-mixed { color:#C6B3F2; background:rgba(150,130,230,.15); }
.mk3-tone.t-quiet { color:var(--lmk-dim); background:rgba(255,255,255,.05); }
:root[data-theme="light"] .mk3-tone.t-warm { color:#A63A5C; background:rgba(176,56,94,.1); }
:root[data-theme="light"] .mk3-tone.t-tense { color:#A04A22; background:rgba(176,74,34,.1); }
:root[data-theme="light"] .mk3-tone.t-mixed { color:#5B48A8; background:rgba(91,72,168,.1); }
:root[data-theme="light"] .mk3-tone.t-quiet { background:rgba(40,30,60,.05); }
.mk3-min { display:flex; align-items:baseline; gap:8px; margin:0; font:500 13px/1.45 var(--body); color:var(--lmk-ink2, var(--lmk-ink)); }
.mk3-min .mk3-d { flex:none; transform:translateY(1px); }


/* ---- MAHAKAAL IN FOLDS (2026-10-07): every section a card of its own, shut when the reading opens (ui-lite-mahakaal.js lmk3Fold) ---- */
.mk3-top { margin-top:-2px; }
/* quiet (the user, 2026-10-09: "too loud and prominent … still too cluttered"): the reminder a small link under the line */
.mk3-top.quiet { margin-top:-6px; }
.mk3-top.quiet .mk3-go { flex:none; min-height:30px; padding:0; gap:6px; border-radius:0; background:none; box-shadow:none;
  font:600 12.5px/1 var(--body); color:rgba(var(--lmk-gold-rgb), .85); }
.mk3-top.quiet .mk3-go svg { width:14px; height:14px; }
.mk3-top.quiet .mk3-go:hover { color:var(--lmk-gold); }
/* the reading's rewards in one line (2026-10-09) */
.mk3-rw { display:flex; align-items:center; gap:7px; margin:-2px 0 0; font:500 12.5px/1.35 var(--body); color:var(--lmk-ink2); }
.mk3-rw b { font-weight:700; color:rgba(var(--lmk-gold-rgb), .95); }
.mk3-rw .ltk-badge { flex:none; }
.mk3-rw.done b { color:var(--lmk-good); }
/* the check in one quiet line, no pills */
.mk3-kick { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0; font:600 10.5px/1.35 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--lmk-dim); }
.mk3-kick b { font-weight:700; }
.mk3-kick b::before { content:"·"; margin-right:8px; color:var(--lmk-dim); }
.mk3-kick b.ok { color:var(--lmk-good); }
.mk3-kick b.no { color:var(--lmk-heavy); }
.mk3-folds { display:grid; gap:8px; }
.mk3-f { border-radius:18px; overflow:hidden; background:var(--lmk-card); box-shadow:inset 0 0 0 1px var(--lmk-line); }
.mk3-f > summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:32px minmax(0, 1fr) auto 16px; align-items:center; gap:11px; padding:12px 13px;
  -webkit-tap-highlight-color:transparent; }
.mk3-f > summary::-webkit-details-marker { display:none; }
.mk3-f > summary:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:-2px; border-radius:18px; }
.mk3-ftx { display:grid; gap:2px; min-width:0; }
.mk3-ftx b { font:600 14px/1.25 var(--body); color:var(--lmk-ink); }
.mk3-ftx em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 12px/1.3 var(--body); font-style:normal; color:var(--lmk-dim); }
.mk3-f[open] > summary .mk3-ftx em { display:none; }
.mk3-f[open] > summary .lmk-chev { transform:rotate(180deg); }
.mk3-f > summary .lmk-tk { margin:0; }
.mk3-fb { display:grid; gap:10px; padding:0 13px 14px; }
.mk3-fb > .mk3-blk, .mk3-fb > .mk3-call { padding:0; border-radius:0; background:none; box-shadow:none; }
.mk3-fb > .mk3-blk::before { display:none; }
.mk3-fb > .mk3-blk > .mk3-k:first-child, .mk3-fb > .mk3-blk > .mk3-kh:first-child > .mk3-k { display:none; }
.mk3-fb > .mk3-blk > .mk3-kh:first-child { justify-content:flex-end; }
.mk3-ftx b .mk3-tone { margin-left:8px; vertical-align:2px; padding:3px 8px; font-size:10px; }
.mk3-fb > .mk3-love > .mk3-kh:first-child { display:none; }

/* =====================================================================
   HEALTH SCAN ON THE PERSONAL PROFILE (ui-lite-hx.js, 2026-10-08)
   =====================================================================
   The Summary's rows name what this person carries — the everyday name first, where it sits and its seat under it, a tag for how far
   it stands out among people; the witnesses' dots are the old hero's own. */
.lhx-hero .lst-headline { font-size:clamp(22px, 5.6vw, 31px); }
.lhx-lead { margin:-6px 0 0; font:500 12.5px/1.4 var(--body); color:var(--ink-2); text-wrap:pretty; }
.lsx-n .lhx-at { flex-basis:100%; font:400 11.5px/1.3 var(--body); color:var(--dim); }
.lsx-n .lhx-at .ldx-now-dot { display:inline-block; margin:0 5px 0 1px; vertical-align:1px; }
.lsx-n em.lhx-tag.common { color:var(--dim); background:none; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
.lhx-scale { margin:0; font:400 11.5px/1.45 var(--body); color:var(--dim); text-wrap:pretty; }
.lhx-scale:empty { display:none; }
.lhx-scale b { font-weight:600; color:var(--ink-2); }
.lhx-find-k { font:600 9.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lhx-find b .ldx-sk { font-weight:400; color:var(--ink-2); }
.lhx-mrow.yours { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 34%, transparent); }
.lhx-mrow.yours.sel { box-shadow:inset 0 0 0 1.5px var(--brass-hi); }
.lhx-ev cite, .lhx-tissue cite, .ldx-mrow-bd .ldx-sec > p > cite { margin-left:4px; font:500 10.5px/1.2 var(--body); font-style:normal; letter-spacing:.03em; color:var(--dim); }
.lhx-ev li.k-meet { font-weight:500; }
.lhx-tissue { margin-bottom:4px; }
.lhx-tissue p { margin:0; font:400 13px/1.45 var(--body); color:var(--ink); text-wrap:pretty; }
.ldx-chipbtn.lhx-chip i { background:var(--brass-hi); }
/* today's list in Your day: Swaasthya's rows, in the Health Scan's colours */
.lhx-clist { --ldx-b:#EBC66A; --ldx-c:#7FB6CF; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lhx-clist { --ldx-b:#946A00; --ldx-c:#2C6D8A; } }
:root[data-theme="light"] .lhx-clist { --ldx-b:#946A00; --ldx-c:#2C6D8A; }
.lhx-clist li { display:grid; grid-template-columns:28px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:color-mix(in srgb, var(--ink) 3.5%, transparent); }
.lhx-clist i { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:var(--ldx-c); background:color-mix(in srgb, var(--ldx-c) 12%, transparent); }
.lhx-clist li.s-breath i, .lhx-clist li.s-both i { color:var(--ldx-b); background:color-mix(in srgb, var(--ldx-b) 12%, transparent); }
.lhx-clist i svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lhx-clist b { display:block; font:500 13.5px/1.25 var(--body); color:var(--ink); text-wrap:pretty; }
.lhx-clist em { display:block; margin-top:2px; font:400 12px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lhx-clist .lsv-pill { max-width:124px; padding:4px 9px; border-radius:999px; font:600 10.5px/1.2 var(--body); text-align:center; white-space:normal;
  color:var(--ldx-c); background:color-mix(in srgb, var(--ldx-c) 11%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-c) 30%, transparent); }
.lhx-clist li.s-breath .lsv-pill { color:var(--ldx-b); background:color-mix(in srgb, var(--ldx-b) 11%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ldx-b) 32%, transparent); }
.lhx-clist li.s-both .lsv-pill { color:var(--ink); background:linear-gradient(90deg, color-mix(in srgb, var(--ldx-c) 26%, transparent), color-mix(in srgb, var(--ldx-b) 26%, transparent)); box-shadow:none; }
.lhx-clist li:not(.on) b { font-weight:400; }

/* =====================================================================
   MAHAKAAL, THE CHAT (ui-lite-mkchat.js, 2026-10-08)
   =====================================================================
   A dark sanctum: a sunray dial's face behind the thread (THE CHAT'S WALLPAPER, 2026-10-24), the turns of the breath as markers in their own colours, Mahakaal's
   words set out unboxed beside the tripund, the person's own in gold-edged glass, and the composer as a glass bar that keeps the turn's
   two questions as two lamps. */
.lmk-sheet.mkc-on { height:min(94svh, 920px); max-height:min(94svh, 920px); }   /* its ground and the thread's wallpaper: THE CHAT'S WALLPAPER below */
.lmk-sheet.mkc-on::after { display:none; }
/* the reading in full: "‹ Chat" as a quiet link, the close as a bare mark (the user, 2026-10-09: "still too cluttered … elegant") */
.lmk-hd.back { grid-template-columns:auto minmax(0, 1fr) 40px; gap:6px; }
.lmk-back { display:inline-flex; align-items:center; gap:1px; height:40px; padding:0 10px 0 0; border:0; border-radius:0; cursor:pointer; background:none;
  font:600 13.5px/1 var(--body); color:var(--lmk-ink2); -webkit-tap-highlight-color:transparent; }
.lmk-back svg { width:19px; height:19px; margin-left:-4px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lmk-back:hover { color:var(--lmk-gold); }
.lmk-hd.back .lmk-ttl { padding-left:6px; border-left:1px solid var(--lmk-line2); }
.lmk-hd.back .lmk-x { background:none; box-shadow:none; color:var(--lmk-ink2); }
.mkc-on .lmk-body { padding:4px 14px 18px; -webkit-mask:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%); mask:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%); }
.mkc-on .lmk-body > * { flex-shrink:0; }

/* ==== THE CHAT'S WALLPAPER: THE SUNRAY DIAL (the user, 2026-10-24: "high-class, professional, chat-native but sculpted and subtle …
   promoting clarity of the reading"; chosen from five drawn on the same thread: packed doodles, sunray dial, carved relief, breath
   light, guilloché) ====
   The sheet is a watch dial's face, for the Kaalchakra is a clock: fine brushed rays fanning from a point just above Mahakaal's name,
   a pair of light streaks across them as a sunray finish throws, a lamp-glow at the top and a whisper of grain for a matte metal. No
   shape anywhere, so nothing competes with a letter; the glass of the bubbles and cards shows the dial through it. The streaks lean
   with the hour at the place (lmkcDialLight sets --mkc-sun as the sheet opens: the morning's light from one side, the evening's from
   the other) and dim to a moonlit sheen at night (--mkc-lit). Painted once; nothing moves. The rays themselves (2026-10-25: "rays with
   inhomogeneity in width and dark shades") are painted on a canvas as the sheet opens (ui-lite-mkchat.js lmkcDialRays, --mkc-rays): two
   repeating conic gradients a third of a degree apart had aliased into thick and thin bands where they met. */
.lmk-sheet.mkc-on { --mkc-ray:rgba(255,255,255,.022); --mkc-ray2:rgba(0,0,0,.05); --mkc-lobe:255,255,255; --mkc-lobe-a:.075; --mkc-lobe-b:.06; --mkc-boxbg:#1C1D23;
  --mkc-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.075 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background:
    radial-gradient(130% 60% at 50% -8%, rgba(var(--lmk-gold-rgb), calc(.09 * var(--mkc-lit, 1))), transparent 62%),
    conic-gradient(from calc(90deg + var(--mkc-sun, 0deg)) at 50% -6%, transparent 0deg, rgba(var(--mkc-lobe), calc(var(--mkc-lobe-a) * var(--mkc-lit, 1))) 52deg,
      transparent 84deg 96deg, rgba(var(--mkc-lobe), calc(var(--mkc-lobe-b) * var(--mkc-lit, 1))) 128deg, transparent 180deg),
    var(--mkc-rays, none) 50% 0 / var(--mkc-rays-sz, 100% 100%) no-repeat,
    var(--mkc-grain) 0 0/160px 160px,
    var(--lmk-panel); }
:root[data-theme="light"] .lmk-sheet.mkc-on { --mkc-ray:rgba(120,90,30,.032); --mkc-ray2:rgba(255,255,255,.35); --mkc-lobe-a:.6; --mkc-lobe-b:.5; --mkc-boxbg:#FFFDF8; --mkc-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lmk-sheet.mkc-on { --mkc-ray:rgba(120,90,30,.032); --mkc-ray2:rgba(255,255,255,.35); --mkc-lobe-a:.6; --mkc-lobe-b:.5; --mkc-boxbg:#FFFDF8; --mkc-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
}
/* the dial runs to the phone's bottom edge (the user, 2026-10-24: "the entire chat bot screen … with only the text input box remaining
   over it without this pattern"): the composer's band is clear and keeps no rule; the box alone sits over the dial, solid */
.lmk-sheet.mkc-on .mkc-foot { background:none; border-top:0; }
.lmk-sheet.mkc-on .mkc-box { background:var(--mkc-boxbg); }
/* END THE WALLPAPER */

.mkc-dawn { display:grid; justify-items:center; gap:3px; margin:6px 0 4px; text-align:center; }
.mkc-dawn span { font:600 9.5px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--lmk-gold-rgb), .82); }
.mkc-dawn em { font:400 11.5px/1.35 var(--body); font-style:normal; color:var(--lmk-dim); }

.mkc-turn { display:flex; align-items:center; gap:10px; margin:16px 0 8px; }
.mkc-turn::before, .mkc-turn::after { content:""; flex:1 1 0; height:1px; background:linear-gradient(90deg, transparent, var(--lmk-line2)); }
.mkc-turn::after { background:linear-gradient(270deg, transparent, var(--lmk-line2)); }
.mkc-tcap { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; font:600 10.5px/1 var(--body); letter-spacing:.04em; color:var(--lmk-ink2);
  background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mkc-tcap i { width:7px; height:7px; border-radius:50%; background:var(--lmk-gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--lmk-gold) 18%, transparent); }
.mkc-tcap.s-left i { background:var(--lmk-ida); box-shadow:0 0 0 3px color-mix(in srgb, var(--lmk-ida) 20%, transparent); }
.mkc-tcap.s-right i { background:var(--lmk-ping); box-shadow:0 0 0 3px color-mix(in srgb, var(--lmk-ping) 20%, transparent); }

.mkc-row { display:grid; margin:12px 0; }
.mkc-row.you { justify-items:end; }
.mkc-row.mk { grid-template-columns:30px minmax(0, 1fr); gap:11px; align-items:start; }
.mkc-you { max-width:min(84%, 420px); padding:10px 14px 7px; border-radius:20px 20px 6px 20px;
  background:linear-gradient(180deg, rgba(var(--lmk-gold-rgb), .17), rgba(var(--lmk-gold-rgb), .07)); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .28); }
.mkc-you p { margin:0; font:400 15px/1.45 var(--body), 'Tiro Devanagari Hindi', serif; color:var(--lmk-ink); white-space:pre-wrap; overflow-wrap:anywhere; }
.mkc-you time, .mkc-mkhd time { font:500 10.5px/1 var(--body); color:var(--lmk-dim); font-variant-numeric:tabular-nums; }
.mkc-you time { display:block; margin-top:4px; text-align:right; }
.mkc-av { display:grid; place-items:center; width:30px; height:30px; margin-top:1px; border-radius:50%; background:var(--lmk-cap); box-shadow:var(--lmk-cap-sh); }
.mkc-av .lmk-tri { width:20px; height:20px; }
.mkc-mk { min-width:0; }
.mkc-mkhd { display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px; }
.mkc-mkhd b { font:400 11px/1 var(--mark, 'Marcellus', serif); letter-spacing:.26em; text-transform:uppercase; color:var(--lmk-gold); }
.mkc-stance { padding:4px 9px; border-radius:999px; font:600 10.5px/1.1 var(--body); color:var(--lmk-ink2); background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.mkc-stance.go { color:var(--lmk-good); background:color-mix(in srgb, var(--lmk-good) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-good) 38%, transparent); }
.mkc-stance.pre { color:var(--lmk-gold); background:rgba(var(--lmk-gold-rgb), .1); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .4); }
.mkc-stance.wt { color:var(--lmk-heavy); background:color-mix(in srgb, var(--lmk-heavy) 11%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-heavy) 36%, transparent); }
.mkc-a { margin:7px 0 0; font:400 16px/1.58 var(--body), 'Tiro Devanagari Hindi', serif; color:var(--lmk-ink); text-wrap:pretty; overflow-wrap:anywhere; }
.mkc-a.dim { font-size:14.5px; color:var(--lmk-ink2); }
.mkc-tip { display:flex; align-items:baseline; gap:9px; margin:9px 0 0; font:500 13.5px/1.45 var(--body), 'Tiro Devanagari Hindi', serif; color:var(--lmk-ink2); }
.mkc-tip i { flex:none; width:7px; height:7px; transform:translateY(-1px) rotate(45deg); background:var(--lmk-gold); border-radius:1.5px; }
/* the direct answer, in its own outlined box, with Mahakaal's voice beside it (2026-10-14) */
.mkc-direct { display:flex; align-items:center; gap:12px; margin:12px 0 2px; padding:12px 12px 12px 16px; border-radius:16px;
  background:rgba(var(--lmk-gold-rgb), .07); box-shadow:inset 0 0 0 1.5px rgba(var(--lmk-gold-rgb), .62), 0 8px 22px -16px rgba(var(--lmk-gold-rgb), .7); }
.mkc-dtx { flex:1; min-width:0; display:grid; gap:4px; }
/* the kundali under an answer (2026-10-15): the Jyotish page's own drawing, its four charts a tap apart; the sheet's colours */
.mkc-kchart { display:grid; gap:10px; margin:12px 0 2px; }
.mkc-ktabs { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; padding:3px; border-radius:999px; background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line); }
.mkc-ktabs button { min-height:34px; border:0; border-radius:999px; background:transparent; color:var(--lmk-ink2); font:600 12.5px/1 var(--body); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mkc-ktabs button[aria-selected="true"] { background:var(--lmk-gold); color:#1B1406; }
.mkc-ktabs button:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:2px; }
.mkc-kchart .lpr-kundali { max-width:360px; width:100%; justify-self:center; padding:10px; border-radius:18px; background:var(--lmk-card); box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.mkc-kchart .lpr-kundali .kl-house1 { fill:rgba(var(--lmk-gold-rgb), .12); }
.mkc-kchart .lpr-kundali .kl-lines { stroke:var(--lmk-line2); }
.mkc-kchart .lpr-kundali .kl-num { fill:var(--lmk-dim); }
.mkc-kchart .lpr-kundali .kl-asc { fill:var(--lmk-gold); }
/* the couple's selectors and the journey's place, in the chat (2026-10-15) */
.mkc-cpl-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:10px 0 6px; }
.mkc-cpl-p { display:grid; gap:5px; min-width:0; }
.mkc-cpl-p span { font:600 10px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--lmk-dim); }
.mkc-cpl-p select { width:100%; min-width:0; min-height:42px; padding:0 10px; border-radius:12px; border:1px solid var(--lmk-line2); background:var(--lmk-well); color:var(--lmk-ink); font:500 14px/1.2 var(--body); text-transform:none; letter-spacing:0; }
.mkc-cpl-p select:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:2px; }
.mkc-cpl-mid { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin:2px 0 8px; }
.mkc-cpl-swap { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px; border-radius:999px; border:1px solid rgba(var(--lmk-gold-rgb), .5); background:transparent; color:var(--lmk-ink); font:600 12px/1 var(--body); cursor:pointer; }
.mkc-cpl-swap svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mkc-chip svg { display:inline-block; width:15px; height:15px; margin:0 6px 0 0; vertical-align:-3px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mkc-cpl-swap[disabled] { opacity:.45; cursor:default; }
.mkc-cpl-miss { color:var(--lmk-ink); }
.mkc-koota { list-style:none; margin:10px 0 4px; padding:0; display:grid; gap:6px; }
.mkc-koota li { display:grid; grid-template-columns:minmax(0, 7.5em) 1fr auto; align-items:center; gap:8px; font:500 12.5px/1.2 var(--body); color:var(--lmk-ink2); }
.mkc-koota i { display:block; height:6px; border-radius:999px; background:var(--lmk-line2); overflow:hidden; }
.mkc-koota i b { display:block; height:100%; border-radius:999px; background:var(--lmk-gold); }
.mkc-koota em { font-style:normal; font-variant-numeric:tabular-nums; color:var(--lmk-ink); }
.mkc-trip { display:grid; gap:6px; margin:10px 0 8px; }
.mkc-trip input { min-height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--lmk-line2); background:var(--lmk-well); color:var(--lmk-ink); font:500 15px/1 var(--body); }
.mkc-trip input:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:2px; }
.mkc-tsug { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.mkc-tsug button { width:100%; display:grid; gap:2px; text-align:left; padding:9px 12px; border:0; border-radius:10px; background:var(--lmk-well); color:var(--lmk-ink); cursor:pointer; }
.mkc-tsug button b { font:600 14px/1.2 var(--body); }
.mkc-tsug button span { font:400 11.5px/1.3 var(--body); color:var(--lmk-dim); }
.mkc-tnone { font:400 12px/1.4 var(--body); color:var(--lmk-dim); padding:4px 2px; }
.mkc-dk { font:700 10px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--lmk-gold); }
.mkc-dtx p { margin:0; font:600 16.5px/1.4 var(--body), 'Tiro Devanagari Hindi', serif; color:var(--lmk-ink); text-wrap:pretty; overflow-wrap:anywhere; }
.mkc-say { flex:none; position:relative; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer;
  color:var(--lmk-gold); background:rgba(var(--lmk-gold-rgb), .12); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .55); -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, background .2s ease; }
.mkc-say:active { transform:scale(.93); }
.mkc-say:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:3px; }
.mkc-say svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mkc-say svg path:first-child { fill:currentColor; fill-opacity:.25; }
.mkc-say.s-play { color:#1B1406; background:var(--lmk-gold); box-shadow:0 0 0 5px rgba(var(--lmk-gold-rgb), .18); }
.mkc-say.s-play svg rect { fill:currentColor; stroke:none; }
.mkc-say.s-play::after { content:""; position:absolute; inset:-5px; border-radius:50%; box-shadow:0 0 0 2px rgba(var(--lmk-gold-rgb), .45); animation:mkcSay 1.6s ease-out infinite; }
@keyframes mkcSay { from { transform:scale(1); opacity:1; } to { transform:scale(1.35); opacity:0; } }
.mkc-sayspin { width:18px; height:18px; border-radius:50%; border:2px solid rgba(var(--lmk-gold-rgb), .3); border-top-color:var(--lmk-gold); animation:mkcSpin .8s linear infinite; }
@keyframes mkcSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mkc-say.s-play::after { animation:none; } .mkc-sayspin { animation-duration:2.4s; } }
/* a helpline calls, a link opens (2026-10-14): in everything Mahakaal writes */
.lmk-link { color:var(--lmk-gold, var(--brass-hi)); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; -webkit-tap-highlight-color:transparent; }
.lmk-link.tel { white-space:nowrap; }
.lmk-link:focus-visible { outline:2px solid var(--lmk-gold, var(--brass-hi)); outline-offset:2px; border-radius:3px; }
.mkc-help { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.mkc-help a { display:grid; gap:2px; padding:9px 12px; border-radius:14px; text-decoration:none; color:var(--lmk-ink2); background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line2); font:400 12px/1.3 var(--body); }
.mkc-help a b { font:700 16px/1.1 var(--body); color:var(--lmk-gold); letter-spacing:.04em; }
.mkc-why { margin-top:9px; }
.mkc-why summary { display:inline-flex; align-items:center; gap:6px; list-style:none; cursor:pointer; font:600 11px/1.2 var(--body); color:var(--lmk-dim); }
.mkc-why summary::-webkit-details-marker { display:none; }
.mkc-why summary svg { width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .2s ease; }
.mkc-why[open] summary svg { transform:rotate(180deg); }
.mkc-wb { display:grid; gap:6px; margin-top:7px; padding:10px 12px; border-radius:12px; background:var(--lmk-well); }
.mkc-wb p { margin:0; font:400 12.5px/1.45 var(--body); color:var(--lmk-ink2); }
.mkc-src { display:flex; align-items:center; gap:5px; margin-top:9px; font:500 10.5px/1.3 var(--body); color:var(--lmk-dim); }
.mkc-src.g { color:rgba(var(--lmk-gold-rgb), .85); }
.mkc-src .ltk-badge, .mkc-price .ltk-badge, .mkc-open .ltk-badge { flex:none; }

.mkc-k { display:block; font:600 9.5px/1.2 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--lmk-dim); }
.mkc-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.mkc-chip { min-height:36px; padding:8px 13px; border:0; border-radius:16px; cursor:pointer; text-align:left; color:var(--lmk-ink); font:500 13.5px/1.35 var(--body);
  background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line2); transition:background .15s ease, box-shadow .15s ease, transform .12s ease; }
.mkc-chip:hover { background:rgba(var(--lmk-gold-rgb), .08); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .36); }
.mkc-chip:active { transform:scale(.98); }
.mkc-chips.sm .mkc-chip { min-height:32px; padding:6px 11px; font-size:12.5px; color:var(--lmk-ink2); }
.mkc-presets { margin:18px 0 6px 41px; }
.mkc-presets.after { margin-top:6px; }
.mkc-presets.after .mkc-chip { min-height:32px; padding:6px 11px; font-size:12.5px; color:var(--lmk-ink2); }
.mkc-chip.more { display:inline-flex; align-items:center; gap:6px; color:rgba(var(--lmk-gold-rgb), .95); background:transparent; box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .34); }
.mkc-chip.more svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
/* BREATH FIRST: the day's breath and today's Swara Code, heading each answer */
.mkc-bs { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mkc-bs span { display:inline-flex; align-items:center; gap:6px; padding:4px 9px 4px 8px; border-radius:999px; font:600 10.5px/1.2 var(--body); color:var(--lmk-ink2);
  background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mkc-bs em { font-style:normal; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:9px; color:var(--lmk-dim); }
.mkc-bs i { flex:none; width:7px; height:7px; border-radius:50%; background:var(--lmk-gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--lmk-gold) 18%, transparent); }
.mkc-bs .s-left i { background:var(--lmk-ida); box-shadow:0 0 0 3px color-mix(in srgb, var(--lmk-ida) 20%, transparent); }
.mkc-bs .s-right i { background:var(--lmk-ping); box-shadow:0 0 0 3px color-mix(in srgb, var(--lmk-ping) 20%, transparent); }
.mkc-bs .s-none i { background:transparent; box-shadow:inset 0 0 0 1.3px var(--lmk-dim); }
/* REALIGN PROGRESS: the Health Scan, usually and today — each finding your breath carries, and today's state of it */
.lraH-card { display:grid; gap:14px; }
.lraH-big { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.lraH-big b { font:600 34px/1 var(--display); letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; }
.lraH-big b em { font-style:normal; font-size:.5em; font-weight:500; color:var(--ink-2); }
.lraH-big b.good { color:var(--jade); } .lraH-big b.mid { color:var(--brass-hi); } .lraH-big b.far { color:var(--sindoor); } .lraH-big b.none { color:var(--dim); }
.lraH-big span { flex:1 1 200px; font:500 13.5px/1.4 var(--body); color:var(--ink-2); }
.lraH-rows { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.lraH-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:'t s' 'u s'; align-items:center; gap:3px 10px; width:100%; padding:10px 12px; border:0; border-radius:14px;
  cursor:pointer; text-align:left; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); color:inherit; }
.lraH-t { grid-area:t; display:grid; gap:2px; min-width:0; }
.lraH-t b { font:600 14px/1.3 var(--body); color:var(--ink); }
.lraH-t small { font:500 11.5px/1.3 var(--body); color:var(--dim); }
.lraH-u { grid-area:u; justify-self:start; padding:3px 8px; border-radius:999px; font:600 10.5px/1.2 var(--body); color:var(--ink-2); background:var(--st-tile-hi); }
.lraH-s { grid-area:s; padding:5px 10px; border-radius:999px; font:600 11.5px/1.2 var(--body); white-space:nowrap; }
.lraH-s.good { color:var(--jade); background:color-mix(in srgb, var(--jade) 14%, transparent); }
.lraH-s.mid { color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 14%, transparent); }
.lraH-s.far { color:var(--sindoor); background:color-mix(in srgb, var(--sindoor) 14%, transparent); }
.lraH-s.none { color:var(--dim); background:var(--st-tile-hi); }
.lraH-new { margin:0; display:flex; flex-wrap:wrap; gap:4px 8px; font:500 12.5px/1.4 var(--body); color:var(--ink-2); }
.lraH-new b { color:var(--ink); }
.lraH-stay { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:14px; cursor:pointer; text-align:left; color:var(--ink-2);
  background:transparent; box-shadow:inset 0 0 0 1px var(--st-line-soft); font:500 12.5px/1.4 var(--body); }
.lraH-stay span { flex:1 1 auto; } .lraH-stay b { color:var(--ink); }
.lraH-stay em { display:inline-flex; align-items:center; gap:3px; font-style:normal; font-weight:600; color:var(--brass-hi); white-space:nowrap; }
.lraH-stay svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
/* ASK MAHAKAAL from a card: the view's question, and the gold button with the tripund (Predictions); a quiet link on the home pages */
.lpr-ask { display:flex; align-items:center; gap:12px; margin:16px 0 6px; padding:12px 12px 12px 16px; border-radius:20px;
  background:linear-gradient(180deg, rgba(215,178,90,.07), rgba(215,178,90,.03)); box-shadow:inset 0 0 0 1px rgba(215,178,90,.3); }
.lpr-ask p { flex:1 1 auto; min-width:0; margin:0; font:500 13.5px/1.45 var(--body); color:var(--ink-2); text-wrap:pretty; }
.mkc-ask { flex:none; display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 15px 0 11px; border:0; border-radius:999px; cursor:pointer;
  font:600 13px/1 var(--body); color:#1A1407; background:linear-gradient(180deg, #F6DE95, #D7B25A); box-shadow:0 8px 18px -10px rgba(215,178,90,.7); -webkit-tap-highlight-color:transparent; }
.mkc-ask .lmk-tri { width:20px; height:20px; stroke:#1A1407; }
.mkc-ask:active { transform:scale(.97); }
.lhs-ask .lmk-tri { width:17px; height:17px; }
@media (max-width:420px) { .lpr-ask { flex-direction:column; align-items:stretch; } .lpr-ask .mkc-ask { align-self:flex-start; } }
/* a clarification: Mahakaal asks about the question, the options to tap; the answer small on the right */
.mkc-opts { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.mkc-opt { min-height:36px; padding:8px 13px; border:0; border-radius:14px; cursor:pointer; text-align:left; font:500 13.5px/1.3 var(--body); color:var(--lmk-ink);
  background:var(--lmk-well); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .34); transition:background .15s ease, box-shadow .15s ease, transform .12s ease; }
.mkc-opt:hover { background:rgba(var(--lmk-gold-rgb), .08); }
.mkc-opt:active { transform:scale(.98); }
.mkc-opt.on { color:#1A1407; background:linear-gradient(180deg, #F6DE95, #D7B25A); box-shadow:0 6px 14px -10px rgba(215,178,90,.7); }
.mkc-optrow { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; }
.mkc-optgo { min-height:34px; padding:0 16px; border:0; border-radius:999px; cursor:pointer; font:600 13px/1 var(--body); color:#1A1407; background:linear-gradient(180deg, #F6DE95, #D7B25A); }
.mkc-optgo:disabled { opacity:.45; cursor:default; }
.mkc-optskip { min-height:34px; padding:0 12px; border:0; border-radius:999px; cursor:pointer; font:600 12.5px/1 var(--body); color:var(--lmk-dim); background:transparent; box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.mkc-optnote { font:500 10.5px/1.3 var(--body); color:var(--lmk-dim); }
.mkc-row.you.clar .mkc-you { padding:7px 12px 5px; border-radius:16px 16px 6px 16px; }
.mkc-row.you.clar .mkc-you p { font-size:13.5px; }
/* the law, in one compact line under drink, smoke and drugs */
/* the caution behind a small "i" at the end of an answer (the user, 2026-10-09: "dont show these kind of legal things in the message. At
   the end of the response of mahakaal, just add a subtle 'caution' icon or 'i' mark for the user to see") */
.mkc-fr { display:flex; align-items:center; gap:8px; margin-top:9px; }
.mkc-fr .mkc-src { margin-top:0; }
.mkc-ci { display:grid; place-items:center; flex:none; width:28px; height:28px; margin:-6px -6px -6px auto; padding:0; border:0; border-radius:50%; cursor:pointer; background:none;
  color:var(--lmk-dim); -webkit-tap-highlight-color:transparent; }
.mkc-ci svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.mkc-ci:hover, .mkc-ci.on { color:var(--lmk-gold); }
.mkc-caut { margin:6px 0 0; padding:8px 11px; border-radius:11px; font:400 11.5px/1.45 var(--body); color:var(--lmk-ink2); background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line); }
.mkc-addp { margin:8px 0 0; font:400 12px/1.4 var(--body); color:var(--lmk-dim); }
.mkc-legal { display:flex; align-items:flex-start; gap:7px; margin:9px 0 0; padding:7px 10px; border-radius:11px; font:500 11px/1.4 var(--body); color:var(--lmk-dim);
  background:color-mix(in srgb, var(--lmk-heavy) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-heavy) 22%, transparent); }
.mkc-legal svg { flex:none; width:13px; height:13px; margin-top:1px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* Swara Realignment, offered to "what should I do" only when the app finds the person ready */
.mkc-recbox { display:grid; gap:2px; margin-top:10px; padding:11px 12px 12px; border-radius:16px; background:rgba(var(--lmk-gold-rgb), .07); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .3); }
.mkc-recbox p { margin:0; font:500 13px/1.45 var(--body); color:var(--lmk-ink2); }
.mkc-recbox .mkc-rec { justify-self:start; }
/* "which practices suit me": where the record and the tokens stand, under Mahakaal's line (ui-lite-mkchat.js lmkcPracticeBox) */
.mkc-recbox.mkc-practice .mkc-pst { margin-top:4px; font:500 12px/1.45 var(--body); color:var(--lmk-dim, var(--lmk-ink2)); }
/* the body's answer: the way to the Full Health Scan (ui-lite-mkchat.js lmkcHxCard) — its target and tokens, or the scan itself */
.mkc-recbox.mkc-hx { gap:8px; }
.mkc-hx-hd { font:600 11px/1 var(--body) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--lmk-gold, #E9CF8A) !important; }
.mkc-hx .ltk-needs { margin:2px 0 0; gap:6px; }
.mkc-hx .ltk-needs li { padding:8px 10px; }
.mkc-hx-acts { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
/* the Full Health Scan's rows under a body, mind or Realign answer (2026-10-15) */
.mkc-hx-rows { display: grid; gap: 6px; margin: 8px 0 2px; }
.mkc-hx-rows > div { display: grid; grid-template-columns: minmax(74px, 30%) 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.mkc-hx-rows > div:first-child { border-top: 0; }
.mkc-hx-rows dt { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .62; }
.mkc-hx-rows dd { margin: 0; font-size: 13.5px; line-height: 1.4; }
.mkc-hx-rows dd small { display: block; font-size: 11.5px; opacity: .66; margin-top: 2px; }
.mkc-hx-acts .mkc-rec { margin-top:2px; }
/* Raksha (2026-10-11): protection, not proof — one short view at a time, the fear before and after */
.mkc-raksha { margin-top:12px; padding:12px 12px 10px; border-radius:16px; background:rgba(242, 217, 138, .05); border:1px solid rgba(242, 217, 138, .16); display:grid; gap:9px; min-width:0; }
.mkc-rk-hd { margin:0; font:600 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--lmk-gold, #E9CF8A); }
.mkc-rk-hd span { margin-left:6px; letter-spacing:.04em; text-transform:none; font-weight:500; color:var(--lmk-dim, var(--lmk-ink2)); }
.mkc-rk-tabs { display:flex; gap:4px; flex-wrap:wrap; }
.mkc-rk-t { min-height:32px; padding:0 12px; border-radius:999px; border:1px solid rgba(255, 255, 255, .12); background:transparent; color:var(--lmk-ink2, inherit); font:500 12.5px/1 var(--body); cursor:pointer; }
.mkc-rk-t.on { background:rgba(242, 217, 138, .16); border-color:rgba(242, 217, 138, .4); color:var(--lmk-ink, inherit); }
.mkc-rk-p { display:grid; gap:7px; min-width:0; }
.mkc-rk-l { margin:0; font:500 13px/1.5 var(--body); color:var(--lmk-ink, inherit); overflow-wrap:anywhere; }
.mkc-rk-l i { font-style:italic; }
.mkc-rk-s, .mkc-rk-src { margin:0; font:500 11.5px/1.45 var(--body); color:var(--lmk-dim, var(--lmk-ink2)); }
.mkc-rk-care { margin:0; padding:7px 10px; border-radius:10px; background:rgba(255, 255, 255, .04); font:500 12.5px/1.45 var(--body); color:var(--lmk-ink, inherit); }
.mkc-rk-ch { margin:0; }
.mkc-rk-fear { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding-top:8px; border-top:1px solid rgba(255, 255, 255, .08); font:500 12.5px/1.4 var(--body); color:var(--lmk-ink2, inherit); }
.mkc-rk-n { display:flex; gap:6px; }
.mkc-rk-b { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255, 255, 255, .16); background:transparent; color:var(--lmk-ink, inherit); font:600 13px/1 var(--body); cursor:pointer; }
.mkc-rk-b.on { background:rgba(242, 217, 138, .22); border-color:rgba(242, 217, 138, .6); }
.mkc-rk-done { padding-top:8px; border-top:1px solid rgba(255, 255, 255, .08); }
:root[data-theme="light"] .mkc-raksha { background:rgba(150, 110, 20, .06); border-color:rgba(150, 110, 20, .22); }
:root[data-theme="light"] .mkc-rk-t, :root[data-theme="light"] .mkc-rk-b { border-color:rgba(0, 0, 0, .14); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .mkc-raksha { background:rgba(150, 110, 20, .06); border-color:rgba(150, 110, 20, .22); }
  :root:not([data-theme="dark"]) .mkc-rk-t, :root:not([data-theme="dark"]) .mkc-rk-b { border-color:rgba(0, 0, 0, .14); } }
.mkc-rec { display:inline-flex; align-items:center; gap:7px; min-height:36px; margin-top:10px; padding:0 14px; border:0; border-radius:999px; cursor:pointer;
  font:600 13px/1 var(--body); color:#1A1407; background:linear-gradient(180deg, #F6DE95, #D7B25A); box-shadow:0 8px 18px -10px rgba(215,178,90,.7); }
.mkc-rec svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.mkc-rec:active { transform:scale(.97); }

.mkc-card { display:grid; gap:7px; padding:15px 15px 13px; border-radius:20px;
  background:radial-gradient(130% 120% at 0% 0%, rgba(var(--lmk-gold-rgb), .13), transparent 58%), var(--lmk-card); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .22), 0 18px 34px -26px rgba(0,0,0,.7); }
.mkc-card h4 { margin:0; font:600 17px/1.3 var(--display, var(--body)); letter-spacing:-.005em; color:var(--lmk-ink); text-wrap:balance; }   /* a title, not Mahakaal's name: the app's own type */
.mkc-call { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
/* the reading card, for this person: their work by its stage, money and love (lmkcCard) */
.mkc-tf { display:grid; margin:4px 0 2px; padding:0; list-style:none; border-radius:14px; background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line); }
.mkc-tf li { display:grid; grid-template-columns:22px minmax(0, 1fr); gap:10px; align-items:start; padding:10px 12px; }
.mkc-tf li + li { border-top:1px solid var(--lmk-line); }
.mkc-ti { display:grid; place-items:center; width:22px; height:22px; color:rgba(var(--lmk-gold-rgb), .9); }
.mkc-ti svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.mkc-tt { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; margin:2px 0 0; font:600 14px/1.25 var(--body); color:var(--lmk-ink); }
.mkc-tt em { font:700 10px/1.2 var(--body); font-style:normal; letter-spacing:.09em; text-transform:uppercase; color:var(--lmk-dim); }
.mkc-tf .t-confirmed em, .mkc-tf .t-supported em, .mkc-tf .t-warm em, .mkc-tf .t-obstacles em { color:var(--lmk-good); }   /* "Against an obstacle": green (the user, 2026-10-16) */
.mkc-tf .t-tense em { color:var(--lmk-heavy); }
.mkc-tf .t-background em, .mkc-tf .t-mixed em { color:var(--lmk-dayc); }
.mkc-tl { margin:3px 0 0; font:400 13px/1.45 var(--body); color:var(--lmk-ink2); }
.mkc-feel { margin:0; font:400 14px/1.5 var(--body); color:var(--lmk-ink2); }
.mkc-open { justify-self:start; display:inline-flex; align-items:center; gap:7px; min-height:36px; margin-top:4px; padding:0 14px; border:0; border-radius:999px; cursor:pointer;
  font:600 13px/1 var(--body); color:var(--lmk-gold); background:rgba(var(--lmk-gold-rgb), .12); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .3); }
.mkc-open svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.mkc-open.pay { color:#1A1407; background:linear-gradient(180deg, #F6DE95, #D7B25A); box-shadow:0 8px 18px -10px rgba(215,178,90,.7); }
.mkc-open.pay b { font-weight:800; }
.mkc-row.focus .mkc-card { animation:mkc-arrive 2.4s ease-out 1; }
@keyframes mkc-arrive { 0% { box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .7), 0 0 0 6px rgba(var(--lmk-gold-rgb), .18); } 100% { box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .22), 0 18px 34px -26px rgba(0,0,0,.7); } }

.mkc-mk.pend .mkc-a { margin-top:6px; }
.mkc-typing { display:flex; align-items:center; gap:10px; padding:8px 0 2px; font:500 12.5px/1.3 var(--body); color:var(--lmk-dim); }
/* the waiting row centred on Mahakaal's mark (the user, 2026-10-09: "not aligned properly with the mahaakaal icon") */
.mkc-row.mk.pend { align-items:center; }
.mkc-row.mk.pend .mkc-av { margin-top:0; }
.mkc-row.mk.pend .mkc-typing { min-height:30px; padding:0; }
.mkc-typing .lkc-spin { flex:none; color:var(--lmk-gold); }

/* the box stands clear of the screen's foot (the user, 2026-10-10: "very low in position at the bottom of the screen … lifted slightly
   higher"): 14 px over the home bar on an iPhone, 18 px over the edge where there is none */
.mkc-foot { flex:none; padding:6px 10px max(18px, calc(env(safe-area-inset-bottom) + 14px)); border-top:1px solid var(--lmk-line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--lmk-panel-end) 70%, transparent), var(--lmk-panel-end)); }
.mkc-cmp { display:grid; gap:4px; }
.mkc-meter { display:flex; align-items:center; gap:7px; padding:0 8px; font:500 10.5px/1.2 var(--body); color:var(--lmk-dim); }
.mkc-dots { display:inline-flex; gap:5px; }
.mkc-dots i { width:8px; height:8px; border-radius:50%; box-shadow:inset 0 0 0 1.3px rgba(var(--lmk-gold-rgb), .5); }
.mkc-dots i.on { background:var(--lmk-gold); box-shadow:0 0 8px rgba(var(--lmk-gold-rgb), .55); }
.mkc-price { display:inline-flex; align-items:center; gap:5px; margin-left:auto; color:rgba(var(--lmk-gold-rgb), .9); white-space:nowrap; }
.mkc-box { display:grid; grid-template-columns:minmax(0, 1fr) 42px; align-items:end; gap:8px; padding:5px 5px 5px 15px; border-radius:24px;
  background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line2), 0 10px 26px -18px rgba(0,0,0,.65); transition:box-shadow .18s ease; }
.mkc-box:focus-within { box-shadow:inset 0 0 0 1.4px rgba(var(--lmk-gold-rgb), .55), 0 10px 26px -18px rgba(0,0,0,.65); }
.mkc-box textarea { display:block; width:100%; min-height:42px; max-height:112px; margin:0; padding:10px 0; border:0; outline:0; resize:none; background:transparent;
  color:var(--lmk-ink); font:400 16px/1.4 var(--body), 'Tiro Devanagari Hindi', serif; }
.mkc-box textarea::placeholder { color:var(--lmk-dim); }
.mkc-send { display:grid; place-items:center; width:42px; height:42px; padding:0; border:0; border-radius:50%; cursor:pointer; color:#1A1407;
  background:radial-gradient(circle at 50% 28%, #FBE6A6, #D6B055 70%); box-shadow:0 6px 16px -8px rgba(214,176,85,.8), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .12s ease, opacity .15s ease; }
.mkc-send:active { transform:scale(.94); }
.mkc-send:disabled { opacity:.45; cursor:default; }
.mkc-send svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.mkc-fine { margin:0; padding:0 6px; font:400 10.5px/1.35 var(--body); color:var(--lmk-dim); text-align:center; text-wrap:balance; }
.mkc-cmp.locked { display:block; }
.mkc-lock { display:flex; align-items:center; gap:11px; margin:0; padding:11px 14px; border-radius:18px; font:500 13.5px/1.45 var(--body); color:var(--lmk-ink2);
  background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line); }
.mkc-lk { flex:none; width:10px; height:10px; border-radius:50%; background:var(--lmk-gold); animation:mkc-lamp 3.2s ease-in-out infinite; }
.mkc-lk.s-left { background:var(--lmk-ida); } .mkc-lk.s-right { background:var(--lmk-ping); }
@keyframes mkc-lamp { 0%, 100% { opacity:.45; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .mkc-lk, .mkc-row.focus .mkc-card { animation:none; } }
@media (min-width:760px) { .lmk-sheet.mkc-on { width:min(100%, 640px); border-radius:28px; margin-bottom:3svh; } .mkc-on .lmk-body { padding:6px 22px 20px; } .mkc-foot { padding:8px 14px 12px; } }

/* THE OLDER HOME NEVER SHOWS (the user, 2026-10-09: "the homepage before opening showed the previous very early build shiva outline
   card with bg smoke animation"): while the swipe home is on its way (ui-lite-swipe.js lhsBoot), only the dial stands; the cards under it
   wait hidden until the swipe home takes them (never on the website's demo, which has none) */
html.lhs-coming:not(.lhs-on):not([data-demo]) .stage > :not(.platearea) { visibility:hidden !important; }

/* =====================================================================================================================
   THE RIBBON — the drawer's face while it rests — and THE MENU (ui-lite-ribbon.js; the user, 2026-10-09: designed in
   lite/dev/drawer-ribbon, then "Now build the ribbon into the app and also implement hamburger menu making sure that nothing
   breaks", and for the desktop "Make kaalchakra brand in the bottom left corner turn into hamburger menu and implement this ribbon
   style buttons as well at appropriate place so that overall symmetry and aesthetics are not broken").
   Clear night glass with no outline and no hard edge: the glass and its light are masked by the band's own shape, blurred
   (--lrb-mask, drawn by lrbShape); the breath's colours in it; coins that glide and grow at the middle. At the screen's foot on
   phones and tablets, the foot of the page settling under it; on the desktop under the main dial, in the Sky Dial's room. Its blur
   is let go while the page scrolls; nothing loops. The menu's mark is the You key's twin; its card the drawer's own glass.
   ===================================================================================================================== */
.lrb, .lrb-hb { display:none; }
html.lrb-on .lrb {
  display:block; position:fixed; z-index:61; left:0; right:0; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); height:176px;
  touch-action:pan-y; outline:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  will-change:transform, opacity; transition:opacity .5s ease, translate .32s cubic-bezier(.22,.9,.24,1);
}
.lrb {
  --lrb-mask:linear-gradient(transparent, transparent); --lrb-l:320px;
  --lrb-tint:rgba(10,10,17,.46); --lrb-crest:rgba(255,236,196,.075); --lrb-crest2:rgba(255,236,196,.012); --lrb-shade:rgba(0,0,0,.16);
  --lrb-moon:185,173,240; --lrb-gold:242,217,138; --lrb-sun:240,138,114; --lrb-dusk:8,9,12;
  --lrb-name:#F2D98A; --lrb-halo:rgba(6,7,11,.95); --lrb-halo2:rgba(6,7,11,.85); --lrb-icon:#E9CC72; --lrb-mk:#EDE6D6;
  --lrb-face:radial-gradient(115% 115% at 30% 22%, rgba(255,255,255,.20), rgba(255,255,255,.06) 40%, rgba(255,255,255,0) 58%), radial-gradient(circle at 50% 62%, #1C1E29, #0C0D13 74%);
  --lrb-face-sh:inset 0 0 0 1.2px rgba(242,217,138,.36), inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 -10px 18px rgba(0,0,0,.5), 0 12px 26px -12px rgba(0,0,0,.9);
  --lrb-face-on:inset 0 0 0 1.6px rgba(242,217,138,.9), inset 0 1.5px 0 rgba(255,255,255,.34), inset 0 -10px 18px rgba(0,0,0,.42), 0 16px 36px -14px rgba(0,0,0,.95);
  --lrb-stud:#0E0F15; --lrb-stud-ink:#9C9585;
  --lrb-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .88 .05 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* the foot of the page settles under it, so it reads over any page (phones and tablets; the desktop's has a room of its own) */
html.lrb-on .lrb::before { content:""; position:absolute; left:0; right:0; bottom:calc(-10px - env(safe-area-inset-bottom, 0px)); height:calc(100% + 34px); z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--lrb-dusk), 0), rgba(var(--lrb-dusk), .1) 22%, rgba(var(--lrb-dusk), .28) 44%, rgba(var(--lrb-dusk), .5) 70%, rgba(var(--lrb-dusk), .68));
  transition:opacity .5s ease; }
/* the drawer up, or a field being typed in: the ribbon steps down out of the way; at rest the drawer itself is out of sight */
/* it steps aside for the keys only while they are up (lite-kb, ui-lite-keyboard.js), not for a field merely focused: a phone's keys
   closed by the back gesture leave the field focused, and the ribbon stayed away until a refresh (the user, 2026-10-12) */
html.lrb-on.litedrawer-open .lrb, html.lrb-on.lrb-typing.lite-kb .lrb { opacity:0; translate:0 22px; pointer-events:none; }
html.lrb-on.lite-has-chart .litedrawer[data-state="peek"] { transform:translateY(100%); }

/* MAHAKAAL ALONE, NO BAND (the user, 2026-10-18: "remove the bg of the ribbon where now single mahakaal buttn is there"): the coin and its
   name only — no glass, no light along it, no glow under it, no dusk over the page's foot */
.lrb.lrb-one .lrb-glow, .lrb.lrb-one .lrb-glass, .lrb.lrb-one .lrb-light, .lrb.lrb-one .lrb-dots { display:none; }
html.lrb-on .lrb.lrb-one::before { display:none; }
.lrb.lrb-one .lrb-cl.mid { padding:5px 11px 5px calc(11px + .16em); border-radius:999px; background:rgba(12,11,17,.78); box-shadow:0 8px 18px -10px rgba(0,0,0,.8); text-shadow:none; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  margin-top:3px; font-size:10px !important; font-weight:700; line-height:1; letter-spacing:.16em; }   /* ONE COIN, ONE PLACE (below): no outline, SwaraTantra's Start Kriya type */   /* its name in a small capsule: read over any card, with no band */
:root[data-theme="light"] .lrb.lrb-one .lrb-cl.mid { background:rgba(255,251,242,.88); }
.lrb-glow { position:absolute; left:calc(50% - var(--lrb-l) * .27); width:calc(var(--lrb-l) * .54); bottom:24px; height:92px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--lrb-gold), .2), rgba(var(--lrb-gold), .06) 55%, transparent); filter:blur(12px); opacity:.9; }
.lrb-glass { position:absolute; inset:0; pointer-events:none;
  -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%);
  background:var(--lrb-grain),
    linear-gradient(180deg, var(--lrb-crest) 70px, var(--lrb-crest2) 104px, rgba(0,0,0,0) 124px, var(--lrb-shade) 150px),
    linear-gradient(90deg, rgba(var(--lrb-moon), .15) calc(50% - var(--lrb-l) * .47), rgba(var(--lrb-moon), .045) calc(50% - var(--lrb-l) * .22), rgba(var(--lrb-gold), .08) 50%,
      rgba(var(--lrb-sun), .045) calc(50% + var(--lrb-l) * .22), rgba(var(--lrb-sun), .13) calc(50% + var(--lrb-l) * .47)),
    var(--lrb-tint);
  -webkit-mask:var(--lrb-mask) 0 0 / 100% 100% no-repeat; mask:var(--lrb-mask) 0 0 / 100% 100% no-repeat; }
.lrb-light { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;
  -webkit-mask:var(--lrb-mask) 0 0 / 100% 100% no-repeat; mask:var(--lrb-mask) 0 0 / 100% 100% no-repeat; }
.lrb-lean { transition:transform .45s cubic-bezier(.2,.8,.2,1); }
/* while the page scrolls: faint at once, and back when the page rests (the user, 2026-10-09: "make sure that these footer buttons becomes
   transparent upon page scroll"). The whole ribbon fades as ONE layer (its own, will-change above): the compositor's alone, nothing
   repainted while the page moves under it — the parts faded one by one, its glass blur dropped and taken up again, cost a phone frames
   (2026-10-09, a 90-day record at a fourth of the speed: 783 ms frames scrolling with it, 283 without) */
html.lrb-on .lrb.quiet { opacity:.28; transition-duration:.2s; }
.lrb.quiet .lrb-name { opacity:0; }
/* and its glass lets go of its blur while the page moves under it: a blur over moving content is drawn again every frame */
.lrb.quiet .lrb-glass { -webkit-backdrop-filter:none; backdrop-filter:none; }

.lrb-dots { position:absolute; inset:0; pointer-events:none; }
.lrb-dot { position:absolute; left:0; top:0; width:3px; height:3px; margin:-1.5px 0 0 -1.5px; border-radius:50%; background:rgba(var(--lrb-gold), .55); }
/* the label in the app's own type, the swipe tabs' (.lhs-rail button), lit as the tab on show is (the user, 2026-10-09: "on the ribbon
   footer button labels, use the original theme"; Mahakaal's own type is for its name in its chat alone) */
.lrb-name { position:absolute; left:0; right:0; text-align:center; pointer-events:none; white-space:nowrap;
  font:600 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--lrb-name);
  text-shadow:0 0 6px var(--lrb-halo), 0 0 16px var(--lrb-halo2), 0 0 18px rgba(var(--lrb-gold), .4); transition:opacity .22s ease, transform .22s ease; }
/* the name in a clearing of the page's own colour, faded to nothing at its edge, so a page's words behind it never run through it */
.lrb-name span { display:inline-block; padding:11px 64px 10px calc(64px + .14em);
  background:radial-gradient(closest-side, rgba(var(--lrb-dusk), .95), rgba(var(--lrb-dusk), .82) 50%, rgba(var(--lrb-dusk), .4) 78%, rgba(var(--lrb-dusk), 0)); }
.lrb-name.out { opacity:0; transform:translateY(4px); }
/* each coin's name under it (2026-10-14): the name over the crest gives way to them */
html.lrb-on .lrb .lrb-name { display:none; }
.lrb-labs { position:absolute; inset:0; pointer-events:none; transition:opacity .22s ease; }
.lrb.quiet .lrb-labs { opacity:0; }
.lrb-cl { position:absolute; left:0; top:0; display:block; max-width:62px; text-align:center; white-space:normal; line-height:1.12;
  font-family:var(--body); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb, var(--lrb-name) 78%, transparent);
  text-shadow:0 0 5px var(--lrb-halo), 0 0 12px var(--lrb-halo2); }
.lrb-cl b { font-weight:inherit; display:inline; }
.lrb-cl.mid { max-width:none; white-space:nowrap; color:var(--lrb-name); letter-spacing:.12em; text-shadow:0 0 6px var(--lrb-halo), 0 0 16px var(--lrb-halo2), 0 0 18px rgba(var(--lrb-gold), .4); }
/* only the middle coin's name, under it (the user, 2026-10-14: "Dont need to show the text label for all ribbon buttons at once. Only the
   centered one label should be there"): the others stay unseen, and the middle one's fades in as a coin settles there */
.lrb-cl:not(.mid) { visibility:hidden !important; }
/* a clear gap under the coin (the user, 2026-10-14: "enhance the gap between the ribbon button and Text label"): 12px, was 5 */
.lrb-cl.mid { margin-top:7px; animation:lrbClIn .28s ease both; }
@keyframes lrbClIn { from { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .lrb-cl.mid { animation:none; } }

/* ---- the coins ---- */
.lrb-coins { position:absolute; inset:0; }
.lrb-c { position:absolute; left:0; top:0; width:88px; height:88px; margin:0; padding:0; border:0; background:none; border-radius:50%; cursor:pointer;
  color:inherit; font:inherit; transform-origin:50% 50%; -webkit-tap-highlight-color:transparent; outline:none; }
.lrb-c::before { content:""; position:absolute; inset:-16%; border-radius:50%; }      /* a touch more room to tap than the coin shows */
.lrb-c:focus-visible .lrb-face { box-shadow:0 0 0 3px rgba(var(--lrb-gold), .9); }
.lrb-aura { position:absolute; inset:-34%; border-radius:50%; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(closest-side, rgba(var(--lrb-gold), .42), rgba(var(--lrb-gold), .12) 55%, transparent 75%); }
.lrb-c.is-on .lrb-aura { opacity:.85; }
.lrb-face { position:absolute; inset:0; border-radius:50%; display:grid; place-items:center; overflow:hidden; background:var(--lrb-face); box-shadow:var(--lrb-face-sh);
  transition:box-shadow .3s ease, transform .18s ease; }
.lrb-c.is-on .lrb-face { box-shadow:var(--lrb-face-on); }
.lrb-face::after { content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%); background-size:260% 100%; background-position:var(--glint, 100%) 0; }
.lrb-face > svg { position:relative; width:44%; height:44%; fill:none; stroke:var(--lrb-icon); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(var(--lrb-gold), .28)); }
.lrb-c:active .lrb-face { transform:scale(.95); }
@media (hover:hover) { .lrb-c:hover .lrb-face { filter:brightness(1.12); } }
/* Realign: the gold cap, only once the person is ready (lrbStates; the user, 2026-10-09: "Only highlight it (yellow gold fill) only if
   user is ready"); until then glass like the rest */
.lrb-c.gold .lrb-face { background:radial-gradient(circle at 50% 26%, #FCEBB2, #E2BE64 52%, #B28A35 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.65), inset 0 -8px 14px rgba(90,60,10,.35), 0 14px 30px -12px rgba(214,176,85,.75); }
.lrb-c.gold.is-on .lrb-face { box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -8px 14px rgba(90,60,10,.32), 0 0 0 2px rgba(255,236,180,.55), 0 18px 40px -14px rgba(214,176,85,.9); }
.lrb-c.gold .lrb-face > svg { stroke:#2A1D05; filter:none; }
/* Mahakaal: the tripund in ash, the bindu in sindoor */
.lrb-c.mk .lrb-face > svg { width:52%; height:52%; fill:none; stroke:var(--lrb-mk); stroke-width:1.9; filter:none; }
.lrb-c.mk .lrb-face > svg circle { fill:#D9452B; stroke:none; filter:drop-shadow(0 0 4px rgba(217,69,43,.8)); }
/* the Wallet: the real Swara token is its face */
.lrb-c.coin .lrb-face { background:none; box-shadow:0 12px 26px -12px rgba(0,0,0,.9); }
.lrb-c.coin.is-on .lrb-face { box-shadow:0 0 0 1.6px rgba(var(--lrb-gold), .85), 0 16px 36px -14px rgba(0,0,0,.95); }
.lrb-c.coin .lrb-face > svg { width:100%; height:100%; fill:initial; stroke:initial; stroke-width:initial; filter:none; }
/* Health Scan while it waits for Swara Realignment: a lock at its foot, as the console's stud; Breath Tap shut with the turn */
.lrb-stud { display:none; }
.lrb-c.is-locked .lrb-stud { display:grid; place-items:center; position:absolute; left:50%; bottom:8%; width:28%; height:28%; translate:-50% 0; border-radius:50%;
  background:var(--lrb-stud); box-shadow:inset 0 0 0 1px rgba(var(--lrb-gold), .4); }
.lrb-stud svg { width:60%; height:60%; fill:none; stroke:var(--lrb-stud-ink); stroke-width:2; stroke-linecap:round; }
.lrb-c.is-locked .lrb-face > svg, .lrb-c.is-shut .lrb-face > svg { opacity:.5; }
/* the light that goes out from a coin as it is pressed; a coin lit for a moment when asked for (Now's "Show it") */
.lrb-ring { position:absolute; left:50%; top:50%; width:88px; height:88px; margin:-44px 0 0 -44px; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 1.5px rgba(var(--lrb-gold), .8); animation:lrbRing .7s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes lrbRing { from { transform:scale(1); opacity:.9; } to { transform:scale(1.9); opacity:0; } }
.lrb-c.lrb-pulse .lrb-aura { opacity:1; animation:lrbPulse 1.1s ease-out 2; }
@keyframes lrbPulse { 0% { transform:scale(.8); opacity:1; } 100% { transform:scale(1.25); opacity:.35; } }

/* ---- the menu's mark: the You key's twin (.lme-key), across the dial (ui-lite-person.js lmePlace) ---- */
:root:not([data-demo]).lite-app.lrb-on.lite-has-chart .lrb-hb {
  display:grid; place-items:center; position:absolute; z-index:5; top:2px; left:2px; width:38px; height:38px; padding:0; border-radius:50%; cursor:pointer;
  color:var(--brass-hi); border:1px solid color-mix(in srgb, var(--brass-hi) 38%, transparent); background:var(--glass, rgba(10,10,14,.72));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 6px 18px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-tap-highlight-color:transparent; transition:transform .16s ease, border-color .2s ease; }
.lrb-hb i { position:absolute; left:50%; top:50%; width:16px; height:1.6px; margin:-.8px 0 0 -8px; border-radius:2px; background:currentColor; }
.lrb-hb i:nth-child(1) { transform:translateY(-5px); }
.lrb-hb i:nth-child(2) { width:11px; }
.lrb-hb i:nth-child(3) { transform:translateY(5px); }
.lrb-hb:hover { border-color:color-mix(in srgb, var(--brass-hi) 70%, transparent); }
.lrb-hb:active { transform:scale(.94); }
.lrb-hb:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
/* the mark it was, on both screens, while it is the menu */
html.lrb-on .lme-brandm, html.lrb-on .lme-brand { display:none !important; }
/* THE MARK BACK IN ITS CORNER (the user, 2026-10-18: "Kaalchakra branding is not available in the bottom left corner in the main
   kaalchakra app in desktop view"): on the desktop the mark stands again at the bottom-left, beside the menu's disc that took its place
   (2026-10-09), centred on the disc's middle — the logo and the name over the maker's line, still the website's link */
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  :root:not([data-demo]).lite-app.lrb-on.lite-has-chart .lme-brand { display:grid !important; justify-items:start; text-align:left;
    left:calc(max(22px, env(safe-area-inset-left, 0px)) + 56px); bottom:calc(47px + env(safe-area-inset-bottom, 0px)); transform:translateY(50%); }
  :root:not([data-demo]).lite-app.lrb-on.lite-has-chart .lme-brand .lme-brand-by { margin-left:30px; }
}
/* =====================================================================
   THE HEADER ON PHONES AND TABLETS (the user, 2026-10-14: "the hamburger menu and the user profile circular button on the header of
   the app are scrolled with the page, they should stay in the sight and should not be scrolled with the page"; "add the kaalchakra
   brand name in the header of the app and make sure the dial does not overlap it when user open the home page")
   =====================================================================
   The menu on the left, the brand in the middle, the You key on the right, fixed at the top of the screen, glass behind them once
   the page runs under them. The page's own top strip (.topbar, sticky and unseen) is as tall as the header, so the dial starts under
   it, the tabs stick under it (lhsTop: --lhs-top) and every sheet opens under it (ldMeasure: --lite-head, --lite-sheet-top). The
   desktop keeps its own row (lmeDesk). */
.lme-head { display:none; }
@media not all and (min-width:980px) and (min-aspect-ratio:5/4) {
  :root:not([data-demo]).lite-app.lite-has-chart { --lme-st:max(10px, env(safe-area-inset-top, 0px)); --lme-hh:calc(var(--lme-st) + 50px); }
  :root:not([data-demo]).lite-app.lite-has-chart .topbar { height:var(--lme-hh); }
  :root:not([data-demo]).lite-app.lite-has-chart .lme-head { display:block; position:fixed; z-index:60; top:0; left:0; right:0; height:var(--lme-hh);
    pointer-events:none; background:transparent; transition:background-color .25s ease, box-shadow .25s ease, -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease; }
  :root:not([data-demo]).lite-app.lite-has-chart.lme-scrolled .lme-head { background:var(--glass, rgba(16,17,23,.72));
    -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15); box-shadow:0 1px 0 var(--glass-line, rgba(238,232,220,.11)), 0 12px 26px -20px rgba(0,0,0,.75); }
  .lme-hbrand { position:absolute; left:50%; top:calc(var(--lme-st) + 21px); transform:translate(-50%, -50%); display:inline-flex; align-items:center; gap:8px;
    padding:6px 10px; border-radius:12px; white-space:nowrap; text-decoration:none; pointer-events:auto; -webkit-tap-highlight-color:transparent; transition:filter .2s ease; }
  .lme-hbrand .lme-logo { width:22px; height:22px; color:var(--brass); }
  .lme-hbrand .lme-brand-m { font:600 19px/1 var(--display); letter-spacing:.02em; color:var(--brass-hi); }
  .lme-hbrand .lme-brand-m span { font-weight:400; color:var(--dim); }
  .lme-hbrand:hover { filter:brightness(1.15); }
  .lme-hbrand:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
  :root:not([data-demo]).lite-app.lite-has-chart .lme-key { position:fixed; z-index:61; top:calc(var(--lme-st) + 2px); right:max(14px, env(safe-area-inset-right, 0px)); left:auto; }
  :root:not([data-demo]).lite-app.lrb-on.lite-has-chart .lrb-hb { position:fixed; z-index:61; top:calc(var(--lme-st) + 2px); left:max(14px, env(safe-area-inset-left, 0px)); bottom:auto; }
  :root:not([data-demo]).lite-app.lite-has-chart .lme-brandm { display:none !important; }
  /* tablets: the discs a little further in, the brand a size up */
  @media (min-width:600px) {
    :root:not([data-demo]).lite-app.lite-has-chart .lme-key { right:max(20px, env(safe-area-inset-right, 0px)); }
    :root:not([data-demo]).lite-app.lrb-on.lite-has-chart .lrb-hb { left:max(20px, env(safe-area-inset-left, 0px)); }
    .lme-hbrand .lme-brand-m { font-size:21px; }
    .lme-hbrand .lme-logo { width:24px; height:24px; }
  }
}
@media (prefers-reduced-motion: reduce) { .lme-head { transition:none !important; } }

/* ---- the menu's card, from its mark: under it on phones and tablets, over it on the desktop ---- */
.lrb-menu { position:fixed; inset:0; z-index:9700;
  --lrb-cbg:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 38%, rgba(255,255,255,.04)), radial-gradient(90% 60% at 0% 0%, rgba(242,217,138,.10), transparent 60%), rgba(13,14,21,.66);
  --lrb-cline:rgba(242,217,138,.24); --lrb-ink:#EEE8D8; --lrb-dim:#8E89A3; --lrb-gink:#F2D98A; --lrb-ic:radial-gradient(115% 115% at 30% 22%, rgba(255,255,255,.14), rgba(255,255,255,.03) 42%, rgba(255,255,255,0) 60%), #13141C;
  --lrb-icon2:#E9CC72; --lrb-tile:rgba(255,255,255,.035); --lrb-tline:rgba(255,255,255,.06); --lrb-rule:rgba(255,255,255,.07); --lrb-hov:rgba(255,255,255,.05);
  --lrb-veil:rgba(5,6,10,.42); --lrb-jade:#62C19E; --lrb-lilac:#B9ADF0; --lrb-lilac-rgb:160,147,219; }
.lrb-menu[hidden] { display:none; }
.lrb-veil { position:absolute; inset:0; background:var(--lrb-veil); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s ease; }
.lrb-menu.on .lrb-veil { opacity:1; }
.lrb-x { position:absolute; display:grid; place-items:center; margin:0; padding:0; border-radius:50%; cursor:pointer; color:var(--brass-hi);
  border:1px solid color-mix(in srgb, var(--brass-hi) 70%, transparent); background:var(--glass, rgba(10,10,14,.72));
  box-shadow:0 0 0 5px rgba(242,217,138,.06), 0 6px 18px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); opacity:0; transition:opacity .2s ease; }
.lrb-menu.on .lrb-x { opacity:1; }
.lrb-x:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lrb-x i { position:absolute; left:50%; top:50%; width:16px; height:1.6px; margin:-.8px 0 0 -8px; border-radius:2px; background:currentColor; }
.lrb-x i:first-child { transform:rotate(45deg); }
.lrb-x i:last-child { transform:rotate(-45deg); }
.lrb-card { position:absolute; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:16px 14px 14px; border-radius:26px;
  -webkit-backdrop-filter:blur(28px) saturate(160%); backdrop-filter:blur(28px) saturate(160%); background:var(--lrb-cbg);
  box-shadow:inset 0 0 0 1px var(--lrb-cline), inset 0 1px 0 rgba(255,255,255,.14), 0 34px 70px -28px rgba(0,0,0,.95);
  transform-origin:24px -12px; transform:translateY(-8px) scale(.96); opacity:0; transition:transform .42s cubic-bezier(.2,.8,.2,1), opacity .28s ease; }
.lrb-menu.up .lrb-card { transform-origin:24px calc(100% + 12px); transform:translateY(8px) scale(.96); }
.lrb-menu.on .lrb-card { transform:none; opacity:1; }
/* the head: the Kaalchakra brand as the app draws it everywhere (the You sheet's foot, .lme-mark; the user, 2026-10-09: "Keep the
   kaalchakra font everywhere same as the original theme") */
.lrb-mhd { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 6px 10px; }
.lrb-brand { display:inline-flex; align-items:center; gap:8px; }
.lrb-brand .lme-logo { flex:none; width:20px; height:20px; color:var(--brass); }
.lrb-mhd-k { font:500 10.5px/1 var(--body); letter-spacing:.06em; color:var(--lrb-dim); }
.lrb-list { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.lrb-it { display:grid; grid-template-columns:38px minmax(0, 1fr) auto; align-items:center; gap:12px; width:100%; padding:9px 8px; border:0; border-radius:16px; background:none;
  cursor:pointer; text-align:left; text-decoration:none; color:var(--lrb-ink); font:inherit; -webkit-tap-highlight-color:transparent; transition:background .2s ease;
  opacity:0; transform:translateY(6px); }
.lrb-menu.on .lrb-it { opacity:1; transform:none; transition:background .2s ease, opacity .35s ease var(--d, 0s), transform .45s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
.lrb-it:hover, .lrb-it:focus-visible { background:var(--lrb-hov); outline:none; }
.lrb-it:active { background:rgba(242,217,138,.08); }
.lrb-ic { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--lrb-ic); box-shadow:inset 0 0 0 1px rgba(242,217,138,.32); }
.lrb-ic svg { width:19px; height:19px; fill:none; stroke:var(--lrb-icon2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lrb-tx { min-width:0; }
.lrb-tx b { display:block; font:600 14.5px/1.25 var(--body); color:var(--lrb-ink); }
.lrb-tx em { display:block; margin-top:2px; font:400 12px/1.35 var(--body); font-style:normal; color:var(--lrb-dim); }
.lrb-end { color:var(--lrb-dim); }
.lrb-end svg { display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lrb-soon { padding:3px 7px 3px 8px; border-radius:99px; font:700 9px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--lrb-lilac);
  background:rgba(var(--lrb-lilac-rgb), .13); box-shadow:inset 0 0 0 1px rgba(var(--lrb-lilac-rgb), .36); }
.lrb-it.soon .lrb-ic svg { stroke:var(--lrb-lilac); }
/* everyone's figures, said so: a heading that names the crowd, "Total" in each, a live pulse, and a line to the person's own Wallet */
.lrb-all { margin-top:10px; padding-top:12px; border-top:1px solid var(--lrb-rule); }
.lrb-sth { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 4px 9px; }
.lrb-sth h2 { margin:0; font:600 10px/1.2 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--lrb-gink); }   /* the app's eyebrow */
.lrb-live { display:inline-flex; align-items:center; gap:6px; padding:3px 8px 3px 7px; border-radius:99px; font:700 9px/1 var(--body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--lrb-jade); background:color-mix(in srgb, var(--lrb-jade) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lrb-jade) 30%, transparent); }
.lrb-live i { width:6px; height:6px; border-radius:50%; background:var(--lrb-jade); }
.lrb-menu.on .lrb-live i { animation:lrbLive 2.4s ease-out 4; }       /* a few beats while the card is open; never a loop */
@keyframes lrbLive { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--lrb-jade) 55%, transparent); } 70%, 100% { box-shadow:0 0 0 7px transparent; } }
.lrb-st { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:8px; }
.lrb-tile { padding:11px 12px 10px; border-radius:16px; background:var(--lrb-tile); box-shadow:inset 0 0 0 1px var(--lrb-tline); opacity:0; transform:translateY(6px); }
.lrb-menu.on .lrb-tile { opacity:1; transform:none; transition:opacity .35s ease var(--d, 0s), transform .45s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
.lrb-tile span { display:flex; align-items:center; gap:6px; font:700 9.5px/1.25 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--lrb-dim); }
.lrb-tile span svg { flex:none; width:14px; height:14px; fill:none; stroke:var(--lrb-icon2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lrb-tile span .ltk-badge { flex:none; width:14px; height:14px; }
.lrb-tile b { display:block; margin-top:7px; font:600 22px/1 var(--display, var(--body)); letter-spacing:-.005em; color:var(--lrb-gink); font-variant-numeric:tabular-nums; }
.lrb-tile em { display:block; margin-top:5px; font:600 11.5px/1.2 var(--body); font-style:normal; color:var(--lrb-jade); }
.lrb-tile em.zero { color:var(--lrb-dim); }
.lrb-note { margin:9px 4px 0; font:400 11px/1.45 var(--body); color:var(--lrb-dim); }
.lrb-by { margin:10px 6px 0; font:600 9.5px/1 var(--body); letter-spacing:.24em; text-transform:uppercase; color:color-mix(in srgb, var(--lrb-dim) 75%, transparent); text-align:center; }
/* the ephemeris line the You sheet carried (2026-10-10), under the maker */
.lrb-by em { display:block; margin-top:7px; font:500 9px/1.4 var(--mono, ui-monospace, monospace); font-style:normal; letter-spacing:.14em; color:color-mix(in srgb, var(--lrb-dim) 85%, transparent); }
.lrb-by em[hidden] { display:none; }

/* ---- the desktop: the ribbon under the main dial, centred on it (--lrb-x), in the Sky Dial's room, the dial its size as it was with the
   Sky Dial (THE WIDE SCREEN WITH THE SKY DIAL; THE DESKTOP'S TOP ROW); the menu's mark at the screen's bottom-left, the You key's twin
   under it (lmeDesk sets its foot) ---- */
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  html.lrb-on .lrb { left:calc(var(--lrb-x, 50%) - 220px); right:auto; width:440px; bottom:calc(-6px + env(safe-area-inset-bottom, 0px)); }
  html.lrb-on .lrb::before { display:none; }
  html.lrb-on.lhs-on.lite-has-chart body { padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
  :root:not([data-demo]).lrb-on.lhs-on.lite-has-chart .stage .platearea { height:calc(100svh - var(--lite-head, 72px)); justify-content:center; }
  html.lrb-on.lhs-on.lite-has-chart .lhs-col { min-height:calc(100svh - var(--lite-head, 72px)); }
  :root:not([data-demo]).lrb-on.lhs-on.lite-has-chart .stage .platearea { box-sizing:border-box;
    padding-top:calc(var(--ldesk-head, 74px) + 14px - var(--lite-head, 18px) + 8px); padding-bottom:calc(var(--lite-peek, 130px) + 14px); }
  :root:not([data-demo]).lrb-on.lhs-on.lite-has-chart .stage .dialbox svg,
  :root:not([data-demo]).lrb-on.lhs-on.lite-has-chart .stage .dialbox svg:is(*) {
    width:min(100%, calc(100svh - var(--ldesk-head, 74px) - var(--lite-peek, 130px) - 28px), 1000px) !important; }
  :root:not([data-demo]).lrb-on.lhs-on.lite-has-chart .stage { max-width:1600px;
    grid-template-columns:minmax(0, min(calc(100svh - var(--ldesk-head, 74px) - var(--lite-peek, 130px) - 28px), 1000px)) minmax(340px, 420px); }
  :root:not([data-demo]).lite-app.lrb-on.lite-has-chart .lrb-hb { position:fixed; z-index:61; top:auto; left:max(22px, env(safe-area-inset-left, 0px)); bottom:26px; width:42px; height:42px; }
}
/* ---- ONE COIN, ONE PLACE (the user, 2026-10-22: "Mahakaal text label is overflowing. Make sure that start kriya and mahakaal buttons are
   same in size and position and text label should not have the outline border in any of them"): Mahakaal's coin as SwaraTantra's Start
   Kriya coin (st-home.css ONE COIN, ONE PLACE) on every screen — 72px (ui-lite-ribbon.js LRB_ONE_D), its middle 74px above the screen's
   foot, its name 8px under it, 10px clear of the foot. The ribbon's box: the coin's middle 70.4px over its foot, its name's foot 6.4px
   over it, so the box stands 3.6px up (on the desktop it stood 6px below the screen and the name was cut) ---- */
html.lrb-on .lrb.lrb-one { bottom:calc(3.6px + env(safe-area-inset-bottom, 0px)); }
/* ---- ONE DESKTOP WITH SWARATANTRA (the user, 2026-10-22: "make main kaalchakra desktop alignment of the dials just where the swaratantra
   dials are placed in the desktop view. also make the main kaalchakra dials on every swipe pages equal in size of the swaratantra dials.
   Also shift the main kaalchakra branding from the bottom left corner to the upper header just at the same position where the
   swaratantra branding is there. A perfect symmetry between both the swaratantra and kaalchakra desktop app should be there"): SwaraTantra's
   own numbers (st-home.css, the desktop) — the dial the screen's height less 214px (1000px at most), its top as far under the brand's
   foot (68px) as its foot is over the coin's head; the mark and the name centred on the dial's axis on the top line (the tabs' middle,
   --ldesk-line from lmeDesk), as SwaraTantra's, no maker's line under them (it stays in the link's name). The column of cards, the gap and
   the screen's margins were the same already; the You key and the menu's disc stay in their corners, as SwaraTantra's ---- */
@media (min-width:980px) and (min-aspect-ratio:5/4) {
  :root:not([data-demo]).lite-app.lite-has-chart {
    --kd-d:min(calc(100svh - 214px), 1000px, calc(100vw - 2 * clamp(16px, 3vw, 48px) - clamp(56px, calc(16vw - 130px), 200px) - 380px));
    --kd-top:calc(68px + (100svh - 164px - var(--kd-d)) / 2); }
  :root:not([data-demo]).lrb-on.lhs-on.lite-has-chart .stage .platearea { justify-content:flex-start; padding-top:calc(var(--kd-top) - var(--lite-head, 18px) + 8px); padding-bottom:0; }
  :root:not([data-demo]).lrb-on.lhs-on.lite-has-chart .stage .dialbox svg,
  :root:not([data-demo]).lrb-on.lhs-on.lite-has-chart .stage .dialbox svg:is(*) { width:var(--kd-d) !important; }
  :root:not([data-demo]).lrb-on.lhs-on.lite-has-chart .stage { grid-template-columns:minmax(0, var(--kd-d)) minmax(340px, 420px); }
  :root:not([data-demo]).lite-app.lrb-on.lite-has-chart .lme-brand { display:inline-flex !important; align-items:center; gap:8px; box-sizing:border-box; height:42px; padding:0 6px;
    left:var(--lrb-x, 50%); top:calc(var(--ldesk-line, 47px) - 21px); bottom:auto; transform:translateX(-50%); }
  :root:not([data-demo]).lite-app.lrb-on.lite-has-chart .lme-brand .lme-brand-l { gap:8px; }
  :root:not([data-demo]).lite-app.lrb-on.lite-has-chart .lme-brand .lme-brand-m { font-size:19px; }
  :root:not([data-demo]).lite-app.lrb-on.lite-has-chart .lme-brand .lme-brand-by { display:none; }
}

/* ---- Day ---- */
:root[data-theme="light"] .lrb {
  --lrb-tint:rgba(252,249,243,.52); --lrb-crest:rgba(255,255,255,.42); --lrb-crest2:rgba(255,255,255,.08); --lrb-shade:rgba(70,52,22,.07);
  --lrb-moon:109,95,166; --lrb-gold:154,122,24; --lrb-sun:201,70,44; --lrb-dusk:244,241,236;
  --lrb-name:#735A0D; --lrb-halo:rgba(244,241,236,.95); --lrb-halo2:rgba(244,241,236,.8); --lrb-icon:#8A6C14; --lrb-mk:#3A342A;
  --lrb-face:radial-gradient(115% 115% at 30% 22%, rgba(255,255,255,.95), rgba(255,255,255,.5) 40%, rgba(255,255,255,0) 60%), radial-gradient(circle at 50% 62%, #F7F2E8, #E4DCCB 74%);
  --lrb-face-sh:inset 0 0 0 1.2px rgba(154,122,24,.42), inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -8px 14px rgba(120,95,40,.12), 0 10px 22px -12px rgba(60,40,20,.45);
  --lrb-face-on:inset 0 0 0 1.6px rgba(154,122,24,.85), inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -8px 14px rgba(120,95,40,.1), 0 14px 30px -14px rgba(60,40,20,.5);
  --lrb-stud:#F4EFE5; --lrb-stud-ink:#857E8B;
  --lrb-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 .05 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .lrb-menu {
  --lrb-cbg:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4) 38%, rgba(255,255,255,.5)), radial-gradient(90% 60% at 0% 0%, rgba(154,122,24,.08), transparent 60%), rgba(250,247,241,.8);
  --lrb-cline:rgba(154,122,24,.28); --lrb-ink:#221F27; --lrb-dim:#857E8B; --lrb-gink:#735A0D; --lrb-ic:radial-gradient(115% 115% at 30% 22%, #FFFFFF, #F6F1E7 60%), #F1EBDF;
  --lrb-icon2:#8A6C14; --lrb-tile:rgba(255,255,255,.55); --lrb-tline:rgba(40,30,60,.08); --lrb-rule:rgba(40,30,60,.08); --lrb-hov:rgba(40,30,60,.05);
  --lrb-veil:rgba(40,32,24,.18); --lrb-jade:#2F8A6B; --lrb-lilac:#6D5FA6; --lrb-lilac-rgb:109,95,166; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lrb {
    --lrb-tint:rgba(252,249,243,.52); --lrb-crest:rgba(255,255,255,.42); --lrb-crest2:rgba(255,255,255,.08); --lrb-shade:rgba(70,52,22,.07);
    --lrb-moon:109,95,166; --lrb-gold:154,122,24; --lrb-sun:201,70,44; --lrb-dusk:244,241,236;
    --lrb-name:#735A0D; --lrb-halo:rgba(244,241,236,.95); --lrb-halo2:rgba(244,241,236,.8); --lrb-icon:#8A6C14; --lrb-mk:#3A342A;
    --lrb-face:radial-gradient(115% 115% at 30% 22%, rgba(255,255,255,.95), rgba(255,255,255,.5) 40%, rgba(255,255,255,0) 60%), radial-gradient(circle at 50% 62%, #F7F2E8, #E4DCCB 74%);
    --lrb-face-sh:inset 0 0 0 1.2px rgba(154,122,24,.42), inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -8px 14px rgba(120,95,40,.12), 0 10px 22px -12px rgba(60,40,20,.45);
    --lrb-face-on:inset 0 0 0 1.6px rgba(154,122,24,.85), inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -8px 14px rgba(120,95,40,.1), 0 14px 30px -14px rgba(60,40,20,.5);
    --lrb-stud:#F4EFE5; --lrb-stud-ink:#857E8B;
    --lrb-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 .05 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  }
  :root:not([data-theme="dark"]) .lrb-menu {
    --lrb-cbg:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4) 38%, rgba(255,255,255,.5)), radial-gradient(90% 60% at 0% 0%, rgba(154,122,24,.08), transparent 60%), rgba(250,247,241,.8);
    --lrb-cline:rgba(154,122,24,.28); --lrb-ink:#221F27; --lrb-dim:#857E8B; --lrb-gink:#735A0D; --lrb-ic:radial-gradient(115% 115% at 30% 22%, #FFFFFF, #F6F1E7 60%), #F1EBDF;
    --lrb-icon2:#8A6C14; --lrb-tile:rgba(255,255,255,.55); --lrb-tline:rgba(40,30,60,.08); --lrb-rule:rgba(40,30,60,.08); --lrb-hov:rgba(40,30,60,.05);
    --lrb-veil:rgba(40,32,24,.18); --lrb-jade:#2F8A6B; --lrb-lilac:#6D5FA6; --lrb-lilac-rgb:109,95,166; }
}

@media (prefers-reduced-motion: reduce) {
  html.lrb-on .lrb, .lrb-name, .lrb-lean, .lrb-glass, .lrb-light, .lrb-glow, .lrb-dots, .lrb-coins, .lrb-face, .lrb-aura { transition:none; }
  .lrb-menu, .lrb-veil, .lrb-x, .lrb-card, .lrb-it, .lrb-tile { transition:none !important; }
  .lrb-ring, .lrb-c.lrb-pulse .lrb-aura, .lrb-menu.on .lrb-live i { animation:none; }
}

/* =====================================================================
   MAHAKAAL · REALIGN NOW, AND FOOD IN THE CHAT (2026-10-09)
   ===================================================================== */
.mkc-realign { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; margin-top:6px; padding:0 16px; border:0; border-radius:14px; cursor:pointer;
  font:700 14.5px/1 var(--body); letter-spacing:.01em; color:#1A1407; background:linear-gradient(180deg, #F6DE95, #D7B25A);
  box-shadow:0 10px 22px -12px rgba(215,178,90,.85), inset 0 1px 0 rgba(255,255,255,.45); }
.mkc-realign svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.mkc-realign .mkc-rico { width:18px; height:18px; stroke-width:1.9; }
.mkc-realign:active { transform:scale(.98); }
.mkc-realign:focus-visible, .mkc-open:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:3px; }
.mkc-open.ghost { justify-self:center; min-height:32px; margin-top:2px; color:var(--lmk-ink2); background:transparent; box-shadow:none; font-weight:500; }
.mkc-rmsg .mkc-rtps { margin-top:10px; }
.mkc-rtps { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.mkc-rtp details { border-radius:14px; background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line); }
.mkc-rtp summary { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; list-style:none; }
.mkc-rtp summary::-webkit-details-marker { display:none; }
.mkc-rtp summary svg { width:12px; height:12px; fill:none; stroke:var(--lmk-dim); stroke-width:1.8; transition:transform .2s; }
.mkc-rtp details[open] summary svg { transform:rotate(180deg); }
.mkc-rtp time { font:600 15px/1 var(--body); font-variant-numeric:tabular-nums; color:var(--lmk-ink); }
.mkc-rtt { display:grid; gap:2px; min-width:0; }
.mkc-rtt b { font:600 13px/1.3 var(--body); color:var(--lmk-ink); }
.mkc-rtt em { font:400 11.5px/1.3 var(--body); font-style:normal; color:var(--lmk-dim); }
.mkc-rtp.s-past { opacity:.62; }
.mkc-rsteps { display:grid; gap:8px; margin:0; padding:0 12px 4px 12px; list-style:none; }
.mkc-rsteps li { display:grid; gap:3px; padding:8px 0 0; border-top:1px solid var(--lmk-line); }
.mkc-rsteps b { font:600 12.5px/1.35 var(--body); color:var(--lmk-ink); }
.mkc-rsteps b em { font-style:normal; font-weight:500; color:var(--lmk-dim); }
.mkc-rdose { font:500 11px/1.3 var(--body); color:rgba(var(--lmk-gold-rgb), .9); }
.mkc-rsteps p { margin:0; font:400 12.5px/1.45 var(--body); color:var(--lmk-ink2); }
.mkc-ract { display:flex; flex-wrap:wrap; gap:8px; padding:6px 12px 12px; }
.mkc-rmsg > .mkc-ract { padding:0; margin-top:12px; }
.mkc-foodacts { margin-top:8px; }
/* the practice, in the chat: Preparation's session, its clock, the check after it */
.mkc-rsess { display:grid; gap:8px; padding:6px 12px 0; }
.mkc-rsess .mkc-chips { margin:0; }
.mkc-chip.on { color:#1A1407; background:linear-gradient(180deg, #F6DE95, #D7B25A); box-shadow:none; font-weight:600; }
.mkc-rrun { display:flex; align-items:center; gap:10px; padding:8px 8px 8px 12px; border-radius:12px; background:rgba(var(--lmk-gold-rgb), .08); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .32); }
.mkc-rrun .lra-clock { min-width:44px; font:600 16px/1 var(--body); font-variant-numeric:tabular-nums; color:var(--lmk-gold); }
.mkc-rrun-tx { flex:1; min-width:0; font:500 12.5px/1.3 var(--body); color:var(--lmk-ink2); }
.mkc-rstop { min-height:30px; padding:0 13px; border:0; border-radius:999px; cursor:pointer; font:600 12px/1 var(--body); color:var(--lmk-ink); background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.mkc-rres { display:flex; align-items:flex-start; gap:7px; margin:0; font:500 12.5px/1.45 var(--body); color:var(--lmk-ink2); }
.mkc-rres.ok { color:var(--lmk-good); }
.mkc-rres svg { flex:none; width:15px; height:15px; margin-top:1px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.mkc-rnote { margin:0; font:400 12px/1.45 var(--body); color:var(--lmk-dim); }
.mkc-rsides { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.mkc-rsides button { min-height:40px; border:0; border-radius:12px; cursor:pointer; font:600 13px/1 var(--body); color:var(--lmk-ink); background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.mkc-rsides button.n-ida { box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--lmk-ida) 60%, transparent); }
.mkc-rsides button.n-pingala { box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--lmk-ping) 60%, transparent); }
.mkc-rsides button:disabled { opacity:.42; cursor:default; }
.mkc-rsides button:focus-visible, .mkc-rstop:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:2px; }
.mkc-ate { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 11px; font:600 12.5px/1 var(--body); color:var(--lmk-good); }
.mkc-ate svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion: reduce) { .mkc-rtp summary svg { transition:none; } }

/* =====================================================================
   REALIGN · NUTRITION, THE DAY'S PLATE (2026-10-09)
   ===================================================================== */
.lraF-card { gap:14px; }
.lraF-groups { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; margin:0; padding:0; list-style:none; }
.lraF-groups li { display:grid; justify-items:center; gap:6px; min-width:0; padding:10px 2px 9px; border-radius:14px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft);
  font:500 10.5px/1.2 var(--body); letter-spacing:-.005em; color:var(--dim); text-align:center; }
.lraF-groups li i { width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--st-line-soft); }
.lraF-groups li.on { color:var(--ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 55%, transparent); background:color-mix(in srgb, var(--jade) 9%, var(--st-tile)); }
.lraF-groups li.on i { background:var(--jade); box-shadow:none; }
.lraF-sum, .lraF-lean, .lraF-later, .lraF-key { margin:0; font:400 12.5px/1.5 var(--body); color:var(--ink-2); }
.lraF-later, .lraF-key { color:var(--dim); font-size:11.5px; }
.lraF-meals { display:grid; gap:0; margin:0; padding:0; list-style:none; border-radius:16px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraF-meals li { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; padding:10px 12px; }
.lraF-meals li + li { border-top:1px solid var(--st-line-soft); }
.lraF-meals time { font:600 13px/1 var(--body); font-variant-numeric:tabular-nums; color:var(--ink); }
.lraF-meals b { display:block; font:600 13.5px/1.3 var(--body); color:var(--ink); }
.lraF-meals em { display:block; font:400 11.5px/1.35 var(--body); font-style:normal; color:var(--dim); }
.lraF-x { width:30px; height:30px; border:0; border-radius:50%; cursor:pointer; font:400 18px/1 var(--body); color:var(--dim); background:transparent; }
.lraF-x:hover { color:var(--ink); background:var(--st-tile-hi); }
.lraF-chips { display:flex; flex-wrap:wrap; gap:7px; }
.lraF-chip { min-height:34px; padding:0 12px; border:0; border-radius:999px; cursor:pointer; font:500 12.5px/1 var(--body); color:var(--ink); background:var(--st-tile);
  box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraF-chip:hover { box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .5); }
.lraF-in { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; }
.lraF-in input { min-width:0; min-height:42px; padding:0 14px; border:0; border-radius:12px; font:400 14px/1 var(--body); color:var(--ink); background:var(--st-tile);
  box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraF-in input:focus { outline:none; box-shadow:inset 0 0 0 1.5px rgba(var(--acc-rgb), .7); }
.lraF-add { min-height:42px; padding:0 18px; border:0; border-radius:12px; cursor:pointer; font:600 13.5px/1 var(--body); color:#1A1407; background:linear-gradient(180deg, #F6DE95, #D7B25A); }
.lraF-week { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; }
.lraF-day { display:grid; justify-items:center; gap:5px; padding:8px 2px; border-radius:12px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.lraF-day i { width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1.2px var(--st-line-soft); }
.lraF-day i.on { background:var(--jade); box-shadow:none; }
.lraF-dk { font:600 10.5px/1 var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.lraF-dn { font:500 10.5px/1 var(--body); font-variant-numeric:tabular-nums; color:var(--ink-2); }
@media (max-width:380px) { .lraF-groups li { font-size:10px; padding:9px 2px 8px; } }

/* =====================================================================
   MAHAKAAL · MILAAN IN THE CHAT, AND THE CARE UNDER EVERY REALIGNMENT ANSWER (2026-10-09)
   ===================================================================== */
/* the pick: the kind as a quiet segmented control, the people as a list of soft rows, Match in gold */
.mkc-mil .mkc-a { margin-top:6px; }
.mkc-mkind { display:inline-grid; grid-auto-flow:column; gap:2px; margin-top:12px; padding:3px; border-radius:999px; background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.mkc-mkind button { min-height:30px; padding:0 14px; border:0; border-radius:999px; cursor:pointer; font:600 12px/1 var(--body); letter-spacing:.01em; color:var(--lmk-dim); background:transparent; transition:color .15s ease, background .2s ease; }
.mkc-mkind button[aria-checked="true"] { color:#1A1407; background:linear-gradient(180deg, #F6DE95, #D7B25A); box-shadow:0 4px 10px -6px rgba(215,178,90,.8); }
.mkc-mppl { display:grid; gap:6px; margin:12px 0 0; padding:0; list-style:none; }
.mkc-mp { display:grid; grid-template-columns:34px minmax(0, 1fr) 18px; align-items:center; gap:11px; width:100%; min-height:50px; padding:7px 12px 7px 8px; border:0; border-radius:14px; cursor:pointer; text-align:left;
  background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line); transition:box-shadow .18s ease, background .18s ease; }
.mkc-mp > i { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; font:600 12px/1 var(--body); font-style:normal; letter-spacing:.04em; color:var(--lmk-ink2);
  background:var(--lmk-deep); box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.mkc-mp > span { display:grid; gap:2px; min-width:0; }
.mkc-mp b { font:600 13.5px/1.25 var(--body); color:var(--lmk-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mkc-mp b em { margin-left:4px; font:600 9.5px/1 var(--body); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--lmk-gold); }
.mkc-mp small { font:400 11.5px/1.3 var(--body); color:var(--lmk-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mkc-mp-tick { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--lmk-line2); }
.mkc-mp-tick svg { width:11px; height:11px; fill:none; stroke:#1A1407; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.mkc-mp.on { background:rgba(var(--lmk-gold-rgb), .07); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .5); }
.mkc-mp.on > i { color:var(--lmk-gold); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .55); }
.mkc-mp.on .mkc-mp-tick { background:linear-gradient(180deg, #F6DE95, #D7B25A); box-shadow:none; }
.mkc-mp.on .mkc-mp-tick svg { opacity:1; }
.mkc-mp:focus-visible, .mkc-mkind button:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:2px; }
.mkc-mnote { margin:10px 0 0; font:500 11px/1.4 var(--body); color:var(--lmk-dim); }
.mkc-mact { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:12px; }
.mkc-realign.sm { width:auto; min-height:40px; margin:0; padding:0 18px; font-size:13.5px; border-radius:999px; }
.mkc-realign.sm svg { width:17px; height:17px; stroke-width:1.9; }
.mkc-realign:disabled { opacity:.45; cursor:default; box-shadow:none; }
.mkc-link { padding:0; border:0; cursor:pointer; font:600 12px/1.3 var(--body); color:var(--lmk-gold); background:none; text-decoration:underline; text-decoration-color:rgba(var(--lmk-gold-rgb), .35); text-underline-offset:3px; }
/* the match under an answer: who, the score the page leads with, what still stands */
.mkc-milcard { display:grid; gap:6px; margin-top:12px; padding:13px 14px 12px; border-radius:16px; background:linear-gradient(160deg, rgba(var(--lmk-gold-rgb), .09), rgba(var(--lmk-gold-rgb), .02) 60%), var(--lmk-well);
  box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .26); }
.mkc-milhd { display:grid; gap:3px; }
.mkc-milk { font:600 9.5px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--lmk-gold); }
.mkc-milhd b { font:600 14px/1.3 var(--body); color:var(--lmk-ink); }
.mkc-milsc { display:flex; align-items:baseline; gap:10px; }
.mkc-milsc b { font:400 26px/1 var(--display, var(--body)); font-variant-numeric:tabular-nums; color:var(--lmk-ink); }
.mkc-milsc span { font:500 12.5px/1.2 var(--body); color:var(--lmk-ink2); }
.mkc-milsub { margin:0; font:400 12px/1.45 var(--body); color:var(--lmk-dim); }
.mkc-milcard .mkc-chip { justify-self:start; margin-top:4px; }
/* the care under every Realignment answer: a meal that meets a practice, the caution as one quiet line, Expert guidance */
.mkc-rcare { display:grid; gap:8px; margin-top:12px; padding-top:11px; border-top:1px solid var(--lmk-line); }
.mkc-rmeal { display:grid; grid-template-columns:18px minmax(0, 1fr); gap:9px; align-items:start; margin:0; padding:10px 12px; border-radius:13px;
  font:400 12.5px/1.5 var(--body); color:var(--lmk-ink2); background:color-mix(in srgb, var(--lmk-good) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-good) 26%, transparent); }
.mkc-rmeal svg { width:18px; height:18px; margin-top:1px; fill:none; stroke:var(--lmk-good); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mkc-rcare-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.mkc-rcaut { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:0 4px 0 0; border:0; cursor:pointer; font:500 12px/1.2 var(--body); color:var(--lmk-ink2); background:transparent; }
.mkc-rcaut span { text-decoration:underline dotted color-mix(in srgb, var(--lmk-heavy) 55%, transparent); text-underline-offset:4px; }
.mkc-rcaut svg { width:14px; height:14px; fill:none; stroke:var(--lmk-heavy); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mkc-rcaut.on span { text-decoration-style:solid; }
.mkc-rexp { display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 13px 0 10px; border:0; border-radius:999px; cursor:pointer; font:600 12px/1 var(--body); color:var(--lmk-gold);
  background:rgba(var(--lmk-gold-rgb), .08); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .42); }
.mkc-rexp svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mkc-rcaut:focus-visible, .mkc-rexp:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:2px; }
.mkc-rcaut-pts { display:grid; gap:6px; margin:0; padding:10px 12px 10px 28px; border-radius:12px; font:400 12px/1.5 var(--body); color:var(--lmk-ink2);
  background:color-mix(in srgb, var(--lmk-heavy) 5%, transparent); }
.mkc-rcaut-pts li::marker { color:var(--lmk-heavy); }
@media (max-width:380px) { .mkc-mkind button { padding:0 11px; } .mkc-rcare-row { justify-content:flex-start; } }
/* the reading's Body fold: a list where Swaasthya lists — each finding, where it sits, where it shows */
.mk3-li { display:grid; gap:9px; margin:0 0 6px; padding:0; list-style:none; }
.mk3-li li { display:grid; gap:2px; padding-left:10px; box-shadow:inset 2px 0 0 rgba(var(--lmk-gold-rgb), .35); }
.mk3-li b { font:600 14px/1.35 var(--body); color:var(--lmk-ink); }
.mk3-li em { font:400 12px/1.35 var(--body); font-style:normal; color:var(--lmk-dim); }
.mk3-where { justify-self:start; margin-top:3px; padding:3px 8px; border-radius:999px; font:600 10px/1.2 var(--body); letter-spacing:.02em; color:var(--lmk-ink2);
  background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line2); }
/* the breath reach on Saadhna and Practices: the finger-width check's own figure, the hand held below the nose (2026-10-09) */
.lra-fw { --lqs-skin:#5C4E41; --lqs-skin-l:#CDB89D; position:relative; width:min(100%, 270px); margin:0 auto; aspect-ratio:340 / 408; }
:root[data-theme="light"] .lra-fw { --lqs-skin:#EAD8C2; --lqs-skin-l:#9A7C5A; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lra-fw { --lqs-skin:#EAD8C2; --lqs-skin-l:#9A7C5A; } }
.lra-fw .lqs-svg { width:100%; height:100%; }
.lra-fw-mk { position:absolute; left:85.9%; display:grid; place-items:center; width:24px; height:24px; margin-left:-3px; border-radius:50%; transform:translateY(-50%);
  font:600 10.5px/1 var(--body); font-variant-numeric:tabular-nums; color:var(--ink-2); background:var(--st-tile-hi, var(--st-tile)); box-shadow:inset 0 0 0 1px rgba(var(--lhs-gold-rgb), .45); }
.lra-fw-mk.on { color:#1A1407; background:linear-gradient(180deg, #F6DE95, #D7B25A); box-shadow:0 0 0 4px rgba(var(--lhs-gold-rgb), .2); }
.lra-fwbox { margin:10px 0 4px; }
/* Saadhna's time row on a phone (2026-10-09): the time, its mark and the title on one line, and what follows — the steps, the check,
   the element — across the whole width under them, not squeezed beside the time */
@media (max-width:520px) {
  .lra-tp-hd { grid-template-columns:40px 30px minmax(0, 1fr) auto; column-gap:10px; row-gap:2px; width:calc(100% - 40px); min-height:0; padding:11px 0 10px; }
  .lra-tp-hd > time { grid-column:1; grid-row:1; }
  .lra-tp-hd > .lal-node { grid-column:2; grid-row:1; width:30px; height:30px; }
  .lra-tp-hd > .lal-win-tx { display:contents; }
  .lra-tp-hd > .lal-win-tx > b { grid-column:3; grid-row:1; font-size:15px; line-height:1.25; }
  .lra-tp-hd > .lal-win-tx > :not(b) { grid-column:3 / -1; }
  .lra-tp-hd > .lal-sw-end { grid-column:4; grid-row:1; }
  .lra-tp-hd .lal-sw-mark { width:24px; height:24px; }
  .lra-tps.lal-line::before { left:calc(40px + 10px + 14px); top:22px; bottom:22px; }
  .lra-tp-add { right:2px; top:10px; }
}

/* ==== SPEAK THE QUESTION (2026-10-10): the mic in the box, and the line that listens ==== */
.mkc-box.v { grid-template-columns:minmax(0, 1fr) 38px 42px; gap:6px; }
.mkc-mic { position:relative; display:grid; place-items:center; width:38px; height:38px; margin-bottom:2px; padding:0; border:0; border-radius:50%; cursor:pointer;
  color:var(--lmk-gold); background:rgba(var(--lmk-gold-rgb), .08); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .34); -webkit-tap-highlight-color:transparent;
  transition:background .18s ease, color .18s ease, transform .12s ease; }
.mkc-mic svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.mkc-mic:active { transform:scale(.93); }
.mkc-mic svg { position:relative; z-index:1; }
/* listening: the mic in the live coral of its line (gold stays Send's), a ring going out from it, drawn by the compositor alone */
.mkc-mic.on { color:var(--lmk-ping); background:color-mix(in srgb, var(--lmk-ping) 15%, transparent); box-shadow:inset 0 0 0 1.4px color-mix(in srgb, var(--lmk-ping) 65%, transparent); }
.mkc-mic.on::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 1.5px color-mix(in srgb, var(--lmk-ping) 70%, transparent); pointer-events:none;
  animation:mkc-mic 1.5s cubic-bezier(.2,.7,.3,1) infinite; }
@keyframes mkc-mic { from { transform:scale(1); opacity:.9; } to { transform:scale(1.6); opacity:0; } }
.mkc-mic:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:2px; }
.mkc-vbar { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:2px 8px 4px; font:500 11.5px/1.2 var(--body); color:var(--lmk-ink2); }
.mkc-vbar[hidden] { display:none; }
.mkc-vlive { display:inline-flex; align-items:center; gap:7px; letter-spacing:.02em; }
.mkc-vlive i { width:8px; height:8px; border-radius:50%; background:var(--lmk-ping); animation:mkc-lamp 1.2s ease-in-out infinite; }
.mkc-vlive.off { color:var(--lmk-dim); }
.mkc-vlang { display:inline-flex; align-items:center; gap:3px; min-height:26px; padding:0 8px 0 10px; border:0; border-radius:999px; cursor:pointer; font:600 11.5px/1 var(--body);
  color:var(--lmk-gold); background:rgba(var(--lmk-gold-rgb), .08); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .3); }
.mkc-vlang svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mkc-vlang[aria-expanded="true"] svg { transform:rotate(180deg); }
.mkc-vlangs { display:flex; flex-wrap:wrap; gap:6px; flex-basis:100%; max-height:132px; overflow-y:auto; padding:4px 0 2px; scrollbar-width:none; }
.mkc-vlangs button { min-height:30px; padding:0 11px; border:0; border-radius:999px; cursor:pointer; font:500 12.5px/1 var(--body), 'Tiro Devanagari Hindi', serif; color:var(--lmk-ink);
  background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.mkc-vlangs button.on { color:#1A1407; background:linear-gradient(180deg, #F6DE95, #D7B25A); box-shadow:none; }
@media (prefers-reduced-motion: reduce) { .mkc-mic.on, .mkc-vlive i { animation:none; } }

/* ==== MAHAKAAL'S OWN EAR (2026-10-10): the level meter, the seconds, Cancel; the stop square; the ring while it writes; the send glow ==== */
.mkc-vbar.on, .mkc-vbar.writing { gap:6px 10px; padding:4px 8px 6px; }
.mkc-vwave { display:inline-flex; align-items:center; gap:3px; height:22px; }
.mkc-vwave i { display:block; width:3px; height:22px; border-radius:2px; background:var(--lmk-ping); transform:scaleY(.16); transform-origin:50% 50%;
  transition:transform 90ms linear; }
.mkc-vtime { font:500 11.5px/1 var(--mono, ui-monospace, monospace); color:var(--lmk-ink2); font-variant-numeric:tabular-nums; }
.mkc-vx { margin-left:auto; min-height:26px; padding:0 10px; border:0; border-radius:999px; cursor:pointer; font:600 11.5px/1 var(--body);
  color:var(--lmk-ink2); background:transparent; box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.mkc-vx:hover { color:var(--lmk-ink); }
.mkc-vdots { display:inline-flex; gap:4px; }
.mkc-vdots i { width:6px; height:6px; border-radius:50%; background:var(--lmk-gold); opacity:.3; animation:mkc-vdot 1.1s ease-in-out infinite; }
.mkc-vdots i:nth-child(2) { animation-delay:.18s; } .mkc-vdots i:nth-child(3) { animation-delay:.36s; }
@keyframes mkc-vdot { 0%, 100% { opacity:.25; transform:translateY(0); } 50% { opacity:1; transform:translateY(-2px); } }
.mkc-mic.on svg .f { fill:currentColor; stroke:none; }
.mkc-mic.wait { cursor:default; opacity:.9; }
.mkc-mic.wait::before { content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid rgba(var(--lmk-gold-rgb), .18); border-top-color:var(--lmk-gold);
  animation:mkc-spin .9s linear infinite; }
@keyframes mkc-spin { to { transform:rotate(360deg); } }
.mkc-send.glow { animation:mkc-glow 1.2s ease-out 2; }
@keyframes mkc-glow { 0% { box-shadow:0 0 0 0 rgba(var(--lmk-gold-rgb), .7); } 100% { box-shadow:0 0 0 14px rgba(var(--lmk-gold-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .mkc-vdots i, .mkc-mic.wait::before, .mkc-send.glow { animation:none; } .mkc-vwave i { transition:none; } }
/* ==== THE COMPOSER, v3 (2026-10-24, the user: "provide a text input box and place only one disc button showing mic … design this section
   like app-native world class premium looking interaction interface"): one pill, one disc that turns mic → send → stop → writing by class
   alone (its three faces drawn once, cross-faded); the turn's count and the price in one quiet line under it; the listening line slim ==== */
.mkc-cmp { gap:6px; }
.mkc-box { grid-template-columns:minmax(0, 1fr) 42px; align-items:end; gap:10px; padding:6px 6px 6px 18px; border-radius:27px;
  background:var(--lmk-well);
  box-shadow:inset 0 0 0 1px var(--lmk-line2), 0 14px 32px -20px rgba(0,0,0,.75);
  transition:box-shadow .22s ease, background .22s ease; }
.mkc-box:focus-within { box-shadow:inset 0 0 0 1.5px rgba(var(--lmk-gold-rgb), .6), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 4px rgba(var(--lmk-gold-rgb), .08), 0 14px 32px -20px rgba(0,0,0,.75); }
.mkc-box.hear { box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--lmk-ping) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--lmk-ping) 12%, transparent), 0 14px 32px -20px rgba(0,0,0,.75); }
.mkc-box.write { box-shadow:inset 0 0 0 1.5px rgba(var(--lmk-gold-rgb), .45), 0 14px 32px -20px rgba(0,0,0,.75); }
.mkc-box textarea { min-height:42px; padding:10px 0; }
.mkc-box textarea[readonly] { cursor:default; }
.mkc-box.hear textarea::placeholder { color:color-mix(in srgb, var(--lmk-ping) 80%, var(--lmk-ink)); }
.mkc-disc { position:relative; display:grid; place-items:center; width:42px; height:42px; padding:0; border:0; border-radius:50%; cursor:pointer; isolation:isolate;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; color:var(--lmk-gold); background:rgba(var(--lmk-gold-rgb), .1);
  box-shadow:inset 0 0 0 1.2px rgba(var(--lmk-gold-rgb), .42); transition:background .22s ease, color .22s ease, box-shadow .22s ease, transform .14s ease; }
.mkc-disc svg { position:absolute; inset:0; margin:auto; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:scale(.55) rotate(-24deg); transition:opacity .2s ease, transform .26s cubic-bezier(.2,.9,.25,1.15); }
.mkc-disc .i-stop rect { fill:currentColor; stroke:none; }
.mkc-disc.m-mic .i-mic, .mkc-disc.m-send .i-send, .mkc-disc.m-wait .i-send, .mkc-disc.m-stop .i-stop { opacity:1; transform:none; }
.mkc-disc.m-send { color:#1A1407; background:radial-gradient(circle at 50% 26%, #FCE9AE, #D6B055 72%); box-shadow:0 8px 18px -9px rgba(214,176,85,.85), inset 0 1px 0 rgba(255,255,255,.55); }
.mkc-disc.m-send .i-send { stroke-width:2.5; }
.mkc-disc.m-stop { color:#fff; background:radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--lmk-ping) 72%, #fff), var(--lmk-ping) 74%);
  box-shadow:0 8px 20px -9px color-mix(in srgb, var(--lmk-ping) 85%, transparent); }
.mkc-disc.m-wait { color:var(--lmk-gold); background:rgba(var(--lmk-gold-rgb), .1); box-shadow:none; }
.mkc-disc.m-wait .i-send { opacity:.55; }
.mkc-disc.m-wait.armed { color:#1A1407; background:radial-gradient(circle at 50% 26%, #FCE9AE, #D6B055 72%); }
.mkc-disc.m-wait.armed .i-send { opacity:1; }
.mkc-disc-r { position:absolute; inset:-3px; border-radius:50%; pointer-events:none; z-index:-1; }
/* listening: a ring going out from the disc; writing: an arc turning round it — each only while that state lasts, drawn by the compositor */
.mkc-disc.m-stop .mkc-disc-r { box-shadow:0 0 0 2px color-mix(in srgb, var(--lmk-ping) 65%, transparent); animation:mkc-disc-ping 1.5s cubic-bezier(.2,.7,.3,1) infinite; }
@keyframes mkc-disc-ping { from { transform:scale(.94); opacity:.9; } to { transform:scale(1.55); opacity:0; } }
.mkc-disc.m-wait .mkc-disc-r { border:2px solid rgba(var(--lmk-gold-rgb), .16); border-top-color:var(--lmk-gold); animation:mkc-spin .9s linear infinite; }
.mkc-disc:active:not(:disabled) { transform:scale(.92); }
.mkc-disc:disabled { opacity:.45; cursor:default; }
.mkc-disc:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:3px; }
.mkc-disc.glow { animation:mkc-glow 1.2s ease-out 2; }
.mkc-cmp .mkc-meter { justify-content:center; gap:6px; padding:0 10px; font:500 10.5px/1.25 var(--body); color:var(--lmk-dim); }
.mkc-cmp .mkc-meter .mkc-price { margin-left:0; }
.mkc-cmp .mkc-meter .mkc-price::before { content:"\00b7"; margin-right:4px; color:var(--lmk-dim); }
.mkc-dots i { width:6px; height:6px; }
.mkc-vbar.on, .mkc-vbar.writing { flex-wrap:nowrap; gap:9px; margin:0 4px; padding:7px 8px 7px 12px; border-radius:999px; background:rgba(var(--lmk-gold-rgb), .05);
  box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.mkc-vbar.on .mkc-vlangs, .mkc-vbar .mkc-vlangs { flex-basis:auto; }
.mkc-vbar.on { flex-wrap:wrap; }
.mkc-vwave { height:18px; gap:2.5px; } .mkc-vwave i { height:18px; width:2.5px; }
.mkc-cmp { grid-template-columns:minmax(0, 1fr); min-width:0; }
.mkc-cmp > * { min-width:0; }
.mkc-cmp .mkc-meter { flex-wrap:wrap; row-gap:2px; text-align:center; }
@media (prefers-reduced-motion: reduce) { .mkc-disc .mkc-disc-r, .mkc-disc.glow { animation:none; } .mkc-disc svg { transition:opacity .15s ease; transform:none; } }
/* a question cancelled (2026-10-24): the Cancel beside Ask now and under the thinking steps; the question greyed in the thread */
.mkc-medb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; }
.mkc-medb .mkc-chip { margin-top:0; min-height:32px; padding:6px 13px; font-size:13px; }
.mkc-chip.mkc-qx { color:var(--lmk-ink2); background:transparent; box-shadow:inset 0 0 0 1px var(--lmk-line2); }
.mkc-mk.pend .mkc-qx { justify-self:start; margin-top:8px; min-height:30px; padding:0 13px; font-size:12px; }
.mkc-row.you.cancelled .mkc-you { opacity:.5; }
.mkc-row.you.cancelled .mkc-you p { text-decoration:line-through; text-decoration-color:rgba(255,255,255,.35); }
/* END THE COMPOSER */

/* ---- MAHAKAAL'S FORECAST GATE (2026-10-10): a day or a time ahead — the plain word, Forecast · price, Not now; and the app's own line
   on the breath under every forecast (that day's Swara Code alone) ---- */
.mkc-foreact { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:12px; }
.mkc-forego { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 16px; border:0; border-radius:999px; cursor:pointer;
  font:600 13.5px/1 var(--body); color:#1A1407; background:linear-gradient(180deg, #F6DE95, #D7B25A); box-shadow:0 6px 18px -8px rgba(var(--lmk-gold-rgb), .7); }
.mkc-forego svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mkc-forego em { display:inline-flex; align-items:center; gap:4px; font-style:normal; padding-left:9px; border-left:1px solid rgba(26, 20, 7, .25); }
.mkc-forego:active { transform:scale(.98); }
.mkc-forego:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:3px; }
.mkc-mk.fore .mkc-optnote { display:block; margin-top:8px; }
.mkc-forechose { margin:10px 0 0; font:600 12px/1.3 var(--body); color:var(--lmk-dim); }
.mkc-forenote { display:flex; align-items:baseline; gap:9px; margin:8px 0 2px; font:500 12.5px/1.45 var(--body), 'Tiro Devanagari Hindi', serif; color:var(--lmk-ink2); }
.mkc-forenote i { flex:none; width:7px; height:7px; border-radius:50%; transform:translateY(-1px); background:var(--lmk-gold); box-shadow:0 0 0 3px rgba(var(--lmk-gold-rgb), .18); }
@media (prefers-reduced-motion: reduce) { .mkc-forego:active { transform:none; } }

/* =====================================================================================================================
   YAATRA — THE JOURNEY PAGE (2026-10-10): a ride app's order (from, to, when) in the studio's own surfaces; the compass of the
   day's directions; the windows as options. Its own accent, the route blue, in both themes.
   ===================================================================================================================== */
:root { --lhs-yt:104, 182, 240; --lya-moon:#B9AEF0; --lya-venus:#EE9CB4; --lya-yogini:#F0B65E; --lya-kala:#9C96B4; --lya-masa:#E2C46C; }
:root[data-theme="light"] { --lhs-yt:28, 104, 170; --lya-moon:#5E4FB2; --lya-venus:#B0446A; --lya-yogini:#A5650E; --lya-kala:#6B6585; --lya-masa:#8A6A12; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --lhs-yt:28, 104, 170; --lya-moon:#5E4FB2; --lya-venus:#B0446A; --lya-yogini:#A5650E; --lya-kala:#6B6585; --lya-masa:#8A6A12; } }
.lhs-rail [data-k="yt"], .lhs-page[data-page="yt"] { --pa:var(--lhs-yt); }
.lya-tag { align-self:flex-start; padding:5px 10px; border-radius:999px; font:600 12px/1 var(--body); color:rgb(var(--pa)); background:rgba(var(--pa), .1); box-shadow:inset 0 0 0 1px rgba(var(--pa), .3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lya-hint { margin:4px 2px 0; font:400 13.5px/1.5 var(--body); color:var(--ink-2); }

/* the ride card: from, to, when */
.lya-trip { display:grid; gap:12px; padding:16px 16px 14px; border-radius:22px;
  background:radial-gradient(120% 130% at 0% 0%, rgba(var(--pa), .13), transparent 62%), var(--lhs-card); box-shadow:inset 0 0 0 1px rgba(var(--pa), .22), 0 10px 30px -18px rgba(var(--pa), .55); }
.lya-route { position:relative; display:grid; gap:2px; }
.lya-stop { position:relative; display:grid; grid-template-columns:22px minmax(0, 1fr) auto; align-items:center; gap:10px; min-height:52px; }
.lya-stop.to { padding-top:2px; }
.lya-dot { justify-self:center; width:12px; height:12px; border-radius:50%; }
.lya-dot.from { box-shadow:inset 0 0 0 3px var(--lhs-good); }
.lya-dot.to { border-radius:3px; background:rgb(var(--pa)); box-shadow:0 0 0 4px rgba(var(--pa), .18); }
.lya-line { position:absolute; left:10px; top:34px; height:calc(100% - 66px); min-height:18px; border-left:2px dotted var(--lhs-line-2); }
.lya-stx { display:grid; gap:2px; min-width:0; }
.lya-stx em { font:600 9.5px/1 var(--body); font-style:normal; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.lya-stx b { font:500 19px/1.2 var(--display); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lya-stx small { font:400 11.5px/1.3 var(--body); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lya-stx small:empty { display:none; }
.lya-mini { display:inline-grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; cursor:pointer; color:var(--ink-2); background:var(--lhs-well); -webkit-tap-highlight-color:transparent; }
.lya-mini:hover { color:var(--ink); background:var(--lhs-card-2); }
.lya-mini svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lya-mini:focus-visible { outline:2px solid rgb(var(--pa)); outline-offset:2px; }
.lya-in-wrap { grid-column:2 / 4; display:block; min-width:0; }
.lya-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lya-in { width:100%; height:48px; padding:0 14px; border:0; border-radius:14px; outline:0; font:500 17px/1 var(--body); color:var(--ink);
  background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line-2); -webkit-appearance:none; appearance:none; }
.lya-in::placeholder { color:var(--dim); }
.lya-in:focus { box-shadow:inset 0 0 0 2px rgba(var(--pa), .75), 0 0 0 4px rgba(var(--pa), .12); }
.lya-sugwrap:empty { display:none; }
.lya-sugs { list-style:none; display:grid; margin:-4px 0 0; padding:4px; border-radius:16px; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lya-sug { display:grid; grid-template-columns:32px minmax(0, 1fr); align-items:center; gap:8px; width:100%; min-height:48px; padding:6px 8px; border:0; border-radius:12px; cursor:pointer;
  text-align:left; background:none; color:var(--ink); -webkit-tap-highlight-color:transparent; }
.lya-sug:hover, .lya-sug:focus-visible { background:var(--lhs-card-2); outline:0; }
.lya-sug-ico { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; color:rgb(var(--pa)); background:rgba(var(--pa), .1); }
.lya-sug-ico svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lya-sug-tx { display:grid; gap:1px; min-width:0; }
.lya-sug-tx b { font:600 14.5px/1.25 var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lya-sug-tx small { font:400 11.5px/1.3 var(--body); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lya-sug-tx small:empty { display:none; }
.lya-sugnone { margin:0; padding:6px 4px; font:400 12.5px/1.4 var(--body); color:var(--ink-2); }
.lya-whenrow { display:flex; flex-wrap:wrap; gap:6px; }
.lya-wc { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border:0; border-radius:999px; cursor:pointer; font:600 13px/1 var(--body); color:var(--ink-2);
  background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); -webkit-tap-highlight-color:transparent; transition:background .18s ease, color .18s ease; }
.lya-wc:hover { color:var(--ink); }
.lya-wc.on { color:rgb(var(--pa)); background:rgba(var(--pa), .14); box-shadow:inset 0 0 0 1px rgba(var(--pa), .55); }
.lya-wc svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lya-wc.at span { font-variant-numeric:tabular-nums; }
.lya-wc:focus-visible, .lya-tg:focus-visible, .lya-opt-b:focus-visible, .lya-next:focus-visible { outline:2px solid rgb(var(--pa)); outline-offset:2px; }
.lya-opts { display:flex; flex-wrap:wrap; gap:6px 14px; }
.lya-tg { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 4px; border:0; background:none; cursor:pointer; font:500 12.5px/1 var(--body); color:var(--ink-2); }
.lya-tg i { position:relative; width:30px; height:18px; border-radius:999px; background:var(--lhs-line-2); transition:background .2s ease; }
.lya-tg i::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--ink-2); transition:transform .2s ease, background .2s ease; }
.lya-tg.on { color:var(--ink); }
.lya-tg.on i { background:rgba(var(--pa), .55); }
.lya-tg.on i::after { transform:translateX(12px); background:#fff; }

/* the verdict: the departure, large, and the few rules that decide it */
.lya-verdict { background:radial-gradient(120% 120% at 100% 0%, rgba(var(--pa), .12), transparent 60%), var(--lhs-card); }
.lya-best { display:grid; gap:4px; }
.lya-go { font:500 34px/1.05 var(--display); letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; }
.lya-go.wt { font-size:26px; color:var(--ink-2); }
.lya-gosub { font:400 13px/1.45 var(--body); color:var(--ink-2); }
.lya-vd { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; font:700 10.5px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.lya-vd.go { color:var(--lhs-good); background:color-mix(in srgb, var(--lhs-good) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 45%, transparent); }
.lya-vd.pre { color:var(--lhs-ok); background:color-mix(in srgb, var(--lhs-ok) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-ok) 45%, transparent); }
.lya-vd.no { color:var(--lhs-hard); background:color-mix(in srgb, var(--lhs-hard) 13%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-hard) 45%, transparent); }
.lya-cs { display:flex; flex-wrap:wrap; gap:4px 12px; }
.lya-c { display:inline-flex; align-items:center; gap:4px; font:500 12px/1.2 var(--body); color:var(--ink-2); }
.lya-c svg { width:13px; height:13px; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lya-c.ok svg { stroke:var(--lhs-good); } .lya-c.no svg { stroke:var(--lhs-hard); }
.lya-atrow { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding-top:10px; border-top:1px solid var(--lhs-line); }
.lya-at-k { font:600 12.5px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lya-next { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:46px; padding:0 12px 0 14px; border:0; border-radius:14px; cursor:pointer;
  color:var(--ink); background:rgba(var(--pa), .08); box-shadow:inset 0 0 0 1px rgba(var(--pa), .3); text-align:left; }
.lya-next-tx { flex:1 1 auto; display:grid; gap:5px; min-width:0; padding:9px 0; }
.lya-next-k { font:600 10px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--pa)); }
.lya-next b { font:600 14.5px/1.2 var(--body); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lya-next svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lya-reading, .lya-note { margin:0; font:400 12px/1.45 var(--body); color:var(--dim); }

/* the compass of the day */
.lya-dirgrid { display:grid; grid-template-columns:minmax(0, 200px) minmax(0, 1fr); align-items:center; gap:14px; }
.lya-cmp { width:100%; height:auto; max-width:220px; overflow:visible; }
.lya-w { stroke:var(--lhs-card); stroke-width:1.5; }
.lya-w.open { fill:color-mix(in srgb, var(--lhs-good) 16%, transparent); }
.lya-w.mix { fill:color-mix(in srgb, var(--lhs-ok) 20%, transparent); }
.lya-w.shut { fill:color-mix(in srgb, var(--lhs-hard) 26%, transparent); }
.lya-ring { fill:none; stroke:var(--lhs-line-2); stroke-width:1; }
.lya-ring.in { fill:var(--lhs-card); }
.lya-dl { font:600 9.5px/1 var(--body); letter-spacing:.06em; fill:var(--dim); }
.lya-dl.card { font-size:11px; fill:var(--ink-2); }
.lya-dl.on { fill:rgb(var(--pa)); font-weight:700; }
.lya-mk { stroke:var(--lhs-card); stroke-width:1.4; }
.lya-mk.moon { fill:var(--lya-moon); }
.lya-mk.venus { fill:var(--lya-venus); }
.lya-mk.yogini { fill:var(--lya-yogini); }
.lya-mk.kala, .lya-mk.pasha { fill:var(--lya-kala); }
.lya-mk.vara, .lya-mk.nakshula, .lya-mk.panchaka { fill:var(--lhs-hard); }
.lya-mk.masa { fill:var(--lya-masa); }
.lya-arrow { fill:rgb(var(--pa)); filter:drop-shadow(0 2px 6px rgba(var(--pa), .45)); }
.lya-hub { fill:var(--ink); }
.lya-dest { fill:rgb(var(--pa)); stroke:var(--lhs-card); stroke-width:2.5; }
.lya-dirtx { display:grid; gap:4px; min-width:0; }
.lya-dirw { font:500 26px/1.1 var(--display); color:var(--ink); }
.lya-dirsub { font:500 12.5px/1.2 var(--mono); color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lya-corner { font:400 11.5px/1.35 var(--body); color:var(--dim); }
.lya-key { list-style:none; display:flex; flex-wrap:wrap; gap:4px 10px; margin:6px 0 0; padding:0; }
.lya-key li { display:inline-flex; align-items:center; gap:5px; font:500 11.5px/1.2 var(--body); color:var(--ink-2); }
.lya-key em { font-style:normal; font-family:var(--mono); color:var(--dim); }
.lya-k { width:8px; height:8px; border-radius:50%; }
.lya-k.moon { background:var(--lya-moon); } .lya-k.venus { background:var(--lya-venus); } .lya-k.yogini { background:var(--lya-yogini); }
.lya-k.kala, .lya-k.pasha { background:var(--lya-kala); } .lya-k.vara, .lya-k.nakshula, .lya-k.panchaka { background:var(--lhs-hard); }
.lya-k.masa { background:var(--lya-masa); }
.lya-legend { display:flex; flex-wrap:wrap; gap:4px 14px; margin:0; font:500 11px/1 var(--body); color:var(--dim); }
.lya-legend span { display:inline-flex; align-items:center; gap:5px; }
.lya-legend i { width:10px; height:10px; border-radius:3px; }
.lya-legend .open { background:color-mix(in srgb, var(--lhs-good) 40%, transparent); }
.lya-legend .mix { background:color-mix(in srgb, var(--lhs-ok) 45%, transparent); }
.lya-legend .shut { background:color-mix(in srgb, var(--lhs-hard) 55%, transparent); }

/* the day's windows, as options */
.lya-opts-card { display:grid; gap:12px; }
.lya-strip .lhs-strip-t i.v-clear { background:var(--lhs-good); }
.lya-strip .lhs-strip-t i.v-mixed { background:var(--lhs-ok); }
.lya-strip .lhs-strip-t i.v-avoid { background:var(--lhs-hard); opacity:.7; }
.lya-list { list-style:none; display:grid; gap:8px; margin:0; padding:0; }
.lya-opt { border-radius:16px; background:var(--lhs-card); box-shadow:inset 0 0 0 1px var(--lhs-line); overflow:hidden; }
.lya-opt.v-clear { box-shadow:inset 3px 0 0 var(--lhs-good), inset 0 0 0 1px var(--lhs-line); }
.lya-opt.v-mixed { box-shadow:inset 3px 0 0 var(--lhs-ok), inset 0 0 0 1px var(--lhs-line); }
.lya-opt.v-avoid { box-shadow:inset 3px 0 0 color-mix(in srgb, var(--lhs-hard) 70%, transparent), inset 0 0 0 1px var(--lhs-line); }
.lya-opt-b { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:center; gap:10px; width:100%; min-height:60px; padding:8px 12px 8px 16px; border:0; cursor:pointer;
  text-align:left; color:var(--ink); background:none; -webkit-tap-highlight-color:transparent; }
.lya-opt-b > svg { width:16px; height:16px; fill:none; stroke:var(--dim); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.lya-opt.open .lya-opt-b > svg { transform:rotate(180deg); }
.lya-opt-t { display:grid; gap:3px; min-width:0; }
.lya-opt-t b { font:600 16px/1.15 var(--body); font-variant-numeric:tabular-nums; }
.lya-opt-t small { font:400 11.5px/1.3 var(--body); color:var(--ink-2); }
.lya-rules { list-style:none; display:grid; gap:0; margin:0; padding:0 14px 6px 16px; }
.lya-rules li { display:grid; grid-template-columns:18px minmax(0, 1fr) auto; align-items:baseline; gap:8px; padding:7px 0; border-top:1px solid var(--lhs-line);
  font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.lya-rules li i svg { width:13px; height:13px; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transform:translateY(2px); }
.lya-rules li.ok i svg { stroke:var(--lhs-good); } .lya-rules li.no i svg { stroke:var(--lhs-hard); }
/* a caution (2026-10-15): an expedition's rule on a shorter trip — shown, never counted; a small amber mark, no cross */
.lya-rules li.cau i::before { content:""; display:block; width:7px; height:7px; margin:6px 0 0 3px; border-radius:50%; background:var(--lhs-warn, #D9A441); }
.lya-rules li.cau span { color:var(--ink-2); }
.lya-how { margin-top:10px; }
.lya-how > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font:600 12px/1 var(--body); color:var(--dim); }
.lya-how > summary::-webkit-details-marker { display:none; }
.lya-how > summary::after { content:"›"; transition:transform .2s; }
.lya-how[open] > summary::after { transform:rotate(90deg); }
.lya-how p { margin:8px 0 0; font:400 12.5px/1.5 var(--body); color:var(--ink-2); }
.lya-rules li em { font:500 10.5px/1.2 var(--mono); font-style:normal; color:var(--dim); white-space:nowrap; }
.lya-add { margin:2px 12px 12px; }

/* before you leave */
.lya-tips { list-style:none; display:grid; gap:0; margin:0; padding:0; }
.lya-tips li { display:grid; grid-template-columns:30px minmax(0, 1fr); align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--lhs-line); font:400 13px/1.45 var(--body); color:var(--ink-2); }
.lya-tips li em { display:inline-block; margin-left:2px; padding:1px 6px; border-radius:999px; font:500 10px/1.5 var(--mono); font-style:normal; color:var(--dim); background:var(--lhs-well); white-space:nowrap; vertical-align:1px; }
.lya-before .lhs-sechd { margin-bottom:2px; }
.lya-tips li:first-child { border-top:0; padding-top:2px; }
.lya-tips i { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; color:rgb(var(--pa)); background:rgba(var(--pa), .1); }
.lya-tips i svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.lya-cdirs { list-style:none; display:grid; gap:0; margin:0; padding:0; }
.lya-cdirs li { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:10px; padding:8px 0; border-top:1px solid var(--lhs-line); font:400 13px/1.45 var(--body); color:var(--ink-2); }
.lya-cdirs li:first-child { border-top:0; }
.lya-cdirs b { font:600 13px/1.45 var(--body); color:var(--ink); }
.lya-wait p { display:flex; align-items:center; gap:10px; margin:0; font:400 13px/1.45 var(--body); color:var(--ink-2); }

@media (max-width:360px) {
  .lya-dirgrid { grid-template-columns:1fr; justify-items:center; }
  .lya-dirtx { justify-items:center; text-align:center; }
  .lya-go { font-size:30px; }
}
@media (min-width:760px) {
  .lya-trip { padding:18px 20px 16px; }
  .lya-dirgrid { grid-template-columns:220px minmax(0, 1fr); gap:22px; }
}
@media (prefers-reduced-motion: reduce) { .lya-tg i::after, .lya-wc, .lya-opt-b > svg { transition:none; } }
/* where you set out from is a field too: the stop is a button, GPS beside it (the user, 2026-10-10: "get the location to travel and
   current location for everywhere across the globe like birth place and current place in the form for add person") */
.lya-stb { padding:4px 0; border:0; background:none; text-align:left; cursor:pointer; color:inherit; border-radius:10px; -webkit-tap-highlight-color:transparent; }
.lya-stb:hover b { color:rgb(var(--pa)); }
.lya-stb:focus-visible { outline:2px solid rgb(var(--pa)); outline-offset:3px; }
.lya-dot.from.live { background:var(--lhs-good); box-shadow:0 0 0 4px color-mix(in srgb, var(--lhs-good) 22%, transparent); }
.lya-mini.on { color:var(--lhs-good); background:color-mix(in srgb, var(--lhs-good) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lhs-good) 45%, transparent); }
.lya-mini.busy { pointer-events:none; }
.lya-sug.gps .lya-sug-ico { color:var(--lhs-good); background:color-mix(in srgb, var(--lhs-good) 14%, transparent); }
.lya-sugnone.busy { display:flex; align-items:center; gap:8px; }
.lya-same p { margin:0; font:400 13.5px/1.5 var(--body); color:var(--ink-2); }

/* =====================================================================================================================
   ASK MAHAKAAL ON THE PAGES (the user, 2026-10-10: "make Ask Mahaakaal button on swipe pages designed more elegantly with proper and
   beautiful and small button look and feel — same as Open Kaarya, Open Ghatna etc … but more elegantly and in theme"): a slim pill
   in Mahakaal's gold, its mark the Ribbon key's own — the dark cap, the ash tripund and the red bindu — in both themes
   ===================================================================================================================== */
.lhs-link.lhs-ask, .lhs-acts .lhs-link.lhs-ask, .lmk-askpill {
  display:inline-flex; align-items:center; gap:8px; height:36px; margin:0; padding:0 14px 0 4px; border:0; border-radius:999px; cursor:pointer; white-space:nowrap;
  font:600 12.5px/1 var(--body); letter-spacing:.015em; color:var(--brass-hi); -webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brass) 15%, transparent), color-mix(in srgb, var(--brass) 5%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass) 46%, transparent), 0 8px 18px -14px color-mix(in srgb, var(--brass) 80%, transparent);
  transition:box-shadow .2s ease, background .2s ease, transform .12s ease; }
.lhs-link.lhs-ask:hover, .lmk-askpill:hover { color:var(--brass-hi);
  background:linear-gradient(180deg, color-mix(in srgb, var(--brass) 22%, transparent), color-mix(in srgb, var(--brass) 8%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass) 72%, transparent), 0 10px 22px -14px color-mix(in srgb, var(--brass) 90%, transparent); }
.lhs-link.lhs-ask:active, .lmk-askpill:active { transform:scale(.97); }
.lhs-link.lhs-ask:focus-visible, .lmk-askpill:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lhs-link.lhs-ask .lmk-pmark, .lmk-askpill .lmk-pmark { flex:none; width:28px; height:28px;
  background:radial-gradient(circle at 50% 32%, #2B2833, #111015); box-shadow:inset 0 0 0 1px rgba(242,217,138,.45), 0 2px 6px -2px rgba(0,0,0,.6); }
.lhs-link.lhs-ask .lmk-pmark .lmk-tri, .lmk-askpill .lmk-pmark .lmk-tri { width:19px; height:19px; fill:none; stroke:#EDE6D6; stroke-width:2.1; transform:none; transition:none; }
.lhs-link.lhs-ask:hover svg, .lmk-askpill:hover svg { transform:none; }
.lhs-link.lhs-ask.lmk-demo-off, .lmk-askpill.lmk-demo-off { opacity:.45; cursor:default; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass) 26%, transparent); }
.lhs-link.lhs-ask.lmk-demo-off:active, .lmk-askpill.lmk-demo-off:active { transform:none; }
@media (prefers-reduced-motion: reduce) { .lhs-link.lhs-ask, .lmk-askpill { transition:none; } }
/* Ask Mahakaal at the head of Realignment and the Health Scan: the page's name and the pill on one line, the tabs under both */
.lst-titlerow { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.lst-titlerow .lst-title { min-width:0; }
.lst-titlerow .lst-title span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lst-sec.has-ask .lst-title { padding-top:0; }
.lst-ask { flex:none; }
@media (max-width:340px) { .lst-ask > span:last-child { display:none; } .lst-ask { padding-right:4px; } }
.lya-next .lya-vd { height:20px; padding:0 8px; font-size:9.5px; }
.lya-reading { display:flex; align-items:center; gap:8px; }
/* the direction: the way and the distance over the compass, the marks under it on a phone and beside it on a wide screen */
.lya-dir { gap:12px; }
.lya-dirhd { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; min-width:0; }
.lya-dirhd .lya-dirtx { display:grid; gap:4px; min-width:0; }
.lya-dirhd .lya-dirw { white-space:nowrap; }
.lya-dirhd .lya-dirsub { padding-bottom:4px; }
.lya-dir .lya-corner { margin:-4px 0 0; }
.lya-dirbody { display:grid; grid-template-columns:minmax(0, 1fr); justify-items:center; gap:12px; }
.lya-dirbody .lya-cmp { max-width:236px; }
.lya-dirbody .lya-key { justify-content:center; margin:0; }
@media (min-width:560px) {
  .lya-dirbody { grid-template-columns:minmax(0, 236px) minmax(0, 1fr); justify-items:start; align-items:center; gap:22px; }
  .lya-dirbody .lya-key { flex-direction:column; justify-content:flex-start; gap:8px; }
}
@media (max-width:340px) { .lya-dirhd { flex-direction:column; align-items:flex-start; gap:4px; } }
/* the Ask beside a page's own Open: the same height, so the row stands even (the user, 2026-10-10: "same as Open Kaarya, Open Ghatna
   … but more elegantly"); in the studio's head, slimmer, beside the page's name */
.lhs-acts .lhs-link.lhs-ask { height:44px; padding:0 16px 0 6px; gap:9px; font-size:13.5px; }
.lhs-acts .lhs-link.lhs-ask .lmk-pmark { width:32px; height:32px; }
.lhs-acts .lhs-link.lhs-ask .lmk-pmark .lmk-tri { width:21px; height:21px; }
.lst-ask.lmk-askpill { height:38px; padding:0 14px 0 4px; }
.lst-ask.lmk-askpill .lmk-pmark { width:30px; height:30px; }
/* the Wallet in the menu: the Swara token's own coin as its icon, not stroked like the line icons */
.lrb-ic:has(.ltk-coin) { background:none; box-shadow:0 4px 12px -6px rgba(242,217,138,.55); }
.lrb-ic .ltk-coin { width:38px; height:38px; stroke:none; }

/* =====================================================================================================================
   THE PANCHANG (ui-lite-panchang.js, .lpg-*): the day, the month, the dates a family plans, a puja's day.
   Its accent is kumkum, the vermilion of the tilak; every other colour is the swipe home's own token.
   ===================================================================================================================== */
:root { --lhs-pc:236, 112, 98; --lpg-day:rgba(242, 217, 138, .09); --lpg-night:rgba(124, 112, 214, .10); }
:root[data-theme="light"] { --lhs-pc:166, 46, 40; --lpg-day:rgba(196, 150, 40, .10); --lpg-night:rgba(70, 60, 150, .07); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --lhs-pc:166, 46, 40; --lpg-day:rgba(196, 150, 40, .10); --lpg-night:rgba(70, 60, 150, .07); } }
.lhs-rail [data-k="pc"], .lhs-page[data-page="pc"] { --pa:var(--lhs-pc); }
.lpg-tabs { display:grid; grid-template-columns:repeat(4, minmax(0, auto)); justify-content:space-between; gap:2px; margin:2px 0 12px; padding:4px; border-radius:999px; background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); }
.lpg-tabs::-webkit-scrollbar { display:none; }
.lpg-tab { min-width:0; height:36px; padding:0 12px; border:0; border-radius:999px; font:600 13px/1 var(--body); color:var(--ink-2); background:none; cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
@media (max-width:380px) { .lpg-tab { padding:0 9px; font-size:12.5px; } }
.lpg-tab.on { color:rgb(var(--pa)); background:rgba(var(--pa), .14); box-shadow:inset 0 0 0 1px rgba(var(--pa), .5); }
.lpg-tab:focus-visible, .lpg-nb:focus-visible, .lpg-cc:focus-visible, .lpg-ev:focus-visible, .lpg-rc:focus-visible { outline:2px solid rgb(var(--pa)); outline-offset:2px; }
.lpg-dnav, .lpg-mnav { display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.lpg-nb { flex:none; display:inline-grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; color:var(--ink-2); background:var(--lhs-well); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.lpg-nb svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lpg-dt { flex:1; display:grid; justify-items:center; gap:2px; padding:2px 0; border:0; background:none; color:var(--ink); cursor:pointer; }
.lpg-dt b { font:500 17px/1.1 var(--display); }
.lpg-dt small { font:400 11.5px/1.2 var(--body); color:var(--ink-2); }
.lpg-today { flex:none; height:32px; padding:0 12px; border:0; border-radius:999px; font:600 12px/1 var(--body); color:rgb(var(--pa)); background:rgba(var(--pa), .12); cursor:pointer; }
.lpg-hero { display:grid; gap:8px; margin:0 0 12px; padding:16px; border-radius:22px;
  background:radial-gradient(120% 130% at 100% 0%, rgba(var(--pa), .16), transparent 60%), var(--lhs-card); box-shadow:inset 0 0 0 1px rgba(var(--pa), .24), 0 10px 30px -18px rgba(var(--pa), .55); }
.lpg-tithi { margin:0; font:500 30px/1.08 var(--display); color:var(--ink); text-wrap:balance; }
.lpg-tsub { margin:0; font:400 13px/1.4 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lpg-lights { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin-top:6px; }
.lpg-lights span { display:grid; justify-items:center; gap:3px; padding:9px 4px 8px; border-radius:14px; background:var(--lhs-well); }
.lpg-lights i { display:inline-grid; color:rgb(var(--pa)); }
.lpg-lights svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lpg-lights b { font:600 14px/1.1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lpg-lights small { font:500 9px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
/* "MOONRISE" broke into two lines at 360px and below (2026-10-12): tighter on narrow phones, two by two on the narrowest */
@media (max-width:440px) { .lpg-lights span { padding:9px 2px 8px; } .lpg-lights small { font-size:8.5px; letter-spacing:.05em; } }
@media (max-width:339px) { .lpg-lights { grid-template-columns:repeat(2, minmax(0, 1fr)); } .lpg-lights small { letter-spacing:.1em; } }
.lpg-obs { list-style:none; display:grid; gap:6px; margin:2px 0 0; padding:0; }
.lpg-obs li { display:grid; grid-template-columns:8px minmax(0, 1fr) auto; align-items:center; gap:10px; min-width:0; padding:9px 12px; border-radius:14px; background:var(--lhs-well); }
.lpg-obs li > i { width:8px; height:8px; border-radius:50%; background:rgb(var(--pa)); }
.lpg-obs li.g-ekadashi > i { background:var(--lhs-ida); }
.lpg-obs li.g-vrata > i { background:var(--lhs-ok); }
.lpg-obs li.g-sankranti > i { background:var(--lhs-gold); }
.lpg-obs li.g-shraddha > i { background:var(--dim); }
.lpg-obs li.g-jayanti > i { background:var(--lhs-good); }
.lpg-obs li.g-regional > i { background:rgb(var(--lhs-jy)); }
.lpg-obs span { display:grid; gap:1px; min-width:0; }
.lpg-obs b { font:600 14px/1.25 var(--body); color:var(--ink); }
.lpg-obs small { font:400 11.5px/1.3 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lpg-obs em { font:600 9px/1 var(--body); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lpg-ribbon { display:grid; gap:6px; margin:6px 0 4px; }
.lpg-rtrack { position:relative; height:46px; border-radius:12px; overflow:hidden; background:var(--lhs-well); }
.lpg-rday { position:absolute; left:0; top:0; bottom:0; background:var(--lpg-day); }
.lpg-rnight { position:absolute; top:0; bottom:0; right:0; background:var(--lpg-night); }
.lpg-rgood, .lpg-rbad { position:absolute; left:0; right:0; height:15px; }
.lpg-rgood { top:6px; }
.lpg-rbad { bottom:6px; }
.lpg-rb { position:absolute; top:0; height:100%; border-radius:5px; }
.lpg-rb.g { background:var(--lhs-good); }
.lpg-rb.g2 { background:var(--lhs-good); opacity:.5; }
.lpg-rb.r { background:var(--lhs-hard); }
.lpg-rb.r2 { background:var(--lhs-hard); opacity:.5; }
.lpg-rb.r3 { background:var(--lhs-hard); opacity:.32; }
.lpg-rb.bh { background:repeating-linear-gradient(135deg, var(--lhs-ok) 0 3px, transparent 3px 6px); }
.lpg-rb.vj { background:var(--lhs-ida); opacity:.7; }
.lpg-now { position:absolute; top:0; bottom:0; width:0; border-left:2px solid rgb(var(--pa)); }
.lpg-now i { position:absolute; top:-1px; left:-5px; width:8px; height:8px; border-radius:50%; background:rgb(var(--pa)); box-shadow:0 0 0 3px rgba(var(--pa), .25); }
.lpg-rticks { position:relative; height:14px; font:500 10px/1 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }
.lpg-rticks span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.lpg-rticks span:first-child { transform:none; }
.lpg-rticks span.end { right:0; transform:none; }
.lpg-rkey { display:flex; flex-wrap:wrap; gap:6px 12px; font:400 11px/1.3 var(--body); color:var(--ink-2); }
.lpg-rkey i { display:inline-block; width:10px; height:6px; margin-right:5px; border-radius:2px; vertical-align:middle; }
.lpg-rkey i.g { background:var(--lhs-good); }
.lpg-rkey i.r { background:var(--lhs-hard); }
.lpg-rkey i.r2 { background:var(--lhs-hard); opacity:.5; }
.lpg-rkey i.bh { background:repeating-linear-gradient(135deg, var(--lhs-ok) 0 2px, transparent 2px 4px); }
.lpg-nowl { margin:0 0 4px; font:400 13px/1.4 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lpg-nowl b { font-weight:600; }
.lpg-nowl .q-good, .lpg-ch li.q-good span { color:var(--lhs-good); }
.lpg-nowl .q-bad, .lpg-ch li.q-bad span { color:var(--lhs-hard); }
.lpg-nowl .q-neutral, .lpg-ch li.q-neutral span { color:var(--lhs-ok); }
.lhs-page[data-page="pc"] > * { min-width:0; max-width:100%; }
/* its column as every page's (the user, 2026-10-22: "its panchang page only that is disturbed on tab view"): the rule above took .lhs-in's 560px away */
.lhs-page[data-page="pc"] > .lhs-in { max-width:min(100%, 560px); }
.lpg-hcols { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px; margin-top:8px; }
.lpg-hl, .lpg-ch { list-style:none; display:grid; margin:0; padding:0; }
.lpg-hl li, .lpg-ch li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 8px; padding:7px 0; border-bottom:1px solid var(--lhs-line); font:400 12.5px/1.3 var(--body); color:var(--ink-2); }
.lpg-hl li span, .lpg-ch li span { min-width:0; }
.lpg-hl li b, .lpg-ch li b { margin-left:auto; font:600 12.5px/1.3 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lpg-p1 { margin-left:1px; font:600 8.5px/1 var(--body); color:rgb(var(--pa)); vertical-align:super; }
.lpg-hl li.hd, .lpg-ch li.hd { padding:0 0 4px; border:0; font:600 9.5px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.lpg-hl.good li.hd { color:var(--lhs-good); }
.lpg-hl.bad li.hd { color:var(--lhs-hard); }
.lpg-limbl { list-style:none; display:grid; margin:0; padding:0; }
.lpg-limb { display:grid; grid-template-columns:92px minmax(0, 1fr); gap:10px; padding:9px 0; border-bottom:1px solid var(--lhs-line); }
.lpg-limb:last-child { border-bottom:0; }
.lpg-lk { font:600 9.5px/1.7 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lpg-lv { display:grid; gap:2px; min-width:0; }
.lpg-lv b { font:600 14.5px/1.25 var(--body); color:var(--ink); }
.lpg-lv small { font:400 12px/1.3 var(--body); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.lpg-cap { font:500 11.5px/1 var(--body); color:var(--ink-2); }
.lpg-dl { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin:0; }
.lpg-dl div { display:grid; gap:3px; min-width:0; }
.lpg-dl dt { font:600 9.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lpg-dl dd { margin:0; font:600 13.5px/1.3 var(--body); color:var(--ink); }
.lpg-solar { list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin:12px 0 0; padding:0; }
.lpg-solar li { display:grid; gap:3px; padding:8px; border-radius:12px; background:var(--lhs-well); }
.lpg-solar em { font:600 9px/1 var(--body); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lpg-solar b { font:600 12.5px/1.25 var(--body); color:var(--ink); }
.lpg-more { margin-top:8px; }
/* Find dates: the search waits for this (2026-10-15) */
.lpg-go { display:grid; justify-items:center; gap:8px; margin:14px 0 6px; }
.lpg-gobtn { display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 26px; border:0; border-radius:999px; cursor:pointer; font:600 15px/1 var(--body); color:#1B1406;
  background:linear-gradient(180deg, #F6DE93, #D9B65A); box-shadow:0 10px 24px -12px rgba(217,182,90,.8), inset 0 1px 0 rgba(255,255,255,.5); -webkit-tap-highlight-color:transparent; transition:transform .15s ease, filter .2s ease; }
.lpg-gobtn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.lpg-gobtn:active { transform:scale(.97); }
.lpg-gobtn:hover { filter:brightness(1.05); }
.lpg-gobtn:focus-visible { outline:2px solid var(--brass-hi); outline-offset:3px; }
.lpg-gobtn[disabled] { opacity:.45; cursor:default; }
.lpg-gonote { margin:0; font:400 12.5px/1.4 var(--body); color:var(--ink-2); text-align:center; }
/* Fewer eras / Every era: the arrow points up while the list is open, the way to close it (the user, 2026-10-14) */
.lpg-more:hover svg { transform:none; }
.lpg-more[aria-expanded="true"] svg, .lpg-more[aria-expanded="true"]:hover svg { transform:rotate(180deg); }
/* the place in the Panchang's head: the title and its line keep their own width (never broken by a long name); the place takes what
   is left, at least 64px, on one line cut with an ellipsis (the whole name on its title and to a screen reader) */
.lhs-page[data-page="pc"] .lhs-hd > div:first-child { flex:0 0 auto; min-width:0; max-width:calc(100% - 76px); }
.lpg-where { flex:0 1 auto; min-width:0; max-width:150px; overflow:hidden; text-overflow:ellipsis; line-height:1.15; padding-top:4px; padding-bottom:4px; }
.lpg-fold { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:40px; padding:0; border:0; background:none; color:var(--ink-2); cursor:pointer; }
.lpg-fold svg { width:16px; height:16px; transition:transform .18s ease; }
.lpg-fold[aria-expanded="true"] svg { transform:rotate(180deg); }
.lpg-two { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px; margin:2px 0 8px; }
.lpg-mt { flex:1; min-width:0; font:500 18px/1.1 var(--display); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* the region's pill (the custom picker's button) shares the month bar: capped, its name cut before the bar overflows */
.lpg-mnav .lpg-region { position:relative; flex:0 1 auto; min-width:0; max-width:42%; }
.lpg-cal > *, .lpg-mnav, .lpg-dnav { min-width:0; }
/* narrow phones: the region on its own line under the month, so the month's name is never cut */
@media (max-width:440px) { .lpg-mnav { flex-wrap:wrap; row-gap:8px; } .lpg-mnav .lpg-region { order:3; flex:1 0 100%; max-width:none; } .lpg-mt { text-align:center; } }
.lpg-mnav .lpg-region .lpk-field { max-width:100%; min-width:0; }
.lpg-region select { height:34px; max-width:118px; padding:0 10px; border:0; border-radius:999px; font:600 12px/1 var(--body); color:var(--ink); background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
.lpg-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lpg-wd, .lpg-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.lpg-wd span { text-align:center; font:600 9.5px/1.8 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lpg-cc { position:relative; display:grid; justify-items:center; align-content:start; gap:2px; min-height:52px; padding:7px 0 4px; border:0; border-radius:12px; background:var(--lhs-well); color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.lpg-cc.empty { background:none; cursor:default; }
.lpg-cc b { font:600 14px/1.1 var(--body); font-variant-numeric:tabular-nums; }
.lpg-cc small { font:500 9.5px/1 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }
.lpg-cc.fest { background:rgba(var(--pa), .1); box-shadow:inset 0 0 0 1px rgba(var(--pa), .28); }
.lpg-cc.today { box-shadow:inset 0 0 0 2px rgba(var(--pa), .7); }
.lpg-cc.today b { color:rgb(var(--pa)); }
.lpg-cc.sel { background:rgba(var(--pa), .22); }
.lpg-dots { display:flex; gap:2px; height:5px; }
.lpg-dots i, .lpg-calkey i:not(.pm) { display:inline-block; width:5px; height:5px; border-radius:50%; }
.lpg-dots i.d-f, .lpg-calkey i.d-f { background:rgb(var(--pa)); }
.lpg-dots i.d-e, .lpg-calkey i.d-e { background:var(--lhs-ida); }
.lpg-dots i.d-v, .lpg-calkey i.d-v { background:var(--lhs-good); }
.lpg-cc .pm { position:absolute; top:5px; right:6px; }
.lpg-cal .pm, .lpg-calkey .pm { display:inline-block; width:6px; height:6px; border-radius:50%; }
.pm.full { background:var(--lhs-gold); }
.pm.new { box-shadow:inset 0 0 0 1.5px var(--dim); }
.lpg-calkey { display:flex; flex-wrap:wrap; gap:6px 12px; margin:10px 0 0; font:400 11px/1.3 var(--body); color:var(--ink-2); }
.lpg-calkey span { display:inline-flex; align-items:center; gap:5px; }
.lpg-seln { margin:0 0 8px; font:500 13px/1.35 var(--body); color:var(--ink-2); }
.lpg-empty, .lpg-note, .lpg-lede, .lpg-progt { margin:6px 2px 10px; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.lpg-lede { font-weight:500; color:var(--ink); }
.lpg-ml, .lpg-fl { list-style:none; display:grid; margin:0; padding:0; }
.lpg-ml button { display:grid; grid-template-columns:44px minmax(0, 1fr); align-items:center; gap:10px; width:100%; padding:8px 0; border:0; border-bottom:1px solid var(--lhs-line); background:none; color:var(--ink); text-align:left; cursor:pointer; }
.lpg-ml li:last-child button { border-bottom:0; }
.lpg-mld, .lpg-fd { display:grid; justify-items:center; gap:3px; }
.lpg-mld b, .lpg-fd b { font:500 20px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.lpg-mld small, .lpg-fd small { font:600 9px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.lpg-mln, .lpg-fw { display:grid; gap:2px; min-width:0; }
.lpg-mln b { font:600 14px/1.25 var(--body); }
.lpg-mln small, .lpg-fw small { font:400 11.5px/1.3 var(--body); color:var(--ink-2); }
.lpg-evs { display:flex; gap:6px; margin:0 0 6px; padding:2px 0 6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.lpg-evs::-webkit-scrollbar { display:none; }
.lpg-ev, .lpg-rc { flex:none; height:36px; padding:0 14px; border:0; border-radius:999px; font:600 13px/1 var(--body); color:var(--ink-2); background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line); cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.lpg-ev.on, .lpg-rc.on { color:rgb(var(--pa)); background:rgba(var(--pa), .14); box-shadow:inset 0 0 0 1px rgba(var(--pa), .55); }
.lpg-range { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; }
.lpg-rc.date { display:inline-flex; align-items:center; padding:0 8px; }
.lpg-rc.date input { max-width:150px; border:0; background:none; font:600 12.5px/1 var(--body); color:inherit; }
/* the date picker's own button inside the pill: bare, so the pill is the one outline (the user, 2026-10-12: "Set date" showed two
   layers, the pill and a squarer box over it) */
.lpg-rc.date .lpk-auto { width:auto; min-height:0; height:100%; padding:0 4px; gap:6px; border:0; border-radius:999px; background:none; box-shadow:none; font:600 12.5px/1 var(--body); color:inherit; }
.lpg-rc.date .lpk-auto svg { width:14px; height:14px; }
.lpg-prog { height:6px; margin:4px 2px 0; border-radius:999px; background:var(--lhs-well); overflow:hidden; }
.lpg-prog i { display:block; height:100%; border-radius:999px; background:rgb(var(--pa)); transition:width .2s ease; }
.lpg-fl li { display:grid; grid-template-columns:44px minmax(0, 1fr); align-items:start; gap:10px; padding:10px 0; border-bottom:1px solid var(--lhs-line); }
.lpg-fl li:last-child { border-bottom:0; }
.lpg-fw b { display:block; font:600 14px/1.3 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lpg-fl li.pitru .lpg-fd b { color:var(--ink-2); }
/* the couple (2026-10-13): two people from People, the verses' asks, the kundali match; each clear stretch with its lagna and,
   if asked, the breath beside it */
.lpg-cpl { display:grid; gap:10px; }
.lpg-cpl-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; }
.lpg-cpl-p { display:grid; gap:6px; min-width:0; font:600 9.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lpg-cpl-p select { width:100%; min-width:0; height:40px; padding:0 10px; border:0; border-radius:12px; font:600 13px/1 var(--body); color:var(--ink); background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
.lpg-cpl-p .lpk-field { width:100%; min-width:0; }
.lpg-cpl-tg { flex-wrap:wrap; }
.lpg-cpl-tg .lpg-rc { height:32px; padding:0 12px; font-size:12px; }
.lpg-cpl-m { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:12px; padding:10px 12px; border-radius:14px; background:var(--lhs-well); }
.lpg-cpl-m b { font:600 26px/1 var(--display); color:rgb(var(--pa)); font-variant-numeric:tabular-nums; }
.lpg-cpl-m b small { font-size:13px; color:var(--dim); font-weight:500; }
.lpg-cpl-m span { font:400 12.5px/1.4 var(--body); color:var(--ink-2); }
.lpg-cpl-ok { display:block; margin:0 0 4px; font:600 11px/1.35 var(--body); color:var(--lhs-good); }
.lpg-fw b em { font-style:normal; font-weight:500; font-size:12px; color:var(--ink-2); margin-left:4px; }
.lpg-fw b em.lpg-best { color:var(--lhs-good); font-weight:600; }
.lpg-br { display:grid; gap:2px; margin:2px 0 8px; }
.lpg-br i { display:block; font:400 11.5px/1.4 var(--body); font-style:normal; color:var(--ink-2); }
.lpg-br i b { display:inline; margin-right:4px; font:600 10px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:rgb(var(--pa)); }
.lpg-why { margin:6px 2px 12px; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.lpg-why summary { cursor:pointer; font-weight:600; color:var(--ink); }
.lpg-why ul { margin:6px 0 0; padding-left:18px; display:grid; gap:4px; }
.lpg-why small { color:var(--dim); margin-left:4px; }
@media (max-width:380px) { .lpg-cpl-row { grid-template-columns:minmax(0, 1fr); } }
.lpg-shrrow { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0 12px; }
.lpg-shrrow label { display:grid; gap:6px; font:600 9.5px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lpg-in { width:100%; height:44px; padding:0 12px; border:0; border-radius:12px; font:500 15px/1 var(--body); color:var(--ink); background:var(--lhs-well); box-shadow:inset 0 0 0 1px var(--lhs-line-2); }
.lpg-in:focus { outline:0; box-shadow:inset 0 0 0 2px rgba(var(--pa), .75); }
.lpg-go { width:100%; justify-content:center; }
.lpg-go svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lpg-sp { display:grid; gap:6px; margin:8px 0 0; padding-left:18px; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.lpg-why { list-style:none; display:grid; gap:6px; margin:6px 0; padding:0; }
.lpg-why li { position:relative; padding-left:16px; font:400 13px/1.45 var(--body); color:var(--ink); }
.lpg-why li::before { content:''; position:absolute; left:2px; top:7px; width:7px; height:7px; border-radius:50%; }
.lpg-why.good li::before { background:var(--lhs-good); }
.lpg-why.bad li::before { background:var(--lhs-hard); }
.lpg-why.note li::before { background:var(--dim); }
.lpg-why.note li { color:var(--ink-2); }
.lpg-hrs ul { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; padding:0; }
.lpg-hrs li { display:grid; gap:3px; padding:8px 12px; border-radius:12px; background:var(--lhs-well); }
.lpg-hrs b { font:600 13px/1.2 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lpg-hrs small { font:500 10px/1 var(--body); color:var(--ink-2); }
.lpg-hidden-date { position:fixed; left:-1000px; top:0; opacity:0; }
@media (max-width:440px) { .lpg-hcols { grid-template-columns:minmax(0, 1fr); gap:14px; } .lpg-solar { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:380px) { .lpg-tithi { font-size:26px; } .lpg-solar { grid-template-columns:1fr 1fr; } .lpg-two { grid-template-columns:minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .lpg-prog i, .lpg-fold svg { transition:none; } }
/* SwaraTantra's trident on its coin and in the menu (ui-lite-ribbon.js LRB_TRI, 2026-10-18): the picture at its own shape, sized by its
   height; on the coin's gold face (ready) an engraved dark edge keeps it apart from the gold */
/* placed by the face itself (a percentage height in its auto grid row fell back to the picture's own size, and the trident ran out of the coin) */
.lrb-face > img.lrb-tri { position:absolute; left:50%; top:50%; height:60%; width:auto; aspect-ratio:179 / 305; transform:translate(-50%, -50%); object-fit:cover; object-position:50% 0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)); -webkit-user-drag:none; user-select:none; }
.lrb-c.gold .lrb-face > img.lrb-tri { filter:drop-shadow(0 0 .6px #2A1D05) drop-shadow(0 0 .6px #2A1D05) drop-shadow(0 1.5px 2px rgba(42,29,5,.7)); }
.lrb-ic img.lrb-tri { height:26px; width:auto; aspect-ratio:179 / 305; object-fit:cover; object-position:50% 0; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.65)); }

/* THE COTTON, FOR A CHECK IN A KRIYA (2026-10-18, ui-lite-swaratantra.js lswtCotton*): the Undo/Confirm card's own dress (.obsm); more
   picture than words — three drawings in a row joined by a fine gold thread (out, check, back), each a word under it, the nostril ringed in
   its side's colour; on the check's card, the cotton going back in as a small drawing and two short lines */
.kxc { --c:var(--lhs-ida); gap:12px; }
.kxc.s-right, .obsm-kxc.s-right { --c:var(--lhs-pingala); }
.obsm-kxc { --c:var(--lhs-ida); }
.kxc-h { margin:0; font:400 24px/1.15 var(--display); letter-spacing:-.005em; color:var(--ink); }
/* the cotton back in, its own card (2026-10-22): the one picture, centred; one button across */
.kxc-flow.one { grid-template-columns:minmax(0, 1fr); }
.obsm-acts.one { grid-template-columns:minmax(0, 1fr); }
.kxc-flow { list-style:none; width:100%; margin:6px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.kxc-flow li { position:relative; display:grid; justify-items:center; gap:9px; opacity:0; transform:translateY(6px); animation:kxcIn .5s cubic-bezier(.2,.8,.2,1) forwards; }
.kxc-flow li:nth-child(2) { animation-delay:.14s; } .kxc-flow li:nth-child(3) { animation-delay:.28s; }
.kxc-flow li + li::before { content:""; position:absolute; top:41px; right:calc(50% + 45px); width:calc(100% + 6px - 90px); height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--brass-hi) 60%, transparent), transparent); }
.kxc-pic { width:82px; height:82px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--ink) 10%, transparent), color-mix(in srgb, var(--ink) 3%, transparent) 72%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 32%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent), 0 12px 24px -16px rgba(0,0,0,.85); }
.kxc-svg { width:58px; height:70px; overflow:visible; }
.kxc-ns { fill:none; stroke:color-mix(in srgb, var(--ink) 78%, transparent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kxc-no { fill:rgba(0,0,0,.55); stroke:color-mix(in srgb, var(--ink) 35%, transparent); stroke-width:.8; }
.kxc-on { fill:none; stroke:var(--c); stroke-width:1.9; filter:drop-shadow(0 0 3px var(--c)); }
.kxc-ct circle { fill:#F7F2E8; stroke:rgba(120,98,66,.4); stroke-width:.6; }
.kxc-ar { fill:none; stroke:var(--brass-hi); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kxc-br { fill:none; stroke:var(--c); stroke-width:1.9; stroke-linecap:round; stroke-dasharray:2.4 2.6; opacity:.9; }
.kxc-svg.k-out .kxc-ct { animation:kxcOut .9s .45s cubic-bezier(.2,.8,.2,1) both; }
.kxc-svg.k-back .kxc-ct { animation:kxcBack .9s .75s cubic-bezier(.2,.8,.2,1) both; }
.kxc-flow em { font:600 10px/1 var(--body); font-style:normal; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.kxc-side { display:inline-flex; align-items:center; gap:8px; margin:2px 0 0; padding:6px 12px 6px 10px; border-radius:999px; font:500 12px/1 var(--body); color:var(--ink-2);
  background:color-mix(in srgb, var(--ink) 5%, transparent); }
.kxc-side i { width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 9px var(--c); }
.kxc-again { display:inline-flex; align-items:center; gap:7px; margin:0; font:500 13px/1.3 var(--body); color:var(--brass-hi); }
.kxc-again svg { flex:none; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
@keyframes kxcIn { to { opacity:1; transform:none; } }
@keyframes kxcOut { from { transform:translate(0, -12px) scale(.7); opacity:.2; } }
@keyframes kxcBack { from { transform:translate(0, 10px); opacity:.25; } }
.obsm-kxc { display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; margin:0; padding:8px 14px 8px 8px; border-radius:16px; text-align:left;
  background:color-mix(in srgb, var(--brass-hi) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 32%, transparent); }
.obsm-kxc .kxc-mini { flex:none; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--ink) 6%, transparent); }
.obsm-kxc .kxc-svg { width:36px; height:44px; }
.obsm-kxc > span:last-child { display:grid; gap:3px; }
.obsm-kxc b { font:600 13.5px/1.2 var(--body); color:var(--ink); }
.obsm-kxc em { font:500 11.5px/1.2 var(--body); font-style:normal; color:var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .kxc-flow li { animation:none; opacity:1; transform:none; } .kxc-svg .kxc-ct { animation:none !important; } }
.kxc-flow.two { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:240px; margin-left:auto; margin-right:auto; }
/* END THE COTTON */

/* THE PASS EXPIRED (2026-10-18, ui-lite-swaratantra.js lsuExpiredHtml): on the record card, in the Kriya fold's place — an hourglass, the
   words, Recharge in polished gold and Silence for today beside it */
.lsu-exp { display:grid; gap:11px; padding:12px 14px; border-radius:16px; background:linear-gradient(180deg, rgba(36,26,12,.5), rgba(18,13,7,.5));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brass-hi) 30%, transparent); }
.lsu-ex { display:flex; align-items:center; gap:11px; min-width:0; }
.lsu-exi { flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:var(--brass-hi); background:color-mix(in srgb, var(--brass-hi) 11%, transparent); }
.lsu-exi svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lsu-exp .lsu-k { display:grid; gap:3px; min-width:0; }
.lsu-exp .lsu-k b { font:600 13.5px/1.2 var(--body); color:var(--ink); }
.lsu-exp .lsu-k em { font:500 11.5px/1.3 var(--body); font-style:normal; color:var(--ink-2); }
.lsu-exa { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:8px; }
.lsu-rc, .lsu-sil { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:40px; margin:0; padding:0 12px; border:0; border-radius:12px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:transform .15s ease, filter .2s ease; }
.lsu-rc { font:700 13px/1 var(--body); color:#241405; background:linear-gradient(180deg, #FBE7B0 0%, #E7BE62 48%, #C2913A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(92,54,12,.45), 0 8px 18px -12px rgba(242,190,90,.6); }
.lsu-sil { font:500 12.5px/1 var(--body); color:var(--ink-2); background:none; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.lsu-rc:active, .lsu-sil:active { transform:scale(.97); }
.lsu-rc:focus-visible, .lsu-sil:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
:root[data-theme="light"] .lsu-exp { background:rgba(255,250,238,.75); }
/* END THE PASS */

/* THE BREATH CARD, KRIYA-AWARE (the user, 2026-10-19; ui-lite-swaratantra.js lkx*): Kriya Aware in the card's corner, the point open
   under its sides, Kriya's switch and times in Today's check times, the practices on the quick check's own card */
.lkx-pill { flex:none; display:inline-flex; align-items:center; gap:6px; height:26px; margin:0; padding:0 10px 0 3px; border:0; border-radius:999px; cursor:default;
  font:600 11.5px/1 var(--body); letter-spacing:.02em; color:#F0D48E; white-space:nowrap; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none;
  /* AN INFO PILL (the user, 2026-10-19: "make the pill more like an info pill and not like a button"): flat, a soft gold tint and a hairline
     of gold, no sheen, no shadow, no glow, no press; a green tick in place of the trident says Kriya is on */
  background:rgba(242,207,122,.09); box-shadow:inset 0 0 0 1px rgba(242,207,122,.34); }
.lkx-pok { display:grid; place-items:center; flex:none; width:20px; height:20px; border-radius:50%; background:#2FA866; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.lkx-pok svg { width:12px; height:12px; fill:none; stroke:#fff; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
:root[data-theme="light"] .lkx-pill { color:#7A5210; background:rgba(176,122,26,.08); box-shadow:inset 0 0 0 1px rgba(176,122,26,.36); }
:root[data-theme="light"] .lkx-pok { background:#23935A; }
.lkx-pmark { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 50% 32%, #2E2614, #120E07); box-shadow:inset 0 0 0 1px rgba(242,207,122,.45); }
.lkx-img { display:block; width:13px; height:22px; object-fit:contain; filter:drop-shadow(0 0 4px rgba(255,204,96,.55)); }
.lkx-pill.off { filter:saturate(.55) brightness(.85); }
@keyframes lkxGlow { 50% { box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -3px 6px rgba(120,72,10,.35), inset 0 0 0 1px rgba(150,98,20,.55), 0 0 26px 0 rgba(255,204,96,.85), 0 8px 18px -12px rgba(0,0,0,.9); } }

.lkx-line { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:6px 10px; margin:10px 0 0; padding:10px 12px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,214,120,.12), rgba(255,214,120,.04)); box-shadow:inset 0 0 0 1px rgba(242,207,122,.5); }
.lkx-li { grid-row:span 2; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#FFD978; background:radial-gradient(circle at 50% 32%, #2E2614, #120E07); box-shadow:inset 0 0 0 1px rgba(242,207,122,.45); }
.lkx-tri { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lkx-lt { min-width:0; }
.lkx-lt b { display:block; font:600 13px/1.2 var(--body); color:#FFD978; }
.lkx-lt em { display:block; margin-top:2px; font:400 12px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.lkx-lt em.lkx-sv { color:var(--ink); font-weight:500; text-wrap:pretty; }      /* what this Kriya time is for (lkxServesSay, 2026-10-24) */
.lkx-chips { grid-column:2; display:flex; flex-wrap:wrap; gap:5px; }
.lkx-ch { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; font:600 11px/1 var(--body); color:var(--ink); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.lkx-ch i { width:8px; height:8px; border-radius:50%; }
.lkx-ch.n-ida i { background:var(--lhs-ida, #B9CBF2); } .lkx-ch.n-pingala i { background:var(--lhs-pingala, #F2913F); } .lkx-ch.n-sushumna i { background:#B79CF0; }
.lkx-ch.el { color:#FFD978; }
.lal-next.kx.due { background:linear-gradient(90deg, rgba(255,214,120,.16), rgba(255,214,120,.05)); box-shadow:inset 0 0 0 1px rgba(242,207,122,.55); }
.lqk-hd .lal-next.kx.due { background:none; box-shadow:none; }
.lal-next.kx.due i { background:#FFD978; box-shadow:0 0 0 4px rgba(255,217,120,.2), 0 0 12px #FFCC60; }
.lal-next.kx.due .lal-next-tx b { color:#FFD978; }
.lal-next.kx.done i { background:#FFD978; box-shadow:0 0 0 4px rgba(255,217,120,.16); }
.lkx-seg { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:14px; background:color-mix(in srgb, var(--ink) 6%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.lkx-seg button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px; margin:0; padding:0 10px; border:0; border-radius:11px; cursor:pointer; font:inherit; color:var(--ink-2); background:none; -webkit-tap-highlight-color:transparent; }
.lkx-seg b { font:600 13px/1 var(--body); }
.lkx-seg em { min-width:20px; padding:3px 6px; border-radius:999px; font:700 10.5px/1 var(--mono); font-style:normal; color:var(--ink-2); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.lkx-seg button[aria-selected="true"] { color:var(--ink); background:color-mix(in srgb, var(--ink) 10%, transparent); box-shadow:0 4px 12px -8px rgba(0,0,0,.8); }
.lkx-seg button[data-ltd-kxv="1"][aria-selected="true"] { color:#FFD978; background:linear-gradient(180deg, rgba(255,214,120,.18), rgba(255,214,120,.07)); box-shadow:inset 0 0 0 1px rgba(242,207,122,.55); }
.lkx-seg button[data-ltd-kxv="1"][aria-selected="true"] em { color:#241405; background:#FFD978; }
.lkx-seg button:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }
.lkx-sgm { display:grid; place-items:center; width:18px; height:22px; }
.lkx-sgm .lkx-img { width:11px; height:19px; }
.lkx-moves { color:#E9C979; }
.lkx-tog { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; padding:10px 12px; border-radius:16px;
  background:rgba(255,214,120,.05); box-shadow:inset 0 0 0 1px rgba(242,207,122,.3); }
.lkx-tog.on { background:linear-gradient(180deg, rgba(255,214,120,.13), rgba(255,214,120,.05)); box-shadow:inset 0 0 0 1px rgba(242,207,122,.55); }
.lkx-tog .lkx-li { grid-row:auto; }
.lkx-sw { position:relative; flex:none; width:44px; height:26px; margin:0; padding:0; border:0; border-radius:999px; cursor:pointer; background:rgba(255,255,255,.16); transition:background .2s ease; }
.lkx-sw i { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#F2EDE2; box-shadow:0 2px 6px rgba(0,0,0,.45); transition:transform .2s ease; }
.lkx-sw[aria-checked="true"] { background:linear-gradient(180deg, #F7D27A, #D9A441); }
.lkx-sw[aria-checked="true"] i { transform:translateX(18px); background:#FFFDF6; }
.lkx-sw:focus-visible { outline:2px solid #F2D98A; outline-offset:2px; }
.ltd-tl li.ltd-tl-kx { grid-template-columns:48px minmax(0, 1fr) auto 22px; background:linear-gradient(90deg, rgba(255,214,120,.13), rgba(255,214,120,.03)); }
.ltd-tl li.ltd-tl-kx.now { background:linear-gradient(90deg, rgba(255,214,120,.26), rgba(255,214,120,.08)); box-shadow:none; }
.ltd-tl li.ltd-tl-kx + li, .ltd-tl li + li.ltd-tl-kx { box-shadow:inset 0 1px 0 var(--ltd-rule); }
.ltd-tl-side.kx { min-width:0; color:#FFD978; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ltd-tl-side.kx i { box-shadow:0 0 0 2px rgba(255,214,120,.35); }
.ltd-tl-kx .ltd-tl-st.now { color:#241405; background:#FFD978; }
.ltd-tl-kx.past time, .ltd-tl-kx.past .ltd-tl-side { color:var(--dim); }
.lkx-card { --kc:#F2D98A; align-items:stretch; gap:12px; text-align:left; }
.lkx-ph { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; width:100%; }
.lkx-pic { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; color:var(--kc);
  background:color-mix(in srgb, var(--kc) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kc) 45%, transparent); }
.lkx-pic svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lkx-pn { min-width:0; }
.lkx-pn h3 { margin:0; font:500 21px/1.15 var(--display); color:var(--ink); text-align:left; }
.lkx-pn em { display:block; margin-top:3px; font:500 12.5px/1.2 var(--body); font-style:normal; color:var(--ink-2); }
.lkx-dose { padding:5px 9px; border-radius:999px; font:600 11px/1 var(--body); color:var(--kc); background:color-mix(in srgb, var(--kc) 12%, transparent); white-space:nowrap; }
/* Optional / Mandatory over each practice's name (ui-lite-swaratantra.js lkxPaint, 2026-10-22): a hollow ring for the practices that help,
   a solid coral tag for the cotton that holds the side */
.lkx-tag { display:inline-flex; align-items:center; gap:6px; height:21px; margin:0 0 6px; padding:0 9px 0 7px; border-radius:999px; box-sizing:border-box;
  font:700 9.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.lkx-tag i { flex:none; width:9px; height:9px; border-radius:50%; box-sizing:border-box; }
.lkx-tag.opt { color:#BFD9F5; background:rgba(191,217,245,.08); box-shadow:inset 0 0 0 1px rgba(191,217,245,.42); }
.lkx-tag.opt i { border:1.6px solid currentColor; }
.lkx-tag.must { color:#2A0E06; background:linear-gradient(180deg, #FF9F86, #EC6F52); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 14px -4px rgba(240,120,92,.75); }
.lkx-tag.must i { background:#2A0E06; box-shadow:0 0 0 2px rgba(42,14,6,.18); }
:root[data-theme="light"] .lkx-tag.opt { color:#2F5E8E; background:rgba(47,94,142,.07); box-shadow:inset 0 0 0 1px rgba(47,94,142,.4); }
:root[data-theme="light"] .lkx-tag.must { color:#fff; background:linear-gradient(180deg, #E86A4E, #C9472C); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
:root[data-theme="light"] .lkx-tag.must i { background:#fff; box-shadow:none; }
.lkx-pl { margin:0; font:400 13.5px/1.45 var(--body); color:var(--ink-2); }
.lkx-pf { display:grid; place-items:center; padding:8px; border-radius:16px; background:color-mix(in srgb, var(--ink) 4%, transparent); }
.lkx-pf svg { width:min(220px, 100%); height:auto; }
.lkx-how { margin:0; padding:10px 12px 10px 30px; display:grid; gap:5px; border-radius:14px; font:500 12.5px/1.45 var(--body); color:var(--ink-2); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.lkx-care summary { display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none; font:600 12px/1 var(--body); color:var(--ink-2); }
.lkx-care summary::-webkit-details-marker { display:none; }
.lkx-care summary i { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; font:700 10px/1 var(--body); font-style:normal; box-shadow:inset 0 0 0 1px currentColor; }
.lkx-care p { margin:8px 0 0; font:400 12px/1.45 var(--body); color:var(--ink-2); }
.lkx-care .lkx-src { color:var(--dim); font-size:11px; }
.lkx-acts { display:flex; justify-content:center; gap:22px; padding:4px 0 0; }
.lkx-b { flex:none; width:84px; height:84px; display:grid; place-content:center; justify-items:center; gap:3px; margin:0; padding:6px; border:0; border-radius:50%; cursor:pointer; font:inherit; -webkit-tap-highlight-color:transparent; transition:transform .12s ease; }
.lkx-b b { font:700 14px/1.1 var(--body); }
.lkx-b em { max-width:66px; font:600 9.5px/1.15 var(--body); font-style:normal; opacity:.85; }
.lkx-b.gold { color:#241405; background:radial-gradient(130% 70% at 50% 0%, rgba(255,250,228,.55), transparent 60%), linear-gradient(180deg, #F7D683, #D8A23E);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7), inset 0 -8px 14px rgba(92,54,12,.35), 0 12px 22px -12px rgba(0,0,0,.8), 0 0 20px -8px rgba(242,190,90,.6); }
.lkx-b.ghost { color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.lkx-b:active { transform:scale(.97); }
.lkx-b.was { box-shadow:inset 0 0 0 2px var(--jade); }
.lkx-b:focus-visible { outline:2px solid var(--brass-hi); outline-offset:3px; }
.lkx-foot { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:36px; }
.lkx-left { font:600 10.5px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.obsm-kx { display:flex; align-items:center; gap:8px; margin:0; font:600 12.5px/1.3 var(--body); color:#FFD978; }
.obsm-kx i { width:8px; height:8px; border-radius:50%; background:#FFD978; box-shadow:0 0 8px rgba(255,204,96,.7); }
@media (prefers-reduced-motion:reduce) { .lkx-sw, .lkx-sw i { transition:none; } }
/* SET ALARMS (2026-10-19, ui-lite-swipe.js ltdAlarmCard): the card is the Time table's (.tal); the iPhone's three steps */
.ltd-al-how { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin:0; padding:0; list-style:none; }
.ltd-al-how li { display:grid; justify-items:center; gap:4px; padding:8px 4px; border-radius:12px; text-align:center; font:500 11.5px/1.25 var(--body); color:var(--ink-2); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.ltd-al-how b { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; font:700 11px/1 var(--body); color:#241405; background:#FFD978; }
.ltd-calf { border-radius:16px; }
.ltd-calf > summary { display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px; cursor:pointer; list-style:none; font:600 12.5px/1 var(--body); color:var(--ink-2); }
.ltd-calf > summary::-webkit-details-marker { display:none; }
.ltd-calf > summary::after { content:''; width:7px; height:7px; margin-top:-3px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; }
.ltd-calf[open] > summary::after { transform:rotate(225deg); margin-top:3px; }
/* THE TIME TABLE, KRIYA-AWARE (2026-10-19): the pill by the title, a meal's line and its card */
.lkx-pill.sm { height:22px; gap:5px; padding:0 8px 0 2px; font-size:10.5px; vertical-align:middle; }
.lkx-pill.sm .lkx-pok { width:17px; height:17px; }
.lkx-pill.sm .lkx-pok svg { width:10px; height:10px; }
.lkx-pill.tt { margin-left:10px; transform:translateY(-2px); }
.lkx-meal { display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; margin-top:3px; font:600 12px/1.3 var(--body); color:#F2DDA6; }
.lkx-meal i { width:7px; height:7px; border-radius:50%; background:var(--lhs-pingala, #F2913F); box-shadow:0 0 0 2px rgba(242,145,63,.22); }
.lkx-meal em { font:500 11px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lhs-kxrow { display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:0 4px; }
.lhs-kxsay { font:500 12.5px/1.3 var(--body); color:var(--ink-2); }
.tst-titlerow .lkx-pill.hd { margin-left:auto; }
/* Kaarya, Kriya-aware: Your act's head, Every window's sheet, Predictions' Today */
.lkg-act.kx .lkg-card-hd { margin-bottom:-4px; }
.lkg-kxw { display:block; margin:0 0 6px; font:600 10px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lhs-daykx { margin:10px 0 2px; padding:0; }
.lpr-kxrow { margin:2px 0 10px; padding:0; }
.lkx-tag { display:inline-flex; align-items:center; gap:5px; font:600 11.5px/1 var(--body); letter-spacing:.02em; color:#F2D58A; white-space:nowrap; }
.tst-title .lkx-tag { display:flex; margin-top:5px; }
.lkx-tag em { font-style:normal; font-weight:500; letter-spacing:0; color:var(--ink-2); }
.lkx-tagm { display:grid; place-items:center; width:12px; height:16px; }
.lkx-tagm .lkx-img { width:9px; height:15px; filter:drop-shadow(0 0 3px rgba(255,204,96,.6)); }
.lkx-tagm .lkx-tri { width:12px; height:12px; }
.tst-mealalt { margin:0; font:500 12.5px/1.45 var(--body); color:var(--ink-2); }
.tst-mealalt b { color:var(--ink); font-variant-numeric:tabular-nums; }
.tst-meal { display:grid; gap:8px; padding:10px 12px; border-radius:14px; background:linear-gradient(180deg, rgba(255,214,120,.09), rgba(255,214,120,.02)); box-shadow:inset 0 0 0 1px rgba(242,207,122,.3); }
.tst-mealk { font:600 12.5px/1.3 var(--body); color:#F2DDA6; }
.tst-dishes { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.tst-dishes li { padding:5px 10px; border-radius:999px; font:600 12px/1.2 var(--body); color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
/* SET ALARMS ON THE TIME TABLE (ui-timetable.js ttSetCard) */
.tst-al { display:grid; gap:10px; }
.tst-al.on.ok { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 45%, transparent); }
.tst-alhd { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; }
.tst-alic { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:#FFD978; background:radial-gradient(circle at 50% 32%, #2E2614, #120E07); box-shadow:inset 0 0 0 1px rgba(242,207,122,.5); }
.tst-alic.ok { color:var(--jade); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jade) 55%, transparent); }
.tst-alic svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tst-altx b { display:block; font:600 15px/1.2 var(--body); color:var(--ink); }
.tst-altx em { display:block; margin-top:2px; font:400 12.5px/1.35 var(--body); font-style:normal; color:var(--ink-2); }
.tst-alpk { display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:6px; }
.tst-alo { display:grid; justify-items:center; gap:4px; min-height:70px; margin:0; padding:9px 6px; border:0; border-radius:14px; cursor:pointer; font:inherit; text-align:center;
  color:var(--ink-2); background:color-mix(in srgb, var(--ink) 5%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.tst-alo i { width:16px; height:16px; border-radius:5px; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent); }
.tst-alo b { font:600 12.5px/1.15 var(--body); color:var(--ink); }
.tst-alo em { font:500 10.5px/1.2 var(--body); font-style:normal; color:var(--dim); }
.tst-alo[aria-checked="true"] { background:linear-gradient(180deg, rgba(255,214,120,.16), rgba(255,214,120,.05)); box-shadow:inset 0 0 0 1.5px rgba(242,207,122,.75); }
.tst-alo[aria-checked="true"] i { background:#FFD978; box-shadow:none; position:relative; }
.tst-alo[aria-checked="true"] i::after { content:''; position:absolute; left:5px; top:2px; width:4px; height:8px; border-right:2px solid #241405; border-bottom:2px solid #241405; transform:rotate(45deg); }
.tst-alacts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.tst-alacts .tst-btn.wide { width:100%; justify-content:center; }
.tst-alacts .tst-btn svg { width:16px; height:16px; margin-right:6px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; }
/* A PAGE'S OWN ALARMS, FOLDED (ui-timetable.js ttAlarmFold) */
.tst-alf { padding:0; overflow:hidden; }
.tst-alfs { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; list-style:none; }
.tst-alfs::-webkit-details-marker { display:none; }
.tst-alfs .tst-alic { width:34px; height:34px; }
.tst-alfs .tst-alic svg { width:17px; height:17px; }
.tst-alfs .tst-altx b { font-size:14px; }
.tst-alfs .tst-altx em { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tst-alchip { padding:4px 9px; border-radius:999px; font:700 10.5px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); background:color-mix(in srgb, var(--ink) 7%, transparent); }
.tst-alchip.ok { color:#08130F; background:var(--jade); } .tst-alchip.warn { color:#2A1503; background:#F2B45A; } .tst-alchip.busy { color:#241405; background:#FFD978; }
.tst-alchev { width:8px; height:8px; margin:0 2px 3px 0; border-right:1.6px solid var(--ink-2); border-bottom:1.6px solid var(--ink-2); transform:rotate(45deg); transition:transform .2s ease; }
.tst-alf[open] .tst-alchev { transform:rotate(225deg); margin:3px 2px 0 0; }
.tst-alfb { display:grid; gap:10px; padding:2px 14px 14px; }
.tst-alwhat { margin:0; font:600 13px/1.3 var(--body); color:var(--ink); }
.tst-linkb { margin:0 0 0 4px; padding:0; border:0; background:none; cursor:pointer; font:600 12.5px/1.3 var(--body); color:#FFD978; text-decoration:underline; text-underline-offset:3px; }
.tst-alsub { border-radius:12px; background:color-mix(in srgb, var(--ink) 4%, transparent); }
.tst-alsub > summary { display:flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; cursor:pointer; list-style:none; font:600 12.5px/1 var(--body); color:var(--ink-2); }
.tst-alsub > summary::-webkit-details-marker { display:none; }
.tst-alsub > summary em { padding:2px 7px; border-radius:999px; font:700 10.5px/1 var(--mono); font-style:normal; color:var(--ink-2); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.tst-alsub > summary::after { content:''; margin-left:auto; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; }
.tst-alsub[open] > summary::after { transform:rotate(225deg); }
.tst-alsb { display:grid; gap:10px; padding:2px 12px 12px; }
.tst-alsb .tst-fields { gap:8px; }
.tst-alsb .tst-acts { margin:0; }
.tst-alsb .tst-up { margin:0; }
/* THE ALARMS CARD, AS A PHONE'S OWN SETTINGS (2026-10-19): a head with the bell, the next time and a switch; open, grouped rows with inset
   separators, each a switch, a value with its picker underneath, or a way on; one quiet status line; the next three; how they ring at the foot */
.tst-alf.tal { display:block; padding:0; overflow:hidden; }
.tal-hd { display:flex; align-items:center; gap:12px; padding:12px 14px 12px 12px; }
.tal-head { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tal-bell { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:var(--dim); background:var(--st-tile-hi); box-shadow:inset 0 0 0 1px var(--st-line-soft); }
.tal-bell svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tal-bell.on { color:#1B1406; background:linear-gradient(180deg, #F7E1A2, rgb(var(--acc-rgb))); box-shadow:inset 0 1px 0 rgba(255,255,255,.55); }
.tal-tx { display:grid; gap:2px; min-width:0; }
.tal-tx b { font:600 15px/1.2 var(--body); color:var(--ink); }
.tal-tx em { font:500 12.5px/1.3 var(--body); font-style:normal; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.tal.ok .tal-tx em, .tal.warn .tal-tx em, .tal.busy .tal-tx em { color:var(--ink-2); }
.tal-chev { flex:none; width:7px; height:7px; margin:0 4px 3px auto; border-right:1.6px solid var(--dim); border-bottom:1.6px solid var(--dim); transform:rotate(45deg); transition:transform .2s ease; }
.tal.open .tal-chev { margin-bottom:-3px; transform:rotate(225deg); }
/* the switch, the phone's own: a track and a knob */
.tal-sw { position:relative; flex:none; display:inline-block; width:48px; height:28px; margin:0; padding:0; border:0; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:var(--st-tile-hi); box-shadow:inset 0 0 0 1px var(--st-line); transition:background .2s ease, box-shadow .2s ease; }
.tal-sw i { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#F4F1EA; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .2s ease; pointer-events:none; }
.tal-sw.on { background:rgb(var(--acc-rgb)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.tal-sw.on i { transform:translateX(20px); background:#FFFDF6; }
.tal-sw input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.tal-sw:focus-visible, .tal-sw:has(input:focus-visible), .tal-head:focus-visible, .tal-r.go button:focus-visible, .tal-link:focus-visible { outline:2px solid rgb(var(--acc-rgb)); outline-offset:2px; }
/* the body */
.tal-b { display:grid; gap:8px; padding:12px 14px 14px; border-top:1px solid var(--st-line-soft); }
.tal-k { padding:6px 4px 0; font:600 10px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.tal-g, .tal-up { list-style:none; margin:0; padding:0; border-radius:16px; background:var(--st-tile); box-shadow:inset 0 0 0 1px var(--st-line-soft); overflow:hidden; }
.tal-r { position:relative; display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 12px; }
.tal-r + .tal-r::before { content:""; position:absolute; top:0; left:12px; right:0; height:1px; background:var(--st-line-soft); }
.tal-r[class*=" k-"] + .tal-r[class*=" k-"]::before { left:56px; }
.tal-ri { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:rgb(var(--acc-rgb)); background:rgba(var(--acc-rgb), .13); }
.tal-ri svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tal-r.k-checks .tal-ri { color:#A9BCFF; background:rgba(169,188,255,.13); }
:root[data-theme="light"] .tal-r.k-checks .tal-ri { color:#3D5BB8; background:rgba(61,91,184,.1); }
.tal-rt { flex:1 1 auto; min-width:0; display:grid; gap:2px; }
.tal-rt b { font:600 14px/1.25 var(--body); color:var(--ink); }
.tal-rt em { font:500 11.5px/1.3 var(--body); font-style:normal; color:var(--dim); }
.tal-r.v select { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; font-size:16px; }
.tal-val { flex:none; display:inline-flex; align-items:center; gap:8px; font:500 13.5px/1 var(--body); color:var(--ink-2); }
.tal-val i, .tal-gt { flex:none; width:7px; height:7px; border-right:1.6px solid var(--dim); border-top:1.6px solid var(--dim); transform:rotate(45deg); }
.tal-r.go { padding:0; }
.tal-r.go button { width:100%; display:flex; align-items:center; gap:12px; min-height:52px; margin:0; padding:8px 16px 8px 12px; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tal-r.go button:active, .tal-head:active { opacity:.75; }
/* one quiet status line; the other table's note */
.tal-st, .tal-other { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; font:500 12.5px/1.4 var(--body); color:var(--ink-2); background:var(--st-tile); }
.tal-st > i { flex:none; width:8px; height:8px; border-radius:50%; background:var(--dim); }
.tal-st.ok > i { background:#62C19E; box-shadow:0 0 8px rgba(98,193,158,.7); }
.tal-st.warn > i { background:#F2B04A; box-shadow:0 0 8px rgba(242,176,74,.6); }
.tal-st.busy > i, .tal-st.test > i { background:rgb(var(--acc-rgb)); }
.tal-st > span, .tal-other > span { flex:1 1 auto; min-width:0; }
.tal-link { flex:none; margin:0; padding:4px 0; border:0; background:none; font:600 12.5px/1.2 var(--body); color:rgb(var(--acc-rgb)); cursor:pointer; white-space:nowrap; }
/* the next three */
.tal-up li { display:grid; grid-template-columns:48px minmax(0, 1fr) auto; align-items:center; gap:10px; min-height:46px; padding:8px 12px; }
.tal-up li + li { border-top:1px solid var(--st-line-soft); }
.tal-up time { font:600 14px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.tal-up span { font:500 13px/1.3 var(--body); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tal-up em { font:500 11.5px/1 var(--body); font-style:normal; color:var(--dim); font-variant-numeric:tabular-nums; }
/* how they ring: small, at the foot */
.tal-how { margin-top:2px; }
.tal-how summary { list-style:none; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 4px 2px; font:600 12px/1.2 var(--body); color:var(--dim); cursor:pointer; }
.tal-how summary::-webkit-details-marker { display:none; }
.tal-how summary::after { content:""; width:6px; height:6px; margin-top:-3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.tal-how[open] summary::after { margin-top:3px; transform:rotate(225deg); }
.tal-how dl { display:grid; gap:4px 0; margin:8px 0 0; padding:12px; border-radius:14px; background:var(--st-tile); }
.tal-how dt { font:600 12px/1.3 var(--body); color:var(--ink); }
.tal-how dd { margin:0 0 6px; font:500 12px/1.45 var(--body); color:var(--dim); }
/* not ringing with the app closed (ui-timetable.js ttPhoneHelp, 2026-10-23): its one line over the makers' list */
.tal-help-p { margin:8px 2px 0; font:500 12px/1.5 var(--body); color:var(--dim); text-align:center; text-wrap:pretty; }
/* a value row: the app's own studio picker (ui-lite-pickers.js) takes the select; its field becomes the whole row, the value at its right */
.tal-r.v .lpk-field { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:flex-end; gap:8px; width:100%; height:100%; margin:0; padding:0 14px 0 45%;
  border:0; border-radius:0; background:none; box-shadow:none; font:500 13.5px/1 var(--body); color:var(--ink-2); text-align:right; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tal-r.v .lpk-field .lpk-v { flex:0 1 auto; min-width:0; margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.tal-r.v .lpk-field svg { width:14px; height:14px; flex:none; transform:rotate(-90deg); opacity:.75; }
.tal-r.v .lpk-field:active { background:rgba(255,255,255,.03); }
.tal-r.v:has(.lpk-field) .tal-val { visibility:hidden; }
/* the same card on Today's check times sheet: the Time table's own tokens lent to it, in both themes */
.ltd-tsh { --acc-rgb:238, 201, 110; --st-card:rgba(255,255,255,.04); --st-tile:rgba(255,255,255,.036); --st-tile-hi:rgba(255,255,255,.06); --st-line:rgba(255,255,255,.085); --st-line-soft:rgba(255,255,255,.05); }
:root[data-theme="light"] .ltd-tsh { --acc-rgb:150, 110, 18; --st-card:#FFFFFF; --st-tile:rgba(40,30,60,.035); --st-tile-hi:rgba(40,30,60,.06); --st-line:rgba(40,30,60,.11); --st-line-soft:rgba(40,30,60,.07); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ltd-tsh { --acc-rgb:150, 110, 18; --st-card:#FFFFFF; --st-tile:rgba(40,30,60,.035); --st-tile-hi:rgba(40,30,60,.06); --st-line:rgba(40,30,60,.11); --st-line-soft:rgba(40,30,60,.07); } }
.ltd-al.tal-sheet { margin:0 0 12px; padding:0; border:0; border-radius:20px; background:var(--st-card); box-shadow:inset 0 0 0 1px var(--st-line-soft); overflow:hidden; }
.tal-sheet .tal-head { cursor:default; }
.tal-sheet .ltd-al-how { margin:0; }
/* Kriya's alarms while the pass is out: the row shown locked, as it was set */
.tal-r.lock .tal-rt b { color:var(--ink-2); }
.tal-r.lock .tal-ri { opacity:.6; }
.tal-lk { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:var(--dim); box-shadow:inset 0 0 0 1px var(--st-line); }
.tal-lk svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* KRIYA'S ALARM, IN SWARATANTRA'S DRESS (2026-10-19, ui-timetable.js ttKxToast): a dark gold plate, the trident in its rings, the point's name
   and window, the side, element and practices as chips, Check my breath in polished gold; in the light theme an ivory plate */
.tmttoast.kxt { --kt-ink:#F6EAD0; --kt-ink2:#D8C49C; --kt-gold:#F2CF7A; --kt-g:242, 207, 122; --kt-plate:linear-gradient(180deg, #1C150B, #0C0905); --kt-ring:rgba(12,9,5,.92);
  display:grid; gap:12px; box-sizing:border-box; padding:16px 16px 10px; border:0; border-radius:24px; color:var(--kt-ink);
  background:radial-gradient(120% 90% at 50% 0%, rgba(255,214,120,.15), transparent 62%), var(--kt-plate);
  box-shadow:inset 0 0 0 1px rgba(var(--kt-g), .5), inset 0 1px 0 rgba(255,236,190,.14), 0 24px 48px -16px rgba(0,0,0,.75), 0 0 42px -18px rgba(255,204,96,.6);
  -webkit-backdrop-filter:none; backdrop-filter:none; }
:root[data-theme="light"] .tmttoast.kxt { --kt-ink:#2A1D0C; --kt-ink2:#5A4426; --kt-gold:#8A6114; --kt-g:138, 97, 20; --kt-plate:linear-gradient(180deg, #FFFDF7, #F5EAD3); --kt-ring:#FFFDF8; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .tmttoast.kxt { --kt-ink:#2A1D0C; --kt-ink2:#5A4426; --kt-gold:#8A6114; --kt-g:138, 97, 20; --kt-plate:linear-gradient(180deg, #FFFDF7, #F5EAD3); --kt-ring:#FFFDF8; } }
.kxt-hd { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:14px; }
.kxt-md { display:grid; place-items:center; width:50px; height:50px; border-radius:50%;
  background:radial-gradient(circle at 50% 32%, rgba(255,236,190,.16), transparent 70%), radial-gradient(circle, #2A2012, #100C07);
  box-shadow:inset 0 0 0 1.2px rgba(var(--kt-g), .85), 0 0 0 4px var(--kt-ring), 0 0 0 5px rgba(var(--kt-g), .3), 0 0 20px -6px rgba(255,204,96,.6); }
.kxt-md img { width:auto; height:31px; filter:drop-shadow(0 0 8px rgba(255,204,96,.55)); animation:kxtIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes kxtIn { from { transform:scale(.7); opacity:0; } }
.kxt-tx { display:grid; gap:3px; min-width:0; }
.kxt-k { font:600 10px/1.2 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--kt-gold); }
.kxt-tx b { font:400 21px/1.15 var(--display); color:var(--kt-ink); text-wrap:balance; }
.kxt-tx em { font:600 12px/1.2 var(--body); font-style:normal; color:var(--kt-ink2); font-variant-numeric:tabular-nums; }
.kxt-cs { display:flex; flex-wrap:wrap; gap:6px; }
.kxt-c { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; font:600 12px/1 var(--body); color:var(--kt-ink);
  background:rgba(var(--kt-g), .08); box-shadow:inset 0 0 0 1px rgba(var(--kt-g), .3); }
.kxt-c i { width:8px; height:8px; border-radius:50%; background:#FFD978; }
.kxt-c.s-left i { background:var(--lhs-ida, #A9BCFF); } .kxt-c.s-right i { background:var(--lhs-pingala, #F2B04A); }
.kxt-c.q { color:var(--kt-ink2); }
.kxt-p { margin:0; font:500 13px/1.45 var(--body); color:var(--kt-ink2); }
.kxt-sv { margin:0; font:500 13px/1.45 var(--body); color:var(--kt-ink2); text-wrap:pretty; }      /* what this Kriya time is for */
.kxt-acts { display:grid; gap:2px; }
.kxt-go { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; margin:0; padding:0 20px; border:0; border-radius:999px; cursor:pointer;
  font:700 15px/1 var(--body); color:#241405; text-shadow:0 1px 0 rgba(255,240,200,.5); -webkit-tap-highlight-color:transparent;
  background:radial-gradient(130% 120% at 50% 0%, rgba(255,250,228,.55), transparent 60%), linear-gradient(180deg, #FCE3A0 0%, #EBC062 48%, #C99332 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7), inset 0 -6px 12px rgba(92,54,12,.32), inset 0 0 0 1px rgba(122,82,22,.55), 0 12px 22px -14px rgba(0,0,0,.8); transition:transform .12s ease; }
.kxt-go svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.kxt-go:active { transform:scale(.985); }
.kxt-sub { display:flex; justify-content:center; gap:4px; }
.kxt-sub button { min-height:40px; margin:0; padding:0 14px; border:0; border-radius:12px; cursor:pointer; background:none; font:600 13px/1 var(--body); color:var(--kt-ink2); }
.kxt-sub button:active { opacity:.7; }
.kxt-go:focus-visible, .kxt-sub button:focus-visible { outline:2px solid var(--kt-gold); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .kxt-md img { animation:none; } }
/* MAHAKAAL, SWARATANTRA-AWARE (2026-10-19, ui-lite-mkchat.js lmkcStx*): Kriya Aware on the name's line, the pages under an answer, the
   quiet line where no pass runs */
.lmk-trow { display:flex; align-items:center; gap:10px; min-width:0; }
.lmk-trow .lkx-pill.lmk-kx { height:22px; gap:5px; padding:0 9px 0 2px; font-size:10.5px; letter-spacing:.02em; text-transform:none; }
.lmk-trow .lkx-pill.lmk-kx .lkx-pok { width:17px; height:17px; }
.lmk-trow .lkx-pill.lmk-kx .lkx-pok svg { width:10px; height:10px; }
@media (max-width:360px) { .lmk-trow .lkx-pill.lmk-kx .lkx-ptx { display:none; } .lmk-trow .lkx-pill.lmk-kx { padding:0 2px; } }
.mkc-stx { margin-top:12px; }
.mkc-chip.stx { display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 8px; color:var(--lmk-gold); font-weight:600;
  background:rgba(var(--lmk-gold-rgb), .07); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .34); }
.mkc-chip.stx i { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:rgba(var(--lmk-gold-rgb), .12); }
.mkc-chip.stx i svg { width:13px; height:13px; margin:0; }
.mkc-stxp { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:6px 12px; margin-top:12px; padding:11px 12px; border-radius:16px;
  background:rgba(var(--lmk-gold-rgb), .05); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .2); }
.mkc-stxi { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--lmk-cap); box-shadow:var(--lmk-cap-sh); }
.mkc-stxi svg { width:20px; height:20px; }
.mkc-stxp p { margin:0; font:500 12.5px/1.45 var(--body); color:var(--lmk-dim); }
.mkc-stxp .mkc-chip.stx { grid-column:2; justify-self:start; }
/* Mahakaal's Kriya card (2026-10-24: concise, compact, clean; ui-lite-mkchat.js lmkcKxHtml): the tripund, one line, one button */
.mkc-kx { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; margin-top:12px; padding:10px 10px 10px 11px; border-radius:16px;
  background:rgba(var(--lmk-gold-rgb), .05); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .22); }
.mkc-kx .mkc-stxi { width:30px; height:30px; }
.mkc-kx .mkc-stxi svg { width:18px; height:18px; }
.mkc-kxt { display:grid; gap:2px; min-width:0; }
.mkc-kxt b { font:600 13.5px/1.25 var(--body); color:var(--lmk-ink); overflow-wrap:anywhere; }
.mkc-kxt span { font:500 12px/1.35 var(--body); color:var(--lmk-dim); }
.mkc-kxb { min-height:34px; padding:0 15px; border:0; border-radius:999px; cursor:pointer; font:600 12.5px/1 var(--body); color:#1A1407;
  background:linear-gradient(180deg, #F6DE95, #D7B25A); box-shadow:0 8px 18px -10px rgba(215,178,90,.7); white-space:nowrap; }
.mkc-kxb:active { transform:scale(.97); }
.mkc-kxb:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:2px; }
@media (max-width:340px) { .mkc-kx { grid-template-columns:auto minmax(0, 1fr); } .mkc-kxb { grid-column:2; justify-self:start; } }
/* PURVA JANMA (2026-10-24, ui-lite-pj.js): the verse card, its seal, the blind check and the body check, in the chat */
.mkc-pj h4 { margin:4px 0 6px; }
.pj-seal { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font:600 10.5px/1.2 var(--body); letter-spacing:.04em; color:var(--lmk-dim);
  background:rgba(var(--lmk-gold-rgb), .06); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .18); font-variant-numeric:tabular-nums; }
.pj-fr, .pj-note, .pj-p { margin:10px 0 0; font:500 12.5px/1.5 var(--body); color:var(--lmk-dim); }
.pj-fr { color:var(--lmk-ink); }
.pj-c { font-style:normal; font-size:11px; color:var(--lmk-dim); opacity:.82; white-space:normal; }
.pj-s { display:grid; gap:6px; margin-top:12px; padding:11px 12px 12px; border-radius:16px; background:rgba(var(--lmk-gold-rgb), .035); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .14); }
.pj-s h5 { margin:0 0 2px; font:600 13px/1.3 var(--body); color:var(--lmk-ink); }
.pj-s h5 small { display:block; margin-top:2px; font:500 11.5px/1.35 var(--body); color:var(--lmk-dim); }
.pj-r { display:grid; grid-template-columns:92px minmax(0, 1fr); gap:10px; align-items:baseline; }
.pj-r p { margin:0; font:500 12.5px/1.45 var(--body); color:var(--lmk-ink); overflow-wrap:anywhere; }
.pj-k { font:600 10px/1.3 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--lmk-gold); }
.pj-w { color:var(--lmk-dim); font-style:italic; }
.pj-arc { grid-template-columns:minmax(0, 1fr); gap:10px; }
.pj-a { display:grid; gap:3px; }
.pj-a b { font:600 14px/1.25 var(--body); color:var(--lmk-ink); text-transform:capitalize; }
.pj-a small { font:500 11.5px/1.35 var(--body); color:var(--lmk-dim); }
.pj-a.now { padding:9px 10px; border-radius:12px; background:rgba(var(--lmk-gold-rgb), .06); }
.pj-chips { display:flex; flex-wrap:wrap; gap:6px; }
.pj-chip, .pj-ghost { min-height:32px; padding:0 13px; border:0; border-radius:999px; cursor:pointer; font:600 12px/1 var(--body); color:var(--lmk-ink);
  background:rgba(var(--lmk-gold-rgb), .08); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .32); }
.pj-chip:active, .pj-ghost:active, .pj-opt:active { transform:scale(.97); }
.pj-lnk { justify-self:start; padding:4px 0; border:0; background:none; cursor:pointer; font:600 12px/1.2 var(--body); color:var(--lmk-gold); text-decoration:underline; text-underline-offset:3px; }
.pj-btns { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pj-res { display:grid; gap:6px; margin-top:12px; padding:11px 12px; border-radius:16px; background:rgba(var(--lmk-gold-rgb), .06); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .22); }
.pj-res p { margin:0; font:500 12.5px/1.5 var(--body); color:var(--lmk-ink); }
.pj-res small { font:500 11px/1.4 var(--body); color:var(--lmk-dim); }
.pj-sub { margin:4px 0 0 !important; font:600 11px/1.3 var(--body) !important; letter-spacing:.06em; text-transform:uppercase; color:var(--lmk-dim) !important; }
.pj-l { display:grid; gap:4px; margin:0; padding:0 0 0 16px; font:500 12.5px/1.45 var(--body); color:var(--lmk-ink); }
.pj-step { display:grid; gap:10px; margin-top:12px; }
.pj-prog { height:4px; border-radius:999px; background:rgba(var(--lmk-gold-rgb), .14); overflow:hidden; }
.pj-prog i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, #D7B25A, #F6DE95); transition:width .25s ease; }
.pj-q { margin:0; font:600 14.5px/1.4 var(--body); color:var(--lmk-ink); }
.pj-opts { display:grid; gap:8px; }
.pj-opts.row { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
.pj-opt { min-height:42px; padding:9px 13px; border:0; border-radius:14px; cursor:pointer; text-align:left; font:500 12.5px/1.4 var(--body); color:var(--lmk-ink);
  background:rgba(var(--lmk-gold-rgb), .06); box-shadow:inset 0 0 0 1px rgba(var(--lmk-gold-rgb), .22); }
.pj-opts.row .pj-opt { padding:8px 4px; text-align:center; font-size:11px; line-height:1.25; }
.pj-opt:focus-visible, .pj-chip:focus-visible, .pj-ghost:focus-visible, .pj-lnk:focus-visible { outline:2px solid var(--lmk-gold); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .pj-prog i { transition:none; } }
@media (max-width:360px) { .pj-r { grid-template-columns:minmax(0, 1fr); gap:2px; } .pj-opts.row { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
/* END PURVA JANMA */
/* the thinking row (2026-10-24): the avatar is the orb itself, never a second disc; the steps done, ticked, under the one running */
.mkc-row.mk.pend .mkc-av.thinking { background:none; box-shadow:none; }
.mkc-av.thinking .mkc-orb { width:30px; height:30px; }
.mkc-av.thinking .mkc-orb .c { width:24px; height:24px; }
.mkc-av.thinking .mkc-orb .c .lmk-tri { width:17px; height:17px; }
.mkc-steps-done { display:flex; flex-wrap:wrap; gap:4px 12px; margin:6px 0 0; padding:0; list-style:none; font:500 11.5px/1.3 var(--body); color:var(--lmk-dim); }
.mkc-steps-done li { display:inline-flex; align-items:center; gap:4px; }
.mkc-med.solo { grid-template-columns:minmax(0, 1fr); }
.mkc-steps-done svg { width:11px; height:11px; fill:none; stroke:var(--lmk-gold); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
/* MAHAKAAL IS MEDITATING (2026-10-19, ui-lite-mkchat.js lmkcMeditate): a minute's ring round the count, the words, Ask now */
.mkc-med { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:14px; }
.mkc-medr { --p:0; position:relative; display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  background:conic-gradient(rgb(var(--lmk-gold-rgb)) calc(var(--p) * 360deg), rgba(var(--lmk-gold-rgb), .14) 0); }
.mkc-medr::before { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--lmk-cap); box-shadow:var(--lmk-cap-sh); }
.mkc-medr i { position:absolute; inset:-5px; border-radius:50%; box-shadow:0 0 18px -6px rgba(var(--lmk-gold-rgb), .6); }
.mkc-medn { position:relative; font:600 15px/1 var(--body); color:var(--lmk-gold); font-variant-numeric:tabular-nums; }
.mkc-medn.done svg { width:24px; height:24px; }
.mkc-medt { display:grid; gap:3px; justify-items:start; min-width:0; }
.mkc-medt b { font:600 14.5px/1.25 var(--body); color:var(--lmk-ink); }
.mkc-medt em { font:500 12.5px/1.35 var(--body); font-style:normal; color:var(--lmk-dim); }
.mkc-medgo { margin-top:6px; min-height:32px; padding:6px 13px; }
/* GET A GURU, RECOMMENDED (2026-10-20): the pill beside the name, wherever the way in is */
.lrb-pill { display:inline-block; margin-left:8px; padding:3px 7px; border-radius:999px; vertical-align:2px; white-space:nowrap;
  font:800 8.5px/1 var(--body); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:#241405;
  background:linear-gradient(180deg, #FCE3A0, #E2B457); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
.mkc-rexp .lrb-pill { margin-left:6px; }
@media (prefers-reduced-motion:reduce) { .tal-sw, .tal-sw i, .tal-chev { transition:none; } }
/* END KRIYA-AWARE */

/* ==== WHAT HAS CHANGED (2026-10-20; ui-lite-bp.js lbpChgHtml, ui-lite-mkchat.js lmkcChgHtml) ====
   On the guess card: one quiet row, lit gold when today's latest check differed from the guess. In Mahakaal's answer: the check against the
   guess, the rest of the day before and now beside the Swara Code (each with its element strip), the shifts, the minutes in tune. */
.lbp-chg { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; width:100%; margin:8px 0 2px; padding:9px 12px; border:0; border-radius:14px; cursor:default; text-align:left;
  background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); color:var(--ink-2); opacity:.62; transition:opacity .25s, background .25s, box-shadow .25s; }
.lbp-chg-i { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.05); }
.lbp-chg-i svg, .lbp-chg-c { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lbp-chg-t { display:grid; gap:2px; min-width:0; } .lbp-chg-t b { font:600 13px/1.2 var(--body); color:var(--ink); } .lbp-chg-t em { font:500 11px/1.3 var(--body); font-style:normal; color:var(--dim); }
.lbp-chg.on { cursor:pointer; opacity:1; color:#F1CF86; background:linear-gradient(135deg, rgba(236,196,120,.16), rgba(160,110,40,.08)); box-shadow:inset 0 0 0 1px rgba(236,196,120,.55), 0 8px 22px -14px rgba(236,196,120,.6); }
.lbp-chg.on .lbp-chg-i { background:radial-gradient(circle at 40% 30%, rgba(255,226,160,.4), rgba(200,150,60,.18)); color:#FFE3A6; animation:lbpchg 1.6s ease-out 2; }
.lbp-chg.on .lbp-chg-t em { color:#E3C58C; }
.lbp-chg:focus-visible { outline:2px solid #E9C46A; outline-offset:2px; }
@keyframes lbpchg { 0% { box-shadow:0 0 0 0 rgba(236,196,120,.55); } 100% { box-shadow:0 0 0 12px rgba(236,196,120,0); } }
:root[data-theme="light"] .lbp-chg { background:rgba(42,36,51,.03); box-shadow:inset 0 0 0 1px rgba(42,36,51,.1); }
:root[data-theme="light"] .lbp-chg.on { color:#8A5D12; background:linear-gradient(135deg, rgba(214,160,64,.16), rgba(214,160,64,.06)); box-shadow:inset 0 0 0 1px rgba(160,110,30,.45); }
:root[data-theme="light"] .lbp-chg.on .lbp-chg-i { color:#7A4F0E; } :root[data-theme="light"] .lbp-chg.on .lbp-chg-t em { color:#8A6420; }
@media (prefers-reduced-motion: reduce) { .lbp-chg.on .lbp-chg-i { animation:none; } }
.mkc-chg { display:grid; gap:10px; margin:10px 0 2px; padding:14px; border-radius:18px; background:linear-gradient(160deg, rgba(236,196,120,.1), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(236,196,120,.32); }
.mkc-chg-h { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.mkc-chg-k { font:700 10.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:#E9C46A; } .mkc-chg-h em { font:500 11.5px/1.2 var(--body); font-style:normal; color:var(--dim); }
.mkc-chg-ck { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(0,0,0,.18); }
.mkc-chg-ck span { display:grid; gap:2px; } .mkc-chg-ck em { font:600 9.5px/1.2 var(--body); font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.mkc-chg-ck b { font:600 14px/1.2 var(--body); color:var(--ink); } .mkc-chg-ck .saw b { color:#F1CF86; } .mkc-chg-ck > i { font-style:normal; color:var(--dim); }
.mkc-chg-bands { display:grid; gap:7px; }
.mkc-chg-ln { display:grid; grid-template-columns:62px minmax(0, 1fr); align-items:center; gap:8px; } .mkc-chg-ln > span { font:600 9px/1.2 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.mkc-chg-ln.now > span { color:var(--ink); }
.mkc-chg-sd { position:relative; height:12px; border-radius:6px; overflow:hidden; background:rgba(255,255,255,.06); } .mkc-chg-ln.now .mkc-chg-sd { height:16px; border-radius:8px; }
.mkc-chg-sd i, .mkc-chg-el i { position:absolute; top:0; bottom:0; }
.mkc-chg-sd i.s-left { background:#9FC3EE; } .mkc-chg-sd i.s-right { background:#F2A65A; } .mkc-chg-sd i.s-both { background:#C9B6E8; }
.mkc-chg-el { position:relative; height:4px; margin-top:3px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.05); }
.mkc-chg-ax { display:grid; grid-template-columns:62px repeat(3, 1fr); gap:8px; font:500 9.5px/1 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }
.mkc-chg-ax span:nth-child(3) { text-align:center; } .mkc-chg-ax span:nth-child(4) { text-align:right; }
.mkc-chg-sh { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.mkc-chg-sh li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 10px; border-radius:12px; background:rgba(255,255,255,.035); font:500 12px/1.3 var(--body); }
.mkc-chg-w { color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; } .mkc-chg-ft { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.mkc-chg-ft em.was { font-style:normal; color:var(--dim); text-decoration:line-through; text-decoration-color:rgba(255,255,255,.25); } .mkc-chg-ft i { font-style:normal; color:var(--dim); } .mkc-chg-ft b { color:#F1CF86; font-weight:600; }
.mkc-chg-none { margin:0; font:400 12.5px/1.45 var(--body); color:var(--ink-2); }
.mkc-chg-tn { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .mkc-chg-tn span { font:600 10px/1.2 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.mkc-chg-tn b { font:600 14px/1.2 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; } .mkc-chg-tn em { font:600 12px/1.2 var(--body); font-style:normal; } .mkc-chg-tn em.up { color:#7FD3A8; } .mkc-chg-tn em.dn { color:#EC8F7A; }
.mkc-chg-nx { margin:0; font:500 12.5px/1.4 var(--body); color:var(--ink-2); } .mkc-chg-nx b { color:var(--ink); font-variant-numeric:tabular-nums; }
.mkc-chg-fine { margin:0; font:400 11px/1.35 var(--body); color:var(--dim); }
:root[data-theme="light"] .mkc-chg { background:linear-gradient(160deg, rgba(214,160,64,.1), rgba(255,255,255,.4)); box-shadow:inset 0 0 0 1px rgba(160,110,30,.3); }
:root[data-theme="light"] .mkc-chg-k { color:#8A5D12; } :root[data-theme="light"] .mkc-chg-ck { background:rgba(42,36,51,.04); } :root[data-theme="light"] .mkc-chg-ck .saw b, :root[data-theme="light"] .mkc-chg-ft b { color:#8A5D12; }
:root[data-theme="light"] .mkc-chg-sd { background:rgba(42,36,51,.06); } :root[data-theme="light"] .mkc-chg-sh li { background:rgba(42,36,51,.035); }
/* the rest of the day foretold: a strip of the stretches, then each stretch with its fruit (2026-10-20, "like phaladesh … not just the statistics") */
.mkc-ph-band { position:relative; height:10px; border-radius:5px; overflow:hidden; background:rgba(255,255,255,.06); }
.mkc-ph-band i { position:absolute; top:0; bottom:0; } .mkc-ph-band i.s-left { background:#9FC3EE; } .mkc-ph-band i.s-right { background:#F2A65A; } .mkc-ph-band i.s-both { background:#C9B6E8; }
.mkc-ph-band i.chg { box-shadow:inset 0 0 0 1.5px #FFE3A6; }
.mkc-ph-ax { display:flex; justify-content:space-between; font:500 9.5px/1 var(--body); color:var(--dim); font-variant-numeric:tabular-nums; }
.mkc-ph-l { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.mkc-ph { display:grid; gap:6px; padding:11px 12px; border-radius:14px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.mkc-ph.chg { background:linear-gradient(150deg, rgba(236,196,120,.12), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(236,196,120,.4); }
.mkc-ph-t { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.mkc-ph-t > b { font:600 14px/1.2 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.mkc-ph-b { display:inline-flex; align-items:center; gap:5px; font:600 11.5px/1.2 var(--body); color:var(--ink-2); }
.mkc-ph-b i { display:inline-block; width:8px; height:8px; border-radius:50%; } .mkc-ph.s-left .mkc-ph-b i.sd { background:#9FC3EE; } .mkc-ph.s-right .mkc-ph-b i.sd { background:#F2A65A; } .mkc-ph.s-both .mkc-ph-b i.sd { background:#C9B6E8; }
.mkc-ph-b i.lel-s { margin-left:4px; }
.mkc-ph-f { margin:0; font:400 13px/1.5 var(--body); color:var(--ink-2); } .mkc-ph-f b { font-weight:600; color:var(--ink); }
.mkc-ph-g { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mkc-ph-g .tg { padding:3px 8px; border-radius:999px; font:600 10px/1.2 var(--body); letter-spacing:.02em; }
.mkc-ph-g .tg.in { color:#7FD3A8; box-shadow:inset 0 0 0 1px rgba(127,211,168,.45); } .mkc-ph-g .tg.off { color:#EC8F7A; box-shadow:inset 0 0 0 1px rgba(236,143,122,.45); }
.mkc-ph-g .tg.mx { color:var(--ink-2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); } .mkc-ph-g .tg.chg { color:#F1CF86; box-shadow:inset 0 0 0 1px rgba(241,207,134,.55); }
.mkc-ph-g em { margin-left:auto; font:500 10px/1.2 var(--body); font-style:normal; color:var(--dim); }
:root[data-theme="light"] .mkc-ph { background:rgba(42,36,51,.035); box-shadow:inset 0 0 0 1px rgba(42,36,51,.08); }
:root[data-theme="light"] .mkc-ph.chg { background:linear-gradient(150deg, rgba(214,160,64,.12), rgba(255,255,255,.4)); box-shadow:inset 0 0 0 1px rgba(160,110,30,.38); }
:root[data-theme="light"] .mkc-ph-g .tg.in { color:#2E8F69; } :root[data-theme="light"] .mkc-ph-g .tg.off { color:#C4472E; } :root[data-theme="light"] .mkc-ph-g .tg.chg { color:#8A5D12; }
/* ==== AAKASHVAANI, v3 (2026-10-25, ui-lite-mkchat.js lmkcChgHtml: "what sky is coming right now and in the rest of the day … what to begin,
   and what to avoid … all the necessary alerts"): the proclamation's lead, what holds now as quiet chips, the sky till sunrise as one band
   (to begin in above the line, to keep clear of below, the breath a thread between), the alerts in their order, Begin and Avoid; the
   sheet's own tokens, so it reads by day and by night ==== */
.mkc-chg.v3 { display:grid; gap:14px; padding:16px 14px 14px; }
.mkc-chg.v3 .mkc-chg-k { letter-spacing:.2em; }
.mkc-avp { margin:0; font:500 15.5px/1.5 var(--body), 'Tiro Devanagari Hindi', serif; color:var(--lmk-ink); text-wrap:pretty; }
.mkc-avp b { font-weight:700; color:var(--lmk-gold); }
.mkc-avnow { display:flex; flex-wrap:wrap; gap:6px; }
.mkc-avnow span { display:inline-grid; gap:1px; padding:6px 11px 7px; border-radius:12px; font:600 12.5px/1.2 var(--body); color:var(--lmk-ink);
  background:var(--lmk-well); box-shadow:inset 0 0 0 1px var(--lmk-line); }
.mkc-avnow em { font:600 9px/1.2 var(--body); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--lmk-dim); }
.mkc-avnow .q-good { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-good) 45%, transparent); }
.mkc-avnow .q-bad { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-heavy) 50%, transparent); }
.mkc-avnow .br.s-left { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-ida) 55%, transparent); }
.mkc-avnow .br.s-right { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-ping) 55%, transparent); }
.mkc-avsky { position:relative; display:grid; grid-template-rows:12px 6px 12px; gap:3px; padding:6px 0; margin-top:12px; border-radius:12px; }
.mkc-avsky > div { position:relative; border-radius:6px; background:var(--lmk-well); }
.mkc-avsky .th { background:color-mix(in srgb, var(--lmk-ink) 8%, transparent); }
.mkc-avsky i { position:absolute; top:0; bottom:0; border-radius:6px; }
.mkc-avsky .up i.g { background:linear-gradient(180deg, color-mix(in srgb, var(--lmk-gold) 95%, transparent), color-mix(in srgb, var(--lmk-gold) 60%, transparent)); }
.mkc-avsky .dn i.r { background:color-mix(in srgb, var(--lmk-heavy) 75%, transparent); }
.mkc-avsky .th i.s-left { background:var(--lmk-ida); } .mkc-avsky .th i.s-right { background:var(--lmk-ping); } .mkc-avsky .th i.s-both { background:color-mix(in srgb, var(--lmk-ink) 35%, transparent); }
.mkc-avsky .tk { position:absolute; top:0; bottom:0; width:1px; background:color-mix(in srgb, var(--lmk-ink) 30%, transparent); }
.mkc-avsky .tk span { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:3px; font:600 9.5px/1 var(--body); color:var(--lmk-dim); white-space:nowrap; font-variant-numeric:tabular-nums; }
.mkc-avax { display:flex; justify-content:space-between; margin-top:-4px; font:600 10px/1 var(--body); color:var(--lmk-dim); font-variant-numeric:tabular-nums; }
.mkc-avl2 { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.mkc-avl2 li { display:grid; grid-template-columns:86px minmax(0, 1fr); gap:2px 10px; padding:9px 0 9px 12px; border-top:1px solid var(--lmk-line); position:relative; }
.mkc-avl2 li:first-child { border-top:0; }
.mkc-avl2 li::before { content:""; position:absolute; left:0; top:15px; width:6px; height:6px; border-radius:50%; background:var(--lmk-dim); }
.mkc-avl2 li.t-avoid::before { background:var(--lmk-heavy); } .mkc-avl2 li.t-favour::before { background:var(--lmk-good); }
/* a "now" row: its box reaches evenly past the row on both sides, so its time and words stay on the same lines as every other row's; its
   dot inside the box; an even tint and outline, never a one-sided fade; the hairlines either side of it dropped */
.mkc-avl2 li.now { margin:0 -10px; padding:10px 10px 10px 22px; border-top-color:transparent; border-radius:12px;
  background:color-mix(in srgb, var(--lmk-gold) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-gold) 24%, transparent); }
.mkc-avl2 li.now::before { left:10px; top:16px; }
.mkc-avl2 li.now + li { border-top-color:transparent; }
.mkc-avl2 li.now + li.now { margin-top:6px; }
.mkc-avl2 .tm { font:600 12px/1.3 var(--body); color:var(--lmk-ink2); font-variant-numeric:tabular-nums; }
.mkc-avl2 li.now .tm { color:var(--lmk-gold); }
.mkc-avl2 .tx { display:grid; gap:2px; min-width:0; }
.mkc-avl2 .tx b { font:600 13.5px/1.3 var(--body); color:var(--lmk-ink); }
.mkc-avl2 .tx em { font:400 12.5px/1.4 var(--body); font-style:normal; color:var(--lmk-ink2); text-wrap:pretty; }
.mkc-avl2 small { grid-column:2; font:500 10.5px/1.3 var(--body); color:var(--lmk-dim); }
.mkc-avmore summary { cursor:pointer; list-style:none; padding:6px 0 2px; font:600 12px/1.2 var(--body); color:var(--lmk-gold); }
.mkc-avmore summary::-webkit-details-marker { display:none; }
.mkc-avba { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.mkc-avba > div { display:grid; align-content:start; gap:6px; padding:12px; border-radius:14px; background:var(--lmk-well);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-good) 30%, transparent); }
.mkc-avba > div.a { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lmk-heavy) 34%, transparent); }
.mkc-avba .k { font:700 9.5px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--lmk-good); }
.mkc-avba .a .k { color:var(--lmk-heavy); }
.mkc-avba > div > span:not(.k) { display:grid; gap:1px; }
.mkc-avba b { font:600 12.5px/1.3 var(--body); color:var(--lmk-ink); }
.mkc-avba em { font:400 11px/1.3 var(--body); font-style:normal; color:var(--lmk-dim); font-variant-numeric:tabular-nums; }
.mkc-avf { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:0; font:500 12px/1.3 var(--body); color:var(--lmk-dim); }
.mkc-avf b { font-weight:600; color:var(--lmk-ink); }
.mkc-avf b.s-left { color:var(--lmk-ida); } .mkc-avf b.s-right { color:var(--lmk-ping); }
.mkc-avf svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:380px) { .mkc-avba { grid-template-columns:1fr; } .mkc-avl2 li { grid-template-columns:74px minmax(0, 1fr); } }
/* END AAKASHVAANI */
/* ==== PREDICTIONS, ONE PAGE AT A TIME (2026-10-25): the page its swipe page opened, named, in place of the four-way switch ==== */
.lpr-sec { display:flex; align-items:center; gap:10px; min-height:44px; padding:2px 4px 0; }
.lpr-sec i { flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:rgb(var(--acc-rgb));
  background:linear-gradient(180deg, rgba(var(--acc-rgb), .26), rgba(var(--acc-rgb), .10)); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb), .42); }
.lpr-sec i svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lpr-sec b { font:600 19px/1.1 var(--body); color:var(--ink); letter-spacing:.005em; }
.lpr-sec em { font:500 13.5px/1 var(--body); font-style:normal; color:var(--dim); }
/* END PREDICTIONS ONE PAGE */
/* AAKASH VAANI'S CARD, v2 (2026-10-22, ui-lite-mkchat.js lmkcChgHtml): two medallions, the day's band, the stretches as chips, two bars */
.mkc-chg.v2 { gap:14px; padding:16px 14px 14px; }
.mkc-chg.v2 .mkc-chg-k { letter-spacing:.18em; }
.mkc-cmp2 { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:start; justify-items:center; gap:6px; padding:4px 0 2px; }
.mkc-cm { --sc:rgba(255,255,255,.18); display:grid; justify-items:center; gap:6px; min-width:0; text-align:center; }
.mkc-cm.s-left { --sc:#9FC3EE; } .mkc-cm.s-right { --sc:#F2A65A; } .mkc-cm.s-both { --sc:#C9B6E8; }
.mkc-cm-o { display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  background:radial-gradient(circle at 50% 28%, rgba(255,255,255,.42), rgba(255,255,255,0) 62%), var(--sc); box-shadow:0 0 0 3px var(--lmk-panel, #15110B); }
.mkc-cm-o.el { box-shadow:0 0 0 3px var(--lmk-panel, #15110B), 0 0 0 5.5px var(--ec); }
.mkc-cm.saw .mkc-cm-o { box-shadow:0 0 0 3px var(--lmk-panel, #15110B), 0 0 0 5.5px var(--ec, transparent), 0 0 26px -4px var(--sc); }
.mkc-cm-o b { font:700 19px/1 var(--body); color:#1B1408; }
.mkc-cm em { font:600 9px/1.2 var(--body); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:3px; }
.mkc-cm strong { font:600 13px/1.25 var(--body); color:var(--ink); }
.mkc-cm.saw strong { color:#F1CF86; }
.mkc-cm-ar { align-self:center; margin-top:-22px; color:#E9C46A; } .mkc-cm-ar svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mkc-tl { display:grid; gap:5px; }
.mkc-chg.v2 .mkc-ph-band { height:14px; border-radius:7px; }
.mkc-st { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.mkc-st-r { display:grid; gap:8px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.mkc-st-r.chg { background:linear-gradient(150deg, rgba(236,196,120,.12), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(236,196,120,.4); }
.mkc-st-h { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mkc-st-h > b { margin-right:auto; font:600 13.5px/1.2 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.mkc-st-p { display:inline-flex; align-items:center; gap:5px; padding:3px 8px 3px 6px; border-radius:999px; background:rgba(255,255,255,.06); font:600 10.5px/1.2 var(--body); color:var(--ink-2); }
.mkc-st-p i { display:inline-block; width:8px; height:8px; border-radius:50%; }
.mkc-st-r.s-left .mkc-st-p i.sd { background:#9FC3EE; } .mkc-st-r.s-right .mkc-st-p i.sd { background:#F2A65A; } .mkc-st-r.s-both .mkc-st-p i.sd { background:#C9B6E8; }
.mkc-st-t { display:inline-flex; align-items:center; gap:4px; font:600 10px/1.2 var(--body); color:var(--dim); }
.mkc-st-t i { width:7px; height:7px; border-radius:50%; background:currentColor; }
.mkc-st-t.in { color:#7FD3A8; } .mkc-st-t.off { color:#EC8F7A; } .mkc-st-t.mx { color:var(--ink-2); }
.mkc-st-x { padding:2px 7px; border-radius:999px; font:600 9.5px/1.2 var(--body); letter-spacing:.04em; color:#F1CF86; box-shadow:inset 0 0 0 1px rgba(241,207,134,.55); }
.mkc-st-c { display:flex; flex-wrap:wrap; gap:5px; }
.mkc-st-c span { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:999px; font:500 11px/1.2 var(--body); color:var(--ink-2); background:rgba(255,255,255,.05); }
.mkc-st-c span.ok::before { content:"\2713"; font-weight:700; color:#7FD3A8; }
.mkc-st-c span.no::before { content:"\2715"; font-weight:700; color:#EC8F7A; }
.mkc-st-c span.el { background:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.mkc-st-c span.el i { width:8px; height:8px; border-radius:50%; }
.mkc-tune2 { display:grid; gap:7px; padding:11px 12px; border-radius:14px; background:rgba(0,0,0,.16); }
.mkc-tune2 > .k { font:600 9.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.mkc-tb { display:grid; grid-template-columns:44px minmax(0, 1fr) auto auto; align-items:center; gap:8px; font:500 11px/1 var(--body); color:var(--dim); }
.mkc-tb i { position:relative; height:8px; border-radius:4px; overflow:hidden; background:rgba(255,255,255,.08); }
.mkc-tb i::after { content:""; position:absolute; top:0; bottom:0; left:0; width:var(--w); border-radius:4px; background:rgba(127,211,168,.45); }
.mkc-tb.now i::after { background:#7FD3A8; }
.mkc-tb b { font:600 12px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.mkc-tb em { font:600 11px/1 var(--body); font-style:normal; } .mkc-tb em.up { color:#7FD3A8; } .mkc-tb em.dn { color:#EC8F7A; }
.mkc-chg.v2 .mkc-chg-fine { font-size:10.5px; text-align:center; }
:root[data-theme="light"] .mkc-cm-o b { color:#2A1D0C; }
:root[data-theme="light"] .mkc-cm.saw strong { color:#8A5D12; }
:root[data-theme="light"] .mkc-st-r { background:rgba(42,36,51,.035); box-shadow:inset 0 0 0 1px rgba(42,36,51,.08); }
:root[data-theme="light"] .mkc-st-r.chg { background:linear-gradient(150deg, rgba(214,160,64,.12), rgba(255,255,255,.4)); box-shadow:inset 0 0 0 1px rgba(160,110,30,.38); }
:root[data-theme="light"] .mkc-st-p, :root[data-theme="light"] .mkc-st-c span { background:rgba(42,36,51,.05); }
:root[data-theme="light"] .mkc-st-c span.el { background:none; box-shadow:inset 0 0 0 1px rgba(42,36,51,.14); }
:root[data-theme="light"] .mkc-st-t.in, :root[data-theme="light"] .mkc-st-c span.ok::before, :root[data-theme="light"] .mkc-tb em.up { color:#2E8F69; }
:root[data-theme="light"] .mkc-st-t.off, :root[data-theme="light"] .mkc-st-c span.no::before, :root[data-theme="light"] .mkc-tb em.dn { color:#C4472E; }
:root[data-theme="light"] .mkc-st-x { color:#8A5D12; box-shadow:inset 0 0 0 1px rgba(160,110,30,.45); }
:root[data-theme="light"] .mkc-tune2 { background:rgba(42,36,51,.04); }
:root[data-theme="light"] .mkc-tb i { background:rgba(42,36,51,.08); } :root[data-theme="light"] .mkc-tb i::after { background:rgba(46,143,105,.4); } :root[data-theme="light"] .mkc-tb.now i::after { background:#2E8F69; }
/* MAHAKAAL AT REST (2026-10-22, ui-lite-mkchat.js lmkcOrb): the tripund on its cap, a breathing halo, a thin gold arc */
.mkc-orb { position:relative; display:grid; place-items:center; flex:none; width:34px; height:34px; }
.mkc-orb .h { position:absolute; inset:-7px; border-radius:50%; background:radial-gradient(closest-side, rgba(var(--lmk-gold-rgb), .34), rgba(var(--lmk-gold-rgb), 0)); animation:mkcOrbH 4.8s ease-in-out infinite; will-change:opacity, transform; }
.mkc-orb .r { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.mkc-orb.turn .r { animation:mkcOrbR 3.2s linear infinite; will-change:transform; }
.mkc-orb .r circle { fill:none; stroke-width:1.7; stroke-linecap:round; }
.mkc-orb .r .a { stroke:rgb(var(--lmk-gold-rgb)); } .mkc-orb .r .t { stroke:rgba(var(--lmk-gold-rgb), .16); }
.mkc-orb .c { position:relative; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--lmk-cap); box-shadow:var(--lmk-cap-sh); }
.mkc-orb .c .lmk-tri { width:17px; height:17px; }
.mkc-orb.lg { width:54px; height:54px; } .mkc-orb.lg .c { width:42px; height:42px; } .mkc-orb.lg .c .lmk-tri { width:26px; height:26px; }
.mkc-orb.lg .r circle { stroke-width:1.5; }
@keyframes mkcOrbH { 0%, 100% { opacity:.4; transform:scale(.9); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes mkcOrbR { from { transform:rotate(-90deg); } to { transform:rotate(270deg); } }
@media (prefers-reduced-motion: reduce) { .mkc-orb .h, .mkc-orb.turn .r { animation:none; } }
.mkc-medr { display:grid; place-items:center; width:auto; height:auto; background:none; }
.mkc-medr::before, .mkc-medr > i { display:none; }
.mkc-medt em b { font-weight:700; color:var(--lmk-gold); font-variant-numeric:tabular-nums; }
.mkc-typing .mkc-orb { margin-right:2px; }
/* Aakash Vaani's speaker in the card's head (ui-lite-mkchat.js lmkcVaaniText): the answer's own speaker, a size smaller */
.mkc-chg.v2 .mkc-chg-h { align-items:center; flex-wrap:nowrap; gap:10px; }
.mkc-chg.v2 .mkc-chg-h em { flex:1 1 auto; min-width:0; }
.mkc-vsay { width:38px; height:38px; } .mkc-vsay svg { width:19px; height:19px; }
.mkc-medt em b { font:700 12.5px/1.35 var(--body); }
/* Aakash Vaani's languages (ui-lite-mkchat.js lmkcVaaniLangHtml; the user, 2026-10-22): a quiet two-way switch, the birthplace's language
   and the present place's, each in its own script; only when the two differ. Under it the words as said, folded */
.mkc-avr { display:grid; gap:8px; justify-items:start; }
.mkc-avl { display:inline-grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:2px; padding:3px; border-radius:14px; max-width:100%;
  background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(236,196,120,.16); }
.mkc-avlb { display:grid; justify-items:start; gap:2px; min-width:0; padding:6px 12px 7px; border:0; border-radius:11px; background:none; color:var(--dim);
  font-family:var(--body); text-align:left; cursor:pointer; transition:background .2s ease, color .2s ease, box-shadow .2s ease; -webkit-tap-highlight-color:transparent; }
.mkc-avlb em { font:600 9px/1.1 var(--body); font-style:normal; letter-spacing:.13em; text-transform:uppercase; opacity:.8; }
.mkc-avlb b { font:600 13px/1.25 var(--body); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mkc-avlb.on { background:rgba(236,196,120,.13); box-shadow:inset 0 0 0 1px rgba(236,196,120,.42); color:#F3DFAE; }
.mkc-avlb.on em { color:#E9C46A; opacity:1; }
.mkc-avlb:focus-visible { outline:2px solid #E9C46A; outline-offset:2px; }
.mkc-avw { width:100%; }
.mkc-avw summary { display:inline-flex; align-items:center; gap:6px; list-style:none; cursor:pointer; color:var(--dim); font:600 11.5px/1.2 var(--body); -webkit-tap-highlight-color:transparent; }
.mkc-avw summary::-webkit-details-marker { display:none; }
.mkc-avw summary em { font-style:normal; font-weight:500; color:#E9C46A; }
.mkc-avw summary svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.mkc-avw[open] summary svg { transform:rotate(180deg); }
.mkc-avw p { margin:8px 0 0; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.035); font:400 14px/1.6 var(--body), 'Tiro Devanagari Hindi', serif; color:var(--lmk-ink); text-wrap:pretty; overflow-wrap:anywhere; }
.mkc-avw p.wait { display:flex; align-items:center; gap:8px; color:var(--dim); }
.mkc-avw p.wait i { width:6px; height:6px; border-radius:50%; background:#E9C46A; animation:mkcAvWait 1.2s ease-in-out infinite; }
@keyframes mkcAvWait { 0%, 100% { opacity:.25; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .mkc-avw p.wait i { animation:none; } .mkc-avlb, .mkc-avw summary svg { transition:none; } }
:root[data-theme="light"] .mkc-avl { background:rgba(255,255,255,.5); box-shadow:inset 0 0 0 1px rgba(160,110,30,.22); }
:root[data-theme="light"] .mkc-avlb.on { background:rgba(214,160,64,.16); box-shadow:inset 0 0 0 1px rgba(160,110,30,.45); color:#5A3C0E; }
:root[data-theme="light"] .mkc-avlb.on em, :root[data-theme="light"] .mkc-avw summary em { color:#8A5E14; }
:root[data-theme="light"] .mkc-avw p { background:rgba(255,255,255,.55); }
/* END WHAT HAS CHANGED */

/* ==== MAHAKAAL'S COIN, ALIVE (2026-10-20; then "remove the outward going circle and remove the astral like glow. Just a disc of light
   glowing subtly from behind like sun's outer edge glow diffused and blurred in circular symmetry"): one disc of light behind the coin, its
   edge soft as the sun's corona, swelling and settling slowly. One layer, opacity and scale only (the compositor's work, never a repaint);
   still for reduced motion. ==== */
.lrb-c.mk .lrb-face { z-index:2; }
.lrb-c.mk .lrb-aura { display:none; }
.lrb-c.mk::before { content:""; position:absolute; inset:-30%; z-index:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,240,200,.55) 0%, rgba(var(--lrb-gold), .5) 52%, rgba(var(--lrb-gold), .22) 70%, rgba(var(--lrb-gold), .07) 86%, rgba(var(--lrb-gold), 0) 100%);
  opacity:.7; animation:lrbMkSun 7s ease-in-out infinite; will-change:opacity; }
@keyframes lrbMkSun { 0%, 100% { opacity:.55; } 50% { opacity:.9; } }
@media (prefers-reduced-motion: reduce) { .lrb-c.mk::before { animation:none; opacity:.75; } }
/* END MAHAKAAL'S COIN */

/* =====================================================================================================================================
   SWARATANTRA IS LIVE (ui-lite-stlive.js; the user, 2026-10-21, the prototype lite/dev/swaratantra/live-intro.html approved): the token
   carousel's frame in SwaraTantra's dress, kajal black and the gold frame, the app's trident; a phone playing a take of the real app on
   each step; the name written in by light, the headline's words rising out of a blur, one sweep of gold across them. One look in both
   themes, as SwaraTantra's own carousel. Nothing moves once it is put away; reduced motion keeps everything still.
   ===================================================================================================================================== */
.sli { position:fixed; inset:0; z-index:9400; display:grid; place-items:center;
  padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background:rgba(4,3,2,0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0);
  transition:background .5s ease, -webkit-backdrop-filter .5s ease, backdrop-filter .5s ease;
  overscroll-behavior:contain; touch-action:none; font-family:var(--body); color:#F7EEDC; -webkit-tap-highlight-color:transparent; }
.sli.in { background:rgba(4,3,2,.7); -webkit-backdrop-filter:blur(14px) saturate(115%); backdrop-filter:blur(14px) saturate(115%); }
.sli.out { pointer-events:none; }
.sli-card { position:relative; width:min(400px, 100%); max-height:calc(100dvh - 24px); overflow:hidden auto; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:none;
  display:grid; box-sizing:border-box; padding:14px 18px 16px; border-radius:30px; isolation:isolate; border:1px solid transparent; outline:none;
  background:radial-gradient(120% 58% at 50% -8%, rgba(214,160,62,.28), transparent 66%), radial-gradient(90% 50% at 50% 112%, rgba(150,104,34,.18), transparent 70%),
    linear-gradient(180deg, #140E08 0%, #070504 100%) padding-box,
    linear-gradient(150deg, #F8E4AA 0%, #A57A34 20%, #5C3D16 44%, #E2BC68 68%, #7A5320 86%, #D6B064 100%) border-box;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.94), 0 18px 40px -24px rgba(0,0,0,.8);
  opacity:0; transform:translateY(30px) scale(.965); transition:opacity .5s ease, transform .8s cubic-bezier(.2,.85,.2,1); }
.sli-card::-webkit-scrollbar { display:none; }
.sli.in .sli-card { opacity:1; transform:none; }
.sli.out .sli-card { opacity:0; transform:translateY(14px) scale(.98); transition-duration:.32s; }
.sli button { font-family:inherit; -webkit-tap-highlight-color:transparent; }
.sli button:focus-visible { outline:2px solid #F2CF7A; outline-offset:3px; }
.sli-card:focus { outline:none; }

.sli-top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; }
.sli-brand { display:inline-flex; align-items:center; gap:8px; font:700 10.5px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:#F2CF7A; }
.sli-brand img { display:block; height:22px; width:auto; }
.sli-live { display:inline-flex; align-items:center; gap:6px; margin-left:4px; padding:4px 8px 4px 7px; border-radius:999px; font:800 8.5px/1 var(--body); letter-spacing:.16em;
  color:#241405; background:linear-gradient(180deg, #FCE3A0, #E2B457); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
.sli-live i { width:6px; height:6px; border-radius:50%; background:#7A1E0E; animation:sliDot 2.4s ease-out infinite; }
@keyframes sliDot { 0% { box-shadow:0 0 0 0 rgba(122,30,14,.55); } 70%, 100% { box-shadow:0 0 0 6px rgba(122,30,14,0); } }
.sli-skip { height:34px; padding:0 4px 0 14px; border:0; border-radius:10px; background:none; cursor:pointer; font:600 13px/1 var(--body); color:#B9A788; transition:color .2s; }
.sli-skip:hover { color:#F7EEDC; }
.sli[data-step="3"] .sli-skip { visibility:hidden; }

.sli-view { position:relative; overflow:hidden; margin:2px -18px 0; touch-action:pan-y; cursor:grab; }
.sli-view:active { cursor:grabbing; }
.sli-track { display:flex; transition:transform .66s cubic-bezier(.22,.8,.22,1); will-change:transform; }
.sli-slide { flex:0 0 100%; min-width:0; box-sizing:border-box; padding:0 18px; display:grid; gap:12px; align-content:start; user-select:none; -webkit-user-select:none; }

/* the phone, the app's own take playing on it */
.sli-artbox { position:relative; width:calc(240px * var(--s, 1)); height:calc(356px * var(--s, 1)); margin:2px auto 0; }
.sli-art { position:absolute; left:0; top:0; width:240px; height:356px; transform:scale(var(--s, 1)); transform-origin:0 0; pointer-events:none; }
.sli-glow { position:absolute; left:-20px; top:10px; width:280px; height:340px; border-radius:50%; background:radial-gradient(closest-side, rgba(242,190,90,.26), transparent); }
.sli-ring { position:absolute; left:50%; top:50%; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%; opacity:.55;
  background:repeating-conic-gradient(from 0deg, rgba(242,207,122,.22) 0 .6deg, transparent .6deg 6deg);
  -webkit-mask:radial-gradient(closest-side, transparent 78%, #000 80%, #000 86%, transparent 88%); mask:radial-gradient(closest-side, transparent 78%, #000 80%, #000 86%, transparent 88%); }
.sli-slide.on .sli-ring { animation:sliTurn 60s linear infinite; }
@keyframes sliTurn { to { transform:rotate(360deg); } }
.sli-phone { position:absolute; left:38px; top:2px; width:164px; height:352px; box-sizing:border-box; padding:6px; border-radius:31px;
  background:linear-gradient(150deg, #34332f 0%, #121214 38%, #0b0b0d 62%, #2c2b28 100%);
  box-shadow:0 0 0 1px rgba(242,207,122,.4), inset 0 0 0 1.5px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.16), 0 34px 64px -26px rgba(0,0,0,.95), 0 0 44px -14px rgba(242,190,90,.38); }
.sli-slide.on .sli-phone { animation:sliPh 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sliPh { from { opacity:0; transform:translateY(18px) rotate(-1.5deg) scale(.96); } }
.sli-btn { position:absolute; width:3px; border-radius:2px; background:linear-gradient(90deg, #4a4843, #1c1b19); }
.sli-btn.l1 { left:-3px; top:78px; height:22px; } .sli-btn.l2 { left:-3px; top:108px; height:40px; } .sli-btn.r1 { right:-3px; top:96px; height:52px; background:linear-gradient(270deg, #4a4843, #1c1b19); }
.sli-scr { position:relative; height:100%; border-radius:25px; overflow:hidden; background:#070504; display:grid; grid-template-rows:14px minmax(0, 1fr); }
.sli-sb { position:relative; display:flex; align-items:center; justify-content:space-between; padding:0 13px 0 15px; background:#070504; z-index:2; }
.sli-sb b { font:600 6.6px/1 var(--body); color:#F3EADB; letter-spacing:.02em; }
.sli-isl { position:absolute; left:50%; top:3px; width:40px; height:10px; margin-left:-20px; border-radius:6px; background:#000; box-shadow:inset 0 0 0 .6px rgba(255,255,255,.08); }
.sli-ics { display:flex; align-items:center; gap:3px; }
.sli-ics i { display:block; background:#F3EADB; }
.sli-ics .sg { width:8px; height:5px; clip-path:polygon(0 100%, 100% 0, 100% 100%); }
.sli-ics .wf { width:7px; height:5px; border-radius:7px 7px 0 0; clip-path:polygon(50% 100%, 0 0, 100% 0); }
.sli-ics .bt { width:11px; height:5px; border-radius:1.5px; background:none; box-shadow:inset 0 0 0 .8px #F3EADB; position:relative; }
.sli-ics .bt::after { content:''; position:absolute; left:1.4px; top:1.2px; width:6px; height:2.6px; border-radius:.6px; background:#F3EADB; }
.sli-vid { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; background:#070504; }
/* a sheen over the glass once, as the step arrives */
.sli-scr::after { content:''; position:absolute; inset:-20% -60%; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 42%, rgba(255,246,222,.16) 50%, transparent 58%); transform:translateX(-60%); }
.sli-slide.on .sli-scr::after { animation:sliGlass 1.6s cubic-bezier(.3,.6,.2,1) .5s both; }
@keyframes sliGlass { 0% { opacity:1; transform:translateX(-60%); } 100% { opacity:1; transform:translateX(60%); } }
.sli-spark { position:absolute; width:4px; height:4px; border-radius:50%; background:#F2CF7A; box-shadow:0 0 8px 1px rgba(242,207,122,.8); opacity:0; }
.sli-spark.s1 { left:14px; top:86px; } .sli-spark.s2 { left:222px; top:52px; } .sli-spark.s3 { left:226px; top:254px; }
.sli-slide.on .sli-spark { animation:sliSpk 3.6s ease-in-out infinite; }
.sli-slide.on .sli-spark.s2 { animation-delay:1.2s; } .sli-slide.on .sli-spark.s3 { animation-delay:2.2s; }
@keyframes sliSpk { 0%, 100% { opacity:0; transform:translateY(6px) scale(.6); } 40% { opacity:1; transform:none; } 70% { opacity:0; transform:translateY(-8px) scale(.8); } }

/* the words, and their effects */
.sli-copy { display:grid; gap:7px; text-align:center; justify-items:center; }
.sli-eb { display:inline-flex; align-items:center; gap:10px; font:700 10px/1 var(--body); letter-spacing:.24em; text-transform:uppercase; color:#F2CF7A; }
.sli-eb::before, .sli-eb::after { content:''; width:18px; height:1px; background:linear-gradient(90deg, transparent, rgba(242,207,122,.7)); }
.sli-eb::after { transform:scaleX(-1); }
/* the name in Devanagari, written in by a wipe of light, then gilded */
.sli-deva { position:relative; margin:-2px 0 -4px; font:400 34px/1.25 'Tiro Devanagari Hindi', 'Nirmala UI', serif; letter-spacing:.01em;
  background:linear-gradient(100deg, #9C6F28 0%, #F8E4AA 30%, #FFF6DC 45%, #E2B457 60%, #A57A34 100%); background-size:220% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.sli-slide.on .sli-deva { animation:sliWrite 1.3s cubic-bezier(.6,.05,.3,1) .15s both, sliGild 2.4s ease-in-out 1.3s both; }
@keyframes sliWrite { from { clip-path:inset(-10% 100% -10% 0); } to { clip-path:inset(-10% 0 -10% 0); } }
@keyframes sliGild { from { background-position:100% 0; } to { background-position:0 0; } }
/* the headline: each word rises out of a blur, one after another; then one sweep of gold light across it */
.sli-h { position:relative; margin:0; font:600 25px/1.12 var(--display); letter-spacing:-.018em; color:#F7EEDC; text-wrap:balance; }
.sli-h .w { display:inline-block; white-space:pre; }
.sli-slide.on .sli-h .w { animation:sliRise .8s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.28s + var(--i) * .07s); }
@keyframes sliRise { from { opacity:0; transform:translateY(.5em); filter:blur(8px); } }
.sli-h .gl { background:linear-gradient(100deg, #F7EEDC 0%, #F7EEDC 38%, #FFE7A8 48%, #FFF8E6 50%, #FFE7A8 52%, #F7EEDC 62%, #F7EEDC 100%); background-size:260% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.sli-slide.on .sli-h .gl { animation:sliRise .8s cubic-bezier(.2,.8,.2,1) both, sliSweep 1.6s ease-in-out both; animation-delay:calc(.28s + var(--i) * .07s), calc(1.1s + var(--i) * .05s); }
@keyframes sliSweep { from { background-position:100% 0; } to { background-position:0 0; } }
.sli-h em { font-style:normal; color:#F2CF7A; }
.sli-p { margin:0 auto; max-width:31ch; font:400 14.5px/1.5 var(--body); color:#C9B99E; text-wrap:pretty; }
.sli-slide.on .sli-p { animation:sliUp .7s cubic-bezier(.2,.8,.2,1) .75s both; }
@keyframes sliUp { from { opacity:0; transform:translateY(8px); } }
.sli-fine { margin:-2px 0 0; font:500 11.5px/1.45 var(--body); color:#9D8D73; }
.sli-fine b { color:#E9CC8A; font-weight:700; font-variant-numeric:tabular-nums; }
.sli-slide.on .sli-fine { animation:sliUp .7s cubic-bezier(.2,.8,.2,1) .95s both; }
/* a short screen: the words a size smaller, so nothing scrolls (lstlScale) */
.sli.tight .sli-h { font-size:21px; } .sli.tight .sli-deva { font-size:28px; } .sli.tight .sli-p { font-size:13.5px; line-height:1.42; }
.sli.tight .sli-foot { margin-top:10px; } .sli.tight .sli-slide { gap:8px; }

.sli-foot { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:10px; margin-top:16px; }
.sli-back { width:46px; height:46px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#F7EEDC;
  background:rgba(255,236,190,.05); box-shadow:inset 0 0 0 1px rgba(242,207,122,.2); transition:opacity .25s, background .2s; }
.sli-back:hover { background:rgba(255,236,190,.09); }
.sli-back.off { opacity:0; pointer-events:none; }
.sli-back svg, .sli-next svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sli-dots { display:flex; justify-content:center; align-items:center; }
.sli-dot { position:relative; width:18px; height:30px; padding:0; border:0; background:none; cursor:pointer; transition:width .4s cubic-bezier(.2,.8,.2,1); }
.sli-dot::before { content:''; position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:99px; transform:translate(-50%, -50%); background:rgba(242,207,122,.25); transition:width .4s cubic-bezier(.2,.8,.2,1), background .3s; }
.sli-dot.on { width:36px; }
.sli-dot.on::before { width:26px; background:linear-gradient(90deg, #C2913A, #FBE7B0); box-shadow:0 0 10px -2px rgba(242,190,90,.6); }
.sli-next { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 18px 0 22px; border:0; border-radius:999px; cursor:pointer;
  font:700 14px/1 var(--body); color:#241405;
  background:linear-gradient(180deg, #FBE7B0 0%, #E7BE62 48%, #C2913A 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(92,54,12,.45), 0 10px 24px -12px rgba(242,190,90,.6);
  transition:transform .15s ease, filter .2s ease; }
.sli-next:hover { filter:brightness(1.06); }
.sli-next:active { transform:scale(.97); }
.sli[data-step="3"] .sli-next::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform:translateX(-120%); animation:sliCta 2.8s ease-in-out 1s infinite; }
@keyframes sliCta { 0% { transform:translateX(-120%); } 45%, 100% { transform:translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .sli, .sli-card, .sli-track { transition:none; }
  .sli *, .sli *::before, .sli *::after { animation:none !important; }
  .sli-spark { opacity:0 !important; }
  .sli-deva { background-position:0 0; }
}
/* END SWARATANTRA IS LIVE */

/* THE KRIYA CAPSULE (the user, 2026-10-22: "Kriya active and Countdown timer for the next kriya pills are tightly placed on the main breath
   check card … arrange elegantly and professionally like app-native premium design in compact and minimalistic form. The two pills are very
   closely placed up and down"; the countdown itself 2026-10-21, ui-lite-swaratantra.js lkxCd*): one capsule on the card's header — the green
   tick and Kriya Aware, then (no divider: the user, 2026-10-22, "remove the | separator") the wait's ring and the time left, "in 12:34" before a Kriya, "08:12 left" while one is open (green);
   its full line is said to a screen reader. A short glow when Kriya's time moves with the breath foreseen. */
.lkx-pill.with-cd { height:30px; gap:0; padding:0 3px 0 4px; }
.lkx-pill.with-cd .lkx-pok { width:20px; height:20px; }
.lkx-pill.with-cd .lkx-ptx { padding:0 9px 0 6px; }
.lkx-cd { position:relative; display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px 0 8px; border-radius:999px; background:rgba(242,207,122,.08); }
.lkx-cd[hidden] { display:none; }
.lkx-cdr { flex:none; width:15px; height:15px; transform:rotate(-90deg); }
.lkx-cdr circle { fill:none; stroke-width:2.6; }
.lkx-cdr .trk { stroke:rgba(242,207,122,.2); }
.lkx-cdr .arc { stroke:#F0D48E; stroke-linecap:round; transition:stroke-dasharray .9s linear; }
.lkx-cdt { display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; }
.lkx-cdt em { font:600 10px/1 var(--body); font-style:normal; letter-spacing:.04em; color:rgba(240,212,142,.72); }
.lkx-cdt b { font:700 12.5px/1 var(--body); font-variant-numeric:tabular-nums; letter-spacing:.01em; color:#F7EAC4; }
.lkx-cd.k-now { background:rgba(95,211,168,.1); }
.lkx-cd.k-now .lkx-cdr .trk { stroke:rgba(95,211,168,.2); }
.lkx-cd.k-now .lkx-cdr .arc { stroke:#5FD3A8; }
.lkx-cd.k-now .lkx-cdt em { order:2; color:rgba(127,227,192,.8); }
.lkx-cd.k-now .lkx-cdt b { color:#7FE3C0; }
.lkx-cd .lkx-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lkx-cd.moved { animation:lkxMoved 1.6s ease; }
@keyframes lkxMoved { 30% { box-shadow:0 0 0 1px rgba(242,207,122,.7), 0 0 16px 2px rgba(242,207,122,.3); } }
/* a phone of 370 px or less: the capsule says Kriya, the tick and the ring say the rest */
@media (max-width:370px) { .lkx-pill.with-cd .lkx-pa { display:none; } .lkx-pill.with-cd .lkx-ptx { padding:0 8px 0 5px; } }
:root[data-theme="light"] .lkx-cd { background:rgba(176,122,26,.07); }
:root[data-theme="light"] .lkx-cdr .trk { stroke:rgba(176,122,26,.2); }
:root[data-theme="light"] .lkx-cdr .arc { stroke:#B07A1A; }
:root[data-theme="light"] .lkx-cdt em { color:#8A6420; }
:root[data-theme="light"] .lkx-cdt b { color:#5A3D10; }
:root[data-theme="light"] .lkx-cd.k-now { background:rgba(35,147,90,.08); }
:root[data-theme="light"] .lkx-cd.k-now .lkx-cdr .arc { stroke:#23935A; }
:root[data-theme="light"] .lkx-cd.k-now .lkx-cdt em, :root[data-theme="light"] .lkx-cd.k-now .lkx-cdt b { color:#1E7A4B; }
@media (prefers-reduced-motion: reduce) { .lkx-cdr .arc { transition:none; } .lkx-cd.moved { animation:none; } }
/* END THE COUNTDOWN TO KRIYA */

/* =====================================================================
   SPEED, 2026-10-22 (the user: "optimize everything again for lightning fast speed … when i scroll it is scrolling fast but in step
   like manner not like smooth butter flow everywhere across the app"). At rest the home drew a frame every animation tick: three
   endless animations ran on the main thread — Shiva's face glow on an SVG group, the bindu's glow on an SVG circle, the next check's
   dot by its box-shadow — each restyling and repainting the page every frame (a trace: ~22 frames a second at a phone's speed, each
   with a full style pass). The same breathing light now rides on what the compositor alone can animate: the face's whole drawing
   (its own layer, opacity only), a still bindu, and the dot's halo as a layer of its own fading in and out. Nothing else changes.
   ===================================================================== */
.lnow .sh-face, .lite-has-chart .lnow .sh-face { animation:none; }
.lnow .sh-face .tri .bindu-glow { animation:none; opacity:.62; }
.lnow-face { display:block; width:100%; height:100%; animation:lnowFace 4.8s ease-in-out var(--lnow-ph, 0s) infinite; }      /* the running animation lifts it; no layer held for good (2026-10-23) */
.lmk-shv .bindu-glow { animation:none; opacity:.6; }
@media (prefers-reduced-motion: no-preference) {
  .lal-next.due i { position:relative; animation:none; }
  .lal-next.due i::after { content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; opacity:0;
    box-shadow:0 0 0 7px color-mix(in srgb, var(--brass-hi) 6%, transparent), 0 0 16px var(--brass-hi); animation:lalNextGlow 2.4s ease-in-out infinite; will-change:opacity; }
  @keyframes lalNextGlow { 50% { opacity:1; } }
}
@media (prefers-reduced-motion: reduce) { .lnow-face { animation:none; } }
/* the sun on the day's band moved a fraction of a pixel every four seconds by a 3.9 s transition of left (a layout each frame, all the
   time), and its colours by 0.9 s transitions (a repaint each frame): it steps now, unseen as before */
.lhs-skym-mk, .lhs-skym-sun { transition:none; }
/* the Kriya countdown's ring turned by a 0.9 s transition each second: an SVG repaint every frame while Kriya runs; it steps each second */
.lkx-cdr .arc { transition:none; }

/* the day's own Moon on Shiva's jata (ui-lite-shell.js ldMoonOnJata): lit as the sky lights it today, its dark part a shade of the night, a
   pale rim, a soft halo; never the face's line drawing */
/* the real Moon on the jata (ui-lite-shell.js ldMoonOnJata): its night faint with earthshine, the light falling off to the terminator */
.lnow .sh-face .sh-moon .mn-night { fill:#08070F; opacity:.86; stroke:none; }
.lnow .sh-face .sh-moon .mn-dusk { fill:#08070F; opacity:.4; stroke:none; }
.lnow .sh-face .sh-moon .mn-rim { fill:none; stroke:rgba(241,231,203,.16); stroke-width:.8; vector-effect:none; }
.lnow .sh-face .sh-moon { filter:drop-shadow(0 0 3px rgba(255,240,205,.45)); }
:root[data-theme="light"] .lnow .sh-face .sh-moon .mn-night { fill:#D6CFC1; opacity:.9; }
:root[data-theme="light"] .lnow .sh-face .sh-moon .mn-dusk { fill:#D6CFC1; opacity:.35; }
:root[data-theme="light"] .lnow .sh-face .sh-moon .mn-rim { stroke:rgba(156,123,53,.4); }

/* THE CHECK CAPSULE (ui-lite-swaratantra.js lkxPillHtml, the user, 2026-10-22): Breath check next / now, or Kriya check next / now, with its
   countdown. Kriya's point keeps the green tick; the breath's check wears the breath's own mark, two soft waves in the capsule's gold */
.lnx-mk { display:grid; place-items:center; flex:none; width:20px; height:20px; border-radius:50%; background:rgba(242,207,122,.16); box-shadow:inset 0 0 0 1px rgba(242,207,122,.4); }
.lnx-mk svg { width:12px; height:12px; fill:none; stroke:#F0D48E; stroke-width:1.7; stroke-linecap:round; }
:root[data-theme="light"] .lnx-mk { background:rgba(176,122,26,.12); box-shadow:inset 0 0 0 1px rgba(176,122,26,.4); }
:root[data-theme="light"] .lnx-mk svg { stroke:#8A6420; }
.lkx-pill.lnx[hidden] { display:none; }
/* two lines (the user, 2026-10-22: "Adding now or next to Breath and Kriya check will increase the pill size and may collide with the card
   caption 'your Breath' … elegant symmetrical arrangement"): the mark, then the check's name over its ring and time, on a rounded plate
   centred on the caption's line; the same width whichever check it names, nothing hidden on a narrow phone */
.lkx-pill.lnx { height:auto; min-height:40px; gap:9px; padding:6px 13px 6px 6px; border-radius:16px; align-items:center; }
.lkx-pill.lnx .lkx-pok, .lkx-pill.lnx .lnx-mk, .lkx-pill.lnx .lnx-kx { width:26px; height:26px; }
.lkx-pill.lnx .lkx-pok svg { width:14px; height:14px; }
.lkx-pill.lnx .lnx-mk svg { width:14px; height:14px; }
.lnx-kx { display:grid; place-items:center; flex:none; border-radius:50%; background:radial-gradient(circle at 50% 32%, #2E2614, #120E07); box-shadow:inset 0 0 0 1px rgba(242,207,122,.45); }
.lnx-kx .lkx-img { width:10px; height:18px; }
.lnx-st { display:grid; gap:4px; justify-items:start; min-width:0; }
.lkx-pill.lnx .lkx-ptx { padding:0; font:600 11px/1 var(--body); letter-spacing:.02em; }
.lkx-pill.lnx .lkx-pa { display:inline; }
.lkx-pill.lnx .lkx-cd { height:auto; gap:5px; padding:0; background:none; }
.lkx-pill.lnx .lkx-cdr { width:12px; height:12px; }
.lkx-pill.lnx .lkx-cdt b { font-size:13px; }
/* due now: the time left in the turn or the point, in the capsule's own gold (green is the tick's, for a check kept) */
.lkx-pill.lnx .lkx-cd.k-now { background:none; }
.lkx-pill.lnx .lkx-cd.k-now .lkx-cdr .trk { stroke:rgba(242,207,122,.2); }
.lkx-pill.lnx .lkx-cd.k-now .lkx-cdr .arc { stroke:#F0D48E; }
.lkx-pill.lnx .lkx-cd.k-now .lkx-cdt em { color:rgba(240,212,142,.72); }
.lkx-pill.lnx .lkx-cd.k-now .lkx-cdt b { color:#FFE3A0; }
:root[data-theme="light"] .lkx-pill.lnx .lkx-cd.k-now .lkx-cdr .trk { stroke:rgba(176,122,26,.2); }
:root[data-theme="light"] .lkx-pill.lnx .lkx-cd.k-now .lkx-cdr .arc { stroke:#B07A1A; }
:root[data-theme="light"] .lkx-pill.lnx .lkx-cd.k-now .lkx-cdt em { color:#8A6420; }
:root[data-theme="light"] .lkx-pill.lnx .lkx-cd.k-now .lkx-cdt b { color:#5A3D10; }
:root[data-theme="light"] .lnx-kx { background:radial-gradient(circle at 50% 32%, #3A2E16, #17110A); }
html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx { grid-area:sg; justify-self:end; }
/* THE CAPSULE BESIDE "YOUR BREATH" AT ANY WIDTH (the user, 2026-10-23: "on the narrow screen phone, the pill ... is breaking the in-line
   alignment with the text label Your Breath and shifts downward. make sure to keep this in-line with Your breath no matter the phone screen
   size by making the font size of the pill adaptive"): the header keeps its one line whenever the capsule is in it (the stacking under
   350px was for the old Quick | Detailed switch), and the capsule's type, mark, padding and gaps, with the caption's spacing, follow the
   screen's width — today's sizes from about 386px up, a little smaller on each narrower phone, never below a readable floor */
@media (max-width:349px) {
  html.lhs-on .lhs-now-check .lqk-hd:has(> .lkx-pill.lnx) { grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"eb sg" "st st"; }
}
html.lhs-on .lhs-now-check .lqk-hd:has(> .lkx-pill.lnx) { column-gap:clamp(4px, 2vw, 8px); }
html.lhs-on .lhs-now-check .lqk-hd:has(> .lkx-pill.lnx) .lqk-l .lqk-k { font-size:clamp(8.5px, 2.46vw, 9.5px); letter-spacing:clamp(.06em, .45vw, .16em); }
html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx { min-width:0; gap:clamp(5px, 2.33vw, 9px); min-height:clamp(32px, 10.36vw, 40px);
  padding:clamp(4px, 1.55vw, 6px) clamp(8px, 3.37vw, 13px) clamp(4px, 1.55vw, 6px) clamp(4px, 1.55vw, 6px); border-radius:clamp(13px, 4.15vw, 16px); }
html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx .lkx-pok, html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx .lnx-mk,
html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx .lnx-kx { width:clamp(20px, 6.74vw, 26px); height:clamp(20px, 6.74vw, 26px); }
html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx .lkx-pok svg, html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx .lnx-mk svg { width:clamp(11px, 3.63vw, 14px); height:clamp(11px, 3.63vw, 14px); }
html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx .lnx-kx .lkx-img { width:clamp(8px, 2.6vw, 10px); height:clamp(14px, 4.66vw, 18px); }
html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx .lnx-st { gap:clamp(3px, 1.04vw, 4px); }
html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx .lkx-ptx { font-size:clamp(9px, 2.85vw, 11px); white-space:nowrap; }
html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx .lkx-cdt { gap:clamp(3px, 1.04vw, 4px); }
html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx .lkx-cdt em { font-size:clamp(8.5px, 2.6vw, 10px); }
html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx .lkx-cdt b { font-size:clamp(11px, 3.37vw, 13px); }
html.lhs-on .lhs-now-check .lqk-hd > .lkx-pill.lnx .lkx-cdr { width:clamp(10px, 3.11vw, 12px); height:clamp(10px, 3.11vw, 12px); }

/* THE PRACTICE AT A GLANCE (2026-10-22, ui-lite-swaratantra.js lkxPaint): the picture large and centred, the name and its measure, one quiet
   line, the steps folded under How; less to read, nothing lost */
.lkx-card.v2 { justify-items:center; text-align:center; gap:10px; }
.lkx-card.v2 .lkx-top { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; }
.lkx-card.v2 .lkx-hero { display:grid; place-items:center; width:100%; min-height:128px; padding:10px 0; border-radius:22px;
  background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--kc) 20%, transparent), transparent 68%), color-mix(in srgb, var(--ink) 3%, transparent); }
.lkx-card.v2 .lkx-hero svg { width:min(200px, 72%); height:auto; max-height:150px; }
.lkx-card.v2 .lkx-hero.ico .lkx-pic { width:84px; height:84px; }
.lkx-card.v2 .lkx-hero.ico .lkx-pic svg { width:40px; height:40px; }
.lkx-card.v2 .lkx-nm { margin:2px 0 0; font:400 25px/1.12 var(--display); color:var(--ink); text-align:center; text-wrap:balance; }
.lkx-card.v2 .lkx-sk { display:block; margin-top:-4px; font:600 12.5px/1.25 var(--body); font-style:normal; color:var(--kc); }
.lkx-card.v2 .lkx-pl { max-width:34ch; font:500 12.5px/1.45 var(--body); color:var(--dim); }
.lkx-howf { width:100%; border-radius:16px; text-align:left; background:color-mix(in srgb, var(--ink) 4%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent); }
.lkx-howf > summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; cursor:pointer; list-style:none; font:600 13.5px/1 var(--body); color:var(--ink); }
.lkx-howf > summary::-webkit-details-marker { display:none; }
.lkx-howf > summary em { margin-left:auto; font:500 12px/1 var(--body); font-style:normal; color:var(--dim); }
.lkx-howf .kxh-ch { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; color:var(--dim); transition:transform .2s; }
.lkx-howf[open] .kxh-ch { transform:rotate(180deg); }
.lkx-howf .lkx-how { margin:0; padding:2px 14px 14px 32px; gap:8px; border-radius:0; background:none; font:500 13.5px/1.5 var(--body); color:var(--ink-2); }
.lkx-card.v2 .lkx-care { align-self:start; justify-self:start; text-align:left; }
@media (prefers-reduced-motion: reduce) { .lkx-howf .kxh-ch { transition:none; } }
/* the reach to hold (2026-10-22, ui-lite-swaratantra.js lkxReachHtml): the finger-width scale lit from the nose down to the Sutra's measure, that mark ringed and named */
.lkx-rr { display:grid; gap:8px; width:100%; padding:10px 12px 12px; border-radius:16px; box-sizing:border-box; background:color-mix(in srgb, var(--ink) 4%, transparent); }
.lkx-rr-hd { display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap; }
.lkx-rr-hd span { font:700 9.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lkx-rr-hd b { font:600 14px/1.2 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; }
.lkx-rr-hd em { padding:2px 8px; border-radius:999px; font:600 11px/1.3 var(--body); font-style:normal; color:var(--kc); background:color-mix(in srgb, var(--kc) 16%, transparent); }
.lkx-rr-sc { position:relative; height:44px; margin:0 20px; }
.lkx-rr-tr, .lkx-rr-fl { position:absolute; left:0; top:8px; height:6px; border-radius:3px; }
.lkx-rr-tr { right:0; background:color-mix(in srgb, var(--ink) 14%, transparent); }
.lkx-rr-fl { background:linear-gradient(90deg, color-mix(in srgb, var(--kc) 45%, transparent), var(--kc)); box-shadow:0 0 12px -2px color-mix(in srgb, var(--kc) 70%, transparent); }
.lkx-rr-mk { position:absolute; top:0; display:grid; justify-items:center; gap:2px; width:52px; margin-left:-26px; }
.lkx-rr-mk i { width:12px; height:12px; margin-top:5px; border-radius:50%; box-sizing:border-box; background:var(--st-tile-hi, var(--st-tile, #1B1610)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent); }
.lkx-rr-mk b { font:600 10.5px/1 var(--body); font-variant-numeric:tabular-nums; color:var(--dim); }
.lkx-rr-mk em { font:500 9.5px/1.1 var(--body); font-style:normal; color:var(--dim); white-space:nowrap; }
.lkx-rr-mk.in i { background:var(--kc); box-shadow:none; }
.lkx-rr-mk.on i { width:18px; height:18px; margin-top:2px; background:var(--kc); box-shadow:0 0 0 3px color-mix(in srgb, var(--kc) 30%, transparent), 0 0 14px color-mix(in srgb, var(--kc) 60%, transparent); }
.lkx-rr-mk.on b, .lkx-rr-mk.on em { color:var(--ink); font-weight:700; }
:root[data-theme="light"] .lkx-rr-mk:not(.in):not(.on) i { background:#FBF8F2; }
:root[data-theme="light"] .lkx-rr-hd em { color:color-mix(in srgb, var(--kc) 55%, #2A1D0C); }
.lra-fw-band { position:absolute; left:85.9%; width:12px; margin-left:9px; border-radius:6px; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(var(--lhs-gold-rgb), .18), rgba(var(--lhs-gold-rgb), .55)); box-shadow:0 0 14px rgba(var(--lhs-gold-rgb), .35); }
.lra-fw-mk.in { color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(var(--lhs-gold-rgb), .8); }