/* Spirit-Led Gratitude app
   Two looks on purpose: the story (start, video, lesson, end) is dark, gold and bone like Rick's lyric videos;
   the menu and Dwell are warm cream and gold like his existing song player. */
:root {
  --ink: #0c0b09;          /* story black */
  --panel: #16140f;
  --bone: #eee7d8;         /* reading text on dark */
  --soft: #d9cfb9;         /* inner thoughts on dark */
  --mute: #a59c88;
  --gold: #c9a24a;         /* brand gold */
  --gold-hi: #e6c97f;      /* gold on dark */
  --gold-deep: #9a7524;    /* gold on cream */
  --cream: #f5efe3;        /* menu and Dwell paper */
  --card: #fbf8f1;
  --brown: #2a2418;        /* text on cream */
  --brown-soft: #6f6450;
  --line-dark: rgba(238, 231, 216, .14);
  --line-light: rgba(42, 36, 24, .12);
  --display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --body: "EB Garamond", Garamond, "Times New Roman", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--body); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app { position: fixed; inset: 0; overflow: hidden; }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- top bar used on dark screens ---------- */
.bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(10px + var(--safe-t)) max(14px, var(--safe-r)) 8px max(14px, var(--safe-l)); }
.bar .pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px;
  background: rgba(12, 11, 9, .45); border: 1px solid rgba(230, 201, 127, .35); font-family: var(--ui); font-size: 13px; color: var(--bone);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bar .pill .icon { width: 17px; height: 17px; }

/* ---------- start and end screens ---------- */
.cover-view { background: #000; }
.cover-view .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-view .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.05) 60%, rgba(0,0,0,.6) 100%); }
.cover { position: relative; z-index: 2; flex: 1; display: grid; grid-template-rows: auto 1fr auto; text-align: center;
  padding: 6px max(24px, var(--safe-r)) calc(36px + var(--safe-b)) max(24px, var(--safe-l)); }
.series { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .32em; color: var(--gold-hi); text-shadow: 0 1px 12px rgba(0,0,0,.7); padding-left: .32em; }
.dayno { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 11vw, 52px); letter-spacing: .06em; margin-top: 8px; line-height: 1; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.daytitle { font-style: italic; font-size: clamp(21px, 6vw, 26px); margin-top: 8px; text-wrap: balance; text-shadow: 0 1px 14px rgba(0,0,0,.8); }
.playwrap { align-self: center; justify-self: center; display: grid; justify-items: center; gap: 12px; }
.play { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: rgba(12,11,9,.42);
  border: 1.5px solid var(--gold-hi); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 10px rgba(230,201,127,.12); transition: transform .2s ease, box-shadow .2s ease; }
.play:hover, .play:active { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(230,201,127,.18); }
.play svg { width: 32px; height: 32px; margin-left: 5px; fill: var(--gold-hi); }
.playlabel { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .3em; padding-left: .3em; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.coverfoot { display: grid; gap: 10px; justify-items: center; }
.coverfoot .songname { font-size: 18px; font-style: italic; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.coverfoot small { display: block; font-family: var(--display); font-style: normal; font-size: 10px; letter-spacing: .28em; color: var(--gold-hi); margin-bottom: 4px; }
.textlink { font-family: var(--ui); font-size: 13px; color: var(--bone); opacity: .85; text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 1px 8px rgba(0,0,0,.9); padding: 8px; }

/* ---------- video overlay ---------- */
.video-view { background: #000; }
.video-stage { flex: 1; display: grid; place-items: center; padding: 16px max(16px, var(--safe-r)) calc(24px + var(--safe-b)) max(16px, var(--safe-l)); }
.frame { width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.frame.tall { aspect-ratio: 9 / 16; width: auto; height: min(100%, calc(100svh - 120px)); max-width: 100%; }
.frame iframe, .frame > div { width: 100%; height: 100%; border: 0; display: block; }
.vfallback { width: 100%; max-width: 520px; text-align: center; display: grid; gap: 16px; justify-items: center; }
.vfallback h2 { font-family: var(--display); font-size: 15px; letter-spacing: .2em; color: var(--gold-hi); margin: 0; font-weight: 600; }
.vfallback p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--soft); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 24px;
  font-family: var(--ui); font-size: 15px; font-weight: 600; text-decoration: none; }
.btn-gold { background: var(--gold); color: #1b1407; }
.btn-ghost { border: 1px solid rgba(230,201,127,.55); color: var(--bone); }

/* ---------- lesson reader ---------- */
.lesson-view { background: var(--ink); }
.lesson-view .bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(18px) brightness(.36) saturate(.85); }
.lesson-view .over { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .6s ease; }
.lesson-view .over::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,11,9,.82) 0%, rgba(12,11,9,.7) 45%, rgba(12,11,9,.55) 100%); }
.lesson-view .over.on { opacity: 1; }
.lesson-view .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,11,9,.45), rgba(12,11,9,.15) 40%, rgba(12,11,9,.65)); }
.prog { position: relative; z-index: 5; height: 2px; margin: 0 max(16px, var(--safe-r)) 0 max(16px, var(--safe-l)); background: var(--line-dark); border-radius: 2px; overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .35s ease; }
.lmeta { position: relative; z-index: 5; display: flex; justify-content: space-between; gap: 12px; padding: 8px max(18px, var(--safe-r)) 0 max(18px, var(--safe-l));
  font-family: var(--display); font-size: 10px; letter-spacing: .22em; color: var(--mute); }
.lmeta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.reader { position: relative; z-index: 2; flex: 1; overflow: hidden; touch-action: pan-y; }
.screen { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease; pointer-events: none; visibility: hidden; }
.screen.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.screen .inner { min-height: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px;
  padding: 8vh max(26px, var(--safe-r)) 110px max(26px, var(--safe-l)); }
.screen .inner { text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.screen.center .inner { justify-content: center; padding-bottom: 140px; }
.screen.photo { overflow: hidden; }
.screen.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,11,9,.35), transparent 22%, transparent 70%, rgba(12,11,9,.7)); pointer-events: none; }
.lfoot { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 max(18px, var(--safe-r)) calc(18px + var(--safe-b)) max(18px, var(--safe-l)); pointer-events: none; }
.lfoot .hint { font-family: var(--ui); font-size: 12px; color: var(--mute); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.lfoot button { pointer-events: auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(230,201,127,.55); background: rgba(12,11,9,.5); color: var(--gold-hi); }
.lfoot .back { border-color: var(--line-dark); color: var(--mute); }
.lfoot .back[disabled] { opacity: 0; }

/* lesson text */
.b-title .ey { font-family: var(--display); font-size: 12px; letter-spacing: .3em; color: var(--gold-hi); }
.b-title h1 { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 9vw, 44px); line-height: 1.08; margin: 10px 0 0; text-wrap: balance; }
.b-title .hk { margin: 18px 0 0; font-size: 22px; font-style: italic; line-height: 1.4; color: var(--soft); text-wrap: balance; }
.b-p { font-size: 19.5px; line-height: 1.5; margin: 0; }
.b-thought { font-size: 19.5px; line-height: 1.5; font-style: italic; color: var(--soft); margin: 0; }
.b-payoff { font-size: 23px; line-height: 1.35; font-weight: 600; margin: 8px 0 0; text-wrap: balance; }
.b-note { font-family: var(--ui); font-size: 12.5px; line-height: 1.5; color: var(--mute); margin: 0; }
.b-scene { font-family: var(--display); font-weight: 600; font-size: 24px; color: var(--gold-hi); margin: 0; line-height: 1.2; text-wrap: balance; }
.b-scene::after { content: ""; display: block; width: 34px; height: 1px; background: var(--gold); margin-top: 12px; }
.b-section { font-family: var(--display); font-size: 14px; letter-spacing: .24em; color: var(--gold-hi); margin: 0; text-transform: uppercase; }
.b-deeper { margin: 0; }
.b-deeper .ey { display: block; font-family: var(--display); font-size: 11px; letter-spacing: .28em; color: var(--gold); }
.b-deeper .tt { display: block; font-family: var(--display); font-weight: 600; font-size: 23px; line-height: 1.2; margin-top: 8px; color: var(--gold-hi); text-wrap: balance; }
.b-verse { margin: 2px 0; padding-left: 16px; border-left: 2px solid var(--gold); }
.b-verse p { margin: 0; font-size: 21px; line-height: 1.45; }
.b-verse cite { display: block; margin-top: 10px; font-style: normal; font-family: var(--display); font-size: 11px; letter-spacing: .18em; color: var(--gold-hi); text-transform: uppercase; }
.b-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.b-list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 18.5px; line-height: 1.45; }
.b-list li::before { content: "✓"; color: var(--gold); font-family: var(--ui); font-size: 14px; padding-top: 4px; }
.b-list strong { color: var(--gold-hi); font-weight: 600; }
.b-main { border: 1px solid rgba(230,201,127,.6); border-radius: 12px; padding: 20px 20px 22px; background: rgba(12,11,9,.45); display: grid; gap: 12px; }
.b-main .ey { font-family: var(--display); font-size: 11px; letter-spacing: .26em; color: var(--gold-hi); text-transform: uppercase; }
.b-main .mt { font-size: 23px; line-height: 1.35; font-weight: 600; margin: 0; }
.b-main .mp { font-size: 19px; font-style: italic; color: var(--soft); margin: 0; }
.b-main .mr { font-family: var(--display); font-size: 11px; letter-spacing: .18em; color: var(--gold-hi); }
.b-try { border: 1px dashed rgba(230,201,127,.65); border-radius: 12px; padding: 18px 20px; font-size: 19.5px; line-height: 1.5; }
.b-try .ey { display: block; font-family: var(--display); font-size: 11px; letter-spacing: .28em; color: var(--gold-hi); margin-bottom: 8px; }
.b-question { font-size: 21px; font-weight: 600; line-height: 1.35; margin: 0; color: var(--gold-hi); }

/* ---------- cream pages: menu and Dwell ---------- */
.paper { background: var(--cream); color: var(--brown); color-scheme: light; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.paper .wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: calc(18px + var(--safe-t)) max(16px, var(--safe-r)) calc(40px + var(--safe-b)) max(16px, var(--safe-l)); }
.brand { text-align: center; padding: 18px 0 8px; }
.brand .s { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .42em; padding-left: .42em; color: var(--gold-deep); }
.brand .g { font-family: var(--body); font-style: italic; font-size: 54px; line-height: 1; margin-top: 4px; }
.brand p { margin: 10px 0 0; color: var(--brown-soft); font-size: 17px; font-style: italic; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 8px; }
.mbtn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 14px; font-family: var(--ui); font-weight: 600; font-size: 15px; }
.mbtn.gold { background: var(--gold); color: #1b1407; }
.mbtn.line { border: 1px solid rgba(154,117,36,.45); color: var(--brown); background: var(--card); }
.mbtn .icon { width: 19px; height: 19px; }
.sect { font-family: var(--display); font-size: 12px; letter-spacing: .26em; color: var(--gold-deep); margin: 26px 2px 10px; }
.days { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dcard { width: 100%; display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; text-align: left; padding: 10px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line-light); }
.dcard img, .dcard .ph { width: 76px; height: 96px; border-radius: 10px; object-fit: cover; background: #ddd2bd; }
.dcard .t { min-width: 0; }
.dcard .n { font-family: var(--display); font-size: 11px; letter-spacing: .24em; color: var(--gold-deep); }
.dcard .h { font-size: 21px; font-weight: 600; line-height: 1.15; margin-top: 3px; }
.dcard .k { font-size: 15px; font-style: italic; color: var(--brown-soft); margin-top: 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dcard .st { font-family: var(--ui); font-size: 11px; font-weight: 600; color: var(--gold-deep); white-space: nowrap; }
.dcard .done { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #1b1407; display: grid; place-items: center; }
.dcard .done .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.dcard[disabled] { opacity: .55; cursor: default; }
.menu-foot { text-align: center; font-size: 14px; color: var(--brown-soft); margin-top: 28px; font-style: italic; }

/* Dwell */
.dtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dtop .back { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px 0 8px; border-radius: 18px; border: 1px solid var(--line-light); background: var(--card); font-family: var(--ui); font-size: 13px; }
.dtop .back .icon { width: 18px; height: 18px; }
.dtop h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .14em; }
.dtop .spacer { width: 80px; }
.daytabs { display: flex; gap: 6px; overflow-x: auto; padding: 14px 2px 4px; scrollbar-width: none; }
.daytabs::-webkit-scrollbar { display: none; }
.daytabs button { flex: 0 0 auto; min-width: 44px; height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--line-light); background: var(--card); font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--brown-soft); }
.daytabs button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1b1407; }
.daytabs button[disabled] { opacity: .45; }
.hero { position: relative; margin-top: 12px; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 52vh; width: 100%; background: #222; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72)); }
.hero .ov { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 16px; display: grid; gap: 10px; justify-items: center; text-align: center; color: #fff; }
.hero .ov h2 { margin: 0; font-family: var(--body); font-weight: 600; font-size: clamp(26px, 8vw, 34px); line-height: 1.1; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.hero .ov .ref { font-family: var(--display); font-size: 11px; letter-spacing: .2em; color: var(--gold-hi); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.chips button { height: 32px; padding: 0 14px; border-radius: 16px; font-family: var(--ui); font-size: 12.5px; font-weight: 600; border: 1px solid rgba(255,255,255,.5); color: #fff; background: rgba(0,0,0,.25); }
.chips button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1b1407; }
.chips.light button { border-color: rgba(154,117,36,.4); color: var(--brown); background: var(--card); height: 30px; }
.chips.light button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1b1407; }
.player { padding: 14px 4px 4px; }
.np { font-size: 15px; color: var(--brown-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np b { color: var(--brown); font-weight: 600; }
.seek { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; margin-top: 8px; font-family: var(--ui); font-size: 11.5px; color: var(--brown-soft); font-variant-numeric: tabular-nums; }
.seek span:last-child { text-align: right; }
.seek input { width: 100%; accent-color: var(--gold); }
.controls { display: flex; align-items: center; justify-content: space-between; max-width: 300px; margin: 8px auto 0; }
.controls button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--brown); }
.controls button[aria-pressed="true"] { color: var(--gold-deep); background: rgba(201,162,74,.16); }
.controls .big { width: 64px; height: 64px; background: var(--gold); color: #1b1407; box-shadow: 0 6px 18px rgba(154,117,36,.35); }
.controls .big .icon { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.plist { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line-light); }
.plist li { border-bottom: 1px solid var(--line-light); }
.prow { width: 100%; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 12px 2px; text-align: left; }
.prow .th { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: #e8dfcc; display: grid; place-items: center; color: var(--gold-deep); }
.prow .th .icon { width: 22px; height: 22px; }
.prow .tx { min-width: 0; }
.prow .tt { font-size: 18px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .ss { font-family: var(--ui); font-size: 11.5px; color: var(--gold-deep); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .pb { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #ece3d1; color: var(--brown); }
.prow .pb .icon { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.plist li.cur .pb { background: var(--gold); color: #1b1407; }
.plist li.cur .tt { color: var(--gold-deep); }
.plist li.off .prow { opacity: .45; cursor: default; }
.pmore { padding: 0 2px 14px 60px; display: grid; gap: 10px; }
.pmore .vt { font-style: italic; font-size: 16px; line-height: 1.45; color: var(--brown-soft); margin: 0; }
.prayer { font-style: italic; font-size: 18px; line-height: 1.55; margin: 0; white-space: pre-line; }
.dnote { margin-top: 22px; text-align: center; font-size: 14px; font-style: italic; color: var(--brown-soft); }

/* ---------- small mini player on the menu ---------- */
.mini { position: sticky; bottom: calc(10px + var(--safe-b)); margin-top: 20px; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--brown); color: var(--cream); box-shadow: 0 10px 24px rgba(42,36,24,.25); }
.mini .mt { min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.mini .pp { background: var(--gold); color: #1b1407; }
.mini .pp .icon { fill: currentColor; stroke: none; width: 18px; height: 18px; }

@media (min-width: 700px) {
  .screen .inner { padding-top: 12vh; }
  .b-p, .b-thought { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen, .prog i, .play { transition: none; }
}

/* pictures that fail to load fall back to a warm gradient instead of a broken icon */
img.failed { visibility: hidden; }
.imgfb { background: linear-gradient(180deg, #2a2418, #0c0b09); }
.dcard .prog2 { display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: #e8dfcc; overflow: hidden; }
.dcard .prog2 i { display: block; height: 100%; background: var(--gold); }
.more-hint { position: absolute; z-index: 6; left: 50%; bottom: calc(76px + var(--safe-b)); transform: translateX(-50%); font-family: var(--ui); font-size: 12px;
  color: var(--gold-hi); background: rgba(12,11,9,.7); border: 1px solid rgba(230,201,127,.35); padding: 6px 12px; border-radius: 14px; pointer-events: none; }
.install { margin-top: 12px; width: 100%; }

/* full-screen video layer: one tap on play opens it, it closes by itself when the video ends */
.vlayer { position: fixed; inset: 0; z-index: 50; background: #000; display: none; align-items: center; justify-content: center; }
.vlayer.on { display: flex; }
.vbox { width: 100%; height: 100%; }  /* every video plays upright and fills the screen */
.vbox iframe, .vbox > div { width: 100%; height: 100%; border: 0; display: block; }
.vskip { position: absolute; top: calc(12px + var(--safe-t)); right: max(12px, var(--safe-r)); z-index: 2; height: 34px; padding: 0 14px; border-radius: 17px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.3); color: #fff; font-family: var(--ui); font-size: 13px; }
a.play { text-decoration: none; color: inherit; }

/* Wide videos on an upright phone: turn the player sideways so it fills the whole screen.
   When the phone is turned (or the screen locks to landscape) this no longer applies and it plays normally. */
}

.vnote { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; padding: 24px; }
.vnote.on { display: flex; }
.vnote-box { max-width: 320px; text-align: center; color: #eee7d8; font-family: var(--body, serif); font-size: 19px; line-height: 1.45; }
.vnote-go { margin-top: 18px; padding: 12px 28px; border-radius: 26px; border: 1px solid #e6c97f; background: none; color: #e6c97f; font-family: var(--display, serif); letter-spacing: .2em; font-size: 12px; }

/* play button position, picked per picture so it never sits on a face */
.cover { position: relative; }
.playwrap.at-top, .playwrap.at-upper, .playwrap.at-middle, .playwrap.at-lower { position: absolute; left: 50%; transform: translate(-50%, -50%); }
.playwrap.at-top { top: 27%; } .playwrap.at-upper { top: 32%; } .playwrap.at-middle { top: 50%; } .playwrap.at-lower { top: 68%; }

/* begin-the-lesson page */
.ready-view { background: #0c0b09; }
.ready-view .bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(18px) brightness(.36) saturate(.85); }
.ready-view .shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%); }
.ready { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 28px 48px; }
.ready .series { font-family: var(--display); font-size: 11px; letter-spacing: .34em; color: var(--gold-hi); }
.ready .rule { width: 56px; height: 1px; background: var(--gold-hi); opacity: .6; margin: 18px 0 26px; }
.ready .ey { font-family: var(--display); font-size: 12px; letter-spacing: .3em; color: var(--soft); }
.ready h1 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 10vw, 48px); line-height: 1.08; margin: 12px 0 0; text-wrap: balance; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.ready .hk { margin: 20px 0 0; font-size: 22px; font-style: italic; line-height: 1.4; color: var(--soft); text-wrap: balance; max-width: 30ch; }
.ready .begin { margin-top: 40px; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .22em; color: #1a1408; background: linear-gradient(180deg, #e9cf8f, #c9a45a); border: 0; border-radius: 999px; padding: 18px 34px; box-shadow: 0 8px 30px rgba(201,164,90,.35); cursor: pointer; }
.ready .begin:active { transform: scale(.97); }
.ready .rhint { margin-top: 16px; font-size: 15px; font-style: italic; color: var(--soft); opacity: .8; }
.cover > .coverfoot { grid-row: 3; align-self: end; }

/* timed lyrics in Dwell */
.lyr { position: relative; margin-top: 14px; height: 220px; overflow-y: auto; border-radius: 16px; background: #000; padding: 80px 18px; scroll-behavior: smooth; }
.lyr-in p { margin: 0; padding: 7px 0; text-align: center; font-size: 21px; line-height: 1.3; color: rgba(255,255,255,.45); transition: color .25s, transform .25s; cursor: pointer; }
.lyr-in p.past { color: rgba(255,255,255,.45); }
.lyr-in p.on { color: #fff; font-weight: 600; }

/* ===== Dwell player: dark, like Rick's mockup (Thu Nov 5, 2026) ===== */
#dwell { background: #050505; color: #f4efe6; color-scheme: dark; }
#dwell .wrap { padding-top: 0; }
#dwell .dtop { position: relative; z-index: 3; padding-top: calc(14px + var(--safe-t)); }
#dwell .dtop h1 { color: #f4efe6; }
#dwell .dtop .back { background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.22); color: #f4efe6; backdrop-filter: blur(6px); }
#dwell .daytabs { position: relative; z-index: 3; }
#dwell .daytabs button { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: rgba(244,239,230,.8); }
#dwell .daytabs button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1b1407; }
/* tall picture, edge to edge, melting into black */
#dwell .hero { margin: 10px calc(-1 * max(16px, var(--safe-l))) 0; width: auto; border-radius: 0; aspect-ratio: 4 / 5; max-height: 68vh; background: #050505; }
#dwell .hero img { object-position: center top; }
#dwell .hero::after { background: linear-gradient(180deg, transparent 82%, #050505 100%); }
#dwell .hinfo { display: grid; gap: 8px; justify-items: center; text-align: center; margin-top: 6px; }
#dwell .hinfo h2 { margin: 0; font-family: var(--body); font-weight: 600; font-size: clamp(28px, 8vw, 36px); line-height: 1.1; color: #f4efe6; }
#dwell .hinfo .ref { font-family: var(--display); font-size: 12px; letter-spacing: .22em; color: #e8b84a; min-height: 1em; }
#dwell .hinfo .chips { margin-top: 10px; }
#dwell .hero .ov { padding: 0 20px 6px; gap: 14px; }
#dwell .hero .ov h2 { font-size: clamp(26px, 7.5vw, 34px); }
/* styles as words with a gold dot */
#dwell .chips { gap: 0; flex-wrap: nowrap; }
#dwell .chips button { height: auto; padding: 4px 16px 14px; border: 0; border-left: 1px solid rgba(255,255,255,.22); border-radius: 0; background: none; color: #f4efe6; font-family: var(--display); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; position: relative; }
#dwell .chips button:first-child { border-left: 0; }
#dwell .chips button[aria-pressed="true"] { background: none; color: #e8b84a; }
#dwell .chips button[aria-pressed="true"]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #e8b84a; }
#dwell .np { display: none; }
#dwell .player { margin-top: 6px; }
#dwell .seek { color: rgba(244,239,230,.85); font-size: 13px; grid-template-columns: 44px 1fr 44px; }
#dwell .seek input { accent-color: #e8b84a; }
#dwell .controls { max-width: 330px; margin-top: 10px; }
#dwell .controls button { color: #f4efe6; }
#dwell .controls button[aria-pressed="true"] { color: #e8b84a; background: rgba(232,184,74,.14); }
#dwell .controls .big { width: 66px; height: 66px; background: transparent; color: #e8b84a; border: 2.5px solid #e8b84a; box-shadow: 0 0 22px rgba(232,184,74,.35); }
/* lyrics: no box, room to breathe; the sung line in gold italic */
#dwell .lyr { background: none; border-radius: 0; height: 250px; margin-top: 18px; padding: 95px 6px; }
#dwell .lyr-in p { font-size: 24px; line-height: 1.3; padding: 6px 0; color: rgba(244,239,230,.92); font-family: var(--body); }
#dwell .lyr-in p.past { color: rgba(244,239,230,.32); }
#dwell .lyr-in p.on { color: #e8b84a; font-style: italic; font-weight: 600; font-size: 27px; }
/* PLAYLIST with gold lines */
#dwell .pldiv { display: flex; align-items: center; gap: 16px; margin: 34px 0 18px; }
#dwell .pldiv::before, #dwell .pldiv::after { content: ""; flex: 1; height: 1.5px; background: linear-gradient(90deg, transparent, #c9973e); }
#dwell .pldiv::after { background: linear-gradient(90deg, #c9973e, transparent); }
#dwell .pldiv span { font-family: var(--display); font-size: 15px; letter-spacing: .28em; color: #f4efe6; }
/* roomy rows */
#dwell .plist { border-top: 0; display: grid; gap: 14px; margin: 0; }
#dwell .plist li { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: #0e0d0b; overflow: hidden; }
#dwell .plist li.cur { border-color: #c9973e; background: linear-gradient(90deg, rgba(201,151,62,.16), rgba(201,151,62,.04)); }
#dwell .prow { grid-template-columns: 30px 112px 1fr auto; gap: 14px; padding: 14px 16px 14px 14px; color: #f4efe6; }
#dwell .prow .pb { width: 30px; height: 30px; background: none; color: #f4efe6; }
#dwell .prow .pb .icon { width: 22px; height: 22px; }
#dwell .plist li.cur .pb { background: none; color: #e8b84a; }
#dwell .prow .th { width: 112px; height: 72px; border-radius: 10px; background: #1c1a16; color: #e8b84a; }
#dwell .prow .tt { font-size: 21px; color: #f4efe6; }
#dwell .plist li.cur .tt { color: #f4efe6; }
#dwell .prow .ss { font-family: var(--body); font-size: 16px; color: rgba(244,239,230,.75); margin-top: 4px; }
#dwell .prow .du { font-family: var(--body); font-size: 18px; color: rgba(244,239,230,.85); font-variant-numeric: tabular-nums; }
#dwell .plist li.off .prow { opacity: .4; }
#dwell .pmore { padding: 0 16px 14px; }
#dwell .pmore .vt { color: rgba(244,239,230,.7); }
#dwell .prayer { color: rgba(244,239,230,.9); }
@media (max-width: 380px) { #dwell .prow { grid-template-columns: 26px 88px 1fr auto; gap: 10px; } #dwell .prow .th { width: 88px; height: 58px; } #dwell .prow .tt { font-size: 18px; } #dwell .chips button { padding: 4px 11px 14px; font-size: 13px; } }
#dwell .chips button { padding-left: 12px; padding-right: 12px; }

#dwell .controls .big.loading { animation: spinring 1s linear infinite; border-color: rgba(232,184,74,.35); border-top-color: #e8b84a; }
#dwell .controls .big.loading .icon { animation: spinring 1s linear infinite reverse; }
@keyframes spinring { to { transform: rotate(360deg); } }
#dwell .seek span:first-child { white-space: nowrap; }
#dwell .seek { grid-template-columns: 70px 1fr 44px; }

/* lesson: same soft dark fade over every page, pictures included */
.screen.photo::after { background: linear-gradient(180deg, rgba(12,11,9,.82) 0%, rgba(12,11,9,.7) 45%, rgba(12,11,9,.55) 100%); }
/* music on/off, upper left next to Menu */
.bar .barl { display: inline-flex; gap: 8px; align-items: center; }
.pill.bgm { width: 44px; padding: 0; justify-content: center; position: relative; }
.pill.bgm .icon { margin: 0; }
.pill.bgm .x { display: none; position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: currentColor; transform: rotate(-40deg); border-radius: 2px; }
.pill.bgm.off { opacity: .7; }
.pill.bgm.off .x { display: block; }
#dwell .hinfo h2:empty { display: none; }

/* ===== lesson scenes (Fri Nov 6, 2026): picture low on the screen, words in the sky above it ===== */
.lesson-view .over { background: none; }
.lesson-view .over::after { background: linear-gradient(180deg, rgba(8,8,8,.62) 0%, rgba(8,8,8,.38) 30%, rgba(8,8,8,0) 52%); }
.lesson-view .over .sb { position: absolute; inset: -50px; background-size: cover; background-position: center top; filter: blur(26px) brightness(.62) saturate(.9); }
.lesson-view .over .sp { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 64%; object-fit: cover; object-position: center 55%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%); mask-image: linear-gradient(180deg, transparent 0%, #000 10%); }
.lesson-view .shade { display: none; }
.screen .inner { padding-top: 4vh; justify-content: flex-start; }
.screen.center .inner { justify-content: flex-start; padding-top: 10vh; }
.screen .inner { text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 2px 18px rgba(0,0,0,.55); }

/* Dwell tightened up (Rick's Photoshop mockup, Fri Nov 6, 2026): player rides up onto the faded bottom of the picture */
#dwell .hero::after { background: linear-gradient(180deg, transparent 62%, rgba(5,5,5,.75) 86%, #050505 100%); }
#dwell .hinfo { position: relative; z-index: 2; margin-top: -78px; gap: 4px; }
#dwell .hinfo .ref:empty { display: none; }
#dwell .hinfo .chips { margin-top: 0; }
#dwell .player { margin-top: 2px; }
#dwell .seek { margin-top: 4px; }
#dwell .controls { margin-top: 4px; }
#dwell .lyr { margin-top: 8px; }
#dwell .lyr[hidden] + .pldiv, #dwell .pldiv { margin: 18px 0 14px; }
#dwell .player { position: relative; z-index: 2; }
#dwell .hero { margin-bottom: 0; }
#dwell .hero::after { background: linear-gradient(180deg, transparent 55%, rgba(5,5,5,.55) 75%, rgba(5,5,5,.92) 90%, #050505 97%); }
/* lyrics start right under the controls; the sung line stays near the top */
#dwell .lyr { margin-top: 0; padding: 14px 6px 170px; }
#dwell .plist { margin-top: 22px; }
/* Fri Nov 6, 2026: only previous · play · next; thin, quiet time bar */
#dwell #cBack, #dwell #cRep { display: none; }
#dwell .controls { justify-content: center; gap: 44px; }
#dwell .seek { font-size: 11px; color: rgba(244,239,230,.55); grid-template-columns: 52px 1fr 52px; }
#dwell .seek span:last-child { text-align: right; }
#dwell .seek input { -webkit-appearance: none; appearance: none; height: 2px; background: linear-gradient(90deg, rgba(232,184,74,.85) var(--p, 0%), rgba(255,255,255,.18) var(--p, 0%)); border-radius: 2px; outline: none; }
#dwell .seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #e8b84a; border: 0; }
#dwell .seek input::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #e8b84a; border: 0; }
#dwell .seek input::-moz-range-track { height: 2px; background: transparent; }

/* Fri Nov 6, 2026 — lesson pictures fill the screen, words sit in the open sky above the person, no filter */
.lesson-view .over .fp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.lesson-view .over .dk { position: absolute; inset: 0; background: #0c0b09; }
.lesson-view .over:has(.fp)::after, .lesson-view .over:has(.dk)::after { display: none; }
.screen.sky .inner { min-height: 0; max-height: var(--zone); padding-top: 2vh; padding-bottom: 0; justify-content: flex-start; gap: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.35); }
.screen.sky.center .inner { justify-content: center; min-height: var(--zone); }
.screen.sky.ink-dark .inner { color: #12202c; text-shadow: 0 0 10px rgba(255,255,255,.55); }
.screen.sky.ink-dark .inner .b-scene, .screen.sky.ink-dark .inner h2, .screen.sky.ink-dark .inner h3 { color: #7a4f0e; }
.screen.sky.ink-dark .inner em, .screen.sky.ink-dark .inner .b-thought { color: #1d3346; }
/* readable words on the picture: a soft glow around the letters only (no filter over the picture) */
.screen.sky .inner { text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 8px rgba(0,0,0,.55), 0 0 22px rgba(0,0,0,.35); }
.screen.sky.ink-dark .inner, .screen.sky.ink-dark .inner * { color: #10202c; text-shadow: 0 0 2px rgba(255,255,255,.9), 0 0 9px rgba(255,255,255,.8), 0 0 22px rgba(255,255,255,.55); }
.screen.sky.ink-dark .inner .b-scene, .screen.sky.ink-dark .inner .b-section, .screen.sky.ink-dark .inner .b-deeper .tt,
.screen.sky.ink-dark .inner .ey, .screen.sky.ink-dark .inner .mr, .screen.sky.ink-dark .inner cite,
.screen.sky.ink-dark .inner .b-list strong, .screen.sky.ink-dark .inner .b-question { color: #6e440a; }
.screen.sky.ink-dark .inner .b-scene::after { background: #6e440a; }
.screen.sky .inner .b-main { background: rgba(12,11,9,.55); }
.screen.sky.ink-dark .inner .b-main, .screen.sky.ink-dark .inner .b-main * { color: #f4efe6; text-shadow: none; }
.screen.sky.ink-dark .inner .b-main .ey, .screen.sky.ink-dark .inner .b-main .mr { color: #e6c97f; }
/* picture always fills the full width; on shorter phones the bottom of the picture is trimmed instead of leaving a black strip */
#dwell .hero { aspect-ratio: auto; width: auto; height: min(125vw, 68vh); max-height: none; }
#dwell .hero img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Sat Nov 7, 2026 — Dwell picture runs from the very top of the screen; only a small Menu button floats over it (no DWELL title, no Lesson button) */
#dwell .dtop { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding: calc(10px + var(--safe-t)) max(14px, var(--safe-r)) 0 max(14px, var(--safe-l)); display: flex; justify-content: flex-start; pointer-events: none; }
#dwell .dtop h1, #dwell .dtop [data-act="lesson"] { display: none; }
#dwell .dtop .back { pointer-events: auto; }
#dwell .hero { margin-top: 0; height: min(125vw, 74vh); }
/* Sat Nov 7, 2026 — Dwell is the prayer: its words sit under the controls; the item shown up top is not repeated in the list */
#dwell .ptxt { margin: 10px 4px 0; }
#dwell .ptxt .prayer { margin: 0; text-align: center; font-family: var(--body); font-style: italic; font-size: 21px; line-height: 1.45; color: rgba(244,239,230,.92); }
#dwell .plist li[hidden] { display: none !important; }

/* v51 Mon Nov 9 2026: lesson reader — black text, bigger, cleaner bar */
.lesson-view .lbar{justify-content:space-between;padding-top:max(10px,env(safe-area-inset-top))}
.lesson-view .lico{background:none;border:0;width:44px;height:44px;display:grid;place-items:center;color:#111;padding:0;position:relative;filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
.lesson-view .lico .icon{width:30px;height:30px;stroke:#111;stroke-width:2.6}
.lesson-view .lico.bgm .icon{fill:#111}
.lesson-view .lico.bgm .x{display:none}
.lesson-view .lico.bgm.off .x{display:block}
.lesson-view .lfoot,.lesson-view .lmeta{display:none}
.lesson-view .screen .inner .b-p,.lesson-view .screen .inner p{font-size:22px;line-height:1.48}
.lesson-view .screen .inner .b-scene{font-size:25px}
.lesson-view .screen .inner .b-verse p{font-size:23px}
.lesson-view .screen .inner .b-list li{font-size:21px}
.lesson-view .screen .inner .b-payoff{font-size:25px}
.lesson-view .screen .inner .b-question{font-size:23px}
.screen.sky.ink-dark .inner,.screen.sky.ink-dark .inner *{color:#111}
.welcome{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-top:8px}
.welcome .wl{font-size:30px;font-weight:700;letter-spacing:.01em}
.welcome .wt{font-size:24px;font-weight:600;margin:0;line-height:1.25}
.welcome .wgo{display:flex;flex-direction:column;align-items:center;font-size:20px;font-weight:600;margin-top:10px}
.welcome .warr .icon{width:64px;height:64px;stroke-width:2.8;animation:wpulse 1.4s ease-in-out infinite}
@keyframes wpulse{0%,100%{transform:translateY(6px) scale(1);opacity:.6}50%{transform:translateY(-8px) scale(1.15);opacity:1}}
.lesson-view .lico.bgm .x{position:absolute;left:9px;right:9px;top:50%;height:2.5px;background:#111;transform:rotate(-40deg);border-radius:2px}
.lesson-view .lico.bgm.off .x{display:block}
/* soft wash behind the words so they read on any picture */
.screen.sky::before{content:'';position:absolute;left:0;right:0;top:-70px;height:calc(var(--zone) + 150px);pointer-events:none;z-index:0;
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.42) 65%,rgba(0,0,0,0))}
.screen.sky.ink-dark::before{background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.4) 65%,rgba(255,255,255,0))}
.screen.sky .inner{position:relative;z-index:1}
.lesson-view::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--rtop,0px);z-index:4;pointer-events:none;background:transparent;transition:background .45s}
.lesson-view.wash::before{background:rgba(0,0,0,.5)}
.lesson-view.wash.wash-light::before{background:rgba(255,255,255,.5)}
.lesson-view.wash:not(.wash-light) .lico .icon{stroke:#fff}
.lesson-view.wash:not(.wash-light) .lico.bgm .icon{fill:#fff}
.lesson-view.wash:not(.wash-light) .lico{filter:none}
/* v52: clean music note, crisp text, progress line at the very bottom */
.lesson-view .lico{filter:none}
.lesson-view .lico .note2{width:30px;height:30px}
.lesson-view .lico .note2 .st{fill:none;stroke:#111;stroke-width:1.8;stroke-linecap:round}
.lesson-view .lico .note2 .bm,.lesson-view .lico .note2 .hd{fill:#111;stroke:none}
.lesson-view.wash:not(.wash-light) .lico .note2 .st{stroke:#fff}
.lesson-view.wash:not(.wash-light) .lico .note2 .bm,.lesson-view.wash:not(.wash-light) .lico .note2 .hd{fill:#fff}
.lesson-view .lico.bgm .icon.note2{fill:none}
.screen.sky.ink-dark .inner,.screen.sky.ink-dark .inner *{text-shadow:none}
.screen.sky:not(.ink-dark) .inner,.screen.sky:not(.ink-dark) .inner *{text-shadow:0 1px 2px rgba(0,0,0,.5)}
.lesson-view .prog{position:absolute;left:0;right:0;bottom:0;top:auto;margin:0;height:3px;border-radius:0;z-index:6;background:rgba(255,255,255,.18)}
.lesson-view .prog i{opacity:.8}
/* welcome page: brand logo on a clean dark page */
.welcome{gap:10px;padding-top:0}
.welcome .sprout{width:92px;height:100px;fill:none;stroke:var(--gold-hi,#e6c97f);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.welcome .brand1{font-family:var(--display);font-size:15px;letter-spacing:.42em;padding-left:.42em;color:var(--gold-hi,#e6c97f)}
.welcome .brand2{font-family:var(--body);font-style:italic;font-size:44px;line-height:1;color:var(--bone,#f4efe6);margin-bottom:26px}
.welcome .wl{font-size:24px;font-weight:500;color:var(--bone,#f4efe6)}
.welcome .wt{font-family:var(--display);font-size:22px;letter-spacing:.08em;color:var(--gold-hi,#e6c97f)}
.welcome .wgo{color:var(--bone,#f4efe6);margin-top:30px;font-size:18px}
.welcome .warr .icon{stroke:var(--gold-hi,#e6c97f)}
/* icons: white on dark pages, black on light skies */
.lesson-view:not(.wash-light) .lico .icon{stroke:#f4efe6}
.lesson-view:not(.wash-light) .lico .note2 .st{stroke:#f4efe6}
.lesson-view:not(.wash-light) .lico .note2 .bm,.lesson-view:not(.wash-light) .lico .note2 .hd{fill:#f4efe6}
.welcome,.welcome *{text-shadow:none!important}
.welcome .brand2{margin-bottom:18px}.welcome .wgo{margin-top:22px}
/* welcome page back on the lesson picture (logo lives on the home page) */
.welcome .wl{font-family:var(--body);font-style:normal;font-size:30px;font-weight:600;color:inherit}
.welcome .wt{font-family:var(--body);font-size:24px;letter-spacing:0;color:inherit}
.welcome .wgo{color:inherit;margin-top:16px;font-size:20px}
.welcome .warr .icon{stroke:currentColor}
/* v54: one smooth wash from the very top of the screen, no band or line */
.screen.sky::before{display:none}
.lesson-view::before{height:var(--wash,0px);z-index:1;transition:opacity .45s;opacity:0;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.4) 60%,rgba(0,0,0,0))}
.lesson-view.wash::before{opacity:1;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.4) 60%,rgba(0,0,0,0))}
.lesson-view.wash.wash-light::before{background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.4) 60%,rgba(255,255,255,0))}
/* full black text pages: fill the screen top to bottom, no scrolling */
.screen.full .inner{padding-top:3vh;padding-bottom:34px;justify-content:flex-start}
/* v55: no wash at all — picture runs edge to edge; crisp shadow keeps words readable */
.lesson-view::before,.lesson-view.wash::before,.screen.sky::before{display:none!important;background:none!important}
.screen.sky.ink-dark .inner,.screen.sky.ink-dark .inner *{text-shadow:0 0 1px rgba(255,255,255,.9),0 0 8px rgba(255,255,255,.75)}
.screen.sky:not(.ink-dark) .inner,.screen.sky:not(.ink-dark) .inner *{text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 10px rgba(0,0,0,.6)}
.lesson-view .lico .note2{width:28px;height:28px}
.lesson-view .lico .note2 .st{stroke-width:1.3}
.lesson-view .lico .icon:not(.note2){stroke-width:1.8}
.lesson-view .lico.bgm .x{height:1.5px;left:10px;right:10px}
/* desktop: phone-shaped column, centered, scaled up to fill the screen height */
html.desk body{background:#0b0d10}
html.desk #app{left:0;right:0;width:390px;margin:0 auto;box-shadow:0 0 60px rgba(0,0,0,.6)}
html.desk .vlayer,html.desk .vnote{left:0;right:0;width:390px;margin:0 auto}
/* verse references easier to read */
.b-verse cite{font-size:13px;letter-spacing:.14em;font-weight:600}
.screen.sky.ink-dark .inner cite{color:#5a3606 !important}

/* ---------- vision reader (Sat Nov 14, 2026) ---------- */
.vs-view{background:#9fb6c9;font-family:Lora,Georgia,serif;color:#1c2228;touch-action:none}
.vs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:0;transition:opacity .9s ease}
.vs-img.on{opacity:1}
.vs-view .vs-bar{position:absolute;top:0;left:0;right:0;z-index:3;transition:opacity .3s}
.vs-view .vs-bar.hide{opacity:0;pointer-events:none}
.vs-page{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s ease;padding:calc(env(safe-area-inset-top,0px) + 34px) 24px 0;z-index:2}
.vs-page.on{opacity:1;pointer-events:auto;transition-delay:.12s}
.vs-cover{padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
.vs-lbl{font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:11px;letter-spacing:.06em;text-align:center}
.vs-title{font-weight:400;font-size:46px;line-height:1.08;text-align:center;margin-top:10px}
.vs-uline{display:block;width:150px;height:8px;margin:2px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2C40 3.4 90 3 198 3.6' stroke='%233f7a3a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.vs-swipe{font-style:italic;font-size:14px;text-align:center;margin-top:26px}
.vs-play{display:grid;place-items:center;margin:14vh auto 0;width:74px;height:74px;border-radius:50%;background:rgba(63,122,58,.55);border:2.5px solid #3f7a3a;cursor:pointer;padding:0}
.vs-play svg{width:30px;height:30px;margin-left:5px;fill:#3f7a3a;stroke:none}
.vs-plbl{font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:11px;letter-spacing:.32em;text-align:center;margin-top:12px}
.vs-hdr{display:flex;justify-content:space-between;align-items:baseline}
.vs-hdr .t{font-size:21px}
.vs-hdr .n{font-family:Poppins,Arial,sans-serif;font-size:10px;font-weight:500}
.vs-bar2{height:3px;background:rgba(255,255,255,.75);border-radius:2px;margin-top:5px;position:relative;overflow:hidden}
.vs-bar2 i{position:absolute;left:0;top:0;bottom:0;background:#3f7a3a;border-radius:2px}
.vs-txt{margin-top:22px}
.vs-txt p{font-size:1em;line-height:1.26;margin:0 0 .5em}
.vs-txt .vb{font-size:1.32em;line-height:1.1}
.vs-txt u{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.vs-txt .g{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2C40 3.4 90 3 198 3.6' stroke='%233f7a3a' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% .26em no-repeat;padding-bottom:.18em}
.vs-txt .verse{font-style:italic}
.vs-txt .ref{font-family:Poppins,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;margin-top:.5em;font-style:normal}
.vs-txt .vbox{border-left:3px solid #3f7a3a;padding-left:14px}
.vs-txt .kicker{font-family:Poppins,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;color:#3f7a3a;margin-bottom:.6em}
.vs-page[data-img$='lake10.webp'] .vs-txt{padding-right:34%}
.lesson-view.vs-view:not(.x) .lico .icon{stroke:#1c2228}
.lesson-view.vs-view:not(.x) .lico.bgm .icon{fill:#1c2228}
.lesson-view.vs-view:not(.x) .lico .note2 .st{stroke:#1c2228}
.lesson-view.vs-view:not(.x) .lico .note2 .hd{fill:#1c2228}
.lesson-view.vs-view:not(.x) .lico.bgm .x{background:#1c2228}
.vs-txt .chain p{margin:0;line-height:1.25;font-size:1.05em}
.vs-txt .chain p+p:before{content:'↓';display:block;font-size:.7em;color:#3f7a3a;line-height:1.1}