/* Lumine app chrome: sign in, answers, install, and everything below the
   card. The card itself is styled only by card.css, lifted from the frozen
   lumine_card_design.py. Brand values from the August 2026 reference. */

.lumine-body, .lumine-embed {
  --deep: #210f1f; --primary: #724261; --mid: #663c57;
  --cream: #EDE0E4; --blush: #C3A0B8; --cta: #C4379A;
  --line: rgba(237, 224, 228, .22);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", system-ui, sans-serif;
}
.lumine-body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: #fff;
  background-color: var(--deep);
  background-image:
    radial-gradient(ellipse 100% 60% at 30% 50%, rgba(114, 66, 97, .85) 0%, transparent 72%),
    linear-gradient(158deg, #724261 0%, #5e3452 36%, #4a2840 74%, #361a30 100%);
  background-attachment: fixed;
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.lumine-embed { background: var(--deep); color: #fff; font-family: var(--sans); border-radius: 18px; padding: 12px 0; }
#lumine, #lumine * { box-sizing: border-box; }

/* ---------------------------------------------------------------- screens */
.lum-screen { max-width: 440px; margin: 0 auto; padding: 56px 28px 64px; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center; }
.lum-screen.top { justify-content: flex-start; }
.lum-mark { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 44px; line-height: 1;
  color: #fff; margin: 0 0 36px; text-align: center; }
.lum-moon { width: 120px; height: 120px; margin: 0 auto 20px; }
.lum-moon svg { width: 100%; height: 100%; overflow: visible; }
.lum-h { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.15; margin: 0 0 12px; color: #fff; }
.lum-p { font-size: 16px; line-height: 1.6; margin: 0 0 24px; color: rgba(255, 255, 255, .86); }
.lum-p strong { color: #fff; font-weight: 600; }
.lum-label { display: block; font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--cream); margin: 0 0 8px; }
.lum-input { width: 100%; font: 400 18px/1.3 var(--sans); color: #fff; background: rgba(33, 15, 31, .35);
  border: 1.5px solid var(--line); border-radius: 14px; padding: 15px 16px; outline: none; }
.lum-input:focus { border-color: var(--blush); }
.lum-input.code { font-size: 30px; letter-spacing: .32em; text-align: center; font-weight: 500; }
.lum-btn { display: block; width: 100%; margin-top: 16px; font: 600 16px/1 var(--sans); letter-spacing: .03em;
  color: #fff; background: var(--cta); border: 0; border-radius: 999px; padding: 18px 24px; cursor: pointer; text-align: center; text-decoration: none; }
.lum-btn[disabled] { opacity: .6; cursor: default; }
.lum-btn.ghost { background: transparent; border: 1.5px solid var(--line); font-weight: 500; }
.lum-link { display: inline-block; background: none; border: 0; padding: 8px 0; font: 500 15px/1.4 var(--sans);
  color: var(--cream); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lum-row { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; }
.lum-msg { min-height: 1.4em; font-size: 15px; line-height: 1.5; color: var(--cream); margin: 16px 0 0; }
.lum-msg a { color: #fff; }
:focus-visible { outline: 2px solid var(--blush); outline-offset: 3px; }

/* ---------------------------------------------------------------- answers */
.lum-q { border: 0; margin: 0 0 30px; padding: 0; }
.lum-q legend { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.2; margin: 0 0 6px; padding: 0; color: #fff; }
.lum-q .hint { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .7); margin: 0 0 12px; }
.lum-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lum-chip { font: 500 15px/1 var(--sans); color: #fff; background: rgba(33, 15, 31, .3);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 13px 18px; cursor: pointer; }
.lum-chip[aria-pressed="true"] { background: var(--cream); color: var(--deep); border-color: var(--cream); }
/* 1.3.55: the disclaimer under the questions, and the New mark on the three
   questions added for anyone who joined before them. */
.lum-disc { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .8); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; margin: 0 0 4px; background: rgba(33, 15, 31, .3); }
.lum-disc a { color: #fff; text-underline-offset: 3px; }
.lum-new { font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #F2A6CC; margin-left: 8px; vertical-align: 3px; }
.lumc .lum-form { font-family: "Montserrat", system-ui, sans-serif; font-style: italic; font-size: 21px; letter-spacing: .04em;
  color: rgba(255, 255, 255, .75); margin-top: 12px; }
.lumc .lum-read .lum-form { font-size: 13.5px; margin-top: 8px; }

/* ---------------------------------------------------------------- install */
.lum-steps { list-style: none; counter-reset: s; margin: 8px 0 28px; padding: 0; }
.lum-steps li { counter-increment: s; position: relative; padding: 14px 0 14px 46px; border-top: 1px solid var(--line);
  font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.lum-steps li:last-child { border-bottom: 1px solid var(--line); }
.lum-steps li::before { content: counter(s); position: absolute; left: 0; top: 12px; width: 30px; height: 30px;
  border-radius: 50%; border: 1.5px solid var(--blush); color: var(--cream); font: 500 14px/27px var(--sans); text-align: center; }
.lum-share { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; margin: 0 2px; }

/* ---------------------------------------------------------------- the card */
.lum-cardwrap { position: relative; margin: 12px auto 0; border-radius: 18px;
  /* 1.3.25: the card lifts off the page like a card from a deck, a magenta
     light close around its curves, a wider glow, and a deep shadow below. */
  box-shadow: 0 0 0 1px rgba(237, 224, 228, .14), 0 0 20px rgba(196, 55, 154, .31),
    0 0 100px rgba(196, 55, 154, .29), 0 32px 80px rgba(10, 4, 10, .6); }
/* 1.3.79: on a phone the glow and the card share one curve, so no dark
   sliver shows at the corners. */
.lum-cardwrap.lum-read { border-radius: 22px; }
body.lum-onc { background-color: #4a2840; background-image: none; }
/* 1.3.93: behind the card, the Reve gradient, settling at #4a2840 like the card.
   1.3.25. Behind the card: Julie's gradient, the download page hero,
   exactly, except that it ends at evening, #2c1428, never near black, and
   the top settles a tad into #361a30 so the day tabs sit on a deeper plum. A fixed layer holds it to the size
   of the screen, since iPhones ignore a fixed background. */
body.lum-onc::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh;
  z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(54, 26, 48, .45) 0%, rgba(54, 26, 48, 0) 170px),
    radial-gradient(ellipse at center, #724261 0%, #663c57 35%, #4a2840 100%); }
@media (min-width: 700px) { .lum-cardwrap { margin-top: 40px; } }
.lum-scaler { width: 1080px; transform-origin: top left; position: absolute; left: 0; top: 0; }
.lum-note { max-width: 440px; margin: 14px auto 0; padding: 0 24px; text-align: center; font-size: 14px;
  line-height: 1.5; color: rgba(255, 255, 255, .72); }
.lumc .hint { cursor: pointer; }

.lum-after { max-width: 440px; margin: 0 auto; padding: 32px 28px 72px; text-align: center; }
.lum-claimed { font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.2; margin: 18px 0 4px; }
.lum-count { font-size: 14px; color: rgba(255, 255, 255, .72); margin: 0; }
.lum-menu { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lum-menu a, .lum-menu button { font: 500 15px/1.4 var(--sans); color: var(--cream); background: none; border: 0;
  padding: 10px 6px; text-decoration: none; cursor: pointer; }
.lum-menu a:hover, .lum-menu button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.lum-loading { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 26px; color: rgba(255, 255, 255, .8); }

@media (prefers-reduced-motion: no-preference) {
  .lum-fade { animation: lumFade .5s ease-out both; }
  @keyframes lumFade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------------------------------------------------------------- reading size
   Phones: the card at the size of a page of a book. Same design, set for the
   hand rather than shrunk from a story image. */
.lum-read .lum-scaler { position: relative; }
.lumc .lum-read .card { min-height: 0; padding: 36px 24px 28px; border-radius: 22px; justify-content: flex-start; }
.lumc .lum-read .above { min-height: 0; gap: 22px; justify-content: flex-start; }
.lumc .lum-read .moon { height: 190px; }
.lumc .lum-read .moon svg { transform: translate(-50%, -50%) scale(.56); }
.lumc .lum-read .date { font-size: 25px; }
.lumc .lum-read .science { font-size: 12.5px; margin-top: 8px; letter-spacing: .1em; }
.lumc .lum-read .event { font-size: 30px; margin-top: 6px; }
.lumc .lum-read .quote { font-size: 29px; line-height: 1.25; max-width: 100%; }
.lumc .lum-read .attrib { font-size: 12.5px; margin-top: 10px; }
.lumc .lum-read .overview { font-size: 17px; line-height: 1.6; max-width: 100%; }
.lumc .lum-read .sec { padding: 18px 0; }
.lumc .lum-read .sec:first-child { padding-top: 0; }
.lumc .lum-read .label { font-size: 12.5px; }
.lumc .lum-read .txt { font-size: 16.5px; line-height: 1.55; margin-top: 10px; }
.lumc .lum-read .foot { font-size: 24px; }
.lumc .lum-read .fine { font-size: 11px; }
.lumc .lum-read .hint span { font-size: 11px; }
.lumc .lum-read .chev { width: 14px; height: 14px; margin-top: -4px; }
.lumc .lum-read .more { margin-top: 28px; padding-top: 24px; }
.lumc .lum-read .dur { font-size: 12px; }
.lumc .lum-read .dur { margin-top: 12px; }
.lumc .lum-read .seq { gap: 16px; margin-top: 14px; }
.lumc .lum-read .mv { padding-left: 16px; }
.lumc .lum-read .mvn, .lumc .lum-read .mvd { font-size: 16.5px; }
.lumc .lum-read .mvc { font-size: 14.5px; margin-top: 4px; }
.lumc .lum-read .dish { font-size: 26px; margin-top: 28px; }
.lumc .lum-read .ing { font-size: 14.5px; margin-top: 10px; }
.lumc .lum-read .steps { gap: 10px; margin-top: 16px; }
.lumc .lum-read .step { font-size: 16px; padding-left: 26px; }
.lumc .lum-read .step b { font-size: 14px; }
.lum-note { padding-top: max(14px, env(safe-area-inset-top)); }

.lum-p.small { font-size: 14px; color: rgba(255, 255, 255, .72); margin: 8px 0 0; }
.lum-steps li strong { color: #fff; }
.lum-qr { width: 208px; height: 208px; margin: 4px auto 18px; padding: 12px; background: var(--cream); border-radius: 16px; }
.lum-qr img, .lum-qr canvas { display: block; width: 184px !important; height: 184px !important; }
/* A soft arrow toward Safari's toolbar, where Share lives. */
.lum-pointer { width: 18px; height: 18px; margin: 28px auto 0; border-right: 2px solid var(--blush); border-bottom: 2px solid var(--blush); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .lum-pointer { animation: lumNudge 1.6s ease-in-out infinite; }
  @keyframes lumNudge { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: .5; } 50% { transform: translateY(8px) rotate(45deg); opacity: 1; } }
}

.lum-invite { font: 500 14px/1 var(--sans); color: #fff; background: rgba(196, 55, 154, .9); border: 0;
  border-radius: 999px; padding: 11px 18px; cursor: pointer; }

/* iPhone enlarges some blocks of text on its own ("text autosizing"), which
   is what blew up Movement and Meals. Every size is exactly as written. */
html, body, .lumine-body, .lumc { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.lumc, .lumc * { -webkit-text-size-adjust: none !important; text-size-adjust: none !important; }
.lum-ver { font-size: 11px; color: rgba(237, 224, 228, .64); margin-top: 18px; }

/* A little larger for the small lines, September 24: the astronomy line,
   attributions, labels, cues and fine print. The main text stays as it is. */
.lumc .lum-read .science { font-size: 14px; }
.lumc .lum-read .attrib { font-size: 14px; }
.lumc .lum-read .label { font-size: 13.5px; }
.lumc .lum-read .fine { font-size: 12.5px; }
.lumc .lum-read .hint span { font-size: 12.5px; }
.lumc .lum-read .dur { font-size: 13.5px; }
/* 1.3.31: Today's movement set exactly like the recipe title above it. */
.lumc .lum-read .morelab { font-size: 26px; }
.lumc .lum-read .ing { font-size: 15.5px; }
/* 1.3.25: the movement cues read exactly like the recipe steps. */
.lumc .lum-read .mvc { font-size: 16px; line-height: 1.55; }

.lum-sharebox { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 12px; }
.lum-sharebox a, .lum-sharebox button { font: 500 15px/1.4 var(--sans); color: var(--cream); background: none; border: 0;
  padding: 6px 2px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
a.lum-btn { box-sizing: border-box; }

/* The saved picture: the moon placed without a transform, which the picture
   renderer does not follow. Same size and position as the card. */
.lumc.lum-story .moon { display: flex; align-items: center; justify-content: center; overflow: visible; }
.lumc.lum-story .moon svg { position: static; transform: none; flex: none; }

/* Yesterday, Today and Tomorrow, above the card. The underline takes the
   colour of the day being read. */
.lum-tabs { display: flex; justify-content: center; gap: 4px; padding: 18px 8px 2px; }
.lum-tab { font: 500 12.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .75);
  background: none; border: 0; border-bottom: 1.5px solid transparent; padding: 16px 12px 10px; min-height: 44px; cursor: pointer; }
.lum-tab.on { color: #fff; border-bottom-color: var(--tabline); }

/* 1.3.15: the monthly reading, as drawn on the approved October page. */
.rd .label { color: var(--accent); }
.rt { font: 500 16.5px/1.35 var(--sans); color: #fff; }
.rs { font: 400 13.5px/1.4 var(--sans); letter-spacing: .06em; color: rgba(255, 255, 255, .65); margin-top: 2px; }
.rx { font: 400 15.5px/1.5 var(--sans); color: rgba(255, 255, 255, .9); margin-top: 6px; }
.rows { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
#lumine .back { font: 500 15px/1.4 var(--sans); color: var(--cream); background: none; border: 0;
  padding: 14px 20px 4px; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rd { padding-bottom: 40px; }

/* 1.3.18: the three taps, side by side on the iPhone install screen. */
.lum-taps { display: flex; gap: 8px; justify-content: center; margin: 0 0 18px; }
.lum-taps figure { margin: 0; flex: 1; max-width: 130px; text-align: center; }
.lum-taps svg { display: block; width: 100%; height: auto; }
.lum-taps figcaption { font: 500 12.5px/1.3 var(--sans); color: var(--cream); margin-top: 8px; }

/* 1.3.25: back to the top, once she has scrolled past the first screen. Sits
   above the iPhone home bar. */
.lum-up { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(237, 224, 228, .35);
  background: rgba(44, 20, 40, .72); display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.lum-up.on { opacity: 1; pointer-events: auto; }
.lum-up span { width: 12px; height: 12px; margin-top: 6px; border-left: 2px solid var(--cream); border-top: 2px solid var(--cream); transform: rotate(45deg); }
/* 1.3.25: one line under I'm ready for the day. */
.lum-work { display: block; margin: 18px auto 0; font: 500 15px/1.4 var(--sans); color: var(--cream);
  text-decoration: underline; text-underline-offset: 4px; }
/* 1.3.25: close the monthly reading from the top right. In the page's flow,
   below the iPhone status bar, never floating over it. */
.lum-x { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin: 6px 8px 0 auto; padding: 0; background: none; border: 0; cursor: pointer; }
#lumine .rd + .back { display: block; margin: 0 auto 48px; }
/* 1.3.29: the shared picture on its own screen. */
.lum-pic { max-width: 520px; margin: 0 auto; padding: 0 16px 40px; text-align: center; }
.lum-pic-line { font: 500 15px/1.5 var(--sans); color: var(--cream); margin: 4px 0 16px; }
.lum-pic-line a { color: #fff; }
.lum-pic img { display: block; width: 100%; height: auto; border-radius: 14px; }
.lum-pic .back { display: block; margin: 20px auto 0; }

/* 1.3.34: Done circles under the movement and the recipe. */
.lumc .lum-done { display: flex; align-items: center; gap: 16px; margin-top: 34px; padding: 0; background: none; border: 0;
  font-family: "Montserrat", system-ui, sans-serif; font-size: 22px; letter-spacing: .04em; color: rgba(255,255,255,.82);
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lumc .lum-done .dot { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #EDE0E4; flex: none; position: relative;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.lumc .lum-done.on .dot { background: var(--accent, #C4379A); border-color: var(--accent, #C4379A); box-shadow: 0 0 14px var(--accent, #C4379A); }
.lumc .lum-done.on .dot::after { content: ""; position: absolute; left: 50%; top: 45%; width: 28%; height: 50%;
  border: solid #210f1f; border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -50%) rotate(45deg); }
.lumc .lum-read .lum-done { font-size: 15px; gap: 12px; margin-top: 20px; min-height: 44px; }
.lumc .lum-read .lum-done .dot { width: 28px; height: 28px; border-width: 1.5px; }
.lumc .lum-read .lum-done.on .dot::after { border-width: 0 2px 2px 0; }

/* 1.3.37: brighter day colour for the words, and the two faint lines lifted. */
.lumc .label, .lumc .event { color: var(--accent-text, var(--accent)); }
.lumc .quote.tint { color: var(--accent-text, var(--accent)); }
.lumc .attrib { color: rgba(255,255,255,.82); }
.lumc .fine { color: rgba(255,255,255,.68); }

/* 1.3.41: the mantra leads, the opening line of the day's reflection. It
   takes the day's colour on ordinary days; on named days the title carries
   the colour and the mantra is white. The quote sits smaller beneath. */
.lumc .mantra { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 60px; line-height: 1.22; color: #fff; max-width: 860px; text-wrap: balance; margin-top: 0; }
.lumc .mantra.tint { color: var(--accent-text, var(--accent)); }
.lumc .overview.lead { margin-top: 22px; }
.lumc .quote.small { font-size: 40px; line-height: 1.3; }
.lumc .lum-read .mantra { font-size: 30px; line-height: 1.22; }
.lumc .lum-read .overview.lead { margin-top: 14px; }
.lumc .lum-read .quote.small { font-size: 20px; line-height: 1.3; }

/* 1.3.42: on desktop the card no longer stretches its gaps; the moon sits
   closer to the day and the mantra. Text sizes are unchanged. */
.lumc .lum-cardwrap:not(.lum-read) .card .above { justify-content: flex-start; gap: 64px; min-height: 0; }
.lumc .lum-cardwrap:not(.lum-read) .card .moon { height: 300px; }

/* 1.3.42: the More cue reads clearly, with a slow gentle drift. */
.lumc .hint span { color: rgba(255,255,255,.75); }
.lumc .chev { border-color: rgba(255,255,255,.75); animation: lumDrift 2.4s ease-in-out infinite; }
@keyframes lumDrift { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(6px) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .lumc .chev { animation: none; } }

/* 1.3.45: the chevron beside Movement and Meals, sized with the label so it
   reads the same on a phone and on the scaled desktop card. */
.lumc .lum-jump { cursor: pointer; display: inline-flex; align-items: center; gap: .7em; padding: 12px 24px 12px 0; margin: -12px 0; -webkit-tap-highlight-color: transparent; }
.lumc .lum-chevs { display: inline-block; width: .55em; height: .55em; border-right: .12em solid currentColor; border-bottom: .12em solid currentColor; transform: rotate(45deg); margin-top: -.4em; }

/* 1.3.67: no line between Movement and Meals, and the cue under the day
   names what is below, larger and in the day's colour, so no one misses
   the full movement and recipe. */
.lumc .sec + .sec { border-top: 0; }
.lumc .hint span { color: var(--accent-text, var(--accent)); font-weight: 600; }
.lumc .lum-read .hint span { font-size: 14px; }

/* 1.3.75: your month so far, under the monthly reading. */
.lum-cyc { margin-top: 30px; }
.lum-cyc-lab { font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(237, 224, 228, .82); }
.lum-cyc-rng { font-size: 13px; color: rgba(255, 255, 255, .72); margin-top: 8px; letter-spacing: .02em; }
.lum-cyc-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.lum-cyc-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; justify-items: center; }
.lum-cyc-m { position: relative; display: block; width: 100%; max-width: 40px; aspect-ratio: 1; padding: 0; border: 0;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lum-cyc-m svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lum-cyc-m[disabled] { cursor: default; }
.lum-cyc-m.today::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: #fff; }
.lum-cyc-met { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.25; margin: 22px 0 0; }
/* the finished cycle as a picture */
.lumc .lum-cyc-pic { border-radius: 48px; border: 1.5px solid rgba(237, 224, 228, .22); overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; padding: 110px 80px 64px; text-align: center;
  background: radial-gradient(ellipse 90% 40% at 50% 16%, rgba(196, 55, 154, .26) 0%, transparent 62%),
    radial-gradient(ellipse at center, #724261 0%, #663c57 35%, #4a2840 100%); }
.lumc .lum-cyc-pic .t1 { font: 500 26px/1 "Montserrat", system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(237, 224, 228, .82); }
.lumc .lum-cyc-pic .t3 { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 76px; line-height: 1.1; color: #fff; margin-top: 26px; }
.lumc .lum-cyc-pgrid { display: flex; flex-direction: column; gap: 26px; }
.lumc .lum-cyc-pgrid .lum-cyc-row { grid-template-columns: repeat(7, 96px); gap: 22px; }
.lumc .lum-cyc-pgrid svg { width: 96px; height: 96px; display: block; }
.lumc .lum-cyc-pic .ln { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 60px; line-height: 1.2; color: #fff; max-width: 860px; }
.lumc .lum-cyc-pic .url { font: 400 26px/1 "Montserrat", system-ui, sans-serif; letter-spacing: .12em; color: rgba(255, 255, 255, .82); margin-top: 10px; }
/* 1.3.78: stepping through a cycle's days, opened from the moons. The
   weekday sits between the arrows, lettered like the day tabs, and the X
   keeps its own place at the right. */
.lum-pastnav { position: relative; max-width: 440px; margin: 0 auto; align-items: center; justify-content: center; gap: 2px; }
.lum-step { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lum-step[disabled] { opacity: .25; cursor: default; }
.lum-pastday { display: block; font: 500 12.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: #fff; min-width: 120px; text-align: center; }
/* 1.3.115: the same spot as the monthly reading's X (Julie, November 1, 2026). */
.lum-pastnav .lum-x { position: absolute; right: 8px; top: 6px; margin: 0; }
/* 1.3.78: on narrow screens (iPhone SE, or any iPhone with Display Zoom set
   to Larger Text) the day tabs tighten so they fit the screen and the page
   can never slide sideways. Wider screens are unchanged. */
@media (max-width: 374px) {
  .lum-tabs { gap: 0; padding-left: 0; padding-right: 0; }
  .lum-tab { padding-left: 7px; padding-right: 7px; letter-spacing: .14em; }
}
/* 1.3.80: a met morning glows in its own color when touched or hovered.
   1.3.87: the glow is a soft circle of light behind the moon, so Safari
   never clips it to a square. */
.lum-cyc-m svg { position: relative; z-index: 1; }
.lum-cyc-m.met::before { content: ""; position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; border-radius: 50%;
  box-shadow: 0 0 6px 1px var(--glow), 0 0 16px 3px var(--glow); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.lum-cyc-m.met:hover::before, .lum-cyc-m.met:active::before, .lum-cyc-m.met.glow::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lum-cyc-m.met::before { transition: none; } }
/* 1.3.90: Your month so far, the calendar month, and the greeting. */
.lum-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px 6px; justify-items: center; margin-top: 16px; }
.lum-cal > span { display: block; }
.lum-wk { font: 500 11px/1 var(--sans); letter-spacing: .14em; color: rgba(237, 224, 228, .6); padding-bottom: 2px; }
.lumc .lum-hello { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 36px; color: rgba(255, 255, 255, .9); margin-bottom: 10px; }
.lumc .lum-read .lum-hello { font-size: 22px; margin-bottom: 6px; }
.lumc .lum-done[disabled] { cursor: default; }
/* 1.3.91: the line under I moved and I made it, and the month as a picture. */
.lumc .lum-saved { font-family: "Montserrat", system-ui, sans-serif; font-size: 20px; letter-spacing: .02em; color: rgba(255, 255, 255, .82);
  margin: 10px 0 0; min-height: 1.5em; opacity: 0; transition: opacity .35s ease; }
.lumc .lum-saved.on { opacity: 1; }
.lumc .lum-saved.bad { color: #F2A6CC; }
.lumc .lum-read .lum-saved { font-size: 14px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .lumc .lum-saved { transition: none; } }
.lumc .lum-cyc-pcal { display: grid; grid-template-columns: repeat(7, 96px); gap: 22px; justify-content: center; }
.lumc .lum-cyc-pcal .pwk { font: 500 26px/1 "Montserrat", system-ui, sans-serif; letter-spacing: .14em; color: rgba(237, 224, 228, .72); text-align: center; }
.lumc .lum-cyc-pcal .pm svg { width: 96px; height: 96px; display: block; }
/* 1.3.81: the small MOVEMENT and MEALS labels, and the day's title, take a
   lifted tint of the day's color so they stay easy to read on the richer
   card. The moon and emblems keep the true color. */
.lumc .label { color: var(--accent-label, var(--accent-text, var(--accent))); }
.lumc .event { color: var(--accent-event, var(--accent)); }

/* 1.3.98: Tap for more under Movement and Meals, in the day's color. */
.lumc .sec.lum-jump { display: block; padding: 30px 0; margin: 0; }
.lumc .lum-read .sec.lum-jump { padding: 18px 0; }
.lumc .sec.lum-jump:first-child { padding-top: 0; }
.lumc .lum-more { display: inline-flex; align-items: center; gap: .7em; margin-top: 16px; font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600; font-size: 20px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-label, var(--accent-text)); }
.lumc .lum-read .lum-more { font-size: 11.5px; margin-top: 10px; }

/* 1.3.99: today's card turns over to the day's quote and her week so far. */
.lumc { perspective: 1800px; -webkit-perspective: 1800px; }
.lum-cardwrap { transition: transform .3s ease-in; transform-origin: 50% 50%; }
.lum-cardwrap.lum-t1 { transform: rotateY(90deg); }
.lum-cardwrap.lum-t2 { transition: none; transform: rotateY(-90deg); }
.lumc .lum-qback { display: none; }
.lumc .card[data-side="q"] .above, .lumc .card[data-side="q"] .more { display: none; }
.lumc .card[data-side="q"] .lum-qback { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  width: 100%; min-height: min(var(--qmin, 1500px), 86vh); }
.lumc .lum-qmoon { height: 300px; width: 100%; position: relative; }
.lumc .card[data-side="q"] .lum-qback { position: relative; }
.lumc .lum-qx { position: absolute; top: -56px; right: -44px; width: 120px; height: 120px; opacity: .85; display: flex; align-items: center; justify-content: center;
  padding: 0; background: none; border: 0; cursor: pointer; z-index: 2; }
.lumc .lum-qmoon svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.75); }
.lumc .lum-qeye { font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; font-size: 22px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-label, var(--accent-text)); margin-top: 10px; }
.lumc .lum-qtext { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 60px; line-height: 1.24;
  color: #fff; max-width: 860px; margin-top: 26px; text-wrap: balance; }
.lumc .lum-qby { font-family: "Montserrat", system-ui, sans-serif; font-size: 22px; letter-spacing: .06em; line-height: 1.5; color: rgba(255,255,255,.72); margin-top: 22px; max-width: 760px; }
.lumc .lum-qline { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 38px; line-height: 1.3; color: rgba(255,255,255,.94); margin-top: 44px; }
.lumc .lum-week { width: 100%; max-width: 640px; margin-top: 52px; padding-top: 40px; border-top: 1.5px solid rgba(237,224,228,.22); }
.lumc .lum-weekrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 22px; justify-items: center; }
.lumc .lum-wkday { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.lumc .lum-week .lum-wkm { width: 100%; max-width: 64px; aspect-ratio: 1; display: block; position: relative; }
.lumc .lum-week .lum-wkm svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lumc .lum-week .lum-wk { font-size: 20px; }
.lumc .lum-week .lum-cyc-lab { font-size: 20px; }
.lumc .lum-bloom svg { animation: lumBloom 1.3s ease-out; }
@keyframes lumBloom { 0% { transform: scale(.6); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
.lumc .lum-qturn { margin-top: 48px; background: none; border: 0; color: rgba(255,255,255,.85); font: 500 22px/1 "Montserrat", system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; min-height: 66px; }
.lumc .lum-qturn svg { width: 1.1em; height: 1.1em; }
.lumc .lum-qeye.lum-stage { margin-top: 52px; }
.lumc .lum-qline.lum-stline { margin-top: 14px; max-width: 760px; text-wrap: balance; }
.lumc .lum-qmain { display: contents; }
.lumc .lum-qmain.off, .lumc .lum-wel.off { display: none; }
.lumc .lum-wel { display: flex; flex-direction: column; align-items: center; width: 100%; }
.lumc .lum-qtext.lum-wbig { font-size: 76px; margin-top: 30px; }
.lumc .lum-qline.lum-wprom { margin-top: 20px; color: var(--accent-label, var(--accent-text)); }
.lumc .lum-wbody { font-family: "Montserrat", system-ui, sans-serif; font-size: 28px; line-height: 1.6; color: rgba(255,255,255,.92); max-width: 640px; margin-top: 40px; text-wrap: pretty; }
.lumc .lum-wbtn { margin-top: 64px; font: 500 24px/1 "Montserrat", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: #C4379A; border: 0; border-radius: 999px; padding: 30px 56px; cursor: pointer; }
/* phone sizes */
.lumc .lum-read .lum-qeye.lum-stage { margin-top: 28px; }
.lumc .lum-read .lum-qline.lum-stline { font-size: 18px; margin-top: 8px; max-width: 290px; }
.lumc .lum-read .lum-qtext.lum-wbig { font-size: 38px; margin-top: 16px; }
.lumc .lum-read .lum-qline.lum-wprom { font-size: 21px; margin-top: 10px; }
.lumc .lum-read .lum-wbody { font-size: 14px; margin-top: 20px; max-width: 290px; }
.lumc .lum-read .lum-wbtn { margin-top: 32px; font-size: 12px; padding: 15px 26px; }
.lumc .lum-read .lum-qmoon { height: 150px; }
.lumc .lum-read .lum-qmoon svg { transform: translate(-50%, -50%) scale(.4); }
.lumc .lum-read .lum-qeye { font-size: 11.5px; margin-top: 6px; }
.lumc .lum-read .lum-qtext { font-size: 30px; margin-top: 14px; }
.lumc .lum-read .lum-qby { font-size: 12.5px; margin-top: 12px; }
.lumc .lum-read .lum-qline { font-size: 20px; margin-top: 24px; }
.lumc .lum-read .lum-week { margin-top: 28px; padding-top: 20px; max-width: 100%; }
.lumc .lum-read .lum-weekrow { gap: 6px; margin-top: 12px; }
.lumc .lum-read .lum-wkday { gap: 6px; }
.lumc .lum-read .lum-week .lum-wkm { max-width: 34px; }
.lumc .lum-read .lum-week .lum-wk, .lumc .lum-read .lum-week .lum-cyc-lab { font-size: 11px; }
.lumc .lum-read .lum-qturn { font-size: 12px; margin-top: 24px; min-height: 44px; gap: 8px; }
/* while the card shows her quote, the line under the card is not repeated */
body.lum-turned .lum-after .lum-claimed { display: none; }
@media (prefers-reduced-motion: reduce) { .lum-cardwrap { transition: none; } .lumc .lum-bloom svg { animation: none; } }

.lumc .lum-wkm svg { position: relative; z-index: 1; }
.lumc .lum-wkm.met::before { content: ""; position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; border-radius: 50%;
  box-shadow: 0 0 14px 3px var(--glow); opacity: 0; transition: opacity .4s; }
.lumc .lum-wkm.met.glow::before { opacity: 1; }

/* ------------------------------------------------------------ 1.3.104 */
/* The ingredients are set exactly like the moves under Today's movement:
   the same font, size, weight and spacing (Julie, October 29, 2026). */
.lumc .ing { font-family: "Montserrat", system-ui, sans-serif; font-style: normal; font-size: 24px; font-weight: 400; line-height: 1.55; letter-spacing: normal; color: rgba(255, 255, 255, .92); }
.lumc .lum-read .ing { font-size: 16px; font-weight: 400; line-height: 1.55; letter-spacing: normal; }
/* The close on the back of the card matches the month view's close: a
   22 point X, the same fine line, a full 44 point touch area, top right. */
.lumc .lum-read .lum-qx { top: 2px; right: 2px; width: 44px; height: 44px; opacity: 1; }
.lumc .lum-read .lum-qx svg { width: 22px; height: 22px; }
/* One smooth, unhurried turn. */
.lum-cardwrap { transition: transform .56s cubic-bezier(.37, 0, .2, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.lum-cardwrap.lum-t1 { transform: rotateY(90deg) scale(.96); transition-timing-function: cubic-bezier(.5, 0, .75, 0); }
.lum-cardwrap.lum-t2 { transition: none; transform: rotateY(-90deg) scale(.96); }
/* The close for the back of the card sits where the month view's does. */
.lum-tabs { position: relative; }
.lum-backx { display: none; position: absolute; right: 8px; top: 6px; margin: 0; }
body.lum-turned .lum-backx { display: flex; }
body.lum-turned .lum-tabs .lum-tab { visibility: hidden; }
.lumc .card.lum-hasbackx .lum-qx { display: none; }
/* The line under today's card turns it either way. */
.lum-turnlink { display: inline-block; min-height: 44px; margin: 2px 0 6px; padding: 10px 8px; background: none; border: 0;
  font: 500 14px/1.4 var(--sans); letter-spacing: .04em; color: var(--cream); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
body.lum-turned .lum-after .lum-claimed { display: block; }
.lumc .lum-read .lum-qtext { text-wrap: balance; }

/* 1.3.106: a larger down chevron under Movement and Meals, about the height of the label. */
.lumc .lum-chevs { width: 17px; height: 17px; border-right-width: 2.7px; border-bottom-width: 2.7px; margin-top: -8px; }
.lumc .lum-read .lum-chevs { width: 10px; height: 10px; border-right-width: 1.6px; border-bottom-width: 1.6px; margin-top: -5px; }

/* 1.3.106: the month's reading sits on the Reve Health gradient, like the app behind it. */
.rd .lum-scaler { --ground: radial-gradient(ellipse 90% 40% at 50% 16%, rgba(196, 55, 154, .26) 0%, transparent 62%),
  radial-gradient(ellipse at center, #724261 0%, #663c57 35%, #4a2840 100%) !important; }

/* 1.3.106: the back of the card starts at the top, its moon where the front's moon sits. */
.lumc .card[data-side="q"] .lum-qback { justify-content: flex-start; }

/* 1.5.0: every small label matches Movement and Meals: Montserrat 600 at
   13.5px on a phone, 0.2em tracking, in the day's color. */
.lumc .lum-read .lum-qeye { font-size: 13.5px; letter-spacing: .2em; }
.lumc .lum-week .lum-cyc-lab { font-size: 22px; letter-spacing: .2em; color: var(--accent-label, var(--accent-text)); }
.lumc .lum-read .lum-week .lum-cyc-lab { font-size: 13.5px; letter-spacing: .2em; color: var(--accent-label, var(--accent-text)); }
.lum-cyc > .lum-cyc-lab { font-size: 13.5px; letter-spacing: .2em; }
/* "I embrace the day" takes the mantra's weight. */
.lum-claimed { font-weight: 500; }
/* The monthly reading opens like the back of the card, its moon the same size. */
.rd .eyebrow { font-weight: 600; letter-spacing: .2em; color: var(--accent); }
.rd .date { font-style: italic; letter-spacing: normal; }
.lumc .lum-read.lum-cardwrap .moon[style] { height: 150px !important; }
.rd .moon > div { transform: translate(-50%, -50%) scale(.712) !important; }
#lumine #rd-share { display: block; width: calc(100% - 56px); max-width: 380px; margin: 0 auto 14px; }
#lumine .rd ~ .back { display: block; margin: 0 auto 48px; }

/* 1.5.1: Today's recipe heads the recipe like Today's movement, and the
   dish name takes the movement duration line's capitals. */
.lumc .more .lum-reclab { margin-top: 40px; }
.lumc .lum-read .more .lum-reclab { margin-top: 28px; }
.lumc .more .dish { font-family: "Montserrat", system-ui, sans-serif; font-style: normal; font-weight: 400; font-size: 20px;
  letter-spacing: .13em; text-transform: uppercase; line-height: 1.5; color: rgba(255,255,255,.8); margin-top: 26px; }
.lumc .lum-read .more .dish { font-size: 13.5px; margin-top: 12px; }
/* The week's moons glow on hover too, like the month's. */
.lumc .lum-wkm.met:hover::before, .lumc .lum-wkm.met:active::before { opacity: 1; }

/* 1.5.2: on the phone, the back of the card fits what it holds, with more
   room between her stage and Your week so far, and the same space under
   the week's moons as above the moon (56px each, measured on the drawn
   moons, November 2, 2026). */
.lumc .lum-read .card[data-side="q"] { padding-bottom: 53px; }
.lumc .lum-read .card[data-side="q"] .lum-qback { min-height: 0; }
.lumc .lum-read .lum-week { margin-top: 40px; padding-top: 32px; }

/* 1.5.10: the tab bar, on preview accounts only (Julie, November 6, 2026).
   The icons and labels sit centered in the band, equal space above and below
   the marks you see; the band runs under the iPhone home bar. */
.lum-tb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around;
  padding: calc(3.85px + env(safe-area-inset-bottom) / 2) 6px calc(8.15px + env(safe-area-inset-bottom) / 2);
  background: rgba(66, 34, 58, .94); border-top: 1px solid rgba(237, 224, 228, .16);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; box-sizing: border-box; }
.lum-tb.on { opacity: 1; transform: none; pointer-events: auto; }
.lum-tb button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 0;
  background: none; border: 0; color: rgba(237, 224, 228, .82); font: 500 11.5px/1 "Montserrat", system-ui, sans-serif; letter-spacing: .02em;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lum-tb button span { display: block; line-height: 1; }
.lum-tb button.cur { color: var(--tb-on, #FF8CC6); }
.lum-tb svg { width: 22px; height: 22px; display: block; }
@media (prefers-reduced-motion: reduce) { .lum-tb { transition: none; } }
/* The space for the bar is there from the start, so nothing moves when it appears. */
body.lum-tbmode #lumine { padding-bottom: calc(var(--tb-h, 0px) + 16px); }
body.lum-tbshown .lum-up { bottom: calc(var(--tb-h, 0px) + 16px); }
/* On the tab screens the bar takes her home, so their own close and back links step aside. */
body.lum-tbscreen #wk-x, body.lum-tbscreen #wk-back, body.lum-tbscreen #rd-x, body.lum-tbscreen #rd-back { display: none !important; }
/* Reading and Moons sit exactly where Yesterday, Today, Tomorrow sit; the 2px
   on the left balances the letter spacing after the last letter, so the
   pair is centered by what the eye sees (measured November 6, 2026). */
.lum-tbsub { padding: 18px 8px 4px; }
/* Every tab's card starts at the same height as today's card, so nothing
   jumps when she moves between tabs. */
body.lum-tbnorow #lumine { padding-top: 66px; }
.lumc.lum-tbwk { margin: 28px auto 0; padding: 0 24px; box-sizing: border-box; }
.lumc.lum-tbwk .lum-week { border-top: 0; margin-top: 0; padding-top: 0; }
.lum-tbyou .lum-tbhi { font-size: 44px; font-style: italic; }
.lum-tbyou .lum-tbst { font: 600 13.5px/1 "Montserrat", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--tb-on); margin-top: 14px; }
.lum-tbyou .lum-tbeye { font-size: 13.5px; }
.lum-tbyou .what { text-align: left; }
.lum-tbyou .sec.lum-tbsec { padding: 22px 0 0; }
.lum-tbyou .lum-tbsec .label { font-size: 13.5px; }
.lum-tbyou .lum-tbsec .txt { font-size: 16.5px; }
.lum-tblist { margin-top: 30px; }
.lum-tbli { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; font: 400 16.5px/1.3 "Montserrat", system-ui, sans-serif; color: #fff;
  background: none; border: 0; border-top: 1.5px solid rgba(237, 224, 228, .22); padding: 0; text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.lum-tbli:last-child { border-bottom: 1.5px solid rgba(237, 224, 228, .22); }
.lum-tbli i { width: 9px; height: 9px; border-right: 1.6px solid #EDE0E4; border-top: 1.6px solid #EDE0E4; transform: rotate(45deg); margin-right: 6px; opacity: .8; flex: none; }
.lum-tbletter .label.lum-tbah { font-size: 13.5px; margin-top: 30px; }
.lum-tbletter .lum-tbp { font: 400 16.5px/1.6 "Montserrat", system-ui, sans-serif; color: rgba(255, 255, 255, .92); margin: 12px 0 0; }
#lumine .lum-tbyou + .back { display: block; margin: 18px auto 0; }

/* 1.5.12: letter spacing leaves a space after the last letter, which pulled
   every day label a little left of center. A matching space before the first
   letter centers each label, its underline, and the whole row by what the
   eye sees (Julie, November 6, 2026). */
.lum-tab { padding-left: calc(12px + .2em); }
.lum-pastday { padding-left: .2em; }
@media (max-width: 374px) {
  .lum-tab { padding-left: calc(7px + .14em); }
}

/* 1.5.14: the goals line under her stage in You. */
.lum-tbyou .lum-tbnote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.35; color: rgba(255,255,255,.86); margin-top: 14px; text-wrap: balance; }

/* 1.5.18: the day she began, marked once under its moon in Your week so far. */
.lumc .lum-week .lum-wkday { position: relative; }
.lumc .lum-week .lum-wkstart { width: 5px; height: 5px; border-radius: 50%; background: var(--first, #C4379A); margin-top: -2px; }

/* 1.5.21: the magenta switch (November 3 mockups) for Your week and Your month. */
.lum-tabs.lum-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: calc(100% - 32px); max-width: 340px; box-sizing: border-box;
  margin: 18px auto 0; padding: 4px; border-radius: 999px; background: rgba(33, 15, 31, .45); }
.lum-seg .lum-tab { border: 0; border-radius: 999px; min-height: 44px; padding: 0 12px; font: 600 14px/1 "Montserrat", system-ui, sans-serif;
  letter-spacing: normal; text-transform: none; color: #E2D3DA; transition: background .2s, box-shadow .2s, color .2s; }
.lum-seg .lum-tab.on { background: #C4379A; color: #fff; box-shadow: 0 0 14px rgba(196, 55, 154, .55); }
.lum-seg .lum-tab:not(.on):hover, .lum-seg .lum-tab:not(.on):active { color: #fff; box-shadow: inset 0 0 0 1px rgba(196, 55, 154, .7); }
@media (prefers-reduced-motion: reduce) { .lum-seg .lum-tab { transition: none; } }
/* 1.5.21: with the switch above the card, Your week sits exactly where Your month does. */
body.lum-tbscreen #lumine:has(> .lum-seg) { padding-top: 0; }
/* 1.5.21: the New tag on A note from Julie. */
.lum-tbli .lum-new { margin-left: 10px; margin-right: auto; font: 600 11px/1 "Montserrat", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: #C4379A; border-radius: 999px; padding: 5px 9px; }