/* ---------- Themes (Nov 2026 sanctuary redesign) ----------
   Gold leaf and ink lead; violet survives only as atmosphere (--aura, --glow).
   Four themes: Night Sky (default), Dawn Parchment, Forest Temple, Lapis.
   Retired theme ids are folded into the nearest of the four so saved choices still work. */
:root {
  /* No theme chosen: follows the system, Dawn Parchment by day and Night Sky by night. */
  --bg: #f5ecd9; --surface: rgba(255,250,238,.80); --ink: #2c1f12; --muted: #74604a; --line: rgba(60,40,18,.14);
  --accent: #8a5a12; --accent2: #a8402a; --user: #efe0c2; --glow: rgba(200,150,60,.20); --aura: #c9973f;
  --est: #2f8f5b; --emg: #b9821c; --trad: #4c6fd1; --spec: #b04a7a;
  --onAccent: #fff; --onAccent2: #fff; --paperOp: .07;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080a18; --surface: rgba(20,19,42,.74); --ink: #efe9f7; --muted: #a8a1c2; --line: rgba(232,214,170,.13);
    --accent: #e2b65e; --accent2: #ecd29a; --user: #241d45; --glow: rgba(141,107,255,.20); --aura: #6b4fd8;
    --onAccent: #1b1304; --onAccent2: #2a1d05; --paperOp: .045;
  }
}
:root[data-theme="dark"] {
  --bg: #080a18; --surface: rgba(20,19,42,.74); --ink: #efe9f7; --muted: #a8a1c2; --line: rgba(232,214,170,.13);
  --accent: #e2b65e; --accent2: #ecd29a; --user: #241d45; --glow: rgba(141,107,255,.20); --aura: #6b4fd8;
  --onAccent: #1b1304; --onAccent2: #2a1d05; --paperOp: .045;
}
/* Night Sky (default): ink-blue night, gold leaf, a breath of violet. */
:root[data-palette="sanctum"], :root[data-palette="psychedelic"], :root[data-palette="mandala"], :root[data-palette="royal"],
:root[data-palette="oracle"], :root[data-palette="ember"] { color-scheme: dark;
  --bg: #080a18; --surface: rgba(20,19,42,.74); --ink: #efe9f7; --muted: #a8a1c2; --line: rgba(232,214,170,.13);
  --accent: #e2b65e; --accent2: #ecd29a; --user: #241d45; --glow: rgba(141,107,255,.20); --aura: #6b4fd8;
  --onAccent: #1b1304; --onAccent2: #2a1d05; --paperOp: .045; }
/* Dawn Parchment: handmade paper, iron-gall ink, ochre and vermilion. */
:root[data-palette="temple"], :root[data-palette="lotus"], :root[data-palette="sage"] { color-scheme: light;
  --bg: #f5ecd9; --surface: rgba(255,250,238,.80); --ink: #2c1f12; --muted: #74604a; --line: rgba(60,40,18,.14);
  --accent: #8a5a12; --accent2: #a8402a; --user: #efe0c2; --glow: rgba(200,150,60,.20); --aura: #c9973f;
  --onAccent: #fff; --onAccent2: #fff; --paperOp: .07; }
/* Forest Temple: deep green shade, moss and gold. */
:root[data-palette="heart"] { color-scheme: dark;
  --bg: #06130e; --surface: rgba(14,32,24,.78); --ink: #e6f2ea; --muted: #93b3a2; --line: rgba(214,226,190,.13);
  --accent: #d8b25a; --accent2: #a8dcbb; --user: #12301f; --glow: rgba(70,180,120,.18); --aura: #2f9a68;
  --onAccent: #1a1404; --onAccent2: #062014; --paperOp: .045; }
/* Lapis: lapis lazuli and gold, the colours of illuminated skies. */
:root[data-palette="celestial"], :root[data-palette="thirdeye"], :root[data-palette="moonlit"] { color-scheme: dark;
  --bg: #050c26; --surface: rgba(14,26,68,.76); --ink: #ecf0ff; --muted: #a2aed9; --line: rgba(220,228,255,.13);
  --accent: #e7c46a; --accent2: #b3c7ff; --user: #16245a; --glow: rgba(90,120,255,.22); --aura: #3552d8;
  --onAccent: #1a1404; --onAccent2: #0b1336; --paperOp: .045; }

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; } /* same page width whether or not a page scrolls */
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 Inter, system-ui, sans-serif; }
#field { position: fixed; inset: 0; z-index: -1; opacity: .55; }
h2, h3, .brand, .transmission .body strong { font-family: "Cormorant Garamond", serif; }
h2 { font-size: 2rem; margin: .2em 0; font-weight: 600; } h3 { font-size: 1.35rem; margin: .4em 0; }
.sub, .muted { color: var(--muted); } .small { font-size: .8rem; }
.top { position: sticky; top: 0; display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 12px 16px; backdrop-filter: blur(14px); background: var(--surface); border-bottom: 1px solid var(--line); z-index: 5; flex-wrap: wrap; }
.brand { font-size: 1.6rem; font-weight: 600; letter-spacing: .04em; }
.sigil { width: 1.3em; height: 1.3em; border-radius: 50%; vertical-align: -.3em; margin-right: .1em; box-shadow: 0 0 12px rgba(169,139,255,.35); }
/* Wordmark "the JOURNEY IN": a whispered italic "the", then engraved capitals in shimmering gold with a soft halo. */
.wm { display: inline-flex; align-items: baseline; gap: .28em; white-space: nowrap; vertical-align: -.05em; }
.wm .wmThe { font: italic 500 .62em "Cormorant Garamond", serif; letter-spacing: .06em; color: var(--accent2); opacity: .9; transform: translateY(-.18em); }
.wm .wmName { font-family: "Cinzel", "Cormorant Garamond", serif; font-weight: 600; font-size: .78em; letter-spacing: .2em; margin-right: -.2em;
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent2) 28%, #fff6dc 46%, var(--accent2) 62%, var(--accent) 100%); background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 1px color-mix(in srgb, var(--accent) 40%, transparent));
  animation: wmShimmer 9s ease-in-out infinite; }
.wm .wmName i { font-style: normal; font-size: .62em; vertical-align: .32em; margin: 0 .1em 0 .05em; letter-spacing: 0; opacity: .85; }
@keyframes wmShimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .wm .wmName { animation: none; background-position: 50% 0; } }
.tabs { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; }
.tab { background: none; border: 0; color: var(--muted); padding: 8px 12px; border-radius: 999px; font: inherit; cursor: pointer; }
.tab.active { color: var(--ink); background: var(--glow); }
main { max-width: 860px; margin: 0 auto; padding: 16px; }
.view { display: none; } .view.active { display: block; }
.banner { max-width: 860px; margin: 12px auto 0; padding: 10px 14px; border-radius: 12px; background: var(--glow); font-size: .88rem; }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }
.primary { background: var(--accent); color: var(--onAccent); border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 500; }
.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; }
button:disabled { opacity: .45; cursor: default; }
.row, .formrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
input, textarea, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 12px; width: 100%; }
.formrow input[type=number] { width: 90px; } .formrow select { width: auto; } input[type=range] { width: 120px; padding: 0; }
input[type=checkbox] { width: auto; }
.transmission { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 0 40px var(--glow); margin-bottom: 16px; }
.transmission .label { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--accent2); }
.transmission .body { font-size: 1.05rem; margin-top: 6px; white-space: pre-wrap; }
.chat { display: flex; flex-direction: column; gap: 12px; min-height: 120px; padding-bottom: 8px; }
.msg { padding: 12px 16px; border-radius: 16px; max-width: 92%; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--user); }
.msg.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); }
.msg .meta { font-size: .72rem; color: var(--muted); margin-top: 6px; }
.starters { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.starters button { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: .85rem; }
.composer { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: flex-end; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); flex-wrap: wrap; }
.composer textarea { flex: 1; min-width: 200px; resize: none; max-height: 180px; }
.deep { font-size: .8rem; color: var(--muted); display: flex; gap: 4px; align-items: center; width: 100%; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 14px 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: box-shadow .2s; }
.card:hover { box-shadow: 0 0 24px var(--glow); }
.card .t { font-weight: 600; } .card .l { font-size: .75rem; color: var(--accent2); } .card .d { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.tag { display: inline-block; font-size: .68rem; padding: 2px 8px; border-radius: 999px; color: #fff; margin-top: 6px; }
.tag.est { background: var(--est); } .tag.emg { background: var(--emg); } .tag.trad { background: var(--trad); } .tag.spec { background: var(--spec); }
.script { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 18px; margin-top: 12px; }
.script:not(:empty) { padding: 16px 18px; }
.composeMed, .lab, .journal { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-top: 18px; }
.evidence { font-size: .9rem; margin-top: 8px; }
.breathOrb { width: 160px; height: 160px; margin: 24px auto; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, var(--accent), transparent 70%); color: var(--onAccent); transition: transform 5.45s ease-in-out; }
.caret { display: inline-block; width: .5em; height: 1.05em; margin-left: 2px; vertical-align: -.18em; background: var(--accent); border-radius: 2px; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.msg { scroll-margin-top: 90px; }
.typeSpacer { height: 65vh; }
.scrollHint { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 6; background: var(--accent); color: var(--onAccent); border: 0;
  border-radius: 999px; padding: 6px 14px; font-size: .82rem; box-shadow: 0 4px 24px var(--glow); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translate(-50%, 4px); } }
.card.selected { box-shadow: 0 0 0 2px var(--accent), 0 0 24px var(--glow); }
.hsHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hsTitle { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; font-weight: 600; }
.hsClock { font-variant-numeric: tabular-nums; font-size: 1.4rem; color: var(--accent2); white-space: nowrap; }
.hsTimeline { position: relative; display: flex; height: 30px; margin: 14px 0 6px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.hsSeg { display: grid; place-items: center; font-size: .7rem; color: var(--ink); overflow: hidden; white-space: nowrap; border-right: 1px solid var(--line); }
.hsSeg:last-of-type { border-right: 0; }
.hsSeg.now { background: var(--glow); font-weight: 600; }
.hsMarker { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--accent2); box-shadow: 0 0 8px var(--accent2); }
.hsStage { font-size: .9rem; color: var(--muted); min-height: 1.4em; }
#hsScope { width: 100%; height: 140px; display: block; margin: 8px 0; border-radius: 12px; background: var(--glow); }
.hsLayers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; font-size: .82rem; font-variant-numeric: tabular-nums; }
.hsLayers div { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.hsLayers b { color: var(--accent); }
/* Threads sidebar */
.threads { position: fixed; left: 0; top: var(--top-h, 60px); bottom: 0; width: 250px; padding: 14px 10px; display: none; flex-direction: column; gap: 6px;
  background: var(--surface); backdrop-filter: blur(14px); border-right: 1px solid var(--line); overflow-y: auto; z-index: 4; }
body.master-on .threads { display: flex; }
.newChat { width: 100%; }
.threadsLabel { text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--accent2); margin: 10px 6px 2px; }
#threadList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.thread { display: flex; align-items: center; border-radius: 10px; }
.thread:hover, .thread.active { background: var(--glow); }
.tOpen { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; background: none; border: 0; color: var(--ink); padding: 7px 8px; text-align: left; }
.tt { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.td { font-size: .7rem; color: var(--muted); }
.tDel { background: none; border: 0; color: var(--muted); font-size: 1.1rem; padding: 4px 10px; opacity: 0; }
.thread:hover .tDel, .thread.active .tDel, .tDel:focus-visible { opacity: 1; }
.tEmpty { padding: 6px 8px; }
.threadsBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 6; }
.threadsToggle { margin-bottom: 10px; }
@media (min-width: 1100px) {
  /* Center the chat in the space beside the threads sidebar. */
  body.master-on main, body.master-on .banner { margin-left: max(266px, calc(250px + (100vw - 250px - 860px) / 2)); }
  .threadsToggle { display: none; }
}
@media (max-width: 1099px) {
  .threads { top: 0; z-index: 7; width: min(280px, 85vw); transform: translateX(-100%); transition: transform .25s ease; }
  body.threads-open .threads { transform: none; }
  body.threads-open .threadsBackdrop { display: block; }
}
/* Account, plans and paywalls */
.topRight { position: relative; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.account { padding: 7px 14px; font-size: .88rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account.signedIn { background: var(--glow); }
.accountMenu { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; display: flex; flex-direction: column; gap: 8px; padding: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.25); z-index: 8; }
.adminLink { text-align: center; text-decoration: none; }
.adminBtn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600;
  text-decoration: none; color: var(--onAccent2); background: var(--accent2); white-space: nowrap; }
.adminBtn:hover { filter: brightness(1.08); }
.acctTier { font-weight: 600; color: var(--accent2); }
.lockTag { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; padding: 1px 6px; border-radius: 999px; background: var(--accent2); color: var(--onAccent2); margin-left: 4px; vertical-align: 2px; }
.usageLine { width: 100%; }
.usageLine a, .authSwitch a, dialog a { color: var(--accent); }
.authErr { color: var(--spec); font-size: .85rem; min-height: 1.2em; }
.authErr.ok { color: var(--accent2); }
.danger { background: transparent; color: #d64545; border: 1px solid #d64545; border-radius: 999px; padding: 8px 16px; }
#acctDlg h4 { margin: 16px 0 4px; font-size: .95rem; }
#delForm { border-top: 1px solid var(--line); margin-top: 8px; }
.perks { padding-left: 18px; margin: 8px 0; } .perks li { margin: 4px 0; }
.gatePrice { margin: 6px 0 12px; font-weight: 600; }
.row.center { justify-content: center; }
.paywall { text-align: center; padding: 22px 18px; margin: 14px 0; border-radius: 18px; border: 1px solid var(--accent2);
  background: radial-gradient(circle at 50% 0, var(--glow), transparent 70%), var(--surface); }
.paywallIcon { font-size: 1.8rem; color: var(--accent2); }
.lockedCard { opacity: .72; }
.lockedCard .t { color: var(--muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.chip { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 5px 12px; font-size: .82rem; }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--onAccent); }
.hypCat { margin: 16px 0 0; }
/* Hypnosis audio player */
.hypPlayer { display: flex; gap: 22px; align-items: center; padding: 22px; margin: 14px 0; border-radius: 22px; border: 1px solid var(--line);
  background: radial-gradient(circle at 18% 50%, var(--glow), transparent 60%), var(--surface); }
.hypPlayer.locked { opacity: .55; }
.hypOrbWrap { flex: none; display: grid; place-items: center; width: 150px; height: 150px; }
.hypOrb { width: 120px; height: 120px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 2rem;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 45%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 45%, #000));
  box-shadow: 0 0 0 10px var(--glow), 0 0 50px var(--glow); transition: transform .3s; }
.hypOrb:hover { transform: scale(1.04); }
.hypPlayer.playing .hypOrb { animation: hypBreathe 11s ease-in-out infinite; cursor: default; }
@keyframes hypBreathe { 0%, 100% { transform: scale(.9); box-shadow: 0 0 0 6px var(--glow), 0 0 30px var(--glow); } 45% { transform: scale(1.12); box-shadow: 0 0 0 22px var(--glow), 0 0 80px var(--glow); } }
@media (prefers-reduced-motion: reduce) { .hypPlayer.playing .hypOrb { animation: none; } }
.hypInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hypTrack { font-family: "Cormorant Garamond", serif; font-size: 1.6rem; font-weight: 600; line-height: 1.15; }
.hypPhase { color: var(--muted); min-height: 1.4em; }
.hypSteps { display: flex; gap: 4px; flex-wrap: wrap; }
.hypSteps span { font-size: .7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.hypSteps span.done { color: var(--ink); border-color: transparent; background: var(--glow); }
.hypSteps span.now { color: var(--onAccent); background: var(--accent); border-color: var(--accent); }
.hypTime { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.hypBar { flex: 1; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.hypBar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .5s linear; }
.hypControls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hypMix { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.hypMix input { width: 90px; }
.hypSettings { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 6px 0 10px; font-size: .88rem; }
.hypSettings select { width: auto; }
.hypGoal { margin-bottom: 6px; }
@media (max-width: 640px) {
  .hypPlayer { flex-direction: column; text-align: center; padding: 18px 14px; }
  .hypSteps, .hypControls { justify-content: center; }
  .hypTime { width: 100%; }
}
.hypNow { min-height: 1.3em; }
.paletteBtn { background: none; border: 1px solid var(--line); border-radius: 999px; width: 38px; height: 38px; font-size: 1.05rem; line-height: 1; color: var(--ink); cursor: pointer; }
.paletteMenu { position: absolute; right: 0; top: calc(100% + 8px); width: 280px; padding: 12px; display: flex; flex-direction: column; gap: 4px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.25); z-index: 8; }
.paletteMenu .pmTitle { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--accent2); margin: 2px 6px 6px; }
.pmItem { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.pmItem:hover { background: var(--glow); }
.pmItem.on { background: var(--glow); box-shadow: inset 0 0 0 1px var(--accent); }
.pmSw { display: flex; flex: none; }
.pmSw i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -5px; }
.pmSw i:first-child { margin-left: 0; }
.pmName { font-weight: 500; font-size: .9rem; line-height: 1.2; }
.pmDesc { font-size: .72rem; color: var(--muted); }
.muteBtn { background: none; border: 1px solid var(--line); border-radius: 999px; width: 38px; height: 38px; font-size: 1.05rem; line-height: 1; color: var(--ink); }
.muteBtn.on { background: var(--ink); border-color: var(--ink); }
.composerOpts { display: flex; gap: 18px; width: 100%; }
.composerOpts .deep { width: auto; }
.composerOpts { align-items: center; flex-wrap: wrap; }
.volCtl { gap: 6px !important; }
.volCtl input[type=range] { width: 110px; accent-color: var(--accent); }
.volCtl.off { opacity: .5; }
.volPct { font-variant-numeric: tabular-nums; min-width: 3ch; font-size: .75rem; }
.primary.stop { background: var(--ink); color: var(--bg); }
.msg.stopped::after { content: "Stopped"; display: block; margin-top: 6px; font-size: .7rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
#jList { padding-left: 18px; } #jList li { margin: 6px 0; }
dialog { border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--ink); max-width: 420px; width: calc(100% - 32px); }
dialog input { margin: 6px 0; }
dialog::backdrop { background: rgba(0,0,0,.4); backdrop-filter: blur(4px); }

/* Hypnosis modes and subliminal player */
.hypModes { display: inline-flex; gap: 4px; padding: 4px; margin: 6px 0 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.hypModes button { border: 0; background: none; color: var(--muted); padding: 8px 16px; border-radius: 999px; font-weight: 500; }
.hypModes button.active { background: var(--accent); color: var(--onAccent); }
.subLevelLabel { min-width: 9ch; font-size: .72rem; }
.subInside { margin: 8px 0 4px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.subInside summary { cursor: pointer; font-weight: 500; }
.subInside ul { columns: 2; column-gap: 24px; padding-left: 18px; margin: 8px 0 0; font-size: .86rem; }
.subInside li { margin: 3px 0; break-inside: avoid; }
@media (max-width: 640px) { .subInside ul { columns: 1; } }

/* ---------- Desktop: tab icons stay hidden ---------- */
.tab .ti { display: none; }

/* ---------- Phones: compact top bar + app-style bottom tab bar ---------- */
@media (max-width: 720px) {
  :root { --navH: calc(62px + env(safe-area-inset-bottom)); }
  body { padding-bottom: var(--navH); }
  .top { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .brand { font-size: 1.35rem; flex: none; }
  .topRight { gap: 6px; }
  .topRight .paletteBtn, .topRight .muteBtn { width: 40px; height: 40px; }
  .account { max-width: 110px; padding: 8px 12px; min-height: 40px; }
  .adminBtn { padding: 8px 10px; min-height: 40px; font-size: 0; gap: 0; }
  .adminBtn::before { content: "⚙"; font-size: 1rem; }

  /* The tabs become a bottom navigation bar, all six visible, thumb-reachable. */
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; justify-content: space-around; gap: 0; overflow: visible;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  :root:not([data-palette]) .tabs, :root[data-palette] .tabs { background: color-mix(in srgb, var(--bg) 88%, transparent); }
  .tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 14px; font-size: .66rem; position: relative; }
  .tab .ti { display: block; font-size: 1.25rem; line-height: 1; filter: saturate(.85); }
  .tab .tl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tab.active { background: var(--glow); color: var(--ink); }
  .tab .lockTag { position: absolute; top: 0; right: 4px; font-size: .5rem; padding: 0 4px; margin: 0; }

  main { padding: 12px 12px 20px; }
  h2 { font-size: 1.65rem; }
  .banner { margin: 8px 12px 0; }

  /* Touch-friendly controls; 16px text stops phones zooming in on focus. */
  input, textarea, select { font-size: 16px; min-height: 44px; }
  input[type=range] { min-height: 32px; }
  input[type=checkbox] { min-height: 0; width: 20px; height: 20px; }
  .primary, .ghost { min-height: 44px; padding: 10px 18px; }
  .ghost.small, .primary.small { min-height: 38px; }
  .starters button, .chip { min-height: 38px; padding: 8px 14px; }
  .card { padding: 14px; }

  /* Chat: composer sits just above the bottom bar. */
  .composer { bottom: var(--navH); padding: 10px 0; }
  .composerOpts { gap: 12px; }
  .volCtl input[type=range] { width: 90px; }
  .scrollHint { bottom: calc(var(--navH) + 90px); }
  .msg { max-width: 96%; padding: 11px 14px; }
  .threads { padding-top: calc(14px + env(safe-area-inset-top)); }

  /* Menus open as sheets under the top bar. */
  .accountMenu, .paletteMenu { position: fixed; left: 10px; right: 10px; top: calc(60px + env(safe-area-inset-top)); width: auto; max-height: 70vh; overflow-y: auto; }

  /* Dialogs use the full width. */
  dialog { width: calc(100% - 20px); max-width: none; margin: auto; }

  /* Frequency, binaural and hypnosis controls stack. */
  .formrow { gap: 8px; }
  .formrow label { display: flex; align-items: center; gap: 6px; }
  .hsHead { flex-direction: column; gap: 4px; }
  .hsLayers { grid-template-columns: 1fr; }
  .hsSeg { font-size: .6rem; }
  #hsScope { height: 110px; }
  .hypSettings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hypSettings label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-size: .78rem; }
  .hypSettings label.muted { flex-direction: row; align-items: center; }
  .hypSettings select { width: 100%; }
  .hypModes { display: flex; width: 100%; }
  .hypModes button { flex: 1; min-height: 42px; }
  .hypOrbWrap { width: 130px; height: 130px; }
  .hypOrb { width: 108px; height: 108px; }
  .hypMix { flex: 1 1 100%; justify-content: space-between; }
  .hypMix input { flex: 1; width: auto; }
  .grid { grid-template-columns: 1fr; gap: 8px; }
  .lab, .composeMed, .journal { padding: 14px; }
}
@media (max-width: 380px) {
  .brand { font-size: 1.2rem; }
  .account { max-width: 84px; }
  .hypSettings { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* A blurred header would trap the fixed bottom bar inside it, so phones get a solid header instead. */
  .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--bg) 94%, var(--accent)); }
  .composer { background: var(--bg); box-shadow: 0 -14px 14px var(--bg); }
}
@media (max-width: 720px) {
  .composerOpts { flex-wrap: nowrap; gap: 10px; font-size: .78rem; }
  .composerOpts .volPct { display: none; }
  .volCtl input[type=range] { width: 70px; min-width: 0; }
}
@media (max-width: 720px) { .hypModes button { white-space: nowrap; font-size: .88rem; padding: 8px 10px; } }

/* Links to the guide page */
.guideLink { display: inline-block; margin-left: 4px; color: var(--accent); font-size: .86rem; text-decoration: none; border-bottom: 1px dashed currentColor; }
.guideLink:hover { border-bottom-style: solid; }
.guideRow { margin: 0 0 10px; }
@media (max-width: 720px) { .guideLink { display: block; margin: 6px 0 0; padding: 4px 0; } .guideRow .guideLink { margin: 0; } }

/* Meditate & Breathe */
.medIntentLabel { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; }
.medIntentLabel input { flex: 1; }
.breathStage { display: flex; gap: 26px; align-items: center; padding: 24px; margin: 14px 0; border-radius: 22px; border: 1px solid var(--line);
  background: radial-gradient(circle at 20% 50%, var(--glow), transparent 60%), var(--surface); }
.brOrbWrap { position: relative; flex: none; width: 220px; height: 220px; display: grid; place-items: center; }
.brOrb { width: 120px; height: 120px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 40%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 50%, #000));
  box-shadow: 0 0 60px var(--glow), 0 0 0 10px var(--glow); transform: scale(1); will-change: transform; }
.brOrb span { font-size: .74rem; font-weight: 600; max-width: 96px; line-height: 1.2; }
.brOrb b { font-size: 1.3rem; font-variant-numeric: tabular-nums; min-height: 1.4em; }
.brRing { position: absolute; inset: 0; border-radius: 50%; --p: 0;
  background: conic-gradient(var(--accent2) calc(var(--p) * 1%), transparent 0); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%); mask: radial-gradient(circle, transparent 66%, #000 67%); opacity: .8; }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.brRing.go { animation: brSweep var(--dur, 4s) linear forwards; }
.brRing[data-kind="hold"], .brRing[data-kind="holdEmpty"] { background: conic-gradient(var(--muted) calc(var(--p) * 1%), transparent 0); }
@keyframes brSweep { from { --p: 0; } to { --p: 100; } }
.brInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .brOrb { transition: none !important; } }
@media (max-width: 720px) {
  .breathStage { flex-direction: column; text-align: center; padding: 18px 14px; gap: 14px; }
  .brOrbWrap { width: 200px; height: 200px; }
  .brInfo .hypControls { justify-content: center; }
  .medIntentLabel { flex-direction: column; align-items: stretch; grid-column: 1 / -1; }
}

/* Logo links back to the Master screen */
a.brand { color: inherit; text-decoration: none; cursor: pointer; border-radius: 10px; }
a.brand:hover .sigil { box-shadow: 0 0 16px var(--accent); }
a.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- Design audit fixes (Nov 2026) ---------- */
/* Themed checkboxes, radios and sliders everywhere. */
input[type=checkbox], input[type=radio], input[type=range], progress { accent-color: var(--accent); }
/* One visible keyboard focus ring for every control. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(input, select, textarea):focus-visible { outline-offset: 0; }
/* Master: no dead space before the suggestions when the chat is empty. */
.chat:empty { min-height: 0; padding: 0; }
/* Readable small text: nothing under 12px. */
.transmission .label, .msg .meta, .threadsLabel, .paletteMenu .pmTitle, .pmDesc, .subLevelLabel, .volPct { font-size: .8rem; }
.tag, .td, .hypSteps span, .hsSeg { font-size: .8rem; }
.lockTag { font-size: .68rem; }
.card .l { font-size: .8rem; } .card .d { font-size: .9rem; }
/* Evidence tags: darker fills so white text passes contrast. */
.tag.est { background: #23704a; } .tag.emg { background: #8a5d0c; } .tag.trad { background: #3a59b5; } .tag.spec { background: #963865; }
/* Locked content stays readable; the lock and Paid tag do the signalling. */
.lockedCard { opacity: 1; }
.lockedCard .t { color: var(--ink); }
.lockedCard .d { color: var(--muted); }
.lockedCard .t .lockTag { margin-left: 6px; }
/* Welcome line for new visitors. */
.welcome { margin: 0 0 12px; }
.welcome h2 { margin: 0; font-size: 1.9rem; }
.welcome p { margin: 2px 0 0; color: var(--muted); }
/* Line icons for the phone tab bar. */
.tab .ti svg { width: 22px; height: 22px; display: block; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab .ti { filter: none; }
/* Frequency Lab: raw numbers live under Advanced. */
.advanced { margin: 4px 0 8px; }
.advanced summary { cursor: pointer; color: var(--muted); font-size: .9rem; padding: 4px 0; }
.freqNow { font-weight: 600; margin: 2px 0 6px; }
/* Site footer with trust links. */
.siteFoot { max-width: 860px; margin: 24px auto 0; padding: 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
  font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); }
.siteFoot a { color: var(--muted); text-decoration: none; }
.siteFoot a:hover { color: var(--ink); text-decoration: underline; }
body.master-on .siteFoot { display: none; }
@media (max-width: 720px) {
  /* Suggestions scroll sideways on phones instead of being cut off under the composer. */
  .starters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 8px -12px; padding: 0 12px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .starters::-webkit-scrollbar { display: none; }
  .starters button { flex: none; white-space: nowrap; }
  .tab { font-size: .72rem; }
  .tab .lockTag { font-size: .58rem; }
  .welcome h2 { font-size: 1.5rem; }
  .siteFoot { margin-bottom: 8px; }
}
/* Custom checkboxes: the unchecked box matches the theme in every browser. */
input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; min-height: 0; margin: 0 4px 0 0; padding: 0;
  border: 1.5px solid var(--muted); border-radius: 5px; background: transparent; display: inline-grid; place-content: center; cursor: pointer; vertical-align: -3px; }
input[type=checkbox]::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .12s ease;
  background: var(--onAccent); clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 39% 72%); }
input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
input[type=checkbox]:checked::before { transform: scale(1); }
@media (max-width: 720px) { input[type=checkbox] { width: 20px; height: 20px; } }

/* =====================================================================
   Redesign (Nov 2026): welcome page, Home, 4-tab navigation, cover-art cards,
   settings menu, previews, warmer accent and higher contrast.
   ===================================================================== */
:root { --radius: 18px; }

/* Icons */
.ic { width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.iconBtn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink); position: relative; }
.iconBtn:hover { background: var(--glow); }
.iconBtn .ic { width: 20px; height: 20px; }
.muteBtn.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.hypOrbIcon .ic { width: 44px; height: 44px; }

/* Living background: a slow aurora behind everything. */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: .35; animation: drift 38s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { background: var(--aura); top: -25vmax; left: -15vmax; }
.aurora i:nth-child(2) { background: var(--accent2); bottom: -35vmax; right: -20vmax; opacity: .16; animation-duration: 46s; }
.aurora i:nth-child(3) { background: color-mix(in srgb, var(--aura) 70%, #2ec4b6); top: 30vh; left: 45vw; width: 40vmax; height: 40vmax; opacity: .14; animation-duration: 52s; }
@keyframes drift { to { transform: translate(8vmax, 6vmax) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }
:root[data-palette="lotus"] .aurora i, :root[data-palette="temple"] .aurora i, :root[data-palette="sage"] .aurora i { opacity: .12; }
@media (prefers-color-scheme: light) { :root:not([data-palette]) .aurora i { opacity: .12; } }
html, body { background: transparent; }
html { background: var(--bg); }
#field { opacity: .8; }

/* Header */
.top { gap: 12px; }
.tab { font-weight: 500; }
.account.premium::before { content: "Premium · "; color: var(--accent2); font-weight: 600; }
.landingCta { display: none !important; }
.settingsMenu { position: absolute; right: 0; top: calc(100% + 8px); width: 320px; max-height: min(80vh, 640px); overflow-y: auto; padding: 8px 14px 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 50px rgba(0,0,0,.35); z-index: 8; }
.smSection { padding: 12px 0; border-bottom: 1px solid var(--line); }
.smSection:last-child { border-bottom: 0; padding-bottom: 2px; }
.smTitle { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; }
.smTitle .ic { color: var(--accent2); }
.smSection p { margin: 4px 0 8px; }
.segRow { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; margin: 6px 0; }
.segRow button { flex: 1; border: 0; background: none; color: var(--muted); border-radius: 999px; padding: 6px 0; font-size: .82rem; }
.segRow button.on { background: var(--accent); color: var(--onAccent); }
#dimBtn { margin-top: 6px; }
.switch { display: flex; align-items: center; gap: 6px; font-size: .88rem; }
.settingsMenu select { width: auto; padding: 6px 10px; }
.settingsMenu .paletteMenu { position: static; width: auto; padding: 4px 0 0; border: 0; box-shadow: none; background: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.settingsMenu .pmItem { padding: 6px; }
.settingsMenu .pmDesc { display: none; }
.settingsMenu .pmName { font-size: .8rem; }

/* Sub-navigation for Listen and Practice */
.subnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding: 2px; }
.subnav::-webkit-scrollbar { display: none; }
.subnav button { flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 8px 16px; font-weight: 500; }
.subnav button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- Welcome page ---------- */
.landingPage { display: none; }
html.landing .landingPage { display: block; }
html.landing main, html.landing .threads, html.landing .threadsBackdrop, html.landing .tabs, html.landing #banner, html.landing #muteBtn { display: none !important; }
html.landing .landingCta { display: inline-flex !important; }
.landingPage { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.landingPage section { padding: 56px 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 600; color: var(--accent2); margin-bottom: 10px; }
.center { text-align: center; }
.landingPage h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 12px; }
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding-top: 64px !important; }
.hero h1 { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.04; margin: 0 0 18px; letter-spacing: -.01em; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 560px; margin: 0 0 22px; }
.heroCtas { gap: 12px; }
.big { padding: 13px 24px !important; font-size: 1rem; font-weight: 600; }
.primary.big { box-shadow: 0 8px 30px var(--glow); }
.primary, .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.heroArt { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.heroRings, .heroRings i { position: absolute; inset: 0; border-radius: 50%; }
.heroRings i { border: 1px solid var(--line); animation: ring 9s ease-in-out infinite; }
.heroRings i:nth-child(2) { inset: 10%; animation-delay: -3s; border-color: color-mix(in srgb, var(--accent2) 30%, transparent); }
.heroRings i:nth-child(3) { inset: 20%; animation-delay: -6s; }
@keyframes ring { 50% { transform: scale(1.04); opacity: .6; } }
.heroOrb { width: 52%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--onAccent); z-index: 1; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 35%, #fff), var(--accent) 50%, color-mix(in srgb, var(--accent) 40%, #000));
  box-shadow: 0 0 0 14px var(--glow), 0 0 120px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 40px color-mix(in srgb, var(--accent2) 35%, transparent);
  animation: orbBreathe 11s ease-in-out infinite; }
.heroOrb span { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; font-weight: 600; text-align: center; padding: 0 10px; }
.heroOrb b { font-variant-numeric: tabular-nums; font-weight: 500; opacity: .85; min-height: 1.4em; }
@keyframes orbBreathe { 0%, 100% { transform: scale(.92); } 45% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .heroOrb, .heroRings i { animation: none; } }
.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 20px 0 !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.stats b { display: block; font-family: "Cormorant Garamond", serif; font-size: 2.3rem; line-height: 1; color: var(--accent2); }
.stats span { font-size: .85rem; color: var(--muted); }
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.feature .fArt { aspect-ratio: 16/10; }
.feature .fArt svg { width: 100%; height: 100%; display: block; }
.feature h3 { margin: 14px 16px 4px; font-size: 1.3rem; line-height: 1.2; }
.feature p { margin: 0 16px 18px; color: var(--muted); font-size: .93rem; }
.feature a { color: var(--accent); }
/* A full-width feature card: art on the left, text on the right. */
.feature.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 2fr; align-items: center; }
.feature.wide .fArt { height: 100%; aspect-ratio: auto; min-height: 150px; }
.honest { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.honest p { color: var(--muted); }
.tagList { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.tagList li { font-size: .93rem; color: var(--muted); }
.tagList .tag { margin: 0 8px 0 0; }
.demoChat { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 0 60px var(--glow); }
.demoChat .msg { white-space: normal; }
.demoChat .tag { margin: 0 2px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 820px; margin: 28px auto 0; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; }
.plan.featured { border-color: var(--accent2); box-shadow: 0 0 60px color-mix(in srgb, var(--accent2) 18%, transparent); }
.planBadge { position: absolute; top: -12px; right: 20px; background: var(--accent2); color: var(--onAccent2); font-weight: 700; font-size: .78rem; padding: 4px 12px; border-radius: 999px; }
.plan h3 { margin: 0; font-size: 1.5rem; }
.price { font-family: "Cormorant Garamond", serif; font-size: 2.6rem; font-weight: 600; margin: 4px 0 8px; }
.price small { font-family: Inter, sans-serif; font-size: .95rem; color: var(--muted); font-weight: 400; }
.plan ul { padding-left: 20px; margin: 0 0 22px; flex: 1; color: var(--muted); }
.plan li { margin: 6px 0; }
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 4px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; color: var(--accent2); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { color: var(--muted); margin: 10px 0 0; }
.faq a, .homeMore a { color: var(--accent); }
.finalCta { text-align: center; padding-bottom: 40px !important; }
.finalCta h2 { margin-bottom: 20px; }

/* ---------- Home ---------- */
.homeHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.homeHead h2 { margin: 0; font-size: 2.2rem; }
.homeHead p { margin: 2px 0 0; }
.streak { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); white-space: nowrap; color: var(--muted); font-size: .85rem; }
.streak .ic { width: 20px; height: 20px; }
.streak b { font-size: 1.15rem; color: var(--ink); }
.streak.lit { border-color: color-mix(in srgb, var(--accent2) 55%, transparent); }
.streak.lit .ic { color: var(--accent2); fill: color-mix(in srgb, var(--accent2) 35%, transparent); }
.continue { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; margin-bottom: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.contArt { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: none; }
.contArt svg { width: 100%; height: 100%; display: block; }
.contText { flex: 1; min-width: 0; }
.contText .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent2); }
.contText b { display: block; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transmission { background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 55%), var(--surface); }
.transmission .body { font-size: 1.08rem; line-height: 1.7; }
.shimmer { display: block; height: 14px; margin: 8px 0; border-radius: 8px; background: linear-gradient(90deg, var(--line), var(--glow), var(--line)); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.shimmer.short { width: 60%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.homeH { margin: 26px 0 10px; font-size: 1.5rem; }
.goalChips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.goalChips .chip { padding: 8px 16px; font-size: .9rem; }
.pickGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
a.quickBtn { text-decoration: none; }
.quickBtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; transition: box-shadow .2s, transform .2s; }
.quickBtn:hover { box-shadow: 0 0 30px var(--glow); transform: translateY(-1px); }
.quickBtn .ic { width: 26px; height: 26px; color: var(--accent2); margin-bottom: 6px; }
.quickBtn span { font-size: .8rem; color: var(--muted); }
.homeMore { margin-top: 26px; text-align: center; }

/* ---------- Library cards with cover art ---------- */
.card.tcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; color: var(--ink); font: inherit; border-radius: 16px; transition: box-shadow .2s, transform .2s; }
.card.tcard:hover { transform: translateY(-2px); }
.tcCover { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; }
.coverArt { width: 100%; height: 100%; display: block; transition: transform .6s ease; }
.tcard:hover .coverArt { transform: scale(1.05); }
.tcPlay { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #14173a;
  box-shadow: 0 4px 16px rgba(0,0,0,.3); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.tcPlay .ic { width: 16px; height: 16px; margin-left: 2px; }
.tcard:hover .tcPlay, .tcard.selected .tcPlay, .tcard:focus-visible .tcPlay { opacity: 1; transform: none; }
.premiumPill { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600;
  background: rgba(10,10,30,.55); color: #ffe2ad; backdrop-filter: blur(6px); }
.premiumPill .ic { width: 12px; height: 12px; }
.premiumPill.small { position: static; background: color-mix(in srgb, var(--accent2) 20%, transparent); color: var(--accent2); margin-left: 4px; }
html.is-paid .premiumPill { display: none; }
.tcBody { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; }
.tcTitle { font-weight: 600; font-size: .98rem; line-height: 1.3; }
.tcBenefit { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.tcMeta { font-size: .76rem; color: color-mix(in srgb, var(--accent2) 80%, var(--muted)); margin-top: 2px; }
#medGrid .grid, #hypGrid .grid, #subGrid .grid, #hsGrid, #brGrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.hypCat { margin: 22px 0 0; font-size: 1.4rem; }
.toneGrid .card { display: flex; flex-direction: column; gap: 2px; }
.toneIc { color: var(--accent2); }

/* Players: settings tucked away, preview banner instead of a paywall */
.moreSettings { margin: 4px 0 10px; }
.moreSettings > summary { cursor: pointer; color: var(--muted); font-size: .9rem; padding: 6px 0; }
.moreSettings[open] > summary { color: var(--ink); }
.previewBanner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 10px 0 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent2) 45%, transparent);
  background: color-mix(in srgb, var(--accent2) 8%, var(--surface)); font-size: .9rem; }
.previewBanner > .ic { color: var(--accent2); width: 22px; height: 22px; }
.previewBanner > div { flex: 1; }
.hsLab { margin-bottom: 14px; }
.viewHead h2 { margin-bottom: .1em; }

/* ---------- Ask: tidy composer ---------- */
.composer { flex-direction: column; align-items: stretch; }
.composerRow { display: flex; gap: 8px; align-items: flex-end; width: 100%; }
.optsWrap { position: relative; }
.chatOptsBtn { width: 44px; height: 44px; background: var(--surface); }
.chatOptsBtn .dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); }
.chatOpts { position: absolute; bottom: calc(100% + 8px); left: 0; width: 260px; display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.35); z-index: 8; }
.chatOpts .deep { font-size: .88rem; color: var(--ink); width: auto; }
.chatOpts .volCtl input[type=range] { flex: 1; width: auto; }
#voiceVolIcon { font-size: .8rem; color: var(--muted); }
.composer textarea { min-height: 44px; }
.welcome h2 { font-size: 2rem; }

/* ---------- Onboarding card, dim screen, toast ---------- */
.onboard { position: fixed; z-index: 20; right: 20px; bottom: 20px; width: min(420px, calc(100vw - 24px)); padding: 20px; border-radius: 20px;
  background: var(--bg); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: rise .35s ease; }
.onboard h3 { margin: 0 0 4px; }
.onboardClose { position: absolute; top: 10px; right: 10px; border: 0; width: 34px; height: 34px; }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.dim { position: fixed; inset: 0; z-index: 50; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.dimClock { font-family: "Cormorant Garamond", serif; font-size: 4rem; color: rgba(255,255,255,.22); }
.dimNote { color: rgba(255,255,255,.18); font-size: .85rem; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30; width: max-content; max-width: min(520px, calc(100vw - 24px)); padding: 12px 18px; border-radius: 14px;
  background: var(--ink); color: var(--bg); font-size: .9rem; box-shadow: 0 10px 40px rgba(0,0,0,.35); }

/* ---------- Tablets ---------- */
@media (max-width: 960px) {
  .hero, .honest { grid-template-columns: 1fr; }
  .heroArt { max-width: 340px; margin: 0 auto; order: -1; width: 70%; }
  .features { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .pickGrid, .quick { grid-template-columns: 1fr 1fr; }
  .quick > :last-child { grid-column: 1 / -1; }
}

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  .tab { font-size: .74rem; }
  .tab .ti .ic { width: 23px; height: 23px; }
  .settingsMenu { position: fixed; left: 10px; right: 10px; top: calc(60px + env(safe-area-inset-top)); width: auto; max-height: 75vh; }
  html.landing body { padding-bottom: 0; }
  .landingPage { padding: 0 16px; }
  .landingPage section { padding: 36px 0; }
  .hero { padding-top: 24px !important; gap: 18px; }
  .heroArt { width: 62%; }
  .heroCtas .big { flex: 1 1 100%; }
  .stats { grid-template-columns: 1fr 1fr; }
  .features, .plans { grid-template-columns: 1fr; }
  .feature, .feature.wide { display: grid; grid-template-columns: 110px 1fr; }
  .feature .fArt { grid-row: span 2; aspect-ratio: auto; height: 100%; }
  .feature h3 { margin: 12px 14px 2px; font-size: 1.15rem; }
  .feature p { margin: 0 14px 12px; font-size: .86rem; }
  .homeHead h2 { font-size: 1.7rem; }
  .streak span { display: none; }
  .pickGrid { grid-template-columns: 1fr; gap: 10px; }
  .quick { gap: 10px; }
  /* Cards become compact rows: art on the left, text on the right. */
  .card.tcard { flex-direction: row; align-items: stretch; }
  .tcCover { width: 96px; flex: none; aspect-ratio: auto; min-height: 92px; }
  .tcPlay { display: none; }
  .premiumPill { left: 6px; top: 6px; font-size: 0; padding: 4px; gap: 0; }
  .premiumPill.small { font-size: .7rem; padding: 2px 8px; }
  .premiumPill .ic { width: 13px; height: 13px; }
  .tcBody { padding: 10px 12px; justify-content: center; }
  #medGrid .grid, #hypGrid .grid, #subGrid .grid, #hsGrid, #brGrid { grid-template-columns: 1fr; gap: 10px; }
  .subnav { margin: 0 -12px 12px; padding: 2px 12px; }
  .previewBanner { flex-wrap: wrap; }
  .previewBanner .primary { width: 100%; }
  .composerRow textarea { min-width: 0; }
  .chatOpts { width: min(280px, calc(100vw - 32px)); }
  .onboard { right: 12px; left: 12px; width: auto; bottom: calc(var(--navH) + 10px); }
  .toast { bottom: calc(var(--navH, 0px) + 14px); }
}
/* Composer: a floating pill instead of a dark band. */
.composer { background: none !important; box-shadow: none !important; }
.composerRow { padding: 6px; border-radius: 28px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0,0,0,.25); align-items: center; }
.composerRow textarea { border: 0; background: transparent; padding: 10px 6px; }
.composerRow textarea:focus-visible { outline: none; }
.composerRow:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.chatOptsBtn { border: 0; background: transparent; }

/* ---------- Sleep sounds mixer, skip-ahead ---------- */
.slMixer { margin-top: 14px; display: grid; gap: 8px; }
.slRow { display: grid; grid-template-columns: minmax(110px, 160px) 1fr auto; align-items: center; gap: 10px; }
.slName { font-size: .86rem; }
.slRow input[type="range"] { width: 100%; }
.slRemove { padding: 4px 6px; line-height: 0; }
.slRemove svg { width: 14px; height: 14px; }
.slAdd { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.slAdd .chip { font-size: .78rem; padding: 4px 10px; opacity: .85; }
.slAdd .chip:hover { opacity: 1; border-color: var(--accent); }
.hypMix select { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; font-size: .8rem; }
.hypMix svg { width: 15px; height: 15px; }
.skipBtn { font-variant-numeric: tabular-nums; }
.hypSteps.seekable span { cursor: pointer; }
.hypSteps.seekable span:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hsTimeline { cursor: pointer; }
@media (max-width: 560px) { .slRow { grid-template-columns: 100px 1fr auto; } }

.slTrial { margin: 6px 0 2px; font-size: .84rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.slTrial b { color: var(--accent2); font-variant-numeric: tabular-nums; }
.linkBtn { background: none; border: 0; padding: 0; color: var(--accent2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }

/* Top-bar CTA: full "Start free, no card" on wider screens, short on phones */
@media (max-width: 520px) { .noCardTxt { display: none; } }

/* ============ 30-day Paths, Progress, memory, onboarding, demos (Nov 2026) ============ */
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--accent2); background: var(--surface); }
.pill.ok { color: var(--accent); }
.pill svg { width: 13px; height: 13px; }
.pathHome { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; margin-bottom: 14px; border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent2) 40%, var(--line)); }
.pathHome .pcArt, .obRec .pcArt { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: none; }
.pathHome .pcArt svg, .obRec .pcArt svg, .pathArt svg, .pathCard .pcArt svg { width: 100%; height: 100%; display: block; }
.pcText { flex: 1; min-width: 0; }
.pcText .label, .obRec .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent2); }
.pcText b { display: block; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcBar { height: 5px; border-radius: 99px; background: var(--line); margin-top: 6px; overflow: hidden; }
.pcBar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; }
.pathGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 8px; }
.pathCard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.pathCard.rec { border-color: color-mix(in srgb, var(--accent2) 55%, var(--line)); box-shadow: 0 0 40px var(--glow); }
.pathCard .pcArt { aspect-ratio: 16/8; }
.pcBody { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcBody h3 { margin: 2px 0 0; font-size: 1.25rem; }
.pcBody .pcBlurb { margin: 2px 0; color: var(--muted); font-size: .9rem; flex: 1; }
.pcBody details ol { margin: 6px 0 0; padding-left: 20px; color: var(--muted); }
.pcBody .pill { align-self: flex-start; }
.pcBody button { align-self: flex-start; margin-top: 6px; }
.pathHead { display: flex; gap: 18px; align-items: center; margin: 6px 0 16px; }
.pathArt { width: 110px; height: 110px; border-radius: 18px; overflow: hidden; flex: none; }
.pathHeadText { flex: 1; min-width: 0; }
.pathHeadText h2 { margin: 0; }
.pathHeadText p { margin: 2px 0 8px; }
.pathDots { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; max-width: 520px; }
.pDot { height: 12px; min-width: 0; padding: 0; border-radius: 3px; border: 0; background: color-mix(in srgb, var(--ink) 16%, transparent); cursor: pointer; opacity: 1 !important; }
.pDot.done { background: linear-gradient(180deg, var(--accent2), var(--accent)); border-color: transparent; }
.pDot.now { outline: 2px solid var(--accent2); outline-offset: 1px; }
.pDot.lockedDot:not(.done) { opacity: .45; }
.pDot:disabled { cursor: default; }
.pathDay, .pathLock, .pathWait { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px 20px; }
.pathLock, .pathWait { text-align: center; }
.pathLock h3, .pathWait h3 { display: flex; justify-content: center; align-items: center; gap: 8px; }
.pathLock .row, .pathWait .row { justify-content: center; }
.pdTop { display: flex; gap: 8px; flex-wrap: wrap; }
.pdTitle { font-family: "Cormorant Garamond", serif; font-size: 1.9rem; line-height: 1.15; margin: 8px 0 12px; }
.pSteps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pStep { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: color-mix(in srgb, var(--bg) 40%, transparent); }
.psHead { display: flex; align-items: center; gap: 10px; }
.psN { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 600; border: 1px solid var(--accent2); color: var(--accent2); }
.pStep.done .psN { background: var(--accent2); color: var(--onAccent2, #14173a); }
.psBody { margin: 8px 0 0 36px; }
.psBody p { margin: 0 0 8px; line-height: 1.65; }
.psBody textarea { width: 100%; box-sizing: border-box; }
.psBody .jq { font-style: italic; }
.askQ { text-align: left; border-radius: 14px; display: inline-flex; gap: 8px; align-items: flex-start; }
.pathFoot { margin-top: 14px; }
.statTiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sTile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.sTile svg { width: 20px; height: 20px; color: var(--accent2); }
.sTile b { font-family: "Cormorant Garamond", serif; font-size: 2.1rem; line-height: 1; }
.sTile span { color: var(--muted); font-size: .82rem; }
.pSec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-top: 14px; }
.pSec h3 { margin: 0 0 8px; }
.heat { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; margin: 6px 0 8px; overflow-x: auto; }
.heat i { border-radius: 3px; background: var(--line); }
.heat i.on { background: var(--accent2); }
.milestones { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.milestones li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px dashed var(--line); color: var(--muted); font-size: .88rem; }
.milestones li.ok { border-style: solid; color: var(--ink); border-color: color-mix(in srgb, var(--accent2) 45%, var(--line)); }
.milestones li svg { width: 16px; height: 16px; flex: none; }
.milestones li.ok svg { color: var(--accent2); }
.reflectOut p { line-height: 1.65; }
.journalList, .memList { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.jItem, .memItem { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 8px 36px 8px 12px; }
.jItem .tDel, .memItem .tDel { position: absolute; top: 4px; right: 4px; opacity: .7; }
.jText { white-space: pre-wrap; }
.memItem { display: flex; align-items: center; }
#memorySec .danger { padding: 4px 12px; font-size: .8rem; }
.msgSources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.msgSources span { display: inline-flex; align-items: center; gap: 4px; }
.msgSources svg { width: 14px; height: 14px; }
.msgSources a { color: var(--accent); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.obDlg { max-width: 560px; padding: 18px 22px 22px; }
.obTop { display: flex; justify-content: space-between; align-items: center; }
.obDots { display: flex; gap: 6px; }
.obDots i { width: 22px; height: 4px; border-radius: 4px; background: var(--line); }
.obDots i.on { background: var(--accent2); }
.obSigil { line-height: 0; margin-top: 6px; }
.obSigil img { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 24px rgba(169,139,255,.4); }
.obStep h3 { font-family: "Cormorant Garamond", serif; font-size: 1.7rem; margin: 10px 0 6px; line-height: 1.15; }
.obStep h4 { margin: 14px 0 6px; }
.obStep .goalChips { margin: 10px 0 14px; }
.obStep .row { margin-top: 12px; }
.obRec { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 16px; margin: 10px 0; }
.obRec b { font-size: 1.1rem; }
.obRec p { margin: 4px 0 0; }
.obActions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
#obBack { margin-top: 10px; }
.demos .demoTabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 22px 0 18px; }
.demoTabs button { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .9rem; cursor: pointer; }
.demoTabs button.active { background: var(--accent); color: var(--onAccent, #fff); border-color: transparent; }
.demoPanel { max-width: 760px; margin: 0 auto; }
.demoAsk { display: flex; gap: 8px; margin-top: 8px; }
.demoAsk input { flex: 1; min-width: 0; }
.demoMed { display: flex; gap: 22px; align-items: center; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.demoMed .script, .demoHyp .script { white-space: normal; padding: 12px 16px; font-style: italic; }
.dmOrb { width: 110px; height: 110px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--accent2), var(--accent) 60%, transparent 72%); box-shadow: 0 0 50px var(--glow); animation: dmBreathe 8s ease-in-out infinite; }
@keyframes dmBreathe { 0%, 100% { transform: scale(.86); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .dmOrb { animation: none; } }
.demoHyp { padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.demoHyp .hypSteps span.on { color: var(--ink); border-color: var(--accent2); }
.compare .tableWrap { overflow-x: auto; max-width: 820px; margin: 22px auto 0; }
.cmp { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cmp th, .cmp td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.cmp thead th { color: var(--accent2); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.cmp tbody th { font-weight: 500; }
.cmp td { color: var(--muted); }
.cmp td:last-child { color: var(--ink); font-weight: 500; }
@media (max-width: 720px) {
  .statTiles { grid-template-columns: 1fr 1fr; }
  .pathHead { gap: 12px; }
  .pathArt { width: 72px; height: 72px; border-radius: 14px; }
  .psBody { margin-left: 0; }
  .demoMed { flex-direction: column; text-align: center; }
  .pathDay, .pathLock, .pathWait { padding: 14px; }
  .cmp th, .cmp td { padding: 8px 6px; font-size: .84rem; }
}

/* ============ Celestial design layer: rings, constellation map, day art, week rings, mood, showcase ============ */
.ring { position: relative; flex: none; display: inline-grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .ringTrack { fill: none; stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: 7; }
.ring .ringFill { fill: none; stroke: var(--accent2); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent2) 60%, transparent)); transition: stroke-dashoffset .8s ease; }
.ring span { position: relative; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1.05em; line-height: 1; color: var(--ink); }
.ring span small { font-size: .55em; color: var(--muted); margin-left: 1px; }
.pathHead .ring span { font-size: 1.6rem; }
.pathHead { justify-content: space-between; }
.constellation { position: relative; max-width: 420px; margin: 0 auto 6px; border-radius: 24px; padding: 8px;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); }
.constellation svg { width: 100%; height: auto; display: block; overflow: visible; }
.constellation .bgStar { fill: var(--ink); opacity: .35; }
.constellation line { stroke: color-mix(in srgb, var(--accent2) 30%, transparent); stroke-width: 1.4; stroke-dasharray: 3 4; }
.constellation line.lit { stroke: var(--accent2); stroke-dasharray: none; filter: drop-shadow(0 0 3px var(--accent2)); }
.cNode .halo { fill: color-mix(in srgb, var(--accent2) 10%, transparent); stroke: color-mix(in srgb, var(--accent2) 25%, transparent); }
.cNode .core { fill: color-mix(in srgb, var(--bg) 70%, var(--accent2)); stroke: color-mix(in srgb, var(--accent2) 55%, transparent); stroke-width: 1.5; }
.cNode .num { fill: var(--muted); font: 600 13px Inter, sans-serif; text-anchor: middle; }
.cNode .lbl { fill: var(--muted); font: 500 12.5px Inter, sans-serif; }
.cNode.done .core, .cNode.now .core { fill: var(--accent2); stroke: #fff6dd; }
.cNode.done .num, .cNode.now .num { fill: var(--onAccent2, #2a1d05); }
.cNode.done .lbl, .cNode.now .lbl, .cNode.part .lbl { fill: var(--ink); }
.cNode.part .core { stroke: var(--accent2); }
.cNode.done .halo, .cNode.now .halo { fill: color-mix(in srgb, var(--accent2) 22%, transparent); filter: drop-shadow(0 0 10px var(--accent2)); }
.cNode.now .halo { animation: cPulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cPulse { 0%, 100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cNode.now .halo { animation: none; } }
.dayNav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px auto 14px; padding: 6px 10px; width: fit-content;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.dayNav span { font-size: 1.05rem; color: var(--muted); min-width: 110px; text-align: center; }
.dayNav b { color: var(--accent2); font-size: 1.2rem; }
.dayNav .iconBtn { font-size: 1.4rem; line-height: 1; width: 36px; height: 36px; }
.dayNav .iconBtn:disabled { opacity: .3; cursor: default; }
.dayHero { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16/8; margin-bottom: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.dayHero .dhArt, .dayHero .dhArt svg { width: 100%; height: 100%; display: block; }
.dhPlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 70%, transparent); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px);
  box-shadow: 0 0 0 8px color-mix(in srgb, #fff 12%, transparent), 0 10px 30px rgba(0,0,0,.35); transition: transform .2s; }
.dhPlay:hover { transform: translate(-50%, -50%) scale(1.06); }
.dhPlay svg { width: 30px; height: 30px; }
.pathDay .pdTitle { text-align: center; }
.pathDay .pdTop { justify-content: center; }
.weekRings { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 4px 0 16px; padding: 10px 8px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); }
.wr { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .72rem; color: var(--muted); padding: 4px 0; border-radius: 14px; }
.wr.today { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
.wr.future { opacity: .45; }
.wr .ring span { font-size: .8rem; color: var(--accent2); font-family: Inter, sans-serif; }
.wr .ring .ringTrack, .wr .ring .ringFill { stroke-width: 10; }
.mood { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.moodHead { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 10px; }
.moodRow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.moodBtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer; transition: transform .15s, border-color .2s; }
.moodBtn span { font-size: 1.4rem; line-height: 1.2; display: grid; place-items: center; color: var(--accent); }
.moodBtn .ic { width: 24px; height: 24px; }
.moodBtn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent2) 50%, var(--line)); }
.moodBtn.on { border-color: var(--accent2); color: var(--ink); background: color-mix(in srgb, var(--accent2) 14%, transparent); }
.moodPick { margin-top: 10px; max-width: 360px; }
.newCard { position: relative; margin-bottom: 16px; padding: 18px 20px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--accent2) 45%, var(--line));
  background: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 55%), linear-gradient(160deg, color-mix(in srgb, var(--accent) 20%, var(--surface)), var(--surface)); }
.newCard h3 { font-family: "Cormorant Garamond", serif; font-size: 1.6rem; line-height: 1.15; margin: 0 0 10px; padding-right: 30px; }
.ncClose { position: absolute; top: 10px; right: 10px; }
.ncList, .showList { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.ncList { grid-template-columns: 1fr 1fr; }
.ncList li, .showList li { display: flex; gap: 10px; align-items: flex-start; }
.ncList li > svg, .sIc { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; color: var(--accent2);
  background: color-mix(in srgb, var(--accent2) 14%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent2) 25%, transparent); }
.sIc { display: grid; place-items: center; width: 40px; height: 40px; padding: 9px; }
.sIc svg { width: 100%; height: 100%; }
.ncList b, .showList b { display: block; }
.ncList span, .showList span { color: var(--muted); font-size: .88rem; }
.showcase { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.showcase .lead { color: var(--muted); }
.showList { margin: 18px 0 22px; gap: 16px; }
.phone { justify-self: center; width: 300px; padding: 12px; border-radius: 44px; background: linear-gradient(160deg, #2a2440, #0c0a18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.5), 0 0 80px color-mix(in srgb, var(--accent) 25%, transparent); }
.phoneScreen { border-radius: 34px; padding: 22px 16px 14px; min-height: 560px; display: flex; flex-direction: column; gap: 6px;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--accent) 22%, #0a0920), #06060f 75%); color: #ece8fb; }
.phoneScreen .eyebrow { margin: 0; font-size: .66rem; }
.phHead { display: flex; justify-content: space-between; align-items: center; }
.phHead b { font-family: "Cormorant Garamond", serif; font-size: 1.45rem; }
.phHead .ring span { color: #ece8fb; }
.phoneScreen .constellation { padding: 0; margin: 0 -4px; }
.phoneScreen .cNode .lbl { font-size: 13.5px; }
.phCard { margin-top: auto; text-align: center; padding: 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent2) 55%, transparent);
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 30px color-mix(in srgb, var(--accent2) 10%, transparent); }
.phCard b { display: block; font-family: "Cormorant Garamond", serif; font-size: 1.15rem; }
.phCard span { font-size: .78rem; color: #b9b2d8; }
.phSun { color: var(--accent2); font-size: 1.4rem; text-shadow: 0 0 12px var(--accent2); }
.phTabs { display: flex; justify-content: space-around; padding-top: 10px; }
.phTabs i { width: 22px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); }
.phTabs i.on { background: var(--accent2); }
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 720px) {
  .moodRow { grid-template-columns: repeat(3, 1fr); }
  .ncList { grid-template-columns: 1fr; }
  .dayHero { aspect-ratio: 4/3; }
  .phone { width: 270px; }
  .phoneScreen { min-height: 500px; }
}

/* ============ Mandalas ============ */
.mandala { display: block; width: 100%; height: auto; overflow: visible; }
.mandala .spinA, .mandala .spinB { transform-box: view-box; transform-origin: 0 0; }
.mandala.spin .spinA { animation: mSpin 90s linear infinite; }
.mandala.spin .spinB { animation: mSpin 120s linear infinite reverse; }
.mandala.spin.slow .spinA { animation-duration: 160s; } .mandala.spin.slow .spinB { animation-duration: 220s; }
@keyframes mSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mandala.spin .spinA, .mandala.spin .spinB { animation: none; } }
.mStage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; margin: 8px 0 22px; scroll-margin-top: calc(var(--top-h, 60px) + 50px); }
.mBig { filter: drop-shadow(0 0 40px var(--glow)); max-width: 520px; width: 100%; justify-self: center; }
.mInfo h3 { font-family: "Cormorant Garamond", serif; font-size: 2rem; margin: 0 0 6px; line-height: 1.1; }
.mInfo h4 { margin: 14px 0 4px; color: var(--accent2); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; }
.mInfo p { margin: 0; line-height: 1.65; }
.mPals { display: flex; gap: 8px; margin: 16px 0 12px; }
.mPal { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.mPal.on { border-color: var(--ink); box-shadow: 0 0 12px var(--glow); }
.mGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mCard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; cursor: pointer; color: var(--ink); text-align: center; font: inherit; display: flex; flex-direction: column; gap: 4px; transition: transform .2s, border-color .2s; }
.mCard:hover { transform: translateY(-3px); }
.mCard.on { border-color: var(--accent2); box-shadow: 0 0 24px var(--glow); }
.mCard .mandala { width: 78%; margin: 0 auto 6px; }
.mCard b { font-size: .95rem; } .mCard span { font-size: .74rem; color: var(--muted); }
.mDraw { margin-top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px; }
.mDraw h3 { margin: 0 0 4px; }
.mDrawTools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 10px 0 12px; font-size: .88rem; }
.dSw { display: flex; gap: 6px; }
.dSw button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; }
.dSw button.on { border-color: var(--ink); }
#dCanvas { width: 100%; max-width: 640px; aspect-ratio: 1; display: block; margin: 0 auto; border-radius: 50%; touch-action: none; cursor: crosshair; box-shadow: 0 0 60px var(--glow); }
.gazeOv { position: fixed; inset: 0; z-index: 60; background: radial-gradient(circle at 50% 45%, #1a0838, #030208 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 20px; color: #f3ecff; }
.gazeArt { width: min(78vmin, 640px); transition: transform 4s ease-in-out, filter 4s ease-in-out; transform: scale(.9); filter: drop-shadow(0 0 30px rgba(162,77,255,.4)); }
.gazeArt.in { transform: scale(1.04); filter: drop-shadow(0 0 60px rgba(255,194,61,.45)); transition-duration: 4s; }
.gazeArt:not(.in) { transition-duration: 6s; }
.gazeText { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 1.1rem; }
.gazeText span { color: #b6a3dc; font-size: .9rem; }
.gazeBar { display: flex; gap: 10px; }
.gazeBar .ghost { color: #f3ecff; border-color: rgba(255,255,255,.25); }

/* ============ Chakra map ============ */
.cWrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 26px; align-items: start; }
.cFigure { position: relative; max-width: 440px; width: 100%; justify-self: center; }
.cFigure svg { width: 100%; height: auto; display: block; overflow: visible; }
.nadi { fill: none; stroke-width: 1.3; opacity: .55; stroke-dasharray: 4 5; animation: nadiFlow 6s linear infinite; }
.nadi.ida { stroke: #7cc8ff; } .nadi.pingala { stroke: #ff9b6b; animation-direction: reverse; }
@keyframes nadiFlow { to { stroke-dashoffset: -90; } }
.sushumna { opacity: .8; filter: drop-shadow(0 0 4px #c77dff); }
.cNodeC { cursor: pointer; outline: none; }
.cNodeC .cHalo { fill: var(--cc); opacity: .16; transition: opacity .25s, r .25s; }
.cNodeC .cSpin ellipse { fill: var(--cc); opacity: .75; }
.cNodeC .cSpin { animation: mSpin 24s linear infinite; }
.cNodeC .cCore { fill: var(--cc); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 8px var(--cc)); }
.cNodeC:hover .cHalo, .cNodeC:focus .cHalo, .cNodeC.sel .cHalo { opacity: .4; }
.cNodeC.sel .cCore, .cNodeC:focus-visible .cCore { stroke-width: 3; }
.cNodeC.tuning .cHalo { animation: cPulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .nadi, .cNodeC .cSpin { animation: none; } }
.cTip { position: absolute; transform: translateY(-50%); z-index: 3; max-width: 230px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.4); backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 3px; pointer-events: none; font-size: .85rem; }
.cTip[style*="left: auto"] { right: 0; }
.cTip small { color: var(--muted); }
.cPanel { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px 20px; scroll-margin-top: calc(var(--top-h, 60px) + 50px); }
.cPanel h3 { font-family: "Cormorant Garamond", serif; font-size: 1.8rem; margin: 0; line-height: 1.1; }
.cList { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.cList button { width: 100%; display: grid; grid-template-columns: 16px auto 1fr; gap: 4px 12px; align-items: center; text-align: left; background: transparent; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; color: var(--ink); font: inherit; cursor: pointer; }
.cList button:hover { border-color: color-mix(in srgb, var(--accent2) 50%, var(--line)); }
.cList i { width: 14px; height: 14px; border-radius: 50%; }
.cList span { grid-column: 2 / 4; color: var(--muted); font-size: .8rem; }
.cHead { display: flex; gap: 14px; align-items: center; margin: 10px 0 6px; }
.cDot { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, #fff 0, var(--cc) 45%, transparent 72%); box-shadow: 0 0 26px var(--cc); flex: none; }
.cPanel .eyebrow { color: var(--cc, var(--accent2)); margin: 0; }
.cTheme { font-size: 1.05rem; margin: 4px 0 12px; }
.cFacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 14px; }
.cFacts div { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.cFacts dt { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cFacts dd { margin: 2px 0 0; font-weight: 600; font-size: .9rem; }
.cTabs { display: flex; gap: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.cTabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 8px 10px; font: inherit; cursor: pointer; }
.cTabs button.on { color: var(--ink); border-bottom-color: var(--cc, var(--accent2)); }
.cTab h4 { margin: 12px 0 4px; }
.cTab ul { margin: 0; padding-left: 20px; line-height: 1.6; }
.cTab p { line-height: 1.65; }
.cTab textarea { width: 100%; }
.cActs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.cActs .on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 45%, transparent); }
.cAff { font-family: "Cormorant Garamond", serif; font-size: 1.3rem; font-style: italic; color: var(--cc, var(--accent2)); }
.cTuneRow { margin: 16px 0 4px; align-items: center; }
.cHonest p { line-height: 1.65; }
@media (max-width: 900px) { .mStage, .cWrap { grid-template-columns: 1fr; } .cFacts { grid-template-columns: 1fr 1fr; } .cFigure { max-width: 340px; } }

.mandala .twinkle path { animation: twinkle 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mandala .twinkle path:nth-child(2n) { animation-delay: 1.2s; } .mandala .twinkle path:nth-child(3n) { animation-delay: 2.3s; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
.mBig .mandala, .gazeArt .mandala { filter: saturate(1.25) drop-shadow(0 0 18px rgba(255,61,240,.35)); }
@media (prefers-reduced-motion: reduce) { .mandala .twinkle path { animation: none; opacity: .7; } }

/* Psychedelic: color flow and hue-shifting light */
.mBig.flow .mandala, .gazeArt.flow .mandala { animation: hueFlow 24s linear infinite; }
@keyframes hueFlow { from { filter: saturate(1.5) hue-rotate(0deg) drop-shadow(0 0 22px rgba(255,0,200,.45)); } to { filter: saturate(1.5) hue-rotate(360deg) drop-shadow(0 0 22px rgba(255,0,200,.45)); } }
.mFlowSw { margin: 0 0 12px; }
@media (prefers-reduced-motion: reduce) { .mBig.flow .mandala, .gazeArt.flow .mandala { animation: none; } }

/* ---------- Now playing bar (nowplaying.js): follows you across screens while a session plays ---------- */
.npBar { position: fixed; z-index: 8; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 24px)); display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 10px; overflow: hidden;
  background: color-mix(in srgb, var(--bg) 82%, var(--accent)); color: var(--ink); border: 1px solid var(--line); border-radius: 18px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0,0,0,.28); animation: npIn .25s ease; }
.npBar[hidden] { display: none; }
@keyframes npIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.npProg { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--line); }
.npProg span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .5s linear; }
.npBar.open .npProg span { opacity: .45; }
.npOpen { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 4px 2px; min-height: 44px; }
.npIc { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--glow, rgba(141,107,255,.2)); color: var(--accent); }
.npIc svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.npBar:not(.paused) .npIc svg { animation: npPulse 2.4s ease-in-out infinite; }
@keyframes npPulse { 50% { opacity: .45; } }
.npText { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.npKind { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.npTitle { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npTime { flex: none; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.npBtn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: transparent; }
.npBtn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.npToggle { background: var(--accent); color: var(--onAccent, #fff); }
.npToggle[hidden] { display: none; }
.npStop:hover { background: var(--line); }
html.np-on body { padding-bottom: 88px; }
html.landing .npBar { display: none !important; }
@media (max-width: 720px) {
  .npBar { bottom: calc(var(--navH, 62px) + 8px); }
  html.np-on body { padding-bottom: calc(var(--navH, 62px) + 80px); }
  .npTime { display: none; }
}

/* =====================================================================
   Sanctuary (Nov 2026): paper and gold leaf, golden-ratio rhythm, the moon,
   the sandhyas, a threshold, sacred geometry used as structure.
   ===================================================================== */
:root {
  /* Spacing follows the Fibonacci / golden-ratio series. */
  --s1: 8px; --s2: 13px; --s3: 21px; --s4: 34px; --s5: 55px;
  --seed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='.55'%3E%3Ccircle cx='50' cy='50' r='16'/%3E%3Ccircle cx='50' cy='34' r='16'/%3E%3Ccircle cx='50' cy='66' r='16'/%3E%3Ccircle cx='63.86' cy='42' r='16'/%3E%3Ccircle cx='63.86' cy='58' r='16'/%3E%3Ccircle cx='36.14' cy='42' r='16'/%3E%3Ccircle cx='36.14' cy='58' r='16'/%3E%3Ccircle cx='50' cy='50' r='32'/%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3C/svg%3E");
  --yantra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='.45'%3E%3Ccircle cx='50' cy='50' r='47'/%3E%3Ccircle cx='50' cy='50' r='42'/%3E%3Cpath d='M50 13L83 70H17Z M50 87L17 30H83Z M50 25L72 63H28Z M50 75L28 37H72Z M50 36L62 57H38Z'/%3E%3Ccircle cx='50' cy='50' r='2.2' fill='black'/%3E%3C/svg%3E");
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20'%3E%3Cpath d='M0 10H62M98 10H160' stroke='black' stroke-width='.8'/%3E%3Cpath d='M80 2L88 10 80 18 72 10Z' fill='none' stroke='black' stroke-width='.9'/%3E%3Ccircle cx='80' cy='10' r='2'/%3E%3Ccircle cx='67' cy='10' r='1.2'/%3E%3Ccircle cx='93' cy='10' r='1.2'/%3E%3C/svg%3E");
}
/* Handmade-paper grain under every translucent surface (never over text). */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--paperOp, .05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .25 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Gold leaf: the primary action is gold with ink lettering, lit from within. */
.primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 18px color-mix(in srgb, var(--accent) 22%, transparent); }
.primary:hover { filter: brightness(1.06); }
.sigil { box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }
.tab.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }

/* Quieter rhythm: more silence between things. */
main { padding: var(--s3) var(--s2) var(--s4); }
.homeHead { position: relative; margin-bottom: var(--s3); padding-top: var(--s2); }
.homeHead h2 { letter-spacing: .005em; }
.homeHead .streak { display: none; }
.homeH { margin: var(--s4) 0 var(--s2); }
.transmission { margin-bottom: var(--s4); padding: var(--s3) var(--s3) var(--s2); }
.transmission .body { font-family: "Cormorant Garamond", serif; font-size: 1.32rem; line-height: 1.5; }
.mood { margin: var(--s3) 0 0; }
.pathHome, .continue { margin-bottom: var(--s3); }

/* Sacred geometry as a faint watermark behind the greeting. */
.homeHead::before { content: ""; position: absolute; z-index: -1; right: 0; top: -40px; width: 230px; height: 230px; pointer-events: none;
  background: var(--accent); -webkit-mask: var(--seed) center / contain no-repeat; mask: var(--seed) center / contain no-repeat; opacity: .13; }

/* Ornamental divider: line, bindu, line. */
.ornament { width: 160px; height: 20px; margin: var(--s4) auto 0; background: var(--accent); opacity: .55;
  -webkit-mask: var(--ornament) center / contain no-repeat; mask: var(--ornament) center / contain no-repeat; }

/* The moon replaces the weekday streak. */
.moonCard { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); margin: 0 0 var(--s3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.moonCard:empty { display: none; }
.moonArt { flex: none; width: 112px; height: 112px; }
.moonSvg { width: 100%; height: 100%; display: block; overflow: visible; }
.mOrbit { fill: none; stroke: var(--line); stroke-width: .8; }
.mDot { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
.mDot.future { opacity: .45; }
.mDot.on { fill: var(--accent); filter: drop-shadow(0 0 2.5px var(--accent)); }
.mDot.today { stroke: var(--accent); stroke-width: 1; fill-opacity: .9; }
.mDark { fill: color-mix(in srgb, var(--ink) 9%, var(--bg)); stroke: color-mix(in srgb, var(--ink) 16%, transparent); stroke-width: .6; }
.mLit { fill: #f4e8c8; filter: drop-shadow(0 0 6px rgba(244,232,200,.55)); }
:root[data-palette="temple"] .mLit { fill: #e9c97c; filter: none; }
.moonText .eyebrow { margin-bottom: 4px; }
.moonText p { margin: 2px 0; }
.moonText b { color: var(--accent); font-weight: 600; }
@media (max-width: 480px) { .moonCard { gap: var(--s2); padding: var(--s2); } .moonArt { width: 92px; height: 92px; } }

/* A quiet dot for what's new. */
.tab { position: relative; }
.tab.hasNew::after { content: ""; position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* The sky follows the sandhyas. */
:root[data-sandhya="brahma"] .aurora i:nth-child(2), :root[data-sandhya="dawn"] .aurora i:nth-child(2) { background: #e98f6f; opacity: .22; }
:root[data-sandhya="noon"] .aurora i:nth-child(2) { opacity: .24; }
:root[data-sandhya="dusk"] .aurora i:nth-child(2) { background: #e3913f; opacity: .26; }
:root[data-sandhya="night"] .aurora i:nth-child(1), :root[data-sandhya="evening"] .aurora i:nth-child(1) { opacity: .3; }

/* The threshold: a brief opening once a day. */
html.th-on body { overflow: hidden; }
.threshold { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s4) var(--s3); cursor: pointer;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 16%, var(--bg)) 0%, var(--bg) 58%); transition: opacity .9s ease; }
.threshold.out { opacity: 0; pointer-events: none; }
.thInner { max-width: 520px; text-align: center; }
.thFlame { width: 96px; height: 96px; border-radius: 50%; animation: thKindle 2.2s ease-out both; }
.thVerse { font-family: "Cormorant Garamond", serif; font-size: clamp(1.45rem, 4.4vw, 2rem); line-height: 1.3; margin: var(--s3) 0 var(--s1); animation: thRise 1.4s .7s ease-out both; }
.thSrc { text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: var(--accent); margin: 0; animation: thRise 1.4s 1.1s ease-out both; }
.thSkip { margin-top: var(--s4); background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 6px 18px; font-size: .82rem; animation: thRise 1s 1.6s ease-out both; }
@keyframes thKindle { from { filter: brightness(.25) saturate(.4); transform: scale(.9); box-shadow: 0 0 0 transparent; }
  to { filter: brightness(1.08); transform: scale(1); box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 55%, transparent); } }
@keyframes thRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .thFlame, .thVerse, .thSrc, .thSkip { animation: none; } }

/* The breathing orb carries the Seed of Life. */
.breathOrb { position: relative; }
.breathOrb::before { content: ""; position: absolute; inset: 6%; pointer-events: none; background: var(--onAccent); opacity: .35;
  -webkit-mask: var(--seed) center / contain no-repeat; mask: var(--seed) center / contain no-repeat; }

/* Decorative watermarks never widen the page on phones. */
html, body { overflow-x: clip; }
@media (max-width: 720px) { .tab.hasNew::after { top: 8px; right: calc(50% - 20px); } }

/* =====================================================================
   Shining gold (matches the logo): every gold accent becomes metallic,
   with bright champagne highlights, bronze shadows and a slow sheen.
   --shine  follows --accent  (gold in all four themes).
   --shine2 follows --accent2 (pale gold in Night Sky; elsewhere it stays the theme's flat second colour).
   ===================================================================== */
:root {
  /* Dawn Parchment (light): deep antique gold, so white lettering on buttons stays readable. */
  --shine: linear-gradient(110deg, #6a430b 0%, #a87a24 22%, #d2a94f 32%, #96691a 46%, #6f480e 64%, #b38530 84%, #7a5212 100%);
  --shine2: linear-gradient(var(--accent2), var(--accent2));
  --shineGlow: rgba(176, 127, 34, .28);
  --shineEdge: inset 0 1px 0 rgba(255, 238, 190, .45), inset 0 -1px 0 rgba(70, 40, 6, .35), 0 4px 16px rgba(138, 90, 18, .22);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --shine: linear-gradient(110deg, #a8741f 0%, #f4d27f 18%, #fff6d2 28%, #e9bb57 40%, #a87428 58%, #f6d888 76%, #fff1c4 84%, #b8862f 100%);
  --shine2: linear-gradient(110deg, #b98f3e 0%, #efd08a 20%, #fbecc4 30%, #e2c07a 44%, #b38a3c 62%, #ecd093 82%, #c39d52 100%);
  --shineGlow: rgba(240, 196, 108, .42);
  --shineEdge: inset 0 1px 0 rgba(255, 250, 225, .6), inset 0 -1px 0 rgba(110, 70, 12, .45), 0 4px 20px rgba(226, 182, 94, .3); } }
:root[data-theme="dark"],
:root[data-palette="sanctum"], :root[data-palette="psychedelic"], :root[data-palette="mandala"], :root[data-palette="royal"],
:root[data-palette="oracle"], :root[data-palette="ember"] {
  --shine: linear-gradient(110deg, #a8741f 0%, #f4d27f 18%, #fff6d2 28%, #e9bb57 40%, #a87428 58%, #f6d888 76%, #fff1c4 84%, #b8862f 100%);
  --shine2: linear-gradient(110deg, #b98f3e 0%, #efd08a 20%, #fbecc4 30%, #e2c07a 44%, #b38a3c 62%, #ecd093 82%, #c39d52 100%);
  --shineGlow: rgba(240, 196, 108, .42);
  --shineEdge: inset 0 1px 0 rgba(255, 250, 225, .6), inset 0 -1px 0 rgba(110, 70, 12, .45), 0 4px 20px rgba(226, 182, 94, .3); }
/* Forest Temple and Lapis: same bright gold leaf; their second colour (moss, lapis blue) stays flat. */
:root[data-palette="heart"], :root[data-palette="celestial"], :root[data-palette="thirdeye"], :root[data-palette="moonlit"] {
  --shine: linear-gradient(110deg, #a8741f 0%, #f4d27f 18%, #fff6d2 28%, #e9bb57 40%, #a87428 58%, #f6d888 76%, #fff1c4 84%, #b8862f 100%);
  --shine2: linear-gradient(var(--accent2), var(--accent2));
  --shineGlow: rgba(240, 196, 108, .4);
  --shineEdge: inset 0 1px 0 rgba(255, 250, 225, .6), inset 0 -1px 0 rgba(110, 70, 12, .45), 0 4px 20px rgba(226, 182, 94, .28); }
/* Dawn Parchment chosen explicitly (wins over a dark system setting). */
:root[data-theme="light"], :root[data-palette="temple"], :root[data-palette="lotus"], :root[data-palette="sage"] {
  --shine: linear-gradient(110deg, #6a430b 0%, #a87a24 22%, #d2a94f 32%, #96691a 46%, #6f480e 64%, #b38530 84%, #7a5212 100%);
  --shine2: linear-gradient(var(--accent2), var(--accent2));
  --shineGlow: rgba(176, 127, 34, .28);
  --shineEdge: inset 0 1px 0 rgba(255, 238, 190, .45), inset 0 -1px 0 rgba(70, 40, 6, .35), 0 4px 16px rgba(138, 90, 18, .22); }
@keyframes goldSheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Gold-leaf fills: buttons, active tabs and chips, the play button. */
:root :is(.primary, .chip.active, .hypSteps span.now, .hypModes button.active, .segRow button.on, .demoTabs button.active, .npToggle, .scrollHint) {
  background: var(--shine); background-size: 260% 100%; box-shadow: var(--shineEdge); animation: goldSheen 9s ease-in-out infinite;
}
:root[data-theme="light"] .primary, :root[data-palette="temple"] .primary, :root[data-palette="lotus"] .primary, :root[data-palette="sage"] .primary { text-shadow: 0 1px 1px rgba(40, 22, 2, .45); }
@media (prefers-color-scheme: light) { :root:not([data-palette]):not([data-theme="dark"]) .primary { text-shadow: 0 1px 1px rgba(40, 22, 2, .45); } }
:root .tab.hasNew::after { background: var(--shine); box-shadow: 0 0 8px var(--shineGlow); }
/* Ornament divider and the sacred-geometry watermark are masked shapes: fill them with the metal. */
:root .ornament, :root .homeHead::before { background: var(--shine); background-size: 260% 100%; animation: goldSheen 12s ease-in-out infinite; }

/* Secondary gold fills (pale gold in Night Sky; the theme's own colour elsewhere). */
:root :is(.adminBtn, .lockTag, .planBadge, .libBadge.paid, .pStep.done .psN, .heat i.on, .obDots i.on, .chatOptsBtn .dot) {
  background: var(--shine2); background-size: 260% 100%; animation: goldSheen 9s ease-in-out infinite;
}

/* Gold lettering. */
.thSrc, .moonText b, .hsLayers b, .goldText {
  background-image: var(--shine); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: goldSheen 9s ease-in-out infinite;
}
.transmission .label, .card .l, .hsClock, .threadsLabel, .acctTier, .paletteMenu .pmTitle, .account.premium::before,
.eyebrow, .stats b, .faq summary::after, .contText .label, .slTrial b, .pcText .label, .obRec .label, .cmp thead th, .tcMeta {
  background-image: var(--shine2); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: goldSheen 9s ease-in-out infinite;
}
.thSrc { animation: thRise 1.4s 1.1s ease-out both, goldSheen 9s 2.5s ease-in-out infinite; }

/* Gold outlines and gold-coloured icons can't take a gradient, so they glow softly instead. */
:root :is(.plan.featured, .paywall, .pathCard.rec) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 30px var(--shineGlow); }
:root :is(.mDot.on, .ring .ringFill, .constellation line.lit, .smTitle .ic, .quickBtn .ic, .toneIc, .sTile svg, .paywallIcon, .streak.lit .ic) { filter: drop-shadow(0 0 4px var(--shineGlow)); }
.sigil { box-shadow: 0 0 16px var(--shineGlow); }

@media (prefers-reduced-motion: reduce) {
  :root :is(.primary, .chip.active, .hypSteps span.now, .hypModes button.active, .segRow button.on, .demoTabs button.active, .npToggle, .scrollHint,
    .ornament, .homeHead::before, .adminBtn, .lockTag, .planBadge, .libBadge.paid, .pStep.done .psN, .heat i.on, .obDots i.on, .chatOptsBtn .dot),
  .moonText b, .hsLayers b, .goldText, .transmission .label, .card .l, .hsClock, .threadsLabel, .acctTier, .paletteMenu .pmTitle, .account.premium::before,
  .eyebrow, .stats b, .faq summary::after, .contText .label, .slTrial b, .pcText .label, .obRec .label, .cmp thead th, .tcMeta { animation: none; }
  .thSrc { animation: none; }
}