/**
 * My Love Portal · "a garden at night, and a book she writes in".
 * Loaded after members.css and wins over it. Two surfaces:
 *   the night  – the ritual stage: dark, calm, the one bold moment on a page
 *   the paper  – everything she reads and writes: vellum, letter-like, no card chrome
 * Cormorant Garamond is the voice spoken to her (italic = her love angel);
 * Outfit is the interface. Rose is the only strong colour; gold only draws lines.
 * One animation carries meaning (watering the rose); constant motion is removed.
 */
:root {
  --night: #241B2E;
  --night-2: #3A2C48;
  --vellum: #F6EFE4;
  --paper: #FBF7F0;
  --rose-c: #B8413C;
  --blush: #F3D9D2;
  --gold-l: #A8843F;
  --leaf: #5F8A66;
  --ink-t: #2A2230;
  --soft: #6E6573;
  --hair: #E4D8C6;
  --voice: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --serif: var(--voice);
  --r-stage: 26px; --r-sheet: 14px; --r-chip: 999px;
}

body { background: var(--vellum); color: var(--ink-t);
  background-image: radial-gradient(rgba(120, 90, 60, .035) 1px, transparent 1px); background-size: 3px 3px; }
.ln-logo { font-family: 'Playfair Display', Georgia, serif; }   /* the brand bar stays exactly as on the funnel */

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--voice); font-weight: 600; letter-spacing: -.005em; color: var(--ink-t); }
h1 { font-size: 2.35rem; line-height: 1.1; }
h2 { font-size: 1.7rem; line-height: 1.15; }
h3 { font-size: 1.3rem; line-height: 1.2; }
.muted, .sub { color: var(--soft); }
/* labels: sentence case, quiet italics, never all caps */
.kicker, .greet-date, .cd-date span, .tl-d, .pg-date, .bp-date, .art-min, .sc-kick, .hl-kick, .bc-kick, .jr-date,
.ritual-steps li, .glance b, .dodont h3, .actions dt, .p6-src, .p6-yours small, .hl-card .hl-kick, .cs-d {
  text-transform: none !important; letter-spacing: 0 !important; font: italic 500 1.02rem/1.35 var(--voice) !important; color: var(--soft);
}
.ic { text-transform: none; letter-spacing: 0; font: 600 .78rem var(--sans); }
.ic::before { content: '✦ '; }

/* ---------- motion: only what answers her ---------- */
.glowball, .stars, .rose-stage .heart-rose, .tl.strong .tl-dot, .st.now, .angel-mark.glow, .welcome::before, .rose i.next, .typing p i { animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
:focus-visible { outline: 2px solid var(--rose-c); outline-offset: 3px; border-radius: 6px; }

/* ---------- surfaces: paper, not cards ---------- */
.box, .side-card, .ritual, .lovesky, .calrail, .cycle, .us, .checkin, .j-card, .prompt-mini, .read-card, .six, .quests, .person-card, .tools a, .tg, .sc, .catalog a, .art-card, .guide, .chat-row, .feel-box, .jar-card, .week-note {
  background: var(--paper); border: 1px solid var(--hair); box-shadow: none; border-radius: var(--r-sheet);
}
.tools a:hover, .tg:hover, .sc:hover, .pc:hover, .person-card:hover, .us:hover, .art-card:hover { transform: none; box-shadow: none; border-color: var(--gold-l); }
hr.rule, .section-rule { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-l), transparent); opacity: .5; margin: 34px 0; }
.sec { font-size: 1.55rem; }

/* ---------- Today: the night stage ---------- */
.scene { position: relative; overflow: hidden; background: var(--night); border: 0; border-radius: var(--r-stage); padding: 30px 30px 32px; margin: 8px 0 30px; color: #EFE6F2;
  box-shadow: 0 30px 60px -20px rgba(36, 27, 46, .55); }
.scene.sky-night, .scene.sky-dusk { background: radial-gradient(120% 90% at 50% 0%, #4B3860 0%, var(--night) 60%); }
.scene.sky-dawn { background: radial-gradient(120% 90% at 50% 0%, #6E4A5E 0%, var(--night) 65%); }
.scene.sky-day { background: radial-gradient(120% 90% at 50% 0%, #52496E 0%, var(--night) 65%); }
.scene::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 78% 12%, #fff, transparent), radial-gradient(1.4px 1.4px at 64% 30%, #FFE9B8, transparent),
    radial-gradient(1px 1px at 30% 40%, #fff, transparent), radial-gradient(1px 1px at 90% 44%, #fff, transparent), radial-gradient(1.2px 1.2px at 45% 8%, #fff, transparent); }
.n-greet { position: relative; text-align: center; margin-bottom: 6px; }
.n-hi { font: italic 500 2.1rem/1.1 var(--voice); color: #FFF4F0; margin: 0; }
.n-date { font: 400 .95rem var(--sans); color: #BFB2C8; margin: 6px 0 0; }
.scene .ritual-steps { position: relative; justify-content: center; gap: 22px; margin: 16px 0 6px; }
.scene .ritual-steps li { flex: 0 0 auto; border: 0; padding: 0; color: #8E829A !important; font-size: .98rem !important; }
.scene .ritual-steps li::before { content: counter(r); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; border: 1px solid #6A5C78; font: 600 .75rem var(--sans); font-style: normal; }
.scene .ritual-steps li.now { color: #FFF4F0 !important; }
.scene .ritual-steps li.now::before { border-color: #E9C98A; color: #E9C98A; }
.scene .ritual-steps li.done { color: #A9C9AE !important; }
.scene .ritual-steps li.done::before { content: '✓'; background: var(--leaf); border-color: var(--leaf); color: #fff; }
.scene-grid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rose-stage { background: none !important; height: 250px; width: 100%; max-width: 360px; border-radius: 0; }
.rose-stage .heart-rose { width: 250px; height: 250px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.thirsty .rose-stage .heart-rose { filter: saturate(.55) brightness(.92) drop-shadow(0 18px 30px rgba(0,0,0,.35)); transform: rotate(-4deg); }
.watered .rose-stage .heart-rose { filter: drop-shadow(0 0 22px rgba(255, 196, 150, .55)) drop-shadow(0 18px 30px rgba(0,0,0,.3)); }
.glowball { background: radial-gradient(circle, rgba(255, 196, 150, .45), transparent 65%); }
.scene-info { text-align: center; max-width: 440px; }
.scene-info .kicker { color: #BFB2C8 !important; }
.scene-info h2 { color: #FFF4F0; font-size: 2rem; margin: 2px 0 8px; }
.scene-info p { color: #CFC4D8; }
.scene-info .btn { max-width: 320px; margin: 4px auto 0; }
.scene .streak-row { border-top: 1px solid rgba(255,255,255,.1); margin-top: 18px; padding-top: 14px; color: #E7DDEB; }
.scene .streak-row .muted { color: #A99DB4; }
.scene .streak-row .link { color: #F0C9A8; }
.scene .grow { background: rgba(255,255,255,.1); max-width: 300px; margin: 8px auto 6px; }
.scene .grow i { background: linear-gradient(90deg, #8CC08F, var(--leaf)); }
.scene .reel { background: rgba(255,255,255,.06); color: #FFF4F0; border-color: #E9C98A; }
.scene .water-fx .breath { font-family: var(--voice); font-style: italic; font-size: 1.4rem; }

/* the paper under it */
.today-head { padding: 0 2px 6px; }
.headline { font-size: 2.6rem; font-weight: 600; }
.sit-line { font: italic 500 1.3rem/1.45 var(--voice); color: var(--soft); max-width: 60ch; }

/* her love angel's voice */
.reading .first, .reading p, .letter p, .paper p, .he-text, .bub.angel p, .he-reply p, .sgc-mean p, .pic-main, .us-line, .assist p, .told-line, .n-hi, .tl p, .p6-body {
  font-family: var(--voice); }
.reading .theme { font-size: 2.2rem; }
.reading p { font-size: 1.22rem; line-height: 1.6; max-width: 62ch; }
.reading .first { font-style: italic; font-size: 1.35rem; }
.affirm { background: none; border: 0; border-left: 2px solid var(--rose-c); border-radius: 0; font: italic 600 1.5rem/1.4 var(--voice); padding: 4px 0 4px 18px; }
.number { background: var(--paper); border-color: var(--hair); }
.number span { font-family: var(--voice); color: var(--rose-c); }
.gift { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); }
.gift.rare { background: linear-gradient(170deg, #FFF8E8, var(--paper)); border-color: var(--gold-l); box-shadow: none; }

/* quests: three plain lines */
.quests.compact { background: none; border: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); border-radius: 0; padding: 14px 0; margin: 26px 0; }
.quest .grow i, .quests.compact .quest .grow i { background: var(--rose-c); }

/* locks: a folded note, not a card */
.locked { background: var(--paper); border: 1px dashed #D6C4AC; border-radius: var(--r-sheet); }
.locked::before { display: none; }
.lk-text { font-family: var(--voice); font-size: 1.2rem; }
.unlocked { background: var(--paper); border: 1px solid var(--hair); border-left: 3px solid var(--gold-l); border-radius: 4px var(--r-sheet) var(--r-sheet) 4px; }
.unlocked p { font-family: var(--voice); font-size: 1.15rem; }

/* the calendar: a list, not a card */
.calrail { background: none; border: 0; padding: 0 0 0 2px; }
.tl p { font-size: 1.12rem; }
.tl.today .tl-dot { background: var(--rose-c); border-color: var(--rose-c); box-shadow: none; }
.tl.strong .tl-dot { background: #F6E3B6; border-color: var(--gold-l); box-shadow: none; }
.tl-more::after { background: linear-gradient(180deg, rgba(246,239,228,0), var(--vellum) 90%); }
.tl-hint { background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: 10px 0 0; }

/* the angel's mark: a small gold star, still */
.angel-mark { background: none; box-shadow: none; color: var(--gold-l); font-size: 1.2rem; width: 26px; height: 26px; }
.angel-mark.big { width: 40px; height: 40px; font-size: 1.8rem; }
.angel-door { background: var(--night); border-radius: var(--r-sheet); }
.angel-door .angel-mark { color: #E9C98A; }

/* ---------- Journal ---------- */
.book-cover { border-radius: 8px var(--r-stage) var(--r-stage) 8px; background: linear-gradient(135deg, #4E2433, #7C3143 55%, #93404F); }
.book-cover h1 { font: italic 600 2.6rem var(--voice); }
.spread { border-radius: var(--r-sheet); background: var(--paper); box-shadow: 0 30px 50px -30px rgba(42,34,48,.4); }
.pg-q { font: italic 600 1.9rem/1.3 var(--voice); }
textarea.lined { font: 1.3rem/32px var(--voice); }
.quick h3 { font: italic 600 1.45rem var(--voice); }
.bookpage { border-radius: 4px var(--r-sheet) var(--r-sheet) 4px; }
.bookpage .he-text { font-size: 1.2rem; }
.he-q { font-family: var(--voice); font-size: 1.12rem; color: var(--soft); }
.starters button, .gq-start { font-family: var(--voice); font-size: 1.05rem; background: none; border: 1px solid var(--hair); color: var(--rose-c); }
.he-reply { background: none; border-top: 1px solid var(--hair); border-radius: 0; padding: 12px 0 0; }
.he-reply .kicker { color: var(--gold-l) !important; }
.he-reply p { font-style: italic; font-size: 1.12rem; }

/* ---------- Love Angel ---------- */
.bub.angel p { background: var(--paper); border: 1px solid var(--hair); font-style: italic; font-size: 1.2rem; }
.bub.me p { background: var(--night); }
.composer { border-radius: var(--r-sheet); box-shadow: 0 20px 40px -24px rgba(42,34,48,.35); }
.composer textarea { font-family: var(--voice); font-size: 1.2rem; }
.feels button { border-color: var(--hair); background: var(--paper); font-family: var(--voice); font-size: 1.12rem; font-weight: 600; }

/* ---------- small screens ---------- */
@media (max-width: 560px) {
  h1 { font-size: 2rem; } .headline { font-size: 2.1rem; }
  .scene { padding: 22px 16px 26px; margin-left: -8px; margin-right: -8px; }
  .n-hi { font-size: 1.8rem; }
  .scene .ritual-steps { gap: 10px; flex-wrap: wrap; }
  .rose-stage { height: 220px; } .rose-stage .heart-rose { width: 220px; height: 220px; }
}

/* today's message: on the paper itself, no box */
.ritual.done { background: none; border: 0; padding: 0; box-shadow: none; }
.gift, .gift.uncommon { background: var(--paper); border: 1px solid var(--hair); }
.gift h3 { font-size: 1.5rem; }
.gift p { font-family: var(--voice); font-size: 1.15rem; }
.near { font-family: var(--voice); }
.reading { padding: 6px 2px 0; }
.actions dd { font-family: var(--voice); font-size: 1.12rem; }
.lovesky { background: var(--paper); }
.pictured { background: none; border: 0; border-left: 2px solid var(--rose-c); border-radius: 0; padding: 4px 0 4px 20px; }
.pic-main { font-size: 1.55rem; }
.read-card { border-left: 1px solid var(--hair); }
.read-card b { font-family: var(--voice); font-size: 1.4rem; }
.side .side-card h3 { font-size: 1.35rem; }

/* ==========================================================================
   Palette v2, from colour psychology rather than habit:
   midnight indigo  – night, intuition, trust and calm (blue reads as safe and loyal)
   rose quartz      – tenderness; soft pink eases anxiety and invites intimate talk
   raspberry rose   – her heart, streak and love: warm, alive, never terracotta
   lavender mist    – the spiritual layer: her love angel, signs, Cupid’s Circle
   champagne        – thin lines and stars only
   blush white      – the paper: soft and warm without being cream
   ========================================================================== */
:root {
  --night: #1C2040; --night-2: #2E3263;
  --vellum: #FAF3F2; --paper: #FFFBFA;
  --rose-c: #C2476B; --blush: #F6D6DE; --quartz: #F4DDE3;
  --lav: #E9E4F6; --lav-d: #8C7FC0;
  --gold-l: #C4A469; --leaf: #6E9C82;
  --ink-t: #25233F; --soft: #6D6887; --hair: #EBDDE0;
  /* the old tokens, remapped so older rules follow */
  --bg: var(--vellum); --bg-alt: #F3E8EA; --line: var(--hair); --rose: var(--rose-c);
  --gold: #B08D52; --gold-soft: #FBF1F3; --ink: var(--night); --plum: var(--night-2); --text: var(--ink-t); --muted: var(--soft); --subtle: #9A95AE;
}
body { background-color: var(--vellum); background-image: radial-gradient(rgba(140, 100, 120, .03) 1px, transparent 1px); }
.link, .locked-cta, .pc-foot span:last-child { color: var(--rose-c); }

/* the night stage: midnight indigo with a lavender moon-glow */
.scene, .scene.sky-night, .scene.sky-dusk, .scene.sky-dawn, .scene.sky-day {
  background: radial-gradient(90% 70% at 50% 8%, #3B3F7A 0%, #262A55 45%, var(--night) 100%); color: #ECEAF8; }
.scene.sky-dawn { background: radial-gradient(90% 70% at 50% 8%, #5B4A7E 0%, #2E2F62 50%, var(--night) 100%); }
.n-hi, .scene-info h2 { color: #FFF6F8; }
.n-date, .scene-info p, .scene-info .kicker { color: #B9B6D9 !important; }
.glowball { background: radial-gradient(circle, rgba(246, 214, 222, .5), transparent 65%); }
.watered .rose-stage .heart-rose { filter: drop-shadow(0 0 24px rgba(246, 190, 210, .55)) drop-shadow(0 18px 30px rgba(0,0,0,.3)); }
.scene .ritual-steps li.now::before { border-color: var(--quartz); color: var(--quartz); }
.scene .streak-row .link { color: #F4C4D2; }
.scene .grow i { background: linear-gradient(90deg, #F4B6C6, var(--rose-c)); }
.hrt { color: #E0607F; }

/* the one call to action on the stage breathes like a heartbeat, so she knows where to start */
@keyframes heartbeat {
  0%, 60%, 100% { transform: scale(1); box-shadow: 0 10px 22px rgba(31, 138, 76, .3), 0 0 0 0 rgba(244, 214, 222, .55); }
  12% { transform: scale(1.045); }
  24% { transform: scale(1); }
  36% { transform: scale(1.03); box-shadow: 0 10px 22px rgba(31, 138, 76, .3), 0 0 0 14px rgba(244, 214, 222, 0); }
}
.scene #water, .scene #petal { animation: heartbeat 1.8s ease-in-out infinite; transform-origin: center; }
.scene #water:disabled, .scene #petal:disabled { animation: none; }
@media (prefers-reduced-motion: reduce) { .scene #water, .scene #petal { animation: none !important; } }

/* paper details in the new palette */
.affirm { border-left-color: var(--rose-c); }
.pictured { border-left-color: var(--rose-c); }
.number span { color: var(--rose-c); }
.gift.rare { background: linear-gradient(170deg, #FFF6E6, var(--paper)); }
.unlocked { border-left-color: var(--lav-d); background: linear-gradient(170deg, var(--lav), var(--paper) 60%); }
.locked { border-color: #D8C9DC; }
.angel-mark { color: var(--lav-d); }
.angel-door { background: linear-gradient(135deg, var(--night), var(--night-2)); }
.angel-door .angel-mark { color: var(--quartz); }
.bub.me p { background: var(--night-2); }
.bub.angel p { background: linear-gradient(170deg, var(--lav), var(--paper)); border-color: #DDD5EF; }
.ic { color: #5E528F; background: var(--lav); border-color: #D6CEEE; }
.ic.on { background: var(--night); border-color: var(--night); color: #fff; }
.book-cover { background: linear-gradient(135deg, #6E2445, #9C3560 55%, #B8466E); }
.spread { border-color: var(--hair); }
.page-r { background: linear-gradient(90deg, #F4E9EC, #FBF4F5 10%); border-left-color: var(--hair); }
.starters button, .gq-start { color: var(--rose-c); border-color: #EBCBD4; }
.tl.today .tl-dot { background: var(--rose-c); border-color: var(--rose-c); }
.tl.strong .tl-dot { background: #F6E7C8; border-color: var(--gold-l); }
.quest .grow i, .quests.compact .quest .grow i { background: var(--rose-c); }

/* the right column: a framed panel again, so the calendar holds its own beside the stage */
.side .calrail { background: var(--paper); border: 1px solid var(--hair); border-top: 3px solid var(--night-2); border-radius: var(--r-sheet);
  padding: 18px 20px 16px; box-shadow: 0 22px 40px -28px rgba(28, 32, 64, .45); }
.side .calrail .kicker { color: var(--night-2) !important; font-size: 1.15rem !important; }
.side .tl-more::after { background: linear-gradient(180deg, rgba(255,251,250,0), var(--paper) 90%); }
.side .side-card { box-shadow: 0 22px 40px -30px rgba(28, 32, 64, .35); }
.tl-hint { background: var(--lav); border: 0; border-radius: 10px; padding: 10px 12px; margin-top: 12px; color: var(--night-2) !important; }
.tl-hint b { color: var(--night) !important; }
/* after the ritual: point her down to the message */
.scene .read-now { max-width: 320px; margin: 6px auto 0; background: var(--yellow); color: #3A2E00; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.scene .read-now:hover { background: var(--yellow-d); }
.read-now .down { display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .read-now .down { animation: none; } }
#msg { scroll-margin-top: 80px; }
/* the journal's left page in the new paper */
.page-l { background: linear-gradient(90deg, var(--paper) 92%, #F5E9EC); }
textarea.lined { background: transparent repeating-linear-gradient(180deg, transparent 0 31px, #EFD9DF 31px 32px); }
.bookpage { background: var(--paper) repeating-linear-gradient(180deg, transparent 0 29px, #F3E4E8 29px 30px); background-position: 0 58px; border-color: var(--hair); }
.help { color: #6C5FA8; border-color: #D9D1EE; box-shadow: 0 0 14px rgba(140,127,192,.25); }
/* "My Love Portal" sits under the brand as its subtitle */
.ln-logo { display: flex; flex-direction: column; line-height: 1.1; }
.ln-sub { font: italic 500 .95rem var(--voice); color: #E9C9D3; letter-spacing: .01em; margin-top: 1px; padding-left: 1.05em; }

/* the advisors */
.tabs { grid-template-columns: repeat(6, 1fr); }
.tabs a { font-size: .74rem; }
.adv-hero { margin: 18px 0 18px; }
.adv-hero h1 { font-size: 2.5rem; line-height: 1.08; }
.adv-free { font-size: .9rem; color: var(--ink-t); background: var(--lav); border-radius: 10px; padding: 9px 12px; display: inline-block; margin: 4px 0 0; }
.adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 20px; }
@media (max-width: 700px) { .adv-grid { grid-template-columns: 1fr; } .adv-hero h1 { font-size: 2rem; } }
.adv-card { display: flex; gap: 14px; align-items: flex-start; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 16px; text-decoration: none; color: var(--ink-t); }
.adv-card:hover { border-color: var(--lav-d); }
.adv-card.first { background: linear-gradient(135deg, var(--night), var(--night-2)); border: 0; color: #ECEAF8; margin-bottom: 18px; padding: 20px; }
.adv-card.first b { color: #FFF6F8; } .adv-card.first p, .adv-card.first .adv-role, .adv-card.first .adv-style { color: #C4C0E2; }
.adv-body { flex: 1; min-width: 0; }
.adv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.adv-card b { font: 600 1.5rem/1.1 var(--voice); }
.adv-on { font-size: .78rem; color: var(--leaf); font-weight: 600; white-space: nowrap; }
.adv-on i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3FB86B; margin-right: 5px; vertical-align: 1px; }
.adv-card.first .adv-on { color: #9FE0B5; }
.adv-role { display: block; font: italic 500 1.05rem var(--voice); color: var(--soft); margin: 1px 0 6px; }
.adv-card p { margin: 0 0 10px; color: var(--soft); font-size: .93rem; line-height: 1.5; }
.adv-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; flex-wrap: wrap; }
.angel-head .adv-meta { justify-content: flex-start; margin-top: 8px; }
.adv-style { font-size: .82rem; color: var(--soft); }
.adv-go { background: #1F8A4C; color: #fff; font-weight: 600; font-size: .85rem; padding: 7px 14px; border-radius: 999px; }
.adv-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.adv-filter a { text-decoration: none; font-size: .9rem; color: var(--ink-t); background: var(--paper); border: 1px solid var(--hair); padding: 7px 13px; border-radius: 999px; }
.adv-filter a.on { background: var(--night); color: #fff; border-color: var(--night); }
.adv-mine { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 16px; }
.adv-mine a { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; font-size: .8rem; color: var(--ink-t); }
.adv-mine .adv-ava { width: 46px; height: 46px; font-size: 1.3rem; }
.adv-ava { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #FFF6F8; font-size: 1rem; box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 6px 14px rgba(28,32,64,.25); }
.adv-ava.lg { width: 60px; height: 60px; font-size: 1.7rem; }
.feels.topics { justify-content: flex-start; margin: 4px 0 16px; }
.feels.topics button { font-size: 1.05rem; }
.chat-row .adv-ava { width: 36px; height: 36px; }

/* the manifestation journal */
.bc-line { font: italic 500 1.15rem var(--voice); margin: 2px 0 10px; opacity: .85; }
.mj-step { display: flex; align-items: center; gap: 10px; font: 600 1.25rem var(--voice); color: var(--ink-t); margin: 22px 0 8px; }
.mj-step:first-of-type { margin-top: 6px; }
.mj-step span { width: 26px; height: 26px; border-radius: 50%; background: var(--night); color: #fff; font: 600 .8rem var(--ui, 'Outfit', sans-serif); display: grid; place-items: center; flex: none; }
.page-l .help { margin-top: 8px; }
.mj-thanks { display: grid; gap: 8px; }
.mj-thanks label { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--hair); padding: 4px 0; }
.mj-thanks span { font: italic 500 1.1rem var(--voice); color: var(--rose-c); white-space: nowrap; }
.mj-thanks input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 1.1rem var(--voice); color: var(--ink-t); padding: 2px 0; }
.mj-thanks input:focus { outline: none; }
.mj-affirm { margin: 0 0 8px; padding: 16px 18px; background: var(--quartz); border-radius: 12px; font: italic 600 1.45rem/1.3 var(--voice); color: var(--ink-t); text-align: center; }
.mj-said { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .92rem; color: var(--soft); }
.mj-script-mini { display: block; margin: 14px 0; padding: 14px 16px; border-radius: 12px; background: var(--night); color: #ECEAF8; text-decoration: none; }
.mj-script-mini b { display: block; font: 600 1.2rem var(--voice); color: #FFF6F8; }
.mj-script-mini span { display: block; font: italic 500 1.02rem/1.35 var(--voice); color: #C4C0E2; margin: 4px 0 8px; }
.mj-script-mini em { font-style: normal; font-weight: 600; font-size: .85rem; color: #F4C4D2; }
.mj-script { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 24px; margin: 14px 0; }
.mj-script h2 { margin: 2px 0 6px; }
.mj-script textarea { width: 100%; min-height: 260px; margin: 10px 0; }
.mj-read { text-align: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.he-thanks { margin: 6px 0; padding-left: 18px; font: italic 500 1.05rem var(--voice); color: var(--soft); }
.he-said { font-size: .85rem; color: var(--leaf); margin: 4px 0; }

/* compatibility: bonds */
.bd-pair { display: inline-flex; flex: none; }
.bd-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 1.2rem var(--voice); color: #FFF6F8; box-shadow: 0 0 0 3px var(--paper); }
.bd-ava.me { background: linear-gradient(150deg, #3B3F7A, #1C2040); }
.bd-ava.love { background: linear-gradient(150deg, #C2476B, #6B2442); margin-left: -12px; }
.bd-ava.friend { background: linear-gradient(150deg, #6E9C82, #27443A); margin-left: -12px; }
.bd-pair.big .bd-ava { width: 64px; height: 64px; font-size: 1.9rem; }
.bd-pair.big .bd-ava + .bd-ava { margin-left: -18px; }
.person-card.bond { align-items: center; gap: 14px; }
.person-card.bond > div:nth-child(2) { flex: 1; min-width: 0; }
.bd-name { margin: 0 0 4px; font: italic 600 1.15rem var(--voice); color: var(--night-2); }
.bd-name span { font: 400 .8rem var(--ui, 'Outfit', sans-serif); font-style: normal; color: var(--soft); margin-left: 8px; }
.bd-plus { width: 40px; height: 40px; border-radius: 50%; border: 1.5px dashed var(--lav-d); display: grid; place-items: center; color: var(--lav-d); font-size: 1.3rem; flex: none; }
.bd-hero { display: flex; align-items: center; gap: 20px; margin: 16px 0 14px; flex-wrap: wrap; }
.bd-hero > div:nth-child(2) { flex: 1; min-width: 220px; }
.bd-hero h1 { margin: 2px 0 4px; }
.bd-sub { margin: 0; color: var(--soft); font-size: .92rem; }
.bd-tabs { margin-bottom: 14px; }
.bd-text h3 { font: 600 1.3rem var(--voice); margin: 0 0 4px; }
.bd-text h3 + p { margin-top: 0; }
.bd-text p { line-height: 1.6; }
.bd-text p + h3 { margin-top: 16px; }
.bd-days { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.bd-days span { background: var(--lav); border-radius: 12px; padding: 10px 14px; font-size: .85rem; color: var(--soft); display: flex; flex-direction: column; }
.bd-days span b { color: var(--ink-t); font-size: .95rem; }
.bd-days span.lk { filter: blur(0); opacity: .6; }
.bd-advs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.bd-adv { display: flex; gap: 10px; align-items: center; background: var(--paper); border: 1px solid var(--hair); border-radius: 14px; padding: 10px 12px; text-decoration: none; color: var(--ink-t); }
.bd-adv:hover { border-color: var(--lav-d); }
.bd-adv span { display: flex; flex-direction: column; font-size: .82rem; color: var(--soft); }
.bd-adv b { font: 600 1.15rem var(--voice); color: var(--ink-t); }
.bd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.bd-chips input { position: absolute; opacity: 0; }
.bd-chips span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair); background: var(--paper); cursor: pointer; font-size: .92rem; }
.bd-chips input:checked + span { background: var(--night); color: #fff; border-color: var(--night); }
.bd-chips input:focus-visible + span { outline: 2px solid var(--lav-d); outline-offset: 2px; }
.bd-invite { background: var(--lav); border-radius: var(--r-sheet); padding: 18px 20px; margin: 18px 0; }
.bd-invite h3 { font: 600 1.35rem var(--voice); margin: 0 0 4px; }
.bd-invite p { margin: 0 0 12px; color: var(--ink-t); }
.bd-link { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.bd-link input { flex: 1; min-width: 180px; font-size: .85rem; }
.bd-guest { max-width: 520px; margin: 30px auto; text-align: center; }
.bd-guest .bd-pair { margin: 10px 0; }
.bd-guest .bd-form { text-align: left; }
.bd-lede { font: italic 500 1.3rem/1.45 var(--voice); color: var(--ink-t); }
.cr-about { display: flex; align-items: center; gap: 10px; color: var(--soft); font-size: .9rem; margin: 6px 0 0; }
.cr-about .bd-ava { width: 28px; height: 28px; font-size: .9rem; }

/* credits */
.ln-credits { color: #F3DDA0; text-decoration: none; font-weight: 600; font-size: .9rem; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(243,221,160,.4); margin-right: 8px; }
.cr-hero { text-align: center; margin: 22px 0 18px; }
.cr-big { font: 600 3.4rem/1 var(--voice); color: var(--night); margin: 6px 0; }
.cr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .cr-two { grid-template-columns: 1fr; } }
.cr-two h3 { font: 600 1.35rem var(--voice); margin: 0 0 6px; }
.cr-list { margin: 0 0 12px; padding-left: 18px; line-height: 1.7; color: var(--soft); }
.cr-list b { color: var(--ink-t); }
.cr-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.cr-row:last-child { border: 0; }
.cr-row small { display: block; color: var(--soft); font-size: .78rem; }
.cr-row b.in { color: #1F8A4C; } .cr-row b.out { color: var(--soft); }
.cr-need { text-align: center; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 24px; margin: 16px 0; }
.cr-need h3 { font: 600 1.5rem var(--voice); margin: 4px 0; }
.cr-need .btn { margin: 6px 4px; }
.cr-pay { display: inline-block; margin-top: 10px; }
.tabs { grid-template-columns: repeat(5, 1fr); }
.bd-form input[type=time] { width: 100%; max-width: 220px; display: block; }
body.guest .ln-right { visibility: hidden; }

/* the chat window (Messenger style, like the chat funnel) */
body.chatting .main { max-width: 980px; }
.cw { display: flex; height: calc(100vh - 120px); min-height: 520px; max-height: 860px; margin: 14px 0; background: #fff; border: 1px solid var(--hair); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(28,32,64,.12); }
.cw-side { width: 270px; flex: none; border-right: 1px solid #ECE8F0; padding: 26px 20px; overflow-y: auto; text-align: center; background: #FCFAFB; }
.cw-side h2 { font: 600 1.7rem var(--voice); margin: 10px 0 0; }
.cw-role { margin: 0; font: italic 500 1.1rem var(--voice); color: var(--soft); }
.cw-on { font-size: .82rem; color: #31A24C; margin: 6px 0 0; }
.cw-on i, .cw-hava i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #31A24C; margin-right: 5px; }
.cw-side hr { border: 0; border-top: 1px solid #ECE8F0; margin: 16px 0; }
.cw-tags { list-style: none; padding: 0; margin: 0; text-align: left; font-size: .88rem; color: var(--ink-t); display: grid; gap: 6px; }
.cw-tags li::before { content: '✦'; color: var(--lav-d); margin-right: 8px; }
.cw-bio { font: italic 500 1.05rem/1.45 var(--voice); color: var(--ink-t); margin: 0 0 10px; }
.cw-badge { font-size: .75rem; color: var(--soft); background: var(--lav); border-radius: 999px; padding: 5px 10px; display: inline-block; margin: 0 0 14px; }
.cw-new { display: block; width: 100%; margin-bottom: 16px; }
.cw-sl { text-align: left; font-size: .78rem; color: var(--soft); margin: 0 0 6px; }
.cw-past { display: block; text-align: left; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ink-t); }
.cw-past:hover, .cw-past.on { background: var(--lav); }
.cw-past b { display: block; font-weight: 500; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-past span { font-size: .74rem; color: var(--soft); }
.cw-sos { font-size: .7rem; color: var(--soft); margin: 16px 0 0; line-height: 1.45; }
.adv-ava.xl { width: 96px; height: 96px; font-size: 2.6rem; margin: 0 auto; }
.adv-ava.sm { width: 28px; height: 28px; font-size: .8rem; box-shadow: none; }
.adv-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cw-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cw-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #ECE8F0; min-height: 64px; }
.cw-back { font-size: 1.8rem; line-height: 1; color: var(--soft); text-decoration: none; padding: 0 6px; display: none; }
.cw-hava { position: relative; }
.cw-hava .adv-ava { width: 42px; height: 42px; font-size: 1.2rem; box-shadow: none; }
.cw-hava i { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; margin: 0; border: 2px solid #fff; }
.cw-hname { flex: 1; display: flex; flex-direction: column; }
.cw-hname b { font-size: 1rem; font-weight: 600; }
.cw-hname small { font-size: .8rem; color: #31A24C; }
.cw-cr { font-size: .85rem; font-weight: 600; color: var(--night-2); background: var(--lav); padding: 5px 10px; border-radius: 999px; text-decoration: none; }
.cw-about { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--soft); margin: 0; padding: 8px 16px; background: #FCFAFB; border-bottom: 1px solid #ECE8F0; }
.cw-about .bd-ava { width: 24px; height: 24px; font-size: .75rem; box-shadow: 0 0 0 2px #fff; }
.cw-about .bd-ava + .bd-ava { margin-left: -8px; }
.cw-msgs { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 2px; }
.cw-row { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.cw-row.me { margin-left: auto; flex-direction: row-reverse; }
.cw-row + .cw-row.me:not(.me + .me), .cw-row.me + .cw-row.bot { margin-top: 10px; }
.cw-slot { width: 28px; flex: none; }
.cw-bub { padding: 9px 13px; font: 400 .98rem/1.45 'Outfit', sans-serif; background: #EFEBF3; color: #1E1C33; }
.cw-row.me .cw-bub { background: var(--night-2); color: #fff; }
.cw-row.bot .cw-bub.single { border-radius: 18px 18px 18px 4px; } .cw-row.bot .cw-bub.first { border-radius: 18px 18px 18px 4px; }
.cw-row.bot .cw-bub.middle { border-radius: 4px 18px 18px 4px; } .cw-row.bot .cw-bub.last { border-radius: 4px 18px 18px 18px; }
.cw-row.me .cw-bub.single { border-radius: 18px 18px 4px 18px; } .cw-row.me .cw-bub.first { border-radius: 18px 18px 4px 18px; }
.cw-row.me .cw-bub.middle { border-radius: 18px 4px 4px 18px; } .cw-row.me .cw-bub.last { border-radius: 18px 4px 18px 18px; }
.cw-typing { display: flex; gap: 4px; padding: 13px 14px; }
.cw-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9A95AE; animation: cwdot 1.2s infinite; }
.cw-typing i:nth-child(2) { animation-delay: .15s; } .cw-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cwdot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.cw-replies { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 6px 16px 10px; }
.cw-replies button { background: #fff; border: 1.5px solid var(--night-2); color: var(--night-2); border-radius: 999px; padding: 7px 14px; font: 500 .9rem 'Outfit', sans-serif; cursor: pointer; }
.cw-replies button:hover { background: var(--lav); }
.cw-input { display: flex; align-items: center; gap: 8px; margin: 0 12px; padding: 4px 6px 4px 14px; background: #F1EEF4; border-radius: 24px; }
.cw-input:focus-within { box-shadow: 0 0 0 2px var(--night-2); }
.cw-input textarea { flex: 1; border: 0; background: none; resize: none; font: 400 .98rem/1.4 'Outfit', sans-serif; padding: 9px 0; max-height: 120px; min-height: 0; box-shadow: none; }
.cw-input textarea:focus { outline: none; }
.cw-send { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #1F8A4C; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.cw-note { font-size: .74rem; color: var(--soft); text-align: center; margin: 6px 12px 10px; }
.cw-need { margin: 14px auto 0; max-width: 440px; text-align: center; background: #FCFAFB; border: 1px solid #ECE8F0; border-radius: 16px; padding: 16px; font-size: .92rem; }
.cw-need .btn { margin: 4px; }
@media (max-width: 767px) {
  .cw-side { display: none; }
  .cw-back { display: block; }
  body.chatting .tabs { display: none; }
  body.chatting .main { padding: 0; }
  .cw { height: calc(100dvh - 58px); max-height: none; margin: 0; border-radius: 0; border: 0; box-shadow: none; }
}

/* earning credits */
.earn { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 16px 18px; margin: 16px 0; }
.earn-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.earn-top b { font: 600 1.3rem var(--voice); }
.earn-top span { font-size: .85rem; color: var(--soft); }
.earn-top a { color: var(--night-2); font-weight: 600; text-decoration: none; }
.earn-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
@media (max-width: 600px) { .earn-list { grid-template-columns: 1fr; } }
.earn-list a { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink-t); font-size: .9rem; padding: 5px 0; }
.earn-list i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--lav-d); display: grid; place-items: center; font-style: normal; font-size: .7rem; flex: none; }
.earn-list a.done { color: var(--soft); text-decoration: line-through; }
.earn-list a.done i { background: #1F8A4C; border-color: #1F8A4C; color: #fff; }
.earn-list em { margin-left: auto; font-style: normal; font-weight: 600; font-size: .8rem; color: var(--night-2); white-space: nowrap; }
.won { background: rgba(243,221,160,.18); border: 1px solid rgba(243,221,160,.45); border-radius: 10px; padding: 8px 12px; color: #F3DDA0; }
.won a { color: #fff; }
.read-earn { margin-top: 20px; text-align: center; }
.read-earn p { color: #1F8A4C; font-weight: 600; }
.lk-cr { margin: 8px 0 0 8px; }

@keyframes crpop { 40% { transform: scale(1.25); background: rgba(243,221,160,.3); } }
.cw { width: 100%; max-width: 100%; }
.cw-replies button { white-space: normal; text-align: left; max-width: 100%; }
@media (max-width: 767px) {
  body.chatting .page { display: block; padding: 0; }
  body.chatting .main { max-width: 100%; margin: 0; }
}
@media (max-width: 480px) {
  .ln-credits, .ln-streak { padding: 4px 8px !important; font-size: .8rem !important; margin-right: 4px !important; }
  .ln-right { gap: 4px !important; }
  .ln-letters svg { width: 20px; height: 20px; }
}
.ritual-steps li { align-items: flex-start; }
.ritual-steps li small { display: block; font: normal 500 .72rem 'Outfit', sans-serif; letter-spacing: .01em; opacity: .75; margin-top: 1px; }
.scene .ritual-steps li small { padding-left: 28px; color: #F3DDA0; opacity: .9; }

/* the message pop-up, confetti */
.pop { position: fixed; inset: 0; z-index: 200; background: rgba(20,22,48,.62); display: grid; place-items: center; padding: 16px; animation: popbg .25s ease; }
.pop-card { position: relative; background: var(--paper); border-radius: 22px; max-width: 560px; width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 30px 28px 24px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: popin .35s cubic-bezier(.2,1.4,.4,1); }
.pop-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 1.8rem; line-height: 1; color: var(--soft); cursor: pointer; }
.pop-kick { font: italic 500 1.05rem var(--voice); color: var(--soft); margin: 0 0 6px; }
.pop-big { font: 600 3.4rem/1 var(--voice); color: #B8860B; margin: 4px 0 8px; }
.pop-card h2 { margin: 0 0 8px; }
.pop-bonus { display: inline-block; background: #FFF4CC; color: #7A5A00; border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .9rem; margin: 0 0 12px; }
.pop-read { text-align: left; margin: 6px 0 14px; padding: 0; border: 0; box-shadow: none; background: none; }
.pop-card .btn { margin-top: 6px; }
body.popped { overflow: hidden; }
@keyframes popbg { from { opacity: 0; } }
@keyframes popin { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 250; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall 3s ease-in forwards; }
@keyframes fall { to { transform: translate(var(--x), 105vh) rotate(var(--r)); opacity: .9; } }
.hint-cr { font-size: .85rem; color: #D9CFF0; margin: 12px 0 0; }
.hint-cr::before { content: '✦ '; color: #F3C94A; }
.msg-again { margin: 12px 0 0; }
.msg-again .link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.scene #unlockMsg { animation: heartbeat 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .scene #unlockMsg, .pop, .pop-card { animation: none; } }

/* the menu on phones */
.ln-burger { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-left: 4px; }
.ln-burger i { display: block; width: 20px; height: 2px; background: #EDE6F2; border-radius: 2px; }
.drawer { position: fixed; inset: 0; z-index: 150; background: rgba(20,22,48,.5); opacity: 0; pointer-events: none; transition: opacity .2s; }
.dr-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--paper); padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 24px; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; }
body.menu-open .drawer { opacity: 1; pointer-events: auto; }
body.menu-open .dr-panel { transform: none; }
.dr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dr-top > div { flex: 1; display: flex; flex-direction: column; }
.dr-top b { font: 600 1.3rem var(--voice); }
.dr-top span { font-size: .8rem; color: var(--soft); }
.dr-top button { border: 0; background: none; font-size: 1.8rem; color: var(--soft); cursor: pointer; }
.dr-me { width: 42px; height: 42px; border-radius: 50%; background: var(--night-2); color: #fff; display: grid; place-items: center; font-weight: 600; }
.dr-panel a { display: flex; justify-content: space-between; align-items: center; padding: 12px 10px; border-radius: 10px; text-decoration: none; color: var(--ink-t); font: 600 1.35rem var(--voice); }
.dr-panel a.on { background: var(--lav); }
.dr-panel a.dr-sm { font: 500 .98rem 'Outfit', sans-serif; padding: 10px; }
.dr-panel a em { font-style: normal; font-size: .8rem; color: var(--night-2); background: var(--lav); padding: 2px 8px; border-radius: 999px; }
.dr-panel hr { border: 0; border-top: 1px solid var(--hair); margin: 10px 0; width: 100%; }
@media (max-width: 959px) {
  .ln-burger { display: flex; }
  .ln-right .avatar, .ln-letters { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .drawer, .dr-panel { transition: none; } }
.ln-credits.bump { animation: crpop .6s ease; }
#msg.just-open { animation: msgopen .9s ease; }
@keyframes msgopen { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { #msg.just-open { animation: none; } }
.ln-credits.bump { animation: crpop .6s ease; }
#msg.just-open { animation: msgopen .9s ease; }
@keyframes msgopen { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { #msg.just-open { animation: none; } }

/* the love garden, in the side */
.garden-mini { display: block; text-decoration: none; color: var(--ink-t); border-top: 3px solid var(--leaf) !important; }
.garden-mini h3 { margin: 6px 0 10px; }
.gm-petals { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-bottom: 12px; }
.gm-petals .petal-dot { width: 100%; aspect-ratio: 3 / 4; height: auto; }
.gm-petals .gm-miss { opacity: .55; }
.gm-line { font-size: .85rem; color: var(--soft); margin: 0 0 6px; line-height: 1.45; }
.gm-line b { color: var(--ink-t); }

/* the daily habit */
.adv-note { display: flex; gap: 14px; align-items: flex-start; background: var(--paper); border: 1px solid var(--hair); border-left: 4px solid var(--lav-d); border-radius: var(--r-sheet); padding: 16px 18px; margin: 16px 0; text-decoration: none; color: var(--ink-t); }
.adv-note:hover { border-color: var(--lav-d); }
.adv-note .adv-ava { width: 46px; height: 46px; font-size: 1.3rem; }
.adv-note > div { flex: 1; min-width: 0; }
.an-who { margin: 0 0 4px; font-size: .88rem; color: var(--soft); }
.an-who b { color: var(--ink-t); font-weight: 600; }
.an-who span { margin-left: 6px; font: italic 500 .95rem var(--voice); }
.an-text { margin: 0 0 8px; font: 500 1.2rem/1.45 var(--voice); color: var(--ink-t); }
.an-go { font-size: .88rem; font-weight: 600; color: #1F8A4C; }
.dd { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 16px 18px; margin: 16px 0; }
.dd-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dd-top .link { background: none; border: 0; padding: 0; cursor: pointer; font: 600 .9rem 'Outfit', sans-serif; }
.dd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .dd-cols { grid-template-columns: 1fr; gap: 10px; } }
.dd h3 { font: 600 1.35rem var(--voice); margin: 0 0 6px; }
.dd-cols > div:first-child h3 { color: #1F8A4C; } .dd-cols > div:last-child h3 { color: var(--rose-c); }
.dd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dd li { font-size: .95rem; line-height: 1.4; padding-left: 16px; position: relative; }
.dd li::before { content: '✦'; position: absolute; left: 0; font-size: .7rem; top: 4px; color: var(--lav-d); }
.ptoday { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 16px 18px; margin: 16px 0; }
.ptoday > a { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink-t); padding: 10px 0; border-top: 1px solid var(--hair); }
.ptoday .bd-ava { width: 32px; height: 32px; font-size: .95rem; }
.ptoday b { font-weight: 600; font-size: .95rem; } .ptoday b span { color: var(--soft); font-weight: 400; font-size: .82rem; margin-left: 6px; }
.ptoday p { margin: 2px 0 0; font-size: .88rem; color: var(--soft); }
.tonight-wait { display: flex; gap: 12px; align-items: center; background: var(--lav); border-radius: 14px; padding: 12px 16px; margin: 12px 0; }
.tonight-wait .moon-s { font-size: 1.5rem; color: var(--night-2); }
.tonight-wait b { display: block; font: 600 1.15rem var(--voice); } .tonight-wait span { font-size: .85rem; color: var(--soft); }
.mj-day { background: var(--lav); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.mj-int { font: italic 600 1.2rem var(--voice); margin: 0; color: var(--ink-t); }
.mj-intf { display: flex; gap: 8px; } .mj-intf input { flex: 1; min-width: 0; } .mj-intf .btn { padding: 8px 16px; }
.mj-closed { margin: 0; font-size: .9rem; color: var(--ink-t); }
.ev-q { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; font-size: .9rem; flex-wrap: wrap; }
.ev-q button { border: 1px solid var(--night-2); background: #fff; color: var(--night-2); border-radius: 999px; padding: 4px 12px; font: 500 .82rem 'Outfit', sans-serif; cursor: pointer; margin-left: 4px; }
.ev-q button.on { background: var(--night-2); color: #fff; }
.otd { background: linear-gradient(135deg, var(--night), var(--night-2)); color: #ECEAF8; border-radius: var(--r-sheet); padding: 18px 22px; margin: 14px 0; }
.otd .kicker { color: #C4C0E2 !important; }
.otd-q { font: italic 500 1.35rem/1.45 var(--voice); color: #FFF6F8; margin: 6px 0 8px; }
.otd .muted { color: #C4C0E2 !important; }
.mj-true { margin: 14px 0 6px; padding-top: 14px; border-top: 1px solid var(--hair); }
.mj-true button { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 10px 14px; margin: 6px 0; font: 500 1.08rem/1.4 var(--voice); color: var(--ink-t); cursor: pointer; }
.mj-true button.on { background: #EAF6EE; border-color: #1F8A4C; color: #14532D; }
.mj-true button small { display: block; font: 500 .75rem 'Outfit', sans-serif; color: #1F8A4C; margin-top: 2px; }
.mj-intf { flex-direction: column; align-items: stretch; }
.mj-intf input { width: 100%; padding: 10px 12px; }
.mj-intf .btn { align-self: flex-start; padding: 8px 20px; font-size: .9rem; }

/* the stage, once the ritual is done: a slim bar */
.scene.compact { padding: 16px 20px; min-height: 0; }
.sc-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; }
.sc-rose { width: 64px; height: 64px; flex: none; overflow: hidden; display: grid; place-items: center; }
.sc-rose svg { width: 64px; height: 64px; }
.sc-txt { flex: 1; min-width: 180px; }
.sc-hi { margin: 0; font: italic 500 1.35rem var(--voice); color: #FFF4F0; }
.sc-sub { margin: 2px 0 0; font-size: .85rem; color: #C4C0E2; }
.scene.compact .read-now { margin: 0; padding: 10px 20px; font-size: .95rem; }
@media (max-width: 560px) { .scene.compact .read-now { width: 100%; } }
/* tomorrow's first look */
.tomorrow { background: linear-gradient(135deg, var(--night), var(--night-2)); color: #ECEAF8; border-radius: var(--r-sheet); padding: 18px 22px; margin: 14px 0; }
.tomorrow .kicker { color: #C4C0E2 !important; }
.tomorrow h3 { font: 600 1.5rem var(--voice); color: #FFF6F8; margin: 4px 0 6px; }
.tomorrow p { color: #E3DFF5; }
.tomorrow .muted { color: #C4C0E2 !important; }
/* quests in the side column */
.side .quests { background: var(--paper); border: 1px solid var(--hair); border-top: 3px solid #C9A032; border-radius: var(--r-sheet); padding: 16px 18px; margin-bottom: 18px; }
.side .quests .sec-row { flex-wrap: wrap; gap: 4px; }
.side .quests.compact { display: block; }
/* quests in the side column: room to breathe */
.side .quests .sec-row { display: block; margin-bottom: 8px; }
.side .quests .sec-row .kicker { font-size: 1.15rem !important; }
.side .quests .sec-row .muted { display: block; font-size: .8rem; margin-top: 2px; }
.side .quests.compact .quest { grid-template-columns: 24px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--hair); }
.side .quests .q-check { width: 22px; height: 22px; margin-top: 1px; }
.side .quests .quest b { display: block; font-size: .9rem; line-height: 1.35; font-weight: 600; }
.side .quests .quest .grow { margin-top: 9px; height: 5px; }
.side .quests .q-n { font-size: .82rem; padding-top: 2px; }
.side .quests .q-reward { font-size: .82rem; line-height: 1.5; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); }
.sc-cr { margin: 6px 0 0; font-size: .85rem; color: #E3DFF5; }
.sc-cr b { color: #F3DDA0; font-weight: 600; }
.scene.compact .read-now { flex: 0 0 auto; width: auto; max-width: none; white-space: nowrap; }
@media (max-width: 560px) { .scene.compact .read-now { flex: 1 1 100%; width: 100%; } }

/* the slim bar, made beautiful */
.scene.compact { padding: 0; overflow: hidden; }
.scene.compact .sc-row { padding: 20px 24px 18px; gap: 20px; flex-wrap: nowrap; }
.scene.compact .sc-rose { position: relative; width: 84px; height: 84px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: visible;
  background: conic-gradient(#F3C94A calc(var(--p) * 1%), rgba(255,255,255,.12) 0); padding: 3px; }
.scene.compact .sc-rose::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #3E3A78 0%, #1F2248 70%); }
.scene.compact .sc-glow { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(244,196,210,.35), transparent 70%); }
.scene.compact .sc-rose svg { position: relative; width: 66px; height: 66px; }
.sc-txt { min-width: 0; }
.scene.compact .sc-hi { margin: 0; font: italic 500 1.05rem var(--voice); color: #C4C0E2; }
.sc-h { margin: 0 0 8px; font: 600 1.7rem/1.1 var(--voice); color: #FFF6F8; letter-spacing: .005em; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chips span { font-size: .78rem; font-weight: 500; color: #E3DFF5; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.sc-chips .hrt { font-style: normal; color: #F4A6BC; }
.sc-chips .gold { color: #F3DDA0; background: rgba(243,201,74,.12); border-color: rgba(243,201,74,.35); }
.scene.compact .read-now { margin-left: auto; }
.sc-next { display: flex; align-items: center; gap: 10px; padding: 11px 24px; background: rgba(0,0,0,.18); border-top: 1px solid rgba(255,255,255,.07); font-size: .85rem; color: #D9D4F0; }
.sc-next span:nth-child(2) { flex: 1; }
.sc-next b { color: #F3DDA0; font-weight: 600; white-space: nowrap; }
.sc-moon { color: #F3DDA0; font-size: 1.05rem; }
@media (max-width: 640px) {
  .scene.compact .sc-row { flex-wrap: wrap; gap: 14px; padding: 18px 18px 14px; }
  .scene.compact .sc-rose { width: 68px; height: 68px; } .scene.compact .sc-rose svg { width: 54px; height: 54px; }
  .sc-txt { flex: 1; } .sc-h { font-size: 1.45rem; }
  .scene.compact .read-now { margin-left: 0; }
  .sc-next { padding: 10px 18px; font-size: .8rem; align-items: flex-start; }
}

/* the 7-day streak calendar */
.lw { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 16px 18px; margin: 16px 0; }
.lw .dd-top { flex-wrap: wrap; gap: 4px; }
.lw-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.lw-t { position: relative; border-radius: 12px; padding: 8px 2px 9px; text-align: center; background: #F4F0F6; border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.lw-t small { font-size: .68rem; color: var(--soft); white-space: nowrap; }
.lw-t b { font: 700 .95rem 'Outfit', sans-serif; color: var(--night-2); }
.lw-t.done { background: #EAF6EE; } .lw-t.done b { color: #1F8A4C; }
.lw-t.now { background: #FFF6D6; border-color: #F3C94A; box-shadow: 0 0 0 3px rgba(243,201,74,.25); }
.lw-t.now b { color: #8A6400; }
.lw-t.next { opacity: .75; }
.lw-t.chest { background: linear-gradient(160deg, #2E3263, #1C2040); } .lw-t.chest small { color: #C4C0E2; } .lw-t.chest b { color: #F3DDA0; }
.lw-t.chest.done { background: #1F8A4C; } .lw-t.chest.done b { color: #fff; }
.lw-chest { display: block; width: 22px; height: 16px; border-radius: 3px 3px 4px 4px; background: linear-gradient(#E9B949 0 40%, #C98F1E 40% 46%, #E9B949 46%); box-shadow: inset 0 0 0 1.5px #8A6400; position: relative; }
.lw-chest::after { content: ''; position: absolute; left: 50%; top: 4px; width: 4px; height: 5px; margin-left: -2px; background: #8A6400; border-radius: 1px; }
.lw-foot { margin: 10px 0 0; font-size: .85rem; color: var(--soft); }
.lw-foot b { color: var(--ink-t); }
@media (max-width: 420px) { .lw-row { gap: 4px; } .lw-t small { font-size: .6rem; } .lw-t b { font-size: .82rem; } }

/* near-miss on the reel */
.reel .nm { opacity: .55; filter: saturate(1.3) drop-shadow(0 0 10px rgba(201,69,63,.7)); margin-left: 6px; animation: nmpulse 1.4s ease-in-out 2; }
.reel .nm-t { font: italic 500 .95rem var(--voice); color: #F4A6BC; margin-left: 4px; }
.reel.near { flex-wrap: wrap; }
@keyframes nmpulse { 50% { opacity: .9; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .reel .nm { animation: none; } }

/* her level */
.lv { margin: 4px 0 10px; }
.lv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lv-top b { font-size: .88rem; color: var(--ink-t); font-weight: 600; }
.lv-top span { font-size: .75rem; color: var(--soft); }
.lv .grow { height: 6px; margin: 6px 0; background: #EFEAF2; border-radius: 999px; overflow: hidden; }
.lv .grow i { display: block; height: 100%; background: linear-gradient(90deg, #6E9C82, #1F8A4C); border-radius: 999px; }
.lv p { margin: 0; font-size: .8rem; color: var(--soft); line-height: 1.45; }
.lv p b { color: var(--ink-t); }
.hint-cr b { color: #F3DDA0; }
.pop-lines { display: block; margin: 4px auto 12px; max-width: 300px; text-align: left; }
.pop-lines span { display: block; padding: 7px 12px; margin: 5px 0; background: #FFF6D6; border-radius: 10px; color: #6B4E00; font-weight: 600; font-size: .92rem; }
.pop { z-index: 1200; } .confetti { z-index: 1250; }   /* the credits pop-up comes first, then the rose celebration underneath */
/* the slot counter */
.slot-wrap { display: flex; justify-content: center; align-items: center; gap: 8px; }
.slot { display: inline-block; min-width: 1.6em; padding: 2px 14px; border-radius: 14px; background: #1C2040; color: #F3DDA0; font: 700 3rem/1.2 'Outfit', sans-serif; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 2px #C9A032, 0 8px 20px rgba(28,32,64,.25); }
.slot.bump { animation: slotbump .12s ease; }
.slot.hot { background: #C9A032; color: #fff; box-shadow: 0 0 0 4px rgba(243,201,74,.4), 0 0 30px rgba(243,201,74,.7); }
@keyframes slotbump { from { transform: translateY(-6px); opacity: .5; } }
.slot-near { margin: 6px 0 0; font: italic 600 1.15rem var(--voice); color: var(--rose-c); animation: nmpulse 1s ease 1; }
.slot-after { opacity: 0; max-height: 0; overflow: hidden; transition: opacity .4s, max-height .5s; }
.slot-after.show { opacity: 1; max-height: 600px; }
.slot-after h2 { margin: 4px 0 6px; }
@media (prefers-reduced-motion: reduce) { .slot.bump, .slot-near { animation: none; } .slot-after { transition: none; } }

/* the slot, redesigned: a drum, and a meter that shows how close she came */
.sl-drum { position: relative; width: 150px; height: 120px; margin: 4px auto 14px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #14173A 0%, #2E3263 50%, #14173A 100%); box-shadow: inset 0 0 0 3px #C9A032, inset 0 10px 18px rgba(0,0,0,.45), inset 0 -10px 18px rgba(0,0,0,.45), 0 10px 24px rgba(28,32,64,.3); transition: box-shadow .3s; }
.sl-drum::before, .sl-drum::after { content: ''; position: absolute; left: 10px; right: 10px; height: 2px; background: rgba(201,160,50,.55); z-index: 2; }
.sl-drum::before { top: 30px; } .sl-drum::after { bottom: 30px; }
.sl-strip { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sl-strip.roll { animation: slroll .14s ease-out; }
@keyframes slroll { from { transform: translateY(-38px); } }
.sl-c { display: block; font: 700 1.2rem/1 'Outfit', sans-serif; font-variant-numeric: tabular-nums; color: rgba(243,221,160,.28); height: 28px; line-height: 28px; }
.sl-c.cur { font-size: 3.1rem; height: 60px; line-height: 60px; color: #F3DDA0; text-shadow: 0 0 18px rgba(243,201,74,.35); }
.sl-unit { position: absolute; right: 12px; bottom: 7px; font: 600 .6rem 'Outfit', sans-serif; letter-spacing: .04em; color: rgba(243,221,160,.55); z-index: 3; }
.sl-drum.hot { box-shadow: inset 0 0 0 3px #F3C94A, 0 0 0 6px rgba(243,201,74,.35), 0 0 40px rgba(243,201,74,.8); }
.sl-drum.hot .sl-c.cur { color: #fff; text-shadow: 0 0 22px #F3C94A; }
.sl-drum.landed.near { animation: slshake .35s ease 1; }
@keyframes slshake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.sl-meter { max-width: 260px; margin: 0 auto 6px; }
.sl-track { position: relative; height: 10px; border-radius: 999px; background: #EDE6F1; overflow: visible; }
.sl-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #8C7FC0, #C9A032); transition: width .18s ease-out; }
.sl-track.top i { background: linear-gradient(90deg, #C9A032, #F3C94A); box-shadow: 0 0 14px rgba(243,201,74,.8); }
.sl-ghost { position: absolute; right: -3px; top: -5px; width: 20px; height: 20px; border-radius: 50%; border: 2px dashed #C9A032; opacity: 0; transition: opacity .3s; }
.sl-ghost.on { opacity: 1; }
.sl-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: .72rem; color: var(--soft); font-weight: 600; }
.sl-scale span:last-child { color: #A07A12; }
.slot-near { margin: 8px 0 2px; font: italic 600 1.2rem var(--voice); color: var(--rose-c); }
@media (prefers-reduced-motion: reduce) { .sl-strip.roll, .sl-drum.landed.near { animation: none; } .sl-track i { transition: none; } }
.lw-miss { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #FFF6D6; color: #6B4E00; font-size: .85rem; }
.grow-art { width: 140px; height: 140px; margin: -6px auto 0; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #2E3263 0%, #1C2040 70%); box-shadow: 0 0 0 4px rgba(243,201,74,.35), 0 0 40px rgba(194,71,107,.25); }
.grow-art svg { width: 120px; height: 120px; }
.grow-gift { background: #FFF6D6; color: #6B4E00; border-radius: 12px; padding: 10px 14px; font-size: .92rem; }

/* Sign Bingo */
.bingo, .t369 { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 20px; margin: 14px 0; }
.bg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.bg-head h2 { margin: 2px 0 0; }
.bg-left { font-size: .8rem; font-weight: 600; color: var(--night-2); background: var(--lav); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.bg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 480px; margin: 0 auto; }
.bg-sq { position: relative; aspect-ratio: 1; border-radius: 14px; border: 1.5px solid var(--hair); background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; text-align: center; font-family: 'Outfit', sans-serif; color: var(--ink-t); transition: transform .1s; }
.bg-sq:hover:not([disabled]) { transform: translateY(-2px); border-color: var(--lav-d); }
.bg-ic { font: 600 1.5rem var(--voice); color: var(--lav-d); line-height: 1; }
.bg-t { font-size: .74rem; line-height: 1.25; }
.bg-sq.on { background: linear-gradient(160deg, #2E3263, #1C2040); border-color: #C9A032; color: #F3DDA0; cursor: default; }
.bg-sq.on .bg-ic { color: #F3C94A; }
.bg-sq.free { background: linear-gradient(160deg, #C2476B, #6B2442); border-color: #F4C4D2; color: #FFF6F8; }
.bg-sq.free .bg-ic { color: #fff; }
.bg-ok { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: .8rem; color: #9FE0B5; }
.bg-sq.near { border-color: #F3C94A; box-shadow: 0 0 0 3px rgba(243,201,74,.3), 0 0 16px rgba(243,201,74,.35); animation: nmpulse 2s ease-in-out infinite; }
.bg-near { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .62rem; font-weight: 700; background: #F3C94A; color: #4A3500; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.bg-sq.pick { border-color: var(--night-2); box-shadow: 0 0 0 3px var(--lav-d); }
.bg-form { max-width: 480px; margin: 14px auto 0; background: var(--lav); border-radius: 14px; padding: 14px; }
.bg-form p { margin: 0 0 8px; font-size: .92rem; }
.bg-form input { width: 100%; }
.bg-fa { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.bg-fa .link { background: none; border: 0; cursor: pointer; font: 600 .9rem 'Outfit', sans-serif; }
.bg-foot { text-align: center; font-size: .82rem; color: var(--soft); margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) { .bg-sq.near { animation: none; } }

/* The 369 Challenge */
.t369.intro p { line-height: 1.6; }
.t369 form label { display: block; font-weight: 600; margin: 10px 0 6px; }
.t369 form textarea { width: 100%; font: 500 1.15rem/1.5 var(--voice); }
.t369 form .btn { margin-top: 10px; }
.d369 { margin: 10px 0 6px; padding: 14px 18px; background: var(--quartz); border-radius: 12px; font: italic 600 1.3rem/1.4 var(--voice); color: var(--ink-t); }
.d369 .link { display: block; margin-top: 6px; background: none; border: 0; padding: 0; cursor: pointer; font: 600 .8rem 'Outfit', sans-serif; font-style: normal; }
.w369s { display: grid; gap: 10px; }
.w369 { border: 1px solid var(--hair); border-radius: 14px; padding: 12px 14px; background: #fff; }
.w369 .w-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.w369 .w-top b { font: 600 1.2rem var(--voice); } .w369 .w-top span { font-size: .78rem; color: var(--soft); }
.w-tiles { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.w-tiles i { width: 22px; height: 22px; border-radius: 7px; background: #EFEAF2; border: 1px solid #E2DCE8; }
.w-tiles i.on { background: linear-gradient(160deg, #F3C94A, #C9A032); border-color: #C9A032; box-shadow: 0 0 8px rgba(243,201,74,.5); }
.w369.open { border-color: #F3C94A; box-shadow: 0 0 0 3px rgba(243,201,74,.2); }
.w369.done { background: #F2FAF4; border-color: #BFE3CB; }
.w369.missed, .w369.later { opacity: .7; }
.w-form { display: flex; gap: 8px; } .w-form input { flex: 1; min-width: 0; font: 500 1.05rem var(--voice); } .w-form .btn { padding: 8px 16px; }
.w-note { margin: 0; font-size: .82rem; color: var(--soft); }
.chain369 { display: grid; grid-template-columns: repeat(11, 1fr); gap: 5px; }
.chain369 i { aspect-ratio: 1; border-radius: 50%; background: #EFEAF2; }
.chain369 i.done { background: #1F8A4C; } .chain369 i.missed { background: #F4DDE3; }
.chain369 i.today { box-shadow: 0 0 0 2px var(--night-2); }
.chain369 i.mile { box-shadow: inset 0 0 0 2px #C9A032; }
.chain369 i.mile.today { box-shadow: inset 0 0 0 2px #C9A032, 0 0 0 2px var(--night-2); }
.w-form { display: flex; align-items: stretch; gap: 8px; }
.w-form input { flex: 1 1 auto !important; width: auto !important; min-width: 0; padding: 10px 12px; }
.w-form .btn { flex: 0 0 auto !important; width: auto !important; min-width: 0; padding: 8px 18px !important; margin: 0 !important; }
.chain369 { max-width: 440px; }
@media (max-width: 600px) {
  .jtabs { display: flex; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .jtabs::-webkit-scrollbar { display: none; }
  .jtabs a { flex: 0 0 auto; white-space: nowrap; }
}

/* Rituals hub */
.rit-hub { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
@media (max-width: 640px) { .rit-hub { grid-template-columns: 1fr; } }
.rit-card { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r-sheet); text-decoration: none; color: #ECEAF8; background: linear-gradient(150deg, #2E3263, #1C2040); min-height: 110px; }
.rit-card b { display: block; font: 600 1.35rem var(--voice); color: #FFF6F8; }
.rit-card span { display: block; font-size: .85rem; color: #C4C0E2; margin-top: 2px; }
.rit-card em { display: inline-block; margin-top: 8px; font-style: normal; font-size: .8rem; font-weight: 600; color: #1C2040; background: #F3C94A; padding: 3px 10px; border-radius: 999px; }
.rc-art { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 600 1.4rem var(--voice); color: #F3DDA0; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(243,201,74,.5); }
.rc-369 .rc-art::after { content: '369'; font-size: 1.05rem; }
.rc-lantern .rc-art::after { content: '✺'; }
.rc-letter .rc-art::after { content: '✉'; }
.rc-moon .rc-art::after { content: '☾'; }
.rc-lantern { background: linear-gradient(150deg, #6E3A2A, #2A1A2E); }
.rc-letter { background: linear-gradient(150deg, #6B2442, #2A1A2E); }

/* Wish lantern */
.lantern, .fletter, .vboard { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 22px; margin: 12px 0; text-align: center; }
.lantern.intro, .fletter { text-align: left; }
.lantern form textarea, .fletter form textarea { width: 100%; margin: 10px 0; }
.lantern:not(.intro) { background: radial-gradient(ellipse at 50% 30%, #2E3263 0%, #1C2040 70%); color: #ECEAF8; border: 0; }
.lantern:not(.intro) .kicker { color: #C4C0E2 !important; } .lantern:not(.intro) h2 { color: #FFF6F8; }
.lt-stage { position: relative; height: 200px; display: grid; place-items: center; }
.lt-stage::before { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(243,201,74, calc(.15 + var(--g) * .55)) 0%, transparent 65%); }
.lt { position: relative; display: flex; flex-direction: column; align-items: center; animation: ltfloat 5s ease-in-out infinite; }
.lt-top { width: 44px; height: 10px; border-radius: 6px 6px 2px 2px; background: #6B4E00; }
.lt-body { width: 80px; height: 104px; border-radius: 40% 40% 30% 30%; background: linear-gradient(180deg, rgba(255,214,120, calc(.35 + var(--g) * .6)), rgba(194,71,107, calc(.35 + var(--g) * .5))); box-shadow: 0 0 calc(10px + var(--g) * 50px) rgba(243,201,74, calc(.3 + var(--g) * .6)); display: grid; place-items: center; }
.lt-flame { width: 14px; height: 22px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff, #F3C94A 60%, transparent); animation: ltflame 1.6s ease-in-out infinite; }
.lt-base { width: 36px; height: 8px; border-radius: 2px 2px 6px 6px; background: #6B4E00; }
.lt-stage.flicker .lt-body { animation: ltflick 2.4s steps(1) infinite; }
@keyframes ltfloat { 50% { transform: translateY(-8px); } }
@keyframes ltflame { 50% { transform: scale(1.12, .92); } }
@keyframes ltflick { 0%, 100% { opacity: 1; } 12% { opacity: .55; } 16% { opacity: 1; } 55% { opacity: .7; } 58% { opacity: 1; } }
.lt-wish { color: #C4C0E2; font: italic 500 1.05rem var(--voice); margin: 4px 0 10px; }
.lt-flick { display: inline-block; background: rgba(243,201,74,.15); border: 1px solid rgba(243,201,74,.4); color: #F3DDA0; padding: 6px 12px; border-radius: 999px; font-size: .85rem; margin: 0 0 12px; }
.lt-done { color: #9FE0B5; font-size: .92rem; }
.lt-hold { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; border: 0; cursor: pointer; background: #F3C94A; color: #3A2A00; padding: 14px 30px; border-radius: 999px; overflow: hidden; touch-action: none; user-select: none; }
.lt-hold b { position: relative; font: 700 1rem 'Outfit', sans-serif; } .lt-hold small { position: relative; font-size: .72rem; }
.lt-ring { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #FFE58A; }
.lt-hold.holding .lt-ring { width: 100%; transition: width 3s linear; }
.lt-days { display: grid; grid-template-columns: repeat(21, 1fr); gap: 3px; max-width: 420px; margin: 16px auto 0; }
.lt-days i { height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); }
.lt-days i.on { background: #F3C94A; box-shadow: 0 0 6px rgba(243,201,74,.7); }
.l-sky { display: grid; gap: 8px; }
.l-rel { display: flex; gap: 10px; align-items: center; text-align: left; background: var(--paper); border: 1px solid var(--hair); border-radius: 12px; padding: 10px 14px; }
.l-rel p { flex: 1; margin: 0; font: italic 500 1.05rem var(--voice); } .l-rel small { color: var(--soft); font-size: .75rem; }
.lt-mini { width: 14px; height: 18px; border-radius: 40%; background: linear-gradient(#FFD678, #C2476B); box-shadow: 0 0 8px rgba(243,201,74,.7); flex: none; }

/* A letter to herself */
.fletter.sealed { text-align: center; }
.env { position: relative; width: 200px; height: 130px; margin: 6px auto 16px; background: linear-gradient(160deg, #FFF6E6, #F1E1C4); border-radius: 8px; box-shadow: 0 10px 24px rgba(28,32,64,.18); overflow: hidden; }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 72px solid #E6D2AC; }
.env-seal { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #D65A7E, #8E2B4B); color: #FFE0E8; display: grid; place-items: center; font-size: 1.1rem; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.env.ready .env-seal { animation: nmpulse 1.6s ease-in-out infinite; }
.fl-open { background: var(--paper); border: 1px solid var(--hair); border-radius: 14px; padding: 16px 18px; margin-bottom: 10px; text-align: left; }
.fl-date { margin: 0 0 6px; font-size: .78rem; color: var(--soft); } .fl-text { font: 500 1.15rem/1.6 var(--voice); }

/* The moon */
.moonev { background: radial-gradient(ellipse at 50% 20%, #2E3263 0%, #14173A 75%); color: #ECEAF8; border-radius: var(--r-sheet); padding: 26px 22px; margin: 12px 0; text-align: center; }
.moonev h2 { color: #FFF6F8; } .moonev p { color: #D9D4F0; }
.moonev form textarea { width: 100%; margin: 10px 0; }
.mn-disc { width: 90px; height: 90px; margin: 0 auto 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFFBEA, #E3DDC4); box-shadow: 0 0 40px rgba(255,251,234,.45), inset calc(-90px + var(--lit) * .9) 0 0 0 rgba(20,23,58,.92); }
.ph-full .mn-disc { box-shadow: 0 0 60px rgba(255,251,234,.8); }
.ph-new .mn-disc { background: #1C2040; box-shadow: 0 0 0 2px rgba(255,255,255,.2), 0 0 30px rgba(140,127,192,.4); }
.mn-limit { display: inline-block; background: rgba(243,201,74,.15); border: 1px solid rgba(243,201,74,.4); color: #F3DDA0 !important; padding: 6px 12px; border-radius: 999px; font-size: .85rem; }
.moonev .d369 { color: var(--ink-t); }
.lim-row { display: flex; flex-wrap: wrap; gap: 8px; } .lim { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--hair); padding: 6px 12px; border-radius: 999px; font-size: .85rem; }

/* Vision board */
.vboard { text-align: left; }
.vb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vb-t { aspect-ratio: 1; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; color: #FFF6F8; text-decoration: none; position: relative; overflow: hidden; }
.vb-ic { position: absolute; top: 10px; left: 12px; font: 600 1.6rem var(--voice); opacity: .9; }
.vb-t b { font: 600 1.05rem/1.15 var(--voice); } .vb-t small { font-size: .7rem; opacity: .85; line-height: 1.3; }
.vb0 { background: linear-gradient(160deg, #D08A5C, #6E3A2A); } .vb1 { background: linear-gradient(160deg, #C2476B, #5A1F36); } .vb2 { background: linear-gradient(160deg, #5E8C9A, #1F3A48); }
.vb3 { background: linear-gradient(160deg, #C4A469, #6B5130); } .vb4 { background: linear-gradient(160deg, #8C7FC0, #35305E); } .vb5 { background: linear-gradient(160deg, #F4A6BC, #A8466E); }
.vb6 { background: linear-gradient(160deg, #3E4C8A, #16193A); } .vb7 { background: linear-gradient(160deg, #6E9C82, #27443A); } .vb8 { background: linear-gradient(160deg, #B0506F, #4A1C30); }
.vb-t.locked { background: repeating-linear-gradient(135deg, #F1ECF4 0 10px, #EAE3EF 10px 20px); color: var(--soft); align-items: center; justify-content: center; text-align: center; border: 1.5px dashed #D6CCDE; }
.vb-t.locked .vb-ic { position: static; font-size: 1.8rem; color: var(--lav-d); }

/* Evidence jar */
.ejar { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.ejar b { display: block; font: 600 1.2rem var(--voice); } .ejar span { font-size: .85rem; color: var(--soft); }
.ej-glass { position: relative; flex: none; width: 70px; height: 90px; border: 2px solid #CFC4DA; border-top-width: 6px; border-radius: 10px 10px 18px 18px; background: rgba(255,255,255,.6); overflow: hidden; }
.ej-glass i { position: absolute; bottom: calc(4px + var(--y)); left: var(--x); width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg); background: var(--c); box-shadow: 0 0 6px var(--c); }

/* Scratch card */
.scr { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 16px 18px; margin: 16px 0; }
.scr .link { background: none; border: 0; cursor: pointer; font: 600 .9rem 'Outfit', sans-serif; }
.scr-box { position: relative; border-radius: 14px; overflow: hidden; min-height: 120px; background: linear-gradient(160deg, #FFF9EC, #FFF1D6); border: 1px dashed #E3C98A; }
.scr-in { padding: 16px 18px; text-align: center; }
.scr-k { margin: 0; font: italic 500 .95rem var(--voice); color: var(--soft); }
.scr-task { margin: 4px 0; font: 600 1.4rem/1.3 var(--voice); color: var(--ink-t); }
.scr-bonus { margin: 6px 0 0; font-size: .85rem; font-weight: 600; color: #8A6400; }
#scratch { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
@media (prefers-reduced-motion: reduce) { .lt, .lt-flame, .lt-stage.flicker .lt-body, .env.ready .env-seal { animation: none; } }
.rit-card .rc-art { display: grid; margin: 0; font-size: 1.4rem; color: #F3DDA0; }
.rit-card .rc-art::after { font: 600 1.5rem var(--voice); }
.rc-369 .rc-art::after { font-size: 1.05rem !important; }
.lt-flick { display: table; margin: 0 auto 14px; }
.tabs { grid-template-columns: repeat(6, 1fr) !important; }
.tabs a { font-size: .68rem !important; }
.rd-tabs { margin: 20px 0 6px; }

/* Today's page: one flow through the day */
.flows { display: grid; gap: 12px; margin: 14px 0; }
.flow { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 18px 20px; }
.flow.done { background: #F4FAF6; border-color: #CBE6D4; }
.flow.later { opacity: .72; }
.fl-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.fl-n { width: 30px; height: 30px; border-radius: 50%; background: var(--night); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.flow.done .fl-n { background: #1F8A4C; }
.fl-head b { display: block; font: 600 1.3rem var(--voice); } .fl-head small { font-size: .78rem; color: var(--soft); }
.fl-int { margin: 0 0 8px; font: 500 1.15rem/1.5 var(--voice); color: var(--ink-t); }
.fl-lab { margin: 14px 0 6px; font-weight: 600; font-size: .9rem; }
.fl-ok { margin: 6px 0 0; color: #1F8A4C; font-weight: 600; font-size: .9rem; }
.flow .mj-intf label { font-weight: 600; font-size: .9rem; }
.flow .mj-affirm { margin: 0 0 10px; }
.flow textarea.lined { width: 100%; }
.flow #evLine { width: 100%; margin-top: 10px; }
.fl-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
@media (max-width: 640px) { .fl-extras { grid-template-columns: 1fr; } }
.fl-extras .mj-script-mini { margin: 0; }
.fl-extras .jar-mini { background: var(--paper); border: 1px solid var(--hair); border-radius: 14px; padding: 12px; margin: 0; }
.ls-how { margin: 6px 0 12px; padding-left: 20px; color: var(--soft); line-height: 1.7; font-size: .92rem; } .ls-how b { color: var(--ink-t); }
.bg-how { font-size: .88rem; color: var(--soft); line-height: 1.55; margin: 0 0 12px; } .bg-how b { color: var(--ink-t); }
.bg-mean { background: #fff; border-radius: 10px; padding: 8px 12px; font: italic 500 1.02rem/1.45 var(--voice); color: var(--ink-t); }

/* Vision board she builds */
.vb-t { border: 0; cursor: pointer; text-align: left; font-family: 'Outfit', sans-serif; }
.vb-t.empty { background: #F6F2F8; border: 1.5px dashed #D6CCDE; color: var(--soft); align-items: center; justify-content: center; text-align: center; }
.vb-t.empty .vb-ic { position: static; font-size: 2rem; color: var(--lav-d); }
.vb-t.came { box-shadow: 0 0 0 3px #F3C94A, 0 0 18px rgba(243,201,74,.6); }
.vb-came { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: .65rem; font-weight: 700; background: #F3C94A; color: #3A2A00; padding: 2px 7px; border-radius: 999px; }
#boardFill { margin: 0 0 14px; }
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 12px; max-height: 280px; overflow-y: auto; }
.gal-t { aspect-ratio: 1; border: 0; border-radius: 10px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 4px; }
.gal-t span { font: 600 1.4rem var(--voice); } .gal-t small { font-size: .6rem; line-height: 1.2; }
.gal-t.on { box-shadow: 0 0 0 3px #F3C94A; }
.gal-l { display: grid; gap: 6px; text-align: left; font-weight: 600; font-size: .85rem; margin-bottom: 12px; }
.vb-big { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; text-align: left; transition: box-shadow 1s; }
.vb-big .vb-ic { top: 14px; left: 16px; font-size: 2.2rem; }
.vb-big b { font: 600 1.5rem var(--voice); } .vb-big small { opacity: .9; }
.vb-big.glow { box-shadow: 0 0 0 4px #F3C94A, 0 0 60px rgba(243,201,74,.8); }
.vis-line { font: italic 600 1.3rem var(--voice); color: var(--ink-t); margin: 14px 0 10px; min-height: 1.6em; }
.lt-hold .lt-ring.vis { background: #FFE58A; }
.lt-hold.holding .lt-ring.vis { transition: width 12s linear; }
.vis-acts { display: flex; justify-content: center; gap: 18px; margin-top: 14px; }
.vis-acts .link { background: none; border: 0; cursor: pointer; font: 600 .88rem 'Outfit', sans-serif; }

/* Lantern, letters */
.lt-change { margin: 0 0 12px; } .lt-change .link { background: none; border: 0; cursor: pointer; font: 600 .82rem 'Outfit', sans-serif; color: #C4C0E2; text-decoration: underline; }
.fl-lab { margin: 12px 0 6px; font-weight: 600; font-size: .88rem; }
.fl-shelf { display: grid; gap: 10px; }
.fl-env { display: flex; gap: 16px; align-items: center; background: var(--paper); border: 1px solid var(--hair); border-radius: 14px; padding: 12px 16px; }
.fl-env.ready { border-color: #F3C94A; box-shadow: 0 0 0 3px rgba(243,201,74,.2); }
.fl-env b { display: block; font: 600 1.15rem var(--voice); } .fl-env small { display: block; font-size: .78rem; color: var(--soft); }
.fl-env .btn { margin-top: 6px; padding: 6px 16px; }
.env.sm { width: 84px; height: 56px; margin: 0; flex: none; }
.env.sm .env-flap { border-left-width: 42px; border-right-width: 42px; border-top-width: 30px; }
.env.sm .env-seal { width: 20px; height: 20px; top: 20px; font-size: .6rem; }

/* The moon: every phase */
.mn-said { font-size: .9rem; }
.moonev form textarea { color: var(--ink-t); }
.mn-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 20px; }
.mn-strip span { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .55; }
.mn-strip span.now { opacity: 1; } .mn-strip span.done { opacity: .9; }
.mn-strip small { font-size: .58rem; color: #C4C0E2; line-height: 1.2; text-align: center; }
.mn-strip .ph { width: 20px; height: 20px; border-radius: 50%; background: #1C2040; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.mn-strip .ph1 { box-shadow: inset -6px 0 0 0 #FFFBEA, inset 0 0 0 1.5px rgba(255,255,255,.4); } .mn-strip .ph2 { background: linear-gradient(90deg, #1C2040 50%, #FFFBEA 50%); }
.mn-strip .ph3 { background: #FFFBEA; box-shadow: inset 6px 0 0 0 #1C2040; } .mn-strip .ph4 { background: #FFFBEA; box-shadow: 0 0 10px rgba(255,251,234,.7); }
.mn-strip .ph5 { background: #FFFBEA; box-shadow: inset -6px 0 0 0 #1C2040; } .mn-strip .ph6 { background: linear-gradient(90deg, #FFFBEA 50%, #1C2040 50%); }
.mn-strip .ph7 { box-shadow: inset 6px 0 0 0 #FFFBEA, inset 0 0 0 1.5px rgba(255,255,255,.4); }
.mn-strip span.now .ph { outline: 2px solid #F3C94A; outline-offset: 2px; }
.mn-strip span.done small::before { content: '✓ '; color: #9FE0B5; }

/* The ritual player */
.rp { position: fixed; inset: 0; z-index: 1300; background: radial-gradient(ellipse at 50% 30%, #2E3263 0%, #0F1130 75%); color: #ECEAF8; display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.rp-in { position: relative; width: 100%; max-width: 460px; text-align: center; }
.rp-x { position: absolute; top: -6px; right: 0; background: none; border: 0; color: #C4C0E2; font-size: 2rem; cursor: pointer; }
.rp-k { font: italic 500 1.05rem var(--voice); color: #C4C0E2; margin: 0 0 10px; }
.rp-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; }
.rp-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); } .rp-dots i.on { background: #F3C94A; } .rp-dots i.now { background: #fff; }
.rp-stage { min-height: 150px; display: grid; place-items: center; }
.rp-t { font: 600 1.4rem/1.35 var(--voice); color: #FFF6F8; margin: 14px 0; }
.rp-sub { font-size: .85rem; color: #C4C0E2; margin: 10px 0 0; }
.rp-alt { background: none; border: 0; color: #C4C0E2 !important; font: 500 .8rem 'Outfit', sans-serif; text-decoration: underline; cursor: pointer; margin-top: 14px; }
.rp-candle { position: relative; width: 44px; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.rp-wax { width: 44px; height: 92px; border-radius: 6px 6px 4px 4px; background: linear-gradient(90deg, #F4E7D8, #FFF8EE 50%, #E8D6C2); }
.rp-wick { width: 3px; height: 12px; background: #3A2A20; cursor: pointer; position: relative; }
.rp-wick::before { content: ''; position: absolute; inset: -18px -22px; }
.rp-flame { position: absolute; top: 0; left: 50%; width: 20px; height: 34px; margin-left: -10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 75%, #fff 0%, #FFE58A 35%, #F3A13A 70%, transparent 72%); opacity: 0; transform: scale(.3); transition: all .6s; filter: drop-shadow(0 0 14px rgba(243,201,74,.9)); }
.rp-candle.lit .rp-flame { opacity: 1; transform: scale(1); animation: ltflame 1.4s ease-in-out infinite; }
.rp-candle.flare .rp-flame { transform: scale(1.6); filter: drop-shadow(0 0 30px rgba(255,140,40,1)); }
.rp-candle.smoke::after { content: ''; position: absolute; top: -40px; left: 50%; width: 10px; height: 50px; margin-left: -5px; border-radius: 50%; background: linear-gradient(transparent, rgba(255,255,255,.35)); animation: smoke 1.6s ease-out forwards; }
@keyframes smoke { from { opacity: 1; transform: translateY(20px) scaleX(.6); } to { opacity: 0; transform: translateY(-40px) scaleX(2); } }
.rp-breath { position: relative; width: 150px; height: 150px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); color: #FFF6F8; cursor: pointer; touch-action: none; user-select: none; }
.rp-breath span { position: absolute; inset: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(243,201,74,.7), rgba(194,71,107,.3)); transition: inset 3s ease; }
.rp-breath.in span { inset: 0; }
.rp-breath b { position: relative; font: 700 1rem 'Outfit', sans-serif; }
.rp-ta { width: 100%; min-height: 110px; background: rgba(255,255,255,.95); border-radius: 12px; padding: 12px; font: 500 1.15rem/1.5 var(--voice); color: var(--ink-t); margin-bottom: 12px; }
.rp-paper { display: inline-block; max-width: 280px; padding: 14px 16px; background: #FFF8EC; color: #3A2A20; border-radius: 4px; font: italic 500 1.05rem var(--voice); box-shadow: 0 8px 20px rgba(0,0,0,.35); cursor: grab; touch-action: none; user-select: none; transform: rotate(-2deg); transition: opacity 1.4s, filter 1.4s; }
.rp-paper.held { cursor: grabbing; transition: none; }
.rp-paper.burning { opacity: 0; filter: sepia(1) saturate(4) blur(3px) brightness(1.4); transform: scale(.4) rotate(12deg) translateY(-40px) !important; transition: all 1.6s; }
.rp-soil { width: 220px; height: 60px; margin: 0 auto; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #8A6A55, #4A3528); }
.rp-seed { width: 22px; height: 30px; margin: 10px auto 0; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 40% 35%, #F3DDA0, #B08A45); cursor: grab; touch-action: none; box-shadow: 0 0 14px rgba(243,201,74,.6); }
.rp-seed.planted { opacity: 0; transition: opacity 1s; }
.rp-lantern { width: 90px; height: 120px; margin: 0 auto; border-radius: 40% 40% 30% 30%; background: linear-gradient(180deg, rgba(255,214,120,.95), rgba(194,71,107,.85)); box-shadow: 0 0 50px rgba(243,201,74,.8); cursor: grab; touch-action: none; display: grid; place-items: center; transition: transform 2.2s ease-in, opacity 2.2s; }
.rp-lantern i { width: 14px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #fff, #F3C94A 60%, transparent); }
.rp-lantern.up { transform: translateY(-120vh) scale(.4); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .rp-candle.lit .rp-flame { animation: none; } .rp-breath span { transition: none; } }
.rp-alt { display: block; margin: 16px auto 0; }

/* pacing: what opens later */
.jtabs a.tab-lk { opacity: .6; display: inline-flex; align-items: center; gap: 5px; }
.jtabs a.tab-lk small { font-size: .65rem; font-weight: 600; background: rgba(140,127,192,.18); color: var(--lav-d); padding: 1px 6px; border-radius: 999px; }
.tlk { font-style: normal; font-size: .7rem; color: var(--lav-d); }
.feat-lock { background: var(--paper); border: 1px dashed #D6CCDE; border-radius: var(--r-sheet); padding: 30px 24px; margin: 14px 0; text-align: center; }
.fl-key { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--lav); color: var(--lav-d); font-size: 1.4rem; }
.rit-card.rc-lk { opacity: .55; filter: grayscale(.4); }
.rc-week .rc-art::after { content: '☀'; }
.rc-week { background: linear-gradient(150deg, #C4A469, #6B5130); }
/* doors, Sunday, hard days, flip */
.fl-doors { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 4px 0 16px; }
.fl-doors a { font-size: .88rem; font-weight: 600; color: var(--night-2); text-decoration: none; }
.sun-card { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #FFF6D6, #FDE7C2); border: 1px solid #F3C94A; border-radius: var(--r-sheet); padding: 14px 18px; margin: 14px 0; text-decoration: none; color: var(--ink-t); }
.sun-card span { font-size: 1.6rem; color: #C9A032; } .sun-card div { flex: 1; } .sun-card b { display: block; font: 600 1.25rem var(--voice); } .sun-card small { color: #6B4E00; } .sun-card em { font-style: normal; font-size: 1.3rem; color: #C9A032; }
.hard, .flip, .hard-talk, .weekr { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 22px; margin: 12px 0; }
.hard { background: linear-gradient(160deg, #F2EEF8, #FBF7F9); }
.hard p { line-height: 1.65; }
.flip form textarea { width: 100%; margin: 8px 0; }
.flip-new, .flip-row { display: flex; flex-direction: column; gap: 4px; background: #FFF6D6; border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.flip-row { background: #F7F3F9; }
.flip-new s, .flip-row s { color: var(--soft); font-size: .88rem; }
.flip-new b, .flip-row b { font: italic 600 1.2rem/1.4 var(--voice); color: var(--ink-t); }
.flip-new small { color: #6B4E00; font-size: .8rem; }
.flip-wait { color: var(--soft); }
.hard-talk { text-align: center; } .hard-talk .btn { margin: 4px; }
.ls-listen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.ls-listen .btn.on { background: var(--night-2); color: #fff; }
.story-ok { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: .85rem; color: var(--soft); margin: 8px 0 12px; }
.weekr form textarea, .weekr form input { width: 100%; }
.weekr form .btn { margin-top: 12px; }
.wk-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0 8px; }
@media (max-width: 600px) { .wk-stats { grid-template-columns: repeat(3, 1fr); } }
.wk-stats div { background: var(--lav); border-radius: 12px; padding: 10px 6px; text-align: center; }
.wk-stats b { display: block; font: 700 1.5rem 'Outfit', sans-serif; color: var(--night-2); } .wk-stats span { font-size: .7rem; color: var(--soft); }
.jtabs a { white-space: nowrap; }
.jtabs a.tab-lk small { font-size: .6rem; padding: 1px 5px; line-height: 1.3; }
@media (min-width: 601px) { .jtabs { flex-wrap: wrap; } }

/* Compatibility: the constellation */
.csky { background: radial-gradient(ellipse at 50% 45%, #2E3263 0%, #14173A 75%); border-radius: var(--r-sheet); padding: 14px 10px 12px; margin: 14px 0 16px; box-shadow: 0 14px 34px rgba(28,32,64,.25); }
.csky svg { display: block; width: 100%; height: auto; }
.cs-l { font: 700 13px 'Outfit', sans-serif; fill: #1C2040; pointer-events: none; }
.cs-me { font: 700 20px 'Cormorant Garamond', serif; fill: #4A3500; }
.cs-n { font: 600 12px 'Outfit', sans-serif; fill: #ECEAF8; }
.cs-s { font: 500 10px 'Outfit', sans-serif; fill: #C4C0E2; }
.cs-p { font: 600 14px 'Outfit', sans-serif; fill: #C4C0E2; }
.cs-star circle:nth-child(2) { transition: r .2s; } .cs-star:hover circle:nth-child(2) { r: 18; }
.cs-ghost:hover circle { opacity: 1; }
.cs-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: .85rem; color: #C4C0E2; margin-top: 4px; }
.cs-foot a { color: #F3DDA0; font-weight: 600; text-decoration: none; }
.bd-name span { white-space: nowrap; }
/* love timing */
.ltime { background: var(--paper); border: 1px solid var(--hair); border-top: 3px solid var(--night-2); border-radius: var(--r-sheet); padding: 18px 20px; margin: 0 0 16px; }
.ltime h2 { margin: 2px 0 4px; }
.lt-row { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--hair); }
.lt-row.today { background: linear-gradient(90deg, rgba(243,201,74,.12), transparent); margin: 0 -20px; padding: 10px 20px; }
.lt-d { width: 58px; flex: none; } .lt-d b { display: block; font-size: .9rem; } .lt-d small { font-size: .75rem; color: var(--soft); }
.lt-b p { margin: 0; font: 500 1.08rem/1.4 var(--voice); }
.lt-w { margin: 4px 0 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
.lt-w span { font: 600 .74rem 'Outfit', sans-serif; color: #A8466E; background: #FBE6EC; padding: 2px 8px; border-radius: 999px; }
.tl-prev { display: block; text-decoration: none; color: var(--ink-t); border-top: 3px solid var(--night-2) !important; }
.tl-prev h3 { margin: 6px 0 4px; } .tl-prev .tl-h { font-size: .85rem; color: var(--soft); line-height: 1.5; margin: 0; }
/* Soul Circle */
.scircle { background: linear-gradient(160deg, #FFF6D6, #FBE6EC); border: 1px solid #F3C94A; border-radius: var(--r-sheet); padding: 20px; margin: 20px 0 10px; }
.scircle h2 { margin: 2px 0 6px; }
.sc-badge { font-size: .75rem; font-weight: 700; background: var(--night); color: #F3DDA0; padding: 3px 10px; border-radius: 999px; }
.scc-bar { height: 10px; border-radius: 999px; background: rgba(28,32,64,.1); overflow: hidden; } .scc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #C9A032, #F3C94A); border-radius: 999px; }
.scc-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 14px; }
@media (max-width: 600px) { .scc-tiers { grid-template-columns: 1fr 1fr; } }
.scc-tiers div { background: rgba(255,255,255,.7); border-radius: 12px; padding: 10px; text-align: center; }
.scc-tiers b { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 6px; border-radius: 50%; background: var(--night); color: #F3DDA0; font-size: .85rem; }
.scc-tiers span { font-size: .75rem; line-height: 1.35; color: var(--ink-t); }
.scc-tiers .ok b { background: #1F8A4C; color: #fff; }

/* Compatibility, romantic: the hero */
.chero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 26px; margin: 14px 0 8px; padding: 28px 28px; border-radius: 26px;
  background: radial-gradient(ellipse at 20% 30%, rgba(194,71,107,.55) 0%, transparent 55%), radial-gradient(ellipse at 85% 80%, rgba(140,127,192,.45) 0%, transparent 60%), linear-gradient(160deg, #2A1E3E, #14173A);
  color: #F3ECF4; box-shadow: 0 22px 44px -24px rgba(28,32,64,.6); }
.ch-glow { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.5px); background-size: 60px 60px; opacity: .18; pointer-events: none; }
.ch-arch { position: relative; flex: none; width: 150px; height: 190px; border-radius: 75px 75px 14px 14px; overflow: hidden; box-shadow: 0 0 0 2px #C9A032, 0 0 0 7px rgba(201,160,50,.18), 0 0 40px rgba(243,201,74,.35); background: #2A1E3E; }
.ch-arch img { width: 100%; height: 100%; object-fit: cover; }
.ch-arch img.veiled { filter: blur(9px) saturate(.8) brightness(.95); transform: scale(1.15); }
.ch-text { position: relative; }
.ch-kick { margin: 0; font: italic 500 1.1rem var(--voice); color: #F3DDA0; }
.chero h1 { margin: 4px 0 8px; color: #FFF6F8; font-size: 2.5rem; line-height: 1.05; }
.chero p { color: #D9D1E6; margin: 0 0 16px; line-height: 1.55; }
.ch-acts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ch-inv { color: #F3DDA0; font-weight: 600; text-decoration: none; }
@media (max-width: 640px) { .chero { flex-direction: column; text-align: center; padding: 26px 20px; } .ch-acts { justify-content: center; } .chero h1 { font-size: 2rem; } .ch-arch { width: 120px; height: 152px; } }

/* bond cards, like tarot cards */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 8px; }
.tcard { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--ink-t); background: var(--paper); border: 1px solid #EADCE3; box-shadow: 0 16px 30px -24px rgba(107,36,66,.45); transition: transform .2s, box-shadow .2s; }
.tcard:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -22px rgba(107,36,66,.55); }
.tc-arch { position: relative; height: 128px; margin: 10px 10px 0; border-radius: 80px 80px 10px 10px; display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1.5px rgba(243,221,160,.55); }
.tc-arch.gold { background: linear-gradient(160deg, #C9A032, #6B5130); }
.tc-stars { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1.5px); background-size: 34px 34px; opacity: .3; }
.tc-pair { position: relative; display: flex; }
.tc-pair i { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font: italic 600 1.5rem var(--voice); font-style: normal; color: #FFF6F8; background: rgba(255,255,255,.14); box-shadow: 0 0 0 2px #F3DDA0; }
.tc-pair i + i { margin-left: -12px; background: rgba(255,255,255,.22); }
.tc-type { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font: 600 .62rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #F3DDA0; }
.tc-portrait { position: relative; width: 70px; height: 70px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #FFF6D6, 0 0 20px rgba(255,246,214,.6); }
.tc-portrait img { width: 100%; height: 100%; object-fit: cover; } .tc-portrait.veiled img { filter: blur(6px); transform: scale(1.2); }
.tc-body { padding: 12px 16px 16px; text-align: center; }
.tc-name { margin: 0; font-size: .82rem; font-weight: 600; color: var(--soft); }
.tcard h3 { margin: 2px 0 2px; font: italic 600 1.55rem/1.1 var(--voice); color: #6B2442; }
.tc-zod { margin: 0 0 8px; font-size: .78rem; color: #A07A12; }
.tc-mood { margin: 0 0 6px; font-size: .82rem; } .tc-mood b { color: var(--ink-t); } .tc-mood span { color: #C2476B; letter-spacing: 1px; }
.tc-line { margin: 0; font: italic 500 1rem/1.4 var(--voice); color: var(--soft); }
.tcard.soul { border-color: #E9D29A; background: linear-gradient(180deg, #FFFBF0, var(--paper)); }
.tcard.add { align-items: center; justify-content: center; text-align: center; padding: 20px; min-height: 220px; border: 1.5px dashed #E0C9D4; background: rgba(255,255,255,.5); box-shadow: none; }
.tcard.add h3 { font-size: 1.3rem; color: var(--ink-t); } .tcard.add p { font-size: .82rem; color: var(--soft); margin: 4px 0 0; }
.tc-plus { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #C2476B; background: #FBE6EC; margin-bottom: 8px; }
.tcard.add.lockd { opacity: .7; }
/* the right column on Compatibility */
.side .ltime { padding: 16px 16px; }
.side .ltime h2 { font-size: 1.4rem; }
.side .lt-row.today { margin: 0 -16px; padding: 10px 16px; }
.side .lt-d { width: 48px; }
.side .lt-b p { font-size: 1rem; }
.side .scircle { margin-top: 0; padding: 16px; }
.side .scircle h2 { font-size: 1.35rem; }
.side .scc-tiers { grid-template-columns: 1fr 1fr; }
.side .bd-link { flex-direction: column; }
.ch-acts .btn { width: auto !important; flex: 0 0 auto; padding: 12px 28px; }
@media (max-width: 640px) { .ch-acts .btn { width: 100% !important; } }
.side .scircle p { font-size: .9rem; line-height: 1.5; }
.side .scircle .scc-tiers span { font-size: .72rem; }

/* Compatibility hero: two candles leaning together */
.ch-art { position: relative; flex: none; width: 150px; height: 190px; display: grid; place-items: center; }
.ch-candles { width: 150px; height: 190px; filter: drop-shadow(0 0 18px rgba(243,201,74,.35)); }
.chf1, .chf2 { transform-origin: center bottom; transform-box: fill-box; animation: chflick 1.8s ease-in-out infinite; }
.chf2 { animation-delay: .6s; }
@keyframes chflick { 50% { transform: scale(1.08, .94) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .chf1, .chf2 { animation: none; } }
@media (max-width: 640px) { .ch-art, .ch-candles { width: 120px; height: 152px; } }
/* the soulmate checklist */
.tc-match { margin: 8px 0 0; font-size: .74rem; font-weight: 600; color: #A07A12; }
.smatch { background: linear-gradient(160deg, #FFFBF0, #FBEFF3); border: 1px solid #E9D29A; border-radius: var(--r-sheet); padding: 18px 20px; margin: 14px 0; }
.smatch h3 { margin: 4px 0 6px; font: 600 1.4rem var(--voice); }
.sm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-chips button { border: 1.5px solid #E0C9D4; background: #fff; color: var(--ink-t); border-radius: 999px; padding: 8px 14px; font: 500 .9rem 'Outfit', sans-serif; cursor: pointer; }
.sm-chips button.on { background: #6B2442; border-color: #6B2442; color: #FFF6F8; }
.sm-sum { margin: 12px 0 0; font: italic 500 1.05rem var(--voice); color: var(--ink-t); }
/* Visualise him, at the heart of the vision board */
.vhim { display: flex; align-items: center; gap: 22px; margin: 14px 0; padding: 22px; border-radius: var(--r-sheet); color: #F3ECF4;
  background: radial-gradient(ellipse at 20% 30%, rgba(194,71,107,.5) 0%, transparent 55%), linear-gradient(160deg, #2A1E3E, #14173A); }
.vh-frame { flex: none; width: 140px; height: 176px; border-radius: 70px 70px 14px 14px; overflow: hidden; box-shadow: 0 0 0 2px #C9A032, 0 0 0 7px rgba(201,160,50,.18); transition: box-shadow 1.2s; }
.vh-frame img { width: 100%; height: 100%; object-fit: cover; }
.vh-frame.veiled img { filter: blur(9px); transform: scale(1.15); }
.vh-frame.glow { box-shadow: 0 0 0 3px #F3C94A, 0 0 60px rgba(243,201,74,.9); }
.vhim .kicker { color: #F3DDA0 !important; }
.vhim h2 { color: #FFF6F8; margin: 2px 0 8px; }
.vhim p { color: #D9D1E6; margin: 0 0 12px; }
#vhLine { font: italic 600 1.2rem var(--voice); color: #FFF6F8; min-height: 1.5em; }
.vhim .fl-ok { color: #9FE0B5; }
@media (max-width: 600px) { .vhim { flex-direction: column; text-align: center; } }

/* Manifest, as one page: the stage */
.mstage { text-align: center; padding: 30px 24px 28px; margin: 14px 0 16px; position: relative; overflow: hidden; }
.ms-sparkle { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.5px); background-size: 54px 54px; opacity: .15; pointer-events: none; }
.mstage .n-hi { margin: 0; } .mstage .n-date { margin: 2px 0 12px; }
.mstage .ritual-steps { justify-content: center; }
.ms-ring { width: 96px; height: 96px; margin: 18px auto 10px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#F3C94A calc(var(--p) * 1%), rgba(255,255,255,.12) 0); position: relative; }
.ms-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #1F2248; }
.ms-ring b { position: relative; font: 600 2rem var(--voice); color: #FFF6F8; } .ms-ring small { font-size: 1rem; color: #C4C0E2; }
.mstage h2 { color: #FFF6F8; margin: 4px 0 6px; } .mstage > p { color: #D9D4F0; margin: 0 0 16px; }
.mstage .btn { display: inline-block; width: auto; padding: 12px 30px; }
/* today's ritual, and the practices */
.tr-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin: 18px 0; border-radius: var(--r-sheet); text-decoration: none; color: #ECEAF8; background: linear-gradient(150deg, #2E3263, #1C2040); box-shadow: 0 16px 30px -22px rgba(28,32,64,.6); }
.tr-card .kicker { margin: 0; color: #F3DDA0 !important; }
.tr-card b { display: block; font: 600 1.45rem var(--voice); color: #FFF6F8; margin: 2px 0; } .tr-card span { font-size: .88rem; color: #C4C0E2; }
.tr-card > div { flex: 1; }
.tr-card em { font-style: normal; font-weight: 600; font-size: .9rem; color: #1C2040; background: #F3C94A; padding: 8px 16px; border-radius: 999px; white-space: nowrap; }
.tr-card.rc-lantern { background: linear-gradient(150deg, #6E3A2A, #2A1A2E); } .tr-card.rc-signs .rc-art::after { content: '☼'; } .tr-card.rc-board .rc-art::after { content: '✦'; }
@media (max-width: 560px) { .tr-card { flex-wrap: wrap; } .tr-card em { margin-left: 70px; } }
.pr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 18px; }
@media (max-width: 640px) { .pr-grid { grid-template-columns: repeat(2, 1fr); } }
.pr-t { display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; border-radius: 16px; text-decoration: none; background: var(--paper); border: 1px solid var(--hair); color: var(--ink-t); transition: transform .15s, border-color .15s; }
.pr-t:hover { transform: translateY(-2px); border-color: var(--lav-d); }
.pr-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 1.15rem var(--voice); color: #F3DDA0; background: linear-gradient(150deg, #2E3263, #1C2040); margin-bottom: 4px; }
.pr-369 .pr-ic { font-size: .8rem; } .pr-lantern .pr-ic { background: linear-gradient(150deg, #D08A5C, #6E3A2A); } .pr-letter .pr-ic { background: linear-gradient(150deg, #C2476B, #6B2442); }
.pr-week .pr-ic { background: linear-gradient(150deg, #C4A469, #6B5130); } .pr-board .pr-ic { background: linear-gradient(150deg, #8C7FC0, #35305E); } .pr-script .pr-ic { background: linear-gradient(150deg, #B0506F, #4A1C30); }
.pr-t b { font: 600 1.15rem var(--voice); } .pr-t small { font-size: .76rem; color: var(--soft); }

/* Compatibility: two hearts, the energy report, onboarding, the circle */
.ch-hearts { width: 160px; height: 142px; filter: drop-shadow(0 0 16px rgba(244,166,188,.45)); }
.hb1 { transform-origin: 62px 80px; animation: hbeat 2.8s ease-in-out infinite; } .hb2 { transform-origin: 108px 84px; animation: hbeat 2.8s ease-in-out .35s infinite; }
@keyframes hbeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.06); } 24% { transform: scale(1); } 36% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .hb1, .hb2 { animation: none; } }
.chero.energy h1 { font-size: 1.85rem; line-height: 1.2; }
.en-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 16px; }
@media (max-width: 700px) { .en-tiles { grid-template-columns: 1fr 1fr; } }
.en-tiles > * { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 12px; text-decoration: none; }
.en-tiles small { display: block; font-size: .7rem; color: #C4C0E2; } .en-tiles b { font: 600 1.15rem var(--voice); color: #FFF6F8; }
.ob-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 22px; }
@media (max-width: 640px) { .ob-choices { grid-template-columns: 1fr; } }
.ob-c { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 22px 16px; border-radius: 18px; text-decoration: none; background: var(--paper); border: 1px solid #EADCE3; color: var(--ink-t); box-shadow: 0 16px 30px -24px rgba(107,36,66,.45); transition: transform .2s; }
.ob-c:hover { transform: translateY(-3px); }
.ob-c span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: linear-gradient(160deg, #C2476B, #6B2442); margin-bottom: 6px; }
.ob-c:nth-child(2) span { background: linear-gradient(160deg, #8C7FC0, #3B3570); } .ob-c:nth-child(3) span { background: linear-gradient(160deg, #6E9C82, #27443A); }
.ob-c b { font: 600 1.25rem var(--voice); } .ob-c small { font-size: .8rem; color: var(--soft); } .ob-c em { font-style: normal; font-weight: 600; color: #C2476B; margin-top: 6px; font-size: .88rem; }
.ob-prev-t { text-align: center; font: italic 500 1.05rem var(--voice); color: var(--soft); margin: 0 0 10px; }
.ob-prev { opacity: .55; pointer-events: none; filter: saturate(.8); }
.ccircle { display: flex; align-items: center; gap: 24px; padding: 22px; border-radius: var(--r-sheet); margin: 0 0 14px;
  background: radial-gradient(ellipse at 15% 50%, rgba(159,224,181,.35), transparent 60%), linear-gradient(160deg, #F2FAF4, #FBF3F5); border: 1px solid #CBE6D4; }
.cr-ring { position: relative; flex: none; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(159,224,181,.35) 0%, transparent 70%); }
.cr-h { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.cr-h i { font-style: normal; font-size: 1.6rem; color: #C2476B; filter: drop-shadow(0 0 8px rgba(194,71,107,.45)); line-height: 1; }
.cr-h span { font-size: .68rem; font-weight: 600; color: var(--ink-t); background: rgba(255,255,255,.85); padding: 0 6px; border-radius: 999px; margin-top: 2px; }
.cr-h.empty i { color: #D6CCDE; filter: none; }
.cr-me { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(circle, #FFF6D6, #C9A032); box-shadow: 0 0 30px rgba(243,201,74,.6); }
.cr-me b { font: 600 1.4rem var(--voice); color: #4A3500; line-height: 1; } .cr-me small { font-size: .6rem; color: #6B4E00; }
.cr-text h3 { font: 600 1.5rem var(--voice); margin: 2px 0 6px; } .cr-text p { color: var(--soft); line-height: 1.55; }
.ch-inv.dark { color: #1F8A4C; }
@media (max-width: 640px) { .ccircle { flex-direction: column; text-align: center; } .ccircle .ch-acts { justify-content: center; } }
/* the Soul Circle, slim */
.scircle.slim h2 { font-size: 1.3rem; margin: 2px 0 4px; }
.scircle.slim p { font-size: .88rem; margin: 0 0 10px; }
.scc-more { margin: 0 0 12px; } .scc-more summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: #A07A12; margin-bottom: 8px; }

/* Manifest and Chat stand out in the menu */
.ln-nav a.nv-man, .ln-nav a.nv-chat { position: relative; color: #F3DDA0; border: 1px solid rgba(243,201,74,.35); background: rgba(243,201,74,.08); }
.ln-nav a.nv-chat { color: #BDEFD0; border-color: rgba(63,184,107,.4); background: rgba(63,184,107,.1); }
.ln-nav a.nv-man.on { background: rgba(243,201,74,.2); color: #FFF3C8; } .ln-nav a.nv-chat.on { background: rgba(63,184,107,.22); color: #E4FFEE; }
.nv-spark { font-style: normal; color: #F3C94A; margin-right: 5px; font-size: .8em; }
.nv-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3FB86B; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 0 rgba(63,184,107,.6); animation: nvpulse 2.2s ease-out infinite; }
@keyframes nvpulse { 0% { box-shadow: 0 0 0 0 rgba(63,184,107,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(63,184,107,0); } }
@media (prefers-reduced-motion: reduce) { .nv-dot { animation: none; } }
/* the bottom bar on phones */
.tabs a.nv-man { color: #A07A12; font-weight: 700; } .tabs a.nv-chat { color: #1F8A4C; font-weight: 700; }
.tabs a .nv-spark, .tabs a .nv-dot { margin-right: 3px; }
.dr-panel a.nv-man .nv-spark { margin: 0 0 0 6px; } .dr-panel a.nv-chat .nv-dot { margin: 0 0 0 8px; }

/* The top menu, refined: text links with an underline for where she is; pills only for her stats */
@media (min-width: 960px) {
  .ln-nav a, .ln-nav a.on, .ln-nav a.nv-man, .ln-nav a.nv-chat, .ln-nav a.nv-man.on, .ln-nav a.nv-chat.on { background: none !important; border: 0 !important; border-radius: 0; position: relative; padding: 6px 12px; }
  .ln-nav a.on { color: #fff; }
  .ln-nav a.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -4px; height: 2px; border-radius: 2px; background: #F3C94A; }
  .ln-nav a.nv-man { color: #F3DDA0; } .ln-nav a.nv-chat { color: #BDEFD0; }
  .ln-nav a.nv-man.on { color: #FFF3C8; } .ln-nav a.nv-chat.on { color: #E4FFEE; }
  .ln-nav a.nv-man::before { content: ''; position: absolute; left: -6px; top: 50%; height: 18px; margin-top: -9px; width: 1px; background: rgba(255,255,255,.18); }
  .ln-nav a.nv-man { margin-left: 12px; }
}
.dr-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 10px; }
.dr-panel .dr-feat a { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 14px 14px 12px; border-radius: 16px; font: inherit; }
.dr-feat a span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; font-size: 1rem; }
.dr-feat a b { font: 600 1.35rem var(--voice); } .dr-feat a small { font-size: .74rem; }
.df-man { background: linear-gradient(150deg, #2E3263, #1C2040); color: #FFF6F8 !important; }
.df-man span { background: rgba(243,201,74,.18); color: #F3C94A; } .df-man small { color: #C4C0E2; }
.df-chat { background: linear-gradient(150deg, #E6F5EC, #D2EEDD); color: #14532D !important; }
.df-chat span { background: #fff; } .df-chat .nv-dot { margin: 0; } .df-chat small { color: #2E6B45; }
.dr-feat a.on { box-shadow: 0 0 0 2px #F3C94A; }
/* the two feature cards: always dark, on every page */
.dr-panel .dr-feat a.df-man, .dr-panel .dr-feat a.df-man.on { background: linear-gradient(150deg, #22254A, #0E0F22) !important; color: #FFF6F8 !important; }
.dr-panel .dr-feat a.df-chat, .dr-panel .dr-feat a.df-chat.on { background: linear-gradient(150deg, #173A2A, #0A1712) !important; color: #EAFBF1 !important; }
.df-man small { color: #C4C0E2 !important; } .df-chat small { color: #9FD8B6 !important; }
.df-man span { background: rgba(243,201,74,.16) !important; color: #F3C94A !important; }
.df-chat span { background: rgba(63,184,107,.18) !important; }
.dr-panel .dr-feat a.on { box-shadow: 0 0 0 2px #F3C94A, 0 10px 24px -12px rgba(0,0,0,.5) !important; }
.dr-panel .dr-feat a { box-shadow: 0 10px 24px -14px rgba(0,0,0,.55); }

/* Manifest: one step at a time */
.flow.fold { padding: 12px 18px; }
.flow.fold .fl-head { margin-bottom: 4px; }
.flow.fold .fl-head b { font-size: 1.1rem; }
.fl-one { margin: 0 0 0 42px; font: italic 500 1.02rem/1.45 var(--voice); color: var(--soft); }
.fl-one span { font-style: normal; font-size: .85rem; }
.fl-next { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border: 1px dashed #DCD2E2; border-radius: 14px; color: var(--soft); font-size: .9rem; }
.fl-next span { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #CFC4DA; display: grid; place-items: center; font-size: .78rem; font-weight: 700; flex: none; }
.fl-next small { margin-left: auto; font-size: .75rem; }
.flow .scr { margin: 0 0 6px; background: none; border: 0; padding: 0; }
/* Manifest's right-hand column */
.side .tr-card { margin: 0 0 16px; flex-wrap: wrap; }
.side .tr-card em { margin-left: 70px; }
.side .side-h { font-size: 1.3rem; margin: 6px 0 10px; }
.side .pr-grid { grid-template-columns: 1fr 1fr; }
.side .pr-t { padding: 12px; } .side .pr-t b { font-size: 1.02rem; } .side .pr-ic { width: 34px; height: 34px; font-size: 1rem; }
.side .fl-extras { grid-template-columns: 1fr; }
.side .shopgrid { grid-template-columns: 1fr; }
.side .shelf, .side h2.sec + p.muted { margin-top: 0; }
/* Manifest side: practices, one per row, lean */
.side .pr-grid { grid-template-columns: 1fr; gap: 0; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); overflow: hidden; }
.side .pr-t { flex-direction: row; align-items: center; gap: 12px; padding: 11px 14px; border: 0; border-radius: 0; border-top: 1px solid var(--hair); background: none; }
.side .pr-t:first-child { border-top: 0; }
.side .pr-t:hover { transform: none; background: #F7F2F8; }
.side .pr-ic { width: 32px; height: 32px; margin: 0; flex: none; font-size: .95rem; }
.side .pr-t b { font-size: 1.05rem; flex: 1; }
.side .pr-t small { font-size: .72rem; text-align: right; max-width: 45%; }
.side .fl-extras { margin-bottom: 16px; }
.side-h-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pr-count { font-size: .76rem; font-weight: 600; color: var(--soft); background: #F1ECF4; padding: 3px 10px; border-radius: 999px; }
.pr-count.on { color: #1F8A4C; background: #E4F4EA; }
.side .pr-t.done { background: #F4FAF6; }
.side .pr-t.done .pr-ic { background: #1F8A4C !important; color: #fff; font: 700 .9rem 'Outfit', sans-serif; }
.side .pr-t.done small { color: #1F8A4C; font-weight: 600; }
.side .pr-t.done b { color: var(--soft); }
/* alignment: the Manifest stage lines up with the right column */
.mstage { margin-top: 0 !important; }
/* practices, grouped */
.pr-g { margin: 12px 0 6px; font: italic 500 1rem var(--voice); color: var(--soft); }
.side-h-row + .pr-g { margin-top: 2px; }
.pr-star { font-style: normal; color: #C9A032; font-size: .8em; }
.pr-key { margin: 10px 2px 0; font-size: .76rem; color: var(--soft); }
.side .fl-extras .jar-mini { display: flex; gap: 14px; align-items: flex-start; }
.jar-how { margin-top: 6px; } .jar-how summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--night-2); }
.jar-how p { margin: 6px 0 0; font-size: .8rem; line-height: 1.5; color: var(--soft); }
.w-form.say .btn { width: 100%; }

/* her three cards */
.sp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 12px; }
.sp-card { position: relative; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 26px -16px rgba(28,32,64,.6); }
.sp-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 12px 10px; color: #FFF6F8; box-shadow: inset 0 0 0 2px rgba(243,221,160,.55); border-radius: 14px; }
.sp-k { font: 600 .62rem 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #F3DDA0; }
.sp-m { font: 600 1.8rem var(--voice); line-height: 1.1; }
.sp-face b { font: italic 600 1.2rem/1.15 var(--voice); }
.sp-face small { font-size: .72rem; line-height: 1.35; opacity: .9; }
.sp-cv { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; border-radius: 14px; }
.sp-card.open { animation: spflip .5s ease; }
.sp-card.gold { box-shadow: 0 0 0 3px #F3C94A, 0 0 34px rgba(243,201,74,.8); }
.sp-card.gold .sp-face { color: #2A1E00; } .sp-card.gold .sp-k { color: #4A3500; }
.sp-card.flash .sp-face { animation: spgold 1.1s ease; }
@keyframes spflip { from { transform: rotateY(90deg); } }
@keyframes spgold { 0%, 55% { background: linear-gradient(160deg,#F3C94A,#8A6400) !important; filter: brightness(1.2); } }
.sp-hint { font-size: .85rem; color: var(--soft); text-align: center; margin: 0; }
@media (max-width: 480px) { .sp-face b { font-size: 1rem; } .sp-face small { font-size: .64rem; } .sp-row { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .sp-card.open, .sp-card.flash .sp-face { animation: none; } }
.fl-opt { background: var(--paper); border: 1px dashed #DCD2E2; border-radius: 14px; padding: 12px 18px; }
.fl-opt summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--night-2); }
.fl-opt[open] { padding-bottom: 4px; } .fl-opt .flow { margin-top: 12px; border: 0; padding: 0; background: none; }
.fl-carry { margin: 0 0 8px; font-size: .88rem; color: var(--soft); }
.it-ideas { display: grid; gap: 6px; margin: 2px 0 10px; }
.it-ideas button { text-align: left; border: 1.5px solid var(--hair); background: #fff; border-radius: 12px; padding: 9px 14px; font: italic 500 1.08rem var(--voice); color: var(--ink-t); cursor: pointer; }
.it-ideas button:hover { border-color: var(--lav-d); }
.it-ideas button.on { border-color: #1F8A4C; background: #F2FAF4; }
.it-ideas i { display: block; font: 600 .65rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #A07A12; margin-bottom: 2px; }
/* the cards: a glow while she scratches, and a burst of light as one opens */
.sp-card.scratching { box-shadow: 0 0 0 2px #F3C94A, 0 0 26px rgba(243,201,74,.65); }
.sp-card.burst { animation: spglow .9s ease; }
@keyframes spglow { 0% { box-shadow: 0 0 0 2px #F3C94A, 0 0 50px rgba(243,201,74,1); } 100% { box-shadow: 0 12px 26px -16px rgba(28,32,64,.6); } }
.sp-burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.sp-burst i { position: absolute; width: 7px; height: 7px; border-radius: 50%; left: -3px; top: -3px; opacity: 0; animation: spark .8s ease-out forwards; }
.sp-burst i:nth-child(3n) { width: 5px; height: 9px; border-radius: 2px; }
@keyframes spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.4); } }
@media (prefers-reduced-motion: reduce) { .sp-card.burst, .sp-burst i { animation: none; } .sp-burst { display: none; } }
/* no red: the affirmation is soft gold parchment */
.mj-affirm { background: linear-gradient(160deg, #FFF8E6, #F8ECCD) !important; box-shadow: inset 0 0 0 1.5px #E3C98A; color: #3A2A10 !important; }
/* the intention: one box, and small pills */
.it-src { margin: 0 0 6px; font-size: .78rem; font-weight: 600; color: #A07A12; }
.it-input { width: 100%; font: italic 500 1.15rem var(--voice) !important; padding: 12px 14px !important; }
.it-or { margin: 12px 0 6px; font-size: .78rem; color: var(--soft); }
.it-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.it-pills button { border: 1px solid var(--hair); background: #fff; border-radius: 999px; padding: 6px 12px; font: 500 .82rem 'Outfit', sans-serif; color: var(--ink-t); cursor: pointer; }
.it-pills button:hover { border-color: var(--lav-d); } .it-pills button.on { border-color: #1F8A4C; background: #F2FAF4; color: #14532D; }
.ev-sign { margin: 6px 0 4px; } .ev-sign input { width: 100%; }

/* Chat, in the shape of Manifest */
.cstage { text-align: center; margin-top: 0 !important; }
.cstage h2 { margin: 10px 0 4px; }
.ask-f { max-width: 560px; margin: 14px auto 0; display: grid; gap: 10px; }
.ask-f textarea { width: 100%; border-radius: 14px; padding: 12px 14px; font: italic 500 1.15rem/1.4 var(--voice); background: rgba(255,255,255,.96); border: 0; color: var(--ink-t); }
.ask-f .btn { justify-self: center; width: auto; padding: 11px 30px; }
.ask-m { max-width: 560px; margin: 16px auto 0; text-align: left; }
.ask-m > p { color: #C4C0E2; font-size: .85rem; margin: 0 0 8px; }
.ask-g { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; color: #ECEAF8; font-family: 'Outfit', sans-serif; }
.ask-g.best { border-color: #F3C94A; background: rgba(243,201,74,.12); }
.ask-g .adv-ava { width: 40px; height: 40px; }
.ask-g span { flex: 1; font-size: .82rem; color: #C4C0E2; } .ask-g b { display: block; font: 600 1.15rem var(--voice); color: #FFF6F8; }
.ask-g em { font-style: normal; font-weight: 600; font-size: .85rem; color: #1C2040; background: #F3C94A; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.ask-g:not(.best) em { background: rgba(255,255,255,.15); color: #FFF6F8; }
.ask-cost { color: #C4C0E2; font-size: .78rem; text-align: center; margin: 6px 0 0; }
.fav { border: 0; background: none; font-size: 1.2rem; color: #C2476B; cursor: pointer; padding: 0 2px; line-height: 1; }
.adv-live { margin: -2px 0 6px !important; font-size: .76rem !important; color: var(--soft); }
.rc-list { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); overflow: hidden; margin-bottom: 14px; }
.rc-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--hair); text-decoration: none; color: var(--ink-t); }
.rc-row:first-child { border-top: 0; } .rc-row:hover { background: #F7F2F8; }
.rc-row div { flex: 1; min-width: 0; } .rc-row b { display: block; font: 600 1.05rem var(--voice); } .rc-row span { display: block; font-size: .8rem; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-row em { font-style: normal; font-size: .72rem; color: var(--soft); }
/* the right column */
.cr-mini { background: linear-gradient(150deg, #22254A, #0E0F22) !important; color: #ECEAF8; border: 0 !important; }
.cr-mini .kicker { color: #F3DDA0 !important; } .cr-mini .link { color: #F3DDA0 !important; }
.crm-big { font: 600 2.4rem var(--voice); color: #FFF6D6; margin: 4px 0 2px; }
.crm-l { color: #C4C0E2 !important; font-size: .85rem !important; margin: 0 0 10px !important; }
.crm-earn { color: #9FE0B5; font-weight: 600; font-size: .85rem; text-decoration: none; }
.side-empty { font-size: .82rem; color: var(--soft); margin: 0 0 14px; }
.side .pr-t .adv-ava { width: 32px; height: 32px; font-size: .9rem; flex: none; }
.ins-list { display: grid; gap: 8px; margin-bottom: 14px; }
.ins { display: flex; gap: 10px; background: #FFF8E6; border: 1px solid #EBD9A8; border-radius: 12px; padding: 10px 12px; }
.ins p { margin: 0; font: italic 500 .98rem/1.45 var(--voice); color: var(--ink-t); } .ins small { display: block; font: 500 .7rem 'Outfit', sans-serif; font-style: normal; color: #A07A12; margin-top: 4px; }
.ins-mf { display: block; background: #FFF8E6; border: 1px solid #EBD9A8; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; text-decoration: none; }
.ins-mf .kicker { color: #A07A12 !important; } .ins-mf p { margin: 4px 0 0; font: italic 500 1rem/1.45 var(--voice); color: var(--ink-t); }
/* inside a conversation */
.keep { align-self: center; border: 0; background: none; color: #C9A032; font-size: .9rem; cursor: pointer; opacity: .55; padding: 4px; white-space: nowrap; }
.keep:hover, .keep.on { opacity: 1; } .keep.on { font-size: .72rem; font-weight: 600; }
.tarot-row { display: flex; gap: 8px; margin: 8px 0 4px; }
.tarot { width: 84px; aspect-ratio: 2 / 3; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 6px; background: linear-gradient(160deg, #8A5A9E, #3B2350); color: #FFF6F8; box-shadow: inset 0 0 0 1.5px rgba(243,221,160,.6), 0 8px 18px -10px rgba(28,32,64,.6); animation: spflip .5s ease; }
.tarot span { font-size: 1.3rem; color: #F3DDA0; } .tarot b { font: italic 600 .88rem/1.1 var(--voice); } .tarot small { font-size: .6rem; color: #F3DDA0; }
.tarot.rev span { transform: rotate(180deg); }
.feel-now { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 8px 12px; margin: 0 12px 8px; background: #F7F2F8; border-radius: 12px; font-size: .85rem; }
.feel-now button { border: 1px solid var(--night-2); background: #fff; color: var(--night-2); border-radius: 999px; padding: 4px 12px; font: 500 .8rem 'Outfit', sans-serif; cursor: pointer; }
.feel-now.heavy { background: #FBEFF3; } .feel-now.heavy p { margin: 0; font-size: .8rem; line-height: 1.5; } .feel-now.done { color: var(--soft); }
.cw-spent { text-align: center; font-size: .72rem; color: var(--soft); margin: -4px 0 8px; }
.ask-g .adv-ava { flex: 0 0 40px; width: 40px !important; height: 40px !important; }
.cr-mini .crm-big { font: 600 2.6rem/1.1 var(--voice) !important; color: #FFF6D6 !important; margin: 6px 0 4px !important; }
/* pop-ups: the button is gold */
.pop-card .btn { background: var(--yellow) !important; color: #3A2E00 !important; box-shadow: 0 8px 18px rgba(224, 181, 58, 0.26), inset 0 -3px 0 rgba(0, 0, 0, 0.1) !important; }
.pop-card .btn:hover { background: var(--yellow-d) !important; }
.pop-card .btn:focus, .pop-card .btn:focus-visible { outline: 2px solid #C9A032 !important; outline-offset: 3px; }
/* the garden card's footer */
.gm-foot { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(160deg, #FFF8E6, #F8ECCD); box-shadow: inset 0 0 0 1px #EBD9A8; }
.side-card .gm-foot p { margin: 0; }
.gm-tom { font: italic 600 1.1rem/1.3 var(--voice) !important; color: #3A2A10 !important; }
.gm-tom span { display: block; font: 700 .64rem 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: #A07A12; margin-bottom: 2px; }
.gm-all { margin-top: 6px !important; font-size: .78rem !important; line-height: 1.45; color: #6B5A33 !important; }

/* Learn, in the shape of Manifest and Chat */
.lstage { text-align: center; }
.lstage h2 { margin: 10px auto 8px; max-width: 560px; font-size: 1.9rem; line-height: 1.15; }
.ls-lede { max-width: 520px; margin: 0 auto 8px !important; font: italic 500 1.12rem/1.5 var(--voice); color: #E3DFF5 !important; }
.ls-meta { font-size: .8rem; color: #C4C0E2 !important; margin: 0 0 16px !important; }
.lstage .btn { display: inline-block; width: auto; padding: 11px 30px; }
.ls-earn { font-size: .8rem; color: #F3DDA0 !important; margin: 10px 0 0 !important; }
.ls-done { font-size: .85rem; color: #9FE0B5 !important; margin: 10px 0 0 !important; font-weight: 600; }
.al-list { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); overflow: hidden; margin: 8px 0 20px; }
.al-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--hair); text-decoration: none; color: var(--ink-t); }
.al-row:first-child { border-top: 0; } .al-row:hover { background: #F7F2F8; }
.al-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg, #2E3263, #1C2040); color: #F3DDA0; font: 600 1rem var(--voice); }
.al-row div { flex: 1; min-width: 0; } .al-row b { display: block; font: 600 1.15rem/1.25 var(--voice); } .al-row div span { display: block; font-size: .82rem; color: var(--soft); line-height: 1.45; margin-top: 2px; }
.al-row em { font-style: normal; font-size: .74rem; color: var(--soft); white-space: nowrap; }
.al-row.done .al-ic { background: #1F8A4C; color: #fff; font-family: 'Outfit', sans-serif; } .al-row.done em { color: #1F8A4C; font-weight: 600; } .al-row.done b { color: var(--soft); }
.side .cr-mini .crm-big small { font-size: 1rem; color: #C4C0E2; }
/* reading an article or a guide */
.art-sheet { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 34px 38px 28px; margin: 14px 0 16px; box-shadow: 0 22px 40px -32px rgba(28,32,64,.35); }
.art-sheet h1 { margin: 4px 0 18px; font-size: 2.2rem; line-height: 1.12; }
.art-body p { font: 500 1.2rem/1.7 var(--voice); color: var(--ink-t); margin: 0 0 16px; }
.art-body .art-first::first-letter { float: left; font: 600 3.4rem/.9 var(--voice); color: #C9A032; margin: 4px 8px 0 0; }
.art-sheet .sig { font: italic 600 1.3rem var(--voice); color: var(--soft); margin: 4px 0 0; }
.art-end { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.art-end .read-earn { margin: 0; }
.g-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.g-steps li { display: flex; gap: 14px; align-items: flex-start; }
.g-steps span { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--night); color: #F3DDA0; font-weight: 700; font-size: .85rem; }
.g-steps p { margin: 4px 0 0; font: 500 1.15rem/1.6 var(--voice); color: var(--ink-t); }
.art-offer { display: block; text-decoration: none; padding: 18px 20px; border-radius: var(--r-sheet); margin: 0 0 12px; background: linear-gradient(160deg, #FFF8E6, #F8ECCD); box-shadow: inset 0 0 0 1px #EBD9A8; color: var(--ink-t); position: relative; }
.ao-k { display: block; font: italic 500 .95rem var(--voice); color: #A07A12; } .art-offer b { display: block; font: 600 1.35rem var(--voice); margin: 2px 0; } .art-offer > span:not(.ao-k) { display: block; font-size: .88rem; color: #6B5A33; padding-right: 70px; }
.art-offer em { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 700; color: #6B2442; }
.art-next { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 14px 20px; border-radius: 14px; background: linear-gradient(150deg, #2E3263, #1C2040); color: #ECEAF8; margin-bottom: 20px; }
.art-next span { font: italic 500 .9rem var(--voice); color: #F3DDA0; } .art-next b { flex: 1; font: 600 1.15rem var(--voice); color: #FFF6F8; } .art-next em { font-style: normal; font-size: .8rem; color: #C4C0E2; }
@media (max-width: 600px) { .art-sheet { padding: 24px 20px; } .art-sheet h1 { font-size: 1.8rem; } .art-next { flex-wrap: wrap; } }
.al-ic { font-family: 'Outfit', sans-serif !important; font-size: .95rem !important; }
.al-ic::before, .al-ic::after { content: none !important; display: none !important; }
.side .cr-mini .crm-big { font: 600 2.6rem/1.1 var(--voice) !important; color: #FFF6D6 !important; }
.art-body .art-first::first-letter { font-size: 2.9rem; margin: 6px 6px 0 0; }
.al-ic { color: #F3DDA0 !important; font-size: .95rem !important; margin: 0 !important; line-height: 1 !important; }
.ev-sign { margin: 2px 0 10px; padding: 12px; background: #F7F2F8; border-radius: 12px; }
.sg-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sg-opts button { border: 1px solid var(--hair); background: #fff; border-radius: 999px; padding: 6px 12px; font: 500 .82rem 'Outfit', sans-serif; color: var(--ink-t); cursor: pointer; }
.sg-opts button.on { background: var(--night-2); border-color: var(--night-2); color: #fff; }
.ev-sign input { width: 100%; }
/* phones: no bottom tab bar; the top bar and the ☰ menu are enough */
@media (max-width: 959px) {
  .tabs { display: none !important; }
  .page { padding-bottom: 40px !important; }
}
.sg-more .fl-lab { margin: 4px 0 6px; font-size: .85rem; }
.ev-sq { margin: 0 0 8px; font-size: .95rem; color: var(--ink-t); }
.sg-opts .sg-none { border-style: dashed; color: var(--soft); }
.sg-opts .sg-none.on { background: #EFEAF2; border-color: #CFC4DA; color: var(--ink-t); border-style: solid; }
.ev-sign + .ev-sign { margin-top: 10px; }
.ev-tom { margin: 14px 0 6px; padding: 14px; border-radius: 14px; background: linear-gradient(160deg, #FFF8E6, #F8ECCD); box-shadow: inset 0 0 0 1px #EBD9A8; }
.ev-tq { margin: 0 0 8px; font: italic 600 1.15rem var(--voice); color: #3A2A10; }
.ev-tom .sg-opts button.on { background: #6B4E00; border-color: #6B4E00; color: #FFF6D6; }
.ev-tom .it-input { margin-top: 4px; }
.sg-opts button:not(.sg-none).on { background: var(--night-2); border-color: var(--night-2); color: #fff; }
.side .tl-prev + .tl-hint { display: block; margin: -10px 0 18px; }
.side .tl-prev + .tl-hint { margin: 0; }
.tl-prev .tl-hint, .ltime .tl-hint { display: block; margin: 12px 0 0 !important; padding: 9px 12px; border-radius: 10px; background: var(--lav); font-size: .85rem; text-decoration: none; }
.ltime .tl-hint { margin: 4px 0 12px !important; }
/* strong days: gold, like "Tomorrow" in the garden card */
.tl-prev .tl-hint, .ltime .tl-hint { background: linear-gradient(160deg, #FFF8E6, #F8ECCD) !important; box-shadow: inset 0 0 0 1px #EBD9A8; color: #6B5A33 !important; }
.tl-prev .tl-hint b, .ltime .tl-hint b { color: #3A2A10 !important; }
.tl-prev .tl-hint::before, .ltime .tl-hint::before { content: '✦ '; color: #C9A032; }
/* card header links: quiet, until hovered */
.side .side-card .sec-row .link, .side .ltime .dd-top .link, .side .sec-row .link.small {
  color: var(--soft) !important; font-weight: 500 !important; font-size: .78rem !important; text-decoration: none; opacity: .85; }
.side .side-card .sec-row .link:hover, .side .ltime .dd-top .link:hover { color: var(--ink-t) !important; opacity: 1; }
/* the quiet side, before her ritual */
.slim-side { opacity: .8; }
.slim-h { margin: 0 0 8px; font: italic 500 .95rem var(--voice); color: var(--soft); }
.slim-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 8px; border-radius: 12px; border: 1px solid var(--hair); background: transparent; text-decoration: none; color: var(--ink-t); }
.slim-card:hover { background: var(--paper); }
.slim-card > span { font: italic 500 .9rem var(--voice); color: var(--soft); white-space: nowrap; }
.slim-card > b { flex: 1; min-width: 0; font-weight: 500; font-size: .82rem; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slim-card > em { font-style: normal; color: var(--soft); }
/* the quiet side, warmer: coloured icons and accents; each row opens its full card */
.slim-side { opacity: 1; }
.slim-h { font: italic 600 1rem var(--voice) !important; color: #A07A12 !important; }
details.slim-card { display: block; padding: 0; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--hair); background: var(--paper); box-shadow: 0 12px 24px -22px rgba(28,32,64,.4); overflow: hidden; border-left: 4px solid var(--c, var(--lav-d)); }
details.slim-card summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
details.slim-card summary::-webkit-details-marker { display: none; }
.sl-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .9rem; color: #fff; background: var(--c, var(--lav-d)); }
details.slim-card > summary > span { font: italic 600 1rem var(--voice); color: var(--ink-t); white-space: nowrap; }
details.slim-card > summary > b { flex: 1; min-width: 0; font-weight: 500; font-size: .8rem; color: var(--soft); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.slim-card > summary > em { font-style: normal; color: var(--soft); transition: transform .2s; }
details.slim-card[open] summary em { transform: rotate(180deg); }
.slim-full > * { margin: 0 !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; border-top: 1px solid var(--hair) !important; }
.slim-full .desk-only { display: block !important; }
.sl-garden { --c: #6E9C82; } .sl-love { --c: #2E3263; } .sl-quest { --c: #C9A032; } .sl-soul { --c: #C2476B; }
/* the quiet side, calmer: one paper card, a plain list */
.slim-h { font: italic 500 1.05rem var(--voice) !important; color: var(--soft) !important; margin: 0 0 8px !important; }
.slim-list { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); overflow: hidden; }
details.slim-card { margin: 0 !important; border: 0 !important; border-top: 1px solid var(--hair) !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; }
.slim-list details.slim-card:first-child { border-top: 0 !important; }
details.slim-card summary { padding: 14px 16px !important; }
details.slim-card summary:hover { background: #F7F2F8; }
.sl-ic { width: auto !important; height: auto !important; background: none !important; color: #C9A032 !important; font-size: .95rem !important; }
details.slim-card > summary > span { font: 500 1.1rem var(--voice) !important; }
details.slim-card > summary > b { font-size: .78rem !important; }
details.slim-card > summary > em { font-size: .8rem; }
details.slim-card[open] { background: #FDFAF6 !important; }
/* after the ritual: the next step, then the quiet list */
.nx-h { margin: 0 0 8px; font: italic 600 1.05rem var(--voice); color: #A07A12; }
.nx-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 10px; border-radius: var(--r-sheet); text-decoration: none; box-shadow: 0 16px 30px -22px rgba(28,32,64,.6); }
.nx-card div { flex: 1; min-width: 0; } .nx-card b { display: block; font: 600 1.3rem var(--voice); } .nx-card small { font-size: .8rem; } .nx-card em { font-style: normal; font-size: 1.3rem; }
.nx-man { background: linear-gradient(150deg, #22254A, #0E0F22); color: #FFF6F8; } .nx-man small { color: #C4C0E2; } .nx-man em { color: #F3C94A; }
.nx-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(243,201,74,.16); color: #F3C94A; font-size: 1.1rem; }
.nx-chat { background: linear-gradient(150deg, #173A2A, #0A1712); color: #EAFBF1; } .nx-chat small { color: #9FD8B6; } .nx-chat em { color: #9FE0B5; }
.nx-chat .adv-ava { width: 40px; height: 40px; flex: none; box-shadow: 0 0 0 2px rgba(159,224,181,.4); }
.nx-card + .slim-side { margin-top: 18px; }
/* the streak and the love sky, in the side: compact, open */
.side .lw { padding: 14px; margin: 18px 0 14px; }
.side .lw .dd-top { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 8px; }
.side .lw .dd-top .muted { font-size: .7rem; }
.side .lw-row { gap: 4px; }
.side .lw-t { padding: 6px 1px; border-radius: 9px; }
.side .lw-t small { font-size: .56rem; } .side .lw-t b { font-size: .78rem; }
.side .lw-chest { width: 16px; height: 12px; }
.side .lw-foot { font-size: .75rem; }
.side .lw-miss { font-size: .75rem; padding: 6px 10px; }
.side .lovesky { padding: 14px; margin: 0 0 14px; }
.side .lovesky .ls-top { gap: 12px; }
.side .lovesky .moon-disc { width: 44px; height: 44px; flex: none; }
.side .lovesky h3 { font-size: 1.15rem; margin: 2px 0 4px; }
.side .lovesky p { font-size: .82rem; line-height: 1.45; }
.side .lovesky .cycle, .side .lovesky .cyc { gap: 12px; }
.side .lovesky svg { max-width: 70px; height: auto; }
/* the side, calmer and lighter */
.nx-wrap.quiet .nx-h { color: var(--soft); font-weight: 500; }
.nx-wrap.quiet .nx-card { opacity: .78; box-shadow: none; padding: 12px 16px; }
.nx-wrap.quiet .nx-card b { font-size: 1.12rem; }
.nx-wrap { margin-bottom: 22px; }
.ss, .sk { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 16px 18px; margin-bottom: 14px; }
.ss-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.ss-top span, .sk-row span { font: italic 500 .95rem var(--voice); color: var(--soft); }
.ss-top b { font: 600 1.1rem var(--voice); color: var(--ink-t); }
.ss-row { display: flex; justify-content: space-between; gap: 4px; }
.ss-row i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .72rem; font-weight: 700; background: #F1ECF4; color: var(--soft); }
.ss-row i.done { background: #1F8A4C; color: #fff; }
.ss-row i.now { background: #FFF6D6; box-shadow: inset 0 0 0 2px #F3C94A; }
.ss-row i.chest { background: linear-gradient(160deg, #F3C94A, #A07A12); color: #fff; }
.ss-row i.chest.done { background: #1F8A4C; }
.ss-l { margin: 12px 0 0; font-size: .78rem; color: var(--soft); } .ss-l b { color: var(--ink-t); }
.sk-row { display: flex; gap: 14px; align-items: flex-start; }
.sk-row b { display: block; font: 600 1.1rem var(--voice); color: var(--ink-t); margin: 1px 0 3px; }
.sk-row p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--soft); }
.sk-cy { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair); }
.moon-disc.sm { width: 40px !important; height: 40px !important; flex: none; }
.sk-dot { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #FFF6D6; color: #C9A032; font-style: normal !important; font-size: 1rem !important; }
.sk-dot { color: #C9A032 !important; font-family: "Outfit", sans-serif !important; }
/* the first thing in each column starts at the same height */
@media (min-width: 960px) { #view > .scene:first-child, #view > .chero:first-child { margin-top: 0 !important; } #side > :first-child { margin-top: 0 !important; } }
/* Manifest in deep plum, apart from the blue stage; the guide's note as a quiet message */
.nx-man { background: linear-gradient(150deg, #5A2447, #2A1024) !important; }
.nx-man small { color: #E6C8D6 !important; }
.nx-wrap.quiet .nx-card, .nx-card { opacity: 1 !important; }
.nx-wrap { margin-bottom: 14px; }
.nx-chat { margin: 0 0 10px; padding: 12px 16px !important; box-shadow: none !important; }
.nx-chat b { font-size: 1.12rem !important; }
.nx-dot { background: rgba(63,184,107,.18) !important; } .nx-dot .nv-dot { margin: 0; width: 9px; height: 9px; }
.nx-msg { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; margin: 0 0 14px; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: #F1EEF4; color: var(--ink-t); }
.nx-msg .adv-ava { width: 30px; height: 30px; font-size: .8rem; flex: none; box-shadow: none; }
.nx-msg div { flex: 1; min-width: 0; }
.nx-from { margin: 0 0 3px; font-size: .75rem; color: var(--soft); } .nx-from b { color: var(--ink-t); }
.nx-txt { margin: 0 0 6px; font: italic 500 1rem/1.45 var(--voice); color: var(--ink-t); }
.nx-msg span { font-size: .75rem; font-weight: 600; color: #1F8A4C; }
.nx-msg:hover { background: #EAE5EF; }
.nx-heavy { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--hair); background: var(--paper); text-decoration: none; color: var(--ink-t); }
.nx-heavy:hover { border-color: var(--lav-d); }
.nx-heavy span { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg, #3B3F7A, #1C2040); color: #F3DDA0; box-shadow: 0 0 14px rgba(140,127,192,.45); }
.nx-heavy div { flex: 1; } .nx-heavy b { display: block; font: 600 1.05rem var(--voice); } .nx-heavy small { font-size: .75rem; color: var(--soft); } .nx-heavy em { font-style: normal; color: var(--soft); }
.nx-heavy .nx-g { background: #E4F4EA !important; box-shadow: none !important; } .nx-g .nv-dot { margin: 0; width: 9px; height: 9px; }
.sk + .nx-heavy { margin-top: 0; }
.nx-msg { margin-bottom: 14px; }
.nx-new { font-style: normal; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: #C2476B; color: #fff; padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; }
.nx-msg .nx-txt { margin-bottom: 4px; }
/* lean: earlier messages, and earning credits */
.pl { margin: 28px 0 10px; }
.pl-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.pl-h span { font: italic 500 1.05rem var(--voice); color: var(--soft); } .pl-h a { font-size: .8rem; color: var(--soft); text-decoration: none; }
.pl-row { display: flex; align-items: baseline; gap: 14px; padding: 10px 2px; border-top: 1px solid var(--hair); text-decoration: none; color: var(--ink-t); }

.pl-row b { flex: 1; font: 500 1.08rem var(--voice); } .pl-row em { font-style: normal; color: var(--soft); }
.pl-row:hover b { color: var(--night-2); }
.next-open { font-size: .8rem !important; color: var(--soft); margin: 14px 0 !important; }
.earn2 { border: 1px solid var(--hair); border-radius: 14px; background: var(--paper); margin: 0 0 20px; }
.earn2 summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; }
.earn2 summary::-webkit-details-marker { display: none; }
.earn2 summary span { flex: 1; font: 500 1.02rem var(--voice); color: var(--ink-t); } .earn2 summary b { font-weight: 500; font-size: .78rem; color: var(--soft); } .earn2 summary em { font-style: normal; color: var(--soft); transition: transform .2s; }
.earn2[open] summary em { transform: rotate(180deg); }
.earn2-list { padding: 0 16px 10px; }
.earn2-list a { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hair); text-decoration: none; color: var(--ink-t); font-size: .85rem; }
.earn2-list i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #CFC4DA; display: grid; place-items: center; font-style: normal; font-size: .6rem; flex: none; }
.earn2-list a.done i { background: #1F8A4C; border-color: #1F8A4C; color: #fff; } .earn2-list a.done span { color: var(--soft); text-decoration: line-through; }
.earn2-list span { flex: 1; } .earn2-list em { font-style: normal; font-size: .75rem; font-weight: 600; color: #A07A12; }
/* earlier messages: an inviting card */
.pl { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 20px 22px 22px; margin: 22px 0 12px; box-shadow: 0 20px 36px -30px rgba(28,32,64,.35); }
.pl h2 { margin: 2px 0 10px; font-size: 1.5rem; }
.pl-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); text-decoration: none; color: var(--ink-t); }
.pl-row .petal-dot { flex: none; margin-top: 4px; }
.pl-row div { flex: 1; min-width: 0; }
.pl-row small { display: block; font: italic 500 .9rem var(--voice); color: var(--soft); }
.pl-row b { display: block; font: 600 1.2rem var(--voice); margin: 1px 0 3px; }
.pl-row p { margin: 0; font-size: .85rem; color: var(--soft); line-height: 1.45; }
.pl-row em { font-style: normal; font-size: .8rem; font-weight: 600; color: #6B2442; white-space: nowrap; padding-top: 4px; }
.pl-row:hover b { color: #6B2442; }
.pl-all { display: block; text-align: center; margin-top: 8px; }
.pl-row .petal-dot { width: 24px !important; height: 32px !important; flex: 0 0 24px !important; }
.nx-h { font-weight: 700 !important; }
.nx-guide { display: block !important; padding: 0 !important; }
.nx-guide .ng-main { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--ink-t); }
.nx-guide .ng-main div { flex: 1; } .nx-guide .ng-main b { display: block; font: 600 1.05rem var(--voice); } .nx-guide .ng-main small { font-size: .75rem; color: var(--soft); } .nx-guide .ng-main em { font-style: normal; color: var(--soft); }
.ng-note { display: block; padding: 8px 14px 10px 58px; border-top: 1px solid var(--hair); font-size: .76rem; color: var(--soft); text-decoration: none; }
.ng-note b { color: var(--ink-t); font-weight: 600; } .ng-note:hover { color: var(--ink-t); }
.nx-guide .ng-note, .nx-guide .ng-note b { display: inline; font: 500 .76rem 'Outfit', sans-serif; }
.nx-guide .ng-note { display: block; } .nx-guide .ng-note b { font-weight: 700; color: var(--ink-t); }
.nx-h { font-weight: 700 !important; color: var(--ink-t) !important; }
.slim-side + .nx-heavy { margin-top: 14px; }
/* Talk to a guide: their faces, and a soft glow */
.nx-guide2 { margin: 0 0 14px; border-radius: var(--r-sheet); overflow: hidden; border: 1px solid #E3DCEB; background: radial-gradient(ellipse at 0% 0%, rgba(140,127,192,.16), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(63,184,107,.10), transparent 55%), var(--paper); box-shadow: 0 16px 30px -26px rgba(28,32,64,.45); }
.nx-guide2 .ng-main { display: flex; align-items: center; gap: 14px; padding: 16px 16px 14px; text-decoration: none; color: var(--ink-t); }
.ng-faces { position: relative; display: flex; flex: none; }
.ng-faces .adv-ava { width: 34px; height: 34px; font-size: .85rem; box-shadow: 0 0 0 2px #FFFBFA; }
.ng-faces .adv-ava + .adv-ava { margin-left: -12px; }
.ng-on { position: absolute; right: -2px; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #3FB86B; box-shadow: 0 0 0 2px #FFFBFA; }
.nx-guide2 .ng-main div { flex: 1; min-width: 0; }
.nx-guide2 .ng-main b { display: block; font: 600 1.15rem var(--voice); }
.nx-guide2 .ng-main small { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: #2E6B45; }
.nx-guide2 .ng-main small .nv-dot { margin: 0; width: 6px; height: 6px; }
.nx-guide2 .ng-main em { font-style: normal; color: var(--soft); }
.nx-guide2 .ng-note { display: flex !important; align-items: center; gap: 10px; padding: 10px 16px 12px; border-top: 1px dashed #E3DCEB; text-decoration: none; }
.nx-guide2 .ng-note .adv-ava { width: 24px; height: 24px; font-size: .65rem; box-shadow: none; flex: none; }
.nx-guide2 .ng-note span { flex: 1; font: italic 500 .95rem var(--voice) !important; color: var(--soft) !important; }
.nx-guide2 .ng-note span b { font: italic 600 .95rem var(--voice) !important; color: var(--ink-t) !important; }
.ng-dot { width: 7px; height: 7px; border-radius: 50%; background: #C2476B; flex: none; }
.nx-guide2 .ng-note:hover span { color: var(--ink-t) !important; }
/* Manifest, in the same family as Talk to a guide: fanned card backs, and her four steps */
.nx-man2 { margin: 0 0 14px; border-radius: var(--r-sheet); overflow: hidden; border: 1px solid #EAD9E2; background: radial-gradient(ellipse at 0% 0%, rgba(194,71,107,.14), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(243,201,74,.14), transparent 55%), var(--paper); box-shadow: 0 16px 30px -26px rgba(90,36,71,.5); }
.nx-man2 .ng-main { display: flex; align-items: center; gap: 16px; padding: 16px 16px 14px; text-decoration: none; color: var(--ink-t); }
.nx-man2 .ng-main div { flex: 1; min-width: 0; } .nx-man2 .ng-main b { display: block; font: 600 1.15rem var(--voice); }
.nx-man2 .ng-main small { font-size: .74rem; color: #8A5A2A; } .nx-man2 .ng-main em { font-style: normal; color: var(--soft); }
.mc-fan { position: relative; flex: none; width: 66px; height: 44px; }
.mc-fan i { position: absolute; top: 2px; width: 26px; height: 38px; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-size: .7rem; color: #F3DDA0;
  background: linear-gradient(160deg, #2A1E3E, #14173A); box-shadow: inset 0 0 0 1.5px rgba(243,201,74,.7), 0 4px 10px -4px rgba(28,32,64,.6); }
.mc-fan i:nth-child(1) { left: 2px; transform: rotate(-12deg); } .mc-fan i:nth-child(2) { left: 20px; top: 0; z-index: 2; } .mc-fan i:nth-child(3) { left: 38px; transform: rotate(12deg); }
.mc-fan i.up { color: #fff; }
.mc-steps { display: flex; justify-content: space-between; gap: 6px; padding: 10px 16px 12px; border-top: 1px dashed #EAD9E2; text-decoration: none; }
.mc-steps span { display: flex; align-items: center; gap: 5px; font: italic 500 .85rem var(--voice); color: var(--soft); }
.mc-steps i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #D8C6CF; }
.mc-steps span.on { color: var(--ink-t); } .mc-steps span.on i { background: #C9A032; border-color: #C9A032; }
/* today's message in the list; tomorrow's tease */
.pl-row.today { background: linear-gradient(90deg, rgba(243,201,74,.10), transparent); margin: 0 -22px; padding: 14px 22px; }
.pl-row.lockd b { color: #6B2442; }
.pl-lock { flex: none; width: 24px; height: 32px; display: grid; place-items: center; color: #C9A032; font-size: 1.1rem; margin-top: 4px; }
.tmt { display: flex; gap: 18px; align-items: center; padding: 20px 22px; margin: 0 0 14px; border-radius: var(--r-sheet); color: #ECEAF8; background: radial-gradient(ellipse at 15% 20%, rgba(140,127,192,.35), transparent 60%), linear-gradient(150deg, #22254A, #0E0F22); box-shadow: 0 20px 36px -28px rgba(28,32,64,.7); }
.tmt-moon { flex: none; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFFBEA, #E3DDC4); box-shadow: inset -18px 0 0 0 rgba(14,15,34,.9), 0 0 30px rgba(255,251,234,.35); }
.tmt-b { flex: 1; min-width: 0; }
.tmt-k { margin: 0; font: italic 500 .95rem var(--voice); color: #F3DDA0; }
.tmt-t { margin: 2px 0 6px; font: 600 1.35rem var(--voice); color: #FFF6F8; } .tmt-t span { filter: blur(6px); user-select: none; }
.tmt-c { margin: 0; font-size: .85rem; color: #C4C0E2; } .tmt-c b { color: #F3DDA0; font-variant-numeric: tabular-nums; }
.tmt-e { margin: 2px 0 0; font-size: .72rem; color: #8F8AB0; }
/* the letters card, softer */
.pl { padding: 16px 18px 14px; box-shadow: none; }
.pl h2 { font-size: 1.25rem; margin: 0 0 6px; }
.pl .kicker { font-size: .85rem !important; }
.pl-row { padding: 10px 0; gap: 12px; }
.pl-row .petal-dot { width: 18px !important; height: 24px !important; flex: 0 0 18px !important; margin-top: 3px; }
.pl-row small { font-size: .8rem; } .pl-row b { font-size: 1.05rem; font-weight: 500; }
.pl-row p { font-size: .78rem; }
.pl-row em { font-weight: 500; font-size: .75rem; color: var(--soft); }
.pl-row.today { margin: 0 -18px; padding: 10px 18px; }
.pl-lock { width: 18px; height: 24px; font-size: .9rem; margin-top: 3px; }
.pl-all { display: block; text-align: center; margin-top: 8px; padding: 9px; border: 1px solid var(--hair); border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--night-2); text-decoration: none; }
.pl-all:hover { background: #F7F2F8; }
.pl-row span.pl-lock, .pl-row span.petal-dot { width: 18px !important; flex: 0 0 18px !important; }
/* the letters card on phones: one line per letter */
@media (max-width: 600px) {
  .pl { padding: 14px 14px 12px; }
  .pl h2 { font-size: 1.1rem; }
  .pl-row { padding: 9px 0; align-items: center; }
  .pl-row.today { margin: 0 -14px; padding: 9px 14px; }
  .pl-row p { display: none; }
  .pl-row small { font-size: .72rem; }
  .pl-row b { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-row em { padding-top: 0; }
  .pl-all { padding: 8px; font-size: .78rem; }
}
.nx-man2 .ng-main small, .nx-guide2 .ng-main small { display: block; line-height: 1.4 !important; margin-top: 2px; }
.nx-guide2 .ng-main small { display: flex; }
.pl-more summary { list-style: none; display: flex; justify-content: center; gap: 6px; padding: 10px 0 2px; border-top: 1px solid var(--hair); cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--night-2); }
.pl-more summary::-webkit-details-marker { display: none; }
.pl-more[open] summary { display: none; }
.pl-more summary em { font-style: normal; }
/* inside the quiet list: lean content, not a card inside a card */
.slim-full { padding: 4px 16px 14px; }
.slim-full > .side-card, .slim-full > div > .side-card { background: none !important; padding: 0 !important; }
.slim-full .side-card .body { padding: 8px 0 0 !important; }
.slim-full .side-card .sec-row .kicker, .slim-full .side-card > .body > .sec-row { display: none !important; }
.slim-full .side-card { border-top: 0 !important; }
.sq-r { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: .82rem; }
.sq-r:first-child { border-top: 0; }
.sq-r i { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid #D9C99A; display: grid; place-items: center; font-style: normal; font-size: .6rem; }
.sq-r.ok i { background: #1F8A4C; border-color: #1F8A4C; color: #fff; }
.sq-r span { flex: 1; color: var(--ink-t); } .sq-r b { font-weight: 600; font-size: .75rem; color: var(--soft); }
.sq-f { margin: 8px 0 0; font-size: .75rem; line-height: 1.45; color: #8A6400; }

/* her daily letter */
#msg.reading, .reading:has(.lt-letter) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.lt-letter { position: relative; margin: 24px 0 18px; padding: 44px 44px 36px; border-radius: 6px 6px 22px 22px;
  background: linear-gradient(180deg, #FFFDF8, #FFF8EC); box-shadow: 0 0 0 1px #EFE2C8, 0 30px 50px -34px rgba(107,78,0,.45), inset 0 0 60px rgba(243,201,74,.07); }
.lt-letter::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(201,160,50,.28); border-radius: 3px 3px 16px 16px; pointer-events: none; }
.lt-seal { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #FFE8A8;
  background: radial-gradient(circle at 35% 35%, #D65A7E, #8E2B4B); box-shadow: 0 4px 12px rgba(142,43,75,.4); font-size: .95rem; }
.lt-k { text-align: center; margin: 0; font: italic 500 1rem var(--voice); color: #A07A12; }
.lt-title { text-align: center; margin: 6px 0 10px; font: 600 2.2rem/1.15 var(--voice); color: var(--ink-t); }
.lt-rule { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 0 auto 22px; max-width: 220px; color: #C9A032; font-size: .75rem; }
.lt-rule i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #D9C08A, transparent); }
.lt-dear { margin: 0 0 10px; font: italic 600 1.35rem var(--voice); color: var(--ink-t); }
.lt-text p { margin: 0 0 14px; font: 500 1.2rem/1.75 var(--voice); color: #2A2640; }
.lt-text .lt-first::first-letter { float: left; font: 600 3.3rem/.85 var(--voice); color: #C9A032; margin: 6px 8px 0 0; }
.lt-lp { padding: 12px 16px; border-left: 2px solid #D9C08A; background: rgba(243,201,74,.07); border-radius: 0 10px 10px 0; }
.lt-lp span { display: block; font: 700 .66rem 'Outfit', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #A07A12; margin-bottom: 2px; }
.lt-num { display: flex; gap: 16px; align-items: center; margin: 22px 0 14px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(150deg, #22254A, #0E0F22); color: #ECEAF8; }
.lt-num > span { font: 600 2.2rem/1 var(--voice); color: #F3DDA0; min-width: 64px; text-align: center; }
.lt-num b { display: block; font: italic 600 1.05rem var(--voice); color: #FFF6F8; } .lt-num p { margin: 2px 0 0; font-size: .85rem; color: #C4C0E2; }
.lt-num.rare { box-shadow: 0 0 0 2px #F3C94A, 0 0 30px rgba(243,201,74,.5); }
.lt-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; }
@media (max-width: 560px) { .lt-acts { grid-template-columns: 1fr; } }
.lt-acts > div { padding: 14px 16px; border-radius: 12px; background: #FFFDF8; box-shadow: inset 0 0 0 1px #EFE2C8; }
.lt-acts span { display: block; font: 700 .68rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #A07A12; margin-bottom: 4px; }
.lt-acts p { margin: 0; font: 500 1.05rem/1.5 var(--voice); color: var(--ink-t); }
.lt-aff { margin: 0 0 22px; padding: 22px 20px 20px; text-align: center; border-radius: 14px; font: italic 600 1.55rem/1.35 var(--voice); color: #3A2A10;
  background: linear-gradient(160deg, #FFF3D1, #F6E3B0); box-shadow: inset 0 0 0 1px #E3C98A; border: 0; }
.lt-aff span { display: block; font: 700 .66rem 'Outfit', sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #8A6400; margin-bottom: 6px; }
.lt-sign { text-align: right; margin: 0; font: italic 500 1.1rem var(--voice); color: var(--soft); }
.lt-sign b { display: block; font: italic 600 1.8rem var(--voice); color: var(--ink-t); margin-top: 2px; }
@media (max-width: 600px) { .lt-letter { padding: 36px 22px 26px; } .lt-title { font-size: 1.75rem; } .lt-text p { font-size: 1.12rem; } }
/* the letter is a plain block, not the old reading grid */
#msg:has(.lt-letter) { display: block !important; max-width: none !important; }
.lt-letter { display: block !important; }
.lt-letter .lt-text p { max-width: none; }
/* while the rose drinks: the button rests */
.scene #water.pouring-btn { animation: none !important; background: rgba(255,255,255,.08) !important; color: #C4C0E2 !important; box-shadow: none !important; cursor: default; pointer-events: none; }
.wb-dots { display: inline-flex; gap: 4px; margin-right: 6px; vertical-align: 2px; }
.wb-dots i { width: 5px; height: 5px; border-radius: 50%; background: #C4C0E2; animation: cwdot 1.2s infinite; }
.wb-dots i:nth-child(2) { animation-delay: .15s; } .wb-dots i:nth-child(3) { animation-delay: .3s; }
.lt-head { text-align: center; margin: 0 auto 12px; max-width: 460px; font: italic 500 1.12rem/1.45 var(--voice); color: var(--soft); }
.lt-close { margin: 4px 0 14px; font: italic 500 1.15rem/1.5 var(--voice); color: var(--ink-t); text-align: center; }
.scene #petal.pouring-btn { animation: none !important; background: rgba(255,255,255,.08) !important; color: #C4C0E2 !important; box-shadow: none !important; cursor: default; pointer-events: none; }
/* the ritual's three buttons, one colour: gold */
.scene #water:not(.pouring-btn), .scene #petal:not(.pouring-btn), .scene #unlockMsg { background: var(--yellow) !important; color: #3A2E00 !important; box-shadow: 0 8px 18px rgba(224,181,58,.26), inset 0 -3px 0 rgba(0,0,0,.1) !important; }
.scene #water:not(.pouring-btn):hover, .scene #petal:not(.pouring-btn):hover { background: var(--yellow-d) !important; }

/* the love garden */
.gstage { text-align: center; padding-bottom: 26px !important; }
.gd-bed { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 14px 0 6px; }
.gd-planted { opacity: .75; } .gd-planted svg { width: 70px; height: 70px; } .gd-planted small { display: block; font-size: .65rem; color: #C4C0E2; }
.gd-now { position: relative; } .gd-now svg { width: 170px; height: 170px; filter: drop-shadow(0 0 26px rgba(243,201,74,.35)); }
.gd-now span { display: block; margin-top: -6px; font: italic 500 1rem var(--voice); color: #F3DDA0; }
.gd-lv { display: flex; align-items: center; gap: 16px; justify-content: center; margin: 18px auto 0; max-width: 460px; text-align: left; padding: 14px 18px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.gd-lv .ms-ring { margin: 0; width: 70px; height: 70px; flex: none; } .gd-lv .ms-ring b { font-size: 1.5rem; }
.gd-lv b { font: 600 1.4rem var(--voice); color: #FFF6F8; } .gd-lv p { margin: 2px 0 0; font-size: .85rem; color: #C4C0E2; }
.gd-path, .gd-pet { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 20px; margin: 16px 0; }
.gp-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; }
.gp-row::before { content: ''; position: absolute; top: 17px; left: 10%; right: 10%; height: 2px; background: #EFE6D8; }
.gp { position: relative; text-align: center; }
.gp i { display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto 8px; border-radius: 50%; font-style: normal; font-weight: 700; font-size: .85rem; background: #F4EFE7; color: var(--soft); box-shadow: 0 0 0 4px var(--paper); }
.gp.done i { background: #1F8A4C; color: #fff; } .gp.now i { background: linear-gradient(160deg, #F3C94A, #A07A12); color: #fff; box-shadow: 0 0 0 4px var(--paper), 0 0 18px rgba(243,201,74,.6); }
.gp b { display: block; font: 600 1rem var(--voice); color: var(--ink-t); } .gp small { display: block; font-size: .68rem; line-height: 1.35; color: var(--soft); margin-top: 2px; }
.gp:not(.done):not(.now) b { color: var(--soft); }
.gd-note { margin: 16px 0 0; font-size: .8rem; color: var(--soft); text-align: center; }
@media (max-width: 600px) { .gp small { display: none; } .gp b { font-size: .82rem; } }
.gd-pet h2 { margin: 2px 0 12px; }
.gd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gd-p { text-align: center; padding: 16px 8px 12px; border-radius: 14px; background: #FBF8F3; border: 1px solid #F0E8DC; }
.gd-p .petal-dot { width: 40px; height: 54px; display: block; margin: 0 auto 8px; }
.gd-p b { display: block; font: 600 1rem var(--voice); color: var(--ink-t); } .gd-p small { font-size: .7rem; color: var(--soft); }
.gd-p:not(.got) { opacity: .6; } .gd-p:not(.got) b { color: var(--soft); }
.gd-p.rare.got { background: linear-gradient(160deg, #FFF8E6, #F8ECCD); border-color: #E3C98A; box-shadow: 0 0 18px rgba(243,201,74,.35); }
.gd-p.rare small { color: #A07A12; font-weight: 600; }
.slim-full .sl-more { display: block; margin-top: 12px !important; padding: 9px; text-align: center; border: 1px solid var(--hair) !important; border-radius: 999px !important; font-size: .82rem; font-weight: 600; color: var(--night-2); text-decoration: none; }
.slim-full .sl-more:hover { background: #F7F2F8; }
details.slim-card[open] { border-top-color: var(--hair) !important; }
.slim-full .sl-more { margin: 8px 0 4px !important; background: var(--yellow) !important; border: 0 !important; color: #3A2E00 !important; font-weight: 700; box-shadow: 0 6px 14px rgba(224,181,58,.25), inset 0 -2px 0 rgba(0,0,0,.08) !important; }
.slim-full .sl-more:hover { background: var(--yellow-d) !important; }
/* the footer: very quiet, like the funnel pages */
.pf { max-width: 1080px; margin: 10px auto 0; padding: 26px 32px 40px; border-top: 1px solid var(--hair); text-align: center; color: #A49DB5; font-size: .72rem; line-height: 1.55; }
.pf p { margin: 0 0 6px; }
.pf a { color: #8F88A8; text-decoration: none; } .pf a:hover { color: var(--ink-t); text-decoration: underline; }
.pf .foot-disclaimer { max-width: 720px; margin: 10px auto 0; font-size: .64rem; color: #B3ADC2; }
body.chatting .pf, body.auth .pf, body.guest .pf { display: none; }
@media (max-width: 959px) { .pf { padding: 22px 20px 30px; } }
.pf .foot-links { margin: 14px 0 0; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
/* compatibility and read-more on Today: the same quiet card as the letters */
.bt-row .bd-pair { flex: none; margin-top: 2px; } .bt-row .bd-ava { width: 28px; height: 28px; font-size: .85rem; } .bt-row .bd-ava + .bd-ava { margin-left: -9px; }
.bt-row b span { color: #C2476B; letter-spacing: 1px; font-size: .8rem; margin-left: 4px; }
.bt-empty { margin: 4px 0 12px; font-size: .85rem; color: var(--soft); line-height: 1.5; }
.bt-add { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-add a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hair); background: #fff; font-size: .82rem; color: var(--ink-t); text-decoration: none; }
.bt-add a:hover { border-color: var(--lav-d); }
.rm-ic { flex: 0 0 18px; width: 18px; color: #C9A032; font-size: 1rem; margin-top: 4px; text-align: center; }
.pl.bt, .pl.rm { margin-top: 12px; }
.bt-row .bd-pair { width: auto !important; flex: 0 0 auto !important; }
.bt-row .bd-ava { font: 600 .8rem var(--voice) !important; color: #FFF6F8 !important; box-shadow: 0 0 0 2px var(--paper) !important; }
.pl-row .rm-ic { width: 18px !important; }
/* phones: one column in a sensible order — the ritual and letter, then the next steps, then compatibility and credits last */
@media (max-width: 959px) {
  body:not(.chatting) .page { display: flex; flex-direction: column; }
  body:not(.chatting) .page > #view { display: contents; }
  body:not(.chatting) .page > #side:not([hidden]) { display: contents; }
  #view > * { order: 1; }
  #side > * { order: 2; }
  #view > .earn2 { order: 3; }
  #side > .nx-wrap { margin-top: 18px; }
  /* the compatibility teaser, tighter */
  .pl.bt h2 { font-size: 1.15rem; }
  .bt-empty { font-size: .8rem; margin-bottom: 10px; }
  .bt-add { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .bt-add a { padding: 8px 4px; font-size: .74rem; text-align: center; }
}
/* the letter's foot: quiet links */
.lt-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(201,160,50,.3); }
@media (max-width: 560px) { .lt-foot { grid-template-columns: 1fr; gap: 12px; } }
.lt-foot span { display: block; font: 700 .64rem 'Outfit', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #A07A12; margin-bottom: 4px; }
.lt-foot a { display: block; padding: 3px 0; font: italic 500 .98rem/1.35 var(--voice); color: #6B5A33; text-decoration: none; }
.lt-foot a:hover { color: #3A2A10; text-decoration: underline; }
/* compatibility: love and friendship */
.bt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .bt-cols { grid-template-columns: 1fr; gap: 6px; } }
.bt-gh { margin: 4px 0 2px; font: italic 600 1rem var(--voice); color: #A07A12; }
.bt-g .pl-row { padding: 10px 0; }
.bt-none { display: block; padding: 10px 12px; margin: 4px 0; border: 1px dashed #E0D4DC; border-radius: 12px; font-size: .8rem; color: var(--soft); text-decoration: none; }
.bt-none:hover { border-color: var(--lav-d); color: var(--ink-t); }
/* the letter's foot: one row per group, label left, links right */
.lt-foot { display: block !important; margin-top: 22px; padding-top: 4px; border-top: 1px solid rgba(201,160,50,.3); }
.lf-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; padding: 12px 0; border-bottom: 1px solid rgba(201,160,50,.18); }
.lf-row:last-child { border-bottom: 0; padding-bottom: 0; }
.lf-row > span { font: 700 .64rem 'Outfit', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #A07A12; padding-top: 5px; }
.lf-row > div { display: grid; gap: 4px; }
.lf-row a { display: flex; justify-content: space-between; gap: 10px; font: italic 500 1rem/1.35 var(--voice); color: #6B5A33; text-decoration: none; padding: 2px 0; }
.lf-row a i { font-style: normal; color: #C9A032; }
.lf-row a:hover { color: #3A2A10; }
@media (max-width: 560px) { .lf-row { grid-template-columns: 1fr; gap: 4px; } }
/* the streak: hearts on a golden thread, quiet */
.ss2 { margin: 0 0 14px; padding: 16px 18px 14px; border-radius: var(--r-sheet); border: 1px solid #EFE4D2;
  background: radial-gradient(ellipse at 100% 0%, rgba(243,201,74,.10), transparent 60%), var(--paper); }
.ss2 .ss-top { margin-bottom: 10px; } .ss2 .ss-top b { font-size: 1.05rem; font-weight: 500; }
.ss2-row { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 2px; }
.ss2-line { position: absolute; left: 14px; right: 14px; top: 50%; height: 1px; background: linear-gradient(90deg, #E3C98A, #EFE4D2); }
.ss2-d { position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; color: #DCCFB8; background: var(--paper); box-shadow: inset 0 0 0 1px #EADFCB; }
.ss2-d.done { color: #C9A032; box-shadow: inset 0 0 0 1px #E3C98A; background: #FFF8E6; }
.ss2-d.now { color: #C2476B; background: #FFF; box-shadow: inset 0 0 0 1.5px #E7A8BA, 0 0 12px rgba(194,71,107,.25); }
.ss2-d.ss2-g { color: #C9A032; font-size: .72rem; }
.ss2-d.ss2-g.done { background: #FFF1CC; }
.ss2 .ss-l { margin-top: 10px; font-size: .74rem; }
/* day 7: the grand one */
.ss2-d.ss2-g { width: 36px; height: 36px; font-size: 1rem; color: #FFF6D6; background: radial-gradient(circle at 35% 30%, #F6DD8C, #C9A032 55%, #8A6400); box-shadow: 0 0 0 2px #FFF8E6, 0 0 0 3px #E3C98A, 0 0 16px rgba(243,201,74,.55); }
.ss2-d.ss2-g.done { background: radial-gradient(circle at 35% 30%, #F6DD8C, #C9A032 55%, #8A6400); }
.ss2-d.ss2-g::after { content: '+25'; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); font: 700 .6rem 'Outfit', sans-serif; color: #A07A12; white-space: nowrap; }
.ss2-row { padding-bottom: 12px; }
/* the streak, refined: every circle with a small label on one baseline; day 7 a gold ring, not a coin */
.ss2-row { padding-bottom: 0 !important; align-items: flex-start; }
.ss2-line { top: 13px !important; }
.ss2-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 34px; }
.ss2-c small { height: 12px; font: 600 .6rem 'Outfit', sans-serif; color: var(--soft); white-space: nowrap; }
.ss2-c small.hi { color: #A07A12; }
.ss2-d.next { box-shadow: inset 0 0 0 1.5px #E3C98A; border: 0; background: #FFFDF6; color: #D9C08A; outline: 1px dashed #E3C98A; outline-offset: 2px; }
.ss2-d.ss2-g { width: 26px !important; height: 26px !important; font-size: .82rem !important; color: #C9A032 !important; background: #FFFBF0 !important;
  box-shadow: inset 0 0 0 2px #C9A032, 0 0 0 3px #FFF6DC, 0 0 14px rgba(243,201,74,.45) !important; }
.ss2-d.ss2-g.done { background: linear-gradient(160deg, #F6DD8C, #C9A032) !important; color: #fff !important; }
.ss2-d.ss2-g::after { content: none !important; }
.ss2 .ss-l { margin-top: 8px; }
/* the letter arrives: it rises in, the seal glows, a soft golden light passes over it */
#msg.just-open .lt-letter { animation: ltrise 1s cubic-bezier(.2,.8,.2,1); }
#msg.just-open .lt-seal { animation: ltseal 1.6s ease; }
#msg.just-open .lt-letter::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,236,170,.55) 50%, transparent 70%); background-size: 250% 100%; animation: ltshine 1.8s ease .3s both; }
@keyframes ltrise { from { opacity: 0; transform: translateY(28px) scale(.98); } }
@keyframes ltseal { 0% { transform: translateX(-50%) scale(.3); opacity: 0; } 50% { transform: translateX(-50%) scale(1.35); box-shadow: 0 0 40px rgba(243,201,74,.9); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes ltshine { from { background-position: 150% 0; opacity: 1; } to { background-position: -50% 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #msg.just-open .lt-letter, #msg.just-open .lt-seal, #msg.just-open .lt-letter::after { animation: none; } }
.glowup { position: fixed; inset: 0; pointer-events: none; z-index: 250; background: radial-gradient(circle at 50% 55%, rgba(255,230,160,.55), rgba(255,230,160,0) 55%); animation: glowbloom 2.4s ease forwards; }
.glowup i { position: absolute; bottom: 30%; width: 5px; height: 5px; border-radius: 50%; background: #FFE8A8; box-shadow: 0 0 8px 2px rgba(243,201,74,.8); opacity: 0; animation: glowrise 2.6s ease-out forwards; }
@keyframes glowbloom { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes glowrise { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -260px) scale(1); } }
/* Today's petal as a keepsake: the petal pressed in its own tinted tile */
.pk { display: flex; gap: 20px; align-items: stretch; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-sheet); padding: 18px; margin-bottom: 20px; }
.pk-tile { flex: 0 0 96px; border-radius: 48px 48px 14px 14px; background: color-mix(in srgb, var(--c) 12%, #fff); border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 8px 14px; }
.pk-tile svg { width: 44px; height: 62px; filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--c) 35%, transparent)); transform: rotate(-8deg); }
.pk-rar { display: flex; gap: 4px; } .pk-rar i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--c) 22%, #fff); } .pk-rar i.on { background: var(--c); }
.pk-rl { font: 600 .68rem 'Outfit', sans-serif; letter-spacing: .04em; color: color-mix(in srgb, var(--c) 70%, #3a2f45); }
.pk-body { flex: 1; min-width: 0; }
.pk-k { font: italic 1rem var(--voice); color: var(--muted); margin: 0 0 2px; }
.pk-body h3 { font-size: 1.55rem; margin: 0 0 8px; }
.pk-t { font: 1.15rem/1.55 var(--voice); margin: 0 0 12px; }
.pk-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; border-top: 1px solid var(--hair); padding-top: 10px; font-size: .85rem; color: var(--muted); }
.pk-foot b { color: var(--ink-t, inherit); }
.pk-g { display: inline-flex; align-items: center; gap: 8px; color: var(--rose-c); font-weight: 600; text-decoration: none; }
.pk-dots { display: inline-flex; gap: 3px; } .pk-dots i { width: 7px; height: 9px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #E8E2EC; } .pk-dots i.on { background: var(--c); }
.pk-rare { background: linear-gradient(170deg, #FFF6E6, var(--paper)); border-color: var(--gold-l); }
.pk-rare .pk-tile { box-shadow: 0 0 0 4px rgba(243,201,74,.18), 0 0 24px rgba(243,201,74,.25); }
@media (max-width: 560px) { .pk { gap: 14px; padding: 14px; } .pk-tile { flex-basis: 72px; padding: 14px 6px 10px; } .pk-tile svg { width: 34px; height: 48px; } .pk-body h3 { font-size: 1.3rem; } .pk-t { font-size: 1.05rem; } }

/* Love, Today: two soft facing panels */
.dd { padding: 18px; }
.dd-top { align-items: flex-start; margin-bottom: 14px; }
.dd .dd-h { font: 600 1.45rem var(--voice); margin: 0; color: inherit; }
.dd-date { font: italic .95rem var(--voice); color: var(--muted); margin: 0; }
.dd-cols { gap: 12px; }
.dd-cols > div { border-radius: 14px; padding: 14px 16px; }
.dd-do { background: #F1F8F3; border: 1px solid #D5EADC; } .dd-no { background: #FCF1F4; border: 1px solid #F1D6DE; }
.dd-cols h3 { display: flex; align-items: center; gap: 8px; }
.dd-ic { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 .72rem 'Outfit', sans-serif; color: #fff; }
.dd-do .dd-ic { background: #1F8A4C; } .dd-no .dd-ic { background: var(--rose-c); }
.dd .dd-cols ul { gap: 0; }
.dd .dd-cols li { padding: 8px 0 8px 16px; border-top: 1px solid rgba(0,0,0,.05); }
.dd .dd-cols li:first-child { border-top: 0; }
.dd .dd-cols li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; top: 15px; }
.dd-do li::before { background: #1F8A4C; } .dd-no li::before { background: var(--rose-c); }
/* The letter ceremony */
.lc { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; cursor: pointer; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #2E3263 0%, #181A36 55%, #0E0F22 100%); opacity: 0; transition: opacity .8s ease; }
.lc.in { opacity: 1; }
.lc.out { opacity: 0; transition: opacity 1.2s ease; }
.lc-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .2; animation: lctw 2.4s ease-in-out infinite alternate; }
@keyframes lctw { to { opacity: .85; } }
.lc-rays { position: absolute; left: 50%; top: 45%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; opacity: 0; transition: opacity 1s ease;
  background: repeating-conic-gradient(from 0deg, rgba(255,226,150,.16) 0deg 4deg, transparent 4deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 55%); mask: radial-gradient(circle, #000 0%, transparent 55%); animation: lcspin 30s linear infinite; }
@keyframes lcspin { to { transform: rotate(360deg); } }
.lc.open .lc-rays { opacity: 1; }
.lc-env { position: relative; width: 300px; height: 196px; perspective: 800px; transform: translateY(40px) scale(.92); opacity: 0; transition: transform 1.4s cubic-bezier(.2,.8,.2,1), opacity 1.2s ease; }
.lc.in .lc-env { transform: none; opacity: 1; animation: lcfloat 3s ease-in-out 1.2s infinite alternate; }
@keyframes lcfloat { to { transform: translateY(-6px); } }
.lc-back, .lc-front { position: absolute; inset: 0; border-radius: 6px; }
.lc-back { background: #EFE2C4; box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 60px rgba(243,201,74,.12); }
.lc-front { background: linear-gradient(160deg, #FBF3E0, #F1E3C2); clip-path: polygon(0 28%, 50% 62%, 100% 28%, 100% 100%, 0 100%); z-index: 3; }
.lc-flap { position: absolute; left: 0; right: 0; top: 0; height: 62%; background: linear-gradient(180deg, #F6EBD2, #E9D8B2); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top; z-index: 4; transition: transform .8s cubic-bezier(.5,0,.3,1), z-index 0s .4s; }
.lc.open .lc-flap { transform: rotateX(180deg); z-index: 1; }
.lc-paper { position: absolute; left: 14px; right: 14px; top: 10px; bottom: 10px; background: #FFFBF1; border-radius: 4px; z-index: 2; display: grid; place-items: start center; padding-top: 16px;
  color: #C9A032; font-size: 1.1rem; transition: transform 1s cubic-bezier(.2,.8,.2,1) .35s, box-shadow 1s ease .35s; }
.lc.open .lc-paper { transform: translateY(-70px); box-shadow: 0 0 50px 10px rgba(255,226,150,.55); }
.lc-seal { position: absolute; left: 50%; top: 62%; width: 50px; height: 50px; margin: -25px 0 0 -25px; z-index: 5; }
.lc-seal b { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; color: #FFE8A8; font-size: 1.05rem;
  background: radial-gradient(circle at 35% 30%, #D0566E, #8E2440 70%); box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.08);
  transition: transform .7s cubic-bezier(.3,0,.3,1), opacity .7s ease; animation: lcseal 1.6s ease-in-out infinite alternate; }
@keyframes lcseal { from { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 0 rgba(243,201,74,0); } to { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 26px 6px rgba(243,201,74,.55); } }
.lc-seal { transition: transform 1s cubic-bezier(.3,0,.3,1), opacity .9s ease .2s, filter .6s ease; }
.lc.crack .lc-seal { transform: translateY(-90px) scale(1.25); opacity: 0; filter: brightness(1.6) drop-shadow(0 0 18px rgba(255,226,150,.9)); }
.lc-cap { position: relative; height: 1.6em; margin: 0; font: italic 1.35rem var(--voice); color: #F3E3BE; text-align: center; min-width: 280px; }
.lc-cap span { position: absolute; left: 0; right: 0; transition: opacity .8s ease; }
.lc-cap .c1 { opacity: 0; transition-delay: .6s; } .lc.in .lc-cap .c1 { opacity: .9; }
.lc-cap .c2 { opacity: 0; } .lc.open .lc-cap .c1 { opacity: 0; transition-delay: 0s; } .lc.open .lc-cap .c2 { opacity: .95; transition-delay: .3s; }
.lc-bloom { position: absolute; left: 50%; top: 42%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #FFFDF5 0%, #FFE7A6 45%, rgba(255,231,166,0) 70%); transform: scale(0); opacity: 0; transition: transform 1s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
.lc.bloom .lc-bloom { transform: scale(22); opacity: 1; }
/* The petal's credits: a gold dial on a night card */
.pop-card.pz-card { background: radial-gradient(ellipse at 50% 30%, #333870 0%, #1E2146 60%, #16182F 100%); color: #EDE3F2; border: 1px solid rgba(243,201,74,.22); text-align: center; }
.pz-card .pop-x { color: rgba(243,227,190,.6); }
.pz-card .pop-kick { color: #E8D6A8; font-size: 1.15rem; }
.pz-dial { position: relative; width: 230px; height: 230px; margin: 0 auto 6px; }
.pz-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pz-track { fill: none; stroke: rgba(243,221,160,.12); stroke-width: 3; stroke-linecap: round; }
.pz-arc { fill: none; stroke: #E4BE5C; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(243,201,74,.7)); transition: stroke-dasharray .16s ease-out; }
.pz-dot { fill: rgba(243,221,160,.28); transition: fill .15s; } .pz-dot.on { fill: #FFE8A8; }
.pz-star { font-size: 15px; text-anchor: middle; dominant-baseline: central; fill: rgba(243,221,160,.4); transition: fill .15s; }
.pz-star.on { fill: #FFE8A8; filter: drop-shadow(0 0 6px #F3C94A); }
.pz-ghost { fill: none; stroke: #F3C94A; stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0; transition: opacity .3s; }
.pz-ghost.on { opacity: .9; } .pz-dial.near .pz-ghost { animation: nmpulse 1.4s ease-in-out infinite; }
.pz-glow { position: absolute; inset: 50px; border-radius: 50%; background: radial-gradient(circle, rgba(243,201,74,.22), transparent 70%); transition: transform .5s ease, opacity .5s; }
.pz-dial.hot .pz-glow, .pz-dial.landed .pz-glow { transform: scale(1.25); background: radial-gradient(circle, rgba(243,201,74,.38), transparent 70%); }
.pz-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pz-num span { font: 600 4.4rem/1 var(--voice); color: #FFE8A8; font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 0 24px rgba(243,201,74,.45); }
.pz-num span.roll { animation: pzroll .16s ease-out; }
@keyframes pzroll { from { opacity: .3; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.pz-num em { font: italic 1.05rem var(--voice); color: rgba(243,227,190,.7); margin-top: 2px; }
.pz-burst { position: absolute; left: 50%; top: 50%; }
.pz-burst i { position: absolute; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #FFE8A8; box-shadow: 0 0 8px 2px rgba(243,201,74,.8); opacity: 0; transform: rotate(var(--a)) translateY(0); }
.pz-dial.landed .pz-burst i { animation: pzburst 1.1s ease-out forwards; }
@keyframes pzburst { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-40px); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-128px); } }
.pz-dial.landed .pz-num span { animation: pzland .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes pzland { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
.pz-card .slot-near { color: #F4B6C8; }
.pz-card .pop-lines span { background: rgba(243,221,160,.08); border: 1px solid rgba(243,221,160,.2); color: #F3E3BE; font-weight: 500; }
.pz-card h2 { color: #FFF6E0; }
.pz-card .slot-after p { color: rgba(237,227,242,.78); }
@media (prefers-reduced-motion: reduce) { .pz-num span.roll, .pz-dial.landed .pz-num span, .pz-dial.landed .pz-burst i, .pz-dial.near .pz-ghost { animation: none; } }
.pz-dial.hot .pz-arc { stroke: #FFE8A8; filter: drop-shadow(0 0 10px #F3C94A); }
.pz-dial.hot .pz-star { font-size: 20px; }
.pz-dial.landed.near { animation: slshake .4s ease 1; }
.pz-star { font-size: 19px; }
.pz-dial.hot .pz-star { font-size: 24px; }
.pz-top { font: 600 11px 'Outfit', sans-serif; text-anchor: middle; dominant-baseline: central; fill: rgba(243,221,160,.55); }
.pz-dial.hot .pz-top, .pz-dial.near .pz-top { fill: #FFE8A8; }
/* Watering: the breath line sits under the rose, in the caption's place */
.breath-line { margin: 0 0 6px; font: italic 1.45rem/1.3 var(--voice); color: #FFF3DA; text-shadow: 0 0 18px rgba(243,201,74,.35); text-align: center; min-height: 1.3em; transition: opacity .35s ease; }
.breath-line.fade { opacity: 0; }
/* Ivory, not night: the dial card sits on the dark stage, so it needs its own light */
.pop-card.pz-card { background: radial-gradient(ellipse at 50% 28%, #FFFDF6 0%, #FFF8E8 55%, #F8EDD3 100%); color: var(--ink-t, #2A2440); border: 1px solid #E6D3A3; box-shadow: 0 30px 80px rgba(10,10,30,.5), 0 0 0 6px rgba(243,201,74,.12); }
.pz-card .pop-x { color: #A08A5C; }
.pz-card .pop-kick { color: #8C7550; }
.pz-track { stroke: rgba(176,138,69,.18); }
.pz-arc { stroke: #C9A032; filter: drop-shadow(0 0 4px rgba(243,201,74,.55)); }
.pz-dot { fill: rgba(176,138,69,.3); } .pz-dot.on { fill: #C9A032; }
.pz-star { fill: rgba(176,138,69,.45); } .pz-star.on { fill: #E0A91C; filter: drop-shadow(0 0 6px rgba(243,201,74,.9)); }
.pz-top { fill: #A08A5C; } .pz-dial.hot .pz-top, .pz-dial.near .pz-top { fill: #B07F0A; }
.pz-ghost { stroke: #C9A032; }
.pz-dial.hot .pz-arc { stroke: #E0A91C; filter: drop-shadow(0 0 10px rgba(243,201,74,.9)); }
.pz-glow { background: radial-gradient(circle, rgba(243,201,74,.2), transparent 70%); }
.pz-dial.hot .pz-glow, .pz-dial.landed .pz-glow { background: radial-gradient(circle, rgba(243,201,74,.32), transparent 70%); }
.pz-num span { color: #2A2350; text-shadow: 0 0 22px rgba(243,201,74,.45); }
.pz-num em { color: #8C7550; }
.pz-burst i { background: #F3C94A; box-shadow: 0 0 8px 2px rgba(243,201,74,.6); }
.pz-card .slot-near { color: var(--rose-c); }
.pz-card .pop-lines span { background: #FFF3CF; border: 1px solid #F0DFA8; color: #6B4E00; font-weight: 600; }
.pz-card h2 { color: #2A2350; }
.pz-card .slot-after p { color: #6E6680; }
/* The ✦ at 15 is a drawn star; on a near miss it glows in place (no scaling, so it never drifts) */
.pz-star { font-size: 0; fill: rgba(176,138,69,.4); transition: fill .15s; }
.pz-star.on, .pz-dial.hot .pz-star { fill: #E0A91C; filter: drop-shadow(0 0 6px rgba(243,201,74,.95)); }
.pz-dial.near .pz-star { fill: #D9A521; animation: pzmiss 1.6s ease-in-out infinite; }
@keyframes pzmiss { 0%, 100% { opacity: .55; filter: drop-shadow(0 0 2px rgba(243,201,74,.4)); } 50% { opacity: 1; filter: drop-shadow(0 0 9px rgba(243,201,74,1)); } }
@media (prefers-reduced-motion: reduce) { .pz-dial.near .pz-star { animation: none; } }
/* Credits for reading the letter */
.lt-chip { display: table; margin: 6px auto 0; padding: 3px 12px; border-radius: 999px; font: 600 .78rem 'Outfit', sans-serif; color: #8A6A14; background: rgba(243,201,74,.14); border: 1px solid rgba(201,160,50,.28); }
.lt-chip.got { color: #1F6B3E; background: rgba(31,138,76,.08); border-color: rgba(31,138,76,.25); }
.lt-got { text-align: right; margin: -4px 0 14px; font: italic 1.02rem var(--voice); color: #8A6A14; }
.lt-got span { color: #C9A032; font-style: normal; }
.lt-got.just { animation: ltgot 1.6s ease; }
@keyframes ltgot { 0% { opacity: 0; transform: translateY(6px); text-shadow: 0 0 0 rgba(243,201,74,0); } 40% { opacity: 1; transform: none; text-shadow: 0 0 14px rgba(243,201,74,.9); } 100% { text-shadow: 0 0 0 rgba(243,201,74,0); } }
@media (prefers-reduced-motion: reduce) { .lt-got.just { animation: none; } }
.um-cr { color: #F3D27A; font-weight: 700; white-space: nowrap; }
#msg.just-open .lt-chip { animation: ltgot 2s ease .6s both; }
/* The guide quiz */
.gquiz { margin: 22px 0 6px; padding: 18px; border-radius: 16px; background: #FFFBF1; border: 1px solid #EFE0B8; }
.gquiz-k { margin: 0; font: italic 1rem var(--voice); color: #8C7550; }
.gquiz-h { margin: 2px 0 12px; font: 600 1.25rem var(--voice); }
.gquiz.done .gquiz-h { margin: 0; color: #1F6B3E; font-size: 1.1rem; }
.gquiz-q + .gquiz-q { margin-top: 14px; padding-top: 14px; border-top: 1px solid #F0E6CC; }
.gquiz-q > p:first-child { margin: 0 0 8px; font-weight: 600; }
.gquiz-opts { display: grid; gap: 8px; }
.gquiz-o { text-align: left; padding: 10px 14px; border-radius: 12px; border: 1px solid #E6DCC6; background: #fff; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.gquiz-o:hover { border-color: #C9A032; }
.gquiz-o.yes { background: #EEF7F1; border-color: #1F8A4C; color: #1F6B3E; font-weight: 600; }
.gquiz-o.yes::before { content: '✓  '; }
.gquiz-o.no { background: #FCF1F4; border-color: #E7B9C6; color: #9A3A56; }
.gquiz-q.right .gquiz-o:not(.yes) { opacity: .45; cursor: default; }
.gquiz-note { margin: 8px 0 0; font: italic 1rem var(--voice); color: var(--rose-c); }
/* Manifest above the letter: phones only (the side column has it on desktop) */
.man-top { display: none; }
@media (max-width: 959px) { .man-top { display: block; margin: 4px 0 18px; } .man-top .nx-h { margin: 0 0 8px; } .man-top .nx-man2 { margin: 0; } }
.gquiz .gquiz-o.yes { background: #EEF7F1; } .gquiz .gquiz-o.no { background: #FCF1F4; }
/* Letter credit chip: small, one line, whatever the letter's paragraph styles say */
#msg p.lt-chip { display: table; width: auto; margin: 8px auto 2px; padding: 3px 12px; border-radius: 999px; font: 600 .76rem/1.4 'Outfit', sans-serif; letter-spacing: .01em; white-space: nowrap; text-align: center; color: #1F6B3E; background: rgba(31,138,76,.08); border: 1px solid rgba(31,138,76,.22); }

/* Phones: the finished-ritual box, compact */
@media (max-width: 560px) {
  .scene.compact .sc-row { display: grid; grid-template-columns: 56px 1fr; gap: 6px 14px; align-items: center; padding: 16px 16px 14px; }
  .scene.compact .sc-rose { width: 56px; height: 56px; } .scene.compact .sc-rose svg { width: 44px; height: 44px; }
  .scene.compact .sc-hi { font-size: .92rem; }
  .sc-h { font-size: 1.3rem; margin-bottom: 6px; }
  .sc-chips { gap: 5px; } .sc-chips span { font-size: .7rem; padding: 3px 8px; }
  .sc-chips .sc-grow { display: none; }
  .scene.compact .read-now { grid-column: 1 / -1; margin-top: 8px; padding: 10px 16px; }
  .sc-next { padding: 9px 16px; font-size: .75rem; gap: 8px; align-items: center; }
  .sc-next b { font-size: .75rem; }
}

/* Phones: today's petal as a card with a small badge row, not a tall thin column */
@media (max-width: 560px) {
  .pk { flex-direction: column; gap: 10px; padding: 16px; }
  .pk-tile { flex: none; flex-direction: row; align-self: flex-start; justify-content: flex-start; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px; }
  .pk-tile svg { width: 22px; height: 30px; transform: rotate(-8deg); }
  .pk-body h3 { font-size: 1.35rem; margin-bottom: 6px; }
  .pk-t { font-size: 1.05rem; line-height: 1.5; margin-bottom: 10px; }
  .pk-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* Phones: the three ritual steps side by side in three even columns, number above the words */
@media (max-width: 560px) {
  .scene .ritual-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex-wrap: nowrap; margin: 14px 0 4px; }
  .scene .ritual-steps li { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: .86rem !important; line-height: 1.2; }
  .scene .ritual-steps li::before { margin: 0 0 5px; }
  .scene .ritual-steps li small { padding-left: 0; font-size: .66rem; margin-top: 2px; }
}
/* Phones: the credits pill in the top bar stays on one line */
@media (max-width: 560px) { .ln-credits { white-space: nowrap; } }
/* Phones: the ritual stage, lean enough that the button sits above the fold */
@media (max-width: 560px) {
  .scene:not(.compact) { padding-top: 16px; padding-bottom: 18px; }
  .scene .n-hi { font-size: 1.55rem; }
  .scene .n-date { font-size: .8rem; margin-top: 2px; }
  .scene .ritual-steps { margin: 10px 0 0; }
  .rose-stage { height: 150px; } .rose-stage .heart-rose { width: 150px; height: 150px; }
  .scene-info .kicker { font-size: .85rem; margin-bottom: 0; }
  .scene-info h2 { font-size: 1.5rem; margin: 0 0 4px; }
  .scene-info p { font-size: .86rem; line-height: 1.45; margin-bottom: 10px; }
  .scene-info .btn { padding-top: 12px; padding-bottom: 12px; }
}
/* Phones: the credits card, smaller, and smaller again once the amount has landed */
@media (max-width: 560px) {
  .pz-card .pop-kick { font-size: 1rem; margin-bottom: 0; }
  .pz-dial { width: 180px; height: 180px; transition: width .5s ease, height .5s ease; }
  .pz-num span { font-size: 3.4rem; transition: font-size .5s ease; }
  .pz-num em { font-size: .9rem; }
  .pz-card.pz-done .pz-dial { width: 120px; height: 120px; margin-bottom: 0; }
  .pz-card.pz-done .pz-num span { font-size: 2.3rem; }
  .pz-card.pz-done .pz-num em, .pz-card.pz-done .pz-top { display: none; }
  .pz-card .slot-near { font-size: 1rem; margin: 2px 0; }
  .pz-card .pop-lines { margin: 4px auto 8px; }
  .pz-card .pop-lines span { padding: 5px 10px; margin: 4px 0; font-size: .8rem; }
  .pz-card h2 { font-size: 1.4rem; margin: 2px 0 4px; }
  .pz-card .slot-after p { font-size: .84rem; line-height: 1.45; margin-bottom: 12px; }
}
/* Phones: the steps may never push the stage wider than the screen */
@media (max-width: 560px) {
  .scene .ritual-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scene .ritual-steps li { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .scene .ritual-steps li small { white-space: normal; }
  .scene, .scene-grid, .scene-info { min-width: 0; max-width: 100%; }
}
@media (max-width: 360px) {
  .scene .ritual-steps li { font-size: .78rem !important; }
  .scene .ritual-steps li small { font-size: .6rem; }
  .scene .n-hi { font-size: 1.35rem; }
}
/* Very narrow phones: the top bar fits */
@media (max-width: 380px) {
  .ln-bar { gap: 6px; }
  .ln-logo { font-size: .92rem; min-width: 0; }
  .ln-sub { font-size: .76rem; }
  .ln-right { flex-shrink: 0; }
  .ln-credits { font-size: .78rem; padding: 4px 8px; margin-right: 4px; }
  .ln-streak { font-size: .78rem; padding: 3px 7px; }
}
@media (max-width: 330px) { .ln-sub { display: none; } }
/* Phones: the ritual steps as one slim progress line */
.rs-mob { display: none; }
@media (max-width: 560px) {
  .scene .ritual-steps { display: none; }
  .rs-mob { display: block; margin: 12px auto 2px; max-width: 260px; text-align: center; }
  .rs-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 8px; }
  .rs-bar i { height: 4px; border-radius: 999px; background: rgba(255,255,255,.14); }
  .rs-bar i.done { background: #7FB08E; }
  .rs-bar i.now { background: linear-gradient(90deg, #E9C98A, #F3DDA0); box-shadow: 0 0 8px rgba(243,201,74,.5); }
  .rs-mob p { margin: 0; font: italic 1rem/1.3 var(--voice); color: #FFF4F0; }
  .rs-n { font: 600 .66rem 'Outfit', sans-serif; font-style: normal; letter-spacing: .04em; color: #E9C98A; margin-right: 4px; }
  .rs-mob small { display: block; font: 500 .7rem 'Outfit', sans-serif; color: #F3DDA0; opacity: .85; margin-top: 2px; }
}
/* Very narrow phones: a smaller brand so the top bar fits */
@media (max-width: 340px) {
  .ln-logo { font-size: .8rem; }
  .ln-sub { display: none; }
  .ln-credits { font-size: .72rem; padding: 3px 7px; }
}
@media (max-width: 380px) { .ln-credits .cr-w { display: none; } }
.scene-info b { white-space: nowrap; }
/* The closed menu must never widen the page (Safari counts off-screen fixed panels as page width) */
.drawer { overflow: hidden; visibility: hidden; transition: opacity .2s, visibility 0s .25s; }
body.menu-open .drawer { visibility: visible; transition: opacity .2s, visibility 0s; }
html, body { overflow-x: clip; max-width: 100%; }
/* Desktop: the same gold progress bar, one segment above each step */
@media (min-width: 561px) {
  .scene .ritual-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 600px; margin: 18px auto 6px; }
  .scene .ritual-steps li { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; padding-top: 14px;
    background: linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) top center / 100% 4px no-repeat; border-radius: 2px; }
  .scene .ritual-steps li.done { background-image: linear-gradient(#7FB08E, #7FB08E); }
  .scene .ritual-steps li.now { background-image: linear-gradient(90deg, #E9C98A, #F3DDA0); filter: drop-shadow(0 -2px 6px rgba(243,201,74,.25)); }
  .scene .ritual-steps li small { flex-basis: 100%; padding-left: 0; }
}
/* Drawer: room between the two feature cards and the page list */
.dr-feat { margin: 6px 0 22px; }
.dr-feat a b { font-size: 1.2rem; line-height: 1.15; }
/* Phones: the stage lines up exactly with the cards below it */
@media (max-width: 560px) { .scene { margin-left: 0; margin-right: 0; } }
/* Desktop: leaner steps */
@media (min-width: 561px) {
  .scene .ritual-steps { max-width: 480px; gap: 8px; margin: 14px auto 4px; }
  .scene .ritual-steps li { padding-top: 10px; font-size: .88rem !important; background-size: 100% 3px; }
  .scene .ritual-steps li::before { width: 18px; height: 18px; margin-right: 5px; font-size: .64rem; }
  .scene .ritual-steps li small { font-size: .64rem; margin-top: 0; }
}
/* Desktop steps: lean, but easy to read */
@media (min-width: 561px) {
  .scene .ritual-steps { max-width: 560px; }
  .scene .ritual-steps li { font-size: 1.02rem !important; color: #C3BCD6 !important; }
  .scene .ritual-steps li.now { color: #FFF6F0 !important; }
  .scene .ritual-steps li::before { width: 21px; height: 21px; font-size: .72rem; border-color: #9A90B4; }
  .scene .ritual-steps li small { font-size: .74rem; margin-top: 2px; }
}
/* Today's petal: folded until she taps it */
.pk-tile { cursor: pointer; transition: transform .3s ease, box-shadow .3s ease; }
.pk:not(.open) .pk-tile { animation: pkcall 2.6s ease-in-out infinite; }
@keyframes pkcall { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent), 0 0 22px color-mix(in srgb, var(--c) 30%, transparent); } }
.pk:not(.open) .pk-tile:hover { transform: translateY(-2px); }
.pk-tap { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 12px; padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 45%, #fff); background: color-mix(in srgb, var(--c) 10%, #fff);
  font: 600 .84rem 'Outfit', sans-serif; color: color-mix(in srgb, var(--c) 60%, #2A2350); cursor: pointer; }
.pk-tap span { color: #C9A032; }
.pk.open .pk-tap { display: none; }
.pk-more { display: none; }
.pk.open .pk-more { display: block; }
.pk-m { margin: 0 0 6px; font: italic 1rem var(--voice); color: color-mix(in srgb, var(--c) 55%, #4A4060); }
.pk.opening .pk-tile svg { animation: pkunfold 1.1s cubic-bezier(.2,.8,.2,1); }
@keyframes pkunfold { 0% { transform: rotate(-8deg) scale(1); } 35% { transform: rotate(10deg) scale(1.3); filter: drop-shadow(0 0 16px var(--c)); } 100% { transform: rotate(-8deg) scale(1); } }
.pk.opening .pk-more > * { animation: pkline .8s ease both; }
.pk.opening .pk-more > *:nth-child(2) { animation-delay: .25s; } .pk.opening .pk-more > *:nth-child(3) { animation-delay: .5s; }
@keyframes pkline { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
/* garden dots are tappable */
.pk-g a { color: var(--rose-c); font-weight: 600; text-decoration: none; }
.pk-dots button { width: 9px; height: 12px; padding: 0; border: 0; cursor: pointer; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #E8E2EC; transition: transform .15s; }
.pk-dots button.on { background: var(--c); }
.pk-dots button:hover, .pk-dots button.sel { transform: scale(1.35); }
.pk-dots button.sel { box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--c, #C9A032) 60%, #fff); }
.pk-gnote { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; font-size: .84rem; line-height: 1.45; color: #4A4060; background: color-mix(in srgb, var(--c, #C9A032) 10%, #fff); }
.pk-gnote b { font: 600 .95rem var(--voice); }
@media (prefers-reduced-motion: reduce) { .pk:not(.open) .pk-tile, .pk.opening .pk-tile svg, .pk.opening .pk-more > * { animation: none; } }
/* Desktop steps: a gold thread with three points of light */
@media (min-width: 561px) {
  .scene .ritual-steps { position: relative; max-width: 560px; margin: 18px auto 6px; gap: 0; }
  .scene .ritual-steps::before, .scene .ritual-steps::after { content: ''; position: absolute; top: 12px; left: 16.66%; height: 2px; border-radius: 2px; }
  .scene .ritual-steps::before { right: 16.66%; background: rgba(255,255,255,.13); }
  .scene .ritual-steps::after { width: calc(66.66% * var(--p, 0)); background: linear-gradient(90deg, #C9A032, #F3DDA0 40%, #FFF6D8 50%, #F3DDA0 60%, #C9A032) 0 0 / 200% 100%;
    box-shadow: 0 0 10px rgba(243,201,74,.6); animation: rsthread 3s linear infinite; }
  @keyframes rsthread { to { background-position: -200% 0; } }
  .scene .ritual-steps li { flex-direction: column; flex-wrap: nowrap; padding-top: 0; background: none !important; filter: none !important; position: relative; z-index: 1; }
  .scene .ritual-steps li::before { display: grid; width: 24px; height: 24px; margin: 0 auto 8px; font-size: .72rem; background: #262A58; border: 1.5px solid rgba(255,255,255,.28); color: rgba(255,255,255,.55); }
  .scene .ritual-steps li.done::before { content: '✓'; background: linear-gradient(135deg, #F3DDA0, #C9A032); border-color: #F3DDA0; color: #2A2350; box-shadow: 0 0 12px rgba(243,201,74,.55); }
  .scene .ritual-steps li.now::before { background: #262A58; border: 2px solid #F3DDA0; color: #FFF6D8; animation: rsnode 2.2s ease-in-out infinite; }
  @keyframes rsnode { 0%, 100% { box-shadow: 0 0 0 0 rgba(243,201,74,0), 0 0 8px rgba(243,201,74,.4); } 50% { box-shadow: 0 0 0 7px rgba(243,201,74,.12), 0 0 20px rgba(243,201,74,.7); } }
  .scene .ritual-steps li.done { color: #E9DDB8 !important; }
  .scene .ritual-steps li small { margin-top: 3px; }
}
/* Phones: the same shimmer on the current segment */
@media (max-width: 560px) {
  .rs-bar i.now { background: linear-gradient(90deg, #C9A032, #F3DDA0 40%, #FFF6D8 50%, #F3DDA0 60%, #C9A032) 0 0 / 200% 100%; animation: rsthread 3s linear infinite; }
  .rs-bar i.done { background: #E0B84F; }
  @keyframes rsthread { to { background-position: -200% 0; } }
}
@media (prefers-reduced-motion: reduce) { .scene .ritual-steps::after, .scene .ritual-steps li.now::before, .rs-bar i.now { animation: none; } }
@media (min-width: 561px) {
  .scene .ritual-steps li { align-items: center; }
  .scene .ritual-steps li::before { flex: none; align-self: center; width: 24px !important; height: 24px !important; min-height: 24px; padding: 0; line-height: 1; place-items: center; box-sizing: border-box; }
}
/* Desktop: a shorter stage, so the button sits above the fold on a laptop */
@media (min-width: 561px) {
  .scene:not(.compact) { padding-top: 26px; padding-bottom: 24px; }
  .rose-stage { height: 196px; } .rose-stage .heart-rose { width: 196px; height: 196px; }
  .scene-info .kicker { margin-bottom: 0; }
  .scene-info h2 { margin: 2px 0 6px; }
  .scene-info p { margin-bottom: 12px; }
}
/* Thirsty: softly drooped and a little pale, never muddy */
.thirsty .rose-stage .heart-rose { filter: saturate(.72) brightness(.94) drop-shadow(0 14px 24px rgba(0,0,0,.35)); }
/* The garden: petals open when tapped */
button.gd-p { font: inherit; color: inherit; cursor: pointer; width: 100%; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
button.gd-p:hover { transform: translateY(-2px); }
button.gd-p.sel { border-color: #C9A032; box-shadow: 0 0 0 3px rgba(243,201,74,.25); opacity: 1; }
.gd-hint { margin: 10px 0 0; text-align: center; font: italic .95rem var(--voice); color: var(--soft); }
.gd-open { display: flex; gap: 18px; align-items: center; margin-top: 14px; padding: 18px; border-radius: 16px; background: color-mix(in srgb, var(--c) 9%, #FFFDF8); border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); }
.go-petal { flex: 0 0 74px; display: grid; place-items: center; }
.go-petal svg { width: 50px; height: 70px; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--c) 40%, transparent)); transform: rotate(-8deg); }
.go-k { margin: 0; font: italic .95rem var(--voice); color: var(--soft); }
.go-body h3 { margin: 2px 0 4px; font-size: 1.4rem; }
.go-m { margin: 0 0 8px; font: italic 1.02rem var(--voice); color: color-mix(in srgb, var(--c) 50%, #4A4060); }
.go-t { margin: 0; font: 1.08rem/1.55 var(--voice); color: var(--ink-t); }
.go-wait { color: var(--soft); font-style: italic; }
.gd-open.unfold .go-petal svg { animation: pkunfold 1.1s cubic-bezier(.2,.8,.2,1); }
.gd-open.unfold .go-body > * { animation: pkline .7s ease both; }
.gd-open.unfold .go-body > *:nth-child(2) { animation-delay: .15s; } .gd-open.unfold .go-body > *:nth-child(3) { animation-delay: .3s; } .gd-open.unfold .go-body > *:nth-child(4) { animation-delay: .45s; }
@media (max-width: 560px) { .gd-open { gap: 12px; padding: 14px; } .go-petal { flex-basis: 50px; } .go-petal svg { width: 36px; height: 50px; } }
@media (prefers-reduced-motion: reduce) { .gd-open.unfold .go-petal svg, .gd-open.unfold .go-body > * { animation: none; } }
/* Watering: slower, calmer breathing */
.water-fx .can { animation-duration: 16s; }
.breath-line { transition: opacity .7s ease; }
.breath-orb { position: absolute; left: 50%; top: 52%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,226,170,.28) 0%, rgba(255,226,170,.1) 45%, transparent 70%); box-shadow: 0 0 0 1px rgba(243,221,160,.18);
  animation: breathorb 8s ease-in-out infinite; }
@keyframes breathorb { 0% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(.7); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .breath-orb { animation: none; } }
.breath-orb { box-shadow: none; background: radial-gradient(circle, rgba(255,226,170,.3) 0%, rgba(255,226,170,.12) 40%, transparent 68%); }
.pop-card:focus { outline: none; }
.pop .btn:focus:not(:focus-visible) { outline: none; box-shadow: none; }
/* Watering: the breath words in a glowing capsule; everything else on the stage steps back */
.scene.pouring .scene-info > *:not(.breath-line):not(.btn):not(#water) { opacity: .28; transition: opacity 1s ease; }
.scene.pouring .ritual-steps, .scene.pouring .rs-mob, .scene.pouring .n-greet { opacity: .4; transition: opacity 1s ease; }
.breath-line { display: table; margin: 4px auto 14px; padding: 12px 28px; border-radius: 999px; font-size: 1.5rem; min-width: 280px;
  background: radial-gradient(ellipse at 50% 50%, rgba(243,221,160,.16), rgba(243,221,160,.05) 70%); border: 1px solid rgba(243,221,160,.38);
  animation: breathbox 8s ease-in-out infinite; }
@keyframes breathbox { 0%, 100% { box-shadow: 0 0 0 0 rgba(243,201,74,0), 0 0 14px rgba(243,201,74,.12); } 50% { box-shadow: 0 0 0 8px rgba(243,201,74,.07), 0 0 34px rgba(243,201,74,.35); } }
@media (max-width: 560px) { .breath-line { font-size: 1.2rem; padding: 10px 20px; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .breath-line { animation: none; } }
/* Desktop too: the dial shrinks once the amount lands, and the card stays compact */
@media (min-width: 561px) {
  .pz-dial { width: min(230px, 32vh); height: min(230px, 32vh); transition: width .5s ease, height .5s ease; }
  .pz-num span { transition: font-size .5s ease; }
  .pz-card.pz-done .pz-dial { width: 140px; height: 140px; margin-bottom: 2px; }
  .pz-card.pz-done .pz-num span { font-size: 2.6rem; }
  .pz-card.pz-done .pz-num em { display: none; }
  .pz-card .slot-near { font-size: 1.1rem; margin: 2px 0 4px; }
  .pz-card .pop-lines { margin: 4px auto 10px; }
  .pz-card .pop-lines span { padding: 6px 12px; margin: 5px 0; font-size: .86rem; }
  .pz-card h2 { font-size: 1.6rem; margin: 2px 0 4px; }
  .pz-card .slot-after p { font-size: .92rem; line-height: 1.5; margin-bottom: 14px; }
  .pz-card .slot-after .btn { padding-top: 11px; padding-bottom: 11px; }
}
/* While a pop-up is open, the stage's big buttons step out of sight, so nothing tempts a click behind it */
body.popped .scene .btn, body.popped .scene .read-now { visibility: hidden; }
/* The credits card can't be closed mid-spin */
.pz-card:not(.pz-done) .pop-x { visibility: hidden; }
/* The breath timer inside the capsule */
.breath-line .bl-t { display: block; transition: opacity .7s ease; }
.breath-line .bl-t.fade { opacity: 0; }
.bl-bar { display: block; width: 180px; max-width: 100%; height: 3px; margin: 10px auto 0; border-radius: 999px; background: rgba(243,221,160,.18); overflow: hidden; }
.bl-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #E9C98A, #FFF1C8); box-shadow: 0 0 8px rgba(243,201,74,.7);
  transform-origin: left center; animation: blbreath 8s ease-in-out infinite; }
@keyframes blbreath { 0% { transform: scaleX(.02); } 50% { transform: scaleX(1); } 100% { transform: scaleX(.02); } }
.bl-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.bl-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(243,221,160,.25); transition: background .6s, box-shadow .6s; }
.bl-dots i.on { background: #F3DDA0; box-shadow: 0 0 6px rgba(243,201,74,.8); }
@media (prefers-reduced-motion: reduce) { .bl-bar i { animation: none; } }
/* The letter's credit chip: gold, like every other credit, so it belongs to the letter */
#msg p.lt-chip { color: #8A6A14; background: rgba(243,201,74,.13); border-color: rgba(201,160,50,.35); }
.lf-all { display: none; }
@media (max-width: 560px) {
  .lt-foot .lf-row > span { display: flex; justify-content: space-between; align-items: baseline; }
  .lt-foot .lf-row > span a.lf-all { display: inline; padding: 0; font: 600 .78rem 'Outfit', sans-serif; letter-spacing: 0; text-transform: none; color: #A07A12; text-decoration: none; }
  .lt-foot a.lf-all-row { display: none; }
}
.gd-grid > .gd-open { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 959px) { .bt-wrap.bt-later { display: none; } }
/* "All your letters": a quiet aside, not a headline */
@media (max-width: 560px) {
  .lt-foot .lf-row > span a.lf-all { font: italic 500 .9rem var(--voice); color: #9A8A6A; opacity: .85; }
}
.lt-foot .lf-row > span a.lf-all { display: none; }
@media (max-width: 560px) { .lt-foot .lf-row > span a.lf-all { display: inline; text-transform: none; letter-spacing: 0; } }
/* ---------- Manifest, decluttered ---------- */
/* The thread fits any number of steps: it runs from the first point to the last, and fills up to the current one */
.mstage .ritual-steps { display: grid !important; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); max-width: 620px; }
.mstage .ritual-steps::before { left: calc(50% / var(--n, 3)); right: calc(50% / var(--n, 3)); }
.mstage .ritual-steps::after { left: calc(50% / var(--n, 3)); width: calc((100% - 100% / var(--n, 3)) * var(--p, 0)); }
.mstage h2 { margin-top: 18px; }
.mstage > p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .mstage .ritual-steps { position: relative; gap: 0; margin: 14px auto 4px; }
  .mstage .ritual-steps::before, .mstage .ritual-steps::after { content: ''; position: absolute; top: 10px; height: 2px; border-radius: 2px; }
  .mstage .ritual-steps::before { background: rgba(255,255,255,.13); }
  .mstage .ritual-steps::after { background: linear-gradient(90deg, #C9A032, #F3DDA0); box-shadow: 0 0 8px rgba(243,201,74,.5); }
  .mstage .ritual-steps li { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: .76rem !important; line-height: 1.2; position: relative; z-index: 1; padding: 0 2px; }
  .mstage .ritual-steps li::before { width: 20px; height: 20px; margin: 0 0 6px; background: #262A58; font-size: .64rem; }
  .mstage .ritual-steps li.done::before { background: linear-gradient(135deg, #F3DDA0, #C9A032); border-color: #F3DDA0; color: #2A2350; }
  .mstage .ritual-steps li.now::before { border: 2px solid #F3DDA0; color: #FFF6D8; }
}
/* The step she is on needs no second header: the stage above already names it */
.flows > .flow:not(.done):not(.later) > .fl-head { display: none; }
.flows > .flow:not(.done):not(.later) { padding-top: 22px; }
.flows { margin-top: 14px; }
/* Side: quiet help links at the bottom */
.side .fl-doors, #side .fl-doors { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 18px 4px 0; }
#side .fl-doors a { font: italic 500 1rem var(--voice); color: var(--soft); text-decoration: none; }
#side .fl-doors a:hover { color: var(--ink-t); }
/* More practices, folded */
.pr-more { margin-top: 10px; }
.pr-more summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; font: italic 500 .98rem var(--voice); color: var(--soft); }
.pr-more summary::-webkit-details-marker { display: none; }
.pr-more summary em { font-style: normal; transition: transform .2s; }
.pr-more[open] summary em { transform: rotate(180deg); }
@media (max-width: 560px) { .mstage .ritual-steps li { overflow-wrap: normal; word-break: normal; hyphens: none; } }
/* The three cards on the night sky */
.ms-cards { max-width: 560px; margin: 22px auto 0; }
.ms-cards .sp-hint { color: #B9B6D9; margin-top: 12px; font-size: .86rem; }
.mstage .ms-cards .mj-affirm { margin: 18px auto 14px; max-width: 480px; background: rgba(243,221,160,.07); border: 1px solid rgba(243,221,160,.35); color: #FFF4DE;
  box-shadow: 0 0 30px rgba(243,201,74,.15); font-size: 1.5rem; }
.ms-cards #saidIt { display: inline-flex; min-width: 200px; justify-content: center; }
/* The three cards: smaller, floating gently, with a light sweeping across the backs */
.ms-cards { max-width: 500px; }
.ms-cards .sp-row { gap: 14px; }
.ms-cards .sp-card { border-radius: 14px; box-shadow: 0 18px 30px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(243,201,74,.15); transition: transform .3s ease, box-shadow .3s ease; }
.ms-cards .sp-card:not(.open) { animation: spfloat 5s ease-in-out infinite; }
.ms-cards .sp-card:nth-child(2):not(.open) { animation-delay: -1.6s; } .ms-cards .sp-card:nth-child(3):not(.open) { animation-delay: -3.2s; }
@keyframes spfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ms-cards .sp-card:not(.open):hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 24px 34px -14px rgba(0,0,0,.6), 0 0 26px rgba(243,201,74,.35); animation-play-state: paused; }
.ms-cards .sp-card:not(.open)::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 2;
  background: linear-gradient(115deg, transparent 35%, rgba(255,240,200,.16) 48%, transparent 60%) -150% 0 / 250% 100% no-repeat; animation: spsheen 4.5s ease-in-out infinite; }
.ms-cards .sp-card:nth-child(2):not(.open)::after { animation-delay: 1.2s; } .ms-cards .sp-card:nth-child(3):not(.open)::after { animation-delay: 2.4s; }
@keyframes spsheen { 0%, 60% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
.ms-cards .sp-card.scratching { animation: none; }
@media (prefers-reduced-motion: reduce) { .ms-cards .sp-card, .ms-cards .sp-card::after { animation: none !important; } }

/* After a step: the stage becomes a slim header, and the next step leads with its own title */
.mstage.ms-slim { padding-top: 16px; padding-bottom: 16px; }
.mstage.ms-slim .n-hi { font-size: 1.4rem; }
.mstage.ms-slim .n-date, .mstage.ms-slim h2, .mstage.ms-slim > p:not(.n-hi):not(.n-date) { display: none; }
.mstage.ms-slim .ritual-steps { margin-top: 12px; margin-bottom: 0; }
.mstage.ms-slim ~ .flows > .flow:not(.done):not(.later) > .fl-head { display: flex; }
.mstage.ms-slim ~ .flows > .flow:not(.done):not(.later) { padding-top: 20px; border-color: rgba(201,160,50,.4); box-shadow: 0 18px 40px -24px rgba(42,34,80,.45); }
.mstage.ms-slim ~ .flows > .flow:not(.done):not(.later) .fl-head b { font-size: 1.45rem; }
/* Finished steps: one slim line each, not a big box */
.flows > .flow.done.fold { display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin-bottom: 8px; background: rgba(255,255,255,.55); border: 1px solid var(--hair); box-shadow: none; }
.flows > .flow.done.fold .fl-head { flex: none; margin: 0; }
.flows > .flow.done.fold .fl-head small { display: none; }
.flows > .flow.done.fold .fl-head b { font-size: 1rem; }
.flows > .flow.done.fold .fl-head .fl-n { width: 24px; height: 24px; font-size: .75rem; }
.flows > .flow.done.fold > p { flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem; color: var(--soft); }
.flows > .flow.done.fold > p ~ p { display: none; }
/* The step's own title already says it: no second label */
.mstage.ms-slim ~ .flows #intentForm > label[for="intent"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 560px) { .ms-cards { margin-top: 16px; } .ms-cards .sp-row { gap: 8px; } }
/* The main column never grows past its track, whatever a long line inside wants */
.page > #view, .flows, .flows > .flow { min-width: 0; max-width: 100%; }
.flows > .flow.done.fold { overflow: hidden; }
@media (max-width: 560px) { .mstage:not(.ms-slim) { padding-left: 12px; padding-right: 12px; } .ms-cards .sp-row { gap: 10px; } }
/* The reading table: the cards' own surface, under the slim header */
.ms-table { position: relative; margin: 10px 0 0; padding: 22px 20px 24px; border-radius: var(--r-sheet); text-align: center; color: #FFF4F0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(243,201,74,.12), transparent 55%), linear-gradient(180deg, #3A2350 0%, #251834 100%);
  box-shadow: 0 24px 44px -26px rgba(37,24,52,.7), inset 0 1px 0 rgba(243,221,160,.25); }
.ms-table h2 { margin: 0 0 4px; font: 600 1.55rem var(--voice); color: #FFF6F0; }
.ms-table > p { margin: 0; color: #D9CBE6; font-size: .92rem; }
.ms-table .ms-cards { margin-top: 18px; }
.mstage.ms-slim + .ms-table { margin-top: 10px; }
@media (max-width: 560px) { .ms-table { padding: 18px 12px 20px; } .ms-table h2 { font-size: 1.35rem; } }
/* Your Love Script: a light card, so dark blocks never stack */
.mj-script-mini { background: linear-gradient(160deg, #FFFBF1, #FBF1DC) !important; border: 1px solid #EAD9AE !important; color: var(--ink-t) !important; }
.mj-script-mini b { color: var(--ink-t) !important; }
.mj-script-mini span { color: #6B5A33 !important; }
.mj-script-mini em { color: #A07A12 !important; }
/* Manifest: calmer type */
.mstage .n-hi { font-size: 1.6rem; }
.mstage.ms-slim .n-hi { font-size: 1.3rem; }
.mstage .ritual-steps li { font-size: .92rem !important; }
.mstage h2 { font-size: 1.5rem; }
/* The reading table: warm cream, so the dark tarot cards glow against it and dark blocks never stack */
.ms-table { color: var(--ink-t); background: radial-gradient(ellipse at 50% 0%, rgba(243,201,74,.16), transparent 60%), linear-gradient(180deg, #FFFBF1, #F8EDD6);
  border: 1px solid #EAD9AE; box-shadow: 0 20px 40px -28px rgba(120,90,30,.45); }
.ms-table h2 { color: var(--ink-t); font-size: 1.3rem; }
.ms-table > p { color: #7A6A4E; font-size: .88rem; }
.ms-table .sp-card { box-shadow: 0 16px 26px -14px rgba(42,34,80,.55); }
.ms-table .sp-hint { color: #7A6A4E; }
.ms-table .mj-affirm { background: #fff; border-color: #EAD9AE; color: var(--ink-t); box-shadow: none; }
@media (max-width: 560px) { .ms-table h2 { font-size: 1.2rem; } .mstage .ritual-steps li { font-size: .74rem !important; } }
.jar-mini b { font-size: 1.05rem; } .jar-mini span { font-size: .86rem; line-height: 1.5; }
.mj-script-mini span { font-size: .98rem; }
/* On the cream table: a calmer affirmation, and a green pill that stands out */
.ms-table .mj-affirm { max-width: 520px; margin: 18px auto 16px; padding: 14px 20px; font: italic 500 1.2rem/1.45 var(--voice); background: rgba(255,255,255,.7); border: 1px solid #EFE2C2; }
.ms-table #saidIt { display: inline-flex; width: auto; min-width: 0; padding: 11px 30px; font-size: .95rem; box-shadow: 0 10px 22px -12px rgba(31,138,76,.6); }
.ms-table > p { font-size: .86rem; }
.ms-table h2 { font-size: 1.25rem; }
@media (max-width: 560px) { .ms-table .mj-affirm { font-size: 1.05rem; padding: 12px 14px; } }
/* The step she is on, in the same family as the reading table: cream, calm type, a green pill */
.mstage.ms-slim ~ .flows > .flow:not(.done):not(.later) { padding: 20px 22px 22px; background: radial-gradient(ellipse at 50% 0%, rgba(243,201,74,.12), transparent 60%), linear-gradient(180deg, #FFFBF1, #FBF3E2);
  border: 1px solid #EAD9AE; box-shadow: 0 20px 40px -28px rgba(120,90,30,.45); }
.mstage.ms-slim ~ .flows > .flow:not(.done):not(.later) > .fl-head { align-items: center; gap: 12px; margin-bottom: 10px; }
.mstage.ms-slim ~ .flows > .flow:not(.done):not(.later) .fl-head b { font-size: 1.25rem !important; }
.mstage.ms-slim ~ .flows > .flow:not(.done):not(.later) .fl-head small { font-size: .8rem; }
.mstage.ms-slim ~ .flows > .flow:not(.done):not(.later) .fl-n { width: 30px; height: 30px; font-size: .8rem; background: transparent; border: 1.5px solid #C9A032; color: #A07A12; }
.flows .it-src { margin: 4px 0 8px; font-size: .84rem; }
.flows .it-input { font-size: 1.1rem; padding: 12px 16px; }
.flows .it-or { margin: 14px 0 6px; font-size: .82rem; }
.flows .it-pills { margin-bottom: 16px; }
.flows .it-pills button { font-size: .86rem; padding: 7px 14px; }
.flows .flow:not(.done) form .btn, .flows form.flow:not(.done) .btn { display: inline-flex; width: auto; padding: 11px 30px; font-size: .95rem; box-shadow: 0 10px 22px -12px rgba(31,138,76,.6); }
.flows .pg-q { font-size: 1.3rem !important; line-height: 1.4; margin: 4px 0 6px; }
.flows .starters button { font-size: .9rem; padding: 6px 12px; }
.flows textarea.lined { font-size: 1.1rem; }
@media (max-width: 560px) { .flows .pg-q { font-size: 1.15rem !important; } }
/* Write your page: the helper as a quiet gold link, the thank-yous as one soft card */
.flows .help { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 7px 14px; background: rgba(243,201,74,.1); border: 1px solid rgba(201,160,50,.35); box-shadow: none;
  font: 600 .84rem 'Outfit', sans-serif; color: #8A6A14; }
.flows .help:hover { background: rgba(243,201,74,.18); }
.flows .assist { margin: 10px 0 0; padding: 8px 12px; background: rgba(255,255,255,.7); border: 1px solid #EFE2C2; font: italic .95rem var(--voice); color: #6B5A33; }
.flows .assist p { margin: 0; }
.flows .mj-thanks { gap: 0; margin: 18px 0 16px; padding: 10px 16px 6px; border-radius: 14px; background: rgba(255,255,255,.65); border: 1px solid #EFE2C2; }
.flows .mj-thanks .th-h { margin: 0 0 2px; font: italic 500 .95rem var(--voice); color: #A07A12; }
.flows .mj-thanks label { padding: 6px 0; border-bottom: 1px solid #F1E7D0; }
.flows .mj-thanks label:last-of-type { border-bottom: 0; }
.flows .mj-thanks span { font-size: .98rem; color: var(--rose-c); }
.flows .mj-thanks input { font-size: 1rem; }
.flows .pg-foot { margin-top: 4px; }
.flows .mj-thanks label { padding: 3px 0 !important; min-height: 0; margin: 0; }
.flows .mj-thanks input { padding: 6px 0 !important; height: auto; }
.flows .assist .angel-mark { color: #C9A032; background: none; }
/* A quick note to her journal, any time */
.qnote { margin: 14px 0 0; padding: 16px 18px; border-radius: var(--r-sheet); background: var(--paper); border: 1px solid var(--hair); }
.qn-head b { display: block; font: 600 1.1rem var(--voice); color: var(--ink-t); }
.qn-head small { font-size: .8rem; color: var(--soft); }
.qn-moods { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.qn-moods input { position: absolute; opacity: 0; pointer-events: none; }
.qn-moods span { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: .78rem; border: 1px solid color-mix(in srgb, var(--c) 45%, #fff); color: #4A4060; cursor: pointer; }
.qn-moods input:checked + span { background: color-mix(in srgb, var(--c) 22%, #fff); border-color: var(--c); font-weight: 600; }
.qn-moods input:focus-visible + span { outline: 2px solid #C9A032; outline-offset: 2px; }
.qnote textarea { width: 100%; min-height: 64px; resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1px solid #EAE0D2; background: #fff; font: 1.05rem/1.5 var(--voice); color: var(--ink-t); box-sizing: border-box; }
.qn-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.qn-foot span { font-size: .75rem; color: var(--soft); }
.qn-foot .btn { width: auto; padding: 9px 22px; font-size: .9rem; }
/* Quick note, folded at the top of the side column */
.qn-side { margin: 0 0 14px; border-radius: var(--r-sheet); background: var(--paper); border: 1px solid var(--hair); overflow: hidden; }
.qn-side summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.qn-side summary::-webkit-details-marker { display: none; }
.qn-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(243,201,74,.14); color: #A07A12; font-size: 1rem; }
.qn-side summary div { flex: 1; min-width: 0; } .qn-side summary b { display: block; font: 600 1.05rem var(--voice); color: var(--ink-t); }
.qn-side summary small { font-size: .78rem; color: var(--soft); }
.qn-side summary em { font-style: normal; color: var(--soft); transition: transform .2s; }
.qn-side[open] summary em { transform: rotate(180deg); }
.qn-side .qnote { margin: 0; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: 12px 16px 16px; }
.qn-side .qn-moods { margin-top: 0; }
.mstage + .qnote { margin: 12px 0 14px; }
.qn-starts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.qn-starts button { padding: 5px 11px; border-radius: 999px; border: 1px dashed #E3CFA0; background: #FFFBF1; font: italic .9rem var(--voice); color: #8A6A14; cursor: pointer; }
.qn-starts button:hover { border-style: solid; background: #FFF4D8; }
.qn-help { background: rgba(243,201,74,.1); border: 1px solid rgba(201,160,50,.35); border-radius: 999px; padding: 7px 12px; font: 600 .8rem 'Outfit', sans-serif; color: #8A6A14; cursor: pointer; }
.qn-help:hover { background: rgba(243,201,74,.18); }
.qn-lock { margin: 8px 0 0; font-size: .72rem; color: var(--soft); }
/* Phones: the quick note sits right under the greeting */
@media (max-width: 959px) {
  #view > .mstage { order: -3; }
  #side > .qn-side { order: -2; margin: 10px 0 4px; }
}
/* Finished steps: one quiet line */
.fl-donegrp { margin: 0 0 10px; }
.fl-donegrp summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: rgba(31,138,76,.06); border: 1px solid rgba(31,138,76,.18); font-size: .86rem; color: #2E6B45; }
.fl-donegrp summary::-webkit-details-marker { display: none; }
.fdg-ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #1F8A4C; color: #fff; font-size: .7rem; flex: none; }
.fl-donegrp summary span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-donegrp summary em { font-style: normal; transition: transform .2s; } .fl-donegrp[open] summary em { transform: rotate(180deg); }
.fl-donegrp > .flow { margin-top: 8px; }
/* A step that opens later: one slim line too */
.flows > .flow.later { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: transparent; border: 1px dashed var(--hair); box-shadow: none; }
.flows > .flow.later .fl-head { margin: 0; align-items: center; } .flows > .flow.later .fl-head b { font-size: 1rem; } .flows > .flow.later .fl-head small { display: inline; margin-left: 8px; }
.flows > .flow.later .fl-head div { display: flex; align-items: baseline; flex-wrap: wrap; }
.flows > .flow.later .fl-n { width: 24px; height: 24px; font-size: .72rem; background: transparent; border: 1.5px solid var(--hair); color: var(--soft); }
.flows > .flow.later > p { display: none; }
/* The journal: calendar + timeline */
.jbook { margin-top: 28px; }
.jb-head h2 { margin: 0; font: 600 1.45rem var(--voice); } .jb-head small { color: var(--soft); font-size: .82rem; }
.jcal { margin: 12px 0 18px; padding: 14px 16px 12px; border-radius: var(--r-sheet); background: var(--paper); border: 1px solid var(--hair); }
.jc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.jc-top b { font: 600 1.05rem var(--voice); }
.jc-top button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hair); background: #fff; cursor: pointer; font-size: 1rem; color: var(--ink-t); }
.jc-top button:disabled { opacity: .3; cursor: default; }
.jc-w, .jc-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.jc-w span { font-size: .68rem; font-weight: 600; color: var(--soft); padding-bottom: 4px; }
.jc-d { position: relative; aspect-ratio: 1; max-height: 46px; display: grid; place-items: center; border-radius: 12px; border: 0; background: none; font: inherit; padding: 0; }
.jc-d b { font-size: .84rem; font-weight: 500; color: var(--ink-t); }
.jc-d.fut b { color: #CFC8D6; }
.jc-d.has { cursor: pointer; background: color-mix(in srgb, var(--c) 16%, #fff); }
.jc-d.has i { position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--c); }
.jc-d.has:hover { background: color-mix(in srgb, var(--c) 26%, #fff); }
.jc-d.today { box-shadow: inset 0 0 0 1.5px #C9A032; }
.jc-d.sel { background: var(--c); } .jc-d.sel b { color: #fff; font-weight: 700; } .jc-d.sel i { background: #fff; }
.jc-foot { margin: 8px 0 0; font-size: .76rem; color: var(--soft); text-align: center; }
.jday h3 { margin: 0 0 10px; font: 600 1.2rem var(--voice); }
.je { display: grid; grid-template-columns: 64px 1fr; gap: 12px; }
.je-rail { position: relative; text-align: right; padding-top: 14px; }
.je-time { font-size: .72rem; color: var(--soft); white-space: nowrap; }
.je-rail i { position: absolute; right: -9px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px #fff; }
.je + .je .je-rail::before { content: ''; position: absolute; right: -5px; top: -14px; height: 30px; width: 1px; background: var(--hair); }
.je-body { margin-bottom: 12px; padding: 12px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--hair); border-left: 3px solid var(--c); min-width: 0; }
.je-top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.je-kind { font: 600 .66rem 'Outfit', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--soft); }
.je-mood { font-size: .72rem; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, #fff); color: #4A4060; }
.je-body .he-q { margin: 0 0 4px; font-size: .82rem; } .je-body .he-text { margin: 0 0 6px; font: 1.02rem/1.55 var(--voice); }
.je-body .he-reply { margin-top: 8px; }
@media (max-width: 560px) { .je { grid-template-columns: 1fr; } .je-rail { text-align: left; padding: 0; } .je-rail i, .je + .je .je-rail::before { display: none; } .je-time { display: block; margin-bottom: 2px; } }
/* Inside "Done today": each step in full, to read again */
.fl-donegrp > .flow.done.fold { display: block; padding: 14px 18px; background: var(--paper); }
.fl-donegrp > .flow.done.fold .fl-head { margin-bottom: 6px; }
.fl-donegrp > .flow.done.fold .fl-head small { display: inline; margin-left: 6px; }
.fl-donegrp > .flow.done.fold > p { white-space: normal; overflow: visible; font: italic 1.02rem/1.55 var(--voice); color: var(--ink-t); }
.fl-donegrp > .flow.done.fold > p ~ p { display: block; }
.flow.done .fl-cards { display: none; }
.fl-donegrp .fl-cards { display: block; max-width: 360px; margin: 10px 0 2px; }
.fl-donegrp .fl-cards .sp-row { gap: 8px; margin: 0; }
.fl-donegrp .fl-cards .sp-face { padding: 8px 6px; gap: 2px; }
.fl-donegrp .fl-cards .sp-face b { font-size: .9rem; } .fl-donegrp .fl-cards .sp-face small { font-size: .6rem; } .fl-donegrp .fl-cards .sp-m { font-size: 1.2rem; }
.fl-donegrp .fl-cards .sp-card { animation: none; }
.fl-thanks { display: none; }
.fl-donegrp .fl-thanks { display: block; margin: 8px 0 0; padding: 0; list-style: none; font: italic .95rem var(--voice); color: var(--rose-c); }
.fl-donegrp .flow.done .fl-cards { display: block; }
/* Today, so far: keepsake tiles */
.recap { margin: 0 0 12px; }
.rc-h { margin: 0 0 6px 2px; font: italic 500 .95rem var(--voice); color: var(--soft); }
.rc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.rc-t { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--hair); text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; transition: transform .2s, box-shadow .2s; }
.rc-t:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(42,34,80,.4); }
.rc-fan { position: relative; flex: none; width: 38px; height: 34px; }
.rc-fan i { position: absolute; top: 3px; width: 18px; height: 27px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.4); }
.rc-fan i:nth-child(1) { left: 0; transform: rotate(-12deg); } .rc-fan i:nth-child(2) { left: 10px; top: 0; z-index: 1; } .rc-fan i:nth-child(3) { left: 20px; transform: rotate(12deg); }
.rc-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(243,201,74,.14); color: #A07A12; }
.rc-x { min-width: 0; } .rc-x small { display: block; font-size: .7rem; color: #1F8A4C; font-weight: 600; }
.rc-x small::before { content: '✓ '; }
.rc-x b { display: block; font: italic 500 .92rem/1.3 var(--voice); color: var(--ink-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The recap pop-up: the cards large */
.pop-card.rc-card { max-width: 620px; width: 100%; }
.rc-pop { text-align: center; }
.rc-big .sp-row { gap: 12px; margin: 10px 0 14px; }
.rc-big .sp-card { animation: none; }
.rc-big .sp-face b { font-size: 1.25rem; } .rc-big .sp-face small { font-size: .8rem; } .rc-big .sp-m { font-size: 2rem; }
.rc-aff, .rc-quote { margin: 0 auto 16px; max-width: 480px; font: italic 500 1.25rem/1.45 var(--voice); color: var(--ink-t); }
.rc-q { margin: 0 0 6px; font-size: .85rem; color: var(--soft); }
.rc-page { text-align: left; font: 1.08rem/1.65 var(--voice); margin: 0 0 12px; }
.rc-thanks { text-align: left; list-style: none; padding: 0; margin: 0 0 16px; font: italic 1rem var(--voice); color: var(--rose-c); }
.rc-pop .btn { width: auto; display: inline-flex; padding: 10px 28px; }
@media (max-width: 560px) { .rc-big .sp-face b { font-size: .95rem; } .rc-big .sp-face small { font-size: .64rem; } .rc-big .sp-row { gap: 6px; } }
/* Journal: a compact calendar beside the chosen day */
.jb-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
.jb-grid .jcal { margin: 0; padding: 12px; position: sticky; top: 90px; }
.jc-top b { font-size: .95rem; } .jc-top button { width: 26px; height: 26px; font-size: .9rem; }
.jc-w, .jc-g { gap: 2px; }
.jc-d { aspect-ratio: auto; height: 32px; max-height: none; border-radius: 50%; width: 32px; margin: 0 auto; }
.jc-d b { font-size: .76rem; }
.jc-d.has { background: color-mix(in srgb, var(--c) 22%, #fff); }
.jc-d.has i { bottom: 2px; width: 4px; height: 4px; margin-left: -2px; }
.jc-d.sel { background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c); }
.jc-d.today:not(.sel) { box-shadow: inset 0 0 0 1.5px #C9A032; }
.jc-foot { font-size: .72rem; }
.jday h3 { margin-top: 2px; }
@media (max-width: 760px) { .jb-grid { grid-template-columns: 1fr; } .jb-grid .jcal { position: static; } }
.rc-ic { font: 600 1.05rem 'Outfit', sans-serif; color: #A07A12 !important; background: rgba(243,201,74,.2); }
/* Quick note, simplified: write first; mood as dots; one tidy footer */
.qnote textarea { min-height: 84px; margin-top: 2px; border-color: #EDE3D3; }
.qnote textarea:focus { outline: none; border-color: #D9BE7C; box-shadow: 0 0 0 3px rgba(243,201,74,.18); }
.qn-starts { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 8px 0 0; padding-bottom: 2px; scrollbar-width: none; }
.qn-starts::-webkit-scrollbar { display: none; }
.qn-starts button { flex: none; padding: 4px 10px; font-size: .85rem; border-style: solid; border-color: #EFE2C2; }
.qn-row { display: flex; align-items: center; margin: 12px 0 0; }
.qnote .qn-moods { display: flex; align-items: center; gap: 7px; margin: 0; flex-wrap: nowrap; }
.qnote .qn-moods label { display: block; cursor: pointer; }
.qnote .qn-moods span { display: block; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 0; background: var(--c); opacity: .45; transition: transform .15s, opacity .15s; }
.qnote .qn-moods input:checked + span { opacity: 1; transform: scale(1.25); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--c); background: var(--c); }
.qnote .qn-moods label:hover span { opacity: .8; }
.qn-moods em { margin-left: 6px; font: italic 500 .92rem var(--voice); color: var(--soft); }
.qnote .qn-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.qnote .qn-help { background: none; border: 0; padding: 4px 0; font: 600 .84rem 'Outfit', sans-serif; color: #8A6A14; white-space: nowrap; }
.qnote .qn-help:hover { text-decoration: underline; }
.qnote .qn-foot .btn { width: auto; padding: 9px 26px; font-size: .9rem; white-space: nowrap; }
.qn-sug { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #FFFBF1; border: 1px solid #EFE2C2; }
.qn-sug p { margin: 0 0 8px; font: italic 1rem/1.5 var(--voice); color: var(--ink-t); }
.qn-sug p span { display: block; font: 600 .7rem 'Outfit', sans-serif; font-style: normal; color: #A07A12; margin-bottom: 2px; }
.qn-sug div { display: flex; gap: 8px; }
.qn-sug button { padding: 5px 12px; border-radius: 999px; font: 600 .78rem 'Outfit', sans-serif; cursor: pointer; }
.qs-use { background: #1F8A4C; color: #fff; border: 0; } .qs-keep { background: #fff; color: var(--ink-t); border: 1px solid var(--hair); }
.qnote .qn-lock { margin-top: 8px; }
/* ---- Quick note: a slim line, opening on tap ---- */
.qnote { margin: 10px 0 12px; padding: 0; border-radius: 16px; background: var(--paper); border: 1px solid var(--hair); transition: box-shadow .25s, border-color .25s; overflow: hidden; }
.qnote.open { border-color: #E3CFA0; box-shadow: 0 16px 34px -24px rgba(120,90,30,.5); }
.qn-bar { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; }
.qn-ic { flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: rgba(243,201,74,.16); color: #A07A12; font-size: .85rem; }
.qnote textarea { flex: 1; min-height: 0; height: 30px; margin: 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent; resize: none; font: 1.02rem/1.45 var(--voice); color: var(--ink-t); box-shadow: none !important; overflow: hidden; }
.qnote textarea:focus { outline: none; }
.qnote.open textarea { min-height: 60px; }
.qn-count { flex: none; align-self: center; font-size: .72rem; color: var(--soft); }
.qn-more { display: none; padding: 0 14px 12px 52px; }
.qnote.open .qn-more { display: block; animation: qnopen .25s ease; }
@keyframes qnopen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.qnote .qn-starts { margin: 0 0 8px; }
.qnote .qn-foot { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.qnote .qn-lock { margin: 0 0 0 auto; font-size: .72rem; color: var(--soft); }
.qnote .qn-foot .btn { padding: 7px 20px; font-size: .86rem; }
@media (max-width: 560px) { .qn-more { padding-left: 14px; } .qnote .qn-lock { display: none; } .qnote .qn-foot .btn { margin-left: auto; } }
/* Saving: the words fold away into a glowing heart */
.qnote.sending textarea { animation: qnsend .6s ease forwards; }
@keyframes qnsend { to { opacity: 0; transform: translateY(-10px) scale(.96); filter: blur(2px); } }
.qnote.relief { border-color: #EAD9AE; background: radial-gradient(ellipse at 50% 0%, rgba(243,201,74,.18), transparent 65%), #FFFBF1; }
.qr { padding: 18px 16px 16px; text-align: center; }
.qr-heart { position: relative; width: 46px; height: 46px; margin: 0 auto 8px; display: grid; place-items: center; }
.qr-heart span { font-size: 1.9rem; color: #D25B78; animation: qrbeat 1.2s ease 2; text-shadow: 0 0 18px rgba(210,91,120,.45); }
.qr-heart.small span { font-size: 1.4rem; animation: qrbeat 1s ease 1; }
@keyframes qrbeat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.25); } 60% { transform: scale(.95); } }
.qr-heart i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #F3C94A; opacity: 0; animation: qrspark 1s ease-out .1s forwards; }
.qr-heart i:nth-child(2) { --a: 0deg; } .qr-heart i:nth-child(3) { --a: 60deg; } .qr-heart i:nth-child(4) { --a: 120deg; } .qr-heart i:nth-child(5) { --a: 180deg; } .qr-heart i:nth-child(6) { --a: 240deg; } .qr-heart i:nth-child(7) { --a: 300deg; }
@keyframes qrspark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-34px); } }
.qr-line { margin: 0 auto 8px; max-width: 420px; font: italic 500 1.12rem/1.45 var(--voice); color: var(--ink-t); }
.qr-gift { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; font-size: .82rem; color: #8A6A14; background: rgba(243,201,74,.16); border: 1px solid rgba(201,160,50,.35); animation: qrgift 1.4s ease; }
@keyframes qrgift { 0% { opacity: 0; transform: scale(.9); } 40% { opacity: 1; transform: scale(1.06); box-shadow: 0 0 20px rgba(243,201,74,.6); } 100% { transform: none; } }
.qr-q { margin: 4px 0 8px; font-size: .8rem; color: var(--soft); }
.qr-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.qr-opts button, .qr-go { padding: 7px 14px; border-radius: 999px; border: 1px solid #E3CFA0; background: #fff; font: 600 .82rem 'Outfit', sans-serif; color: var(--ink-t); cursor: pointer; text-decoration: none; transition: transform .15s, background .15s; }
.qr-opts button:hover { background: #FFF4D8; transform: translateY(-1px); }
.qr-opts button:active { transform: scale(.96); }
.qr-go { background: #1F8A4C; color: #fff; border-color: #1F8A4C; }
@media (prefers-reduced-motion: reduce) { .qr-heart span, .qr-heart i, .qr-gift, .qnote.sending textarea, .qnote.open .qn-more { animation: none; } }
/* Header: finished steps can be tapped to see them again */
.mstage .ritual-steps li[data-recap] { cursor: pointer; }
.mstage .ritual-steps li[data-recap]:hover::before { box-shadow: 0 0 0 4px rgba(243,201,74,.25), 0 0 14px rgba(243,201,74,.6); }
.mstage .ritual-steps li[data-recap]:focus-visible { outline: 2px solid #F3DDA0; outline-offset: 4px; border-radius: 8px; }
.ms-hint { margin: 8px 0 0 !important; font: italic .8rem var(--voice) !important; color: rgba(236,230,250,.55) !important; display: block !important; }
/* ---- Journal, tighter ---- */
.jb-grid { grid-template-columns: 236px minmax(0, 1fr); gap: 18px; }
.jb-grid .jcal { padding: 10px; }
.jc-top { margin-bottom: 4px; } .jc-top b { font-size: .88rem; } .jc-top button { width: 22px; height: 22px; font-size: .8rem; }
.jc-w span { font-size: .6rem; padding-bottom: 2px; }
.jc-d { width: 26px; height: 26px; } .jc-d b { font-size: .7rem; }
.jc-d.has i { display: none; }
.jc-foot { margin-top: 4px; font-size: .68rem; }
.jb-head h2 { font-size: 1.3rem; }
.jday h3 { font-size: 1.05rem; margin-bottom: 8px; }
.je { grid-template-columns: 58px 1fr; gap: 10px; }
.je-body { padding: 10px 14px; margin-bottom: 10px; }
.je-body .he-text { font-size: .98rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.je-body .he-text.full { -webkit-line-clamp: unset; display: block; }
.je-body .he-q { font-size: .78rem; }
.je-body .he-thanks { font-size: .9rem; }
.je-body .he-reply p { font-size: .95rem; }
.je-add { margin: 6px 0 0; padding-left: 10px; border-left: 2px solid #EFE2C2; font: .95rem/1.5 var(--voice); color: var(--ink-t); }
.je-add small { display: block; font: 500 .66rem 'Outfit', sans-serif; color: var(--soft); }
.je-more { margin: 6px 0 2px; }
.je-addbtn { background: none; border: 0; padding: 0; font: 600 .76rem 'Outfit', sans-serif; color: #A07A12; cursor: pointer; }
.je-addbtn:hover { text-decoration: underline; }
.je-more textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid #EAE0D2; font: .98rem/1.5 var(--voice); resize: vertical; }
.je-more textarea:focus { outline: none; border-color: #D9BE7C; }
.je-more div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.je-cancel { background: none; border: 0; font: 600 .8rem 'Outfit', sans-serif; color: var(--soft); cursor: pointer; }
.je-more .btn { width: auto; padding: 6px 16px; font-size: .8rem; }
@media (max-width: 760px) { .jb-grid .jcal { max-width: 320px; margin: 0 auto; } .jc-d { width: 30px; height: 30px; } }
/* ===== Write in your journal ===== */
.qn2 { margin: 10px 0 14px; padding: 16px 18px 14px; border-radius: var(--r-sheet); background: linear-gradient(180deg, #FFFDF8, #FFF8EA); border: 1px solid #EAD9AE; box-shadow: 0 14px 30px -24px rgba(120,90,30,.45); }
.qn2-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.qn2-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #1C2040; color: #F3DDA0; font-size: .95rem; }
.qn2-top b { display: block; font: 600 1.15rem var(--voice); color: var(--ink-t); }
.qn2-top small { font-size: .78rem; color: var(--soft); }
.qn-feel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.qf-q { font: italic 500 .95rem var(--voice); color: #7A6A4E; margin-right: 4px; }
.qn-feel input { position: absolute; opacity: 0; pointer-events: none; }
.qn-feel label > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 7px; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 40%, #fff);
  font: 600 .78rem 'Outfit', sans-serif; color: #4A4060; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; }
.qn-feel label > span i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .72rem; background: color-mix(in srgb, var(--c) 30%, #fff); color: color-mix(in srgb, var(--c) 55%, #2A2350); }
.qn-feel label > span:hover { transform: translateY(-1px); }
.qn-feel input:checked + span { background: color-mix(in srgb, var(--c) 22%, #fff); border-color: var(--c); box-shadow: 0 6px 14px -8px var(--c); transform: scale(1.05); }
.qn-feel input:checked + span i { background: var(--c); color: #fff; }
.qn-feel input:focus-visible + span { outline: 2px solid #C9A032; outline-offset: 2px; }
.qn2 textarea { width: 100%; box-sizing: border-box; min-height: 56px; padding: 10px 14px; border-radius: 12px; border: 1px solid #EAE0D2; background: #fff; resize: none; overflow: hidden; font: 1.02rem/1.5 var(--voice); color: var(--ink-t); transition: min-height .2s; }
.qn2 textarea:focus { outline: none; border-color: #D9BE7C; box-shadow: 0 0 0 3px rgba(243,201,74,.18); }
.qn2.open textarea { min-height: 84px; }
.qn2 .qn-more { display: none; padding: 0; }
.qn2.open .qn-more { display: block; animation: qnopen .25s ease; }
.qn2 .qn-starts { margin: 8px 0 0; }
.qn2 .qn-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.qn2 .qn-help { background: none; border: 0; padding: 0; font: 600 .84rem 'Outfit', sans-serif; color: #8A6A14; cursor: pointer; }
.qn2 .qn-lock { margin: 0 0 0 auto; font-size: .72rem; color: var(--soft); }
.qn2 .qn-foot .btn { width: auto; padding: 8px 22px; font-size: .88rem; }
.qn2.sending textarea { animation: qnsend .6s ease forwards; }
.qn2.relief { background: radial-gradient(ellipse at 50% 0%, rgba(243,201,74,.2), transparent 65%), #FFFBF1; padding: 0; }
@media (max-width: 560px) { .qn2 { padding: 14px; } .qn2 .qn-lock { display: none; } .qn2 .qn-foot .btn { margin-left: auto; } .qf-q { width: 100%; } }
/* ===== The journal: a week strip, then cards ===== */
.jbook2 { margin-top: 26px; }
.jb2-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.jb2-head h2 { margin: 0; font: 600 1.35rem var(--voice); } .jb2-head small { color: var(--soft); font-size: .8rem; }
.jmonth { position: relative; }
.jmonth summary { list-style: none; cursor: pointer; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hair); background: #fff; font: 600 .78rem 'Outfit', sans-serif; color: var(--ink-t); }
.jmonth summary::-webkit-details-marker { display: none; }
.jmonth .jcal { position: absolute; right: 0; top: 38px; z-index: 5; width: 260px; margin: 0; padding: 10px; box-shadow: 0 20px 40px -18px rgba(42,34,80,.4); }
.jstrip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; margin: 12px 0 16px; padding: 8px; border-radius: 16px; background: var(--paper); border: 1px solid var(--hair); }
.js-d { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 7px; border-radius: 12px; border: 0; background: none; font: inherit; color: var(--ink-t); }
.js-d small { font-size: .6rem; font-weight: 600; color: var(--soft); }
.js-d b { font-size: .86rem; font-weight: 600; }
.js-d i { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.js-d.has { cursor: pointer; } .js-d.has i { background: var(--c); }
.js-d:disabled { opacity: .45; }
.js-d.has:hover { background: #FBF4E6; }
.js-d.today { box-shadow: inset 0 0 0 1.5px #E0C27A; }
.js-d.sel { background: #1C2040; } .js-d.sel b { color: #fff; } .js-d.sel small { color: #C4C0E2; } .js-d.sel i { box-shadow: 0 0 0 2px #1C2040, 0 0 6px var(--c); }
.js-all { margin: -6px 0 10px; background: none; border: 0; font: 600 .8rem 'Outfit', sans-serif; color: #A07A12; cursor: pointer; padding: 0; }
.jd { margin-bottom: 18px; }
.jd h3 { margin: 0 0 8px; font: 600 1.05rem var(--voice); color: var(--ink-t); }
.jd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.jk { position: relative; padding: 12px 14px 10px; border-radius: 16px; background: var(--paper); border: 1px solid var(--hair); cursor: pointer; transition: box-shadow .2s, transform .2s; min-width: 0; }
.jk:hover { box-shadow: 0 14px 26px -20px rgba(42,34,80,.4); transform: translateY(-1px); }
.jk:focus-visible { outline: 2px solid #C9A032; outline-offset: 2px; }
.jk.open { grid-column: 1 / -1; cursor: default; }
.jk-page, .jk-note { border-left: 3px solid var(--c); }
.jk-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.jk-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; background: rgba(243,201,74,.16); color: #A07A12; flex: none; }
.jk-top b { font: 600 .8rem 'Outfit', sans-serif; color: var(--ink-t); } .jk-top small { font-size: .72rem; color: var(--soft); }
.jk-mood { margin-left: auto; font-size: .7rem; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, #fff); color: #4A4060; }
.jk-q { margin: 0 0 4px; font: italic .82rem var(--voice); color: var(--soft); }
.jk-text { margin: 0; font: .98rem/1.5 var(--voice); color: var(--ink-t); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jk.open .jk-text { -webkit-line-clamp: unset; display: block; }
.jk-quote { margin: 4px 0 2px; font: italic 500 1rem/1.45 var(--voice); color: var(--ink-t); }
.jk-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.jk-deck span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; aspect-ratio: 3 / 4; max-height: 70px; border-radius: 8px; color: #fff; text-align: center; padding: 4px; }
.jk-deck small { font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; color: #F3DDA0; } .jk-deck i { font-style: normal; font-size: .8rem; }
.jk-deck b { font: italic 600 .72rem var(--voice); line-height: 1.1; } .jk-deck em { display: none; font-style: normal; font-size: .66rem; line-height: 1.3; opacity: .9; }
.jk.open .jk-deck span { max-height: none; aspect-ratio: 3 / 4; padding: 10px 8px; gap: 3px; } .jk.open .jk-deck b { font-size: 1rem; } .jk.open .jk-deck i { font-size: 1.3rem; } .jk.open .jk-deck em { display: block; } .jk.open .jk-deck small { font-size: .6rem; }
.jk.open .jk-deck { max-width: 420px; }
.jk-full { display: none; } .jk.open .jk-full { display: block; margin-top: 8px; }
.jk-thanks { list-style: none; padding: 0; margin: 0 0 8px; font: italic .92rem var(--voice); color: var(--rose-c); }
.jk-angel { display: flex; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair); }
.jk-angel span { color: #C9A032; } .jk-angel p { margin: 0; font: italic .95rem/1.5 var(--voice); } .jk-angel small { display: block; font: 600 .66rem 'Outfit', sans-serif; font-style: normal; color: #A07A12; }
.jk-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.jk-foot .je-more { margin: 0; flex: 1; }
.jk-open { font-size: .72rem; color: var(--soft); white-space: nowrap; } .jk.open .jk-open { display: none; }
.jk .je-add { margin-top: 6px; }
@media (max-width: 640px) { .jd-cards { grid-template-columns: 1fr; } .jstrip { grid-template-columns: repeat(7, minmax(0, 1fr)); } .jstrip .js-d:nth-child(-n+7) { display: none; } }
.jk-deck { max-width: 260px; }
.je-more div { align-items: center; }
.je-help { margin-right: auto; background: none; border: 0; padding: 0; font: 600 .78rem 'Outfit', sans-serif; color: #8A6A14; cursor: pointer; }
.je-help:hover { text-decoration: underline; }
.je-more textarea { overflow: hidden; resize: none; }
/* ===== Journal, calm: one column, one card shape ===== */
.jb2-head h2 { font-size: 1.5rem; }
.jstrip { background: none; border: 0; padding: 0; margin: 14px 0 22px; gap: 2px; }
.js-d { padding: 6px 0 8px; border-radius: 999px; }
.js-d.today { box-shadow: none; }
.js-d.today b { color: #A07A12; }
.js-d.sel, .js-d.today.sel { background: #1C2040; }
.js-d.has:hover { background: rgba(28,32,64,.05); }
.js-d:disabled { opacity: .35; }
.jd { margin-bottom: 22px; }
.jd h3 { margin: 0 0 10px; font: 600 1.1rem var(--voice); }
.jd-list { display: flex; flex-direction: column; gap: 10px; }
.jn { border-radius: 18px; background: #fff; border: 1px solid #EFE7EA; box-shadow: 0 1px 2px rgba(42,34,80,.04); transition: box-shadow .2s; }
.jn.can { cursor: pointer; }
.jn.can:hover { box-shadow: 0 10px 24px -18px rgba(42,34,80,.35); }
.jn:focus-visible { outline: 2px solid #C9A032; outline-offset: 2px; }
.jn-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.jn-main { flex: 1; min-width: 0; }
.jn-meta { margin: 0 0 3px; font-size: .74rem; color: var(--soft); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.jn-meta i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin: 0 1px 0 2px; }
.jn-title { margin: 0; font: 600 1.08rem/1.35 var(--voice); color: var(--ink-t); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jn-prev { margin: 3px 0 0; font-size: .86rem; line-height: 1.5; color: #6E6680; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jn.open .jn-prev { display: none; } .jn.open .jn-title { -webkit-line-clamp: unset; display: block; }
.jn-glyph { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.1rem; background: color-mix(in srgb, var(--c, #E0B84F) 16%, #fff); color: color-mix(in srgb, var(--c, #C9A032) 70%, #2A2350); }
.jn-fan { position: relative; flex: none; width: 56px; height: 48px; }
.jn-fan i { position: absolute; top: 4px; width: 26px; height: 38px; border-radius: 5px; box-shadow: 0 3px 8px rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.35); }
.jn-fan i:nth-child(1) { left: 2px; transform: rotate(-11deg); } .jn-fan i:nth-child(2) { left: 15px; top: 1px; z-index: 1; } .jn-fan i:nth-child(3) { left: 28px; transform: rotate(11deg); }
.jn-full { display: none; padding: 0 18px 16px; }
.jn.open .jn-full { display: block; animation: qnopen .25s ease; }
.jn-q { margin: 0 0 6px; font: italic .86rem var(--voice); color: var(--soft); }
.jn-body { margin: 0; font: 1.02rem/1.6 var(--voice); color: var(--ink-t); white-space: pre-line; }
.jn.open .jn-row .jn-title { display: none; } .jn.open .jn-row { padding-bottom: 6px; }
.jn-cards.open .jn-title { display: block; }
.jn-thanks { list-style: none; padding: 0; margin: 10px 0 0; font: italic .95rem var(--voice); color: var(--rose-c); }
.jn-add { margin: 10px 0 0; font: 1rem/1.55 var(--voice); color: var(--ink-t); }
.jn-add small { display: block; font: 500 .68rem 'Outfit', sans-serif; color: var(--soft); }
.jn .je-more { margin: 12px 0 0; }
.jn-angel { display: flex; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #FBF7EF; }
.jn-angel span { color: #C9A032; } .jn-angel p { margin: 0; font: italic .96rem/1.5 var(--voice); color: var(--ink-t); }
.jn-angel small { display: block; font: 600 .66rem 'Outfit', sans-serif; font-style: normal; color: #A07A12; margin-bottom: 2px; }
.jn-deck { display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: 10px; margin: 4px 0 12px; }
.jn-deck span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 2 / 3; border-radius: 12px; color: #fff; text-align: center; padding: 12px 10px; box-shadow: 0 10px 20px -12px rgba(0,0,0,.5); }
.jn-deck small { font: 600 .56rem 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #F3DDA0; }
.jn-deck i { font-style: normal; font-size: 1.3rem; } .jn-deck b { font: italic 600 1rem/1.15 var(--voice); } .jn-deck em { font-style: normal; font-size: .7rem; line-height: 1.35; opacity: .9; }
.jn-quote { margin: 0; font: italic 500 1.05rem/1.5 var(--voice); color: var(--ink-t); }
@media (max-width: 560px) { .jn-row { padding: 12px 14px; gap: 12px; } .jn-full { padding: 0 14px 14px; } .jn-glyph { width: 40px; height: 40px; } .jn-deck { gap: 6px; } .jn-deck b { font-size: .85rem; } .jn-deck em { display: none; } }
/* ===== Write in your journal, calm ===== */
.qn2 { padding: 16px 18px; background: #fff; border: 1px solid #EFE7EA; box-shadow: 0 1px 2px rgba(42,34,80,.04); border-radius: 18px; }
.qn2-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.qn2-top b { font: 600 1.15rem var(--voice); color: var(--ink-t); } .qn2-top small { font-size: .74rem; color: var(--soft); }
.qn2 textarea { min-height: 48px; background: #FBF9F6; border-color: transparent; }
.qn2 textarea:focus { background: #fff; }
.qn2.open textarea { min-height: 80px; }
.qn-feel { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; flex-wrap: nowrap; }
.qf-q { flex: none; font: italic 500 .95rem var(--voice); color: var(--soft); margin: 0; }
.qf-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; flex: 1; max-width: 420px; }
.qn-feel label > span { flex-direction: column; gap: 3px; padding: 4px 0; border: 0; background: none; border-radius: 12px; box-shadow: none !important; transform: none !important; }
.qn-feel label > span i { width: 34px; height: 34px; font-size: .95rem; background: color-mix(in srgb, var(--c) 22%, #fff); transition: transform .18s cubic-bezier(.3,1.6,.5,1), background .15s, box-shadow .15s; }
.qn-feel label > span em { font: 500 .66rem 'Outfit', sans-serif; font-style: normal; color: var(--soft); }
.qn-feel label:hover > span i { transform: translateY(-2px); }
.qn-feel input:checked + span i { background: var(--c); color: #fff; transform: scale(1.14); box-shadow: 0 6px 14px -6px var(--c); }
.qn-feel input:checked + span em { color: var(--ink-t); font-weight: 600; }
.qn-feel input:checked + span { background: none; }
.qn2 .qn-more .qn-starts { margin-top: 10px; }
@media (max-width: 560px) { .qn-feel { flex-direction: column; align-items: stretch; gap: 6px; } .qf-row { max-width: none; } .qn-feel label > span i { width: 32px; height: 32px; } }
.qn2 .qn-foot { gap: 16px; }
.jn-addq { margin-top: 6px; padding: 0; background: none; border: 0; font: 600 .74rem 'Outfit', sans-serif; color: #A07A12; cursor: pointer; }
.jn-addq:hover { text-decoration: underline; }
.jn.open .jn-addq { display: none; }
/* Write card: two tabs */
.qn-tabs { display: inline-flex; padding: 3px; border-radius: 999px; background: #F4EFEA; }
.qn-tabs button { padding: 6px 14px; border: 0; border-radius: 999px; background: none; font: 600 .82rem 'Outfit', sans-serif; color: var(--soft); cursor: pointer; transition: background .2s, color .2s; }
.qn-tabs button.on { background: #fff; color: var(--ink-t); box-shadow: 0 2px 6px rgba(42,34,80,.12); }
.qn-tabs button[data-qmode="sign"].on { color: #8A6A14; }
.qn-signs { margin: 0 0 10px; }
.qn-signs .qf-q { display: block; margin: 0 0 6px; }
.qs-row { display: flex; flex-wrap: wrap; gap: 6px; }
.qs-row input { position: absolute; opacity: 0; pointer-events: none; }
.qs-row span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: #FFFBF1; border: 1px solid #EFE2C2; font-size: .8rem; color: #4A4060; cursor: pointer; transition: transform .15s, background .15s; }
.qs-row span i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #1C2040; color: #F3DDA0; font-size: .64rem; }
.qs-row span:hover { transform: translateY(-1px); }
.qs-row input:checked + span { background: #1C2040; color: #fff; border-color: #1C2040; box-shadow: 0 0 0 3px rgba(243,201,74,.3), 0 6px 16px -8px rgba(243,201,74,.8); }
.qs-row input:checked + span i { background: #F3C94A; color: #1C2040; }
.qs-row input:focus-visible + span { outline: 2px solid #C9A032; outline-offset: 2px; }
.qn-signs.shake { animation: slshake .4s ease; }
.qn2.signing .qn-feel, .qn2.signing .qn-starts, .qn2.signing #qnHelp, .qn2.signing #qnExpand { display: none; }
.qr-heart.sign span { color: #E0A91C; text-shadow: 0 0 22px rgba(243,201,74,.8); }
.qr-k { margin: 0 0 2px; font: 600 .68rem 'Outfit', sans-serif; color: #A07A12; letter-spacing: .02em; }
.jn-sign { background: #1C2040 !important; color: #F3DDA0 !important; box-shadow: 0 0 14px rgba(243,201,74,.35); }
/* The journal, set apart: its own warm paper panel */
.jbook2 { margin-top: 34px; padding: 22px 22px 8px; border-radius: 24px; background: linear-gradient(180deg, #F6EFE6, #F3ECE4); border: 1px solid #EADFD0; }
.jb2-k { margin: 0 0 2px; font-size: .72rem; color: #9A8A6A; }
.jb2-head h2 { font-size: 1.7rem; }
.jstrip { margin: 16px 0 22px; padding: 8px; border-radius: 18px; background: #fff; border: 1px solid #EFE7EA; }
.js-d.today:not(.sel) { background: #FBF4E6; }
.jn { border-color: #EFE6DC; }
@media (max-width: 560px) { .jbook2 { padding: 16px 12px 4px; margin-left: -4px; margin-right: -4px; } }
.qn2.signing #qnHelp { display: inline; }
.qn-tabs { flex: none; } .qn-tabs button { white-space: nowrap; }
.qn2-top { align-items: center; }
/* Your Journal, in the side column */
.sj { margin: 0 0 14px; padding: 16px 18px; border-radius: 20px; background: linear-gradient(180deg, #F6EFE6, #F3ECE4); border: 1px solid #EADFD0; }
.sj-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
.sj-top b { font: 600 1.3rem var(--voice); color: var(--ink-t); } .sj-top small { font-size: .74rem; color: var(--soft); }
.sj-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 8px 6px; border-radius: 14px; background: #fff; }
.sj-d { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; padding: 2px 0; border-radius: 10px; }
.sj-d small { font-size: .62rem; font-weight: 600; color: var(--soft); }
.sj-d i { width: 14px; height: 14px; border-radius: 50%; background: #F1ECE6; }
.sj-d.has i { background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, #fff); }
.sj-d.today small { color: #A07A12; } .sj-d.today:not(.has) i { box-shadow: inset 0 0 0 1.5px #E0C27A; background: #fff; }
.sj-d.fut { opacity: .4; pointer-events: none; }
.sj-last { display: block; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff; text-decoration: none; }
.sj-last small { display: block; font-size: .68rem; color: var(--soft); }
.sj-last span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 1rem/1.45 var(--voice); color: var(--ink-t); }
.sj-none { margin: 10px 0 0; font: italic .92rem var(--voice); color: var(--soft); }
.sj-open { display: block; margin-top: 12px; padding: 10px; border-radius: 999px; text-align: center; background: #1C2040; color: #F3DDA0; font: 600 .86rem 'Outfit', sans-serif; text-decoration: none; }
.sj-open:hover { background: #262A58; }
/* The full journal page */
.jbook2.jpage { max-width: 760px; margin: 8px auto 0; }
.jweek { display: flex; align-items: center; gap: 8px; margin: 14px 0 20px; }
.jw-nav { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #EADFD0; background: #fff; font-size: 1.1rem; color: var(--ink-t); cursor: pointer; }
.jw-nav:disabled { opacity: .3; cursor: default; }
.jw-mid { flex: 1; min-width: 0; text-align: center; }
.jw-mid > b { display: block; margin-bottom: 6px; font: 600 .95rem var(--voice); color: var(--ink-t); }
.jweek .jstrip { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; margin: 0; }
.jweek .jstrip .js-d { display: flex !important; }
.jd-empty { margin: 10px 0 24px; text-align: center; font: italic 1rem var(--voice); color: var(--soft); }
.qn2.signing #qnExpand:not([hidden]), .qn2.signing #qnBetter:not([hidden]) { display: inline; }
.qn2 .qn-help[hidden] { display: none !important; }
.qn2 .qn-foot { flex-wrap: wrap; row-gap: 6px; }
/* Your Journal, below the steps, always there */
.jrec { margin-top: 28px; padding: 20px 20px 16px; border-radius: 24px; background: linear-gradient(180deg, #F6EFE6, #F3ECE4); border: 1px solid #EADFD0; }
.jrec-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.jrec-top h2 { margin: 0; font: 600 1.45rem var(--voice); }
.jrec-all { font: 600 .82rem 'Outfit', sans-serif; color: #A07A12; text-decoration: none; }
.jrec-empty { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: #fff; border: 1px dashed #E3CFA0; }
.jrec-empty > span { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #1C2040; color: #F3DDA0; }
.jrec-empty p { flex: 1; margin: 0; font-size: .86rem; color: var(--soft); line-height: 1.45; }
.jrec-empty b { display: block; font: 600 1.08rem var(--voice); color: var(--ink-t); }
.jrec-empty .btn { width: auto; flex: none; padding: 8px 18px; font-size: .86rem; }
@media (max-width: 560px) { .jrec { padding: 16px 12px 12px; } .jrec-empty { flex-wrap: wrap; } .jrec-empty .btn { width: 100%; } }
.jn-sec { margin: 14px 0 6px; font: 600 .68rem 'Outfit', sans-serif; letter-spacing: .04em; color: #A07A12; }
.jn-full .jn-sec:first-child { margin-top: 2px; }
.flows > .flow.done.fold + .flow.done.fold { margin-top: -2px; }
.sj-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.sj-acts .sj-open { margin: 0; padding: 10px 6px; font-size: .8rem; }
.sj-write { padding: 10px 6px; border-radius: 999px; border: 1px solid #E3CFA0; background: #fff; font: 600 .8rem 'Outfit', sans-serif; color: #8A6A14; cursor: pointer; }
.sj-write:hover { background: #FFF8E8; }
/* ===== The journal page ===== */
.jpage-w { max-width: 760px; margin: 0 auto; }
.jcover { position: relative; display: flex; border-radius: 22px; overflow: hidden; margin: 6px 0 16px; background: linear-gradient(150deg, #2E3263, #1C2040); color: #FFF6F0; box-shadow: 0 24px 44px -28px rgba(28,32,64,.8); }
.jc-sp { flex: none; width: 14px; background: linear-gradient(90deg, #14173A, #262A58); box-shadow: inset -1px 0 0 rgba(243,221,160,.25); }
.jc-in { flex: 1; padding: 24px 26px 22px; background: radial-gradient(ellipse at 90% 0%, rgba(243,201,74,.16), transparent 55%); }
.jc-k { margin: 0 0 4px; font-size: .74rem; color: #C4C0E2; }
.jcover h1 { margin: 0; font: 600 2rem var(--voice); color: #FFF6F0; }
.jc-l { margin: 4px 0 16px; font: italic 1.02rem var(--voice); color: #D9D4F0; }
.jc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jc-stats span { padding: 10px 8px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(243,221,160,.18); text-align: center; font-size: .72rem; color: #C4C0E2; }
.jc-stats b { display: block; font: 600 1.5rem/1.1 var(--voice); color: #F3DDA0; }
.jpage-w .qn2 { margin: 0 0 18px; }
.jfilt { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 4px; }
.jfilt button { padding: 7px 14px; border-radius: 999px; border: 1px solid #EADFD0; background: #fff; font: 600 .8rem 'Outfit', sans-serif; color: var(--soft); cursor: pointer; }
.jfilt button.on { background: #1C2040; color: #fff; border-color: #1C2040; }
.jpage-w .jbook2.jpage { max-width: none; margin: 10px 0 0; }
.jpage-w .jbook2 .jb2-head > div:first-child { display: none; }
.jpage-w .jbook2 .jb2-head { justify-content: flex-end; }
.jpage-w .jrec-empty { margin-top: 12px; }
@media (max-width: 560px) { .jc-stats { grid-template-columns: repeat(2, 1fr); } .jcover h1 { font-size: 1.6rem; } .jc-in { padding: 18px; } }
/* Write your page: helpers, and a way out */
.pg-helps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pg-helps .help[hidden] { display: none !important; }
.flows .pg-helps .help { margin: 0; }
.flows .pg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pg-later, .pg-cancel { background: none; border: 0; padding: 4px 2px; font: 600 .84rem 'Outfit', sans-serif; cursor: pointer; }
.pg-later { color: var(--ink-t); } .pg-later:hover { text-decoration: underline; }
.pg-cancel { color: var(--soft); } .pg-cancel.sure { color: var(--rose-c); }
.pg-draft { margin-left: auto; font: italic .82rem var(--voice); color: #9A8A6A; }
.pg-draft:not(:empty)::before { content: '✓ '; font-style: normal; }
.as-acts { display: flex; gap: 8px; margin-top: 8px; }
.as-acts button { padding: 5px 12px; border-radius: 999px; font: 600 .78rem 'Outfit', sans-serif; cursor: pointer; }
.flows .assist > div { flex: 1; } .flows .assist p b { font: 600 .7rem 'Outfit', sans-serif; font-style: normal; color: #A07A12; }
@media (max-width: 560px) { .pg-draft { width: 100%; margin: 0; } }
/* While a step is in progress, the quick note waits as one slim line */
.qn2.qn-mini:not(.open) { padding: 10px 14px; }
.qn2.qn-mini:not(.open) .qn2-top, .qn2.qn-mini:not(.open) .qn-feel, .qn2.qn-mini:not(.open) .qn-signs { display: none !important; }
.qn2.qn-mini:not(.open) textarea { min-height: 0; height: 40px !important; padding: 9px 14px 9px 38px; background: #FBF9F6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ctext x='1' y='13' font-size='13' fill='%23A07A12'%3E%E2%9C%8E%3C/text%3E%3C/svg%3E") 14px 50% no-repeat; font-size: .95rem; }
@media (max-width: 560px) {
  .flows .pg-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .flows .pg-foot .btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .pg-later, .pg-cancel { padding: 8px 0; text-align: center; border: 1px solid var(--hair); border-radius: 999px; background: #fff; }
  .pg-draft { grid-column: 1 / -1; text-align: center; }
}
.qn2.qn-mini:not(.open) { padding: 8px; }
.qn2.qn-mini:not(.open) > *:not(.qn-box) { display: none !important; }
.qn2.qn-mini:not(.open) textarea { display: block; margin: 0; }
/* The daily wish */
.pg-wish { margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; background: linear-gradient(160deg, #262A58, #1C2040); box-shadow: 0 14px 28px -20px rgba(28,32,64,.8); }
.pg-wish label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: italic 500 1rem var(--voice); color: #F3DDA0; }
.pg-wish label span { color: #F3C94A; text-shadow: 0 0 10px rgba(243,201,74,.7); }
.pg-wish input { width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(243,221,160,.3); background: rgba(255,255,255,.06); font: 1.05rem var(--voice); color: #FFF6F0; }
.pg-wish input::placeholder { color: rgba(236,230,250,.5); font-style: italic; }
.pg-wish input:focus { outline: none; border-color: #F3C94A; box-shadow: 0 0 0 3px rgba(243,201,74,.2); }
.jn-wish { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #1C2040; font: italic 1rem/1.5 var(--voice); color: #FFF6F0; }
.jn-wish span { display: block; font: 600 .66rem 'Outfit', sans-serif; font-style: normal; color: #F3DDA0; margin-bottom: 2px; }
.fl-wish { display: none; } .fl-donegrp .fl-wish { display: block; }
/* The slim quick note, more visible: a dark ✎ badge, gold edge, and both ways in */
.qn2.qn-mini:not(.open) { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border: 1px solid #E3CFA0; background: linear-gradient(180deg, #FFFDF7, #FFF7E6); box-shadow: 0 10px 22px -18px rgba(120,90,30,.55); }
.qn2.qn-mini:not(.open)::before { content: '✎'; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #1C2040; color: #F3DDA0; font-size: .9rem; }
.qn2.qn-mini:not(.open) textarea { flex: 1; order: 1; height: 40px !important; padding: 9px 4px; background: transparent !important; font: 500 1.02rem var(--voice); color: var(--ink-t); }
.qn2.qn-mini:not(.open) textarea::placeholder { color: #6E6680; }
.qn2.qn-mini:not(.open) > .qn2-top { display: flex !important; order: 2; margin: 0; }
.qn2.qn-mini:not(.open) > .qn2-top small { display: none; }
.qn2.qn-mini:not(.open) .qn-tabs { background: #fff; border: 1px solid #EFE2C2; }
.qn2.qn-mini:not(.open) .qn-tabs button.on { background: none; box-shadow: none; color: var(--ink-t); }
@media (max-width: 560px) { .qn2.qn-mini:not(.open) { flex-wrap: wrap; } .qn2.qn-mini:not(.open) textarea { flex-basis: calc(100% - 50px); } .qn2.qn-mini:not(.open) > .qn2-top { width: 100%; } .qn2.qn-mini:not(.open) .qn-tabs { width: 100%; } .qn2.qn-mini:not(.open) .qn-tabs button { flex: 1; } }
/* Journal page: two columns, the calendar on the right */
.jpage-w { max-width: 1080px; }
.jp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.jside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 14px; }
.jmcal, .jmoods { padding: 16px; border-radius: 20px; background: #fff; border: 1px solid #EFE7EA; box-shadow: 0 14px 30px -26px rgba(42,34,80,.5); }
.jm-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.jm-top b { font: 600 1.1rem var(--voice); color: var(--ink-t); }
.jm-top button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hair); background: #fff; cursor: pointer; font-size: 1rem; color: var(--ink-t); }
.jm-top button:disabled { opacity: .3; cursor: default; }
.jm-w, .jm-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.jm-w span { font-size: .64rem; font-weight: 600; color: var(--soft); padding-bottom: 4px; }
.jm-d { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; border: 0; background: none; font: 500 .8rem 'Outfit', sans-serif; color: var(--ink-t); padding: 0; }
.jm-d.fut { color: #D5CEDB; }
.jm-d.has { cursor: pointer; font-weight: 700; color: #fff; background: var(--c); box-shadow: 0 4px 10px -4px var(--c); transition: transform .15s; }
.jm-d.has:hover { transform: scale(1.1); }
.jm-d.today:not(.has) { box-shadow: inset 0 0 0 1.5px #E0C27A; color: #A07A12; font-weight: 700; }
.jm-d.today.has { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #E0C27A; }
.jm-d.sel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1C2040; transform: scale(1.08); }
.jm-foot { margin: 10px 0 0; text-align: center; font-size: .78rem; color: var(--soft); }
.jm-foot b { color: var(--ink-t); } .jm-foot button { background: none; border: 0; padding: 0; font: 600 .78rem 'Outfit', sans-serif; color: #A07A12; cursor: pointer; }
.jm-h { margin: 0 0 8px; font: 600 1rem var(--voice); color: var(--ink-t); }
.jm-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; margin-bottom: 10px; }
.jmoods ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jmoods li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-t); }
.jmoods li i { width: 10px; height: 10px; border-radius: 50%; } .jmoods li b { margin-left: auto; font-weight: 500; font-size: .76rem; color: var(--soft); }
.jp-main .jbook2 .jb2-head { display: none; }
.jp-main .jbook2.jpage { padding-top: 16px; }
@media (max-width: 900px) { .jp-grid { grid-template-columns: 1fr; } .jside { position: static; order: -1; } .jmoods { display: none; } .jp-main .jbook2 .jweek { display: none; } }
@media (min-width: 900px) { .page.solo.wide { grid-template-columns: minmax(0, 1080px); } }
.jcover { margin-bottom: 20px; }
.jp-main .jbook2 .jweek { display: none; }
.jp-main .jbook2 { background: none; border: 0; padding: 12px 0 0; }
.jp-main .js-all { margin: 0 0 8px; }
/* "I Said It": the affirmation sealed */
.afs { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; overflow: hidden; cursor: pointer; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(ellipse at 50% 45%, #33386E 0%, #1B1D3C 55%, #0E0F22 100%); }
.afs.in { opacity: 1; } .afs.out { opacity: 0; transition: opacity .8s ease; }
.afs-cards { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.afs-cards span { position: absolute; width: 110px; height: 160px; margin: -80px 0 0 -55px; border-radius: 12px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 8px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(243,221,160,.3); transform: translate(calc((var(--n) - 1) * 130px), 60px) scale(.9); opacity: 0;
  transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .8s ease; transition-delay: calc(var(--n) * .12s); }
.afs-cards small { font: 600 .56rem 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #F3DDA0; } .afs-cards i { font-style: normal; font-size: 1.4rem; } .afs-cards b { font: italic 600 .95rem/1.15 var(--voice); }
.afs.in .afs-cards span { opacity: 1; transform: translate(calc((var(--n) - 1) * 130px), 0) rotate(calc((var(--n) - 1) * 6deg)); }
.afs.merge .afs-cards span { transform: translate(0, -10px) scale(.4) rotate(0); opacity: 0; transition-duration: .8s; transition-delay: calc(var(--n) * .06s); }
.afs-light { position: absolute; left: 50%; top: 42%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: radial-gradient(circle, #FFFDF5, #F3C94A 45%, rgba(243,201,74,0) 70%); transform: scale(0); opacity: 0; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .6s ease; }
.afs.merge .afs-light { transform: scale(4); opacity: 1; }
.afs.seal .afs-light { transform: scale(9); opacity: .35; transition-duration: 2.4s; }
.afs-txt { position: relative; z-index: 2; max-width: 560px; padding: 0 24px; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity 1s ease .2s, transform 1s ease .2s; }
.afs.seal .afs-txt { opacity: 1; transform: none; }
.afs-k { margin: 0 0 12px; font: 600 .72rem 'Outfit', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #F3DDA0; }
.afs-txt blockquote { margin: 0 0 18px; font: italic 500 1.7rem/1.4 var(--voice); color: #FFF6E0; text-shadow: 0 0 24px rgba(243,201,74,.45); }
.afs-heart { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px; background: rgba(243,201,74,.14); border: 1px solid rgba(243,221,160,.35); font: 600 .82rem 'Outfit', sans-serif; color: #F3DDA0; opacity: 0; transform: scale(.8); transition: opacity .6s ease 1.1s, transform .6s cubic-bezier(.3,1.6,.5,1) 1.1s; }
.afs-heart span { color: #F48BA6; animation: qrbeat 1.2s ease 1.6s 2; display: inline-block; }
.afs.seal .afs-heart { opacity: 1; transform: none; }
.afs-go { margin: 0; font: italic 1.05rem var(--voice); color: #C4C0E2; opacity: 0; transition: opacity .8s ease 1.8s; }
.afs.seal .afs-go { opacity: 1; }
@media (max-width: 560px) { .afs-cards span { width: 84px; height: 124px; margin: -62px 0 0 -42px; } .afs.in .afs-cards span { transform: translate(calc((var(--n) - 1) * 96px), 0) rotate(calc((var(--n) - 1) * 6deg)); } .afs-txt blockquote { font-size: 1.3rem; } }
.it-more { margin: -6px 0 16px; background: none; border: 0; padding: 0; font: 600 .8rem 'Outfit', sans-serif; color: #A07A12; cursor: pointer; }
.it-more:hover { text-decoration: underline; }
.flows .mj-thanks.one { padding: 12px 16px; }
.flows .mj-thanks.one label { border: 0; padding: 0 !important; align-items: center; }
.flows .mj-thanks.one span { font-size: 1.02rem; }
/* Finished steps: one compact card, rows that open */
.fl-stack { margin: 0 0 12px; border-radius: 18px; background: #fff; border: 1px solid #EFE7EA; overflow: hidden; }
.flows .fl-stack > .flow.done.fold { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 10px 40px 10px 14px; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; }
.flows .fl-stack > .flow.done.fold + .flow.done.fold { border-top: 1px solid #F3EDE8; }
.flows .fl-stack > .flow.done.fold:hover { background: #FCFAF7; }
.fl-stack .fl-head { flex: none; margin: 0 !important; gap: 8px; }
.fl-stack .fl-head .fl-n { width: 22px !important; height: 22px !important; font-size: .66rem !important; }
.fl-stack .fl-head b { font-size: .95rem !important; }
.fl-stack .fl-head small { display: none !important; }
.flows .fl-stack > .flow.done.fold > p.fl-one { flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: italic .92rem var(--voice); color: var(--soft); }
.flows .fl-stack > .flow.done.fold > :not(.fl-head):not(.fl-one):not(.fl-chev) { display: none; }
.fl-chev { position: absolute; right: 14px; top: 12px; font-style: normal; color: var(--soft); transition: transform .2s; }
.flows .fl-stack > .flow.done.fold.show { display: block; padding: 14px 40px 16px 14px; background: #FFFCF6; cursor: default; }
.flows .fl-stack > .flow.done.fold.show .fl-chev { transform: rotate(180deg); }
.flows .fl-stack > .flow.done.fold.show .fl-head { margin-bottom: 8px !important; }
.flows .fl-stack > .flow.done.fold.show > p.fl-one { white-space: normal; overflow: visible; font: italic 1.02rem/1.55 var(--voice); color: var(--ink-t); padding-left: 30px; }
.flows .fl-stack > .flow.done.fold.show > .fl-cards { display: block !important; max-width: 420px; margin: 10px 0 0 30px; }
.flows .fl-stack > .flow.done.fold.show .fl-cards .sp-row { gap: 8px; margin: 0; } .flows .fl-stack > .flow.done.fold.show .fl-cards .sp-card { animation: none; }
.flows .fl-stack > .flow.done.fold.show .fl-cards .sp-face b { font-size: .95rem; } .flows .fl-stack > .flow.done.fold.show .fl-cards .sp-face small { font-size: .66rem; }
.flows .fl-stack > .flow.done.fold.show > .fl-wish, .flows .fl-stack > .flow.done.fold.show > .fl-thanks { display: block !important; margin: 8px 0 0 30px; }
.flows .fl-stack > .flow.done.fold.show > .fl-wish { padding: 8px 12px; border-radius: 10px; background: #1C2040; color: #FFF6F0; font: italic .98rem var(--voice); }
.flows .fl-stack > .flow.done.fold.show > .fl-thanks { list-style: none; padding: 0; font: italic .95rem var(--voice); color: var(--rose-c); }
.flows .fl-stack > .flow.done.fold.show > .fl-int { display: block !important; padding-left: 30px; }
@media (max-width: 560px) { .flows .fl-stack > .flow.done.fold.show > p.fl-one, .flows .fl-stack > .flow.done.fold.show > .fl-cards, .flows .fl-stack > .flow.done.fold.show > .fl-wish, .flows .fl-stack > .flow.done.fold.show > .fl-thanks { padding-left: 0; margin-left: 0; } }
@media (max-width: 560px) { .flows .fl-stack > .flow.done.fold.show .fl-cards .sp-face small { display: none; } .flows .fl-stack > .flow.done.fold.show .fl-cards .sp-face b { font-size: .85rem; } }
/* Journal cover, lean: one row */
.jcover2 { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 18px; padding: 16px 20px; border-radius: 18px; background: linear-gradient(150deg, #2E3263, #1C2040); color: #FFF6F0; }
.jcover2 h1 { margin: 0; font: 600 1.5rem var(--voice); color: #FFF6F0; } .jcover2 p { margin: 2px 0 0; font-size: .76rem; color: #C4C0E2; }
.jc2-stats { display: flex; gap: 18px; }
.jc2-stats span { display: flex; align-items: baseline; gap: 5px; font-size: .76rem; color: #C4C0E2; white-space: nowrap; }
.jc2-stats b { font: 600 1.3rem var(--voice); color: #F3DDA0; }
@media (max-width: 560px) { .jc2-stats { gap: 12px; width: 100%; justify-content: space-between; } }
/* Journal cards are links to their own page */
a.jn-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.jn-link:hover { box-shadow: 0 10px 24px -18px rgba(42,34,80,.35); }
.jn-sub { margin: 4px 0 0; font-size: .72rem; color: #A07A12; font-weight: 600; }
/* ===== One entry ===== */
.ep-wrap { max-width: 720px; margin: 0 auto; }
.ep { padding: 26px 28px 22px; border-radius: 22px; background: #fff; border: 1px solid #EFE7EA; box-shadow: 0 20px 40px -32px rgba(42,34,80,.5); }
.ep-meta { margin: 0 0 8px; font: italic 1rem var(--voice); color: var(--soft); }
.ep-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ep-kind, .ep-mood { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.ep-kind { background: #1C2040; color: #F3DDA0; }
.ep-mood { background: color-mix(in srgb, var(--c) 16%, #fff); color: #4A4060; } .ep-mood i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ep-text { margin: 0; font: 1.2rem/1.7 var(--voice); color: var(--ink-t); white-space: pre-line; }
.ep-sign { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: #1C2040; }
.ep-sign span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #F3C94A; color: #1C2040; box-shadow: 0 0 16px rgba(243,201,74,.6); }
.ep-sign small { display: block; font-size: .68rem; color: #C4C0E2; } .ep-sign b { font: 600 1.15rem var(--voice); color: #FFF6F0; }
.ep-block .jn-deck { max-width: 460px; }
.ep-adds { margin-top: 16px; display: grid; gap: 10px; }
.ep-add { padding-left: 14px; border-left: 2px solid #EFE2C2; } .ep-add small { font-size: .7rem; color: var(--soft); } .ep-add p { margin: 2px 0 0; font: 1.05rem/1.6 var(--voice); }
.ep-angel { margin-top: 18px; } .ep-angel.fresh { animation: qrgift 1.4s ease; }
.ep-hist { margin-top: 14px; font-size: .8rem; color: var(--soft); }
.ep-hist summary { cursor: pointer; } .ep-v { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: #FBF9F6; } .ep-v small { font-size: .68rem; } .ep-v p { margin: 2px 0 0; font: .98rem/1.5 var(--voice); color: #6E6680; }
.ep-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #F3EDE8; }
.ep-a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid #EADFD0; background: #fff; font: 600 .84rem 'Outfit', sans-serif; color: var(--ink-t); cursor: pointer; }
.ep-a span { color: #A07A12; } .ep-a:hover { background: #FFF8E8; }
#epAsk { background: #1C2040; color: #F3DDA0; border-color: #1C2040; } #epAsk span { color: #F3C94A; }
.ep-addbox:not(.on) { display: none; } .ep-addbox { margin-top: 12px; }
.ep-edit textarea { width: 100%; box-sizing: border-box; min-height: 160px; padding: 12px 14px; border-radius: 12px; border: 1px solid #E3CFA0; font: 1.1rem/1.65 var(--voice); resize: vertical; }
.ep-edit > div { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .ep-edit .btn { width: auto; padding: 8px 20px; }
.ep-note { margin-left: auto; font: italic .82rem var(--voice); color: var(--soft); }
.ep-talk { margin-top: 18px; padding: 20px; border-radius: 22px; background: linear-gradient(180deg, #F6EFE6, #F3ECE4); border: 1px solid #EADFD0; }
.ep-h { margin: 0; font: 600 1.2rem var(--voice); } .ep-sub { margin: 2px 0 12px; font-size: .82rem; color: var(--soft); }
.ep-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ep-g { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid #EFE6DC; background: #fff; text-align: left; font: inherit; cursor: pointer; min-width: 0; }
.ep-g:hover { box-shadow: 0 10px 20px -16px rgba(42,34,80,.4); transform: translateY(-1px); }
.ep-g b { display: block; font: 600 .95rem var(--voice); color: var(--ink-t); } .ep-g small { display: block; font-size: .7rem; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-g span { min-width: 0; }
@media (max-width: 560px) { .ep { padding: 18px 16px; } .ep-text { font-size: 1.08rem; } .ep-guides { grid-template-columns: 1fr 1fr; } .ep-a { flex: 1; justify-content: center; } }
/* The moon and Sunday, inside her intention */
.im-moon { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(150deg, #2E3263, #1C2040); color: #FFF6F0; }
.im-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(243,221,160,.12); color: #F3DDA0; font-size: 1.2rem; box-shadow: 0 0 14px rgba(243,221,160,.25); }
.im-moon > div { flex: 1; min-width: 0; }
.im-moon small { font-size: .68rem; color: #C4C0E2; } .im-moon b { display: block; font: 600 1.05rem var(--voice); color: #FFF6F0; }
.im-moon p { margin: 1px 0 0; font-size: .78rem; line-height: 1.4; color: #D9D4F0; }
.im-use { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(243,221,160,.45); background: rgba(243,201,74,.12); font: 600 .76rem 'Outfit', sans-serif; color: #F3DDA0; cursor: pointer; }
.im-use.on, .im-use:hover { background: #F3C94A; color: #1C2040; }
.im-moon em { flex: none; font-style: normal; font-size: .74rem; color: #A9C9AE; }
.im-sun { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: #FFF8E6; border: 1px solid #EFE2C2; }
.im-sh { margin: 0 0 8px; font: 600 1rem var(--voice); color: #8A6A14; }
.im-sun label { display: block; margin: 8px 0 4px; font-size: .8rem; color: var(--ink-t); }
.im-sun textarea, .im-sun input { width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 10px; border: 1px solid #EAE0D2; background: #fff; font: 1rem var(--voice); }
@media (max-width: 560px) { .im-moon { flex-wrap: wrap; } .im-use { width: 100%; } }
.im-sun textarea { min-height: 56px !important; height: 56px; resize: vertical; }
.im-sun label { font-weight: 500; }
/* Photos */
.qn-cam { display: inline-flex; align-items: center; gap: 4px; font: 600 .84rem 'Outfit', sans-serif; color: var(--ink-t); cursor: pointer; }
.qn-cam:hover { color: #8A6A14; }
.qn-photo { position: relative; display: inline-block; margin: 10px 0 0; }
.qn-photo img { display: block; max-width: 180px; max-height: 140px; border-radius: 12px; box-shadow: 0 8px 18px -10px rgba(42,34,80,.5); animation: qnopen .3s ease; }
.qn-photo button { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #1C2040; color: #fff; font-size: .9rem; line-height: 1; cursor: pointer; }
.qn2.qn-mini:not(.open) .qn-photo { display: none; }
.jn-photo { flex: none; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 10px -6px rgba(42,34,80,.5); }
.jn-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-photo { margin: 0 0 16px; }
.ep-photo img { display: block; width: 100%; max-height: 460px; object-fit: cover; border-radius: 16px; }
label.ep-a { cursor: pointer; }
/* Choosing an intention */
.flows .it-input { transition: border-color .2s, box-shadow .2s; }
.flows .it-input:focus { outline: none; border-color: #D9BE7C; box-shadow: 0 0 0 3px rgba(243,201,74,.2); }
.it-glow { animation: itglow 1s ease; }
@keyframes itglow { 0% { background: #FFF4D0; box-shadow: 0 0 0 4px rgba(243,201,74,.35); } 100% { background: #fff; } }
.flows .it-pills button { transition: background .15s, border-color .15s, transform .15s; }
.flows .it-pills button:hover { border-color: #D9BE7C; }
.flows .it-pills button.on { background: #1C2040; color: #FFF6F0; border-color: #1C2040; }
.flows .it-pills button.on::before { content: '✓ '; color: #F3C94A; }
.flows .it-or { margin-top: 12px; }
.it-more { display: block; margin: 8px 0 14px; text-align: left; }
.im-use.on { background: #F3C94A; color: #1C2040; border-color: #F3C94A; }
/* "Today, I am thankful for": the wish's twin, in deep rose */
.pg-wish.pg-thank { margin-top: 12px; background: linear-gradient(160deg, #8E2F52, #5E1E38); box-shadow: 0 14px 28px -20px rgba(94,30,56,.8); }
.pg-thank label { color: #FFD6E1; }
.pg-thank label span { color: #FF9FBA; text-shadow: 0 0 10px rgba(255,159,186,.7); }
.pg-thank input { border-color: rgba(255,214,225,.3); }
.pg-thank input::placeholder { color: rgba(255,230,238,.5); }
.pg-thank input:focus { border-color: #FF9FBA; box-shadow: 0 0 0 3px rgba(255,159,186,.22); }
/* "It Is Written": the page folds into a star and rises */
.pgs { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; overflow: hidden; cursor: pointer; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(ellipse at 50% 40%, #33386E 0%, #1B1D3C 55%, #0E0F22 100%); }
.pgs.in { opacity: 1; } .pgs.out { opacity: 0; transition: opacity .8s ease; }
.pgs-paper { position: absolute; left: 50%; top: 42%; width: min(420px, 84vw); transform: translate(-50%, -50%) rotate(-1.5deg); padding: 26px 26px 22px; border-radius: 6px;
  background: linear-gradient(180deg, #FFFCF3, #F7EDD6); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); transition: transform .9s cubic-bezier(.6,0,.4,1), opacity .9s ease, border-radius .9s; }
.pgs-date { margin: 0 0 10px; font: italic .9rem var(--voice); color: #9A8A6A; }
.pgs-line { min-height: 3em; margin: 0; font: italic 500 1.3rem/1.5 var(--voice); color: #2A2350; }
.pgs-line::after { content: '|'; color: #C9A032; animation: blink .8s steps(1) infinite; }
.pgs.fold .pgs-line::after { display: none; }
.pgs-wish { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: #1C2040; font: italic .98rem var(--voice); color: #F3DDA0; }
.pgs.fold .pgs-paper { transform: translate(-50%, -50%) scale(.08) rotate(20deg); opacity: 0; border-radius: 50%; }
.pgs-star { position: absolute; left: 50%; top: 42%; width: 60px; height: 60px; margin: -30px; display: grid; place-items: center; font-size: 2.4rem; color: #FFE8A8; opacity: 0; transform: scale(.2);
  text-shadow: 0 0 24px #F3C94A, 0 0 48px rgba(243,201,74,.6); transition: opacity .5s ease .5s, transform .6s cubic-bezier(.3,1.6,.5,1) .5s; }
.pgs.fold .pgs-star { opacity: 1; transform: scale(1); }
.pgs.rise .pgs-star { transform: translateY(-34vh) scale(.6); opacity: .9; transition: transform 2.2s cubic-bezier(.4,0,.2,1), opacity 2.2s ease; }
.pgs.rise .pgs-star::after { content: ''; position: absolute; left: 50%; top: 60%; width: 2px; height: 30vh; margin-left: -1px; background: linear-gradient(#F3C94A, transparent); opacity: .5; }
.pgs-txt { position: relative; z-index: 2; max-width: 520px; padding: 0 24px; text-align: center; opacity: 0; transform: translateY(18px); transition: opacity 1s ease .6s, transform 1s ease .6s; }
.pgs.rise .pgs-txt { opacity: 1; transform: none; }
.pgs-txt h2 { margin: 0 0 8px; font: 600 2.2rem var(--voice); color: #FFF6E0; text-shadow: 0 0 24px rgba(243,201,74,.4); }
.pgs-txt p { margin: 0 0 14px; font: italic 1.1rem/1.5 var(--voice); color: #D9D4F0; }
.pgs.rise .afs-heart { opacity: 1; transform: none; }
.pgs.rise .afs-go { opacity: 1; }
.pgs-hint { font: .8rem 'Outfit', sans-serif !important; font-style: normal !important; color: #9A95B8 !important; }
@keyframes blink { 50% { opacity: 0; } }
/* Intention set: a small sunrise */
.its { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(28,32,64,.35); opacity: 0; transition: opacity .35s ease; cursor: pointer; }
.its.in { opacity: 1; } .its.out { opacity: 0; }
.its-card { position: relative; max-width: 440px; width: 100%; padding: 30px 26px 22px; border-radius: 22px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #FFF3D6 0%, #FFFCF4 60%); box-shadow: 0 30px 60px -20px rgba(28,32,64,.6); transform: translateY(12px) scale(.96); transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
.its.in .its-card { transform: none; }
.its-sun { position: relative; height: 60px; margin: -6px 0 6px; }
.its-sun i { position: absolute; left: 50%; bottom: -36px; width: 72px; height: 72px; margin-left: -36px; border-radius: 50%; background: radial-gradient(circle, #FFE8A8, #F3C94A 60%, rgba(243,201,74,0) 72%);
  box-shadow: 0 0 40px 10px rgba(243,201,74,.45); animation: itsrise 1.2s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes itsrise { from { transform: translateY(40px); opacity: .3; } to { transform: translateY(-18px); opacity: 1; } }
.its-k { margin: 0 0 6px; font: 600 .72rem 'Outfit', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #A07A12; }
.its-v { margin: 0 0 12px; font: italic 500 1.35rem/1.4 var(--voice); color: var(--ink-t); }
.its-s { margin: 0; font-size: .78rem; color: var(--soft); }
@media (prefers-reduced-motion: reduce) { .its-sun i, .pgs-line::after { animation: none; } }
/* Note: the text box and its tools are one piece */
.qn-box { border-radius: 14px; background: #FBF9F6; border: 1px solid transparent; transition: border-color .2s, box-shadow .2s, background .2s; }
.qn2 .qn-box textarea { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.qn-box:focus-within { background: #fff; border-color: #D9BE7C; box-shadow: 0 0 0 3px rgba(243,201,74,.18); }
.qn-box .qn-photo { margin: 0 14px 8px; }
.qn-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 7px 12px; border-top: 1px solid #EFE8DE; }
.qn-tools .qn-help[hidden] { display: none !important; }
.qn-tools .qn-cam { font-size: .8rem; color: #6E6680; }
.qn-tools .qn-help { font-size: .8rem; }
.qn2 .qn-more { display: block; }
.qn2:not(.open) .qn-more .qn-starts, .qn2:not(.open) .qn-more .qn-sug, .qn2:not(.open) .qn-more .qn-foot { display: none; }
.qn2 .qn-feel { margin-top: 12px; }
.qn2 .qn-foot { justify-content: flex-end; }
.qn2.qn-mini:not(.open) .qn-box { flex: 1; order: 1; background: transparent; border: 0; }
.qn2.qn-mini:not(.open) .qn-tools, .qn2.qn-mini:not(.open) .qn-box .qn-photo { display: none; }
/* Note: feeling and starters first, then the box, Save right under it */
.qn2 .qn-feel { margin: 4px 0 10px; }
.qn2 .qn-starts, .qn2:not(.open) .qn-starts { display: flex; margin: 0 0 10px; }
.qn2 .qn-starts[hidden] { display: none !important; }
.qn2 .qn-more .qn-foot, .qn2:not(.open) .qn-more .qn-foot { display: flex; margin-top: 10px; }
.qn2 .qn-more .qn-sug { margin-top: 8px; }
.qn2.qn-mini:not(.open) .qn-starts { display: none !important; }
.qn2 .qn-foot .btn { animation: none !important; opacity: 1 !important; }
/* ===================== Your Love Story ===================== */
.sart { position: relative; height: 180px; overflow: hidden; }
.sart.sm { height: 78px; }
.sa-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .6; animation: lctw 2.6s ease-in-out infinite alternate; }
.sa-stars i:nth-child(3n) { animation-delay: .8s; } .sa-stars i:nth-child(4n) { width: 3px; height: 3px; }
.sa-moon { position: absolute; right: 12%; top: 18%; width: 34px; height: 34px; border-radius: 50%; background: #FFF3D0; box-shadow: 0 0 30px 6px rgba(255,236,190,.4); }
.sart.sm .sa-moon { width: 18px; height: 18px; top: 16%; }
.sart-stars .sa-moon { background: radial-gradient(circle at 30% 30%, #FFF6E0, #E8C9FF); }
.sa-fg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; }
/* side card */
.ssc { display: block; margin: 0 0 14px; border-radius: 20px; overflow: hidden; text-decoration: none; background: #fff; border: 1px solid #EADFD0; box-shadow: 0 16px 30px -24px rgba(42,34,80,.6); transition: transform .2s; }
.ssc:hover { transform: translateY(-2px); }
.ssc-b { padding: 12px 16px 14px; }
.ssc-k { margin: 0 0 2px; font: 600 .66rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #A07A12; }
.ssc-b > b { display: block; font: 600 1.12rem/1.25 var(--voice); color: var(--ink-t); }
.ssc-b > span { display: block; margin-top: 4px; font-size: .8rem; color: var(--soft); }
.ssc-b > em { display: inline-block; margin-top: 10px; padding: 7px 14px; border-radius: 999px; background: #1C2040; color: #F3DDA0; font: 600 .8rem 'Outfit', sans-serif; font-style: normal; }
.ssc-bar { display: block !important; height: 5px; border-radius: 999px; background: #F1EAE2; overflow: hidden; margin-top: 8px !important; }
.ssc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #C9A032, #F3C94A); border-radius: inherit; }
/* start */
.sto-intro { text-align: center; max-width: 620px; margin: 6px auto 18px; }
.sto-k { margin: 0 0 4px; font: 600 .7rem 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #A07A12; }
.sto-intro h1 { margin: 0 0 8px; font: 600 2rem/1.15 var(--voice); }
.sto-l { margin: 0; font: italic 1.08rem/1.5 var(--voice); color: var(--soft); }
.sto-step { max-width: 900px; margin: 18px auto 10px; font: 600 1.05rem var(--voice); color: var(--ink-t); }
.sto-worlds { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sto-w { position: relative; display: block; border-radius: 18px; overflow: hidden; background: #fff; border: 2px solid transparent; cursor: pointer; box-shadow: 0 14px 30px -24px rgba(42,34,80,.7); transition: transform .2s, border-color .2s; }
.sto-w input { position: absolute; opacity: 0; }
.sto-w:hover { transform: translateY(-2px); }
.sto-w:has(input:checked) { border-color: #C9A032; box-shadow: 0 0 0 4px rgba(243,201,74,.25), 0 16px 30px -20px rgba(42,34,80,.7); }
.sto-w .sart { height: 120px; }
.sw-b { display: block; padding: 10px 14px 14px; }
.sw-b small { font: 600 .64rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #A07A12; }
.sw-b b { display: block; font: 600 1.15rem var(--voice); color: var(--ink-t); margin: 2px 0 4px; }
.sw-b span { font-size: .8rem; line-height: 1.45; color: var(--soft); }
.sto-names { max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sto-names label input { position: absolute; opacity: 0; }
.sto-names label span { display: inline-block; padding: 9px 18px; border-radius: 999px; border: 1px solid #EADFD0; background: #fff; font: 600 1rem var(--voice); cursor: pointer; }
.sto-names label input:checked + span { background: #1C2040; color: #F3DDA0; border-color: #1C2040; }
.sto-names #stoOwn { padding: 9px 14px; border-radius: 999px; border: 1px solid #E3CFA0; font: 1rem var(--voice); }
.sto-note { max-width: 900px; margin: 14px auto 0; font-size: .86rem; color: var(--soft); }
.sto-go { display: block; width: max-content; margin: 20px auto 6px; padding: 14px 34px; font-size: 1rem; }
.sto-fine { text-align: center; font: italic .85rem var(--voice); color: var(--soft); margin: 0 0 20px; }
/* home */
.sto-cover { position: relative; border-radius: 24px; overflow: hidden; margin: 6px 0 22px; box-shadow: 0 24px 50px -30px rgba(28,32,64,.9); }
.sto-cover .sart { height: 320px; }
.sc-in { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px; background: linear-gradient(transparent, rgba(12,12,30,.85) 45%); color: #FFF6F0; }
.sc-in .sto-k { color: #F3DDA0; }
.sc-in h1 { margin: 0; font: 600 2.2rem/1.1 var(--voice); color: #FFF6F0; }
.sc-in > p { margin: 4px 0 12px; font: italic 1.05rem var(--voice); color: #D9D4F0; }
.sc-stats { display: flex; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.sc-stats span { font-size: .78rem; color: #C4C0E2; } .sc-stats b { margin-right: 5px; font: 600 1.3rem var(--voice); color: #F3DDA0; }
.sc-heart b { color: #FF9FBA !important; }
.sc-go { display: inline-flex; padding: 12px 26px; }
.sc-done { font: italic 1.05rem var(--voice); color: #F3DDA0; }
.sto-moments { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.sto-m { flex: none; width: 150px; height: 190px; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; box-shadow: 0 0 0 1px rgba(243,221,160,.35) inset, 0 12px 24px -16px rgba(0,0,0,.6); }
.sto-m span { color: #F3C94A; font-size: 1.1rem; } .sto-m b { font: italic 600 1.15rem/1.2 var(--voice); } .sto-m small { font-size: .7rem; color: #D9D4F0; }
.sto-list { display: grid; gap: 6px; margin-bottom: 18px; }
.sto-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid #EFE7EA; text-decoration: none; color: inherit; }
.sto-row .sr-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 .8rem 'Outfit', sans-serif; background: #F4EFEA; color: var(--soft); }
.sto-row.read .sr-n { background: #1F8A4C; color: #fff; }
.sto-row.next { border-color: #E3CFA0; background: #FFFBF1; } .sto-row.next .sr-n { background: #1C2040; color: #F3DDA0; }
.sr-t b { display: block; font: 600 1.02rem var(--voice); color: var(--ink-t); } .sr-t small { font-size: .74rem; color: var(--soft); }
.sto-ups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.sto-up { display: block; padding: 14px 16px; border-radius: 16px; background: linear-gradient(160deg, #FFF8E8, #FBEFD6); border: 1px solid #EAD9AE; text-decoration: none; color: inherit; }
.sto-up b { display: block; font: 600 1.05rem var(--voice); } .sto-up span { display: block; font-size: .8rem; color: #6E6680; margin: 2px 0 6px; } .sto-up em { font-style: normal; font: 600 .8rem 'Outfit', sans-serif; color: #A07A12; }
/* reader */
.sreader { max-width: 720px; margin: 0 auto 30px; border-radius: 24px; overflow: hidden; background: #FFFCF6; box-shadow: 0 24px 50px -32px rgba(28,32,64,.7); }
.sreader .sart { height: 200px; }
.sr-in { padding: 26px 36px 30px; }
.sr-in h1 { margin: 0 0 18px; font: 600 2rem/1.15 var(--voice); }
.sr-in > p { margin: 0 0 14px; font: 1.2rem/1.75 var(--voice); color: #2A2350; }
.sr-first::first-letter { float: left; font: 600 3.4rem/.9 var(--voice); color: #A07A12; margin: 6px 8px 0 0; }
.sr-choose { margin-top: 24px; padding-top: 18px; border-top: 1px solid #EFE2C2; }
.sr-q { margin: 0 0 10px; font: italic 600 1.15rem var(--voice); color: var(--ink-t); text-align: center; }
.sr-c { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 8px; padding: 14px 18px; border-radius: 16px; border: 1px solid #E6DCC6; background: #fff; text-align: left; font: 500 1.05rem var(--voice); color: var(--ink-t); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.sr-c:hover { transform: translateY(-1px); border-color: #C9A032; box-shadow: 0 10px 20px -16px rgba(42,34,80,.4); }
.sr-c.prem { background: linear-gradient(150deg, #2E3263, #1C2040); color: #FFF6F0; border-color: #C9A032; box-shadow: 0 0 0 3px rgba(243,201,74,.15); }
.sr-c.prem em { flex: none; font-style: normal; padding: 4px 10px; border-radius: 999px; background: #F3C94A; color: #1C2040; font: 700 .78rem 'Outfit', sans-serif; }
.sr-note { margin: 6px 0 0; text-align: center; font-size: .78rem; color: var(--soft); }
.sr-after { margin-top: 24px; padding-top: 18px; border-top: 1px solid #EFE2C2; }
.sr-after.in > * { animation: pkline .8s ease both; } .sr-after.in > *:nth-child(2) { animation-delay: .2s; } .sr-after.in > *:nth-child(3) { animation-delay: .5s; } .sr-after.in > *:nth-child(n+4) { animation-delay: .8s; }
.sr-you { margin: 0 0 8px; font: italic .9rem var(--voice); color: var(--soft); }
.sr-react { margin: 0 0 12px; font: 1.18rem/1.7 var(--voice); color: #2A2350; }
.sr-heart { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 6px 14px; border-radius: 999px; background: #FCEEF3; color: #8E2F52; font-size: .86rem; }
.sr-heart span { color: #D25B78; animation: qrbeat 1.2s ease 2; display: inline-block; } .sr-heart b { color: #C2476B; }
.sr-moment { margin: 0 0 12px; font-size: .86rem; color: #8A6A14; }
.sr-echo { margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: #1C2040; color: #FFF6F0; }
.sr-ek { margin: 0 0 4px !important; font: 600 .68rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #F3DDA0; }
.sr-echo p { margin: 0; font: italic 1.05rem/1.5 var(--voice); }
.sr-next { margin: 16px 0 8px; padding: 16px; border-radius: 16px; background: #FFF4DC; border: 1px solid #EAD9AE; text-align: center; }
.sr-next b { display: block; font: 600 1.15rem var(--voice); margin-bottom: 10px; } .sr-next p { margin: 0 0 10px; font-size: .86rem; color: var(--soft); }
.sr-redo { display: block; margin: 8px auto 0; background: none; border: 0; font: 600 .78rem 'Outfit', sans-serif; color: var(--soft); cursor: pointer; }
.sto-lock { max-width: 620px; margin: 10px auto 30px; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 24px 50px -32px rgba(28,32,64,.7); text-align: center; }
.sl-in { padding: 22px 26px 26px; } .sl-in h2 { margin: 0 0 8px; font: 600 1.7rem var(--voice); } .sl-in p { margin: 0 0 6px; color: var(--soft); }
.sl-cd { font: 600 1.8rem var(--voice) !important; color: #1C2040 !important; margin: 4px 0 14px !important; }
.sl-f { font-size: .78rem; margin-top: 8px !important; }
@media (max-width: 760px) { .sto-worlds, .sto-ups { grid-template-columns: 1fr; } .sr-in { padding: 20px 18px 24px; } .sr-in > p, .sr-react { font-size: 1.08rem; } .sto-cover .sart { height: 360px; } .sc-in h1 { font-size: 1.7rem; } }
@media (prefers-reduced-motion: reduce) { .sa-stars i, .sr-after.in > *, .sr-heart span { animation: none; } }
/* letters in the journal */
.jn-env { flex: none; width: 56px; display: grid; place-items: center; } .jn-letter { background: #FFFBF1; }
.qn2.lettering .qn-feel, .qn2.lettering #qnHelp, .qn2.lettering #qnExpand, .qn2.lettering #qnBetter, .qn2.lettering .qn-starts { display: none !important; }
.qn-future { margin: 0 0 10px; } .qn-future .qf-q { display: block; margin: 0 0 6px; }
.qr-env { display: grid; place-items: center; margin-bottom: 6px; }
.ld { display: flex; align-items: center; gap: 16px; margin: 10px 0 14px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(160deg, #FFF3D6, #FBE7BC); border: 1px solid #E3CFA0; }
.ld > div:nth-child(2) { flex: 1; } .ld-k { margin: 0; font-size: .74rem; color: #8A6A14; } .ld h3 { margin: 2px 0 0; font: 600 1.25rem var(--voice); }
@media (max-width: 560px) { .ld { flex-wrap: wrap; } .ld .btn { width: 100%; } }
.sto-more { margin: 4px 0 0; padding: 10px 14px; border-radius: 14px; border: 1px dashed #E3CFA0; text-align: center; font: italic .95rem var(--voice); color: #8A6A14; }
.sr-first::first-letter { font-size: 3.2rem; line-height: 1; margin: 4px 8px 0 0; }
.qn2.lettering #qnHelp:not([hidden]), .qn2.lettering #qnExpand:not([hidden]), .qn2.lettering #qnBetter:not([hidden]) { display: inline !important; }
.qw-date { padding: 6px 12px; border-radius: 999px; border: 1px solid #E3CFA0; background: #fff; font: 500 .85rem 'Outfit', sans-serif; color: var(--ink-t); }
/* Story card, subtle (like "Talk to a guide") */
.ssc2 { margin: 0 0 14px; border-radius: var(--r-sheet); overflow: hidden; border: 1px solid #E6DCEB; background: radial-gradient(ellipse at 0% 0%, rgba(107,74,150,.12), transparent 60%), #FFFBFA; }
.ssc2 .ng-main { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; color: var(--ink-t); }
.ssc2 .ng-main div { flex: 1; min-width: 0; } .ssc2 .ng-main b { display: block; font: 600 1.12rem var(--voice); }
.ssc2 .ng-main small { display: block; font-size: .74rem; color: var(--soft); } .ssc2 .ng-main small b { display: inline; font: 600 .74rem 'Outfit', sans-serif; color: #8A6A14; }
.ssc2 .ng-main em { font-style: normal; color: var(--soft); }
.ssc2-art { flex: none; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; }
.ssc2-art .sart.sm { height: 46px; } .ssc2-art .sa-moon { width: 10px; height: 10px; top: 12%; right: 14%; }
.ssc2 .ng-note { display: flex; align-items: center; gap: 10px; padding: 9px 16px 11px; border-top: 1px dashed #E6DCEB; text-decoration: none; }
.ssc2 .ng-note span:last-child { flex: 1; font: italic 500 .93rem var(--voice); color: var(--soft); } .ssc2 .ng-note b { font: italic 600 .93rem var(--voice); color: var(--ink-t); }
.ssc2-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #1C2040; color: #F3DDA0; font-size: .6rem; }
.dsc .dsc-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(150deg, #8E2F52, #5E1E38); color: #FFD6E1; font-size: 1.2rem; box-shadow: inset 0 0 12px rgba(255,159,186,.4); }
.cr-hero + .dsc { max-width: 520px; margin: 0 auto 18px; }
/* Story library */
.sto-intro.sm h1 { font-size: 1.7rem; }
.sto-how { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.sto-how span { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-t); }
.sto-how b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #1C2040; color: #F3DDA0; font: 600 .7rem 'Outfit', sans-serif; }
.sto-tabs { display: flex; justify-content: center; gap: 6px; margin: 4px auto 18px; }
.sto-tabs a, .sto-soon { padding: 8px 16px; border-radius: 999px; border: 1px solid #EADFD0; background: #fff; font: 600 .82rem 'Outfit', sans-serif; color: var(--soft); text-decoration: none; }
.sto-tabs a.on { background: #1C2040; color: #F3DDA0; border-color: #1C2040; } .sto-soon { opacity: .55; }
.sto-shorts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.sto-sh { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #EFE7EA; text-decoration: none; color: inherit; box-shadow: 0 14px 28px -24px rgba(42,34,80,.6); transition: transform .2s; }
.sto-sh:hover { transform: translateY(-2px); } .sto-sh .sart.sm { height: 96px; }
.sto-sh > div { padding: 12px 16px 16px; } .sto-sh b { display: block; font: 600 1.2rem var(--voice); margin: 2px 0 4px; } .sto-sh span { display: block; font-size: .84rem; color: var(--soft); line-height: 1.45; }
.sto-sh em { display: inline-block; margin-top: 10px; font: 600 .8rem 'Outfit', sans-serif; font-style: normal; color: #8A6A14; }
@media (max-width: 640px) { .sto-shorts { grid-template-columns: 1fr; } }
/* The Heart Draw */
.dr-card, .dr-res, .dr-month { max-width: 760px; margin: 0 auto 16px; border-radius: 22px; }
.dr-card { padding: 22px; background: linear-gradient(160deg, #3A1E3A, #1C1236); color: #FFF6F0; box-shadow: 0 24px 44px -28px rgba(28,18,54,.9); }
.dr-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dr-card .sto-k { color: #FFD6E1; }
.dr-pot { margin: 0; font: 600 2.6rem/1 var(--voice); color: #F3DDA0; text-shadow: 0 0 24px rgba(243,201,74,.4); }
.dr-top small { font-size: .78rem; color: #D9C4E6; }
.dr-heart { font-size: 3rem; color: #FF9FBA; text-shadow: 0 0 30px rgba(255,159,186,.7); animation: qrbeat 1.6s ease infinite; }
.dr-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.dr-way { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,214,225,.18); }
.dr-way b { font: 600 1.02rem var(--voice); color: #FFF6F0; } .dr-way span { font-size: .76rem; color: #D9C4E6; flex: 1; }
.dr-way .btn { margin-top: 8px; padding: 8px 14px; font-size: .82rem; width: auto; align-self: flex-start; }
.dr-way em { margin-top: 8px; font-style: normal; color: #A9E0B8; font-size: .82rem; } .dr-way.done { border-color: rgba(169,224,184,.4); }
.dr-way .link { margin-top: 8px; color: #F3DDA0; font-size: .82rem; }
.dr-buys { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dr-buy { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(243,221,160,.45); background: rgba(243,201,74,.1); color: #F3DDA0; font: 600 .78rem 'Outfit', sans-serif; cursor: pointer; }
.dr-buy:hover { background: #F3C94A; color: #1C1236; }
.dr-mine { margin: 14px 0 0; font-size: .8rem; color: #D9C4E6; } .dr-mine span, .dr-nums span { display: inline-block; margin: 3px 4px 0 0; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.1); font: 600 .78rem 'Outfit', sans-serif; color: #FFF6F0; }
.dr-res { padding: 24px; text-align: center; background: #fff; border: 1px solid #EFE7EA; }
.dr-res.won { background: radial-gradient(ellipse at 50% 0%, rgba(243,201,74,.25), transparent 70%), #FFFCF4; border-color: #E3CFA0; }
.dr-win { margin: 2px 0 10px; font-size: .9rem; color: var(--soft); } .dr-win b { font: 600 1.3rem var(--voice); color: var(--ink-t); }
.dr-res .dr-nums span { background: #F4EFEA; color: var(--ink-t); } .dr-res .dr-nums span.near { background: #1C2040; color: #F3DDA0; box-shadow: 0 0 0 3px rgba(243,201,74,.3); }
.dr-res h2 { margin: 12px 0 4px; font: 600 1.8rem var(--voice); } .dr-big { margin: 0 0 12px; font: 600 2.4rem var(--voice); color: #A07A12; }
.dr-got { color: #1F8A4C; font-weight: 600; }
.dr-month { display: flex; align-items: center; gap: 18px; padding: 20px 22px; background: linear-gradient(160deg, #FFF3D6, #FBE7BC); border: 1px solid #E3CFA0; }
.dr-month h3 { margin: 2px 0 6px; font: 600 1.3rem var(--voice); } .dr-month p { margin: 0; font-size: .86rem; color: #6E5A33; }
.dr-me { flex: none; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: #1C2040; color: #F3DDA0; box-shadow: 0 0 0 6px rgba(243,201,74,.25); }
.dr-me b { font: 600 2rem/1 var(--voice); } .dr-me span { font-size: .7rem; color: #D9D4F0; }
.dr-fine { max-width: 760px; margin: 0 auto 24px; text-align: center; font-size: .74rem; color: var(--soft); }
@media (max-width: 640px) { .dr-ways { grid-template-columns: 1fr; } .dr-month { flex-direction: column; text-align: center; } .dr-pot { font-size: 2.1rem; } }
@media (prefers-reduced-motion: reduce) { .dr-heart { animation: none; } }
/* Letter: open on a date */
.qw-date { display: block; margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: #FFFBF1; border: 1px solid #EFE2C2; }
.qw-date > p:first-child { margin: 0 0 6px; font: italic .95rem var(--voice); color: #7A6A4E; }
.qw-fields { display: grid; grid-template-columns: 70px minmax(0, 1fr) 100px; gap: 8px; max-width: 380px; }
.qw-fields input, .qw-fields select { padding: 9px 12px; border-radius: 10px; border: 1px solid #E3CFA0; background: #fff; font: 500 .95rem 'Outfit', sans-serif; color: var(--ink-t); }
.qw-fields input:focus, .qw-fields select:focus { outline: none; border-color: #C9A032; box-shadow: 0 0 0 3px rgba(243,201,74,.2); }
.qw-hint { margin: 6px 0 0; font-size: .76rem; color: var(--soft); } .qw-hint.err { color: var(--rose-c); }
/* Date fields: one height, one style */
.qw-fields { align-items: stretch; grid-template-columns: 76px minmax(0, 1fr) 104px; }
.qw-fields input, .qw-fields select { box-sizing: border-box; height: 44px; margin: 0; padding: 0 12px; line-height: 44px; font: 500 .95rem 'Outfit', sans-serif; border-radius: 10px; border: 1px solid #E3CFA0; background-color: #fff; box-shadow: none; }
.qw-fields select { -webkit-appearance: none; appearance: none; padding-right: 30px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A07A12' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") right 12px center no-repeat; }
.qw-fields input::placeholder { color: #9A95AE; }
.qw-hint:empty { display: none; }
.qw-why { display: block; margin: 12px 0 6px; font: italic .95rem var(--voice); color: #7A6A4E; }
.qw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.qw-chips button { padding: 6px 12px; border-radius: 999px; border: 1px solid #EFE2C2; background: #fff; font: 600 .78rem 'Outfit', sans-serif; color: var(--ink-t); cursor: pointer; }
.qw-chips button.on { background: #1C2040; color: #F3DDA0; border-color: #1C2040; }
#qwWhy { width: 100%; max-width: 380px; box-sizing: border-box; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid #E3CFA0; background: #fff; font: 1rem var(--voice); }
#qwWhy:focus { outline: none; border-color: #C9A032; box-shadow: 0 0 0 3px rgba(243,201,74,.2); }
@media (max-width: 560px) { .qw-fields { grid-template-columns: 62px minmax(0, 1.4fr) minmax(0, 1fr); } .qw-fields select { padding-left: 10px; padding-right: 26px; background-position: right 9px center; } }
.qw-sur { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: #1C2040; color: #F3DDA0; font: italic .95rem var(--voice); }
/* The story as a small book */
.sbk { margin: 0 0 14px; border-radius: 18px; overflow: hidden; background: linear-gradient(150deg, #2B2150 0%, #1C2040 70%); box-shadow: 0 16px 30px -22px rgba(28,32,64,.9); }
.sbk-main { display: flex; align-items: center; gap: 14px; padding: 14px 14px 12px 16px; text-decoration: none; color: #FFF6F0; }
.sbk-cover { position: relative; flex: none; width: 48px; height: 66px; border-radius: 3px 8px 8px 3px; overflow: hidden; box-shadow: 4px 6px 12px rgba(0,0,0,.45), 0 0 0 1px rgba(243,221,160,.35); transform: rotate(-4deg); transition: transform .25s; }
.sbk-main:hover .sbk-cover { transform: rotate(0) translateY(-2px); }
.sbk-cover .sart.sm { height: 66px; } .sbk-cover .sa-moon { width: 10px; height: 10px; top: 14%; right: 16%; }
.sbk-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.12)); }
.sbk-b { flex: 1; min-width: 0; }
.sbk-b small { display: block; font: 600 .62rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #F3DDA0; opacity: .85; }
.sbk-b b { display: block; font: 600 1.15rem/1.2 var(--voice); color: #FFF6F0; }
.sbk-b > span:not(.sbk-bar) { display: block; font-size: .76rem; color: #C4C0E2; margin-top: 1px; } .sbk-b span b { display: inline; font: 600 .76rem 'Outfit', sans-serif; color: #F3DDA0; }
.sbk-bar { display: block; height: 3px; margin-top: 7px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.sbk-bar i { display: block; height: 100%; background: linear-gradient(90deg, #C9A032, #F3DDA0); }
.sbk-main em { flex: none; font-style: normal; padding: 6px 12px; border-radius: 999px; background: #F3C94A; color: #1C2040; font: 700 .76rem 'Outfit', sans-serif; }
.sbk-short { display: block; padding: 9px 16px 10px; border-top: 1px solid rgba(243,221,160,.14); text-decoration: none; font: italic .92rem var(--voice); color: #E9E4F6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbk-short span { font: 600 .64rem 'Outfit', sans-serif; font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: #F3DDA0; margin-right: 6px; }
.sbk-short:hover { background: rgba(255,255,255,.04); }
/* The writing box: the main thing in the card, clearly */
.qn2 .qn-box { background: #fff; border: 1.5px solid #E3CFA0; box-shadow: 0 10px 24px -18px rgba(120,90,30,.55); }
.qn2 .qn-box:focus-within { border-color: #C9A032; box-shadow: 0 0 0 4px rgba(243,201,74,.18), 0 12px 26px -18px rgba(120,90,30,.6); }
.qn2 .qn-box textarea { min-height: 96px; padding: 14px 16px; font-size: 1.08rem; color: var(--ink-t); }
.qn2 .qn-box textarea::placeholder { color: #8E86A0; font-style: italic; }
.qn2 .qn-tools { background: #FFFBF1; border-top: 1px solid #F0E3C4; border-radius: 0 0 13px 13px; }
/* A letter looks like letter paper */
.qn2.lettering .qn-box textarea { min-height: 150px; line-height: 32px; padding-top: 8px; background: repeating-linear-gradient(transparent 0 31px, #F1E6CC 31px 32px) !important; background-attachment: local !important; font-family: var(--voice); }
.qn2.qn-mini:not(.open) .qn-box { background: transparent; border: 0; box-shadow: none; }
/* Story card, balanced: warm paper with a little night in the cover */
.sbk { background: linear-gradient(160deg, #FFFBF3 0%, #F6EEF6 100%); border: 1px solid #E6DCEB; box-shadow: 0 12px 26px -22px rgba(42,34,80,.55); }
.sbk-main { color: var(--ink-t); }
.sbk-b small { color: #8A6A14; opacity: 1; }
.sbk-b b { color: var(--ink-t); }
.sbk-b > span:not(.sbk-bar) { color: #6E6680; line-height: 1.4; } .sbk-b span b { color: #8A6A14; }
.sbk-bar { background: #EDE4EE; }
.sbk-main em { background: #1C2040; color: #F3DDA0; }
.sbk-short { border-top: 1px dashed #E6DCEB; color: var(--soft); } .sbk-short span { color: #8A6A14; } .sbk-short:hover { background: rgba(28,32,64,.03); color: var(--ink-t); }
.sbk-cover { box-shadow: 3px 5px 10px rgba(42,34,80,.35), 0 0 0 1px rgba(201,160,50,.35); }
.mf-guide { margin-top: 14px; }
#side .fl-doors { display: none; }
/* Every writing box is letter paper: a note, a sign, a letter */
.qn2 .qn-box textarea { min-height: 128px; line-height: 32px; padding: 8px 16px 0; background: repeating-linear-gradient(transparent 0 31px, #F1E6CC 31px 32px) !important; background-attachment: local !important; font: 1.08rem/32px var(--voice); }
.qn2.lettering .qn-box textarea { min-height: 160px; }
.qn2.qn-mini:not(.open) .qn-box textarea { background: transparent !important; line-height: 1.4; min-height: 0; }
/* Story card: a night-scene banner with the title, a light body under it */
.sbn { margin: 0 0 14px; border-radius: 18px; overflow: hidden; background: #FFFBF3; border: 1px solid #EADFD0; box-shadow: 0 12px 26px -22px rgba(42,34,80,.5); }
.sbn-top { position: relative; display: block; height: 74px; text-decoration: none; }
.sbn-top .sart.sm { position: absolute; inset: 0; height: 74px; }
.sbn-top .sa-moon { width: 16px; height: 16px; top: 18%; right: 8%; }
.sbn-t { position: absolute; left: 16px; bottom: 10px; right: 50px; }
.sbn-t small { display: block; font: 600 .6rem 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #F3DDA0; }
.sbn-t b { display: block; font: 600 1.3rem/1.1 var(--voice); color: #FFF6F0; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.sbn-body { display: block; padding: 10px 16px 12px; text-decoration: none; }
.sbn-line { display: block; font: italic .98rem/1.4 var(--voice); color: #6E6680; } .sbn-line b { font: 600 .8rem 'Outfit', sans-serif; font-style: normal; color: #8A6A14; }
.sbn-body .sbk-bar { background: #EDE4EE; margin-top: 8px; }
.sbn-body em { display: block; margin-top: 8px; font: 600 .82rem 'Outfit', sans-serif; font-style: normal; color: #8A6A14; }
.sbn .sbk-short { border-top: 1px dashed #EADFD0; color: var(--soft); } .sbn .sbk-short span { color: #8A6A14; }
/* Hearts jar: normal line spacing, a smaller jar */
#side .jar-mini { align-items: center; gap: 14px; padding: 14px 16px; }
#side .jar-mini span { display: block; font-size: .84rem !important; line-height: 1.45 !important; margin-top: 2px; }
#side .jar-mini b { font-size: 1.08rem; line-height: 1.25; }
#side .jar-mini .jar-how summary { margin-top: 6px; font-size: .8rem; }
#side .jar-mini > :first-child { flex: none; transform: scale(.8); transform-origin: center; }
/* Story card, quieter: a thin, soft strip of the scene; the title in the light body */
.sbn { background: #FFFCF7; box-shadow: none; }
.sbn-top { height: 30px; }
.sbn-top .sart.sm { height: 30px; opacity: .55; filter: saturate(.6); }
.sbn-top .sa-moon { width: 9px; height: 9px; top: 20%; }
.sbn-body { padding: 10px 16px 12px; }
.sbn-k { display: block; font: 600 .6rem 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #A07A12; }
.sbn-h { display: block; margin: 1px 0 3px; font: 600 1.12rem var(--voice); color: var(--ink-t); }
.sbn-line { font-size: .92rem; }
.sbn-body em { margin-top: 6px; font-size: .8rem; }
/* The moment, attached under the new entry */
.jn-new { border-color: #E3CFA0 !important; box-shadow: 0 0 0 3px rgba(243,201,74,.2) !important; animation: jnnew .6s ease; }
@keyframes jnnew { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.qr-att { margin: -6px 12px 6px; border-radius: 0 0 16px 16px; background: radial-gradient(ellipse at 50% 0%, rgba(243,201,74,.2), transparent 70%), #FFFBF1; border: 1px solid #EAD9AE; border-top: 0; transition: opacity .4s, max-height .5s; overflow: hidden; }
.qr-att .qr { padding: 14px 14px 12px; }
.qr-att.done { opacity: 0; }
/* Story card, romantic: a rose-dusk sky, blush paper, rose accents */
.sbn { background: linear-gradient(180deg, #FFF6F8 0%, #FFFAF7 100%); border-color: #F1D9E1; }
.sbn-top { height: 34px; }
.sbn-top .sart.sm { height: 34px; opacity: 1; filter: none; background: linear-gradient(100deg, #F6C6D4 0%, #E9C6E6 45%, #F8D8C8 100%) !important; }
.sbn-top .sa-fg { display: none; }
.sbn-top .sa-stars i { background: #fff; opacity: .9; }
.sbn-top .sa-moon { background: #FFFDF6; box-shadow: 0 0 14px 4px rgba(255,255,255,.8); }
.sbn-k { color: #C2476B; }
.sbn-h { color: #3A2440; }
.sbn-line { color: #7A5E73; }
.sbn-body em { color: #C2476B; }
.sbn-body .sbk-bar { background: #F4DDE5; } .sbn-body .sbk-bar i { background: linear-gradient(90deg, #E68CA8, #C2476B); }
.sbn .sbk-short { border-top-color: #F1D9E1; color: #8E6A82; } .sbn .sbk-short span { color: #C2476B; }
/* The story card's sky, by time of day */
.sbn-morn .sbn-top .sart.sm { background: linear-gradient(100deg, #FCE3D9 0%, #F8D1DE 50%, #E9D8F2 100%) !important; }
.sbn-morn .sa-moon { background: radial-gradient(circle, #FFF6D8, #FFD9A8); box-shadow: 0 0 18px 6px rgba(255,210,150,.7); }
.sbn-morn .sa-stars { display: none; }
.sbn-day .sbn-top .sart.sm { background: linear-gradient(100deg, #FBE2C8 0%, #F6C9D6 55%, #EFD3EA 100%) !important; }
.sbn-day .sa-moon { background: radial-gradient(circle, #FFF8DC, #FFDFA0); box-shadow: 0 0 20px 7px rgba(255,214,140,.75); }
.sbn-day .sa-stars { display: none; }
.sbn-dusk .sbn-top .sart.sm { background: linear-gradient(100deg, #E9A4B8 0%, #C99AD0 50%, #F2B99E 100%) !important; }
.sbn-dusk .sa-moon { background: #FFF0DC; box-shadow: 0 0 16px 5px rgba(255,220,190,.7); }
.sbn-night .sbn-top .sart.sm { background: linear-gradient(100deg, #3A2350 0%, #5B2F5E 50%, #2E2A5E 100%) !important; }
.sbn-night .sa-moon { background: radial-gradient(circle at 35% 35%, #FFFBEA, #F6E3B0); box-shadow: 0 0 18px 6px rgba(255,236,190,.55); }
.sbn-night .sa-stars i { opacity: .9; animation: lctw 2.2s ease-in-out infinite alternate; }
.sbn-night { background: linear-gradient(180deg, #FCF1F4 0%, #FFF8F6 100%); }
.sbn-night .sbn-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(transparent, rgba(252,241,244,.6)); }
.sbn-body em { text-align: right; }
/* Soulmate sketch, woven in */
.ms-port { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; z-index: 2; }
.ms-port img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid #F3DDA0; box-shadow: 0 0 0 4px rgba(243,201,74,.18), 0 0 20px rgba(243,201,74,.45); }
.ms-port span { font: italic .72rem var(--voice); color: #F3DDA0; max-width: 90px; text-align: center; line-height: 1.2; }
.mstage.has-port .ritual-steps { margin-right: 90px; }
@media (max-width: 700px) { .ms-port { position: static; transform: none; flex-direction: row; justify-content: center; margin: 0 0 8px; } .ms-port img { width: 36px; height: 36px; } .ms-port span { max-width: none; } .mstage.has-port .ritual-steps { margin-right: 0; } }
.pg-sk { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; padding: 8px 12px; border-radius: 12px; background: #FCEFF3; border: 1px solid #F1D9E1; text-decoration: none; font: italic .95rem var(--voice); color: #7A5E73; }
.pg-sk img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; filter: blur(3px) saturate(.8); flex: none; }
.pg-sk b { font: 600 .82rem 'Outfit', sans-serif; font-style: normal; color: #C2476B; }
.pg-sk.own img { filter: none; border: 1.5px solid #E3CFA0; }
.sr-face { display: flex; align-items: center; gap: 14px; margin: -6px 0 18px; padding: 12px 14px; border-radius: 16px; text-decoration: none; }
.sf-img { flex: none; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #EAD9AE; }
.sf-img img { width: 100%; height: 100%; object-fit: cover; }
.sf-t b { display: block; font: 600 1.05rem var(--voice); color: var(--ink-t); } .sf-t small { display: block; font-size: .78rem; color: #7A5E73; }
.sr-face.veiled { background: #FCEFF3; border: 1px dashed #EBC4D2; }
.sr-face.veiled .sf-img img { filter: blur(7px) saturate(.6); transform: scale(1.15); }
.sr-face.veiled small { color: #C2476B; font-weight: 600; }
.sr-face.reveal { background: radial-gradient(ellipse at 20% 50%, rgba(243,201,74,.3), transparent 70%), #FFF7E6; border: 1px solid #E3CFA0; }
.sr-face.reveal .sf-img { width: 76px; height: 76px; animation: sfreveal 2.2s ease; }
.sr-face.reveal .sf-img img { animation: sfunblur 2.2s ease; }
.sr-face.reveal small { font: 600 .66rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #A07A12; }
@keyframes sfunblur { 0% { filter: blur(10px) saturate(.5); transform: scale(1.15); } 100% { filter: none; transform: none; } }
@keyframes sfreveal { 0% { box-shadow: 0 0 0 3px #fff, 0 0 0 4px #EAD9AE; } 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 4px #EAD9AE, 0 0 30px 10px rgba(243,201,74,.6); } }
.sr-face.own { background: #FFFBF1; padding: 8px 12px; } .sr-face.own .sf-img { width: 42px; height: 42px; }
.sc-face { position: absolute; right: 26px; top: 26px; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; border: 3px solid #F3DDA0; box-shadow: 0 0 24px rgba(243,201,74,.5); z-index: 2; }
.sc-face img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .sr-face.reveal .sf-img, .sr-face.reveal .sf-img img { animation: none; } }
/* ================= Chat, like Manifest ================= */
.chead { text-align: center; }
.ch-on { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 8px; font-size: .82rem; color: #C4C0E2; }
.ch-on .ng-faces .adv-ava { width: 28px; height: 28px; font-size: .7rem; box-shadow: 0 0 0 2px #22254C; }
.ch-on .ng-faces .adv-ava + .adv-ava { margin-left: -9px; }
.ch-on .nv-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3FB86B; margin-right: 6px; box-shadow: 0 0 0 3px rgba(63,184,107,.2); }
.ask-card { margin: 10px 0 0; padding: 22px 22px 20px; border-radius: var(--r-sheet); text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(243,201,74,.14), transparent 60%), linear-gradient(180deg, #FFFBF1, #F8EDD6); border: 1px solid #EAD9AE; box-shadow: 0 20px 40px -28px rgba(120,90,30,.45); }
.ask-card h2 { margin: 0 0 4px; font: 600 1.4rem var(--voice); color: var(--ink-t); }
.ask-sub { margin: 0 0 14px; font-size: .88rem; color: #7A6A4E; }
.ask-f2 { text-align: left; }
.ask-starts { justify-content: center; flex-wrap: wrap; overflow: visible; margin-bottom: 10px; }
.ask-starts button { font-size: .88rem; }
.ask-box { background: #fff; border: 1.5px solid #E3CFA0; border-radius: 14px; box-shadow: 0 10px 24px -18px rgba(120,90,30,.55); }
.ask-box:focus-within { border-color: #C9A032; box-shadow: 0 0 0 4px rgba(243,201,74,.18); }
.ask-box textarea { display: block; width: 100%; box-sizing: border-box; min-height: 96px; border: 0; background: repeating-linear-gradient(transparent 0 31px, #F1E6CC 31px 32px); background-attachment: local; padding: 8px 16px 0; font: 1.08rem/32px var(--voice); color: var(--ink-t); resize: none; }
.ask-box textarea:focus { outline: none; }
.ask-box textarea::placeholder { color: #8E86A0; font-style: italic; }
.ask-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.ask-foot span { font-size: .74rem; color: var(--soft); }
.ask-foot .btn { width: auto; padding: 10px 26px; font-size: .92rem; box-shadow: 0 10px 22px -12px rgba(31,138,76,.6); }
.ask-m { margin-top: 16px; padding-top: 14px; border-top: 1px solid #EFE2C2; text-align: left; }
.ask-for { margin: 0 0 8px; font: italic .95rem var(--voice); color: #7A6A4E; }
.ask-card .ask-g { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid #EADFD0; background: #fff; text-align: left; font: inherit; cursor: pointer; color: var(--ink-t); transition: transform .15s, box-shadow .15s; }
.ask-card .ask-g:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -16px rgba(42,34,80,.4); }
.ask-card .ask-g.best { border-color: #C9A032; box-shadow: 0 0 0 3px rgba(243,201,74,.18); }
.ask-card .ask-g span { flex: 1; font-size: .84rem; color: var(--soft); } .ask-card .ask-g b { display: block; font: 600 1.05rem var(--voice); color: var(--ink-t); }
.ask-best { font: 600 .62rem 'Outfit', sans-serif; font-style: normal; padding: 2px 8px; margin-left: 6px; border-radius: 999px; background: #1C2040; color: #F3DDA0; vertical-align: middle; }
.ask-card .ask-g em { font-style: normal; font: 600 .8rem 'Outfit', sans-serif; color: #1F8A4C; }
.ask-cost { margin: 4px 0 0; font-size: .76rem; color: var(--soft); text-align: center; }
.ch-sec { margin: 26px 0 10px; font: 600 1.25rem var(--voice); color: var(--ink-t); }
.adv-note { background: linear-gradient(180deg, #FFF6F8, #FFFBF7); border: 1px solid #F1D9E1; border-left: 1px solid #F1D9E1; border-radius: 18px; }
.adv-note .an-go { color: #C2476B; }
/* the side: light, like Manifest */
.cr-mini.cr-lite { background: linear-gradient(180deg, #FFFBF1, #F8EDD6) !important; border: 1px solid #EAD9AE !important; color: var(--ink-t) !important; }
.cr-lite .kicker { color: #8A6A14 !important; } .cr-lite .crm-big { color: #A07A12 !important; } .cr-lite .crm-l { color: #6E5A33 !important; }
.cr-lite .crm-earn { color: #8A6A14 !important; } .cr-lite .link { color: #8A6A14 !important; }
@media (max-width: 560px) { .ask-card { padding: 18px 14px; } .ask-foot { flex-direction: column-reverse; gap: 8px; } .ask-foot .btn { width: 100%; } .ch-on { flex-direction: column; gap: 4px; } }
.ask-card .ask-g span.adv-ava { flex: none; width: 44px; height: 44px; font-size: 1rem; }
.ask-card .ask-g > span:not(.adv-ava) { flex: 1; }
.cr-lite .crm-big, .cr-lite .crm-big * { color: #A07A12 !important; -webkit-text-fill-color: #A07A12 !important; background: none !important; text-shadow: none !important; }
/* Step 2 of the ladder: the Love Reading */
.ms-when { display: block; margin-top: 2px; font: 600 .66rem 'Outfit', sans-serif; font-style: normal; color: #FFD6E1; }
.im-lock, .im-strong, .ev-num { display: block; margin: -6px 0 14px; padding: 9px 12px; border-radius: 12px; font-size: .84rem; text-decoration: none; }
.im-lock, .ev-num.lock { background: #FCEFF3; border: 1px solid #F1D9E1; color: #7A5E73; } .im-lock b, .ev-num.lock b { color: #C2476B; font-weight: 600; }
.im-strong, .ev-num { background: #FFF7E6; border: 1px solid #EAD9AE; color: #6B5A33; }
.ev-num { margin: 0 0 12px; }
.sto-meet .sm-face { display: block; width: 76px; height: 76px; margin: 0 auto 10px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #EAD9AE, 0 0 24px rgba(243,201,74,.4); }
.sto-meet .sl-in > p:not(.sto-k):not(.sl-f) { max-width: 460px; margin: 0 auto 14px; font: italic 1.02rem/1.55 var(--voice); color: #6E6680; }
/* The after-step nudge: one soft line under the finished steps */
.an2 { display: flex; align-items: center; gap: 12px; margin: -4px 0 14px; padding: 10px 14px; border-radius: 0 0 16px 16px; background: #FCEFF3; border: 1px solid #F1D9E1; border-top: 0; text-decoration: none; font: italic .98rem var(--voice); color: #7A5E73; }
.an2 img { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; box-shadow: 0 0 0 1px #EAD9AE; }
.an2.blur img { filter: blur(3px) saturate(.8); }
.an2 span { flex: 1; } .an2 b { display: block; font: 600 .8rem 'Outfit', sans-serif; font-style: normal; color: #C2476B; margin-top: 1px; }
.an2.own { background: #FFF7E6; border-color: #EAD9AE; color: #6B5A33; } .an2.own b { color: #A07A12; font-weight: 500; }
.fl-stack + .an2 { margin-top: -12px; margin-left: 12px; margin-right: 12px; }
.fl-stack { position: relative; z-index: 1; }
/* "Today, I am thankful for": soft blush, not dark red */
.pg-wish.pg-thank { background: linear-gradient(160deg, #FFF1F4, #FBE3EA); border: 1px solid #F1D0DB; box-shadow: 0 12px 24px -20px rgba(194,71,107,.5); }
.pg-thank label { color: #8E2F52; }
.pg-thank label span { color: #D25B78; text-shadow: none; }
.pg-thank input { background: #fff; border-color: #F1D0DB; color: var(--ink-t); }
.pg-thank input::placeholder { color: #B98A9C; }
.pg-thank input:focus { border-color: #D25B78; box-shadow: 0 0 0 3px rgba(210,91,120,.15); }
/* Intention set: the sun sits above the words */
.its-card { padding-top: 22px; }
.its-sun { height: 76px; margin: 0 0 10px; overflow: hidden; }
.its-sun i { bottom: -40px; }
@keyframes itsrise { from { transform: translateY(40px); opacity: .3; } to { transform: translateY(-6px); opacity: 1; } }
/* Starters wrap, never cut off */
.qn2 .qn-starts { flex-wrap: wrap !important; overflow: visible !important; gap: 6px; }
.qn2 .qn-starts button { flex: none; }
.flows .pg-foot { margin-top: 20px !important; }
.pg-wish.pg-thank { margin-bottom: 4px; }
/* After-day nudge: its own card, same width as the steps above */
.fl-stack + .an2, .an2 { margin: 10px 0 14px !important; border: 1px solid #F1D9E1 !important; border-radius: 16px !important; padding: 12px 16px; }
.an2.own { border-color: #EAD9AE !important; }
.fl-stack + .an2, .an2 { margin: 8px 0 8px !important; padding: 8px 14px !important; }
.an2 img { width: 30px; height: 30px; }
.fl-stack { margin-bottom: 0 !important; }
.an2 + .flow { margin-top: 0 !important; }
/* ================= Chat page, second pass ================= */
.ask-lean { padding: 18px 20px 16px; text-align: left; }
.ask-lean h2 { font-size: 1.3rem; }
.ask-lean .ask-sub { margin-bottom: 10px; }
.ask-lean .ask-starts { justify-content: flex-start; }
.ask-lean .ask-box textarea { min-height: 64px; }
.ask-lean .ask-foot { margin-top: 10px; }
.ch-tabs { display: flex; gap: 4px; margin: 22px 0 14px; border-bottom: 1px solid #EADFD0; }
.ch-tabs a { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; font: 600 .9rem 'Outfit', sans-serif; color: var(--soft); text-decoration: none; }
.ch-tabs a.on { color: var(--ink-t); border-bottom-color: #C2476B; }
.ch-tabs a i { font-style: normal; font-size: .7rem; padding: 1px 7px; margin-left: 4px; border-radius: 999px; background: #F4DDE5; color: #8E2F52; }
.gc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 20px; }
.gc { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #EFE7EA; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.gc:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -22px rgba(42,34,80,.5); }
.gc-top { position: relative; height: 120px; display: grid; place-items: center; overflow: hidden; }
.gc-top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gc-mark { position: relative; font-size: 2.6rem; color: #FFF6E0; text-shadow: 0 0 24px rgba(255,255,255,.35); }
.gc-top img + .gc-mark { display: none; }
.gc-on { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.92); font: 600 .68rem 'Outfit', sans-serif; color: #2E6B45; }
.gc-on i { width: 7px; height: 7px; border-radius: 50%; background: #3FB86B; box-shadow: 0 0 0 3px rgba(63,184,107,.2); }
.gc-fav { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: #C2476B; font-size: 1rem; cursor: pointer; }
.gc-b { flex: 1; display: flex; flex-direction: column; padding: 12px 14px 14px; }
.gc-b > b { font: 600 1.25rem var(--voice); color: var(--ink-t); }
.gc-role { font-size: .76rem; color: var(--soft); }
.gc-best { margin: 8px 0; font: italic .95rem/1.35 var(--voice); color: var(--ink-t); }
.gc-best small { display: block; font: 600 .6rem 'Outfit', sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #C2476B; margin-bottom: 1px; }
.gc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.gc-tags span { padding: 2px 8px; border-radius: 999px; background: #F6F1F4; font-size: .68rem; color: #6E6680; }
.gc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid #F3EDE8; }
.gc-price { font: 600 .78rem 'Outfit', sans-serif; color: #8A6A14; }
.gc-go { padding: 6px 14px; border-radius: 999px; background: #1F8A4C; color: #fff; font: 600 .78rem 'Outfit', sans-serif; }
@media (max-width: 1100px) { .gc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .gc-grid { gap: 10px; } .gc-top { height: 90px; } .gc-best { font-size: .88rem; } .gc-tags { display: none; } }
/* side */
.cs-hi { margin: 0 0 16px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(150deg, #2E3263, #1C2040); color: #FFF6F0; }
.cs-hi > p { margin: 0 0 8px; font: italic 1.15rem var(--voice); }
.cs-hi > div { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: #C4C0E2; } .cs-hi b { color: #A9E0B8; }
.cs-hi .adv-ava { width: 26px; height: 26px; font-size: .65rem; box-shadow: 0 0 0 2px #22254C; } .cs-hi .adv-ava + .adv-ava { margin-left: -9px; }
.cs-hi .ng-on { box-shadow: 0 0 0 2px #22254C; }
#side .adv-note { margin-bottom: 14px; padding: 14px; }
#side .adv-note .an-text { font-size: 1rem; }
.cs-cr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 18px; padding: 10px 14px; border-radius: 14px; background: #FFFBF1; border: 1px solid #EFE2C2; text-decoration: none; }
.cs-cr span { font: 600 .95rem var(--voice); color: #A07A12; } .cs-cr small { flex: 1; font-size: .72rem; color: var(--soft); } .cs-cr em { font-style: normal; color: var(--soft); }
/* Credits panel, opens in place */
.crp { margin: 0 0 16px; border-radius: 14px; background: #FFFBF1; border: 1px solid #EFE2C2; overflow: hidden; }
.crp summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.crp summary::-webkit-details-marker { display: none; }
.crp-n { font: 600 1rem var(--voice); color: #A07A12; } .crp-l { flex: 1; font-size: .72rem; color: var(--soft); }
.crp-cta { font: 600 .74rem 'Outfit', sans-serif; color: #8A6A14; padding: 4px 10px; border-radius: 999px; border: 1px solid #E3CFA0; background: #fff; }
.crp[open] .crp-cta { background: #1C2040; color: #F3DDA0; border-color: #1C2040; }
.crp-in { padding: 2px 14px 14px; border-top: 1px solid #F0E3C4; }
.crp-h { margin: 12px 0 6px; font: 600 .82rem 'Outfit', sans-serif; color: var(--ink-t); } .crp-h small { font-weight: 400; color: var(--soft); margin-left: 4px; }
.crp-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.crp-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 4px 8px; border-radius: 12px; border: 1px solid #EADFD0; background: #fff; cursor: pointer; font: inherit; }
.crp-pack b { font: 600 1rem var(--voice); color: #A07A12; } .crp-pack span { font-size: .74rem; color: var(--ink-t); } .crp-pack em { font-style: normal; font-size: .62rem; color: #1F8A4C; font-weight: 600; }
.crp-pack.best { border-color: #C9A032; box-shadow: 0 0 0 2px rgba(243,201,74,.2); }
.crp-pack i { position: absolute; top: -8px; font-style: normal; font: 600 .56rem 'Outfit', sans-serif; padding: 1px 6px; border-radius: 999px; background: #1C2040; color: #F3DDA0; }
.crp-pack:hover { border-color: #C9A032; }
.crp-earn { display: grid; gap: 4px; }
.crp-earn a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid #F0E6D6; font-size: .76rem; color: var(--ink-t); text-decoration: none; }
.crp-earn b { color: #1F8A4C; font-weight: 600; white-space: nowrap; }
.crp-ic { display: block; margin-top: 10px; font-size: .74rem; color: #8A6A14; text-decoration: none; }
.cw-need + .crp, .cw-msgs .crp { margin: 10px 0; }
/* Ratings */
.gc-nm { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.gc-rt { flex: none; font: 600 .78rem 'Outfit', sans-serif; color: #A07A12; } .gc-rt small { font-weight: 400; color: var(--soft); }
.rate-g { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 8px; font-size: .84rem; color: var(--soft); }
.rate-g span { margin-right: 8px; font: italic .95rem var(--voice); }
.rate-g button { border: 0; background: none; font-size: 1.3rem; color: #E3DAD0; cursor: pointer; transition: transform .15s, color .15s; }
.rate-g button.hov, .rate-g button:hover { color: #E0A91C; transform: scale(1.15); }
/* Inbox */
.ib-head { margin: 14px 0 6px; } .ib-head h1 { margin: 2px 0 4px; }
.ib-tabs button { padding: 10px 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 .9rem 'Outfit', sans-serif; color: var(--soft); cursor: pointer; }
.ib-tabs button.on { color: var(--ink-t); border-bottom-color: #C2476B; }
.ib-tabs button i { font-style: normal; font-size: .7rem; padding: 1px 7px; margin-left: 4px; border-radius: 999px; background: #C2476B; color: #fff; }
.ib-list { display: grid; gap: 8px; margin-bottom: 24px; }
.ib-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid #EFE7EA; text-decoration: none; color: inherit; transition: box-shadow .2s; }
.ib-row:hover { box-shadow: 0 12px 24px -20px rgba(42,34,80,.5); }
.ib-row.unread { background: #FFFBF6; border-color: #EBD6DF; }
.ib-pic { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.ib-pic img { width: 100%; height: 100%; object-fit: cover; } .ib-pic .adv-ava { width: 44px; height: 44px; }
.ib-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #1C2040; color: #F3DDA0; font-size: 1rem; }
.ib-b { flex: 1; min-width: 0; } .ib-b small { display: block; font-size: .68rem; color: var(--soft); }
.ib-b b { display: block; font: 600 1.02rem var(--voice); color: var(--ink-t); }
.ib-row.unread .ib-b b { font-weight: 700; }
.ib-b span { display: block; font-size: .82rem; color: #6E6680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-when { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: .72rem; color: var(--soft); }
.ib-when i { width: 8px; height: 8px; border-radius: 50%; background: #C2476B; }
.cs-ib { display: block; margin: -6px 0 14px; font: italic .92rem var(--voice); color: #8E6A82; text-decoration: none; }
/* Guide profile */
.gprof { max-width: 820px; margin: 6px auto 30px; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid #EFE7EA; box-shadow: 0 24px 50px -36px rgba(42,34,80,.6); }
.gp-hero { height: 150px; display: grid; place-items: center; }
.gp-mark { position: relative; width: 110px; height: 110px; margin-bottom: -110px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: inherit; border: 4px solid #fff; box-shadow: 0 12px 26px -12px rgba(0,0,0,.5); font-size: 2.8rem; color: #FFF6E0; transform: translateY(40px); }
.gp-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gp-b { padding: 64px 28px 26px; }
.gp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gp-top h1 { margin: 0; font: 600 2rem var(--voice); } .gp-role { margin: 0; color: var(--soft); }
.gp-fav { padding: 7px 14px; border-radius: 999px; border: 1px solid #F1D9E1; background: #FFF6F8; color: #C2476B; font: 600 .8rem 'Outfit', sans-serif; cursor: pointer; }
.gp-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 14px; font-size: .82rem; }
.gp-rt { font-weight: 600; color: #A07A12; } .gp-rt small { font-weight: 400; color: var(--soft); }
.gp-on { color: #2E6B45; } .gp-on i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #3FB86B; }
.gp-ai { padding: 1px 8px; border-radius: 999px; background: #F6F1F4; color: #6E6680; font-size: .72rem; }
.gp-bio { margin: 0 0 18px; font: 1.15rem/1.6 var(--voice); color: var(--ink-t); }
.gp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.gp-cols > div { padding: 12px 14px; border-radius: 14px; background: #FBF7F2; }
.gp-k { margin: 0 0 4px; font: 600 .64rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #C2476B; }
.gp-v { margin: 0; font: italic .98rem/1.45 var(--voice); color: var(--ink-t); }
.gp-tags { margin-bottom: 16px; }
.gp-ask { margin-bottom: 20px; } .gp-ask a { display: block; padding: 10px 14px; margin-top: 6px; border-radius: 12px; border: 1px solid #EFE2C2; background: #FFFBF1; font: italic 1rem var(--voice); color: var(--ink-t); text-decoration: none; }
.gp-ask a:hover { border-color: #C9A032; }
.gp-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 16px; border-top: 1px solid #F3EDE8; }
.gp-start { width: auto; padding: 12px 28px; }
.gp-go > span { font-size: .82rem; color: #8A6A14; } .gp-cont { font-size: .82rem; color: var(--soft); }
@media (max-width: 640px) { .gp-cols { grid-template-columns: 1fr; } .gp-b { padding: 60px 18px 20px; } .gp-top { flex-direction: column; } .gp-start { width: 100%; justify-content: center; } }
.gprof, .gprof * { text-align: left; }
.gp-meta { align-items: center; } .gp-rt small { display: inline; margin-left: 4px; }
.gp-cols > div { align-self: start; }
/* After-page nudge: gold, like every other nudge line */
.an2, .an2.blur { background: #FFF7E6 !important; border-color: #EAD9AE !important; color: #6B5A33; }
.an2 b { color: #A07A12 !important; }
/* Nudge: a headline, one line, and a gold pill */
.an2 { align-items: center; padding: 12px 16px !important; }
.an2 img { width: 44px; height: 44px; }
.an2 span { font: italic .92rem/1.45 var(--voice); color: #6B5A33; }
.an2 strong { display: block; margin-bottom: 2px; font: 600 1.08rem/1.3 var(--voice); font-style: normal; color: var(--ink-t); }
.an2 b { display: inline-block !important; margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(180deg, #F3D27A, #E0B84F); color: #3A2E00 !important; font: 700 .78rem 'Outfit', sans-serif !important; font-style: normal; box-shadow: 0 6px 14px -8px rgba(160,122,18,.7); }
.an2 span { display: flex; flex-direction: column; align-items: flex-start; }
.an2 b { margin-top: 8px; }
.an2 b { align-self: flex-end; }
/* ============ Chat, simplified ============ */
.ask3 { margin: 8px 0 26px; }
.a3-hi { margin: 0 0 18px; font: italic 1.1rem var(--voice); color: var(--soft); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.a3-hi span { font: 500 .78rem 'Outfit', sans-serif; font-style: normal; color: #2E6B45; display: inline-flex; align-items: center; gap: 6px; }
.a3-hi i { width: 7px; height: 7px; border-radius: 50%; background: #3FB86B; box-shadow: 0 0 0 3px rgba(63,184,107,.18); }
.a3-q { display: block; margin: 0 0 12px; font: 600 2.1rem/1.15 var(--voice); color: var(--ink-t); }
.a3-in { display: flex; align-items: flex-end; gap: 10px; padding: 8px 8px 8px 20px; border-radius: 22px; background: #fff; border: 1.5px solid #EADFD0; box-shadow: 0 18px 40px -30px rgba(42,34,80,.55); transition: border-color .2s, box-shadow .2s; }
.a3-in:focus-within { border-color: #D9BE7C; box-shadow: 0 0 0 4px rgba(243,201,74,.15), 0 18px 40px -30px rgba(42,34,80,.55); }
.a3-in textarea { flex: 1; min-height: 44px; max-height: 160px; padding: 10px 0; border: 0; background: none; resize: none; font: 1.2rem/1.45 var(--voice); color: var(--ink-t); }
.a3-in textarea:focus { outline: none; } .a3-in textarea::placeholder { color: #A39BB2; font-style: italic; }
.a3-go { flex: none; padding: 11px 18px; border-radius: 16px; border: 0; background: #1F8A4C; color: #fff; font: 600 .9rem 'Outfit', sans-serif; cursor: pointer; opacity: 0; transform: scale(.92); pointer-events: none; transition: opacity .2s, transform .2s; }
.a3-f.has .a3-go { opacity: 1; transform: none; pointer-events: auto; }
.a3-sug { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; transition: opacity .2s; }
.a3-f.has .a3-sug { display: none; }
.a3-sug button { padding: 7px 14px; border-radius: 999px; border: 0; background: rgba(28,32,64,.05); font: italic .98rem var(--voice); color: #5C5470; cursor: pointer; }
.a3-sug button:hover { background: rgba(28,32,64,.09); color: var(--ink-t); }
.a3-m { margin-top: 16px; display: grid; gap: 8px; }
.a3-g { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; border: 1px solid #EFE7EA; background: #fff; text-align: left; font: inherit; color: var(--ink-t); cursor: pointer; }
.a3-g.best { border-color: #D9BE7C; box-shadow: 0 0 0 3px rgba(243,201,74,.15); }
.a3-g .adv-ava { width: 44px; height: 44px; flex: none; } .a3-g span { flex: 1; font-size: .84rem; color: var(--soft); }
.a3-g b { display: block; font: 600 1.08rem var(--voice); color: var(--ink-t); } .a3-g b i { font: 600 .62rem 'Outfit', sans-serif; font-style: normal; padding: 2px 8px; margin-left: 6px; border-radius: 999px; background: #1C2040; color: #F3DDA0; vertical-align: middle; }
.a3-g em { font-style: normal; font: 600 .82rem 'Outfit', sans-serif; color: #1F8A4C; }
.a3-cost { margin: 2px 0 0; font-size: .76rem; color: var(--soft); }
.a3-cont { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: #FFFBF3; border: 1px solid #EFE2C2; text-decoration: none; color: inherit; }
.a3-cont .adv-ava { width: 40px; height: 40px; flex: none; } .a3-cont span { flex: 1; font: italic 1rem var(--voice); color: var(--ink-t); } .a3-cont small { display: block; font: 600 .7rem 'Outfit', sans-serif; font-style: normal; color: #8A6A14; }
.a3-cont em { font-style: normal; color: var(--soft); }
.a3-all { display: block; margin: 8px 0 0; font-size: .8rem; color: var(--soft); text-decoration: none; }
.gc-top3 .gc-top { height: 140px; }
.gs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
.gs { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid #EFE7EA; text-decoration: none; color: inherit; }
.gs:hover { border-color: #E3CFA0; } .gs .adv-ava { width: 38px; height: 38px; flex: none; }
.gs span { flex: 1; min-width: 0; } .gs b { display: block; font: 600 1rem var(--voice); color: var(--ink-t); } .gs small { display: block; font-size: .74rem; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs em { font-style: normal; font: 600 .76rem 'Outfit', sans-serif; color: #A07A12; }
.cs-note { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #EFE7EA; text-decoration: none; color: inherit; }
.cs-note .adv-ava { width: 40px; height: 40px; flex: none; } .cs-note span { flex: 1; font-size: .76rem; color: var(--soft); } .cs-note b { display: block; font: 600 1rem var(--voice); color: var(--ink-t); } .cs-note em { font-style: normal; color: var(--soft); }
.cs-ib { margin: 0 0 14px 4px !important; }
@media (max-width: 640px) { .a3-q { font-size: 1.7rem; } .gs-list { grid-template-columns: 1fr; } .a3-go { padding: 10px 14px; } }
@media (max-width: 640px) {
  .gc-top3 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .gc-top3::-webkit-scrollbar { display: none; }
  .gc-top3 .gc { flex: 0 0 72%; scroll-snap-align: start; }
  .gc-top3 .gc-top { height: 110px; }
}
/* ===== Chat, with Manifest's warmth ===== */
.ask3.scene { position: relative; overflow: hidden; margin: 6px 0 22px; padding: 26px 30px 26px; border-radius: 26px; text-align: left;
  background: radial-gradient(ellipse at 80% -20%, rgba(243,201,74,.18), transparent 55%), radial-gradient(ellipse at 10% 120%, rgba(194,71,107,.22), transparent 55%), linear-gradient(160deg, #2E3263 0%, #1C2040 70%); box-shadow: 0 30px 60px -36px rgba(28,32,64,.9); }
.ask3 .a3-hi { color: #C4C0E2; margin-bottom: 8px; } .ask3 .a3-hi span { color: #A9E0B8; }
.ask3 .a3-q { color: #FFF6F0; font-size: 2.3rem; margin-bottom: 16px; }
.ask3 .a3-in { border: 0; background: #FFFCF6; box-shadow: 0 0 0 6px rgba(255,255,255,.06), 0 20px 40px -20px rgba(0,0,0,.6); }
.ask3 .a3-in:focus-within { box-shadow: 0 0 0 6px rgba(243,201,74,.25), 0 20px 40px -20px rgba(0,0,0,.6); }
.ask3 .a3-go { background: linear-gradient(180deg, #F3D27A, #E0B84F); color: #2A2000; }
.ask3 .a3-sug button { background: rgba(255,255,255,.08); border: 1px solid rgba(243,221,160,.22); color: #F3E3BE; }
.ask3 .a3-sug button:hover { background: rgba(255,255,255,.14); color: #fff; }
.ask3 .a3-m { margin-top: 18px; } .ask3 .a3-g { background: rgba(255,252,246,.97); border: 0; } .ask3 .a3-g.best { box-shadow: 0 0 0 3px rgba(243,201,74,.55); }
.ask3 .a3-cost { color: #C4C0E2; }
.a3-cont { background: #fff; border-color: #EFE7EA; box-shadow: 0 10px 24px -22px rgba(42,34,80,.5); }
.ch-sec { font-size: 1.4rem; margin-top: 30px; }
/* guide cards: a starry band, a portrait circle */
.gc { border-radius: 22px; border-color: #EFE6EC; box-shadow: 0 14px 30px -26px rgba(42,34,80,.55); }
.gc .gc-top { height: 96px !important; display: block; background: linear-gradient(160deg, #F6E7EE 0%, #EDE4F4 100%); overflow: visible; }
.gc-stars { position: absolute; inset: 0; border-radius: 22px 22px 0 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(160,122,18,.5), transparent), radial-gradient(1px 1px at 70% 20%, rgba(160,122,18,.5), transparent), radial-gradient(1.5px 1.5px at 85% 60%, rgba(194,71,107,.4), transparent), radial-gradient(1px 1px at 40% 70%, rgba(160,122,18,.4), transparent); }
.gc-face { position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; border: 4px solid #fff; box-shadow: 0 12px 24px -12px rgba(28,32,64,.7); }
.gc-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gc .gc-mark { font-size: 2rem; }
.gc .gc-on { left: 12px; top: 12px; bottom: auto; background: #fff; }
.gc .gc-fav { right: 12px; top: 12px; background: #fff; box-shadow: 0 4px 10px -6px rgba(0,0,0,.3); }
.gc .gc-b { padding: 44px 16px 16px; text-align: center; align-items: center; }
.gc .gc-nm { flex-direction: column; align-items: center; gap: 2px; }
.gc .gc-nm b { font: 600 1.35rem var(--voice); }
.gc .gc-best { text-align: center; } .gc .gc-tags { justify-content: center; }
.gc .gc-foot { width: 100%; }
.gc .gc-go { background: #1C2040; color: #F3DDA0; }
/* side */
.cs-note { box-shadow: 0 10px 24px -22px rgba(42,34,80,.5); }
.cs-angel { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; padding: 14px; border-radius: 18px; text-decoration: none; background: radial-gradient(ellipse at 0% 0%, rgba(243,201,74,.18), transparent 60%), linear-gradient(160deg, #2E3263, #1C2040); color: #D9D4F0; font-size: .8rem; line-height: 1.4; }
.cs-angel b { display: block; font: 600 1.05rem var(--voice); color: #FFF6F0; }
.cs-glow .adv-ava { width: 42px; height: 42px; box-shadow: 0 0 0 3px rgba(243,221,160,.25), 0 0 18px rgba(243,201,74,.4); }
@media (max-width: 640px) { .ask3.scene { padding: 20px 16px; border-radius: 22px; } .ask3 .a3-q { font-size: 1.8rem; } }
.cs-note .adv-ava, .gs .adv-ava, .a3-cont .adv-ava, .a3-g .adv-ava { font-size: 1.1rem; color: #FFF6F0; }
.cs-ib2 { display: flex; align-items: center; gap: 10px; margin: -2px 0 14px; padding: 9px 14px; border-radius: 14px; background: #fff; border: 1px solid #EFE7EA; text-decoration: none; font-size: .82rem; color: var(--ink-t); }
.cs-ib2 span { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: #C2476B; color: #fff; font: 700 .72rem 'Outfit', sans-serif; }
.cs-ib2 em { margin-left: auto; font-style: normal; color: var(--soft); }
#side .crp-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Chat side: light, one dark thing on the page only */
.cs-angel { background: linear-gradient(160deg, #FFF3F6, #FBE6EC) !important; border: 1px solid #F1D9E1; color: #7A5E73 !important; }
.cs-angel b { color: #3A2440 !important; } .cs-angel em { margin-left: auto; font-style: normal; color: #B98A9C; }
.cs-glow .adv-ava { box-shadow: 0 0 0 3px #fff, 0 0 16px rgba(194,71,107,.3) !important; }
.cs-h { margin: 18px 0 8px 2px; font: 600 1.05rem var(--voice); color: var(--ink-t); }
.cs-day { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #EFE7EA; text-decoration: none; color: var(--soft); font-size: .78rem; }
.cs-day span:nth-child(2) { flex: 1; } .cs-day span b { display: block; font: 600 1rem var(--voice); color: var(--ink-t); } .cs-day em { font-style: normal; }
.cs-ring { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; color: var(--soft); background: radial-gradient(closest-side, #fff 78%, transparent 80%), conic-gradient(#C9A032 calc(var(--p) * 1%), #F1EAE2 0); }
.cs-ring b { display: inline !important; font: 600 1rem var(--voice) !important; color: #A07A12 !important; }
#side .sbn, #side .dsc { margin-bottom: 12px; }
.cs-ring { display: flex !important; align-items: baseline; justify-content: center; white-space: nowrap; padding-top: 11px; box-sizing: border-box; }
/* ================= Inbox, like mail ================= */
.page.solo.wide .ib3 { max-width: 1180px; }
@media (min-width: 900px) { .page.solo.wide:has(.ib3) { grid-template-columns: minmax(0, 1180px); } }
.ib3 { margin: 10px auto 30px; }
.ib3-h { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
.ib3-hi { margin: 0; font: italic 1.05rem var(--voice); color: var(--soft); } .ib3-h h1 { margin: 0; font: 600 2.1rem var(--voice); }
.ib3-new { margin: 0; font-size: .86rem; color: var(--soft); } .ib3-new b { font: 600 1.3rem var(--voice); color: #C2476B; }
.ib3-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1.35fr); min-height: 560px; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid #EFE7EA; box-shadow: 0 24px 50px -36px rgba(42,34,80,.6); }
.ib-rail { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: #FBF7F2; border-right: 1px solid #F1EAE2; }
.ib-rail button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 0 999px 999px 0; background: none; font: 500 .88rem 'Outfit', sans-serif; color: #5C5470; text-align: left; cursor: pointer; }
.ib-rail button span { width: 18px; text-align: center; color: #A07A12; }
.ib-rail button i { margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 700; color: var(--ink-t); }
.ib-rail button.on { background: #F6E3EA; color: #3A2440; font-weight: 600; } .ib-rail button.on span { color: #C2476B; }
.ib-rail button:hover:not(.on) { background: #F4EEE8; }
.ib3-list { border-right: 1px solid #F1EAE2; overflow-y: auto; max-height: 720px; }
.ibm { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 12px 10px; border-bottom: 1px solid #F5F0EC; cursor: pointer; transition: background .15s; }
.ibm:hover { background: #FCF8F4; box-shadow: inset 0 -1px 0 #EFE7EA, 0 2px 6px -4px rgba(42,34,80,.25); }
.ibm.sel { background: #FBEFF3; }
.ibm.unread::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #C2476B; }
.ibm-star { flex: none; margin-top: 10px; border: 0; background: none; font-size: 1rem; color: #D8CFC4; cursor: pointer; padding: 0 2px; }
.ibm-star.on { color: #E0A91C; } .ibm-star:hover { color: #E0A91C; }
.ibm-pic { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.ibm-pic img { width: 100%; height: 100%; object-fit: cover; } .ibm-pic .adv-ava, .ibm-pic .ib-ic { width: 38px; height: 38px; font-size: .95rem; }
.ibm-b { flex: 1; min-width: 0; }
.ibm-top { display: flex; justify-content: space-between; gap: 8px; }
.ibm-top b { font: 500 .84rem 'Outfit', sans-serif; color: #5C5470; } .ibm-top em { font-style: normal; font-size: .72rem; color: var(--soft); white-space: nowrap; }
.ibm-s { display: block; font: 500 .98rem/1.3 var(--voice); color: var(--ink-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibm-p { display: block; font-size: .78rem; color: #8C849C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibm.unread .ibm-top b { font-weight: 700; color: var(--ink-t); } .ibm.unread .ibm-s { font-weight: 700; } .ibm.unread .ibm-top em { color: #C2476B; font-weight: 600; }
.ib-empty { padding: 30px 20px; text-align: center; font: italic 1rem var(--voice); color: var(--soft); }
.ib3-pane { overflow-y: auto; max-height: 720px; background: #FFFDF9; }
.ibr-empty { height: 100%; min-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--soft); }
.ibr-empty span { font-size: 2.4rem; color: #E3CFA0; } .ibr-empty p { margin: 8px 0 2px; font: 600 1.2rem var(--voice); color: var(--ink-t); } .ibr-empty small { font-size: .8rem; }
.ibr-back { display: none; }
.ibr-paper { padding: 28px 32px 30px; font: 1.1rem/1.7 var(--voice); color: var(--ink-t); }
.ibr-paper h2 { margin: 4px 0 14px; font: 600 1.6rem/1.2 var(--voice); } .ibr-date { margin: 0; font: italic .92rem var(--voice); color: var(--soft); }
.ibr-paper .btn { display: inline-flex; width: auto; margin-top: 10px; }
.ibr-note { padding: 26px 28px; }
.ibr-from { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #F1EAE2; }
.ibr-from .adv-ava, .ibr-from .ib-ic { width: 46px; height: 46px; font-size: 1.1rem; } .ibr-from b { display: block; font: 600 1.15rem var(--voice); } .ibr-from small { font-size: .78rem; color: var(--soft); }
.ibr-text { margin: 0 0 18px; font: 1.15rem/1.7 var(--voice); color: var(--ink-t); }
.ibr-note .btn { display: inline-flex; width: auto; } .ibr-fine { margin: 8px 0 0; font-size: .78rem; color: #8A6A14; }
@media (max-width: 899px) {
  .ib3-grid { grid-template-columns: 1fr; min-height: 0; }
  .ib-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #F1EAE2; padding: 8px; scrollbar-width: none; }
  .ib-rail button { flex: none; border-radius: 999px; padding: 7px 12px; white-space: nowrap; }
  .ib3-list { border-right: 0; max-height: none; }
  .ib3-pane { display: none; max-height: none; }
  .ib3-grid.reading .ib3-list, .ib3-grid.reading .ib-rail { display: none; }
  .ib3-grid.reading .ib3-pane { display: block; }
  .ibr-back { display: block; margin: 12px 0 0 14px; border: 0; background: none; font: 600 .86rem 'Outfit', sans-serif; color: #C2476B; cursor: pointer; }
  .ibr-paper, .ibr-note { padding: 18px 18px 22px; }
}
/* Inbox, quieter: like real mail */
.ib3-h { align-items: baseline; margin-bottom: 10px; } .ib3-h h1 { font-size: 1.8rem; }
.ib3-new { font-size: .84rem; color: var(--soft); }
.ib3-grid { grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.4fr); border-color: #ECE4DC; box-shadow: 0 16px 40px -34px rgba(42,34,80,.5); }
.ib-rail { background: #FAF6F1; padding: 14px 8px; }
.ib-rail button { padding: 8px 14px; font-size: .88rem; color: #5C5470; border-radius: 10px; }
.ib-rail button.on { background: #EFE7DE; color: var(--ink-t); }
.ib-rail button i { font-weight: 600; color: var(--soft); }
.ib-rail button.on i { color: var(--ink-t); }
.ibm { padding: 12px 16px 12px 14px; gap: 12px; }
.ibm.unread::before { display: none; }
.ibm.sel { background: #F6EFE7; }
.ibm-star { position: absolute; right: 12px; bottom: 10px; margin: 0; opacity: 0; transition: opacity .15s; }
.ibm:hover .ibm-star, .ibm-star.on { opacity: 1; }
.ibm-pic { width: 36px; height: 36px; } .ibm-pic .adv-ava { width: 36px; height: 36px; font-size: .85rem; }
.ib-mono { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #EFE7DE; color: #6B5A33; font: 600 1rem var(--voice); }
.ib-mono.lg { width: 46px; height: 46px; font-size: 1.2rem; }
.ibm-top b { font-weight: 500; color: #5C5470; } .ibm-top em { color: #9A93A8 !important; font-weight: 400 !important; }
.ibm-s { font-weight: 400; }
.ibm.unread .ibm-top b, .ibm.unread .ibm-s { font-weight: 700; color: var(--ink-t); }
.ibm.unread .ibm-top b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: #C2476B; }
.ib3-pane { background: #fff; }
.ibr-paper { background: #FFFDF8; min-height: 100%; }
.ibr-subj { margin: 0 0 10px; font: 600 1.4rem/1.25 var(--voice); color: var(--ink-t); }
.ibr-sig { margin: -6px 0 18px; font: italic 1.1rem var(--voice); color: #6B5A33; }
.ibr-note .btn, .ibr-paper .btn { background: #1C2040; color: #F3DDA0; }
@media (max-width: 899px) { .ib-rail button { background: #fff; border: 1px solid #ECE4DC; border-radius: 999px; } .ib-rail button.on { background: #1C2040; color: #F3DDA0; border-color: #1C2040; } .ib-rail button.on i { color: #F3DDA0; } }
.ib-drop { display: none; }
@media (max-width: 899px) {
  .ib-rail { display: none !important; }
  .ib3-h { align-items: center; gap: 10px; } .ib3-h h1 { flex: none; }
  .ib-drop { display: block; position: relative; margin-right: auto; }
  .ib-drop select { -webkit-appearance: none; appearance: none; padding: 6px 30px 6px 12px; border-radius: 999px; border: 1px solid #E3D8CC; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E6680' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") right 12px center no-repeat; font: 600 .84rem 'Outfit', sans-serif; color: var(--ink-t); }
}
@media (max-width: 899px) {
  .ib3-grid { grid-template-columns: 1fr !important; }
  .ib3-grid.reading .ib3-list { display: none; }
  .ib3-list { max-height: none; }
}
.a3-convs { display: grid; gap: 6px; margin-bottom: 8px; }
.a3-ch { margin: 0 0 4px 2px; font: 600 1.1rem var(--voice); color: var(--ink-t); }
.a3-cont { position: relative; }
.a3-cont small { display: flex !important; justify-content: space-between; gap: 8px; color: var(--ink-t) !important; font-weight: 600 !important; }
.a3-cont small em { font-style: normal; font-weight: 400; color: var(--soft); }
.a3-cont span { font-style: normal !important; font-size: .86rem !important; color: #6E6680 !important; font-family: 'Outfit', sans-serif !important; }
.a3-cont.new span { color: var(--ink-t) !important; font-weight: 500; }
.a3-dot { position: absolute; right: 14px; bottom: 16px; width: 8px; height: 8px; border-radius: 50%; background: #C2476B; }
#side .nx-man2 { margin-top: 12px; }
/* Garden petals: every petal visible; a small tag says found or not */
button.gd-p { position: relative; padding-top: 26px; }
.gd-tag { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; font: 600 .62rem 'Outfit', sans-serif; background: #F1ECE6; color: #8C849C; }
.gd-tag.got { background: rgba(31,138,76,.1); color: #1F6B3E; }
.gd-p:not(.got) { opacity: 1 !important; }
.gd-p:not(.got) .petal-dot { opacity: .35; filter: grayscale(.4); }
.gd-p:not(.got) b { color: #8C849C !important; }
.gd-p.rare:not(.got) .gd-tag { background: rgba(243,201,74,.16); color: #A07A12; }
.cs-notes { display: grid; gap: 6px; margin-bottom: 14px; }
.cs-nh { margin: 0 0 2px 2px; font: 600 1rem var(--voice); color: var(--ink-t); }
.cs-notes .cs-note { margin: 0; } .cs-notes .cs-note span { font: italic .88rem/1.35 var(--voice); color: #6E6680; }
.cs-notes .cs-note span b { font: 600 .95rem var(--voice); font-style: normal; color: var(--ink-t); }
.ts { margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #EFE7EA; }
.ts-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ts-top b { font: 600 1rem var(--voice); color: var(--ink-t); } .ts-top small { font-size: .72rem; color: #1F8A4C; }
.ts-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 0 8px; }
.ts-dots i { height: 8px; border-radius: 999px; background: #F1EAE2; font-style: normal; }
.ts-dots i.on { background: linear-gradient(90deg, #7FB08E, #1F8A4C); }
.ts-dots i.gift { height: 18px; margin-top: -5px; border-radius: 50%; display: grid; place-items: center; font-size: .6rem; color: #A07A12; background: #FFF4D8; border: 1px solid #EAD9AE; }
.ts-dots i.gift.on { background: linear-gradient(135deg, #F3DDA0, #C9A032); color: #1C2040; }
.ts-f { margin: 0; font-size: .74rem; color: var(--soft); }
.ts-dots { align-items: center; }
.ts-dots i.gift { width: 18px; height: 18px; margin: 0 auto; }
/* Talk streak v2 */
.ts, .ts-dots { display: none; }
.ts2 { margin: 0 0 14px; padding: 16px 16px 14px; border-radius: 18px; color: #F6EFE4;
  background: radial-gradient(120% 90% at 100% 0%, #3A3470 0%, #232650 55%, #1C2040 100%); box-shadow: 0 10px 26px -18px #1C2040; }
.ts2-h { display: flex; align-items: center; gap: 12px; }
.ts2-f { font: 600 2.1rem/1 var(--voice); color: #F3DDA0; min-width: 1.2em; text-align: center; }
.ts2-h b { display: block; font: 600 1.05rem var(--voice); color: #fff; }
.ts2-h em { font: italic .82rem var(--voice); color: #CFC6E6; }
.ts2 ol { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ts2 li { display: grid; justify-items: center; gap: 5px; }
.ts2 li i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .75rem;
  border: 1.5px dashed rgba(243,221,160,.35); color: #F3DDA0; }
.ts2 li.on i { border: 0; background: linear-gradient(135deg, #F3DDA0, #C9A032); color: #1C2040; }
.ts2 li.now i { box-shadow: 0 0 0 3px rgba(243,221,160,.25); }
.ts2 li.now:not(.on) i { border-style: solid; }
.ts2 li.g i { width: 34px; height: 34px; margin-top: -3px; border: 1.5px solid #F3DDA0; background: rgba(243,221,160,.12); font-size: .95rem; }
.ts2 li.g.on i { background: linear-gradient(135deg, #FFE9B0, #C9A032); font-size: .7rem; font-weight: 700; }
.ts2 li small { font-size: .62rem; color: #B9B1D3; }
.ts2 li.now small { color: #F3DDA0; font-weight: 600; }
.ts2 p { margin: 0; font-size: .8rem; line-height: 1.4; color: #DCD5EE; }
.ts2-open { width: 100%; }
/* Advisor chat streak v3: light card, gold days, cream footer */
.ts2 { display: none; }
.ts3 { margin: 0 0 14px; border-radius: 18px; background: #fff; border: 1px solid #EFE3D2; overflow: hidden; box-shadow: 0 8px 22px -18px rgba(90,60,20,.5); }
.ts3-h { display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 0; }
.ts3-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; background: #FFF4D8; border: 1px solid #EAD9AE; }
.ts3-h b { display: block; font: 600 1.12rem/1.2 var(--voice); color: var(--ink-t); }
.ts3-h p { margin: 3px 0 0; font-size: .8rem; line-height: 1.4; color: #6E6680; }
.ts3-h p em { font-style: normal; font-weight: 700; color: #A07A12; white-space: nowrap; }
.ts3 ol { list-style: none; margin: 0; padding: 14px 14px 12px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ts3 li { display: grid; justify-items: center; gap: 5px; }
.ts3 li i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .72rem; color: #fff; background: #FAF5EE; border: 1.5px solid #EDE2D3; }
.ts3 li.on i { border-color: transparent; background: linear-gradient(135deg, #F0CF7A, #C9A032); }
.ts3 li.now i { border-color: #C9A032; box-shadow: 0 0 0 3px #FFF1CC; }
.ts3 li.g i { width: 32px; height: 32px; margin-top: -2px; font-size: .95rem; background: #FFF4D8; border-color: #E4CD8E; }
.ts3 li.g.on i { background: linear-gradient(135deg, #F0CF7A, #C9A032); color: #fff; }
.ts3 li small { font-size: .62rem; color: #A69CB4; }
.ts3 li.now small { color: #A07A12; font-weight: 700; }
.ts3-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: #FBF6EC; border-top: 1px solid #F1E7D6; font-size: .78rem; }
.ts3-f b { font-weight: 700; color: var(--ink-t); white-space: nowrap; }
.ts3-f span { color: #8A7F95; text-align: right; } .ts3-f span.ok { color: #1F8A4C; font-weight: 600; }
.ts3-open { display: block; width: calc(100% - 28px); margin: 0 14px 14px; }
.ts3-ic { color: #A07A12; font-size: 1rem; }
.ts3 li.g.now:not(.on) i { animation: ts3pulse 2.4s ease-in-out infinite; }
@keyframes ts3pulse { 50% { box-shadow: 0 0 0 6px #FFF1CC; } }
@media (prefers-reduced-motion: reduce) { .ts3 li.g i { animation: none !important; } }
.ts3-n { display: flex; align-items: center; gap: 10px; margin: 0 14px 12px; padding: 10px 10px 10px 12px; border-radius: 14px; background: #F4FAF5; border: 1px solid #D6EBDC; text-decoration: none; color: inherit; }
.ts3-n .adv-av, .ts3-n img, .ts3-n > span:first-child { flex: none; }
.ts3-n > span:not(:first-child), .ts3-n span:has(b) { flex: 1; min-width: 0; display: grid; }
.ts3-n b { font: 600 .95rem/1.2 var(--voice); color: var(--ink-t); }
.ts3-n small { font-size: .74rem; color: #6E6680; }
.ts3-n em.btn { flex: none; font-style: normal; padding: 7px 12px; font-size: .78rem; white-space: nowrap; }
.ts3-n > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ts3-n > :first-child { flex: none; }
.ts3 .ts3-n em.btn { flex: none; width: auto; min-width: 0; margin: 0; display: inline-flex; padding: 8px 14px; font-size: .8rem; }
/* ============ Your Stars */
.ysky { position: relative; margin: 6px 0 18px; padding: 28px 26px 24px; border-radius: 24px; overflow: hidden; color: #F6EFE4;
  background: radial-gradient(90% 120% at 90% 0%, #4A3F7A 0%, #2A2C5C 45%, #1C2040 100%); }
.ysky::before { content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background-image: radial-gradient(1.2px 1.2px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 34% 70%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 58% 18%, #F3DDA0 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 58%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 88% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 88%, #F3DDA0 50%, transparent 51%), radial-gradient(1px 1px at 66% 86%, #fff 50%, transparent 51%); }
.ysky-in { position: relative; max-width: 62ch; }
.ysky-k { margin: 0 0 6px; font-size: .8rem; color: #CFC6E6; }
.ysky h1 { margin: 0 0 10px; font: 600 clamp(2rem, 4vw, 2.6rem)/1.05 var(--voice); color: #fff; }
.ysky-h { margin: 0 0 14px; font: 400 1.14rem/1.5 var(--voice); color: #F6EFE4; }
.ysky-t { margin: 0; padding-top: 12px; border-top: 1px solid rgba(243,221,160,.22); font-size: .86rem; color: #DCD5EE; }
.ysky-t b { color: #F3DDA0; margin-right: 4px; } .ysky-t span { color: #B9B1D3; }
.st-tabs { margin: 0 0 20px; }
.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.st-two > section { margin: 0; }
@media (max-width: 760px) { .st-two { grid-template-columns: 1fr; } .ysky { padding: 22px 18px 18px; } }
.st-letter { display: flex; align-items: center; gap: 14px; margin: 18px 0 8px; padding: 16px 18px; border-radius: 18px; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, #FFF8EA, #FDEFE6); border: 1px solid #EFDDC0; }
.st-seal { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.1rem; background: radial-gradient(circle at 35% 30%, #D8736E, #9E2F3A); box-shadow: 0 4px 10px -4px #9E2F3A; }
.st-letter > span:last-child { display: grid; gap: 2px; }
.st-letter small { font-size: .74rem; color: #A07A12; font-weight: 600; }
.st-letter b { font: 600 1.15rem/1.25 var(--voice); color: var(--ink-t); }
.st-letter em { font-style: normal; font-size: .8rem; color: #1F8A4C; font-weight: 600; }
/* This Week */
.sw { display: grid; gap: 10px; margin-bottom: 14px; }
.sw-row { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #EFE7EA; }
.sw-row.today { border-color: #E4CD8E; box-shadow: 0 0 0 3px #FFF4D8; }
.sw-row.strong { background: linear-gradient(135deg, #FFFBF1, #fff); }
.sw-d b { display: block; font: 600 1.05rem var(--voice); color: var(--ink-t); } .sw-d small { font-size: .74rem; color: var(--soft); }
.sw-b h3 { margin: 0 0 4px; font: 600 1.08rem/1.3 var(--voice); color: var(--ink-t); }
.sw-b p { margin: 0; font-size: .86rem; line-height: 1.5; color: #6E6680; }
.sw-b .lt-w { margin-top: 8px; }
.sw-star { display: inline-block; margin-bottom: 4px; font-size: .72rem; font-weight: 700; color: #A07A12; }
.sw-row.lk h3 { color: #A69CB4; } .sw-lock { font-size: .8rem; color: #1F8A4C; font-weight: 600; text-decoration: none; }
@media (max-width: 600px) { .sw-row { grid-template-columns: 1fr; gap: 6px; } .sw-d { display: flex; gap: 8px; align-items: baseline; } }
.st-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 760px) { .st-two { grid-template-columns: minmax(0, 1fr); } }
.st-two > *, .sw-row > * { min-width: 0; }
/* Your Stars side: strong days */
.ssd { margin: 0 0 14px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid #EFE7EA; }
.ssd-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ssd-top b { font: 600 1.05rem var(--voice); color: var(--ink-t); } .ssd-top a { font-size: .78rem; font-weight: 600; color: #1F8A4C; text-decoration: none; }
.ssd-r { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid #F3ECEE; text-decoration: none; color: inherit; }
.ssd-d { flex: none; width: 42px; height: 46px; border-radius: 12px; display: grid; place-content: center; text-align: center; background: #FFF4D8; border: 1px solid #EAD9AE; }
.ssd-d b { font: 600 1.15rem/1 var(--voice); color: #7A5A0C; } .ssd-d small { font-size: .62rem; color: #A07A12; }
.ssd-r > span:last-child { display: grid; gap: 1px; min-width: 0; }
.ssd-r small { font-size: .72rem; color: #A07A12; font-weight: 600; } .ssd-r em { font: 600 .95rem/1.3 var(--voice); font-style: normal; color: var(--ink-t); }
.ssd-r.lk em { color: #A69CB4; } .ssd-r.lk .ssd-d { background: #F6F1EC; border-color: #EAE2D8; } .ssd-r.lk .ssd-d b { color: #A69CB4; }
.ssd-more { display: block; margin-top: 8px; font-size: .78rem; font-weight: 600; color: #1F8A4C; text-decoration: none; }
/* Your Stars › Love Lessons */
.st-read { display: grid; gap: 4px; margin: 0 0 16px; padding: 18px 20px; border-radius: 18px; text-decoration: none; color: inherit; background: linear-gradient(135deg, #FFF8EA, #FDEFE6); border: 1px solid #EFDDC0; }
.st-read small { font-size: .74rem; font-weight: 600; color: #A07A12; }
.st-read b { font: 600 1.35rem/1.2 var(--voice); color: var(--ink-t); }
.st-read span { font-size: .9rem; line-height: 1.5; color: #6E6680; }
.st-read em { font-style: normal; font-size: .82rem; font-weight: 600; color: #1F8A4C; margin-top: 4px; }
/* The Store */
.shop-h { margin: 6px 0 16px; }
.shop-h h1 { margin: 0 0 4px; font: 600 clamp(2rem, 4vw, 2.5rem)/1.1 var(--voice); color: var(--ink-t); }
.shop-h p { margin: 0; color: #6E6680; }
.ssd-d:not(:has(b)) { color: #A07A12; font-size: .95rem; }
.pg-box { margin-top: 20px; }
/* ===== Your Stars, the Co-Star way */
.ysky h1.ga-line { font: 500 clamp(1.9rem, 3.6vw, 2.5rem)/1.12 var(--voice); margin: 4px 0 16px; letter-spacing: -.01em; }
.ga-rates { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ga-r { display: grid; gap: 1px; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); min-width: 92px; }
.ga-r small { font-size: .7rem; color: #B9B1D3; } .ga-r b { font: 600 1rem var(--voice); }
.ga-power b { color: #9FE0B4; } .ga-pressure b { color: #F3DDA0; } .ga-trouble b { color: #F4A6BC; }
.ga-why summary { cursor: pointer; list-style: none; display: inline-block; font-size: .82rem; font-weight: 600; color: #F3DDA0; }
.ga-why summary::-webkit-details-marker { display: none; } .ga-why summary::after { content: " ⌄"; }
.ga-why[open] summary::after { content: " ⌃"; }
.ga-why > div { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(243,221,160,.22); }
.ga-why p { margin: 0 0 10px; font-size: .88rem; line-height: 1.5; color: #DCD5EE; } .ga-why p b { display: block; color: #fff; font-weight: 600; }
.ga-why .ga-h { font: italic 1rem/1.5 var(--voice); color: #CFC6E6; margin: 0; }
.skyl, .spp, .ask-st, .chart { margin: 0 0 16px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid #EFE7EA; }
.skyl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.skyl-top h2, .spp h2 { margin: 0; font: 600 1.25rem var(--voice); color: var(--ink-t); }
.skyl-top span { font-size: .76rem; color: var(--soft); } .skyl-top a { font-size: .78rem; font-weight: 600; color: #1F8A4C; text-decoration: none; }
.skyl-tr { display: grid; gap: 8px; margin-bottom: 12px; }
.skyl-tr > div { padding: 10px 12px; border-radius: 12px; border-left: 3px solid #7FB08E; background: #F6FBF7; }
.skyl-tr > div.hard { border-left-color: #D4839A; background: #FDF5F7; }
.skyl-tr b { display: block; font: 600 .98rem var(--voice); color: var(--ink-t); } .skyl-tr p { margin: 2px 0 0; font-size: .84rem; line-height: 1.45; color: #6E6680; }
.skyl ul { list-style: none; margin: 0; padding: 0; }
.skyl li, .ch-r summary { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid #F3ECEE; }
.sky-g { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; color: #A07A12; background: #FFF4D8; border: 1px solid #EAD9AE; }
.skyl li b, .ch-r b { font: 600 1rem var(--voice); color: var(--ink-t); } .skyl li small { display: block; font-size: .72rem; color: #A07A12; font-weight: 600; }
.skyl li p, .ch-r summary p { margin: 2px 0 0; font-size: .85rem; line-height: 1.45; color: #6E6680; }
.sky-rx { font-style: normal; font-family: var(--sans); font-size: .66rem; font-weight: 700; color: #B03A5B; background: #FDECF1; padding: 1px 6px; border-radius: 99px; vertical-align: middle; }
.spp-r { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #F3ECEE; text-decoration: none; color: inherit; }
.spp-r > div { flex: 1; min-width: 0; } .spp-r b { font: 600 1rem var(--voice); color: var(--ink-t); } .spp-r b span { font: 600 .74rem var(--sans); color: #A07A12; margin-left: 6px; }
.spp-r p { margin: 2px 0 0; font-size: .85rem; color: #6E6680; } .spp-r em { font-style: normal; color: var(--soft); }
.spp-add { display: block; margin-top: 8px; font-weight: 600; color: #1F8A4C; text-decoration: none; }
.as-f { display: flex; gap: 8px; }
.as-f input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 999px; border: 1px solid #E6DCE0; font: 400 1rem var(--voice); background: #FFFCF8; }
.as-f .btn { width: auto; padding: 10px 22px; font-size: .92rem; }
.as-q { margin: 0 0 6px; font: italic 1rem var(--voice); color: #6E6680; } .as-a { margin: 0; font: 600 1.3rem/1.3 var(--voice); color: var(--ink-t); }
.as-more { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #F3ECEE; text-decoration: none; color: #6E6680; font-size: .84rem; }
.as-more b { color: #1F8A4C; }
.chart-l { margin: 0 0 6px; font: italic .95rem var(--voice); color: #6E6680; }
.ch-r summary { cursor: pointer; list-style: none; } .ch-r summary::-webkit-details-marker { display: none; }
.ch-r summary > div { flex: 1; } .ch-r summary em { font-style: normal; color: var(--soft); transition: transform .2s; } .ch-r[open] summary em { transform: rotate(180deg); }
.ch-more { padding: 0 0 12px 46px; } .ch-more p { margin: 0 0 6px; font-size: .86rem; line-height: 1.5; color: #6E6680; }
/* sparser week */
details.sw-row { display: block; padding: 0; }
details.sw-row summary { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; cursor: pointer; list-style: none; }
details.sw-row summary::-webkit-details-marker { display: none; }
details.sw-row .sw-b h3 { margin: 0; } .sw-c { font-style: normal; color: var(--soft); transition: transform .2s; } details[open] .sw-c { transform: rotate(180deg); }
.sw-x { padding: 0 18px 14px calc(110px + 34px); } .sw-x p { margin: 0; font-size: .86rem; line-height: 1.5; color: #6E6680; } .sw-x .lt-w { margin-top: 8px; }
@media (max-width: 600px) { details.sw-row summary { grid-template-columns: 1fr auto; gap: 4px 10px; } details.sw-row .sw-b { grid-column: 1; } details.sw-row .sw-c { grid-row: 1 / span 2; grid-column: 2; } .sw-x { padding-left: 18px; } .ch-more { padding-left: 0; } }
/* ===== Your Stars v3: lean hero with today's letter, tiles for tabs, letters row */
.ysky2 { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 22px; align-items: stretch; padding: 22px 22px 20px 26px; }
.ysky2 h1.ga-line { font-size: clamp(1.6rem, 2.8vw, 2.05rem); margin: 2px 0 12px; }
.ga-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ga-p { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .78rem; color: #CFC6E6; background: rgba(255,255,255,.08); }
.ga-p i { width: 7px; height: 7px; border-radius: 50%; } .ga-p b { font-weight: 700; }
.ga-power i { background: #7FD39B; } .ga-power b { color: #9FE0B4; }
.ga-pressure i { background: #F0CF7A; } .ga-pressure b { color: #F3DDA0; }
.ga-trouble i { background: #F28DAA; } .ga-trouble b { color: #F4A6BC; }
.ysl { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 44px 16px 16px; border-radius: 16px; text-decoration: none; color: var(--ink-t);
  background: linear-gradient(160deg, #FFF9EE, #F8E9D8); box-shadow: 0 14px 30px -18px rgba(0,0,0,.7); transform: rotate(1.2deg); transition: transform .2s; }
.ysl:hover { transform: rotate(0deg) translateY(-2px); }
.ysl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38px; border-radius: 16px 16px 0 0; background: linear-gradient(160deg, #F6E6CF, #EFD9BD); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ysl-seal { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .9rem;
  background: radial-gradient(circle at 35% 30%, #D8736E, #9E2F3A); box-shadow: 0 3px 8px -2px #9E2F3A; }
.ysl small { font-size: .7rem; font-weight: 700; color: #A07A12; } .ysl b { font: 600 1.15rem/1.2 var(--voice); } .ysl em { font-style: normal; font-size: .78rem; font-weight: 700; color: #1F8A4C; }
@media (max-width: 760px) { .ysky2 { grid-template-columns: 1fr; padding: 20px 18px; } .ysl { transform: none; } }
/* tabs as tiles */
.stt { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.stt-t { display: grid; gap: 2px; padding: 12px 12px 11px; border-radius: 16px; background: #fff; border: 1px solid #EFE3D2; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.stt-t:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -16px rgba(90,60,20,.6); }
.stt-i { width: 30px; height: 30px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; color: #A07A12; background: #FFF4D8; border: 1px solid #EAD9AE; }
.stt-t b { font: 600 1.02rem/1.15 var(--voice); color: var(--ink-t); } .stt-t small { font-size: .72rem; line-height: 1.3; color: #8A7F95; }
.stt-t.on { background: linear-gradient(160deg, #FFF8E6, #FFEFD0); border-color: #D9B75A; box-shadow: 0 0 0 2px #F3DDA0; }
.stt-t.on .stt-i { background: linear-gradient(135deg, #F0CF7A, #C9A032); color: #fff; border-color: transparent; }
.stt-t.on small { color: #7A5A0C; font-weight: 600; }
@media (max-width: 760px) { .stt { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; } .stt::-webkit-scrollbar { display: none; } .stt-t { flex: 0 0 128px; } }
/* love messages row */
.lms { margin: 0 0 16px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid #EFE7EA; }
.lm-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; margin: 0 -2px; }
.lm-row::-webkit-scrollbar { display: none; }
.lm { position: relative; flex: 0 0 150px; display: flex; flex-direction: column; gap: 3px; padding: 34px 12px 12px; border-radius: 14px; text-decoration: none; color: var(--ink-t);
  background: linear-gradient(160deg, #FFFBF3, #FBEFE2); border: 1px solid #EFDDC0; }
.lm::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; border-radius: 14px 14px 0 0; background: #F6E8D4; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.lm-seal { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--pc, #C9453F); box-shadow: 0 2px 5px -1px rgba(0,0,0,.3); border: 2px solid #fff; }
.lm small { font-size: .68rem; font-weight: 700; color: #A07A12; } .lm b { font: 600 .98rem/1.2 var(--voice); } .lm em { margin-top: auto; padding-top: 4px; font-style: normal; font-size: .72rem; font-weight: 700; color: #1F8A4C; }
.lm.lk { opacity: .75; } .lm.lk b { color: #A69CB4; } .lm.lk em { color: #A07A12; }
/* You and him, empty */
.spp-empty { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, #FFF6F8, #fff); }
.spp-empty h2 { margin: 0 0 3px; } .spp-empty p { margin: 0; font-size: .86rem; line-height: 1.45; color: #6E6680; }
.spp-empty > div:nth-child(2) { flex: 1; min-width: 0; }
.spp-pair { flex: none; display: flex; } .spp-pair span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 600 1.1rem var(--voice); color: #fff; background: linear-gradient(135deg, #E88BA5, #B03A5B); border: 2px solid #fff; }
.spp-pair span + span { margin-left: -12px; background: #F3ECEE; color: #A69CB4; }
.spp-empty .btn { width: auto; flex: none; padding: 10px 20px; font-size: .9rem; }
@media (max-width: 600px) { .spp-empty { flex-wrap: wrap; } .spp-empty .btn { width: 100%; } }
/* ===== Your Stars v4 */
/* numerology card in the hero */
.ynum { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 14px 14px 14px; border-radius: 14px; text-decoration: none; color: #F6EFE4;
  border: 1px solid rgba(243,221,160,.45); background: linear-gradient(180deg, rgba(243,221,160,.10), rgba(243,221,160,.02)); outline: 1px solid rgba(243,221,160,.18); outline-offset: -6px; }
.ynum small { font-size: .68rem; font-weight: 600; color: #CFC6E6; }
.ynum-n { font: 500 3.6rem/1 var(--voice); background: linear-gradient(180deg, #FFE9B0, #C9A032); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 2px 0; }
.ynum b { font: 600 1.05rem var(--voice); color: #fff; } .ynum p { margin: 2px 0 6px; font-size: .78rem; line-height: 1.4; color: #DCD5EE; }
.ynum em { font-style: normal; font-size: .74rem; font-weight: 700; color: #F3DDA0; margin-top: auto; }
.ynum:hover { border-color: #F3DDA0; }
/* today's sky: wheel + lines + strip */
.skyl2 { margin: 0 0 16px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid #EFE7EA; }
.skyl2 .skyl-top h2 { margin: 0; font: 600 1.25rem var(--voice); color: var(--ink-t); }
.sk2 { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: center; }
.swheel { width: 100%; height: auto; }
.swheel .sw-o { fill: #FBF6EE; stroke: #E6D6BC; } .swheel .sw-i { fill: #fff; stroke: #EFE3D2; } .swheel .sw-c { fill: #FBF6EE; stroke: #EFE3D2; }
.swheel .sw-t { stroke: #E6D6BC; stroke-width: 1; }
.swheel .sw-z { font-size: 11px; text-anchor: middle; fill: #B7A78C; font-family: var(--sans); } .swheel .sw-z.me { fill: #A07A12; font-weight: 700; }
.swheel .sw-a { stroke-width: 1.4; } .swheel .sw-a.ok { stroke: #6FA886; } .swheel .sw-a.hard { stroke: #D4839A; stroke-dasharray: 3 2; }
.swheel .sw-pb { fill: #232650; } .swheel .sw-p { fill: #F3DDA0; font-size: 12px; text-anchor: middle; font-family: var(--sans); }
.swheel .sw-nb { fill: #FFF4D8; stroke: #C9A032; } .swheel .sw-n { fill: #7A5A0C; font-size: 10px; text-anchor: middle; font-family: var(--sans); }
.sk-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sk-lines li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.sk-a { font-size: .9rem; color: #A07A12; letter-spacing: .04em; white-space: nowrap; }
.sk-lines b { display: block; font: 600 1rem/1.25 var(--voice); color: var(--ink-t); } .sk-lines p { margin: 2px 0 0; font-size: .85rem; line-height: 1.45; color: #6E6680; }
.sk-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 16px; border-top: 1px solid #F3ECEE; }
.sk-strip > div { padding: 12px 10px 0; display: grid; gap: 2px; } .sk-strip > div + div { border-left: 1px solid #F3ECEE; }
.sk-strip span { font-size: 1rem; color: #A07A12; } .sk-strip b { font: 600 .95rem/1.2 var(--voice); color: var(--ink-t); } .sk-strip small { font-size: .72rem; line-height: 1.35; color: #8A7F95; }
.sk-key { margin: 12px 0 0; font-size: .7rem; color: #A69CB4; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.sk-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: -8px; vertical-align: -1px; }
.sk-key .k1 { background: #232650; } .sk-key .k2 { background: #FFF4D8; border: 1px solid #C9A032; } .sk-key .k3 { height: 2px; border-radius: 0; background: #6FA886; } .sk-key .k4 { height: 0; border-radius: 0; border-top: 2px dashed #D4839A; }
@media (max-width: 600px) { .sk2 { grid-template-columns: 1fr; } .swheel { max-width: 240px; margin: 0 auto; display: block; } .sk-strip { grid-template-columns: 1fr 1fr; } .sk-strip > div:nth-child(3) { border-left: 0; } }
/* today's letter in the row */
.lm-today { border-color: #D9B75A; background: linear-gradient(160deg, #FFF8E6, #FDEBD2); }
.lm-today small { color: #9E2F3A; }
/* read for you */
.rfys { margin: 0 0 16px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid #EFE7EA; }
.rfys .skyl-top h2 { margin: 0; font: 600 1.25rem var(--voice); color: var(--ink-t); }
.rfy-g { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; } .rfy-g.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rfy { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; text-decoration: none; color: inherit; background: #FBF7F2; transition: background .15s; }
.rfy:hover { background: #F6EEE3; }
.rfy small { font-size: .7rem; font-weight: 600; color: #A07A12; } .rfy b { font: 600 1.05rem/1.25 var(--voice); color: var(--ink-t); text-wrap: balance; }
.rfy span { font-size: .8rem; line-height: 1.45; color: #6E6680; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rfy.big { background: linear-gradient(160deg, #2A2C5C, #1C2040); } .rfy.big small { color: #F3DDA0; } .rfy.big b { color: #fff; font-size: 1.2rem; } .rfy.big span { color: #CFC6E6; }
@media (max-width: 760px) { .rfy-g, .rfy-g.g3 { grid-template-columns: 1fr; } }
/* ===== Compatibility polish */
/* locked cards: one button, one quiet link */
.lk-acts { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.lk-acts .btn { width: auto; padding: 11px 22px; font-size: .95rem; }
.lk-alt { font-size: .8rem; font-weight: 600; color: #7A5A0C; text-decoration: none; } .lk-alt:hover { text-decoration: underline; }
/* bond hero */
.bd-hero2 { position: relative; display: flex; align-items: center; gap: 18px; margin: 6px 0 16px; padding: 24px 24px; border-radius: 24px; color: #F6EFE4;
  background: radial-gradient(90% 120% at 90% 0%, #7A3A63 0%, #3A2C5C 50%, #1C2040 100%); }
.bdh-stars { position: absolute; inset: 0; border-radius: inherit; opacity: .5; pointer-events: none;
  background-image: radial-gradient(1.2px 1.2px at 14% 24%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 38% 72%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 62% 20%, #F3DDA0 50%, transparent 51%), radial-gradient(1px 1px at 84% 64%, #fff 50%, transparent 51%); }
.bd-hero2 .bd-pair { position: relative; flex: none; }
.bdh-t { position: relative; flex: 1; min-width: 0; }
.bdh-k { margin: 0 0 2px; font-size: .78rem; color: #CFC6E6; }
.bd-hero2 h1 { margin: 0; font: 600 clamp(2rem, 4vw, 2.6rem)/1.05 var(--voice); color: #fff; }
.bdh-sub { margin: 6px 0 0; font-size: .82rem; color: #F3DDA0; }
.bdh-mood { position: relative; flex: none; display: grid; justify-items: center; gap: 2px; padding: 12px 18px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(243,221,160,.3); }
.bdh-mood small { font-size: .68rem; color: #CFC6E6; } .bdh-mood b { font: 600 1.35rem var(--voice); color: #fff; } .bdh-mood span { color: #F4A6BC; letter-spacing: .12em; }
.bdh-menu { position: absolute; top: 10px; right: 12px; }
.bdh-menu summary { list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #CFC6E6; font-size: 1.1rem; }
.bdh-menu summary::-webkit-details-marker { display: none; } .bdh-menu summary:hover { background: rgba(255,255,255,.1); }
.bdh-menu > div { position: absolute; right: 0; top: 34px; z-index: 5; min-width: 180px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 14px 30px -12px rgba(0,0,0,.4); display: grid; }
.bdh-menu a { padding: 9px 12px; border-radius: 8px; font-size: .86rem; color: var(--ink-t); text-decoration: none; } .bdh-menu a:hover { background: #F7F1EC; } .bdh-menu a.rm { color: #B03A5B; }
@media (max-width: 640px) { .bd-hero2 { flex-wrap: wrap; padding: 20px 18px; } .bdh-t { flex-basis: calc(100% - 110px); } .bdh-mood { width: 100%; grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 10px; } }
.bd-stt { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bd-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 760px) { .bd-shop { grid-template-columns: 1fr; } }
/* side: guides for this bond */
.sad-r { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #F3ECEE; text-decoration: none; color: inherit; }
.sad-r > span:nth-child(2) { flex: 1; display: grid; } .sad-r b { font: 600 .98rem var(--voice); color: var(--ink-t); } .sad-r small { font-size: .74rem; color: #8A7F95; }
.sad-r em { font-style: normal; font-size: .78rem; font-weight: 700; color: #1F8A4C; }
.ssd-d:not(:has(b)) { font-size: .95rem; }
/* main page */
.ob-choices { align-items: stretch; } .ob-c { justify-content: flex-start; } .ob-c em { margin-top: auto !important; padding-top: 10px; color: #1F8A4C !important; }
.ob-prev { opacity: .92; filter: none; } .ob-prev .tcard { position: relative; } .ob-prev .tcard::after { content: "Example"; position: absolute; top: 10px; right: 10px; font-size: .64rem; font-weight: 700; color: #7A5A0C; background: #FFF4D8; padding: 2px 8px; border-radius: 99px; }
.chero.energy h1 { font-size: clamp(1.8rem, 3.4vw, 2.3rem); margin-bottom: 6px; }
.en-sub { margin: 0 0 12px; color: #DCD5EE; font-size: .92rem; }
.en-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.en-pills a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; color: #CFC6E6; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); text-decoration: none; }
.en-pills a i { font-style: normal; color: #F3DDA0; } .en-pills a b { color: #fff; } .en-pills a:hover { background: rgba(255,255,255,.14); }
.tc-line { font: italic 500 .98rem/1.4 var(--voice); color: #5E5670; }
.tcard.add { min-height: 0; align-self: center; padding: 26px 18px; border: 1.5px dashed #E4CD8E; background: linear-gradient(160deg, #FFFBF1, #FFF6E6); }
.tcard.add .tc-plus { background: #FFF4D8; color: #A07A12; border: 1px solid #EAD9AE; }
.ccircle { background: linear-gradient(135deg, #FFFBF3, #FFF4EA) !important; border: 1px solid #EFDDC0 !important; }
.fb-meter { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px auto 0; padding: 10px 16px; width: max-content; max-width: 100%; border-radius: 999px; background: #fff; border: 1px solid #EFE3D2; text-decoration: none; color: inherit; }
.fb-dots { display: flex; gap: 4px; } .fb-dots i { width: 10px; height: 10px; border-radius: 50%; background: #F1EAE2; } .fb-dots i.on { background: linear-gradient(135deg, #F0CF7A, #C9A032); }
.fb-meter > span:last-child { display: grid; font-size: .76rem; color: #7A5A0C; font-weight: 600; } .fb-meter b { font-size: .82rem; color: var(--ink-t); }
/* side */
.lt-more { display: block; margin-top: 10px; font-size: .8rem; font-weight: 600; color: #1F8A4C; text-decoration: none; }
.scircle2 { margin: 0 0 14px; padding: 16px; border-radius: 18px; background: linear-gradient(160deg, #FFF8EC, #FDEEF1); border: 1px solid #EFDDC0; }
.sc2-top { display: flex; gap: 12px; align-items: flex-start; }
.sc2-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #E88BA5, #B03A5B); }
.sc2-top b { display: block; font: 600 1.1rem var(--voice); color: var(--ink-t); } .sc2-top p { margin: 2px 0 0; font-size: .8rem; line-height: 1.4; color: #6E6680; }
.sc2-steps { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.sc2-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 13px; height: 2px; background: #EFDDC0; }
.sc2-steps li { position: relative; display: grid; justify-items: center; gap: 4px; }
.sc2-steps i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .75rem; font-weight: 700; color: #A07A12; background: #fff; border: 1.5px solid #E4CD8E; }
.sc2-steps li.ok i { background: linear-gradient(135deg, #F0CF7A, #C9A032); color: #fff; border-color: transparent; } .sc2-steps li.nx i { box-shadow: 0 0 0 3px #FFF1CC; }
.sc2-steps small { font-size: .66rem; color: #8A7F95; }
.scircle2 .scc-more summary { font-size: .78rem; font-weight: 600; color: #7A5A0C; cursor: pointer; margin: 6px 0 10px; }
.scircle2 .btn { width: 100%; }
@media (min-width: 641px) { .bd-hero2 { padding-right: 52px; } }
/* ===== Your Stars: her sign first, birth details, her numbers */
.sk-sign { margin: 0 0 4px; font: 400 1.05rem/1.5 var(--voice); color: var(--ink-t); } .sk-sign b { font-weight: 600; }
.sk-for { margin: 12px 0 10px; font-size: .74rem; font-weight: 700; color: #A07A12; }
.bt-nudge { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #FBF7F2; text-decoration: none; color: inherit; }
.bt-nudge > span:first-child { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #F3DDA0; background: #232650; }
.bt-nudge > span:nth-child(2) { flex: 1; display: grid; font-size: .8rem; color: #6E6680; } .bt-nudge b { font: 600 .98rem var(--voice); color: var(--ink-t); }
.bt-nudge em { font-style: normal; color: #1F8A4C; font-weight: 700; }
.bt-card { margin: 4px 0 10px; padding: 16px; border-radius: 16px; background: linear-gradient(160deg, #FFF8EA, #FDF0E6); border: 1px solid #EFDDC0; }
.bt-h { display: flex; gap: 12px; } .bt-h b { font: 600 1.1rem var(--voice); color: var(--ink-t); } .bt-h p { margin: 2px 0 0; font-size: .84rem; line-height: 1.45; color: #6E6680; }
.bt-f { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: end; margin-top: 12px; }
.bt-f label { display: grid; gap: 4px; font-size: .74rem; font-weight: 600; color: #7A5A0C; }
.bt-f input { padding: 10px 12px; border-radius: 10px; border: 1px solid #E6D6BC; background: #fff; font: 400 .95rem var(--sans); min-width: 0; }
.bt-f .btn { width: auto; padding: 11px 18px; font-size: .9rem; }
.bt-no { margin-top: 10px; font-size: .8rem; background: none; border: 0; padding: 0; cursor: pointer; color: #6E6680; text-decoration: underline; }
.bt-have { margin: 4px 0 8px; padding: 10px 12px; border-radius: 12px; background: #F6FBF7; font-size: .84rem; color: #4F6B58; }
.bt-have .link { background: none; border: 0; padding: 0; cursor: pointer; font-size: .84rem; }
@media (max-width: 640px) { .bt-f { grid-template-columns: 1fr; } .bt-f .btn { width: 100%; } }
.chart.nums { display: grid; gap: 0; }
.nm { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid #F3ECEE; }
.nm-n { flex: none; min-width: 46px; height: 46px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; font: 600 1.5rem var(--voice); color: #7A5A0C; background: #FFF4D8; border: 1px solid #EAD9AE; }
.nm small { font-size: .72rem; font-weight: 700; color: #A07A12; } .nm p { margin: 1px 0 0; font-size: .88rem; line-height: 1.45; color: var(--ink-t); }
.nm-angel .nm-n { font-size: 1.05rem; background: linear-gradient(135deg, #2A2C5C, #1C2040); color: #F3DDA0; border: 0; }
.chart.nums > .link { margin-top: 10px; }
.ynum-y { font-size: .68rem !important; color: #F3DDA0 !important; margin-bottom: 4px; }
.ynums { margin: 0 0 16px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid #EFE7EA; }
.ynums .skyl-top h2 { margin: 0; font: 600 1.25rem var(--voice); color: var(--ink-t); }
.ynums > .link { display: inline-block; margin-top: 10px; color: #1F8A4C; font-weight: 600; }
/* ===== Your Stars, simple */
.ys-h1 { margin: 6px 0 14px; font: 600 clamp(1.9rem, 3.4vw, 2.4rem)/1.1 var(--voice); color: var(--ink-t); }
.ys-sign { margin: 0; font-size: .92rem; line-height: 1.5; color: #DCD5EE; max-width: 52ch; } .ys-sign b { color: #F3DDA0; font-weight: 600; }
.ynums2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.yn { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #EFE3D2; text-decoration: none; color: inherit; transition: transform .15s; }
.yn:hover { transform: translateY(-2px); }
.yn .nm-n { width: 46px; margin-bottom: 4px; } .yn small { font-size: .72rem; font-weight: 700; color: #A07A12; }
.yn p { margin: 0; font: 500 1rem/1.35 var(--voice); color: var(--ink-t); } .yn em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: .78rem; font-weight: 700; color: #1F8A4C; }
.yn-angel { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(135deg, #2A2C5C, #1C2040); color: #DCD5EE; }
.yn-angel span { flex: none; font: 600 1.3rem var(--voice); color: #F3DDA0; letter-spacing: .06em; } .yn-angel p { margin: 0; font-size: .86rem; } .yn-angel b { color: #fff; }
.ys-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .ynums2 { grid-template-columns: 1fr; } .ys-shop { grid-template-columns: 1fr; } }
.nm-n, .ynum-n, .yn-angel span, .ssd-d b { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.yn-angel span { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; }
@media (max-width: 760px) {
  .ynums2 { gap: 8px; }
  .yn { display: grid; grid-template-columns: 46px 1fr auto; column-gap: 12px; row-gap: 0; align-items: center; padding: 12px 14px; }
  .yn .nm-n { grid-row: 1 / span 2; margin: 0; } .yn small { grid-column: 2; } .yn p { grid-column: 2; font-size: .95rem; } .yn em { grid-column: 3; grid-row: 1 / span 2; padding: 0; }
  .ysky2 .ynum { flex-direction: row; justify-content: center; gap: 10px; padding: 10px 14px; } .ysky2 .ynum .ynum-n { font-size: 2.4rem; } .ysky2 .ynum small:first-child { display: none; }
}
/* Your Stars: numbers explained, articles */
.rfys .ynums2 { margin: 0; }
.yn-what { font-style: normal; font-size: .72rem; color: #A69CB4; margin-bottom: 2px; }
.n9 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.n9-c { display: grid; gap: 4px; padding: 14px; border-radius: 14px; background: #FBF7F2; }
.n9-c b { font: 600 1.05rem var(--voice); color: var(--ink-t); } .n9-c p { margin: 0; font-size: .82rem; line-height: 1.4; color: #6E6680; }
.n9-c small { font-size: .7rem; font-weight: 700; color: #7A5A0C; }
.n9-c.mine { background: linear-gradient(160deg, #FFF8E6, #FFEFD0); box-shadow: inset 0 0 0 1.5px #E4CD8E; }
.nw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; } .nw b { font: 600 1rem var(--voice); color: var(--ink-t); } .nw p { margin: 2px 0 0; font-size: .85rem; line-height: 1.5; color: #6E6680; }
@media (max-width: 640px) { .n9 { grid-template-columns: 1fr 1fr; } .nw { grid-template-columns: 1fr; } }
.af { display: grid; gap: 6px; padding: 22px 22px 20px; border-radius: 16px; text-decoration: none; background: linear-gradient(160deg, #2A2C5C, #1C2040); color: #DCD5EE; }
.af small { font-size: .72rem; font-weight: 700; color: #F3DDA0; } .af b { font: 600 clamp(1.35rem, 2.4vw, 1.6rem)/1.2 var(--voice); color: #fff; text-wrap: balance; }
.af span { font-size: .9rem; line-height: 1.55; max-width: 60ch; } .af em { font-style: normal; font-size: .82rem; font-weight: 700; color: #F3DDA0; margin-top: 4px; }
.art-rows { margin-top: 8px; }
.ar { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 13px 4px; border-top: 1px solid #F3ECEE; text-decoration: none; color: inherit; }
.ar:first-child { border-top: 0; }
.ar-k { font-size: .72rem; font-weight: 700; color: #A07A12; } .ar b { font: 600 1.05rem/1.3 var(--voice); color: var(--ink-t); } .ar em { font-style: normal; font-size: .76rem; color: #8A7F95; white-space: nowrap; }
.ar:hover b { color: #7A5A0C; }
@media (max-width: 640px) { .ar { grid-template-columns: 1fr auto; } .ar-k { grid-column: 1 / -1; } }
.n9-c .nm-n { width: 42px; min-width: 0; height: 42px; justify-self: start; font-size: 1.3rem; }
.yn-angel { text-decoration: none; } .yn-angel p { flex: 1; } .yn-angel em { font-style: normal; font-weight: 700; font-size: .8rem; color: #F3DDA0; }
/* ===== Love Lessons library */
.lib-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.lib-top .ys-h1 { margin-bottom: 2px; } .lib-top .muted { margin: 0; }
.lib-search { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid #E6DCE0; min-width: 260px; flex: 0 1 320px; }
.lib-search span { color: #A69CB4; font-size: 1.1rem; } .lib-search input { border: 0; outline: 0; background: none; padding: 11px 0; font: 400 .95rem var(--sans); width: 100%; }
.lib-search:focus-within { border-color: #C9A032; box-shadow: 0 0 0 3px #FFF1CC; }
.lib-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 14px 0 18px; padding-bottom: 2px; } .lib-chips::-webkit-scrollbar { display: none; }
.lib-chips a { flex: none; padding: 7px 14px; border-radius: 999px; font-size: .84rem; font-weight: 600; color: #6E6680; background: #fff; border: 1px solid #EFE3D2; text-decoration: none; }
.lib-chips a.on { background: var(--ink-t); color: #fff; border-color: var(--ink-t); }
.lib-sec { margin: 0 0 24px; } .lib-sec .skyl-top { margin-bottom: 12px; } .lib-sec .skyl-top a { font-size: .8rem; font-weight: 700; color: #1F8A4C; text-decoration: none; }
.lib-n { font: 600 .8rem var(--sans); color: #A69CB4; vertical-align: middle; margin-left: 6px; }
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lib-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 30%); gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .lib-rail::-webkit-scrollbar { display: none; }
.lcard { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #EFE7EA; text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s; }
.lcard:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -20px rgba(60,30,60,.5); }
.lc-b { display: grid; gap: 4px; padding: 12px 14px 14px; } .lc-b small { font-size: .7rem; font-weight: 700; color: #A07A12; } .lc-b b { font: 600 1.05rem/1.25 var(--voice); color: var(--ink-t); text-wrap: balance; }
.lcard.done .lc-b small { color: #1F8A4C; }
/* drawn covers */
.lc-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(120% 120% at 20% 0%, var(--c1), var(--c2)); }
.lc-art::before { content: ""; position: absolute; inset: 0; opacity: .6; background-image: radial-gradient(1.2px 1.2px at 14% 24%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 42% 76%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 78% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 70%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 62% 44%, #fff 50%, transparent 51%); }
.lc-ring { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gl) 35%, transparent); right: -18%; bottom: -40%; }
.lc-ring.r2 { width: 44%; right: auto; left: -10%; top: -22%; bottom: auto; }
.lc-art b { position: relative; font: 500 clamp(2.6rem, 6vw, 3.6rem)/1 var(--voice); color: var(--gl); font-variant-numeric: lining-nums; text-shadow: 0 4px 20px rgba(0,0,0,.25); }
.lc-long b { font-family: var(--sans); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: .08em; }
.lcard.big { display: grid; grid-template-columns: 1.1fr 1fr; }
.lcard.big .lc-art { aspect-ratio: auto; min-height: 240px; } .lcard.big .lc-art b { font-size: 5rem; }
.lcard.big .lc-b { align-content: center; padding: 24px; } .lcard.big .lc-b b { font-size: 1.6rem; } .lcard.big .lc-b span { font-size: .9rem; line-height: 1.55; color: #6E6680; }
.lib-feat { margin: 0 0 24px; }
.lc-hero { margin: -6px -6px 18px; border-radius: 14px; aspect-ratio: 21 / 8; } .lc-hero b { font-size: 4rem; }
.lib-none { text-align: center; color: #8A7F95; margin: 20px 0; }
@media (max-width: 760px) { .lib-grid { grid-template-columns: 1fr 1fr; } .lcard.big { grid-template-columns: 1fr; } .lcard.big .lc-art { min-height: 170px; } .lib-rail { grid-auto-columns: 70%; } .lib-search { flex: 1 1 100%; min-width: 0; } }
@media (max-width: 460px) { .lib-grid { grid-template-columns: 1fr; } }
.n-num { color: #A07A12; font-weight: 700; }
.sc-num { color: #F3DDA0; font-style: normal; }
/* ===== Your Stars (daily sky) */
.ys3 { grid-template-columns: minmax(0, 1fr) 210px; align-items: center; }
.ys-wheel { position: relative; } .ys-wheel .swheel { filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.ys-acc { margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: .68rem; font-weight: 700; color: #F3DDA0; background: rgba(243,221,160,.12); border: 1px solid rgba(243,221,160,.35); text-decoration: none; white-space: nowrap; }
.ys-acc.on { color: #9FE0B4; border-color: rgba(159,224,181,.4); background: rgba(159,224,181,.1); }
.ys3 .ga-line { margin-bottom: 8px; }
.ys-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .ys-acts .btn { width: auto; padding: 10px 16px; font-size: .86rem; }
@media (max-width: 760px) { .ys3 { grid-template-columns: 1fr; } .ys-wheel { max-width: 220px; margin: 4px auto 0; } .ys-acts .btn { flex: 1 1 100%; } }
.ch2 { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid #F3ECEE; }
.ch2 b { font: 600 1rem var(--voice); color: var(--ink-t); } .ch2 p { margin: 2px 0 0; font-size: .85rem; line-height: 1.45; color: #6E6680; }
.ch-lock { color: #A07A12; font-weight: 600; }
.ch-go { display: block; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #F4FAF5; font-size: .85rem; color: #4F6B58; text-decoration: none; } .ch-go b { color: #1F8A4C; }
/* ===== Your Stars: the daily card */
.ys-flip { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 22px; align-items: center; padding: 26px; }
.ys-deck { margin: 12px 0 0; font-size: .8rem; color: #CFC6E6; } .ys-deck a { color: #F3DDA0; font-weight: 700; text-decoration: none; }
.flipc { perspective: 900px; width: 170px; height: 250px; padding: 0; border: 0; background: none; cursor: pointer; justify-self: center; }
.flipc-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,.7,.3,1); }
.flipc.on .flipc-in { transform: rotateY(180deg); }
.flipc-back, .flipc-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; }
.flipc-front { transform: rotateY(180deg); }
.flipc-back { display: grid; place-content: center; justify-items: center; gap: 10px; color: #F3DDA0; border: 1.5px solid #C9A032; outline: 1px solid rgba(243,221,160,.35); outline-offset: -8px;
  background: radial-gradient(circle at 50% 40%, #3E3478, #1C2040 70%); box-shadow: 0 18px 36px -16px rgba(0,0,0,.7); animation: flipGlow 2.6s ease-in-out infinite; }
.flipc-back i { font-style: normal; font-size: 2.6rem; } .flipc-back b { font: 700 .78rem var(--sans); letter-spacing: .06em; }
@keyframes flipGlow { 50% { box-shadow: 0 18px 36px -16px rgba(0,0,0,.7), 0 0 26px rgba(243,221,160,.35); } }
.flipc:hover .flipc-back { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .flipc-in { transition: none; } .flipc-back { animation: none; } }
.scd { display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%; height: 100%; min-height: 150px; padding: 14px; border-radius: 16px; text-align: center;
  background: linear-gradient(170deg, #FFF9EE, #F6E6CF); border: 1.5px solid #D9B75A; outline: 1px solid rgba(201,160,50,.35); outline-offset: -7px; color: var(--ink-t); }
.scd .scd-m { font-size: 1.6rem; color: #A07A12; } .scd b { font: 600 1.15rem/1.2 var(--voice); } .scd small { font-size: .66rem; font-weight: 700; color: #A07A12; }
.scd.big b { font-size: 1.4rem; }
.scd-trouble { background: linear-gradient(170deg, #FBF0F3, #EFD6DE); border-color: #D4839A; } .scd-trouble .scd-m { color: #B03A5B; }
.scd-pressure { background: linear-gradient(170deg, #F6F3FB, #E4DCF1); border-color: #A99AD0; } .scd-pressure .scd-m { color: #6B5AA6; }
.scd-rare { background: linear-gradient(160deg, #FFE9B0, #C9A032); border-color: #8C6A12; } .scd-rare .scd-m, .scd-rare small { color: #4A3500; }
.scd-back { background: radial-gradient(circle at 50% 40%, #3E3478, #1C2040 70%); border-color: #C9A032; } .scd-back .scd-m { color: #F3DDA0; }
@media (max-width: 640px) { .ys-flip { grid-template-columns: 1fr; text-align: center; } .ys-flip .ysky-in { max-width: none; } }
.ys-card { margin: 0 0 4px; font-size: .8rem; font-weight: 700; color: #F3DDA0; } .ys-card b { margin-left: 4px; padding: 1px 8px; border-radius: 99px; background: #F3DDA0; color: #4A3500; font-size: .66rem; }
.ys-call { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.07); font-size: .88rem; color: #fff; }
.ys-call span { display: block; font-size: .66rem; font-weight: 700; color: #F3DDA0; }
/* yesterday's call */
.scheck { margin: 6px 0 14px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #EFE3D2; text-align: center; }
.sc-k { margin: 0; font-size: .74rem; font-weight: 700; color: #A07A12; } .sc-q { margin: 4px 0 6px; font: italic 500 1.2rem var(--voice); color: var(--ink-t); } .sc-h { margin: 0 0 10px; font-size: .86rem; color: #6E6680; }
.sc-bt { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.sc-bt button { padding: 9px 16px; border-radius: 999px; border: 1px solid #E6DCE0; background: #fff; font: 600 .86rem var(--sans); color: var(--ink-t); cursor: pointer; }
.sc-bt button:first-child { background: #1F8A4C; border-color: #1F8A4C; color: #fff; } .sc-bt button:nth-child(2) { background: #F2C94C; border-color: #F2C94C; color: #3A2E00; }
/* sky event */
.sev { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; padding: 12px 16px; border-radius: 14px; background: #FFF8EA; border: 1px solid #EFDDC0; font-size: .86rem; color: #6E6680; text-decoration: none; }
.sev b { color: var(--ink-t); } .sev em { margin-left: auto; font-style: normal; font-weight: 700; color: #1F8A4C; } .sev span:nth-child(2) { flex: 1; }
.sev.on { background: linear-gradient(135deg, #FFE9B0, #F6D57A); border-color: #D9B75A; color: #4A3500; }
.sev-m { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #FFF4D8; box-shadow: inset 0 0 0 1px #C9A032; } .sev-m.full { background: radial-gradient(circle at 40% 35%, #fff, #F3DDA0); } .sev-m.new { background: #232650; }
/* go deeper */
.sdeep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sdp { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: #FBF7F2; text-decoration: none; color: inherit; transition: background .15s; } .sdp:hover { background: #F6EEE3; }
.sdp small { font-size: .7rem; font-weight: 700; color: #A07A12; } .sdp b { font: 600 1.08rem/1.25 var(--voice); color: var(--ink-t); } .sdp span { font-size: .8rem; line-height: 1.45; color: #6E6680; }
.sdp em { margin-top: auto; padding-top: 6px; font-style: normal; font-weight: 700; color: #1F8A4C; font-size: .86rem; }
@media (max-width: 760px) { .sdeep { grid-template-columns: 1fr; } }
/* the deck */
.sdeck { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.sdk { display: grid; gap: 4px; text-align: center; } .sdk .scd { aspect-ratio: 2 / 3; min-height: 0; } .sdk .scd b { font-size: .95rem; } .sdk > small { font-size: .7rem; color: #8A7F95; }
/* ===== Your Stars, plain and grand */
.ys-flip { position: relative; min-height: 300px; padding: 32px 30px; background: radial-gradient(120% 140% at 85% 10%, #5B4A9E 0%, #2E2A66 38%, #171A3A 100%); }
.ys-flip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .8;
  background-image: radial-gradient(1.4px 1.4px at 8% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 64%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 36% 12%, #F3DDA0 50%, transparent 51%), radial-gradient(1px 1px at 48% 86%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 60% 34%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 76%, #F3DDA0 50%, transparent 51%), radial-gradient(1.3px 1.3px at 92% 50%, #fff 50%, transparent 51%); }
.ys-flip > * { position: relative; z-index: 1; }
.ys-flip h1.ga-line { font-size: clamp(2.1rem, 4vw, 2.9rem); line-height: 1.08; }
.ys-open .ys-sign { font: italic 400 1.15rem var(--voice); color: #F3DDA0; }
.ys-cardwrap { width: 170px; height: 250px; justify-self: center; transform: rotate(3deg); filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.shw { margin: 6px 0 14px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(160deg, #FFF8EA, #FDF0E6); border: 1px solid #EFDDC0; }
.shw h2 { margin: 0; font: 600 1.2rem var(--voice); color: var(--ink-t); } .shw .link { background: none; border: 0; cursor: pointer; font-weight: 700; color: #1F8A4C; }
.shw ol { margin: 10px 0 8px; padding-left: 20px; display: grid; gap: 6px; font-size: .9rem; line-height: 1.45; color: #5E5670; } .shw ol b { color: var(--ink-t); }
.shw > p { margin: 0; font-size: .84rem; font-weight: 600; color: #7A5A0C; }
.smean { margin: 0 0 16px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #EFE3D2; }
.smean h2 { margin: 0 0 14px; font: 600 1.4rem var(--voice); color: var(--ink-t); }
.sm-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sm-rows > div { padding: 14px; border-radius: 14px; background: #FBF7F2; } .sm-rows span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFF4D8; color: #A07A12; margin-bottom: 8px; }
.sm-rows p { margin: 0; font: 600 1.1rem/1.3 var(--voice); color: var(--ink-t); } .sm-rows small { display: block; font: 700 .7rem var(--sans); color: #A07A12; margin-bottom: 2px; }
.sm-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .sm-acts .btn { width: auto; flex: 1 1 220px; font-size: .95rem; padding: 13px 18px; }
@media (max-width: 700px) { .sm-rows { grid-template-columns: 1fr; } }
.swhy { margin: 0 0 16px; border-radius: 18px; background: #fff; border: 1px solid #EFE7EA; }
.swhy summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; } .swhy summary::-webkit-details-marker { display: none; }
.swhy summary span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #232650; color: #F3DDA0; } .swhy summary b { flex: 1; font: 600 1.1rem var(--voice); color: var(--ink-t); }
.swhy summary em { font-style: normal; color: #8A7F95; transition: transform .2s; } .swhy[open] summary em { transform: rotate(180deg); }
.swhy-in { padding: 0 20px 18px; } .swhy-in > p { margin: 0 0 10px; font: 400 1.05rem/1.55 var(--voice); color: var(--ink-t); }
.swhy-w { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; margin: 14px 0; }
.swhy-k { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .84rem; color: #6E6680; } .swhy-k i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.swhy-k .k1 { background: #232650; } .swhy-k .k2 { background: #FFF4D8; border: 1px solid #C9A032; } .swhy-k .k3 { height: 2px; border-radius: 0; background: #6FA886; } .swhy-k .k4 { height: 0; border-radius: 0; border-top: 2px dashed #D4839A; }
.swhy-g { padding: 12px 14px; border-radius: 12px; background: #FBF7F2; font-size: .86rem; color: #5E5670; } .swhy-g > b { display: block; margin-bottom: 2px; color: var(--ink-t); } .swhy-g p { margin: 0; line-height: 1.6; }
@media (max-width: 600px) { .swhy-w { grid-template-columns: 1fr; } .swhy-w .swheel { max-width: 220px; margin: 0 auto; } }
.ch2 small { display: block; font-size: .7rem; font-weight: 700; color: #A69CB4; }
.sc-f { margin: 10px 0 0; font-size: .76rem; color: #8A7F95; }
/* coming up in the sky */
.scal { margin: 0 0 16px; padding: 22px; border-radius: 20px; color: #DCD5EE; background: radial-gradient(120% 120% at 100% 0%, #3A2F6E, #1C2040 70%); }
.scal .skyl-top h2 { margin: 0; font: 600 1.4rem var(--voice); color: #fff; } .scal .skyl-top span { color: #B9B1D3; }
.scal ol { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.scal ol::before { content: ""; position: absolute; left: 86px; top: 10px; bottom: 10px; width: 1px; background: rgba(243,221,160,.25); }
.scal li { position: relative; display: grid; grid-template-columns: 58px 30px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; }
.scal-d { text-align: center; } .scal-d b { display: block; font: 600 1.6rem/1 var(--voice); color: #fff; font-variant-numeric: lining-nums; } .scal-d small { font-size: .7rem; font-weight: 700; color: #F3DDA0; text-transform: uppercase; letter-spacing: .06em; }
.scal-ic { width: 26px; height: 26px; margin-top: 4px; border-radius: 50%; background: #F3DDA0; box-shadow: 0 0 14px rgba(243,221,160,.5); }
.scal-ic.full { background: radial-gradient(circle at 40% 35%, #fff, #F3DDA0); } .scal-ic.new { background: #1C2040; box-shadow: inset 0 0 0 2px #F3DDA0; }
.scal-ic.venus { background: radial-gradient(circle, #F4A6BC, #C2476B); box-shadow: 0 0 14px rgba(244,166,188,.5); } .scal-ic.merc { background: radial-gradient(circle, #CFC6E6, #8C7FC0); box-shadow: 0 0 12px rgba(207,198,230,.4); }
.scal-ic.eclipse { background: #0E1024; box-shadow: 0 0 0 2px #F3DDA0, 0 0 22px 4px rgba(243,221,160,.6); }
.scal-t small { font-size: .7rem; font-weight: 700; color: #B9B1D3; } .scal-t b { display: block; font: 600 1.15rem/1.25 var(--voice); color: #fff; } .scal-t p { margin: 2px 0 0; font-size: .86rem; line-height: 1.45; }
.scal-t a { display: inline-block; margin-top: 6px; font-size: .8rem; font-weight: 700; color: #F3DDA0; text-decoration: none; }
.scal li.big .scal-t b { font-size: 1.35rem; color: #F3DDA0; }
/* ===== Your Stars v3: the reading */
.yr { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 30px; align-items: start; margin: 6px 0 22px; padding: 30px 32px 28px; border-radius: 26px; color: #DCD5EE; overflow: hidden;
  background: radial-gradient(120% 140% at 90% 0%, #5B4A9E 0%, #2E2A66 40%, #171A3A 100%); font-variant-numeric: lining-nums; }
.yr::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image: radial-gradient(1.4px 1.4px at 6% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 80%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 46% 10%, #F3DDA0 50%, transparent 51%), radial-gradient(1px 1px at 64% 58%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 82% 24%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 94% 84%, #F3DDA0 50%, transparent 51%), radial-gradient(1px 1px at 18% 44%, #fff 50%, transparent 51%); }
.yr > * { position: relative; }
.yr-card { width: 210px; height: 320px; }
.yr .flipc { width: 210px; height: 320px; }
.yr-k { margin: 0 0 10px; font-size: .8rem; color: #B9B1D3; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.yr-chip { padding: 2px 10px; border-radius: 99px; font-size: .7rem; font-weight: 700; color: #F3DDA0; border: 1px solid rgba(243,221,160,.4); }
.yr-name { margin: 0 0 4px; font-size: .78rem; font-weight: 700; color: #F3DDA0; }
.yr h1 { margin: 0 0 10px; font: 500 clamp(2rem, 3.6vw, 2.7rem)/1.08 var(--voice); color: #fff; text-wrap: balance; }
.yr-mean { margin: 0 0 18px; font: italic 400 1.2rem/1.45 var(--voice); color: #F3DDA0; }
.yr-facts { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0; margin: 0 0 20px; border-top: 1px solid rgba(243,221,160,.2); border-bottom: 1px solid rgba(243,221,160,.2); }
.yr-facts div { padding: 12px 14px 12px 0; } .yr-facts div + div { padding-left: 14px; border-left: 1px solid rgba(243,221,160,.2); }
.yr-facts dt { font-size: .68rem; font-weight: 700; color: #B9B1D3; margin-bottom: 3px; } .yr-facts dd { margin: 0; font: 500 1.02rem/1.35 var(--voice); color: #fff; }
.yr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .yr-acts .btn { width: auto; padding: 13px 24px; }
.yr-link { font-size: .92rem; font-weight: 700; color: #F3DDA0; text-decoration: none; } .yr-link:hover { text-decoration: underline; }
.yr-why { margin-top: 18px; } .yr-why summary { cursor: pointer; list-style: none; font-size: .84rem; font-weight: 600; color: #CFC6E6; } .yr-why summary::-webkit-details-marker { display: none; }
.yr-why summary::after { content: " ⌄"; } .yr-why[open] summary::after { content: " ⌃"; }
.yr-why > div { margin-top: 12px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.06); }
.yr-why p { margin: 0 0 10px; font: 400 1.02rem/1.55 var(--voice); color: #EDE8F7; }
.yr-wheel { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: center; margin: 6px 0 10px; }
.yr-wheel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .8rem; color: #CFC6E6; } .yr-wheel i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.yr-wheel .k1 { background: #232650; box-shadow: 0 0 0 1px #F3DDA0; } .yr-wheel .k2 { background: #FFF4D8; } .yr-wheel .k3 { height: 2px; border-radius: 0; background: #6FA886; } .yr-wheel .k4 { height: 0; border-radius: 0; border-top: 2px dashed #D4839A; }
.yr-gl { font: 400 .8rem/1.6 var(--sans) !important; color: #B9B1D3 !important; margin: 0 !important; }
.yr-closed h1 { margin-top: 18px; } .yr-hint { margin: 16px 0 0; font-size: .84rem; color: #B9B1D3; }
.yr-ask { margin: 4px 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(243,221,160,.25); }
.yr-ask p { margin: 0 0 10px; font: italic 1.05rem/1.4 var(--voice); color: #fff; } .yr-ask p span { display: block; font: 700 .68rem var(--sans); font-style: normal; color: #F3DDA0; margin-bottom: 2px; }
.yr-ask div { display: flex; gap: 8px; } .yr-ask button { padding: 8px 16px; border-radius: 99px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: 600 .84rem var(--sans); cursor: pointer; }
.yr-ask button:first-child { background: #1F8A4C; border-color: #1F8A4C; } .yr-ask button:nth-child(2) { background: #F2C94C; border-color: #F2C94C; color: #3A2E00; }
@media (max-width: 760px) { .yr { grid-template-columns: 1fr; padding: 22px 18px; gap: 18px; } .yr-card, .yr .flipc { width: 180px; height: 274px; margin: 0 auto; } .yr-facts { grid-template-columns: 1fr; } .yr-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(243,221,160,.2); } .yr-wheel { grid-template-columns: 1fr; } .yr-wheel .swheel { max-width: 200px; margin: 0 auto; } }
/* the tarot card */
.tar { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 18px 14px 18px; border-radius: 16px; text-align: center;
  border: 1.5px solid #C9A032; outline: 1px solid rgba(201,160,50,.45); outline-offset: -8px; box-shadow: 0 22px 40px -18px rgba(0,0,0,.7); }
.tar-n { font: 600 .8rem var(--voice); letter-spacing: .12em; color: currentColor; opacity: .7; min-height: 1em; }
.tar .ca { width: 72%; height: auto; } .tar b { font: 600 1.2rem/1.15 var(--voice); } .tar small { font-size: .66rem; font-weight: 700; letter-spacing: .04em; opacity: .8; }
.tar-power { background: radial-gradient(circle at 50% 38%, #FFF4D6, #F6D9A8 60%, #E9B97A); color: #6B4210; }
.ca-sun .rays line { stroke: #C9832A; stroke-width: 3; stroke-linecap: round; } .ca-sun .core { fill: #E8A63A; } .ca-sun .inner { fill: #F7C766; }
.tar-pressure { background: radial-gradient(circle at 50% 38%, #4E4590, #2A2660 65%, #1C1A44); color: #EDE4FF; }
.ca-moon .core { fill: #F3E9C8; } .ca-moon circle, .ca-moon path:last-child { fill: #F3DDA0; }
.tar-trouble { background: radial-gradient(circle at 50% 38%, #6E4A7A, #3F2A52 65%, #251934); color: #F6E6EE; }
.ca-storm .moon { fill: #E9D9B8; opacity: .85; } .ca-storm .cloud { fill: #CDBFD9; } .ca-storm .bolt { fill: #F3DDA0; }
.tar-rare { background: radial-gradient(circle at 50% 38%, #FFF1C4, #E9C466 55%, #B48A22); color: #4A3500; }
.ca-rare .halo { fill: rgba(255,255,255,.35); } .ca-rare .core { fill: #FFF8E4; } .ca-rare .crater { fill: #EADBB0; }
.flipc-back { border-radius: 16px; }
/* portrait */
.ptr { margin: 0 0 22px; }
.ptr-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; } .ptr-h h2 { margin: 0; font: 600 1.5rem var(--voice); color: var(--ink-t); } .ptr-h a { font-size: .82rem; font-weight: 700; color: #1F8A4C; text-decoration: none; }
.pt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ptl { display: grid; align-content: start; gap: 2px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #EFE3D2; }
.pt-g { width: 38px; height: 38px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; color: #A07A12; background: #FFF4D8; border: 1px solid #EAD9AE; }
.ptl small { font-size: .7rem; font-weight: 700; color: #A07A12; } .ptl b { font: 600 1.3rem/1.2 var(--voice); color: var(--ink-t); } .ptl p { margin: 4px 0 0; font-size: .84rem; line-height: 1.45; color: #6E6680; }
.ptl.lock { background: #FBF7F2; border-style: dashed; } .ptl.lock b { color: #C9B8A0; }
.btd { margin-top: 12px; padding: 12px 16px; border-radius: 14px; background: #FBF7F2; } .btd summary { cursor: pointer; list-style: none; font-size: .88rem; color: #6E6680; } .btd summary::-webkit-details-marker { display: none; }
.btd summary b { color: #1F8A4C; } .btd summary em { font-style: normal; font-size: .76rem; font-weight: 700; color: #A07A12; margin-left: 4px; }
.bt-f2 { display: grid; grid-template-columns: 1fr 1.4fr auto auto; gap: 10px; align-items: end; margin-top: 12px; }
.bt-f2 label { display: grid; gap: 4px; font-size: .72rem; font-weight: 600; color: #7A5A0C; } .bt-f2 input { padding: 10px 12px; border-radius: 10px; border: 1px solid #E6D6BC; background: #fff; font: 400 .95rem var(--sans); min-width: 0; }
.bt-f2 .btn { width: auto; padding: 11px 18px; font-size: .9rem; } .bt-f2 .link { background: none; border: 0; cursor: pointer; font-size: .8rem; color: #6E6680; text-decoration: underline; }
.pt-have { margin: 12px 0 0; font-size: .84rem; color: #4F6B58; } .pt-have .link { background: none; border: 0; cursor: pointer; }
@media (max-width: 760px) { .pt-grid { grid-template-columns: 1fr 1fr; } .bt-f2 { grid-template-columns: 1fr; } .bt-f2 .btn { width: 100%; } }
@media (max-width: 420px) { .pt-grid { grid-template-columns: 1fr; } }
/* one offer */
.yoff { display: grid; grid-template-columns: 180px minmax(0, 1fr); border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid #EFE3D2; text-decoration: none; color: inherit; margin: 0 0 22px; transition: transform .18s, box-shadow .18s; }
.yoff:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -20px rgba(60,30,60,.5); }
.yoff-art { display: grid; place-items: center; background: radial-gradient(120% 120% at 20% 0%, #4A2F6B, #241A3D); } .yoff-art b { font: 500 4rem var(--voice); color: #F3DDA0; }
.yoff-b { display: grid; gap: 4px; padding: 20px 22px; } .yoff-b small { font-size: .72rem; font-weight: 700; color: #A07A12; } .yoff-b b { font: 600 1.4rem var(--voice); color: var(--ink-t); } .yoff-b > span { font-size: .9rem; line-height: 1.5; color: #6E6680; }
.yoff-b .btn { justify-self: start; width: auto; margin-top: 8px; padding: 10px 20px; font-size: .9rem; font-style: normal; }
@media (max-width: 600px) { .yoff { grid-template-columns: 1fr; } .yoff-art { min-height: 120px; } }
/* side: sky moments */
.smo { margin: 0 0 14px; padding: 14px 16px; border-radius: 18px; background: radial-gradient(120% 120% at 100% 0%, #3A2F6E, #1C2040 70%); color: #DCD5EE; font-variant-numeric: lining-nums; }
.smo .ssd-top b { color: #fff; }
.smo-r { display: grid; grid-template-columns: 34px 22px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(243,221,160,.15); }
.smo-d { text-align: center; } .smo-d b { display: block; font: 600 1.2rem/1 var(--voice); color: #fff; } .smo-d small { font-size: .6rem; font-weight: 700; color: #F3DDA0; text-transform: uppercase; }
.smo .scal-ic { width: 18px; height: 18px; margin: 0; } .smo-r > span:last-child { display: grid; } .smo-r > span:last-child b { font: 600 .95rem/1.2 var(--voice); color: #fff; } .smo-r > span:last-child small { font-size: .74rem; color: #B9B1D3; }
/* why the stars say this: a button in the reading, a panel below it */
.yr-whyb { margin-top: 18px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 .86rem var(--sans); color: #CFC6E6; }
.yr-whyb span { display: inline-block; transition: transform .2s; } .yr-whyb.on span { transform: rotate(180deg); } .yr-whyb:hover { color: #fff; }
.yr-whyb:focus-visible { outline: 2px solid #F3DDA0; outline-offset: 4px; border-radius: 4px; }
.ywhy { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: center; margin: -8px 0 22px; padding: 24px 28px; border-radius: 22px;
  background: linear-gradient(160deg, #FFFBF3, #FBF1E6); border: 1px solid #EFDDC0; animation: ywhyIn .35s ease; }
@keyframes ywhyIn { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ywhy { animation: none; } }
.ywhy[hidden] { display: none; }
.ywhy-t h2 { margin: 0 0 10px; font: 600 1.4rem var(--voice); color: var(--ink-t); }
.ywhy-t p { display: flex; gap: 12px; margin: 0 0 12px; font: 400 1.06rem/1.55 var(--voice); color: var(--ink-t); }
.ywhy-t p span { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; color: #F3DDA0; background: #232650; }
.ywhy-k { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 10px; font-size: .76rem; color: #8A7F95; } .ywhy-k i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.ywhy-k .k1 { background: #232650; } .ywhy-k .k2 { background: #FFF4D8; border: 1px solid #C9A032; } .ywhy-k .k3 { height: 2px; border-radius: 0; background: #6FA886; } .ywhy-k .k4 { height: 0; border-radius: 0; border-top: 2px dashed #D4839A; }
.ywhy-g { display: flex; flex-wrap: wrap; gap: 6px; } .ywhy-g span { padding: 4px 10px; border-radius: 99px; background: #fff; border: 1px solid #EFE3D2; font-size: .76rem; color: #5E5670; }
@media (max-width: 700px) { .ywhy { grid-template-columns: 1fr; padding: 20px; } .ywhy-w { max-width: 220px; margin: 0 auto; } }
.smo-src { margin: 8px 0 0; font-size: .66rem; color: #8F87AE; text-align: right; }
.ywhy-src { font: 400 .76rem var(--sans) !important; color: #8A7F95 !important; display: block !important; margin: 0 0 8px !important; }
/* guide card */
.gk { margin: 0 0 14px; padding: 18px; border-radius: 20px; color: #DCD5EE; background: radial-gradient(120% 120% at 100% 0%, #4A3F86, #1F2148 70%); box-shadow: 0 14px 30px -20px rgba(28,32,64,.8); }
.gk-top { display: flex; align-items: center; gap: 12px; }
.gk-face { position: relative; flex: none; } .gk-face .adv-ava { width: 56px; height: 56px; font-size: 1.4rem; border: 2px solid #F3DDA0; }
.gk-face i { position: absolute; right: 1px; bottom: 2px; width: 13px; height: 13px; border-radius: 50%; background: #4CC47A; border: 2px solid #1F2148; }
.gk-top b { display: block; font: 600 1.2rem var(--voice); color: #fff; } .gk-top small { font-size: .74rem; color: #B9B1D3; }
.gk-line { margin: 14px 0 12px; font: italic 400 1.05rem/1.45 var(--voice); color: #F6EFE4; }
.gk-qs { display: grid; gap: 6px; margin-bottom: 14px; }
.gk-qs a { display: block; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(243,221,160,.2); font-size: .84rem; color: #fff; text-decoration: none; }
.gk-qs a::before { content: "✦ "; color: #F3DDA0; } .gk-qs a:hover { background: rgba(255,255,255,.14); }
.gk .gk-go { width: 100%; padding: 12px; font-size: .95rem; }
.gk-more { display: grid; gap: 4px; margin-top: 10px; text-align: center; } .gk-more a { font-size: .76rem; color: #B9B1D3; text-decoration: none; } .gk-more a:hover { color: #fff; }
/* sky calendar */
.smo-all { display: block; margin-top: 8px; font-size: .8rem; font-weight: 700; color: #F3DDA0; text-decoration: none; }
.skc { padding: 28px 30px; border-radius: 26px; color: #DCD5EE; background: radial-gradient(120% 100% at 100% 0%, #4A3F86, #1C2040 60%, #151733); font-variant-numeric: lining-nums; }
.skc h1 { margin: 0 0 6px; font: 500 clamp(2rem, 3.6vw, 2.6rem) var(--voice); color: #fff; } .skc-l { margin: 0 0 18px; color: #B9B1D3; }
.skc-m h2 { margin: 18px 0 6px; font: 600 1.3rem var(--voice); color: #F3DDA0; }
.skc-m ol { list-style: none; margin: 0; padding: 0; position: relative; } .skc-m ol::before { content: ""; position: absolute; left: 83px; top: 12px; bottom: 12px; width: 1px; background: rgba(243,221,160,.22); }
.skc-m li { position: relative; display: grid; grid-template-columns: 56px 26px minmax(0, 1fr); gap: 14px; padding: 12px 0; }
.skc-m li.past { opacity: .5; } .skc-m li.big .scal-t b { color: #F3DDA0; font-size: 1.3rem; }
.skc-do { margin: 6px 0 0 !important; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: .84rem !important; } .skc-do span { display: block; font-size: .64rem; font-weight: 700; color: #F3DDA0; }
.skc-m .scal-d small { text-transform: none; letter-spacing: 0; }
@media (max-width: 600px) { .skc { padding: 22px 16px; } .skc-m ol::before { left: 70px; } .skc-m li { grid-template-columns: 44px 22px minmax(0, 1fr); gap: 10px; } }
.smo-sell { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(243,221,160,.18); }
.smo-sell a { display: grid; gap: 1px; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.07); text-decoration: none; } .smo-sell a:hover { background: rgba(255,255,255,.12); }
.smo-sell span { font-size: .72rem; color: #B9B1D3; } .smo-sell b { font: 600 .92rem var(--voice); color: #F3DDA0; }
.skc-sell { margin: 18px 0 0; } .skc-sell h2 { margin: 0 0 12px; font: 600 1.4rem var(--voice); color: var(--ink-t); }
/* ===== the reading, v4 */
.yr2 { grid-template-columns: 220px minmax(0, 1fr); row-gap: 24px; padding: 32px 34px 0; }
.yr2 .yr-card { width: 220px; height: 330px; }
.yr-orn { position: absolute !important; right: -90px; top: -70px; width: 420px; opacity: .13; pointer-events: none; transform: rotate(-12deg); }
.yr-orn .swheel { width: 100%; filter: saturate(0) brightness(2.2); }
.yr2 .yr-body { align-self: center; }
.yr2 h1 { font-size: clamp(2.2rem, 4vw, 3rem); }
.yr2 .yr-acts { margin-top: 4px; }
.yr-band { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; align-items: stretch; margin: 0 -34px; padding: 0 34px; border-top: 1px solid rgba(243,221,160,.2); background: rgba(10,12,34,.28); }
.yr-band > div { display: flex; gap: 12px; align-items: flex-start; padding: 18px 18px 18px 0; } .yr-band > div + div { padding-left: 18px; border-left: 1px solid rgba(243,221,160,.14); }
.yr-band span { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .95rem; color: #F3DDA0; background: rgba(243,221,160,.12); }
.yr-band p { margin: 0; font: 500 1.02rem/1.35 var(--voice); color: #fff; } .yr-band small { display: block; font: 700 .66rem var(--sans); color: #B9B1D3; margin-bottom: 3px; }
.yr-band em { font: 600 .98rem var(--sans); font-style: normal; }
.yr-band .yr-whyb { align-self: center; margin: 0 0 0 18px; white-space: nowrap; }
@media (max-width: 860px) { .yr-band { grid-template-columns: 1fr 1fr; } .yr-band > div:nth-child(3) { border-left: 0; padding-left: 0; } .yr-band .yr-whyb { grid-column: 1 / -1; margin: 0 0 16px; justify-self: start; } }
@media (max-width: 760px) { .yr2 { grid-template-columns: 1fr; padding: 24px 18px 0; } .yr2 .yr-card { width: 190px; height: 285px; margin: 0 auto; } .yr-band { grid-template-columns: 1fr; margin: 0 -18px; padding: 0 18px; } .yr-band > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(243,221,160,.14); } .yr-orn { display: none; } }
/* tarot card, richer */
.tar { overflow: hidden; }
.tar::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(1px 1px at 18% 20%, currentColor 50%, transparent 51%), radial-gradient(1px 1px at 80% 16%, currentColor 50%, transparent 51%), radial-gradient(1.2px 1.2px at 72% 70%, currentColor 50%, transparent 51%), radial-gradient(1px 1px at 26% 76%, currentColor 50%, transparent 51%); }
.tar-c { position: absolute; font-style: normal; font-size: .6rem; opacity: .7; } .tar-c.tl { top: 14px; left: 14px; } .tar-c.tr { top: 14px; right: 14px; } .tar-c.bl { bottom: 14px; left: 14px; } .tar-c.br { bottom: 14px; right: 14px; }
.tar-art { position: relative; display: grid; place-items: center; width: 80%; aspect-ratio: 1; }
.tar-art::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 68%); }
.tar-pressure .tar-art::before, .tar-trouble .tar-art::before { background: radial-gradient(circle, rgba(243,221,160,.28), transparent 68%); }
.tar-art::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; opacity: .25; }
.tar .ca { position: relative; width: 84%; }
.tar b { font-size: 1.3rem; letter-spacing: .01em; } .tar-n { font-size: .85rem; letter-spacing: .2em; }
.yr-orn { opacity: .06; width: 460px; right: -140px; top: -120px; }
.yr-orn .swheel .sw-p, .yr-orn .swheel .sw-n, .yr-orn .swheel .sw-pb, .yr-orn .swheel .sw-nb, .yr-orn .swheel .sw-a { display: none; }
.yr-band { grid-template-columns: 1.5fr 1fr 1fr; }
.yr-band .yr-whyb { grid-column: 1 / -1; justify-self: center; margin: 0; padding: 12px 0 14px; border-top: 1px solid rgba(243,221,160,.14); width: 100%; }
@media (max-width: 860px) { .yr-band { grid-template-columns: 1fr; } .yr-band > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(243,221,160,.14); } }
.yr-band .yr-whyb { display: flex; justify-content: center; align-items: center; gap: 6px; }
.yr-band .yr-whyb span { width: auto; height: auto; background: none; font-size: .9rem; color: #F3DDA0; }
/* compatibility: numerology / astrology */
.bsw { display: inline-flex; gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid #EFE3D2; }
.bsw button { padding: 8px 18px; border: 0; border-radius: 999px; background: none; font: 600 .88rem var(--sans); color: #6E6680; cursor: pointer; }
.bsw button.on { background: #232650; color: #F3DDA0; }
.bmx { margin: 0 0 16px; padding: 20px 22px; border-radius: 20px; background: radial-gradient(120% 120% at 100% 0%, #3E3478, #1C2040 70%); color: #DCD5EE; font-variant-numeric: lining-nums; }
.bmx-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .bmx-h h2 { margin: 0; font: 600 1.35rem var(--voice); color: #fff; } .bmx-h span { font-size: .82rem; color: #F3DDA0; font-weight: 600; }
.bmx-r { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(243,221,160,.14); }
.bmx-r small { font-size: .68rem; font-weight: 700; color: #B9B1D3; } .bmx-r b { display: block; font: 600 1.05rem var(--voice); color: #fff; } .bmx-r p { margin: 2px 0 0; font-size: .84rem; line-height: 1.45; }
.bmx-r em { flex: none; padding: 4px 12px; border-radius: 99px; font: 700 .74rem var(--sans); font-style: normal; background: rgba(255,255,255,.08); color: #DCD5EE; }
.bmx-trine em, .bmx-sextile em { background: rgba(127,211,155,.18); color: #9FE0B4; } .bmx-conjunct em, .bmx-opposite em { background: rgba(243,221,160,.18); color: #F3DDA0; } .bmx-square em { background: rgba(242,141,170,.18); color: #F4A6BC; }
.bmx-ask { display: block; margin-top: 10px; font-size: .86rem; font-weight: 700; color: #F3DDA0; text-decoration: none; } .bmx-note { margin: 8px 0 0; font-size: .76rem; color: #8F87AE; }
.bnum-pair { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 10px 0 12px; text-align: center; }
.bnum-pair > div { display: grid; justify-items: center; gap: 2px; } .bnum-pair .nm-n { width: 56px; height: 56px; font-size: 1.8rem; background: rgba(243,221,160,.12); border-color: rgba(243,221,160,.4); color: #F3DDA0; }
.bnum-pair small { font-size: .72rem; color: #B9B1D3; } .bnum-pair b { font: 600 1rem var(--voice); color: #fff; } .bnum-pair i { font-style: normal; font-size: 1.4rem; color: #F4A6BC; }
.bnum-l { margin: 0 0 6px; font: 400 1.05rem/1.5 var(--voice); color: #fff; text-align: center; } .bnum-y { margin: 0; font-size: .84rem; text-align: center; color: #B9B1D3; }
/* add someone */
.adb { margin: 6px 0 18px; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid #EFE3D2; box-shadow: 0 16px 32px -24px rgba(60,30,60,.5); }
.adb-h { display: flex; align-items: center; gap: 18px; padding: 24px 26px; color: #DCD5EE; background: radial-gradient(120% 140% at 90% 0%, #7A3A63, #3A2C5C 50%, #1C2040); }
.adb-h h1 { margin: 0 0 2px; font: 600 clamp(1.7rem, 3vw, 2.2rem) var(--voice); color: #fff; } .adb-h p { margin: 0; font-size: .9rem; }
.adb-pair { display: flex; flex: none; } .adb-pair i { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 600 1.4rem var(--voice); font-style: normal; color: #fff; background: linear-gradient(135deg, #E88BA5, #B03A5B); border: 2px solid #fff; }
.adb-pair i + i { margin-left: -14px; background: linear-gradient(135deg, #F3DDA0, #C9A032); color: #4A3500; }
.adb-f { display: grid; gap: 18px; padding: 24px 26px 26px; }
.adb-f label > span, .adb-row > span { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 700; color: #7A5A0C; }
.adb-name input { width: 100%; padding: 6px 0 8px; border: 0; border-bottom: 2px solid #EFE3D2; background: none; font: 500 1.8rem var(--voice); color: var(--ink-t); outline: 0; } .adb-name input:focus { border-bottom-color: #C9A032; }
.adb-chips { display: flex; flex-wrap: wrap; gap: 8px; } .adb-chips label { position: relative; } .adb-chips input { position: absolute; opacity: 0; }
.adb-chips b { display: block; padding: 9px 16px; border-radius: 999px; border: 1px solid #E6DCE0; font: 600 .88rem var(--sans); color: #5E5670; cursor: pointer; }
.adb-chips input:checked + b { background: #232650; border-color: #232650; color: #F3DDA0; } .adb-chips input:focus-visible + b { outline: 2px solid #C9A032; outline-offset: 2px; }
.adb-date input, .adb-more input { padding: 12px 14px; border-radius: 12px; border: 1px solid #E6D6BC; font: 400 1rem var(--sans); background: #FFFCF8; }
.adb-date small { display: block; margin-top: 6px; font-size: .76rem; color: #8A7F95; }
.adb-more { padding: 12px 14px; border-radius: 12px; background: #FBF7F2; } .adb-more summary { cursor: pointer; list-style: none; font-size: .86rem; color: #6E6680; } .adb-more summary::-webkit-details-marker { display: none; } .adb-more summary b { color: #1F8A4C; } .adb-more label { display: block; margin-top: 10px; }
.adb-f .btn { justify-self: start; width: auto; padding: 14px 30px; }
@media (max-width: 600px) { .adb-h { padding: 20px 18px; } .adb-f { padding: 20px 18px; } .adb-f .btn { width: 100%; } }
/* portrait: right now */
.ptr-l { margin: 2px 0 0; font-size: .84rem; color: #8A7F95; } .pt-now { margin: 8px 0 0 !important; padding: 8px 10px; border-radius: 10px; background: #FFF8E6; font-size: .78rem !important; color: #5E5670 !important; } .pt-now span { display: block; font-size: .64rem; font-weight: 700; color: #A07A12; }
.ys-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 0 22px; }
.ys-two > section { margin: 0; }
@media (max-width: 760px) { .ys-two { grid-template-columns: 1fr; } }
.pt-x { margin: 8px 0 0 !important; font-size: .8rem !important; color: #5E5670 !important; } .pt-x b { color: var(--ink-t); font-weight: 700; font-size: .8rem; font-family: var(--sans); display: inline; }
.pt-now.hard { background: #FDF1F4; } .pt-now.hard span { color: #B03A5B; }
/* Compatibility start: one question, three answers */
.ch-start .ch-text h1 { margin-bottom: 6px; } .ch-start .ch-text > p { margin: 0 0 18px; }
.ch-pick { display: grid; gap: 10px; max-width: 420px; }
.ch-pick a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: #F2C94C; color: #3A2E00; font: 700 1.05rem var(--sans); text-decoration: none; box-shadow: 0 8px 18px rgba(224,181,58,.26), inset 0 -3px 0 rgba(0,0,0,.1); transition: transform .15s; }
.ch-pick a:hover { transform: translateY(-2px); background: #EDBF34; }
.ch-pick i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: rgba(255,255,255,.55); }
.ch-pick em { margin-left: auto; font-style: normal; font-size: 1.3rem; }
@media (max-width: 640px) { .ch-pick { margin: 0 auto; text-align: left; } }
/* Your Stars card, in Manifest's style */
.yr2, .yr-closed { grid-template-columns: minmax(0, 1fr) 176px; }
.yr2 .yr-card, .yr-closed .yr-card, .yr .flipc { width: 176px; height: 264px; }
.yr2 .yr-card, .yr-closed .yr-card { grid-column: 2; grid-row: 1; align-self: center; }
.yr2 .yr-body, .yr-closed .yr-body { grid-column: 1; grid-row: 1; }
.yr2 .yr-band { grid-row: 2; }
.tar3 { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 12px; border-radius: 14px; text-align: center; color: #FFF6F8;
  box-shadow: inset 0 0 0 2px rgba(243,221,160,.55), 0 16px 30px -16px rgba(0,0,0,.7); }
.tar3::after { content: ""; position: absolute; inset: 8px; border-radius: 9px; border: 1px solid rgba(243,221,160,.35); pointer-events: none; }
.tar3-k { position: absolute; top: 16px; font: 700 .6rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #F3DDA0; }
.tar3-m { font-size: 2.2rem; line-height: 1; color: #F3DDA0; margin-bottom: 6px; } .tar3 b { font: italic 600 1.3rem/1.15 var(--voice); } .tar3 small { position: absolute; bottom: 16px; font-size: .68rem; opacity: .85; }
.tar3-back { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; border-radius: 14px; color: #F3DDA0;
  background: radial-gradient(circle at 50% 42%, #2E3A78, #151938 72%); box-shadow: inset 0 0 0 2px rgba(243,221,160,.6), 0 16px 30px -16px rgba(0,0,0,.7); }
.tar3-back::after { content: ""; position: absolute; inset: 8px; border-radius: 9px; border: 1px solid rgba(243,221,160,.4); }
.tar3-back svg { width: 110px; fill: #F3DDA0; } .tar3-back b { font: 700 .66rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.yr .flipc-back { background: none; border: 0; outline: 0; box-shadow: none; animation: none; }
.yr .flipc-in { transition: transform .7s ease; }
@media (max-width: 760px) { .yr2, .yr-closed { grid-template-columns: 1fr; } .yr2 .yr-card, .yr-closed .yr-card { grid-column: 1; grid-row: 2; margin: 0 auto; } .yr2 .yr-body, .yr-closed .yr-body { grid-row: 1; } .yr2 .yr-band { grid-row: 3; } }
/* Active in your chart */
.acts { margin: 0 0 22px; }
.act { padding: 16px 18px; margin-bottom: 10px; border-radius: 18px; background: #fff; border: 1px solid #EFE3D2; }
.act-h { display: flex; align-items: center; gap: 12px; } .act-h > div { flex: 1; min-width: 0; }
.act-g { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; color: #F3DDA0; background: #232650; }
.act-h small { font-size: .7rem; font-weight: 700; color: #1F8A4C; } .act.hard .act-h small { color: #B03A5B; }
.act-h b { display: block; font: 600 1.08rem/1.3 var(--voice); color: var(--ink-t); } .act-h em { flex: none; font-style: normal; font-size: .74rem; font-weight: 700; color: #A07A12; }
.act > p { margin: 10px 0 12px; font-size: .9rem; line-height: 1.5; color: #5E5670; }
.act-bar { position: relative; height: 6px; border-radius: 99px; background: #F1EAE2; } .act-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #9FD3B0, #1F8A4C); }
.act.hard .act-bar i { background: linear-gradient(90deg, #F2B8C9, #B03A5B); }
.act-bar b { position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #F3C94A; border: 2px solid #fff; box-shadow: 0 0 0 1px #C9A032; }
.act-d { display: flex; justify-content: space-between; margin-top: 6px; font-size: .7rem; color: #8A7F95; font-variant-numeric: lining-nums; }
/* chart as one line */
.chl { margin: 0 0 22px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #EFE3D2; }
.chl-r { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.chl-r span { display: grid; justify-items: center; gap: 2px; text-align: center; font: 600 1rem var(--voice); color: var(--ink-t); }
.chl-r i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #A07A12; background: #FFF4D8; border: 1px solid #EAD9AE; } .chl-r small { font: 700 .64rem var(--sans); color: #8A7F95; }
.chl-go { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #2A2C5C, #1C2040); text-decoration: none; }
.chl-go b { font: 600 1.05rem var(--voice); color: #fff; } .chl-go span { font-size: .82rem; font-weight: 700; color: #F3DDA0; }
.chl-bt { margin-top: 10px; }
@media (max-width: 520px) { .chl-r { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; } }
/* your day at a glance */
.ys-day .ys-wh { width: 230px; height: auto; align-self: center; } .ys-day { grid-template-columns: minmax(0, 1fr) 230px !important; }
.ys-day .ys-wh .swheel { width: 100%; filter: drop-shadow(0 14px 28px rgba(0,0,0,.45)); }
.ys-hl { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(159,224,181,.35); }
.ys-hl.hard { border-color: rgba(242,141,170,.4); }
.ys-hl-g { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #1C2040; background: #F3DDA0; }
.ys-hl > div { flex: 1; min-width: 0; } .ys-hl small { font-size: .66rem; font-weight: 700; color: #9FE0B4; } .ys-hl.hard small { color: #F4A6BC; }
.ys-hl b { display: block; font: 500 1rem/1.35 var(--voice); color: #fff; } .ys-hl em { flex: none; font-style: normal; font-size: .72rem; font-weight: 700; color: #F3DDA0; }
.scheck2 { margin: -8px 0 18px; } .scheck2 .yr-ask { background: #232650; border-radius: 16px; }
@media (max-width: 760px) { .ys-day { grid-template-columns: 1fr !important; } .ys-day .ys-wh { width: 200px; margin: 0 auto; } }
.seas { margin: 0 0 22px; }
.sea { padding: 18px 20px; margin-bottom: 10px; border-radius: 18px; color: #DCD5EE; background: radial-gradient(120% 140% at 100% 0%, #4A3F86, #1C2040 70%); }
.sea-h { display: flex; gap: 12px; align-items: center; } .sea-h > span { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; color: #1C2040; background: #F3DDA0; }
.sea-h small { font-size: .7rem; font-weight: 700; color: #F3DDA0; font-variant-numeric: lining-nums; } .sea-h b { display: block; font: 600 1.25rem/1.25 var(--voice); color: #fff; }
.sea > p { margin: 10px 0 12px; font: 400 1rem/1.5 var(--voice); color: #EDE8F7; }
.sea .act-bar { background: rgba(255,255,255,.12); } .sea .act-bar i { background: linear-gradient(90deg, #F3DDA0, #C9A032); } .sea.hard .act-bar i { background: linear-gradient(90deg, #F2B8C9, #B03A5B); }
.sea .act-bar b { border-color: #1C2040; } .sea .act-d { color: #B9B1D3; }
.bt-top { margin: 0 0 12px; background: #FFF8EA; border: 1px solid #EFDDC0; }
.ys-lock { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: #FBF7F2; border: 1px dashed #E4CD8E; text-decoration: none; }
.ys-lock b { flex: 1; font: 600 1rem var(--voice); color: var(--ink-t); } .ys-lock em { font-style: normal; font-size: .82rem; font-weight: 700; color: #A07A12; }
.sea-lock { display: block; text-decoration: none; } .sea-blur { filter: blur(0); } .sea-lock .btn { display: inline-block; width: auto; margin-top: 4px; padding: 10px 20px; font-size: .9rem; font-style: normal; }
.ycmp { margin: 0 0 22px; padding: 24px; border-radius: 22px; background: linear-gradient(160deg, #FFF8EA, #FDF0E6); border: 1px solid #EFDDC0; text-align: center; }
.ycmp h2 { margin: 0 0 4px; font: 600 1.6rem var(--voice); color: var(--ink-t); } .ycmp > p { margin: 0 0 16px; color: #6E6680; }
.ycmp-t { max-width: 520px; margin: 0 auto 18px; text-align: left; }
.ycmp-t > div { display: grid; grid-template-columns: 1fr 70px 110px; align-items: center; padding: 9px 0; border-top: 1px solid #EFDDC0; font-size: .9rem; color: var(--ink-t); }
.ycmp-t .ycmp-h { border-top: 0; font-size: .78rem; } .ycmp-h b { text-align: center; color: #6E6680; } .ycmp-h b.ic { color: #7A5A0C; }
.ycmp-t i { font-style: normal; text-align: center; font-weight: 700; } .ycmp-t i.y { color: #1F8A4C; } .ycmp-t i.n { color: #C9B8A0; } .ycmp-t i.ic { background: #FFF1CC; border-radius: 8px; padding: 2px 0; }
.ycmp .btn { width: auto; display: inline-block; padding: 14px 30px; }
.bt-top { margin: -10px 0 18px; }
.ts3 li.g i { font-size: .62rem; font-weight: 700; color: #A07A12; }
.sg-add { margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 .88rem var(--sans); color: #1F8A4C; } .sg-add i { font-style: normal; font-weight: 400; color: #8A7F95; }
/* bond: you two today, and the report */
.btd2 { margin: 0 0 18px; padding: 24px 26px; border-radius: 22px; color: #DCD5EE; background: radial-gradient(120% 140% at 90% 0%, #5B4A9E, #2E2A66 40%, #171A3A); font-variant-numeric: lining-nums; }
.btd2 h1 { margin: 2px 0 6px; font: 500 clamp(1.8rem, 3.2vw, 2.4rem)/1.12 var(--voice); color: #fff; } .btd2 .yr-mean { margin: 0 0 16px; }
.btd2-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btd2-two > div { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.btd2-two .easy { border-color: rgba(159,224,181,.4); } .btd2-two .hard { border-color: rgba(242,141,170,.45); }
.btd2-two small, .btd2-f small { display: block; font: 700 .66rem var(--sans); color: #F3DDA0; margin-bottom: 3px; } .btd2-two p { margin: 0; font: 400 .98rem/1.45 var(--voice); color: #fff; }
.btd2-f { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(243,221,160,.2); font: 600 .95rem var(--sans); color: #fff; } .btd2-f span { color: #fff; }
.brep { margin: 0 0 18px; } .brep-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .brep-h h2 { margin: 0; font: 600 1.5rem var(--voice); color: var(--ink-t); } .brep-h span { font-size: .8rem; color: #8A7F95; }
.brep-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; align-items: start; } .brep-g > section { margin: 0; }
@media (max-width: 860px) { .brep-g, .btd2-two { grid-template-columns: 1fr; } }
.bmx-q { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(243,221,160,.14); font-size: .84rem; color: #B9B1D3; }
/* the wheel, v2 */
.sw2 .w-disc { fill: #151938; } .sw2 .w-l { fill: none; stroke: rgba(243,221,160,.38); stroke-width: .8; } .sw2 .w-l.dim { stroke: rgba(243,221,160,.18); }
.sw2 .w-z { font: 10px var(--sans); text-anchor: middle; fill: rgba(243,221,160,.55); } .sw2 .w-z.me { fill: #F3DDA0; font-weight: 700; }
.sw2 .w-p { font: 13px var(--sans); text-anchor: middle; fill: #fff; } .sw2 .w-n { font: 12px var(--sans); text-anchor: middle; fill: #F3DDA0; }
.sw2 .w-tick { stroke: #fff; stroke-width: 1.4; } .sw2 .w-dot { fill: #F3DDA0; }
.sw2 .w-a { stroke-width: 1.2; } .sw2 .w-a.ok { stroke: #7FD39B; } .sw2 .w-a.hard { stroke: #F28DAA; stroke-dasharray: 3 2.5; }
.sw2 .w-c, .sw2 .w-c2 { font: 7px var(--sans); text-anchor: middle; letter-spacing: .12em; text-transform: uppercase; } .sw2 .w-c { fill: #fff; opacity: .7; } .sw2 .w-c2 { fill: #F3DDA0; opacity: .8; }
.ys-day .ys-wh .swheel { filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.ywhy-k .k1 { background: #fff; border: 1px solid #151938; }
.sdc-n { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 8px; font-variant-numeric: lining-nums; }
.sdc-n > div { padding: 10px 12px; border-radius: 12px; background: #FFF8E6; } .sdc-n b { display: block; font: 600 1.8rem/1 var(--voice); color: #7A5A0C; } .sdc-n small { font-size: .72rem; color: #8A7F95; }
.sdc-m { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .sdc-m span { padding: 3px 10px; border-radius: 99px; background: #fff; border: 1px solid #EFE3D2; font-size: .74rem; color: #5E5670; } .sdc-m b { color: #A07A12; }
.sdc-pitch { display: grid; gap: 2px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #2A2C5C, #1C2040); text-decoration: none; }
.sdc-pitch b { font: 600 1rem var(--voice); color: #fff; } .sdc-pitch span { font-size: .78rem; color: #F3DDA0; font-weight: 600; }
.sdc-n b, .sdc-m b { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.sdc-top { margin: 0 0 8px; font-size: .84rem; color: #5E5670; } .sdc-top b { color: #7A5A0C; }
.sea-hook { margin: 10px 0 6px; font: 500 1.12rem/1.45 var(--voice); color: #fff; }
.sea-lk { margin: 0 0 14px; font-size: .9rem; line-height: 1.5; color: #DCD5EE; } .sea-lk b { color: #F3DDA0; }
.sea-more { display: block; margin-top: 10px; font-size: .76rem; color: #B9B1D3; }
.ystory { display: grid; grid-template-columns: 200px minmax(0, 1fr); margin: 0 0 22px; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid #EFE3D2; }
.ystory-art { min-height: 200px; } .ystory-art > * { width: 100%; height: 100%; display: block; }
.ystory-b { padding: 22px 24px; } .ystory-b small { font-size: .72rem; font-weight: 700; color: #B03A5B; } .ystory-b h2 { margin: 4px 0 8px; font: 600 1.5rem/1.2 var(--voice); color: var(--ink-t); }
.ystory-b p { margin: 0 0 14px; font-size: .92rem; line-height: 1.55; color: #5E5670; }
.ystory-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .ystory-acts .btn { width: auto; padding: 12px 22px; }
.ystory-sh { font-size: .84rem; color: #6E6680; text-decoration: none; } .ystory-sh i { color: var(--ink-t); }
@media (max-width: 640px) { .ystory { grid-template-columns: 1fr; } .ystory-art { min-height: 140px; } }
.chl-go b { font-size: 1.02rem; } .chl-go { align-items: flex-start; flex-direction: column; gap: 3px; } .chl-go span { font-weight: 600; }
.ystory { align-items: stretch; } .ystory-art { position: relative; overflow: hidden; } .ystory-art > * { position: absolute; inset: 0; height: 100% !important; } .ystory-art svg { width: 100%; height: 100%; } .ystory-art img { object-fit: cover; }
.ys2 { grid-template-columns: 220px minmax(0, 1fr); }
.ys2 .ystory-b h2 { font-size: 1.55rem; line-height: 1.25; text-wrap: balance; }
.ys2-q { margin: 12px 0 14px; padding: 4px 0 4px 16px; border-left: 3px solid #C9A032; font: italic 500 1.3rem/1.35 var(--voice); color: #7A5A0C; }
.ys2 .ystory-b p b { color: var(--ink-t); }
.ys2-t { font-size: .8rem; color: #8A7F95; } .ys2 .ystory-sh { display: inline-block; margin-top: 12px; }
/* Your Stars: the first view of the day, the sky settling into place */
.ys-intro .sw2 > circle, .ys-intro .sw2 > line.w-l, .ys-intro .sw2 > .w-z { animation: yiFade .9s ease both; animation-delay: var(--t0, 0s); }
.ys-intro .sw2 { animation: yiSpin 2.2s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--t0, 0s); }
.ys-intro .w-pg, .ys-intro .w-ng { transform-box: view-box; transform-origin: 120px 120px; animation: yiOrbit 1.5s cubic-bezier(.2,.8,.25,1) both; animation-delay: calc(var(--d) + var(--t0, 0s)); }
.ys-intro .w-ng { animation-name: yiRise; animation-duration: .9s; }
.ys-intro .w-a { animation: yiFade .8s ease both; animation-delay: calc(1.5s + var(--t0, 0s)); }
.ys-intro .yw { display: inline-block; animation: yiWord .6s ease both; animation-delay: calc(var(--d) + var(--t0, 0s)); }
.ys-intro .yr-name, .ys-intro .yr-k { animation: yiFade .8s ease both; animation-delay: calc(.2s + var(--t0, 0s)); }
.ys-intro .yr-mean, .ys-intro .ys-hl, .ys-intro .yr-band { animation: yiUp .7s ease both; animation-delay: calc(2.1s + var(--t0, 0s)); }
@keyframes yiFade { from { opacity: 0; } }
@keyframes yiSpin { from { transform: rotate(-24deg) scale(.94); opacity: 0; } }
@keyframes yiOrbit { from { transform: rotate(-140deg); opacity: 0; } 40% { opacity: 1; } }
@keyframes yiRise { from { transform: scale(.4); opacity: 0; } }
@keyframes yiWord { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
@keyframes yiUp { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ys-intro *, .ys-intro .sw2 { animation: none !important; } }
.ys-why1 { margin: 10px 2px 0; font: 400 .98rem/1.5 var(--voice); color: #DCD5EE; } .ys-why1 b { font: 700 .72rem var(--sans); color: #F3DDA0; margin-right: 4px; }
.ys-inf { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-size: .88rem; color: #CFC6E6; }
.ys-inf span { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #1C2040; background: #F3DDA0; font-size: .85rem; } .ys-inf b { color: #F3DDA0; font-weight: 600; }
.ywhy-lead { display: block !important; font: 400 1.12rem/1.55 var(--voice) !important; }
.ys-inf i { font-style: normal; } .ys-inf b { white-space: nowrap; }
/* ===== the guide network */
.gtools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.gtool { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid #EFE3D2; text-decoration: none; color: inherit; transition: transform .15s; }
.gtool:hover { transform: translateY(-2px); } .gtool .adv-ava { width: 44px; height: 44px; flex: none; }
.gtool span { flex: 1; display: grid; gap: 2px; } .gtool b { font: 600 1.08rem var(--voice); color: var(--ink-t); } .gtool small { font-size: .78rem; line-height: 1.4; color: #6E6680; } .gtool em { font-style: normal; color: #1F8A4C; font-weight: 700; }
@media (max-width: 640px) { .gtools { grid-template-columns: 1fr; } }
.cw-input.has-att { align-items: center; } .cw-att { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; background: #F4EEF7; font-size: 1.1rem; }
.cw-thumb { flex: none; } .cw-thumb img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 2px solid #C9A032; }
.cw-img { padding: 4px !important; max-width: 240px; } .cw-img img { display: block; width: 100%; border-radius: 14px; }
.ssf-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 14px 16px; border-radius: 18px; text-decoration: none; background: radial-gradient(120% 140% at 100% 0%, #4A3F86, #1C2040 70%); }
.ssf-card b { flex: 1 1 100%; font: 600 1.1rem var(--voice); color: #fff; } .ssf-card span { flex: 1; font-size: .78rem; color: #F3DDA0; } .ssf-card em { font-style: normal; color: #F3DDA0; }
.ssf-h { margin: 6px 0 18px; padding: 24px 26px; border-radius: 22px; color: #DCD5EE; background: radial-gradient(120% 140% at 90% 0%, #5B4A9E, #2E2A66 40%, #171A3A); }
.ssf-h h1 { margin: 0 0 6px; font: 500 clamp(1.9rem, 3.4vw, 2.5rem) var(--voice); color: #fff; } .ssf-h p { margin: 0 0 16px; }
.ssf-n { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .ssf-n span { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.07); font-size: .72rem; text-align: center; }
.ssf-n b { display: block; font: 600 1.6rem var(--voice); color: #F3DDA0; font-variant-numeric: lining-nums; }
.ssf-s { margin: 0 0 18px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid #EFE3D2; } .ssf-s h2 { margin: 0 0 10px; font: 600 1.3rem var(--voice); color: var(--ink-t); }
.ssf-p { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid #F3ECEE; } .ssf-p:first-of-type { border-top: 0; }
.ssf-p > div { flex: 1; } .ssf-p small { font-size: .72rem; font-weight: 700; color: #A07A12; } .ssf-p b { display: block; font: 600 1.02rem/1.35 var(--voice); color: var(--ink-t); }
.ssf-p em { flex: none; font-style: normal; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: #FFF4D8; color: #7A5A0C; }
.ssf-p.yes em { background: #E6F4EA; color: #1F8A4C; } .ssf-p.no em { background: #F4EEF1; color: #8A7F95; }
.ssf-bt { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .ssf-bt button { padding: 6px 12px; border-radius: 99px; border: 1px solid #E6DCE0; background: #fff; font: 600 .8rem var(--sans); cursor: pointer; }
.ssf-bt button:first-child { background: #1F8A4C; color: #fff; border-color: #1F8A4C; } .ssf-bt button:nth-child(2) { background: #F2C94C; border-color: #F2C94C; color: #3A2E00; }
.ssf-tl { list-style: none; margin: 0; padding: 0; } .ssf-tl li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid #F3ECEE; } .ssf-tl li:first-child { border-top: 0; }
.ssf-tl span { font-size: .76rem; font-weight: 700; color: #A07A12; font-variant-numeric: lining-nums; } .ssf-tl p { margin: 0; font-size: .92rem; color: var(--ink-t); } .ssf-tl small { color: #A69CB4; font-size: .74rem; }
.ssf-m { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid #F3ECEE; } .ssf-m b { font: 600 1rem var(--voice); color: var(--ink-t); } .ssf-m span { flex: 1; font-size: .86rem; color: #6E6680; }
.ssf-m button { border: 0; background: none; cursor: pointer; color: #A69CB4; } .ssf-note { margin: 10px 0 0; font-size: .78rem; color: #8A7F95; }
@media (max-width: 600px) { .ssf-n { grid-template-columns: 1fr 1fr; } }
.gtools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gtool { padding: 12px 12px; gap: 10px; } .gtool .adv-ava { width: 36px; height: 36px; } .gtool b { font-size: .98rem; line-height: 1.2; } .gtool small { font-size: .72rem; } .gtool em { display: none; }
@media (max-width: 860px) { .gtools { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .gtools { grid-template-columns: 1fr; } }
/* replies arrive like texts: one short bubble, then the next */
.cw-row.cw-pop { animation: cwPop .35s cubic-bezier(.2,.8,.3,1.2) both; animation-delay: var(--pd, 0s); }
.cw-row.cw-pop .cw-bub { transform-origin: left bottom; }
@keyframes cwPop { 0% { opacity: 0; transform: translateY(8px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes yiFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cw-row.cw-pop { animation: none; } }
/* love tools */
.gt-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; } .gt-head a { font-size: .82rem; font-weight: 700; color: #1F8A4C; text-decoration: none; }
.tl-h { margin: 6px 0 18px; padding: 24px 26px; border-radius: 22px; color: #DCD5EE; background: radial-gradient(120% 140% at 90% 0%, #5B4A9E, #2E2A66 40%, #171A3A); }
.tl-h h1 { margin: 0 0 4px; font: 500 clamp(1.9rem, 3.4vw, 2.5rem) var(--voice); color: #fff; } .tl-h p { margin: 0; }
.tl-shelf { margin: 0 0 20px; } .tl-shelf h2 { margin: 0 0 10px; font: 600 1.3rem var(--voice); color: var(--ink-t); }
.tst { margin: 6px 0 20px; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid #EFE3D2; }
.ts-top { display: flex; gap: 14px; align-items: center; } .ts-top .adv-ava { width: 60px; height: 60px; flex: none; font-size: 1.4rem; }
.ts-top small { font-size: .74rem; font-weight: 700; color: #A07A12; } .ts-top h1 { margin: 2px 0 2px; font: 600 clamp(1.7rem, 3vw, 2.2rem) var(--voice); color: var(--ink-t); } .ts-top p { margin: 0; color: #6E6680; }
.ts-ex { margin: 18px 0; padding: 14px 16px; border-radius: 14px; background: #FBF7F2; border-left: 3px solid #C9A032; }
.ts-ex small { font-size: .7rem; font-weight: 700; color: #A07A12; } .ts-ex p { margin: 6px 0 0; font: italic 400 1rem/1.5 var(--voice); color: var(--ink-t); }
#toolForm { display: grid; gap: 10px; } #toolForm input[type=text], #toolForm textarea { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid #E6D6BC; font: 400 1rem var(--sans); background: #FFFCF8; box-sizing: border-box; }
#toolForm .btn { justify-self: start; width: auto; padding: 14px 28px; } .ts-att { justify-self: start; font-size: .86rem; font-weight: 600; color: #6B5AA6; cursor: pointer; } .ts-cost { margin: 0; font-size: .78rem; color: #8A7F95; }
@media (max-width: 600px) { #toolForm .btn { width: 100%; } }
.bd-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: -6px 0 16px; }
.bd-tools a { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #EFE3D2; font: 600 .9rem var(--sans); color: var(--ink-t); text-decoration: none; }
@media (max-width: 600px) { .bd-tools { grid-template-columns: 1fr; } }
.qs-mean { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .84rem; font-weight: 600; color: #6B5AA6; text-decoration: none; }
.yr-tool { display: block; margin-top: 4px; font: 700 .72rem var(--sans); color: #F3DDA0; text-decoration: none; }
/* chat window, lean: one column; chats and tools in the header */
.cw1 { max-width: 860px; margin-left: auto; margin-right: auto; } .cw1 .cw-main { flex: 1; min-width: 0; }
.cw-head { position: relative; } .cw-hname { text-decoration: none; color: inherit; } .cw-hava { text-decoration: none; }
.cw-hr { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cw-hr .cw-cr { margin-left: 0; }
.cw-dd { position: relative; } .cw-dd summary { list-style: none; cursor: pointer; padding: 7px 12px; border-radius: 99px; background: #F4EEF7; font: 600 .82rem var(--sans); color: #3B3570; white-space: nowrap; } .cw-dd summary::-webkit-details-marker { display: none; }
.cw-ddt summary { background: linear-gradient(135deg, #FFE9B0, #F2C94C); color: #3A2E00; }
.cw-ddp { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 290px; max-height: 60vh; overflow: auto; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -12px rgba(28,32,64,.35); border: 1px solid #EFE7EA; }
.cw-ddp a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--ink-t); }
.cw-ddp a:hover, .cw-ddp a.on { background: #F7F1EC; } .cw-ddp a b { flex: 1; font: 600 .88rem var(--sans); } .cw-ddp a span { font-size: .72rem; color: #8A7F95; }
.cw-ddp .cw-ddnew { font-weight: 700; color: #1F8A4C; border-bottom: 1px solid #F3ECEE; border-radius: 10px 10px 0 0; } .cw-ddp .cw-ddall { justify-content: center; font-size: .8rem; font-weight: 700; color: #1F8A4C; }
.cw-new1 { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #1F8A4C; color: #fff; text-decoration: none; font-weight: 700; }
@media (max-width: 600px) { .cw-hname small { display: none; } .cw-dd summary { padding: 6px 9px; font-size: .74rem; } .cw-ddp { width: 260px; } }
/* love tools card (Chat side column) */
.tlc { margin: 0 0 14px; border-radius: 18px; background: radial-gradient(120% 140% at 100% 0%, #FFF6DD, #fff 60%); border: 1px solid #EAD9AE; }
.tlc summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; } .tlc summary::-webkit-details-marker { display: none; }
.tlc summary span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #F0CF7A, #C9A032); color: #fff; }
.tlc summary b { flex: 1; font: 600 1.1rem var(--voice); color: var(--ink-t); } .tlc summary em { font-style: normal; color: #A07A12; transition: transform .2s; } .tlc[open] summary em { transform: rotate(180deg); }
.tlc-l { padding: 0 10px 12px; } .tlc-l p { margin: 8px 6px 2px; font-size: .68rem; font-weight: 700; color: #A07A12; }
.tlc-l a { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; text-decoration: none; color: var(--ink-t); } .tlc-l a:hover { background: #FFF4D8; }
.tlc-l a b { flex: 1; font: 600 .88rem var(--sans); } .tlc-l a i { font-style: normal; color: #A07A12; }
/* Tools For You: phones only (on desktop the side card has them) */
@media (min-width: 960px) { .gt-mob { display: none; } }
/* Love Tools card, calmer: white, plum and ink, gold only as a hint */
.tlc { background: #fff; border: 1px solid #EDE4EC; box-shadow: 0 12px 28px -24px rgba(59,53,112,.55); overflow: hidden; }
.tlc summary { padding: 16px 18px; background: linear-gradient(135deg, #2E2A66, #1C2040); }
.tlc summary span { background: rgba(243,221,160,.14); color: #F3DDA0; border: 1px solid rgba(243,221,160,.35); }
.tlc summary b { display: grid; color: #fff; font-size: 1.15rem; line-height: 1.15; } .tlc summary b small { font: 400 .74rem var(--sans); color: #B9B1D3; }
.tlc summary em { color: #CFC6E6; }
.tlc-l { padding: 6px 10px 12px; }
.tlc-l p { margin: 12px 8px 4px; font: 600 .7rem var(--sans); color: #8A7F95; letter-spacing: .02em; }
.tlc-l a { padding: 8px 8px; gap: 12px; border-radius: 12px; }
.tlc-l a .adv-ava { width: 30px; height: 30px; font-size: .8rem; box-shadow: none; }
.tlc-l a b { font: 500 .9rem var(--sans); color: var(--ink-t); } .tlc-l a i { color: #C9BFD4; transition: transform .15s, color .15s; }
.tlc-l a:hover { background: #F7F3FA; } .tlc-l a:hover i { color: #6B5AA6; transform: translateX(2px); }
/* the tools card: a clear title, one line under each tool */
.tlc-h { display: grid; gap: 2px; padding: 16px 18px; background: linear-gradient(135deg, #2E2A66, #1C2040); }
.tlc-h b { font: 600 1.15rem var(--voice); color: #fff; } .tlc-h small { font-size: .76rem; color: #CFC6E6; }
.tlc-l a { align-items: center; } .tlc-l a > span { flex: 1; display: grid; gap: 1px; min-width: 0; }
.tlc-l a > span b { font: 600 .9rem var(--sans); color: var(--ink-t); } .tlc-l a > span small { font-size: .74rem; color: #8A7F95; line-height: 1.3; }
.nm-b { margin: 0 0 22px; } .nm-b .gt-head a { font-size: .82rem; font-weight: 700; color: #1F8A4C; text-decoration: none; }
.nm-l { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; } .nm-l .cs-note { margin: 0; }
.tlc-l a > span:not(.adv-ava) { flex: 1; display: grid; gap: 1px; min-width: 0; } .tlc-l a > .adv-ava { flex: none !important; width: 30px !important; display: grid !important; }
/* phones: tools open in place; the side copy is hidden there */
.gt-mob { margin: 0 0 20px; }
.gt-more summary { list-style: none; cursor: pointer; margin: 6px 8px 0; padding: 10px 0 2px; border-top: 1px solid #F3ECEE; font: 700 .84rem var(--sans); color: #1F8A4C; display: flex; justify-content: space-between; }
.gt-more summary::-webkit-details-marker { display: none; } .gt-more summary em { font-style: normal; transition: transform .2s; } .gt-more[open] summary em { transform: rotate(180deg); }
.gt-more[open] summary { color: #8A7F95; }
@media (max-width: 959px) { .side .tlc, #side .tlc, aside .tlc { display: none; } }
.tlc .gt-more summary { background: none; padding: 10px 0 2px; margin: 6px 8px 0; }
.tlc-l:has(.gt-more[open]) > a { display: none; }
.gt-more[open] summary { border-top: 0; margin-top: 0; }
#typing[hidden], .cw-row[hidden] { display: none !important; }
.cw-end { padding: 7px 12px; border-radius: 99px; border: 1px solid #E6DCE0; background: #fff; font: 600 .8rem var(--sans); color: #6E6680; cursor: pointer; } .cw-end:hover { color: #B03A5B; border-color: #F2B8C9; }
.cw-ended { margin: 6px 14px 14px; padding: 14px 16px; border-radius: 16px; background: #FBF7F2; text-align: center; }
.cw-ended p { margin: 0 0 10px; font-size: .84rem; color: #6E6680; } .cw-ended div { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .cw-ended .btn { width: auto; padding: 10px 18px; font-size: .88rem; }
.feel-now, .rate-g { margin-left: 14px; margin-right: 14px; }
.pg-call { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px 12px; font-size: .84rem; font-weight: 600; color: #6B5AA6; text-decoration: none; }
/* who is waiting: one quiet line */
.wst { display: flex; align-items: center; gap: 12px; margin: -6px 0 20px; padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid #EFE7EA; }
.wst-f { display: flex; flex: none; } .wst-f a { position: relative; margin-left: -8px; } .wst-f a:first-child { margin-left: 0; }
.wst-f .adv-ava { width: 32px; height: 32px; border: 2px solid #fff; } .wst-f i { position: absolute; right: -1px; top: -1px; width: 9px; height: 9px; border-radius: 50%; background: #C2476B; border: 2px solid #fff; }
.wst-t { flex: 1; min-width: 0; display: grid; text-decoration: none; } .wst-t b { font: 600 .9rem var(--sans); color: var(--ink-t); }
.wst-t span { font: italic .86rem var(--voice); color: #6E6680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wst-c { flex: none; font-size: .8rem; font-weight: 700; color: #1F8A4C; text-decoration: none; }
@media (max-width: 520px) { .wst { flex-wrap: wrap; } .wst-c { width: 100%; } }
/* one guide greets her */
.ggr { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; text-decoration: none; }
.ggr .adv-ava { width: 46px; height: 46px; flex: none; border: 2px solid rgba(243,221,160,.6); }
.ggr span { display: grid; gap: 2px; font: italic 400 1.08rem/1.4 var(--voice); color: #F6EFE4; } .ggr small { font: 700 .7rem var(--sans); font-style: normal; color: #F3DDA0; }
/* the reading that answers her question */
.a3-tool { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(243,221,160,.5); background: rgba(243,221,160,.1); cursor: pointer; text-align: left; animation: yiFade .4s ease both; }
.a3-tool .adv-ava { width: 42px; height: 42px; flex: none; } .a3-tool span { flex: 1; display: grid; gap: 2px; } .a3-tool small { font: 700 .7rem var(--sans); color: #F3DDA0; }
.a3-tool b { font: 500 1.1rem/1.3 var(--voice); color: #fff; } .a3-tool em { font-style: normal; font: 700 .86rem var(--sans); color: #1C2040; background: #F2C94C; padding: 8px 14px; border-radius: 99px; }
.cw-cr.low { background: #FFF1CC; color: #7A5A0C; }
/* portraits */
.adv-ava img, .gc-face img, .gp-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.adv-ava { overflow: hidden; } .gc-face { overflow: hidden; } .gc-face:has(img) .gc-mark { display: none; }
.gp-mark { overflow: hidden; }
.gp-story { margin: 12px 0 0; font: 400 1rem/1.6 var(--voice); color: var(--ink-t); }
.gp-sig { margin: 14px 0 0; padding: 14px 18px; border-left: 3px solid #C9A032; background: #FBF7F2; border-radius: 0 12px 12px 0; font: italic 500 1.2rem/1.4 var(--voice); color: #3B3570; }
.gp-sig span { display: block; margin-top: 4px; font: 700 .72rem var(--sans); font-style: normal; color: #A07A12; }
.gprof .gp-mark { width: 150px !important; height: 150px !important; border: 4px solid #fff; box-shadow: 0 14px 30px -14px rgba(28,32,64,.6); }
.fav-r { margin: 0 0 20px; } .fav-l { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fav-l a { flex: none; display: grid; justify-items: center; gap: 6px; text-decoration: none; } .fav-l .adv-ava { width: 64px; height: 64px; border: 3px solid #fff; box-shadow: 0 0 0 2px #E88BA5; }
.fav-l b { font: 600 .82rem var(--sans); color: var(--ink-t); }
/* browse all guides */
.gf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 14px; }
.gf button { padding: 7px 14px; border-radius: 99px; border: 1px solid #E6DCE0; background: #fff; font: 600 .82rem var(--sans); color: #5E5670; cursor: pointer; }
.gf button.on { background: #232650; border-color: #232650; color: #F3DDA0; }
.gf select { margin-left: auto; padding: 7px 12px; border-radius: 99px; border: 1px solid #E6DCE0; background: #fff; font: 600 .82rem var(--sans); color: #5E5670; }
.gs[hidden] { display: none !important; } .gf-none { color: #8A7F95; text-align: center; }
@media (max-width: 600px) { .gf select { margin-left: 0; } }
/* her everyday tools */
.myt { margin: 0 0 22px; }
.myt-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.myt-c { position: relative; } .myt-c > a { display: grid; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px 14px 16px; border-radius: 18px; background: #fff; border: 1px solid #EFE3D2; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.myt-c > a:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -20px rgba(59,53,112,.6); }
.myt-c .adv-ava { width: 44px; height: 44px; margin-bottom: 6px; } .myt-c b { font: 600 1rem/1.25 var(--voice); color: var(--ink-t); padding-right: 18px; } .myt-c small { font-size: .76rem; line-height: 1.35; color: #8A7F95; }
.tstar { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.05rem; color: #C9BFD4; line-height: 1; }
.tstar:hover { color: #C9A032; } .tstar.on { color: #C9A032; }
.tlc-l a { position: relative; padding-right: 34px; } .tlc-l .tstar { position: relative; top: auto; right: auto; margin: 0 0 0 -34px; flex: none; z-index: 2; }
.tlc-l a + .tstar { vertical-align: middle; }
.tlc-l { display: grid; grid-template-columns: 1fr auto; align-items: center; } .tlc-l > p, .tlc-l > details { grid-column: 1 / -1; }
.tlc-l a i { display: none; }
.myt-g { grid-template-columns: repeat(4, minmax(0, 1fr)); } .myt-c b { font-size: .95rem; }
@media (max-width: 700px) { .myt-g { grid-template-columns: 1fr 1fr; } }

/* Welcome back: returning to a tool she has used */
.wb { max-width: 560px; margin: 10px auto 28px; padding: 34px 30px 28px; border-radius: 24px; background: #fff; border: 1px solid #EFE3D2; text-align: center; }
.wb .adv-ava { width: 96px; height: 96px; margin: 0 auto 12px; font-size: 2rem; box-shadow: 0 0 0 4px #FFF6E0, 0 0 0 5px #E8D39A; }
.wb small { display: block; font-size: .76rem; font-weight: 700; color: #A07A12; }
.wb h1 { margin: 4px 0 14px; font: 600 clamp(1.8rem, 4vw, 2.3rem) var(--voice); color: var(--ink-t); }
.wb p { margin: 0 0 10px; color: #6E6680; }
.wb blockquote { margin: 0 auto 16px; padding: 14px 18px; max-width: 440px; border-radius: 16px; background: #FBF6EC; font: italic 500 1.12rem var(--voice); color: var(--ink-t); line-height: 1.45; }
.wb-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 6px; }
.wb-go .btn { width: auto; padding: 14px 24px; text-decoration: none; }
.wb .btn-green { background: #1F8A4C; color: #fff; box-shadow: 0 8px 18px rgba(31, 138, 76, .22), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.wb-more { font-size: .82rem; color: #8A7F95 !important; margin-top: 12px !important; }
@media (max-width: 560px) { .wb { padding: 26px 18px 22px; } .wb-go .btn { width: 100%; } }
/* Profile: breathing room under the signature; two facts, not three repeats */
.gprof .gp-sig { margin: 18px 0 22px; }
.gprof .gp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .gprof .gp-cols { grid-template-columns: 1fr; } }

/* All Guides: portrait cards, filters on one line */
.gf { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gf::-webkit-scrollbar { display: none; }
.gf button, .gf select { flex: none; white-space: nowrap; }
.gs-list { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.gs { display: block; padding: 0; overflow: hidden; border-radius: 20px; border: 1px solid #EFE3D2; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.gs:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(35, 38, 80, .10); border-color: #E3CFA0; }
.gs-pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.gs-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gs:hover .gs-pic img { transform: scale(1.04); }
.gs-fav { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); color: #B0485F; font-size: 1.05rem; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); }
.gs-fav.on { background: #fff; color: #D2335A; }
.gs .gs-txt { display: block; padding: 12px 14px 14px; }
.gs .gs-txt b { font: 600 1.25rem var(--voice); color: var(--ink-t); }
.gs .gs-txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; margin: 3px 0 8px; font-size: .82rem; line-height: 1.35; color: #6E6680; min-height: 2.7em; }
.gs .gs-txt em { display: flex; align-items: center; gap: 6px; font: 600 .78rem 'Outfit', sans-serif; color: #A07A12; }
.gs .gs-txt em i { width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: #1F8A4C; }
.gs .gs-txt em { font-style: normal; }
@media (max-width: 640px) { .gs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gs .gs-txt { padding: 10px 11px 12px; } .gs .gs-txt b { font-size: 1.1rem; } }
.gt-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.gt-r select { padding: 7px 12px; border-radius: 99px; border: 1px solid #E6DCE0; background: #fff; font: 600 .82rem var(--sans); color: #5E5670; }
@media (max-width: 640px) { .gt-r .muted { display: none; } }

/* Buy credits: the top-up window */
.bc { text-align: center; }
.bc-have { margin: 4px 0 6px; font-size: .88rem; color: #6E6680; } .bc-have b { color: #A07A12; }
.bc h2, .bc-done h2 { margin: 0 0 18px; font: 600 clamp(1.6rem, 4vw, 2rem) var(--voice); color: var(--ink-t); }
.bc-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.bc-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 22px 8px 14px; border-radius: 18px; border: 2px solid #EFE3D2; background: #fff; cursor: pointer; font-family: var(--sans); transition: border-color .15s, transform .15s, box-shadow .15s; }
.bc-pack:hover { transform: translateY(-2px); }
.bc-pack.on { border-color: #E0B53A; background: #FFFBEF; box-shadow: 0 10px 24px rgba(224, 181, 58, .22); }
.bc-pack i { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 99px; background: #232650; color: #F3DDA0; font: 700 .66rem var(--sans); font-style: normal; white-space: nowrap; }
.bc-pack i.bv { background: #1F8A4C; color: #fff; }
.bc-pack b { font: 600 1.6rem var(--voice); color: var(--ink-t); }
.bc-pack span { font-size: .74rem; color: #6E6680; }
.bc-pack em { font-style: normal; font-size: .72rem; font-weight: 700; color: #1F8A4C; min-height: 1.1em; }
.bc-pack strong { margin-top: 6px; font: 700 1rem var(--sans); color: var(--ink-t); }
.bc-go { width: 100%; padding: 15px; font-size: 1.02rem; }
.bc-fine { margin: 8px 0 0; font-size: .74rem; color: #8A7F95; }
.bc-circle { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: 16px; background: #232650; color: #F3DDA0; text-align: left; text-decoration: none; }
.bc-circle > span:first-child { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(243, 221, 160, .15); }
.bc-circle span b { display: block; color: #fff; font-size: .9rem; } .bc-circle span { font-size: .78rem; flex: 1; } .bc-circle em { font-style: normal; font-size: 1.3rem; }
.bc-earn { display: inline-block; margin-top: 12px; font-size: .82rem; font-weight: 600; color: #6B5AA6; text-decoration: none; }
.bc-done .bc-big { margin: 6px 0 0; font: 600 3rem var(--voice); color: #A07A12; }
.bc-done p { color: #6E6680; } .bc-done .btn { display: inline-block; width: auto; padding: 14px 28px; text-decoration: none; }
@media (max-width: 480px) { .bc-packs { gap: 6px; } .bc-pack { padding: 20px 4px 12px; } .bc-pack b { font-size: 1.3rem; } .bc-pack span { font-size: .68rem; } }
.bc-page { max-width: 640px; margin: 0 auto 22px; padding: 26px 24px 20px; }
.bc-page h2 { margin-bottom: 4px; } .bc-page .bc-have { margin-bottom: 20px; }

/* The Store: one offer chosen for her, what she owns, a short shelf */
.so-hero { display: flex; align-items: center; gap: 24px; margin: 8px 0 26px; padding: 26px 28px; border-radius: 24px; background: radial-gradient(120% 140% at 0% 0%, #3A3F7A 0%, #232650 55%, #1A1C3D 100%); color: #EDE6F5; text-decoration: none; box-shadow: 0 18px 40px rgba(35, 38, 80, .25); }
.so-hero:hover { transform: translateY(-2px); }
.so-img { flex: none; width: 150px; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 3px rgba(243, 221, 160, .35); }
.so-img img { width: 100%; height: 100%; object-fit: cover; filter: blur(6px) saturate(.8); }
.so-moon { flex: none; position: relative; width: 120px; height: 120px; display: grid; place-content: center; text-align: center; }
.so-moon i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #FFF8E1, #F3DDA0 55%, #C9A032); box-shadow: 0 0 40px rgba(243, 221, 160, .45); }
.so-moon.new i { background: radial-gradient(circle at 38% 35%, #4A4F8A, #2B2E5C 70%); box-shadow: inset 0 0 0 2px rgba(243, 221, 160, .5), 0 0 30px rgba(243, 221, 160, .15); }
.so-moon b, .so-moon small { position: relative; color: #232650; } .so-moon.new b, .so-moon.new small { color: #F3DDA0; }
.so-moon b { font: 600 2.4rem/1 var(--voice); } .so-moon small { font: 700 .72rem var(--sans); text-transform: none; }
.so-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.so-k { font: 700 .74rem var(--sans); color: #F3DDA0; }
.so-txt > b { font: 600 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--voice); color: #fff; }
.so-why { color: #CFC6E0; font-size: .95rem; }
.so-go { align-self: flex-start; margin-top: 8px; padding: 12px 22px; border-radius: 99px; background: var(--yellow, #F2C94C); color: #3A2E00; font: 700 .95rem var(--sans); box-shadow: 0 8px 18px rgba(224, 181, 58, .3), inset 0 -3px 0 rgba(0, 0, 0, .1); }
.so-mine { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.so-mine a { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 99px; background: #fff; border: 1px solid #EFE3D2; text-decoration: none; color: var(--ink-t); }
.so-mine img, .so-mine span { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #FBF6EC; color: #A07A12; }
.so-mine b { font: 600 .88rem var(--sans); }
.so-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.so-c { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid #EFE3D2; text-decoration: none; color: var(--ink-t); }
.so-c:hover { border-color: #E3CFA0; box-shadow: 0 10px 24px rgba(35, 38, 80, .08); }
.so-ck { font: 700 .72rem var(--sans); color: #A07A12; }
.so-c b { font: 600 1.3rem/1.2 var(--voice); }
.so-cl { font-size: .86rem; color: #6E6680; }
.so-c em { margin-top: 6px; font: 700 .9rem var(--sans); font-style: normal; color: #1F8A4C; }
.so-c.sm { padding: 14px 18px; } .so-c.sm b { font-size: 1.1rem; }
.so-circle { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 18px; background: #FBF6EC; border: 1px solid #EBD9AE; text-decoration: none; color: #5E5670; font-size: .86rem; }
.so-circle > span:first-child { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #232650; color: #F3DDA0; }
.so-circle span b { display: block; font: 600 1.1rem var(--voice); color: var(--ink-t); } .so-circle > span:nth-child(2) { flex: 1; }
.so-circle em { font-style: normal; font-weight: 700; color: #232650; white-space: nowrap; }
@media (max-width: 640px) { .so-hero { flex-direction: column; align-items: flex-start; padding: 22px; } .so-img { width: 120px; } .so-moon { width: 90px; height: 90px; } .so-shelf { grid-template-columns: 1fr; } .so-circle { flex-wrap: wrap; } }

/* Ritual booking: deadline, his name, one night or three */
.rt-shut { margin: 0 0 14px; padding: 8px 12px; border-radius: 10px; background: #FFF4E0; color: #8A5A00; font-size: .84rem; font-weight: 600; text-align: center; }
.rt-more { display: inline-block; margin: 8px 0 4px; font-size: .84rem; font-weight: 600; color: #6B5AA6; text-decoration: none; }
.rt-tiers { display: grid; gap: 10px; margin: 16px 0; }
.rt-tiers label { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 2px solid #EFE3D2; background: #fff; cursor: pointer; }
.rt-tiers label.on { border-color: #E0B53A; background: #FFFBEF; }
.rt-tiers input { accent-color: #1F8A4C; }
.rt-tiers span { flex: 1; } .rt-tiers b { display: block; font: 600 1.1rem var(--voice); color: var(--ink-t); } .rt-tiers small { color: #6E6680; font-size: .8rem; }
.rt-tiers i { position: absolute; top: -10px; right: 14px; padding: 2px 10px; border-radius: 99px; background: #232650; color: #F3DDA0; font: 700 .66rem var(--sans); font-style: normal; }
.rt-tiers em { font-style: normal; font: 700 1.1rem var(--sans); color: var(--ink-t); }
.rt-go { display: block; text-align: center; text-decoration: none; }

/* Store as her path: progress, the next step as a short letter, the rest by her question */
.sp-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 6px 0 22px; padding: 0; list-style: none; counter-reset: none; }
.sp-path li { position: relative; text-align: center; }
.sp-path li::before { content: ''; position: absolute; top: 19px; left: -50%; width: 100%; height: 2px; background: #E6DCE0; z-index: 0; }
.sp-path li:first-child::before { display: none; }
.sp-path li.done::before, .sp-path li.cur::before { background: #C9A032; }
.sp-path a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: #8A7F95; }
.sp-path i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid #E6DCE0; font: 700 .95rem var(--sans); font-style: normal; }
.sp-path .done i { background: #C9A032; border-color: #C9A032; color: #fff; }
.sp-path .cur i { background: #232650; border-color: #232650; color: #F3DDA0; box-shadow: 0 0 0 5px rgba(35, 38, 80, .12); }
.sp-path span { font: 600 .82rem var(--sans); } .sp-path .cur span { color: var(--ink-t); } .sp-path .done span { color: #A07A12; }
.sp-next { margin-bottom: 28px; padding: 30px 32px 26px; border-radius: 24px; background: #fff; border: 1px solid #EBD9AE; box-shadow: 0 18px 40px rgba(35, 38, 80, .08); }
.sp-step { margin: 0 0 6px; font: 700 .8rem var(--sans); color: #A07A12; }
.sp-next h2 { margin: 0 0 18px; font: 600 clamp(1.7rem, 3.4vw, 2.4rem)/1.12 var(--voice); color: var(--ink-t); }
.sp-note { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.sp-note img { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.sp-note p { margin: 0; font: italic 400 1.1rem/1.5 var(--voice); color: #3B3570; }
.sp-note p span { display: block; margin-top: 4px; font: 700 .74rem var(--sans); font-style: normal; color: #A07A12; }
.sp-get { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.sp-get li { position: relative; padding-left: 28px; color: var(--ink-t); }
.sp-get li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #E7F4EC; color: #1F8A4C; font-size: .72rem; font-weight: 700; }
.sp-when { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #FFF4E0; color: #6B4A00; font-size: .9rem; }
.sp-buy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sp-buy .btn { width: auto; padding: 15px 30px; font-size: 1.05rem; text-decoration: none; }
.sp-buy small { color: #1F8A4C; font-weight: 600; font-size: .84rem; }
.sp-qs { display: grid; gap: 10px; margin-bottom: 20px; }
.sp-q { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; background: #fff; border: 1px solid #EFE3D2; text-decoration: none; color: var(--ink-t); }
.sp-q:hover { border-color: #E3CFA0; }
.sp-q span { flex: 1; } .sp-q b { display: block; font: 600 1.3rem var(--voice); } .sp-q small { color: #6E6680; font-size: .86rem; }
.sp-q em { font-style: normal; font-weight: 700; color: #1F8A4C; white-space: nowrap; }
@media (max-width: 640px) { .sp-next { padding: 22px 18px; } .sp-path span { font-size: .7rem; } .sp-buy .btn { width: 100%; text-align: center; } .sp-q { flex-wrap: wrap; } }

/* Store catalogue: cover art, her question as the headline, the promise, the price */
.sx-shelf { margin-bottom: 26px; } .sx-sub { margin: -6px 0 14px; color: #6E6680; font-size: .92rem; }
.sx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sx { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid #EFE3D2; text-decoration: none; color: var(--ink-t); transition: transform .2s ease, box-shadow .2s ease; }
.sx:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(35, 38, 80, .10); border-color: #E3CFA0; }
.sx-art { position: relative; display: grid; place-items: center; height: 150px; background: radial-gradient(120% 120% at 20% 0%, var(--c1, #3A3F7A), var(--c2, #1A1C3D)); overflow: hidden; }
.sx-art > b { font: 400 4rem/1 var(--voice); color: rgba(255, 246, 224, .92); text-shadow: 0 0 30px rgba(243, 221, 160, .5); }
.sx-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: blur(7px) saturate(.8); transform: scale(1.1); }
.sx-moon { background: radial-gradient(120% 120% at 20% 0%, #2E3263, #11132B); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sx-moon i { position: absolute; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #FFF8E1, #F3DDA0 55%, #C9A032); box-shadow: 0 0 50px rgba(243, 221, 160, .45); }
.sx-moon.new i { background: radial-gradient(circle at 38% 35%, #4A4F8A, #22254D 70%); box-shadow: inset 0 0 0 2px rgba(243, 221, 160, .55), 0 0 36px rgba(243, 221, 160, .18); }
.sx-moon b, .sx-moon small { position: relative; color: #232650; } .sx-moon.new b, .sx-moon.new small { color: #F3DDA0; }
.sx-moon b { font: 600 2.4rem/1 var(--voice); } .sx-moon small { font: 700 .74rem var(--sans); }
.sx-t { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; flex: 1; }
.sx-k { font: 700 .72rem var(--sans); color: #A07A12; }
.sx-t > b { font: 600 1.45rem/1.15 var(--voice); }
.sx-l { color: #6E6680; font-size: .88rem; }
.sx-d { color: #8A5A00; font-size: .8rem; font-weight: 600; }
.sx-p { margin-top: auto; padding-top: 10px; font: 700 1rem var(--sans); color: #1F8A4C; } .sx-p em { font-style: normal; }
@media (max-width: 640px) { .sx-grid { grid-template-columns: 1fr; } .sx-art { height: 120px; } }
/* an odd last card runs full width, art beside the text */
@media (min-width: 641px) { .sx-grid > .sx:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; } .sx-grid > .sx:last-child:nth-child(odd) .sx-art { width: 42%; height: auto; min-height: 170px; flex: none; } }
.sx-moon.day i { background: radial-gradient(circle at 38% 35%, #FFE3EA, #F2B8C9 55%, #C9637F); box-shadow: 0 0 44px rgba(242, 184, 201, .45); }
.sx-moon.day b, .sx-moon.day small { color: #5A1E33; }
.sx-d small { display: block; margin-top: 2px; font-weight: 400; color: #8A7F95; }
.moon .disc.day { background: radial-gradient(circle at 38% 35%, #FFE3EA, #F2B8C9 55%, #C9637F); }
/* the Love Reading: one wide card listing everything inside */
.sx-grid > .sx.sx-wide { grid-column: 1 / -1; flex-direction: row; }
.sx-wide .sx-art { width: 36%; height: auto; min-height: 220px; flex: none; }
.sx-wide .sx-art > b { font-size: 5rem; }
.sx-in { margin: 6px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.sx-in li { position: relative; padding-left: 22px; font-size: .9rem; color: var(--ink-t); }
.sx-in li::before { content: '✓'; position: absolute; left: 0; color: #1F8A4C; font-weight: 700; }
@media (max-width: 640px) { .sx-grid > .sx.sx-wide { flex-direction: column; } .sx-wide .sx-art { width: auto; min-height: 120px; } .sx-in { grid-template-columns: 1fr; } }
@media (min-width: 641px) { .sx-wide + .sx:last-child { grid-column: 1 / -1; flex-direction: row; } .sx-wide + .sx:last-child .sx-art { width: 36%; height: auto; min-height: 150px; flex: none; } }
.rt-h { margin: 16px 0 0; font: 600 1.15rem var(--voice); color: var(--ink-t); }
.rt-tiers i.pw { background: #1F8A4C; color: #fff; }

/* Store cards with paintings */
.sx-pic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #1A1C3D; }
.sx-pic > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.sx:hover .sx-pic > img { transform: scale(1.04); }
.sx-blur > img { filter: blur(7px) saturate(.8); transform: scale(1.1); object-position: center 25%; }
.sx-when { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 99px; background: rgba(20, 22, 48, .62); backdrop-filter: blur(6px); color: #F3DDA0; font: 700 .74rem var(--sans); }
.sx-by { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: #3B3570; font: 700 .72rem var(--sans); }
.sx-by img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.sx-by.sp { padding: 5px 11px; background: rgba(255, 246, 224, .92); color: #7A5A10; }
.sx-t > b { margin-top: 2px; }
.sx-why { font-size: .8rem; color: #8A7F95; font-style: italic; }
.sx-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid #F3ECE4; }
.sx-t { gap: 5px; }
.sx-pr { font: 700 1.2rem var(--sans); color: var(--ink-t); } .sx-pr small { font-size: .74rem; font-weight: 600; color: #8A7F95; }
.sx-go { padding: 8px 16px; border-radius: 99px; background: #1F8A4C; color: #fff; font: 700 .84rem var(--sans); white-space: nowrap; }
.sx:hover .sx-go { background: #19763F; }
.sx-grid > .sx.sx-wide .sx-pic, .sx-wide + .sx:last-child .sx-pic { width: 44%; flex: none; aspect-ratio: auto; min-height: 240px; }
.sx-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sx-head img { flex: none; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #FFF6E0, 0 0 0 4px #E8D39A; }
.sx-head .sec { margin: 0 0 4px; } .sx-head .sx-sub { margin: 0; }
@media (max-width: 640px) { .sx-grid > .sx.sx-wide .sx-pic { width: auto; min-height: 0; aspect-ratio: 4 / 3; } }
/* no more stretched odd cards: rituals and spells always fill two columns */
@media (min-width: 641px) { .sx-grid > .sx:last-child:nth-child(odd):not(.sx-wide) { grid-column: auto; flex-direction: column; } .sx-grid > .sx:last-child:nth-child(odd):not(.sx-wide) .sx-art, .sx-grid > .sx:last-child:nth-child(odd):not(.sx-wide) .sx-pic { width: auto; min-height: 0; } .sx-wide + .sx:last-child:not(.sx-wide) { grid-column: auto; flex-direction: column; } }
.sp-paint { margin: 6px 0 18px; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 18px 40px rgba(35, 38, 80, .18); }
.sp-paint img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ The Store, full width ============ */
@media (min-width: 900px) { .page.solo.wide:has(.sx2) { grid-template-columns: minmax(0, 1220px); } }
.sx2 { padding-bottom: 20px; }
.sx2-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 4px 0 22px; }
.sx2-top h1 { margin: 0; font: 600 clamp(2.2rem, 4.5vw, 3.2rem)/1 var(--voice); color: var(--ink-t); }
.sx2-top p { margin: 8px 0 0; color: #6E6680; }
.sx2-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.sx2-nav a { padding: 8px 14px; border-radius: 99px; border: 1px solid #E6DCE0; background: #fff; font: 600 .84rem var(--sans); color: #5E5670; text-decoration: none; }
.sx2-nav a:hover { border-color: #C9A032; color: var(--ink-t); }

/* the one offer for her: painting beside Catherine's letter */
.sx2-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); margin-bottom: 44px; border-radius: 28px; overflow: hidden; background: #fff; border: 1px solid #EBD9AE; box-shadow: 0 24px 60px rgba(35, 38, 80, .12); }
.sx2-hpic { position: relative; min-height: 440px; background: #1A1C3D; }
.sx2-hpic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx2-hpic.blur img { filter: blur(9px) saturate(.8); transform: scale(1.12); object-position: center 25%; }
.sx2-hpic .sx-when { top: 18px; left: 18px; font-size: .8rem; padding: 7px 14px; }
.sx2-htxt { padding: 38px 40px 34px; display: flex; flex-direction: column; justify-content: center; }
.sx2-htxt h2 { margin: 0 0 18px; font: 600 clamp(1.9rem, 3.2vw, 2.6rem)/1.1 var(--voice); color: var(--ink-t); }
.sx2-htxt .sp-when { background: #FFF4E0; }

/* sections */
.sx2-sec, .sx2-band { margin-bottom: 44px; scroll-margin-top: 90px; }
.sx2-h { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.sx2-h h2 { margin: 0 0 4px; font: 600 clamp(1.7rem, 3vw, 2.2rem)/1.1 var(--voice); color: var(--ink-t); }
.sx2-h p { margin: 0; max-width: 720px; color: #6E6680; }
.sx2-h img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(243, 221, 160, .35), 0 0 0 4px #C9A032; }
.sx2-grid { display: grid; gap: 18px; }
.sx2-grid.g1 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.sx2-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx2-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx2-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx2 .sx { flex-direction: column !important; grid-column: auto !important; }
.sx2 .sx .sx-pic { width: auto !important; min-height: 0 !important; aspect-ratio: 4 / 3 !important; }
.sx2 .sx-t > b { font-size: 1.35rem; }
.sx2 .sx-in { grid-template-columns: 1fr; gap: 5px; }

/* Catherine's rituals: a night-blue band */
.sx2-band { padding: 34px 34px 36px; border-radius: 30px; background: radial-gradient(120% 90% at 0% 0%, #3A3F7A 0%, #232650 45%, #14163A 100%); box-shadow: 0 24px 60px rgba(20, 22, 58, .28); position: relative; overflow: hidden; }
.sx2-band::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 20%, rgba(243,221,160,.7), transparent), radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 88% 34%, rgba(243,221,160,.6), transparent), radial-gradient(1px 1px at 40% 8%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 58% 26%, rgba(243,221,160,.5), transparent); pointer-events: none; }
.sx2-band .sx2-h, .sx2-band .sx2-grid { position: relative; }
.sx2-band .sx2-h h2 { color: #FFF6E0; } .sx2-band .sx2-h p { color: #CFC6E0; }
.sx2-band .sx { border-color: transparent; box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }

/* Cupid's Circle banner */
.sx2-circle { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; padding: 30px 36px; border-radius: 28px; text-decoration: none; background: linear-gradient(120deg, #6B2442 0%, #9C3A5E 55%, #C2476B 100%); box-shadow: 0 20px 50px rgba(107, 36, 66, .25); }
.sx2-cl { display: flex; flex-direction: column; gap: 4px; max-width: 640px; color: #FFE3EA; }
.sx2-ck { font: 700 .78rem var(--sans); color: #F3DDA0; }
.sx2-cl b { font: 600 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--voice); color: #fff; }
.sx2-circle .btn { width: auto; padding: 15px 28px; }
.sx2 .so-mine img { object-fit: cover; }

@media (max-width: 1100px) { .sx2-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .sx2-hero { grid-template-columns: 1fr; } .sx2-hpic { min-height: 260px; } .sx2-htxt { padding: 26px 22px; } .sx2-grid.g3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sx2-grid.g2, .sx2-grid.g4 { grid-template-columns: 1fr; } .sx2-band { padding: 24px 16px; border-radius: 22px; } .sx2-circle { padding: 24px 20px; } .sx2-circle .btn { width: 100%; text-align: center; } }
.sx2-h:not(:has(img)) { display: block; }

/* ============ The Store, lean and shoppable ============ */
.st-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 24px; }
.st-tabs button { padding: 9px 18px; border-radius: 99px; border: 1px solid #E6DCE0; background: #fff; font: 600 .88rem var(--sans); color: #5E5670; cursor: pointer; }
.st-tabs button.on { background: #232650; border-color: #232650; color: #F3DDA0; }
.st-page [hidden] { display: none !important; }
.st-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); margin-bottom: 40px; border-radius: 24px; overflow: hidden; background: #232650; text-decoration: none; min-height: 280px; }
.st-hpic { position: relative; overflow: hidden; }
.st-hpic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.st-hpic.blur img { filter: blur(9px) saturate(.8); transform: scale(1.15); object-position: center 25%; }
.st-hero:hover .st-hpic:not(.blur) img { transform: scale(1.03); }
.st-htxt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 34px 40px; color: #CFC6E0; }
.st-hk { font: 700 .78rem var(--sans); color: #F3DDA0; }
.st-htxt b { font: 600 clamp(1.8rem, 3vw, 2.5rem)/1.1 var(--voice); color: #fff; }
.st-htxt .btn { width: auto; margin-top: 8px; padding: 14px 26px; }
.st-sec { margin-bottom: 40px; }
.st-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.st-h h2 { margin: 0; font: 600 clamp(1.6rem, 2.6vw, 2rem) var(--voice); color: var(--ink-t); }
.st-h p { margin: 0; color: #8A7F95; font-size: .92rem; }
.st-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; }
.shp { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink-t); }
.shp-pic { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: #1A1C3D; margin-bottom: 8px; }
.shp-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.shp-pic.blur img { filter: blur(8px) saturate(.8); transform: scale(1.12); object-position: center 25%; }
.shp:hover .shp-pic:not(.blur) img { transform: scale(1.05); }
.shp-when { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 99px; background: rgba(20, 22, 48, .66); backdrop-filter: blur(6px); color: #F3DDA0; font: 700 .72rem var(--sans); }
.shp-q { font: 600 1.15rem/1.25 var(--voice); }
.shp-n { font-size: .8rem; color: #8A7F95; }
.shp-p { font: 700 1rem var(--sans); color: var(--ink-t); margin-top: 2px; } .shp-p small { font-size: .74rem; font-weight: 600; color: #8A7F95; }
.shp:hover .shp-q { color: #6B2442; }
.st-circle { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; padding: 18px 24px; border-radius: 18px; background: #FBF6EC; border: 1px solid #EBD9AE; text-decoration: none; color: #5E5670; }
.st-circle b { font: 600 1.2rem var(--voice); color: var(--ink-t); margin-right: 6px; }
.st-circle em { font-style: normal; font-weight: 700; color: #232650; }
@media (max-width: 1000px) { .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .st-hero { grid-template-columns: 1fr; } .st-hpic { min-height: 200px; } .st-htxt { padding: 24px 22px; } .shp-q { font-size: 1.02rem; } }
/* Store: 800px max */
@media (min-width: 900px) { .page.solo.wide:has(.sx2) { grid-template-columns: minmax(0, 800px); } }
.st-page .st-grid { gap: 22px 16px; }
.st-page .shp-q { font-size: 1.02rem; }
.st-page .shp-when { font-size: .66rem; padding: 4px 8px; left: 8px; bottom: 8px; }
.st-page .st-hero { min-height: 240px; }
.st-page .st-htxt { padding: 28px 30px; }
.st-page .st-htxt b { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

/* The First Meeting */
.fm-face { display: flex; align-items: center; gap: 14px; margin: 4px 0 22px; padding: 10px 16px 10px 10px; border-radius: 18px; background: #FBF6EC; border: 1px solid #EBD9AE; text-decoration: none; color: var(--ink-t); }
.fm-face img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center 25%; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #E3CFA0; }
.fm-face.veiled img { filter: blur(6px) saturate(.8); }
.fm-face small { display: block; font-size: .76rem; color: #8A7F95; } .fm-face b { font: 600 1.25rem var(--voice); }
.fm-face.veiled b { font: 700 .9rem var(--sans); color: #1F8A4C; }
.fm-wait { margin: 20px 0; font: italic 1.15rem var(--voice); color: #6E6680; text-align: center; }
.fm .sr-in > p { font: 400 1.14rem/1.75 var(--voice); color: var(--ink-t); }
.fm .sr-in > p.fm-last { font-size: 1.35rem; font-style: italic; color: #6B2442; text-align: center; margin: 28px 0; }
.fm-vis { margin: 26px 0; padding: 22px 24px; border-radius: 20px; background: linear-gradient(160deg, #2E3263, #1A1C3D); color: #EDE6F5; text-align: center; }
.fm-vis .sr-ek { color: #F3DDA0; font: 700 .78rem var(--sans); margin: 0 0 10px; }
.fm-vis p { margin: 4px 0; font: italic 1.08rem/1.6 var(--voice); }
.fm-vis .btn { width: auto; margin-top: 14px; padding: 12px 26px; }
.btn-green { background: #1F8A4C; color: #fff; }
.fm-felt { color: #F3DDA0 !important; font-style: normal !important; font-size: .95rem !important; margin-top: 12px !important; }
.fm-next { margin: 26px 0 8px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #EBD9AE; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fm-next b { font: 600 1.3rem var(--voice); color: var(--ink-t); }
.fm-next .btn { width: auto; padding: 14px 28px; text-decoration: none; }
.fm-start { position: relative; display: block; margin: 18px 0 10px; border-radius: 26px; overflow: hidden; text-decoration: none; min-height: 300px; }
.fm-start .sart { position: absolute; inset: 0; height: 100%; }
.fm-sface { position: absolute; top: 28px; right: 32px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px rgba(243, 221, 160, .5), 0 12px 30px rgba(0, 0, 0, .35); }
.fm-sface img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .fm-sface.veiled img { filter: blur(6px); }
.fm-sin { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 34px 32px; max-width: 460px; color: #E9E1EE; }
.fm-sin small { font: 700 .78rem var(--sans); color: #F3DDA0; } .fm-sin b { font: 600 clamp(2rem, 4vw, 2.6rem)/1.05 var(--voice); color: #fff; }
.fm-sin .btn { margin-top: 10px; width: auto; padding: 13px 24px; font-style: normal; }
.fm-link { display: block; margin: 16px 0 22px; padding: 18px 22px; border-radius: 18px; background: linear-gradient(160deg, #2E3263, #1A1C3D); text-decoration: none; color: #CFC6E0; }
.fm-link .fm-lk { display: block; font: 700 .78rem var(--sans); color: #F3DDA0; } .fm-link b { display: block; margin: 4px 0; font: 600 1.4rem var(--voice); color: #fff; }
@media (max-width: 600px) { .fm-sface { width: 84px; height: 84px; top: 18px; right: 18px; } .fm-sin { padding: 120px 22px 26px; } }
.fm-sin, .fm-sface { z-index: 3; } .fm-sin > span, .fm-sin b { text-shadow: 0 1px 12px rgba(10, 20, 40, .6); }
.fm-vis .btn { display: inline-block; }
/* His Side and Future Memory */
.fm-his { margin: 22px 0 0; padding: 20px 22px; border-radius: 20px; background: #FBF6EC; border: 1px solid #EBD9AE; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fm-his b { font: 600 1.2rem/1.3 var(--voice); color: var(--ink-t); max-width: 460px; }
.fm-his .btn { width: auto; padding: 12px 24px; text-decoration: none; }
.sxe-k { font: 700 .74rem var(--sans); color: #A07A12; }
.sx-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0; }
.sxe { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #EFE3D2; text-decoration: none; color: var(--ink-t); }
.sxe:hover { border-color: #E3CFA0; } .sxe b { font: 600 1.12rem/1.25 var(--voice); } .sxe em { margin-top: auto; padding-top: 6px; font-style: normal; font-weight: 700; color: #1F8A4C; }

/* Your Story in the nav (rose), and the Store as a header icon */
.ln-nav a.nv-story { position: relative; color: #FFD6E2; border: 1px solid rgba(242,184,201,.45); background: rgba(242,184,201,.1); }
.ln-nav a.nv-story.on { background: rgba(242,184,201,.22); color: #FFF0F4; }
.nv-heart { font-style: normal; margin-right: 6px; color: #F2A7BD; font-size: .85em; }
.tabs a.nv-story { color: #C2476B; font-weight: 700; }
.ln-store { position: relative; color: #E9E1EE; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; text-decoration: none; }
.ln-store:hover, .ln-store.on { background: rgba(255, 255, 255, .1); color: #fff; }
.dr-feat { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.df-story { background: linear-gradient(150deg, #FBE3EA, #F2C4D2); color: #6B2442 !important; }
.df-story span { background: #fff; color: #C2476B; } .df-story small { color: #8C3A55; }
@media (max-width: 900px) { .ln-store { display: none !important; } }
/* the Store: a labelled pill, easy to find */
.ln-store { width: auto; height: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: 99px; border: 1px solid rgba(242, 184, 201, .5); background: rgba(242, 184, 201, .12); color: #FFE3EA; font: 700 .9rem var(--sans); }
.ln-store svg { width: 18px; height: 18px; }
.ln-store:hover, .ln-store.on { background: rgba(242, 184, 201, .25); color: #fff; }
@media (max-width: 900px) { .ln-store { display: inline-flex !important; padding: 6px 8px; } .ln-store span { display: none; } }
.fm-start .sart, .fm-start .sart * { z-index: 0 !important; } .fm-start .fm-sin { z-index: 5 !important; }
.fm-start::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(12, 32, 48, .82) 0%, rgba(12, 32, 48, .55) 50%, rgba(12, 32, 48, 0) 78%); pointer-events: none; }

/* Header: never wrap; tighten between 960 and 1320px */
.ln-nav a, .ln-credits, .ln-store, .ln-streak { white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1320px) {
  .ln-bar { padding-left: 18px !important; padding-right: 18px !important; }
  .ln-nav { gap: 0 !important; }
  .ln-nav a, .ln-nav a.nv-man, .ln-nav a.nv-story, .ln-nav a.nv-chat { padding: 6px 9px !important; font-size: .9rem !important; }
  .ln-credits .cr-w, .ln-store span { display: none; }
  .ln-store { padding: 6px 9px; }
  .ln-right { gap: 8px !important; }
}
@media (min-width: 960px) and (max-width: 1120px) {
  .ln-nav a, .ln-nav a.nv-man, .ln-nav a.nv-story, .ln-nav a.nv-chat { padding: 6px 6px !important; font-size: .84rem !important; }
  .ln-sub { display: none; }
  .ln-nav .nv-sep, .ln-nav hr { display: none; }
}
.ln-right .ln-streak { display: none !important; }   /* lean header: the rose streak lives on Today, not in the bar */

/* ============ Your Story, redesigned ============ */
/* Story Home: the cover */
.sh-hero { position: relative; overflow: hidden; border-radius: 26px; min-height: 380px; margin: 14px 0 30px; display: flex; align-items: flex-end; box-shadow: 0 24px 60px rgba(20, 22, 58, .25); }
.sh-cov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 36, .05) 0%, rgba(10, 14, 36, .35) 45%, rgba(10, 14, 36, .9) 100%); }
.sh-face { position: absolute; top: 22px; right: 22px; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px rgba(243, 221, 160, .55), 0 14px 30px rgba(0, 0, 0, .4); }
.sh-face img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .sh-face.veiled img { filter: blur(6px); }
.sh-in { position: relative; padding: 28px 30px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: #EDE6F5; }
.sh-k { margin: 0; font: 700 .78rem var(--sans); color: #F3DDA0; }
.sh-in h1 { margin: 0; font: 600 clamp(2.2rem, 5vw, 3.2rem)/1 var(--voice); color: #fff; }
.sh-prog { width: 100%; max-width: 420px; } .sh-prog span { display: block; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.sh-prog i { display: block; height: 100%; background: linear-gradient(90deg, #F3DDA0, #F2A7BD); border-radius: 99px; }
.sh-prog small { display: block; margin-top: 6px; font-size: .8rem; color: #CFC6E0; }
.sh-in .btn { width: auto; padding: 14px 26px; text-decoration: none; }
.sh-ticket { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: rgba(31, 138, 76, .9); color: #fff; font: 700 .78rem var(--sans); }
.sh-ticket.wait { background: rgba(255, 255, 255, .14); color: #F3DDA0; }
/* chapters as episodes */
.sh-eps { display: grid; gap: 8px; margin-bottom: 28px; }
.sh-ep { display: flex; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border-radius: 16px; background: #fff; border: 1px solid #EFE3D2; text-decoration: none; color: var(--ink-t); }
.sh-ep.next { border-color: #E0B53A; box-shadow: 0 8px 20px rgba(224, 181, 58, .15); }
.sh-ep.read { opacity: .78; }
.sh-th { flex: none; width: 84px; height: 60px; border-radius: 11px; overflow: hidden; } .sh-th img { width: 100%; height: 100%; object-fit: cover; }
.sh-et { flex: 1; min-width: 0; } .sh-et small { display: block; font-size: .74rem; color: #8A7F95; } .sh-et b { display: block; font: 600 1.12rem var(--voice); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-ep em { flex: none; font-style: normal; font: 700 .74rem var(--sans); padding: 4px 10px; border-radius: 99px; }
.b-read { color: #1F8A4C; } .b-free { background: #E7F4EC; color: #1F8A4C; } .b-wait { background: #FFF4E0; color: #8A5A00; } .b-lock { background: #F4EFF6; color: #8A7F95; }
/* a shelf of covers */
.sh-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.sh-c { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink-t); }
.sh-ci { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; margin-bottom: 6px; box-shadow: 0 10px 22px rgba(20, 22, 58, .15); }
.sh-ci img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .sh-c:hover .sh-ci img { transform: scale(1.05); }
.sh-ci em { position: absolute; left: 8px; bottom: 8px; padding: 4px 9px; border-radius: 99px; background: rgba(20, 22, 48, .7); color: #F3DDA0; font: 700 .7rem var(--sans); font-style: normal; backdrop-filter: blur(4px); }
.sh-c small { font: 700 .72rem var(--sans); color: #A07A12; } .sh-c b { font: 600 1rem/1.25 var(--voice); }
.fm-start .fm-cov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* the reader */
.sreader { position: relative; }
.sr-scene { height: 240px; overflow: hidden; } .sr-scene img { width: 100%; height: 100%; object-fit: cover; }
.sr-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; } .sr-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #F3DDA0, #C2476B); }
.sr-tools { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 6px; }
.sr-tools button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(20, 22, 48, .6); color: #fff; font: 700 .9rem var(--sans); cursor: pointer; backdrop-filter: blur(6px); }
.sreader.rs-2 .sr-in > p { font-size: 1.3rem; } .sreader.rs-3 .sr-in > p { font-size: 1.45rem; }
.sreader.night { background: #15172E; } .sreader.night .sr-in > p, .sreader.night .sr-in h1, .sreader.night .sr-react, .sreader.night .sr-you { color: #E4DDF0 !important; }
.sreader.night .fm-face, .sreader.night .sr-face, .sreader.night .fm-next, .sreader.night .fm-his { background: #1F2240; border-color: #2E3263; }
/* his lines */
.sr-in > p.sr-his { position: relative; padding: 10px 14px 10px 54px; border-radius: 16px; background: #FDF1F4; border-left: 3px solid #E8A5B8; }
.sreader.night .sr-in > p.sr-his { background: #2A2240; }
.sh-av { position: absolute; left: 10px; top: 12px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; } .sh-av img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
/* text messages */
.sr-phone { margin: 10px 0 14px; display: flex; flex-direction: column; align-items: flex-start; }
.sr-phone.me { align-items: flex-end; }
.sp-from { font: 700 .72rem var(--sans); color: #8A7F95; margin: 0 0 3px 12px; }
.sp-b { margin: 0 !important; max-width: 80%; padding: 10px 14px; border-radius: 20px; font: 400 1rem/1.4 var(--sans) !important; animation: spPop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.sp-b.him { background: #E9E6F2; color: #2A2350 !important; border-bottom-left-radius: 6px; }
.sp-b.me { background: #3478F6; color: #fff !important; border-bottom-right-radius: 6px; animation-delay: .3s; }
@keyframes spPop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
/* choices */
.sr-choose { margin-top: 26px; }
.sr-q { font: 600 1.4rem var(--voice) !important; text-align: center; }
.sr-c { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0 0 10px; padding: 18px 20px !important; border-radius: 18px !important; border: 2px solid #EFE3D2 !important; background: #fff !important; font: 600 1.05rem/1.35 var(--sans) !important; color: var(--ink-t) !important; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s; }
.sr-c:hover { transform: translateY(-2px); border-color: #C9A032 !important; }
.sr-c.prem { background: linear-gradient(120deg, #FFF6DA, #FFE9B0) !important; border-color: #E0B53A !important; box-shadow: 0 0 0 4px rgba(224, 181, 58, .15), 0 10px 26px rgba(224, 181, 58, .25); animation: premGlow 2.4s ease-in-out infinite; }
.sr-c.prem em { flex: none; font-style: normal; padding: 6px 12px; border-radius: 99px; background: #232650; color: #F3DDA0; font: 700 .82rem var(--sans); }
@keyframes premGlow { 50% { box-shadow: 0 0 0 7px rgba(224, 181, 58, .1), 0 12px 30px rgba(224, 181, 58, .35); } }
/* the chapter ending */
.sr-done { margin: 22px 0 10px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid #EBD9AE; box-shadow: 0 14px 34px rgba(20, 22, 58, .08); }
.sreader.night .sr-done { background: #1F2240; border-color: #2E3263; color: #E4DDF0; }
.sr-dk { margin: 0 0 14px !important; font: 700 .8rem var(--sans) !important; color: #1F8A4C !important; text-align: center; }
.sr-hm { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sr-hh { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #FDE7EE; color: #D2335A; font-size: 1.4rem; animation: hbeat 1s ease 2; }
@keyframes hbeat { 30% { transform: scale(1.25); } 60% { transform: scale(.95); } }
.sr-hm > div { flex: 1; } .sr-hm b { font: 600 1.05rem var(--sans); } .sr-hm b em { font-style: normal; color: #D2335A; }
.sr-hbar { display: block; height: 8px; margin: 6px 0 2px; border-radius: 99px; background: #F4E6EA; overflow: hidden; }
.sr-hbar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #F2A7BD, #D2335A); border-radius: 99px; animation: hfill 1.2s ease both; }
@keyframes hfill { from { width: 0; } }
.sr-hm small { font-size: .78rem; color: #8A7F95; }
.sr-mcard { perspective: 800px; margin: 0 0 16px; height: 90px; }
.mc-in { position: relative; height: 100%; transform-style: preserve-3d; animation: mflip 1s .6s ease both; }
.mc-f, .mc-b { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.mc-f { background: linear-gradient(135deg, #2E3263, #1A1C3D); color: #F3DDA0; font-size: 2rem; }
.mc-b { transform: rotateY(180deg); flex-direction: column; background: linear-gradient(135deg, #FFF6DA, #FFE3EA); border: 1px solid #E0B53A; }
.mc-b small { font: 700 .72rem var(--sans); color: #A07A12; } .mc-b b { font: 600 1.3rem var(--voice); color: #6B2442; }
@keyframes mflip { to { transform: rotateY(180deg); } }
.sr-tease { display: flex; gap: 14px; align-items: center; margin-top: 16px; padding: 12px; border-radius: 16px; background: #FBF6EC; }
.sreader.night .sr-tease { background: #262a4a; }
.sr-tease img { flex: none; width: 110px; height: 110px; border-radius: 12px; object-fit: cover; }
.sr-tease > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .sr-tease small { font: 700 .74rem var(--sans); color: #A07A12; } .sr-tease b { font: 600 1.25rem var(--voice); }
.sr-tease .btn { width: auto; padding: 11px 20px; text-decoration: none; }
.sr-tease .sh-ticket.wait { background: #FFF4E0; color: #8A5A00; }
@media (max-width: 640px) { .sh-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sh-hero { min-height: 340px; } .sh-face { width: 72px; height: 72px; } .sr-scene { height: 180px; } .sr-tease img { width: 80px; height: 80px; } }
.ssc-img { display: block; flex: none; width: 110px; height: 110px; border-radius: 14px; overflow: hidden; } .ssc-img img { width: 100%; height: 100%; object-fit: cover; }
.sart-img { display: block; height: 180px; overflow: hidden; } .sart-img.sm { height: 96px; } .sart-img img { width: 100%; height: 100%; object-fit: cover; }
.sto-lock .sr-scene { height: 220px; }

/* Mobile menu: three feature rows, a smaller avatar */
.dr-top .dr-me { width: 52px !important; height: 52px !important; font-size: 1.2rem !important; box-shadow: 0 0 0 3px #FFF3D6 !important; flex: none; }
.dr-feat { grid-template-columns: 1fr !important; gap: 8px !important; }
.dr-feat a { display: grid !important; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px !important; min-height: 0 !important; border-radius: 16px !important; }
.dr-feat a > span { grid-row: 1 / 3; width: 40px !important; height: 40px !important; margin: 0 !important; display: grid; place-items: center; border-radius: 50%; }
.dr-feat a b { font-size: 1.2rem !important; line-height: 1.15 !important; margin: 0 !important; } .dr-feat a b br { display: none; }
.dr-feat a small { margin: 0 !important; font-size: .8rem !important; line-height: 1.3; }
/* tap-to-fill options under the wish and the thanks */
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pg-chip { padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(243, 221, 160, .35); background: rgba(243, 221, 160, .08); color: #F3DDA0; font: 500 .84rem var(--sans); cursor: pointer; text-align: left; }
.pg-chip:hover { background: rgba(243, 221, 160, .18); }
.pg-chip.on { background: #F3DDA0; color: #232650; border-color: #F3DDA0; }
.pg-thank .pg-chip { border-color: rgba(194, 71, 107, .35); background: #fff; color: #8C3A55; }
.pg-thank .pg-chip:hover { background: #FDE7EE; }
.pg-thank .pg-chip.on { background: #C2476B; color: #fff; border-color: #C2476B; }
.pg-wish.pg-thank .pg-chip { border-color: rgba(194, 71, 107, .4) !important; background: #fff !important; color: #8C3A55 !important; }
.pg-wish.pg-thank .pg-chip:hover { background: #FDE7EE !important; }
.pg-wish.pg-thank .pg-chip.on { background: #C2476B !important; color: #fff !important; border-color: #C2476B !important; }