/*
  Leyra Moonlit UI · moonlit.css
  ------------------------------------------------------------------
  One stylesheet for every Moonlit page. Mobile first: the phone layout is the default and the
  desktop layout switches on at 1024px wide. Every class starts with "ml-" so this file can sit
  beside the old site.css during the move without either breaking the other.

  Sections
    1. Fonts
    2. Tokens (colours, type, space, radius, motion) and the morning theme
    3. Base and accessibility
    4. The living sky
    5. App shell: phone bar, desktop sidebar, quick exit, public header
    6. Page structure and layout helpers
    7. Type
    8. Buttons and links
    9. Cards, tiles and lists
   10. People: avatars and person rows
   11. Badges, chips and status labels
   12. Form controls: fields, switches, segmented choices, accordions
   13. Mood orbs
   14. Shared blocks: try this, say it, advert, helplines, toast, dialog, moon, progress, keys
   15. Pages (one block per page, in the order of the page list in README.md)
   16. Motion and reduced motion

  Rules for anyone editing this file
    - Use the tokens. Never type a hex colour outside section 2.
    - Keep touch targets at least 44px tall on the phone.
    - Text on the sky must keep 4.5:1 contrast; the muted colour is the lowest allowed.
    - Don't add page-specific inline styles in the views; add a class here instead.
*/

/* 1. Fonts ------------------------------------------------------------------------------------ */
/* Self-hosted from Fontsource (SIL Open Font Licence; licence files sit beside the fonts). */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/figtree-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/figtree-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/figtree-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/figtree-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/figtree-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/figtree-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/figtree-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/figtree-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 2. Tokens ----------------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* The night sky */
  --ml-sky-top: #1F1638;
  --ml-sky-mid: #17112A;
  --ml-sky-low: #120E1B;
  --ml-sky-base: #100C18;
  --ml-ground: #15111F;            /* page background under the sky */
  --ml-mist-violet: #5A3F9A;
  --ml-mist-teal: #1E5A7A;
  --ml-mist-deep: #3B2A66;
  --ml-mist-sea: #20475E;
  --ml-star: #F4EFE7;
  --ml-star-lilac: #D9CCFF;

  /* Text */
  --ml-text: #F4EFE7;              /* body text on the sky */
  --ml-text-reading: #DCD4E8;      /* long readings */
  --ml-soft: #CFC6DA;              /* secondary text */
  --ml-muted: #A79DB8;             /* hints and labels; lowest contrast allowed (about 7:1) */
  --ml-link: #D9CCFF;              /* links and back buttons */
  --ml-on-row: #E6DEF2;            /* labels under orbs, list rows */

  /* Actions and accents */
  --ml-gold: #F2C26B;
  --ml-gold-ink: #1A1424;          /* text on gold */
  --ml-focus: #F2C26B;             /* keyboard focus ring */
  --ml-gold-bright: #F7D58C;
  --ml-gold-glow: rgba(242, 194, 107, 0.35);
  --ml-gold-line: rgba(242, 194, 107, 0.4);
  --ml-gold-tint: rgba(242, 194, 107, 0.14);
  --ml-mint: #9FD9C9;
  --ml-mint-tint: rgba(159, 217, 201, 0.14);
  --ml-lilac-tint: rgba(217, 204, 255, 0.12);
  --ml-coral: #F0A58A;
  --ml-plan-ink-bg: #2A2240;

  /* Quick exit */
  --ml-exit-bg: rgba(58, 31, 42, 0.88);
  --ml-exit-ink: #F6C9B8;
  --ml-exit-line: rgba(246, 201, 184, 0.25);

  /* Surfaces */
  --ml-glass: rgba(255, 255, 255, 0.045);
  --ml-glass-line: rgba(255, 255, 255, 0.09);
  --ml-glass-soft: rgba(255, 255, 255, 0.03);
  --ml-glass-soft-line: rgba(255, 255, 255, 0.07);
  --ml-pill: rgba(255, 255, 255, 0.06);
  --ml-pill-line: rgba(255, 255, 255, 0.18);
  --ml-divider: rgba(255, 255, 255, 0.08);
  --ml-field: rgba(14, 10, 24, 0.72);
  --ml-inset: rgba(8, 6, 14, 0.45);
  --ml-bar: rgba(14, 10, 22, 0.78);
  --ml-sidebar: rgba(12, 9, 20, 0.55);
  --ml-blur: blur(18px);

  /* Mood colours: mid, edge, glow (r, g, b) */
  --ml-mood-calm: #9FD9C9;        --ml-mood-calm-edge: #2F6E62;        --ml-mood-calm-rgb: 159, 217, 201;
  --ml-mood-happy: #F2C26B;       --ml-mood-happy-edge: #8A5A10;       --ml-mood-happy-rgb: 242, 194, 107;
  --ml-mood-tired: #9C8FB8;       --ml-mood-tired-edge: #463B6A;       --ml-mood-tired-rgb: 156, 143, 184;
  --ml-mood-low: #7D72A3;         --ml-mood-low-edge: #2A2344;         --ml-mood-low-rgb: 125, 114, 163;
  --ml-mood-tense: #E7957A;       --ml-mood-tense-edge: #8A3C26;       --ml-mood-tense-rgb: 231, 149, 122;
  --ml-mood-overwhelmed: #C77DA8; --ml-mood-overwhelmed-edge: #6A2E52; --ml-mood-overwhelmed-rgb: 199, 125, 168;

  /* Type */
  --ml-sans: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --ml-serif: 'Instrument Serif', Georgia, serif;
  --ml-fs-display: 46px;
  --ml-fs-h1: 38px;
  --ml-fs-serif-l: 30px;
  --ml-fs-serif-m: 23px;
  --ml-fs-h2: 18px;
  --ml-fs-body: 16px;
  --ml-fs-reading: 17px;
  --ml-fs-small: 14px;
  --ml-fs-meta: 13px;
  --ml-fs-kicker: 12px;

  /* Space and shape */
  --ml-gutter: 20px;
  --ml-page-gap: 26px;
  --ml-r-s: 14px;
  --ml-r-m: 20px;
  --ml-r-l: 24px;
  --ml-r-pill: 999px;
  --ml-tap: 44px;
  --ml-bar-height: 84px;
  --ml-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Motion */
  --ml-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 1024px) {
  :root {
    --ml-fs-display: 60px;
    --ml-fs-h1: 46px;
    --ml-gutter: 44px;
    --ml-page-gap: 30px;
  }
}

/* The light morning look (Today before noon, when the person allows it). */
[data-theme="morning"] {
  color-scheme: light;
  --ml-ground: #EDEAF4;
  --ml-text: #1D1730;
  --ml-text-reading: #2C2443;
  --ml-soft: #3E3654;
  --ml-muted: #5B5270;
  --ml-link: #4B3A8C;
  --ml-on-row: #3E3654;
  --ml-gold-text: #7A4F00;
  --ml-sidebar: rgba(255, 255, 255, 0.72);
  --ml-focus: #4B3A8C;
  --ml-glass: rgba(255, 255, 255, 0.8);
  --ml-glass-line: #DCD6E8;
  --ml-glass-soft: rgba(255, 255, 255, 0.6);
  --ml-glass-soft-line: #DCD6E8;
  --ml-pill: #FFFFFF;
  --ml-pill-line: #CFC7E0;
  --ml-divider: #DCD6E8;
  --ml-field: #FFFFFF;
  --ml-inset: rgba(255, 255, 255, 0.7);
  --ml-bar: rgba(255, 255, 255, 0.9);
  --ml-exit-bg: rgba(255, 236, 228, 0.92);
  --ml-exit-ink: #8A3C26;
  --ml-exit-line: #E9C3B4;
}

/* 3. Base ------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.ml-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ml-ground);
  color: var(--ml-text);
  font-family: var(--ml-sans);
  font-size: var(--ml-fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Base rules use :where() so they have no weight and any component class wins over them. */
:where(.ml-body) :where(img, svg) { max-width: 100%; }
:where(.ml-body) :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
:where(.ml-body) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.ml-body) :where(a) { color: var(--ml-link); text-underline-offset: 3px; }
:where(.ml-body) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.ml-body) :where(button) { cursor: pointer; }
:where(.ml-body) :where(fieldset) { border: 0; margin: 0; padding: 0; min-width: 0; }
.ml-body :focus-visible { outline: 2px solid var(--ml-focus); outline-offset: 3px; border-radius: 8px; }
.ml-body [hidden] { display: none !important; }
.ml-icon { flex-shrink: 0; display: block; }

.ml-skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 16px; border-radius: var(--ml-r-s);
  background: var(--ml-gold); color: var(--ml-gold-ink); font-weight: 700; text-decoration: none;
}
.ml-skip:focus { top: 12px; }
.ml-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 4. The living sky -------------------------------------------------------------------------- */
.ml-sky {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--ml-sky-top) 0%, var(--ml-sky-mid) 30%, var(--ml-sky-low) 65%, var(--ml-sky-base) 100%);
}
.ml-mist { position: absolute; border-radius: 50%; filter: blur(64px); }
.ml-mist--a { left: -140px; top: 90px; width: 460px; height: 230px; background: var(--ml-mist-violet); opacity: 0.34; }
.ml-mist--b { left: 170px; top: -60px; width: 360px; height: 220px; background: var(--ml-mist-teal); opacity: 0.32; }
.ml-mist--c { left: 30%; top: 560px; width: 380px; height: 220px; background: var(--ml-mist-deep); opacity: 0.28; filter: blur(72px); }
.ml-mist--d { left: -120px; top: 78%; width: 400px; height: 240px; background: var(--ml-mist-sea); opacity: 0.22; filter: blur(72px); }
.ml-stars { position: absolute; inset: 0; background-repeat: repeat; }
.ml-stars--a { background-image: url('../img/stars-a.svg'); background-size: 560px 560px; }
.ml-stars--b { background-image: url('../img/stars-b.svg'); background-size: 830px 830px; background-position: 140px 90px; }
.ml-stars--c { background-image: url('../img/stars-c.svg'); background-size: 690px 690px; background-position: 310px 260px; }
@media (min-width: 1024px) {
  .ml-mist--a { left: 10%; top: 6%; width: 720px; height: 360px; }
  .ml-mist--b { left: 55%; top: -10%; width: 640px; height: 340px; }
  .ml-mist--c { left: 40%; top: 55%; width: 640px; height: 320px; }
  .ml-mist--d { left: 5%; top: 80%; width: 600px; height: 300px; }
}
[data-theme="morning"] .ml-sky { background: var(--ml-ground); }
[data-theme="morning"] .ml-mist--a { background: #D6CCF2; opacity: 0.7; filter: blur(50px); top: 120px; height: 150px; }
[data-theme="morning"] .ml-mist--b { background: #F6D9C4; opacity: 0.6; filter: blur(50px); top: 20px; height: 130px; }
[data-theme="morning"] .ml-mist--c, [data-theme="morning"] .ml-mist--d, [data-theme="morning"] .ml-stars { display: none; }

/* 5. App shell -------------------------------------------------------------------------------- */
.ml-shell { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; }
.ml-main {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 22px var(--ml-gutter) calc(var(--ml-bar-height) + 32px + var(--ml-safe-bottom));
}
.ml-shell--bare .ml-main, .ml-shell--focus .ml-main { padding-bottom: calc(32px + var(--ml-safe-bottom)); }

/* Phone: the bottom bar with Today, Circle, Log, Ask and Journal */
.ml-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: calc(var(--ml-bar-height) + var(--ml-safe-bottom));
  padding: 6px 8px calc(12px + var(--ml-safe-bottom));
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
  background: var(--ml-bar);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border-top: 1px solid var(--ml-glass-soft-line);
}
.ml-tabbar__item {
  min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  color: var(--ml-muted); font-size: 12px; font-weight: 500; text-decoration: none;
}
.ml-tabbar__item { color: var(--ml-muted); }
.ml-tabbar__item[aria-current="page"] { color: var(--ml-text); font-weight: 600; }
.ml-tabbar__item[aria-current="page"] .ml-icon { color: var(--ml-gold); }
.ml-tabbar__item--log { color: var(--ml-text); font-weight: 600; }
.ml-tabbar__log {
  width: 56px; height: 56px; margin-top: -30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ml-gold); color: var(--ml-gold-ink);
  box-shadow: 0 0 0 6px var(--ml-sky-low), 0 8px 28px rgba(242, 194, 107, 0.5);
}
[data-theme="morning"] .ml-tabbar__log { box-shadow: 0 0 0 6px #FFFFFF, 0 8px 28px rgba(242, 194, 107, 0.5); }

/* Quick exit: the same round button at the top right of every signed-in phone screen */
.ml-quick-exit {
  position: fixed; top: calc(22px + env(safe-area-inset-top, 0px)); right: max(20px, calc(50vw - 280px)); z-index: 30;
  width: var(--ml-tap); height: var(--ml-tap); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ml-exit-bg); color: var(--ml-exit-ink); border: 1px solid var(--ml-exit-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  text-decoration: none;
}
.ml-quick-exit { color: var(--ml-exit-ink); }
/* Leave room for it in page headers */
.ml-has-exit .ml-topbar, .ml-has-exit .ml-back-row { padding-right: 56px; }

/* Desktop sidebar */
.ml-sidebar { display: none; }
@media (min-width: 1024px) {
  .ml-shell--app { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .ml-main { max-width: none; margin: 0; padding: 40px 48px 48px; }
  .ml-shell--bare .ml-main { padding-bottom: 48px; }
  .ml-tabbar, .ml-quick-exit { display: none; }
  .ml-has-exit .ml-topbar, .ml-has-exit .ml-back-row { padding-right: 0; }
  .ml-sidebar {
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 6px;
    padding: 26px 16px 22px;
    background: var(--ml-sidebar);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border-right: 1px solid var(--ml-glass-soft-line);
  }
}
.ml-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 20px; color: var(--ml-text); text-decoration: none; }
.ml-brand { color: var(--ml-text); text-decoration: none; }
.ml-brand__name { font-family: var(--ml-serif); font-size: 30px; line-height: 1; }
.ml-sidebar__log { width: 100%; }
.ml-sidebar__nav { display: flex; flex-direction: column; gap: 4px; }
.ml-sidebar__nav--main { margin-top: 18px; }
.ml-sidebar__label { margin: 22px 14px 6px !important; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ml-muted); }
.ml-sidebar__link {
  height: 42px; padding: 0 14px; border-radius: var(--ml-r-s);
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.ml-sidebar__link { color: var(--ml-soft); text-decoration: none; }
.ml-sidebar__nav--main .ml-sidebar__link { height: 46px; }
.ml-sidebar__link:hover { background: rgba(255, 255, 255, 0.05); color: var(--ml-text); }
.ml-sidebar__link[aria-current="page"] { background: rgba(255, 255, 255, 0.08); color: var(--ml-text); font-weight: 600; }
.ml-sidebar__link[aria-current="page"] .ml-icon { color: var(--ml-gold); }
.ml-sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
.ml-sidebar__you .ml-meta { font-size: 12px; }
.ml-sidebar__you { padding: 10px 12px; border-radius: 16px; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.ml-sidebar__you { color: var(--ml-text); text-decoration: none; }
.ml-sidebar__you[aria-current="page"], .ml-sidebar__you:hover { background: rgba(255, 255, 255, 0.06); }
.ml-sidebar__exit {
  height: 40px; padding: 0 14px; border-radius: 20px;
  display: flex; align-items: center; gap: 8px;
  background: var(--ml-exit-bg); color: var(--ml-exit-ink);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.ml-sidebar__exit { color: var(--ml-exit-ink); text-decoration: none; }
.ml-sidebar__exit .ml-kbd { margin-left: auto; border-color: rgba(246, 201, 184, 0.35); color: var(--ml-exit-ink); }

/* Public pages: a simple header with the logo, a few links and Sign in */
.ml-public-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.ml-public-head .ml-brand { padding: 0; }
.ml-public-head .ml-brand__name { font-size: 28px; }
.ml-public-nav { display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 500; }
.ml-public-nav a { color: var(--ml-soft); text-decoration: none; }
.ml-public-nav a[aria-current="page"] { color: var(--ml-text); font-weight: 600; }
.ml-public-nav__wide { display: none; }
@media (min-width: 1024px) {
  .ml-shell--public .ml-main { max-width: 1440px; margin: 0 auto; padding: 26px 72px 40px; }
  .ml-public-nav__wide { display: inline; }
  .ml-public-head { margin-bottom: 26px; }
  .ml-public-head .ml-brand__name { font-size: 32px; }
}

/* 6. Page structure and layout helpers ------------------------------------------------------- */
.ml-page { display: flex; flex-direction: column; gap: var(--ml-page-gap); }
.ml-stack { display: flex; flex-direction: column; gap: 14px; }
.ml-stack--xs { gap: 4px; }
.ml-stack--s { gap: 8px; }
.ml-stack--m { gap: 18px; }
.ml-stack--l { gap: 26px; }
.ml-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ml-row--nowrap { flex-wrap: nowrap; }
.ml-row--between { justify-content: space-between; }
.ml-row--baseline { align-items: baseline; }
.ml-row--top { align-items: flex-start; }
.ml-grow { flex: 1 1 auto; min-width: 0; }
.ml-self-start { align-self: flex-start; }
/* Show or hide by screen size. These only hide; they never set a display value, so components keep theirs. */
@media (max-width: 1023.98px) { .ml-desk-only { display: none !important; } }
@media (min-width: 1024px) { .ml-phone-only { display: none !important; } }

/* Two columns on desktop: the main column and a side column */
.ml-split { display: flex; flex-direction: column; gap: var(--ml-page-gap); }
@media (min-width: 1024px) {
  .ml-split { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 56px; align-items: start; }
  .ml-split--wide { grid-template-columns: minmax(0, 1fr) 420px; gap: 44px; }
  .ml-split--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .ml-split--left { grid-template-columns: 380px minmax(0, 1fr); gap: 44px; }
  .ml-split__aside { position: sticky; top: 40px; }
}
.ml-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ml-grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1024px) {
  .ml-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ml-grid-2--desk-gap { gap: 14px; }
}

/* The top of a signed-in page: a date or kicker on the left and the avatar on the right */
.ml-topbar { min-height: var(--ml-tap); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ml-page-head { display: flex; flex-direction: column; gap: 6px; }
.ml-page-head--tight { gap: 2px; }
.ml-back-row { min-height: var(--ml-tap); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ml-back {
  min-height: var(--ml-tap); margin-left: -8px; padding: 0 8px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.ml-back { color: var(--ml-link); text-decoration: none; }
@media (min-width: 1024px) { .ml-back--phone { display: none; } }

.ml-section { display: flex; flex-direction: column; gap: 14px; }
.ml-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ml-divider { height: 1px; background: var(--ml-divider); border: 0; margin: 0; }

/* 7. Type ------------------------------------------------------------------------------------- */
.ml-kicker { font-size: var(--ml-fs-kicker); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ml-gold); display: flex; align-items: center; gap: 8px; }
[data-theme="morning"] .ml-kicker { color: var(--ml-gold-text); }
.ml-display { font-family: var(--ml-serif); font-weight: 400; font-size: var(--ml-fs-display); line-height: 1.02; letter-spacing: -0.005em; text-wrap: balance; }
.ml-h1 { font-family: var(--ml-serif); font-weight: 400; font-size: var(--ml-fs-h1); line-height: 1.05; }
.ml-h1--l { font-size: 40px; }
@media (min-width: 1024px) { .ml-h1--l { font-size: 50px; line-height: 1; } }
.ml-serif-l { font-family: var(--ml-serif); font-weight: 400; font-size: var(--ml-fs-serif-l); line-height: 1.1; }
.ml-serif-m { font-family: var(--ml-serif); font-weight: 400; font-size: 25px; line-height: 1.15; }
.ml-quote { font-family: var(--ml-serif); font-weight: 400; font-size: var(--ml-fs-serif-m); line-height: 1.25; }
.ml-quote--i { font-style: italic; }
.ml-h2 { font-size: var(--ml-fs-h2); font-weight: 600; line-height: 1.3; }
.ml-h3 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ml-h3--gold { color: var(--ml-gold); font-size: 14px; }
[data-theme="morning"] .ml-h3--gold { color: var(--ml-gold-text); }
.ml-lede { font-size: 16px; line-height: 1.5; color: var(--ml-soft); }
@media (min-width: 1024px) { .ml-lede--desk-l { font-size: 17px; line-height: 1.55; } }
.ml-reading { font-size: var(--ml-fs-reading); line-height: 1.55; color: var(--ml-text-reading); }
.ml-body-text { font-size: 15px; line-height: 1.55; }
.ml-small { font-size: var(--ml-fs-small); line-height: 1.5; }
.ml-meta { font-size: var(--ml-fs-meta); line-height: 1.45; color: var(--ml-muted); }
.ml-soft { color: var(--ml-soft); }
.ml-muted { color: var(--ml-muted); }
.ml-gold { color: var(--ml-gold); }
.ml-strong { font-weight: 600; }
.ml-basis { display: flex; gap: 8px; align-items: flex-start; font-size: var(--ml-fs-meta); line-height: 1.45; color: var(--ml-muted); }
.ml-basis .ml-icon { margin-top: 1px; }
.ml-nowrap { white-space: nowrap; }
.ml-prose { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--ml-text-reading); }
.ml-prose h3 { font-size: 16px; font-weight: 600; color: var(--ml-text); }
.ml-prose ul { padding-left: 1.2em; list-style: disc; display: flex; flex-direction: column; gap: 6px; }

/* 8. Buttons and links ------------------------------------------------------------------------ */
.ml-btn {
  height: var(--ml-tap); padding: 0 18px; border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--ml-pill-line); background: var(--ml-pill); color: var(--ml-text);
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}
.ml-btn { color: var(--ml-text); text-decoration: none; }
.ml-btn:hover { background: rgba(255, 255, 255, 0.1); }
.ml-btn:active { transform: scale(0.98); }
.ml-btn--ghost { background: transparent; }
.ml-btn--gold, .ml-btn--gold {
  border: 0; background: var(--ml-gold); color: var(--ml-gold-ink); font-weight: 600;
}
.ml-btn--gold:hover { background: var(--ml-gold-bright); }
.ml-btn--glow { box-shadow: 0 6px 24px var(--ml-gold-glow); }
.ml-btn--s { height: 40px; padding: 0 16px; border-radius: 20px; font-size: 14px; }
.ml-btn--l { height: 48px; padding: 0 22px; border-radius: 24px; font-size: 16px; font-weight: 700; }
.ml-btn--block { width: 100%; }
/* The big primary action at the end of a form */
.ml-btn--primary, .ml-btn--primary {
  width: 100%; height: 56px; border-radius: 28px; border: 0;
  background: var(--ml-gold); color: var(--ml-gold-ink);
  font-size: 17px; font-weight: 700;
  box-shadow: 0 8px 28px rgba(242, 194, 107, 0.35);
}
.ml-btn--primary:hover { background: var(--ml-gold-bright); }
.ml-btn--danger { border-color: rgba(240, 165, 138, 0.5); color: var(--ml-coral); background: transparent; }
.ml-btn[disabled], .ml-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.ml-icon-btn {
  width: var(--ml-tap); height: var(--ml-tap); flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ml-pill-line); background: rgba(255, 255, 255, 0.08); color: var(--ml-text);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.ml-icon-btn { color: var(--ml-text); text-decoration: none; }

.ml-link-gold {
  min-height: var(--ml-tap); display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; text-decoration: none; align-self: flex-start;
}
.ml-link-gold { color: var(--ml-gold); text-decoration: none; }
[data-theme="morning"] .ml-link-gold { color: var(--ml-gold-text); }
.ml-link-quiet { background: none; border: 0; padding: 0; min-height: 36px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ml-link-quiet { color: var(--ml-link); }

/* 9. Cards, tiles and lists ------------------------------------------------------------------- */
.ml-card {
  padding: 20px; border-radius: var(--ml-r-l);
  background: var(--ml-glass); border: 1px solid var(--ml-glass-line);
  -webkit-backdrop-filter: var(--ml-blur); backdrop-filter: var(--ml-blur);
  display: flex; flex-direction: column; gap: 12px;
}
.ml-card--s { padding: 16px; border-radius: 22px; }
.ml-card--soft { background: var(--ml-glass-soft); border-color: var(--ml-glass-soft-line); }
.ml-card--list { padding: 0 16px; gap: 0; border-radius: 22px; }
.ml-card--gold {
  background: linear-gradient(160deg, rgba(242, 194, 107, 0.16), rgba(242, 194, 107, 0.03) 70%);
  border: 1px solid var(--ml-gold-line);
}
.ml-card--inset { background: var(--ml-inset); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ml-card--plain { background: transparent; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme="morning"] .ml-card--gold { background: linear-gradient(160deg, #FFF3DB, #FFFFFF 70%); border-color: #E2B85E; }

/* "More for today" tiles */
.ml-tile {
  min-height: 96px; padding: 14px; border-radius: var(--ml-r-m);
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  background: var(--ml-glass); border: 1px solid var(--ml-glass-line);
  -webkit-backdrop-filter: var(--ml-blur); backdrop-filter: var(--ml-blur);
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.ml-tile { color: var(--ml-text); text-decoration: none; }
.ml-tile:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); }
.ml-tile__icon { color: var(--ml-gold); display: flex; }
.ml-tile__title { font-size: 15px; font-weight: 600; line-height: 1.25; }
.ml-tile__line { font-size: 12.5px; color: var(--ml-muted); }
.ml-tile__text { display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 1024px) { .ml-tile { min-height: 84px; } }

/* Rows inside a list card */
.ml-list { display: flex; flex-direction: column; }
.ml-list__row {
  min-height: 64px; padding: 10px 0;
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--ml-divider);
  text-decoration: none; color: inherit; background: none; border-left: 0; border-right: 0; border-bottom: 0;
  width: 100%; text-align: left; font: inherit;
}
.ml-list__row { color: var(--ml-text); text-decoration: none; }
.ml-list > .ml-list__row:first-child, .ml-list > :first-child > .ml-list__row { border-top: 0; }
.ml-list__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ml-list__title { font-size: 15px; font-weight: 500; }
.ml-list__title--strong { font-weight: 600; }
.ml-list__line { font-size: 13px; line-height: 1.4; color: var(--ml-muted); }
.ml-list__chev { color: var(--ml-muted); }
.ml-group { display: flex; flex-direction: column; gap: 8px; }
.ml-group__title { font-size: 13px; font-weight: 600; color: var(--ml-muted); padding: 0 4px; }

/* A rounded row that links somewhere (for example "Alex shared how they feel") */
.ml-chip-row {
  padding: 12px 16px; border-radius: 28px;
  display: flex; align-items: center; gap: 14px;
  background: var(--ml-glass-soft); border: 1px solid var(--ml-glass-soft-line);
  -webkit-backdrop-filter: var(--ml-blur); backdrop-filter: var(--ml-blur);
  text-decoration: none;
}
.ml-chip-row { color: var(--ml-text); text-decoration: none; }

/* 10. People ---------------------------------------------------------------------------------- */
.ml-avatar {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); color: var(--ml-text);
  border: 1px solid var(--ml-pill-line);
  font-size: 15px; font-weight: 600; line-height: 1;
}
.ml-avatar--connected { border: 2px solid var(--ml-gold); }
.ml-avatar--private { border: 1.5px dashed rgba(244, 239, 231, 0.55); background: rgba(255, 255, 255, 0.04); }
.ml-avatar--you { background: var(--ml-gold); color: var(--ml-gold-ink); border: 0; font-weight: 700; }
.ml-avatar--s { width: 32px; height: 32px; font-size: 13px; }
.ml-avatar--l { width: 56px; height: 56px; font-size: 20px; }
.ml-avatar--xl { width: 64px; height: 64px; font-size: 22px; }
.ml-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ml-soft); }
.ml-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.ml-legend__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ml-gold); }
.ml-legend__dot--private { border: 1.5px dashed rgba(244, 239, 231, 0.6); }

/* 11. Badges, chips and status labels --------------------------------------------------------- */
.ml-badge { font-family: var(--ml-sans); letter-spacing: 0; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; line-height: 1.5; }
.ml-badge--all { background: var(--ml-mint-tint); color: var(--ml-mint); }
.ml-badge--paid { background: var(--ml-plan-ink-bg); color: var(--ml-gold); }
[data-theme="morning"] .ml-badge--paid { background: #F4E8CC; color: var(--ml-gold-text); }
.ml-badge--sponsored { background: rgba(255, 255, 255, 0.08); color: var(--ml-soft); }

.ml-chip {
  min-height: 36px; padding: 0 14px; border-radius: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ml-pill-line); background: rgba(255, 255, 255, 0.05); color: var(--ml-text);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.ml-chip { color: var(--ml-text); text-decoration: none; }
button.ml-chip { cursor: pointer; }
.ml-chip[aria-pressed="true"], .ml-chip[aria-checked="true"], .ml-chip--on, .ml-chip:has(input:checked) {
  background: var(--ml-text); color: var(--ml-ground); border-color: var(--ml-text); font-weight: 600;
}
.ml-chip--on, .ml-chip:has(input:checked) { color: var(--ml-ground); }
.ml-chip--gold[aria-pressed="true"], .ml-chip--gold:has(input:checked) { background: var(--ml-gold); color: var(--ml-gold-ink); border-color: var(--ml-gold); }
.ml-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ml-chip:has(input:focus-visible) { outline: 2px solid var(--ml-focus); outline-offset: 3px; }
.ml-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ml-chip--static { cursor: default; background: rgba(255, 255, 255, 0.06); }
.ml-chip--tint-coral { background: rgba(231, 149, 122, 0.16); border-color: transparent; color: #F6C9B8; }
.ml-chip--tint-mint { background: var(--ml-mint-tint); border-color: transparent; color: #CFEDE4; }

.ml-status { align-self: flex-start; padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ml-status--received, .ml-status--idea-new { background: var(--ml-lilac-tint); color: var(--ml-link); }
.ml-status--fixed, .ml-status--done, .ml-status--available { background: var(--ml-mint-tint); color: var(--ml-mint); }
.ml-status--idea, .ml-status--planned { background: var(--ml-gold-tint); color: var(--ml-gold); }
.ml-status--taken, .ml-status--closed { background: rgba(255, 255, 255, 0.07); color: var(--ml-muted); }

/* 12. Form controls --------------------------------------------------------------------------- */
.ml-field { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 600; }
.ml-field__hint { font-size: 13px; font-weight: 400; color: var(--ml-muted); }
.ml-input, .ml-textarea, .ml-select {
  width: 100%; border-radius: 16px; border: 1px solid var(--ml-pill-line);
  background: var(--ml-field); color: var(--ml-text);
  font-family: inherit; font-size: 16px; font-weight: 400;
}
.ml-input, .ml-select { height: 52px; padding: 0 14px; }
.ml-textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; min-height: 96px; }
.ml-input::placeholder, .ml-textarea::placeholder { color: var(--ml-muted); opacity: 1; }
.ml-input:focus-visible, .ml-textarea:focus-visible, .ml-select:focus-visible { outline: 2px solid var(--ml-focus); outline-offset: 1px; border-color: transparent; }
.ml-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23A79DB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.ml-select option { background: #1A1424; color: #F4EFE7; }
.ml-input-icon { position: relative; display: block; }
.ml-input-icon .ml-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ml-muted); pointer-events: none; }
.ml-input-icon .ml-input { padding-left: 46px; }
.ml-field-error { font-size: 13px; font-weight: 500; color: var(--ml-coral); }
.ml-input[aria-invalid="true"], .ml-textarea[aria-invalid="true"] { border-color: var(--ml-coral); }
@media (min-width: 1024px) {
  .ml-input--desk, .ml-select--desk { height: 46px; font-size: 15px; border-radius: 14px; }
}

/* Switches: a <button role="switch" aria-checked> (or a checkbox with role="switch") */
.ml-switch-row {
  width: 100%; min-height: 60px; padding: 8px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 0; background: transparent; color: var(--ml-text); text-align: left; font: inherit; cursor: pointer;
}
.ml-switch-row + .ml-switch-row { border-top: 1px solid var(--ml-divider); }
.ml-switch-row__text { display: flex; flex-direction: column; gap: 2px; }
.ml-switch-row__title { font-size: 15px; font-weight: 500; }
.ml-switch-row__hint { font-size: 13px; line-height: 1.4; color: var(--ml-muted); }
.ml-switch {
  position: relative; flex-shrink: 0;
  width: 48px; height: 28px; border-radius: 14px;
  background: #3A3150; transition: background-color 0.2s;
}
.ml-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #CFC6DA;
  transition: transform 0.2s var(--ml-ease), background-color 0.2s;
}
[aria-checked="true"] > .ml-switch, .ml-switch-input:checked + .ml-switch { background: var(--ml-gold); }
[aria-checked="true"] > .ml-switch::after, .ml-switch-input:checked + .ml-switch::after { transform: translateX(20px); background: var(--ml-gold-ink); }
.ml-switch--s { width: 44px; height: 26px; border-radius: 13px; }
.ml-switch--s::after { width: 20px; height: 20px; }
[aria-checked="true"] > .ml-switch--s::after { transform: translateX(18px); }
.ml-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.ml-switch-row:has(.ml-switch-input:focus-visible) { outline: 2px solid var(--ml-focus); outline-offset: 3px; border-radius: 10px; }
.ml-switch--fixed { background: var(--ml-gold); opacity: 0.5; }
.ml-switch--fixed::after { transform: translateX(20px); background: var(--ml-gold-ink); }

/* Segmented choice (radio buttons that look like a pill bar) */
.ml-segment {
  padding: 4px; border-radius: 24px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
}
.ml-segment__opt {
  position: relative; min-height: 40px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--ml-soft); font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none;
  border: 0; background: transparent; padding: 0 10px;
}
.ml-segment__opt { color: var(--ml-soft); text-decoration: none; }
.ml-segment__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ml-segment__opt:has(input:checked), .ml-segment__opt[aria-checked="true"], .ml-segment__opt[aria-current="page"], .ml-segment__opt[aria-selected="true"] {
  background: var(--ml-text); color: var(--ml-ground); font-weight: 600;
}
.ml-segment__opt:has(input:focus-visible) { outline: 2px solid var(--ml-focus); outline-offset: 2px; }
.ml-segment__opt .ml-badge { font-size: 10px; }

/* Choice cards (a radio with a title and a line, for example on Tell us) */
.ml-choice {
  position: relative; width: 100%; min-height: 64px; padding: 12px 16px; border-radius: 18px;
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: var(--ml-text);
}
.ml-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ml-choice:has(input:checked) { border: 1.5px solid var(--ml-gold); background: linear-gradient(160deg, rgba(242, 194, 107, 0.16), rgba(242, 194, 107, 0.04)); }
.ml-choice:has(input:focus-visible) { outline: 2px solid var(--ml-focus); outline-offset: 3px; }
.ml-choice__icon { color: var(--ml-gold); display: flex; }
.ml-choice__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ml-choice__title { font-size: 15.5px; font-weight: 600; }
.ml-choice__line { font-size: 13px; color: var(--ml-muted); }

/* Accordion: a <details> with a styled <summary> */
.ml-acc { border-top: 1px solid var(--ml-divider); }
.ml-acc:first-child { border-top: 0; }
.ml-acc > summary {
  min-height: 56px; padding: 10px 0; list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 15px; font-weight: 500;
}
.ml-acc > summary::-webkit-details-marker { display: none; }
.ml-acc > summary .ml-acc__chev { color: var(--ml-muted); transition: transform 0.2s; }
.ml-acc[open] > summary .ml-acc__chev { transform: rotate(90deg); }
.ml-acc__body { padding: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ml-soft); }
/* A group accordion that sits inside its own glass card */
.ml-acc-card { border-radius: 22px; background: var(--ml-glass); border: 1px solid var(--ml-glass-line); -webkit-backdrop-filter: var(--ml-blur); backdrop-filter: var(--ml-blur); }
.ml-acc-card > summary { min-height: 66px; padding: 12px 16px; list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; }
.ml-acc-card > summary::-webkit-details-marker { display: none; }
.ml-acc-card[open] > summary .ml-acc__chev { transform: rotate(90deg); }
.ml-acc-card > summary .ml-acc__chev { color: var(--ml-muted); transition: transform 0.2s; }
.ml-acc-card__body { padding: 0 16px 6px; }
.ml-round-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: rgba(242, 194, 107, 0.12); color: var(--ml-gold); display: flex; align-items: center; justify-content: center; }
.ml-round-icon--s { width: 30px; height: 30px; }

/* 13. Mood orbs ------------------------------------------------------------------------------- */
.ml-orbs { margin: 0 -10px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ml-orb {
  min-height: 78px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--ml-on-row); font-family: inherit; font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.ml-orb__dot {
  --mid: var(--ml-mood-calm); --edge: var(--ml-mood-calm-edge); --rgb: var(--ml-mood-calm-rgb);
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.8) 0, var(--mid) 36%, var(--edge) 100%);
  box-shadow: 0 0 22px rgba(var(--rgb), 0.45);
  transition: transform 0.2s var(--ml-ease), box-shadow 0.2s;
}
.ml-orb:hover .ml-orb__dot { transform: scale(1.06); }
.ml-orb[aria-pressed="true"] .ml-orb__dot { box-shadow: 0 0 22px rgba(var(--rgb), 0.45), 0 0 0 3px var(--ml-ground), 0 0 0 5px var(--ml-text); }
.ml-orb--calm .ml-orb__dot, .ml-mood-dot--calm { --mid: var(--ml-mood-calm); --edge: var(--ml-mood-calm-edge); --rgb: var(--ml-mood-calm-rgb); }
.ml-orb--happy .ml-orb__dot, .ml-mood-dot--happy { --mid: var(--ml-mood-happy); --edge: var(--ml-mood-happy-edge); --rgb: var(--ml-mood-happy-rgb); }
.ml-orb--tired .ml-orb__dot, .ml-mood-dot--tired { --mid: var(--ml-mood-tired); --edge: var(--ml-mood-tired-edge); --rgb: var(--ml-mood-tired-rgb); }
.ml-orb--low .ml-orb__dot, .ml-mood-dot--low { --mid: var(--ml-mood-low); --edge: var(--ml-mood-low-edge); --rgb: var(--ml-mood-low-rgb); }
.ml-orb--tense .ml-orb__dot, .ml-mood-dot--tense { --mid: var(--ml-mood-tense); --edge: var(--ml-mood-tense-edge); --rgb: var(--ml-mood-tense-rgb); }
.ml-orb--overwhelmed .ml-orb__dot, .ml-mood-dot--overwhelmed { --mid: var(--ml-mood-overwhelmed); --edge: var(--ml-mood-overwhelmed-edge); --rgb: var(--ml-mood-overwhelmed-rgb); }
.ml-mood-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.7) 0, var(--mid, var(--ml-mood-calm)) 40%, var(--edge, var(--ml-mood-calm-edge)) 100%); }
.ml-orb-logged {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: 16px; background: var(--ml-inset); font-size: 14px;
}
@media (min-width: 1024px) {
  .ml-orbs { margin: 0; grid-template-columns: repeat(6, 93px); }
  .ml-orb__dot { width: 50px; height: 50px; }
  .ml-orb { font-size: 13px; gap: 10px; min-height: 86px; }
}
@media (max-width: 360px) { .ml-orb { font-size: 10.5px; } .ml-orb__dot { width: 40px; height: 40px; } }

/* 14. Shared blocks --------------------------------------------------------------------------- */
/* One thing to try */
.ml-try { padding: 20px; }
.ml-try__text { font-family: var(--ml-serif); font-size: var(--ml-fs-serif-m); line-height: 1.25; }
@media (min-width: 1024px) { .ml-try__text { font-size: 26px; line-height: 1.22; } }

/* "Say it like this": the words to say, ready to copy */
.ml-say { padding: 14px 16px; border-radius: 18px; background: var(--ml-inset); border-left: 3px solid var(--ml-gold); display: flex; flex-direction: column; gap: 10px; }
.ml-say__words { font-family: var(--ml-serif); font-size: 21px; line-height: 1.3; font-style: italic; }

/* Adverts on Free: one calm, clearly labelled advert */
.ml-advert { padding: 16px; border-radius: 20px; border: 1.5px dashed rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.025); display: flex; flex-direction: column; gap: 12px; }
.ml-advert__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ml-muted); }
.ml-advert__why { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ml-link); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.ml-advert__why-panel { padding: 12px 14px; border-radius: 14px; background: var(--ml-inset); font-size: 13.5px; line-height: 1.5; color: var(--ml-soft); display: flex; flex-direction: column; gap: 8px; }
.ml-advert__body { display: flex; gap: 14px; align-items: center; text-decoration: none; }
.ml-advert__body { color: var(--ml-text); text-decoration: none; }
.ml-advert__img { width: 84px; height: 84px; flex-shrink: 0; border-radius: 14px; object-fit: cover; background: rgba(255, 255, 255, 0.08); }
.ml-advert__cta { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--ml-link); }
.ml-advert__upgrade { font-size: 13.5px; font-weight: 600; color: var(--ml-gold); text-decoration: none; }
.ml-sponsor-line { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ml-muted); }

/* Helplines: always at the end of pages about people, safety, help and the small print */
.ml-helplines { font-size: 13px; line-height: 1.45; color: var(--ml-muted); }
.ml-helplines a { color: var(--ml-soft); }

/* Toast: short confirmations ("Logged", "Saved"), with an optional Undo */
.ml-toast-region { position: fixed; left: 50%; bottom: calc(var(--ml-bar-height) + 16px + var(--ml-safe-bottom)); transform: translateX(-50%); z-index: 40; width: min(92vw, 420px); pointer-events: none; display: flex; flex-direction: column; gap: 8px; }
.ml-toast { pointer-events: auto; padding: 12px 16px; border-radius: 16px; background: rgba(28, 22, 42, 0.96); color: #F4EFE7; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); font-size: 14.5px; display: flex; align-items: center; justify-content: space-between; gap: 12px; animation: ml-rise 0.25s var(--ml-ease) both; }
.ml-toast button { border: 0; background: none; color: var(--ml-gold); font-weight: 700; min-height: 36px; padding: 0 4px; }
@media (min-width: 1024px) { .ml-toast-region { bottom: 28px; left: calc(50% + 124px); } }

/* Dialog: a bottom sheet on the phone, a centred panel on desktop (uses the native <dialog>) */
.ml-dialog {
  width: 100%; max-width: 560px; max-height: 92dvh; margin: auto auto 0; padding: 0;
  border: 1px solid var(--ml-glass-line); border-radius: 28px 28px 0 0;
  background: #1A1428; color: var(--ml-text);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
}
.ml-dialog::backdrop { background: rgba(8, 6, 14, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ml-dialog__inner { padding: 22px 20px calc(24px + var(--ml-safe-bottom)); display: flex; flex-direction: column; gap: 18px; }
.ml-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 1024px) {
  .ml-dialog { margin: auto; border-radius: 28px; max-width: 640px; }
  .ml-dialog__inner { padding: 28px 32px 30px; }
}

/* The moon */
.ml-moon { flex-shrink: 0; filter: drop-shadow(0 0 14px rgba(244, 231, 195, 0.45)); }
.ml-moon--no-glow { filter: none; }
.ml-moon-line { display: flex; align-items: center; gap: 14px; }
.ml-moon-line__text { display: flex; flex-direction: column; gap: 3px; }
.ml-moon-line__name { font-size: 15px; font-weight: 600; }
.ml-moon-line__note { font-size: 13px; line-height: 1.4; color: var(--ml-soft); }
@media (min-width: 1024px) { .ml-moon-line__note { font-size: 14px; } }

/* Progress */
.ml-progress { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ml-progress__bar { height: 100%; border-radius: 3px; background: var(--ml-gold); }

/* Keyboard keys */
.ml-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; border: 1px solid rgba(26, 20, 36, 0.35); font-family: var(--ml-sans); font-size: 11px; font-weight: 600; line-height: 1; }

/* Stats */
.ml-stat { display: flex; flex-direction: column; gap: 2px; }
.ml-stat__num { font-family: var(--ml-serif); font-size: 34px; line-height: 1; }
.ml-stat__label { font-size: 13px; color: var(--ml-muted); }

/* The "only you" privacy note with a lock */
.ml-only-you { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ml-muted); }

/* Locked: a feature outside the person's plan */
.ml-locked { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--ml-inset); }

/* Columns that become one flow on the phone.
   .ml-cols holds two .ml-col wrappers. On the phone the wrappers vanish (display: contents) so every
   block is in one column and .ml-order-N sets the phone order; on desktop they become two columns. */
.ml-cols { display: flex; flex-direction: column; gap: var(--ml-page-gap); }
.ml-col { display: contents; }
@media (max-width: 1023.98px) {
  .ml-order-1 { order: 1; } .ml-order-2 { order: 2; } .ml-order-3 { order: 3; } .ml-order-4 { order: 4; } .ml-order-5 { order: 5; }
  .ml-order-6 { order: 6; } .ml-order-7 { order: 7; } .ml-order-8 { order: 8; } .ml-order-9 { order: 9; } .ml-order-10 { order: 10; }
}
@media (min-width: 1024px) {
  .ml-cols { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 56px; align-items: start; }
  .ml-cols--one { grid-template-columns: minmax(0, 720px); }
  .ml-cols--wide { grid-template-columns: minmax(0, 1fr) 420px; gap: 44px; }
  .ml-cols--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .ml-cols--left { grid-template-columns: 380px minmax(0, 1fr); gap: 44px; }
  .ml-col { display: flex; flex-direction: column; gap: var(--ml-page-gap); min-width: 0; }
  .ml-col--sticky { position: sticky; top: 40px; }
}

.ml-chip--l { min-height: var(--ml-tap); padding: 0 18px; border-radius: 22px; font-size: 15px; }
.ml-chip--m { min-height: 40px; padding: 0 14px; border-radius: 20px; font-size: 15px; }
@media (min-width: 1024px) { .ml-chip--m { min-height: 36px; font-size: 14px; } }

/* A five-point question (Today and Your style) */
.ml-scale-q { gap: 14px; }
.ml-scale-q__body { display: flex; flex-direction: column; gap: 14px; }
.ml-scale { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ml-scale__dots { display: flex; justify-content: space-between; gap: 8px; }
.ml-scale__dot { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(244, 239, 231, 0.4); cursor: pointer; display: block; transition: background-color 0.15s, border-color 0.15s; }
.ml-scale__dot input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ml-scale__dot:hover { border-color: var(--ml-gold); }
.ml-scale__dot:has(input:checked) { background: var(--ml-gold); border-color: var(--ml-gold); box-shadow: 0 0 18px var(--ml-gold-glow); }
.ml-scale__dot:has(input:focus-visible) { outline: 2px solid var(--ml-focus); outline-offset: 3px; }
.ml-scale__ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--ml-soft); }
@media (min-width: 1024px) {
  .ml-scale-q { padding: 22px 24px; }
  .ml-scale-q__body { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .ml-scale { width: 250px; flex-shrink: 0; }
}

/* 15. Pages ----------------------------------------------------------------------------------- */

/* Today */
.ml-p-today__reading { gap: 14px; }
.ml-p-today__kicker { margin-top: 10px; }
.ml-p-today__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ml-p-today__help { gap: 14px; }
@media (min-width: 1024px) {
  .ml-p-today__reading { gap: 16px; }
  .ml-p-today__body { font-size: 19px; max-width: 600px; }
  .ml-p-today__actions { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; }
  .ml-p-today__aside { gap: 22px; }
  .ml-p-today__aside-title { font-size: 15px; color: var(--ml-soft); }
  .ml-p-today__circle { padding: 18px 20px 8px; border-radius: var(--ml-r-l); background: var(--ml-glass); border: 1px solid var(--ml-glass-line); gap: 6px; }
  .ml-p-today__circle .ml-chip-row { padding: 12px 0; border: 0; border-top: 1px solid var(--ml-divider); border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ml-p-today__circle .ml-stack > :first-child .ml-chip-row, .ml-p-today__circle .ml-stack > .ml-chip-row:first-child { border-top: 0; }
  .ml-p-today .ml-tile__title { font-size: 14.5px; }
}
[data-theme="morning"] .ml-tabbar__log { background: #1D1730; color: #FFFFFF; }
[data-theme="morning"] .ml-card { box-shadow: 0 4px 20px rgba(60, 40, 110, 0.06); }
[data-theme="morning"] .ml-scale__dot { border-color: #B9AFD0; }

/* 16. Motion -----------------------------------------------------------------------------------
   Everything that moves is listed here. It all stops when the device asks for reduced motion or the
   person turns "Moving sky" off in You (body[data-motion="off"]). */
@keyframes ml-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(32px, -12px); } }
@keyframes ml-twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes ml-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ml-turn { 0% { transform: rotateY(90deg) scale(0.96); opacity: 0.4; } 100% { transform: rotateY(0) scale(1); opacity: 1; } }
@keyframes ml-fade { from { opacity: 0; } to { opacity: 1; } }

.ml-mist--a, .ml-mist--c { animation: ml-drift 28s ease-in-out infinite; }
.ml-mist--b, .ml-mist--d { animation: ml-drift 36s ease-in-out -9s infinite reverse; }
.ml-stars--b { animation: ml-twinkle 5s ease-in-out infinite; }
.ml-stars--c { animation: ml-twinkle 7s ease-in-out 1.5s infinite; }

[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .ml-mist, .ml-stars { animation: none !important; }
}

/* Shared bits used from here on */
.ml-label { font-size: 13px; font-weight: 600; color: var(--ml-muted); }
.ml-label.ml-gold { color: var(--ml-gold); }
.ml-fieldset { display: flex; flex-direction: column; gap: 12px; }
.ml-fieldset__legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 12px; }
.ml-chips--tight { gap: 6px; }
.ml-chips--center { justify-content: center; }
.ml-chip--xs { min-height: 28px; padding: 0 10px; font-size: 13px; font-weight: 600; }
.ml-chip--mood-tense { background: rgba(231, 149, 122, 0.18); color: #F6C9B8; border-color: transparent; }
.ml-chip--mood-calm { background: rgba(159, 217, 201, 0.16); color: #CFEDE4; border-color: transparent; }
.ml-chip--mood-tired, .ml-chip--mood-low { background: rgba(156, 143, 184, 0.18); color: #E2DBF0; border-color: transparent; }
.ml-chip--mood-happy { background: var(--ml-gold-tint); color: var(--ml-gold-bright); border-color: transparent; }
.ml-chip--mood-overwhelmed { background: rgba(199, 125, 168, 0.18); color: #F0CFE2; border-color: transparent; }
.ml-mini { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.45; }
.ml-btn--tall { height: 48px; border-radius: 24px; }
.ml-textarea--short { min-height: 72px; }
.ml-kbd--line { border-color: var(--ml-pill-line); color: var(--ml-soft); }
/* Orbs as radio buttons (Log a moment) */
label.ml-orb { position: relative; }
.ml-orb:has(input:checked) { font-weight: 700; color: var(--ml-text); }
.ml-orb:has(input:checked) .ml-orb__dot { box-shadow: 0 0 22px rgba(var(--rgb), 0.45), 0 0 0 3px var(--ml-ground), 0 0 0 5px var(--ml-text); }
.ml-orb:has(input:focus-visible) .ml-orb__dot { outline: 2px solid var(--ml-focus); outline-offset: 6px; }
.ml-fieldset .ml-orbs { margin: 0 -10px; }

/* A sheet: Log a moment on the phone; a centred panel on desktop */
.ml-sheet {
  display: flex; flex-direction: column; gap: 18px;
  margin: -22px calc(-1 * var(--ml-gutter)) 0; padding: 14px var(--ml-gutter) 24px;
  min-height: 100dvh;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(36, 28, 56, 0.97), rgba(21, 17, 31, 0.98));
  border-top: 1px solid var(--ml-glass-line);
}
.ml-p-log { padding-top: 40px; }
.ml-sheet__grab { width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); margin: 0 auto -6px; }
.ml-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ml-sheet__head .ml-h1 { font-size: 34px; }
.ml-sheet__foot { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ml-has-exit .ml-p-log .ml-sheet__head { padding-right: 0; }
@media (min-width: 1024px) {
  .ml-p-log { padding-top: 0; display: flex; justify-content: center; }
  .ml-sheet { width: 100%; max-width: 640px; min-height: 0; margin: 0; padding: 28px 32px 26px; border-radius: 28px; border: 1px solid var(--ml-glass-line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); gap: 20px; }
  .ml-sheet__grab { display: none; }
  .ml-sheet__head .ml-icon-btn { display: none; }
  .ml-sheet__foot { justify-content: flex-end; }
  .ml-sheet__foot .ml-meta { margin-right: auto; }
  .ml-sheet__foot .ml-btn--primary { width: auto; height: 48px; padding: 0 34px; font-size: 16px; }
  .ml-fieldset .ml-orbs { margin: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* The same sheet inside the dialog that moonlit.js opens from the Log button */
.ml-dialog .ml-sheet { margin: 0; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; max-width: none; }
.ml-dialog .ml-sheet__grab { display: none; }

/* Reflection */
.ml-p-reflection { max-width: 720px; }
.ml-p-reflection__moment { gap: 10px; }
.ml-p-reflection__body { gap: 18px; }
.ml-p-reflection__lead { font-size: 17px; line-height: 1.55; }
.ml-p-reflection__try { font-size: 18px; font-weight: 600; }
.ml-p-reflection__words { font-size: 25px; line-height: 1.25; }
.ml-say-card { gap: 12px; background: linear-gradient(160deg, rgba(242, 194, 107, 0.12), rgba(8, 6, 14, 0.3) 70%); }

/* Hold the moon */
.ml-p-hold { position: relative; min-height: calc(100dvh - 60px); display: flex; flex-direction: column; }
.ml-p-hold__close { position: absolute; top: 0; left: 0; z-index: 2; }
.ml-hold { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-top: 50px; }
.ml-hold__head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ml-hold__head .ml-kicker { justify-content: center; }
.ml-hold__head .ml-lede { max-width: 330px; }
.ml-hold__focus { display: block; }
.ml-hold__stage { position: relative; width: 260px; height: 260px; margin-top: 16px; }
.ml-hold__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.ml-hold__track { fill: none; stroke: rgba(244, 231, 195, 0.18); stroke-width: 2; }
.ml-hold__fill { fill: none; stroke: var(--ml-gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 691.15; stroke-dashoffset: 691.15; }
.ml-hold__orb {
  position: absolute; left: 38px; top: 38px; width: 184px; height: 184px; border-radius: 50%; border: 0; padding: 0;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background:
    radial-gradient(circle at 34% 34%, rgba(205, 185, 143, 0.55) 0 9%, transparent 10%),
    radial-gradient(circle at 60% 30%, rgba(205, 185, 143, 0.5) 0 5%, transparent 6%),
    radial-gradient(circle at 63% 62%, rgba(205, 185, 143, 0.45) 0 11%, transparent 12%),
    radial-gradient(circle at 40% 66%, rgba(205, 185, 143, 0.5) 0 4.5%, transparent 5.5%),
    radial-gradient(circle at 36% 30%, #FFF8E6 0%, #F4E7C3 34%, #CDB98F 72%, #8C7A55 100%);
  box-shadow: 0 0 40px rgba(244, 231, 195, 0.35), inset -18px -22px 40px rgba(60, 45, 30, 0.35);
  transition: box-shadow 0.4s;
}
.ml-hold__star { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #F4EFE7; opacity: 0; --x: 0px; --y: 0px; }
.ml-hold__star--0 { --x: -120px; --y: -40px; } .ml-hold__star--1 { --x: 110px; --y: -70px; } .ml-hold__star--2 { --x: -60px; --y: 120px; }
.ml-hold__star--3 { --x: 130px; --y: 50px; } .ml-hold__star--4 { --x: -130px; --y: 60px; } .ml-hold__star--5 { --x: 20px; --y: -135px; }
.ml-hold__star--6 { --x: 80px; --y: 115px; } .ml-hold__star--7 { --x: -95px; --y: -100px; } .ml-hold__star--8 { --x: 135px; --y: -10px; }
.ml-hold__star--9 { --x: -20px; --y: 140px; } .ml-hold__star--10 { --x: -140px; --y: -5px; } .ml-hold__star--11 { --x: 95px; --y: -115px; }
.ml-hold__star--12 { --x: 60px; --y: 130px; } .ml-hold__star--13 { --x: -110px; --y: 95px; }
.ml-hold__burst { position: absolute; left: 30px; top: 30px; width: 200px; height: 200px; border-radius: 50%; border: 2px solid rgba(242, 194, 107, 0.6); opacity: 0; pointer-events: none; }
.ml-hold__status { min-height: 26px; font-size: 16px; font-weight: 600; color: var(--ml-gold); }
.ml-hold__help { margin-top: auto !important; padding-top: 30px; font-size: 13px; line-height: 1.6; color: var(--ml-muted); }
.ml-hold__help a { font-weight: 600; }
.ml-hold__reading { width: 100%; max-width: 420px; text-align: left; display: flex; flex-direction: column; gap: 12px; animation: ml-rise 0.5s var(--ml-ease) both; }
/* States set by moonlit.js on .ml-hold: is-holding, is-ready, is-done */
.ml-hold.is-holding .ml-hold__fill, .ml-hold.is-ready .ml-hold__fill { animation: ml-hold-ring var(--ml-hold-ms, 3000ms) linear forwards; }
.ml-hold.is-ready .ml-hold__fill, .ml-hold.is-done .ml-hold__fill { stroke-dashoffset: 0; }
.ml-hold.is-holding .ml-hold__star, .ml-hold.is-ready .ml-hold__star { animation: ml-hold-in 1.6s ease-in infinite; }
.ml-hold.is-holding .ml-hold__star:nth-child(2n), .ml-hold.is-ready .ml-hold__star:nth-child(2n) { animation-delay: 0.8s; }
.ml-hold.is-holding .ml-hold__orb, .ml-hold.is-ready .ml-hold__orb { animation: ml-breathe 1.6s ease-in-out infinite; box-shadow: 0 0 70px rgba(244, 231, 195, 0.6), inset -18px -22px 40px rgba(60, 45, 30, 0.35); }
.ml-hold.is-done .ml-hold__orb { box-shadow: 0 0 90px rgba(244, 231, 195, 0.75), inset -18px -22px 40px rgba(60, 45, 30, 0.35); }
.ml-hold.is-done .ml-hold__burst { animation: ml-burst 1.4s ease-out forwards; }
.ml-hold.is-done .ml-hold__focus, .ml-hold.is-done .ml-hold__help { display: none; }
@keyframes ml-hold-ring { from { stroke-dashoffset: 691.15; } to { stroke-dashoffset: 0; } }
@keyframes ml-hold-in { 0% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(0, 0) scale(0.3); opacity: 0; } }
@keyframes ml-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes ml-burst { from { transform: scale(0.7); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }
@media (min-width: 1024px) {
  .ml-p-hold { min-height: calc(100dvh - 88px); }
  .ml-hold { padding-top: 10px; }
  .ml-hold__stage { transform: scale(1.1); margin: 30px 0 20px; }
}

.ml-display--m { font-size: 40px; line-height: 1.04; }
@media (min-width: 1024px) { .ml-display--m { font-size: 46px; line-height: 1.02; } }
.ml-glyph { flex-shrink: 0; display: inline-block; vertical-align: -0.15em; }

/* NASA attribution (words only, no logo) */
.ml-nasa { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 16px; border: 1px solid rgba(143, 211, 224, 0.3); background: rgba(143, 211, 224, 0.08); color: #BFE6EE; font-size: 13px; font-weight: 600; }

/* Your full reading */
.ml-p-reading__head { display: flex; flex-direction: column; gap: 14px; }
.ml-p-reading__switch { max-width: 420px; }
.ml-p-reading__detailed { gap: 14px; }
.ml-p-reading__parts { display: flex; flex-direction: column; gap: 12px; }
.ml-p-reading__part { gap: 8px; }
.ml-p-reading__part-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ml-p-reading__try .ml-quote { font-size: 23px; }
.ml-p-reading__foot { display: flex; flex-direction: column; gap: 14px; }
.ml-p-reading__simple { gap: 14px; }
@media (min-width: 1024px) {
  .ml-p-reading__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .ml-p-reading__switch { width: 230px; flex-shrink: 0; }
  .ml-p-reading__parts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .ml-p-reading__part { grid-column: span 2; }
  .ml-p-reading__part-head { flex-direction: column; gap: 2px; }
  .ml-p-reading__part--today, .ml-p-reading__try { grid-column: span 3; }
  .ml-p-reading__part--today .ml-p-reading__part-head { flex-direction: row; }
  .ml-p-reading__foot { flex-direction: row; align-items: center; justify-content: space-between; }
  .ml-p-reading__foot .ml-basis { max-width: 320px; }
  .ml-p-reading__foot form { flex-wrap: nowrap; flex-shrink: 0; }
  .ml-p-reading__aside { gap: 16px; }
}

/* Moon and sun */
.ml-moonsun { display: flex; flex-direction: column; gap: 16px; }
.ml-moonsun__hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 6px 0 4px; }
.ml-moonsun__hero .ml-moon { margin-bottom: 14px; filter: drop-shadow(0 0 30px rgba(244, 231, 195, 0.45)); }
.ml-moonsun__tonight--compact { gap: 12px; }
.ml-moonsun__tonight--compact .ml-serif-l { font-size: 30px; }
.ml-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ml-week__day { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ml-muted); }
.ml-week__day.is-today { color: var(--ml-text); font-weight: 700; }
.ml-week__day.is-today .ml-moon { filter: drop-shadow(0 0 8px rgba(244, 231, 195, 0.6)); }
.ml-week__note { font-size: 11px; font-weight: 700; color: var(--ml-gold); margin-top: -4px; }
@media (min-width: 1024px) {
  .ml-p-moonsun .ml-moonsun { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; max-width: 1040px; }
  .ml-p-moonsun .ml-moonsun__hero { grid-row: span 2; }
}

/* Your planets: the wheel */
:root {
  --ml-planet-moon: #E8E4F0; --ml-planet-sun: #F2C26B; --ml-planet-mercury: #9FD9C9; --ml-planet-venus: #F0A5C8; --ml-planet-mars: #E7957A;
  --ml-planet-jupiter: #E8B27A; --ml-planet-saturn: #D9C08A; --ml-planet-uranus: #8FD3E0; --ml-planet-neptune: #8FA8F0; --ml-planet-pluto: #C3A6E8;
}
.ml-planet--moon { --c: var(--ml-planet-moon); } .ml-planet--sun { --c: var(--ml-planet-sun); } .ml-planet--mercury { --c: var(--ml-planet-mercury); }
.ml-planet--venus { --c: var(--ml-planet-venus); } .ml-planet--mars { --c: var(--ml-planet-mars); } .ml-planet--jupiter { --c: var(--ml-planet-jupiter); }
.ml-planet--saturn { --c: var(--ml-planet-saturn); } .ml-planet--uranus { --c: var(--ml-planet-uranus); } .ml-planet--neptune { --c: var(--ml-planet-neptune); }
.ml-planet--pluto { --c: var(--ml-planet-pluto); }
.ml-wheel { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ml-wheel__svg { width: 100%; max-width: 360px; height: auto; overflow: visible; }
.ml-wheel__face { fill: rgba(255, 255, 255, 0.02); }
.ml-wheel__rim { fill: none; stroke: rgba(244, 239, 231, 0.22); stroke-width: 0.8; }
.ml-wheel__sun-sign { fill: rgba(242, 194, 107, 0.14); }
.ml-wheel__sign { color: var(--ml-soft); }
.ml-wheel__sign.is-sun { color: var(--ml-gold); }
.ml-wheel__track { fill: none; stroke: rgba(244, 239, 231, 0.09); stroke-width: 0.6; }
.ml-wheel__earth { fill: #8FD3F0; filter: drop-shadow(0 0 4px rgba(143, 211, 240, 0.8)); }
.ml-wheel__born { fill: none; stroke: var(--c); stroke-width: 1; opacity: 0.8; }
.ml-wheel__planet circle { fill: #1A1428; stroke: var(--c); stroke-width: 1.2; filter: drop-shadow(0 0 4px var(--c)); }
.ml-wheel__planet .ml-glyph { color: var(--c); }
.ml-wheel__planet.is-blur { opacity: 0.3; }
.ml-wheel__legend { justify-content: center; }
.ml-wheel__key { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ml-wheel__key--now { background: var(--ml-gold); }
.ml-wheel__key--born { border: 1.5px solid var(--ml-gold); width: 9px; height: 9px; }
.ml-wheel__key--earth { background: #8FD3F0; width: 7px; height: 7px; }
@media (min-width: 1024px) { .ml-wheel__svg { max-width: 520px; } }

/* Time travel */
.ml-tt { display: grid; grid-template-areas: "title" "range" "status" "play" "jumps"; gap: 14px; }
.ml-tt__title { grid-area: title; }
.ml-tt__jumps { grid-area: jumps; flex-wrap: nowrap; }
.ml-tt__jumps .ml-chip { flex: 1; justify-content: center; }
.ml-tt__jumps .ml-chip[aria-current] { background: var(--ml-text); color: var(--ml-ground); border-color: var(--ml-text); font-weight: 600; }
.ml-tt__range { grid-area: range; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ml-muted); }
.ml-tt__bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ml-tt__fill { display: block; height: 100%; width: calc(var(--ml-p, 1) * 100%); border-radius: 3px; background: linear-gradient(90deg, #8FD3E0, var(--ml-gold)); }
.ml-tt__status { grid-area: status; display: flex; flex-direction: column; gap: 4px; min-height: 76px; }
.ml-tt__play { grid-area: play; width: 100%; height: 56px; border-radius: 28px; font-size: 17px; }
@media (min-width: 1024px) {
  .ml-tt { grid-template-areas: "title jumps" "range range" "status play"; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; padding: 18px 20px; }
  .ml-tt__title { max-width: 190px; }
  .ml-tt__jumps .ml-chip { flex: none; }
  .ml-tt__play { width: auto; padding: 0 26px; }
}

/* Tonight's planets: a table on desktop, stacked rows on the phone */
.ml-planet-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ml-planet-table th, .ml-planet-table td { text-align: left; font-weight: 400; }
.ml-planet-dot { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.2px solid var(--c); color: var(--c); background: rgba(26, 20, 40, 0.8); }
.ml-retro { color: var(--ml-gold); white-space: nowrap; }
.ml-retro .ml-glyph { vertical-align: -0.1em; }
@media (max-width: 1023.98px) {
  .ml-planet-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ml-planet-table tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "g name name" "g now born" "g dist dist"; column-gap: 8px; padding: 12px 0; border-top: 1px solid var(--ml-divider); }
  .ml-planet-table tbody tr:first-child { border-top: 0; }
  .ml-planet-table__glyph { grid-area: g; align-self: center; }
  .ml-planet-table__name { grid-area: name; font-size: 15px; }
  .ml-planet-table__name b { font-weight: 600; }
  .ml-planet-table__role { font-size: 13px; color: var(--ml-muted); margin-left: 4px; }
  .ml-planet-table__now { grid-area: now; font-size: 15px; }
  .ml-planet-table__pos { white-space: nowrap; }
  .ml-planet-table__now .ml-retro { display: block; white-space: nowrap; font-size: 13.5px; }
  .ml-planet-table__sep { display: none; }
  .ml-planet-table__born { grid-area: born; font-size: 13px; color: var(--ml-muted); align-self: end; white-space: nowrap; text-align: right; }
  .ml-planet-table__dist { grid-area: dist; font-size: 12.5px; color: var(--ml-muted); }
}
@media (min-width: 1024px) {
  .ml-planet-table-wrap { padding: 16px 20px 10px; }
  .ml-planet-table__title { margin-bottom: 4px; }
  .ml-planet-table thead th { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ml-muted); padding: 6px 8px 8px 0; }
  .ml-planet-table thead th:last-child, .ml-planet-table__dist { text-align: right; }
  .ml-planet-table td, .ml-planet-table tbody th { padding: 7px 8px 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); }
  .ml-planet-table tbody tr:first-child > * { border-top: 0; }
  .ml-planet-dot { width: 26px; height: 26px; }
  .ml-planet-table__role, .ml-planet-table__born-word, .ml-planet-table__light, .ml-planet-table__retro-word { display: none; }
  .ml-planet-table__name b { font-weight: 600; }
  .ml-planet-table__born, .ml-planet-table__dist { color: var(--ml-soft); }
  .ml-p-planets__how { display: none; }
  .ml-p-planets .ml-col:first-child { align-items: stretch; }
}

.ml-self-center { align-self: center; }
.ml-row--center { justify-content: center; }
.ml-center-text { text-align: center; }
.ml-ticks { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ml-soft); }
.ml-ticks li { display: inline-flex; align-items: center; gap: 6px; }
.ml-ticks .ml-icon { color: var(--ml-mint); }

/* Tarot cards */
.ml-tarot { position: relative; display: block; flex-shrink: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.ml-tarot--l { width: 220px; height: 352px; }
.ml-tarot--s { width: 100%; max-width: 104px; aspect-ratio: 200 / 320; border-radius: 8px; }
.ml-tarot--face { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(242, 194, 107, 0.25); }
.ml-tarot__art { display: block; width: 100%; height: 100%; }
.ml-tarot__num { position: absolute; left: 0; right: 0; top: 7.5%; text-align: center; font-family: var(--ml-serif); font-size: 20px; color: #2A2240; }
.ml-tarot__name { position: absolute; left: 0; right: 0; bottom: 6.5%; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #2A2240; }
.ml-tarot--s .ml-tarot__num { font-size: 10px; top: 6%; }
.ml-tarot--s .ml-tarot__name { font-size: 6.5px; letter-spacing: 0.12em; bottom: 6%; }
.ml-tarot-btn { padding: 0; border: 0; background: none; border-radius: 14px; cursor: pointer; display: block; }
.ml-tarot-btn:hover .ml-tarot { transform: translateY(-3px); }
.ml-tarot { transition: transform 0.25s var(--ml-ease); }
.ml-tarot-btn.is-turning .ml-tarot, .ml-spread__face.is-turned .ml-tarot { animation: ml-turn 0.6s var(--ml-ease) both; }

.ml-p-tarot__head { gap: 6px; }
.ml-p-tarot__draw { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 24px 0 8px; }
.ml-p-tarot__drawn { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ml-p-tarot__card-wrap .ml-tarot--l { width: 200px; height: 320px; }
.ml-p-tarot__title { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ml-p-tarot__day, .ml-p-tarot__three { display: flex; flex-direction: column; gap: 18px; }
.ml-spread { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; justify-items: center; }
.ml-spread__slot { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; width: 100%; }
.ml-spread__face { display: flex; justify-content: center; width: 100%; }
.ml-spread__pos { font-size: 12.5px; color: var(--ml-soft); }
.ml-spread__line { flex-direction: column; align-items: flex-start; }
.ml-spread.is-hidden-faces .ml-spread__face:not(.is-turned) { display: none; }
.ml-spread__result.is-waiting { display: none; }
.ml-p-tarot__answer { display: flex; flex-direction: column; gap: 12px; }
.ml-chip.is-locked { opacity: 0.6; }
@media (min-width: 1024px) {
  .ml-p-tarot__desk-head { flex-direction: row; align-items: baseline; gap: 16px; }
  .ml-p-tarot__desk-head .ml-lede { font-size: 15px; }
  .ml-p-tarot__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
  .ml-p-tarot__day, .ml-p-tarot__three { padding: 20px 22px; border-radius: var(--ml-r-l); background: var(--ml-glass); border: 1px solid var(--ml-glass-line); gap: 14px; }
  .ml-p-tarot__head { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .ml-p-tarot__head .ml-h1 { font-family: var(--ml-sans); font-size: 15px; font-weight: 600; line-height: 1.3; }
  .ml-p-tarot__head .ml-lede { display: none; }
  .ml-p-tarot__drawn { flex-direction: row; align-items: flex-start; text-align: left; }
  .ml-p-tarot__card-wrap .ml-tarot--l { width: 96px; height: 154px; border-radius: 8px; }
  .ml-p-tarot__card-wrap .ml-tarot__num { font-size: 10px; } .ml-p-tarot__card-wrap .ml-tarot__name { font-size: 6.5px; }
  .ml-p-tarot__title { align-items: flex-start; }
  .ml-p-tarot__meaning { padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ml-p-tarot__about .ml-chips { flex-wrap: nowrap; }
  .ml-p-tarot__about { flex-direction: row; align-items: center; }
  .ml-tarot--s { max-width: 80px; }
  .ml-spread__desk { display: flex; flex-direction: column; gap: 2px; }
  .ml-spread__desk .ml-serif-m { font-size: 20px; }
  .ml-p-tarot__answer { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; }
}

/* Games */
.ml-p-games__head { display: flex; flex-direction: column; gap: 10px; }
.ml-games { display: flex; flex-direction: column; gap: 12px; }
.ml-game { flex-direction: row; gap: 14px; align-items: center; }
.ml-game__art { width: 64px; flex-shrink: 0; display: flex; justify-content: center; }
.ml-game__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ml-game__title { font-size: 25px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ml-game--featured { flex-direction: column; align-items: stretch; }
.ml-game--featured .ml-game__art { width: auto; justify-content: flex-end; margin-bottom: -30px; }
.ml-game--featured .ml-game__title { font-size: 28px; }
.ml-game__go { width: 100%; }
.ml-game__constellation { width: 96px; height: 64px; }
.ml-game__constellation path { fill: none; stroke: rgba(244, 239, 231, 0.7); stroke-width: 1.2; }
.ml-game__constellation circle { fill: #F4EFE7; }
.ml-game__orb { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 35%, #2C2350, #120E1E 72%); box-shadow: 0 0 22px rgba(90, 63, 154, 0.5); }
.ml-game__orb-inner { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ml-gold); display: flex; align-items: center; justify-content: center; color: var(--ml-gold); background: radial-gradient(circle, #24426A, #16213A); }
.ml-game__pair { display: flex; gap: 4px; }
.ml-game__mini-card { width: 26px; height: 36px; border-radius: 5px; background: #F4EDDD; color: #C99A3A; display: flex; align-items: center; justify-content: center; transform: rotate(-6deg); }
.ml-game__mini-card + .ml-game__mini-card { transform: rotate(6deg); }
.ml-game__mini-card .ml-glyph { width: 14px; height: 14px; }
.ml-game__people { display: flex; align-items: center; }
.ml-game__people .ml-avatar--l { width: 28px; height: 28px; font-size: 12px; }
.ml-game__link { width: 8px; height: 1.5px; background: var(--ml-gold); }
.ml-game__progress { margin-top: 2px; }
@media (min-width: 1024px) {
  .ml-p-games__head { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .ml-games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .ml-game { flex-direction: column; align-items: stretch; padding: 20px; min-height: 360px; }
  .ml-game__art { width: auto; height: 110px; align-items: center; justify-content: center; margin: 0; }
  .ml-game--featured .ml-game__art { margin: 0; justify-content: center; }
  .ml-game__constellation { width: 120px; height: 90px; }
  .ml-game__orb { width: 100px; height: 100px; } .ml-game__orb-inner { width: 56px; height: 56px; }
  .ml-game__mini-card { width: 44px; height: 62px; border-radius: 8px; } .ml-game__mini-card .ml-glyph { width: 22px; height: 22px; }
  .ml-game__people .ml-avatar--l { width: 48px; height: 48px; font-size: 18px; } .ml-game__link { width: 24px; }
  .ml-game__title, .ml-game--featured .ml-game__title { font-size: 26px; }
  .ml-game__body { flex: 1; }
  .ml-game__body > .ml-btn { margin-top: auto; align-self: flex-start; width: auto; }
  .ml-games__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* The Magic Moon */
.ml-mm { display: flex; flex-direction: column; gap: 14px; }
.ml-mm__stage { position: relative; align-self: center; width: 228px; height: 228px; margin: 4px 0; }
.ml-mm__orb { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.16) 0 12%, transparent 13%), radial-gradient(circle at 45% 40%, #2C2350, #120E1E 72%);
  box-shadow: 0 0 60px rgba(90, 63, 154, 0.45), inset -16px -20px 40px rgba(0, 0, 0, 0.45); }
.ml-mm__inner { position: relative; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(242, 194, 107, 0.7); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #24426A, #16213A 80%); color: var(--ml-gold); }
.ml-mm__word { font-family: var(--ml-serif); font-size: 38px; line-height: 1; color: var(--ml-gold-bright); animation: ml-fade 0.6s both; }
.ml-mm__word:empty { display: none; }
.ml-mm__tumble { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; font-family: var(--ml-serif); font-size: 34px; color: rgba(247, 213, 140, 0.75); }
.ml-mm__tumble > span { height: 112px; display: flex; align-items: center; justify-content: center; }
.ml-mm__tap { position: absolute; inset: 0; border-radius: 50%; border: 0; background: transparent; cursor: pointer; }
.ml-mm__line { text-align: center; font-family: var(--ml-serif); font-size: 24px; line-height: 1.2; min-height: 0; }
.ml-mm__line:empty { display: none; }
.ml-mm__status { text-align: center; font-size: 14px; font-weight: 600; color: var(--ml-gold); min-height: 22px; }
.ml-mm.is-rolling .ml-mm__orb { animation: ml-shake 0.55s ease-in-out 2; }
.ml-mm.is-rolling .ml-mm__tumble { animation: ml-tumble 1.1s steps(8, end) both; }
.ml-mm__care { gap: 10px; border-color: rgba(240, 165, 138, 0.4); }
@keyframes ml-shake { 0%, 100% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(-6px, 2px) rotate(-4deg); } 40% { transform: translate(6px, -2px) rotate(4deg); } 60% { transform: translate(-4px, 1px) rotate(-2deg); } 80% { transform: translate(4px, 0) rotate(2deg); } }
@keyframes ml-tumble { from { transform: translateY(0); } to { transform: translateY(-896px); } }
.ml-p-magic, .ml-p-dreams { max-width: 640px; }

/* Dreams */
.ml-dream-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ml-dream-stats .ml-stat__num { font-size: 26px; }

/* Steps (first run and question series) */
@media (max-width: 1023.98px) { .ml-has-exit .ml-p-start > .ml-steps { margin-right: 56px; margin-top: 18px; } }
.ml-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.ml-steps__bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.ml-steps__bar.is-done { background: var(--ml-gold); }
.ml-steps__bar.is-now { background: var(--ml-text); }
.ml-ticklist { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; }
.ml-ticklist li { display: flex; gap: 10px; align-items: flex-start; }
.ml-ticklist .ml-icon { color: var(--ml-gold); margin-top: 3px; }
.ml-link-quiet--danger { color: var(--ml-coral) !important; }

/* Welcome */
.ml-p-welcome { display: flex; flex-direction: column; gap: 22px; }
.ml-p-welcome__hero { display: flex; flex-direction: column; gap: 14px; }
.ml-p-welcome__moon { align-self: center; margin: -6px 0 20px; filter: drop-shadow(0 0 30px rgba(244, 231, 195, 0.4)); }
.ml-p-welcome__title { font-size: 44px; }
.ml-p-welcome__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.ml-p-welcome__go { grid-column: 1 / -1; }
.ml-p-welcome__reading { gap: 10px; }
.ml-p-welcome__promises { display: none; }
@media (min-width: 1024px) {
  .ml-p-welcome { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 26px 80px; align-items: center; min-height: calc(100dvh - 140px); }
  .ml-p-welcome__hero { position: relative; gap: 16px; }
  .ml-p-welcome__moon { position: absolute; left: calc(100% + 250px); top: -100px; width: 120px; height: 120px; margin: 0; }
  .ml-p-welcome__title { font-size: 76px; line-height: 0.98; max-width: 640px; }
  .ml-p-welcome__form { display: flex; align-items: flex-end; gap: 10px; }
  .ml-p-welcome__form .ml-field:first-child { width: 90px; } .ml-p-welcome__form .ml-field:nth-child(2) { width: 160px; }
  .ml-p-welcome__form .ml-select { height: 48px; border-radius: 14px; }
  .ml-p-welcome__go { width: auto; height: 48px; padding: 0 24px; font-size: 16px; }
  .ml-p-welcome__reading { align-self: center; padding: 26px; }
  .ml-p-welcome__promises { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 26px; border-top: 1px solid var(--ml-divider); align-self: end; }
  .ml-p-welcome__promises li { display: flex; flex-direction: column; gap: 6px; }
}

/* First-run steps */
.ml-p-start { max-width: 560px; margin: 0 auto; }
.ml-p-start__date { display: grid; grid-template-columns: 0.8fr 1.3fr 1.1fr; gap: 10px; }
.ml-p-start__why { flex-direction: row; font-size: 14px; color: var(--ml-soft); }
.ml-p-start__why .ml-icon { color: var(--ml-gold); }
.ml-p-start__skip { align-self: center; color: var(--ml-link); border: 0; font-weight: 600; }
.ml-p-start__foot { margin-top: 14px; }
.ml-p-start__statement { gap: 10px; }
.ml-p-start__statement.ml-card { border: 1px solid var(--ml-glass-line); }
.ml-shell--bare .ml-main { padding-top: 26px; }

/* Your style questions */
.ml-p-sq { max-width: 560px; margin: 0 auto; min-height: calc(100dvh - 60px); }
.ml-p-sq__top { gap: 14px; }
.ml-sq { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.ml-sq__set { display: flex; flex-direction: column; gap: 14px; }
.ml-sq__legend { display: flex; flex-direction: column; gap: 6px; padding: 0; margin-bottom: 14px; width: 100%; }
.ml-sq__text { font-size: 32px; display: block; }
.ml-sq__options { display: flex; flex-direction: column; gap: 10px; }
.ml-sq__option { min-height: 56px; }
.ml-sq__radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(244, 239, 231, 0.55); flex-shrink: 0; }
.ml-sq__option:has(input:checked) .ml-sq__radio { border: 6px solid var(--ml-gold); background: var(--ml-gold-ink); }
.ml-sq__note { margin-top: auto; padding-top: 30px; }
.ml-sq__foot { display: flex; align-items: center; gap: 18px; }
.ml-sq__foot .ml-btn--primary { flex: 1; }
@media (min-width: 1024px) {
  .ml-p-sq { min-height: 0; padding-top: 24px; }
  .ml-p-sq .ml-sq__note { margin-top: 8px; padding-top: 0; }
}
.ml-sq__skip { text-decoration: none; color: var(--ml-text) !important; font-size: 15px; }
.ml-sq--compact { gap: 12px; }
.ml-sq--compact .ml-sq__text { font-size: 25px; }
.ml-sq--compact .ml-sq__option { min-height: 40px; padding: 8px 14px; border-radius: 12px; }
.ml-sq--compact .ml-choice__title { font-size: 13.5px; font-weight: 500; }
.ml-sq--compact .ml-sq__radio { width: 16px; height: 16px; }
.ml-sq--compact .ml-sq__option:has(input:checked) .ml-sq__radio { border-width: 5px; }
.ml-sq--compact .ml-sq__options { gap: 6px; }
.ml-sq--compact .ml-btn--primary { height: 44px; font-size: 15px; }
.ml-sq--compact .ml-sq__legend { margin-bottom: 8px; }

/* Your style */
.ml-p-style__grid { display: flex; flex-direction: column; gap: 16px; }
.ml-p-style__side { display: flex; flex-direction: column; gap: 16px; }
.ml-p-style__shared { padding-top: 12px; border-top: 1px solid var(--ml-divider); }
.ml-guide { position: relative; margin: 6px 0 0; padding: 20px 22px; }
.ml-guide__box { position: relative; aspect-ratio: 1.35; border-radius: 14px; border: 1px solid rgba(244, 239, 231, 0.2); background:
  linear-gradient(rgba(244, 239, 231, 0.12), rgba(244, 239, 231, 0.12)) center / 1px 100% no-repeat,
  linear-gradient(90deg, rgba(244, 239, 231, 0.12), rgba(244, 239, 231, 0.12)) center / 100% 1px no-repeat; }
.ml-guide__q { position: absolute; font-size: 12.5px; font-weight: 600; color: var(--ml-soft); }
.ml-guide__q--tl { left: 12px; top: 10px; color: var(--ml-text); } .ml-guide__q--tr { right: 12px; top: 10px; } .ml-guide__q--bl { left: 12px; bottom: 10px; } .ml-guide__q--br { right: 12px; bottom: 10px; }
.ml-guide__axis { position: absolute; font-size: 11px; color: var(--ml-muted); }
.ml-guide__axis--top { top: 0; left: 50%; transform: translateX(-50%); } .ml-guide__axis--bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.ml-guide__axis--left { left: 0; top: 50%; transform: translate(-30%, -50%) rotate(-90deg); } .ml-guide__axis--right { right: 0; top: 50%; transform: translate(30%, -50%) rotate(90deg); }
.ml-guide__dot { position: absolute; width: 22px; height: 22px; margin: 0 0 -11px -11px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.ml-guide__dot--you { background: var(--ml-gold); color: var(--ml-gold-ink); box-shadow: 0 0 14px var(--ml-gold-glow); }
.ml-guide__dot--them { border: 1.5px solid var(--ml-gold); color: var(--ml-gold); background: rgba(26, 20, 40, 0.8); }
.ml-scales { display: flex; flex-direction: column; gap: 14px; }
.ml-scales__item { display: flex; flex-direction: column; gap: 6px; }
.ml-scales__ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--ml-soft); }
.ml-scales__track { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.ml-scales__dot { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ml-gold); box-shadow: 0 0 10px var(--ml-gold-glow); }
@media (min-width: 1024px) {
  .ml-p-style__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
  .ml-p-style__comm, .ml-p-style__temp { padding: 18px; gap: 12px; }
  .ml-p-style__comm .ml-body-text, .ml-p-style__temp .ml-body-text { font-size: 14px; }
  .ml-scales { gap: 10px; }
  .ml-p-style__side { gap: 12px; }
  .ml-p-style__side .ml-ticklist { font-size: 13px; }
}

.ml-bullets { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.45; }
.ml-bullets li { position: relative; padding-left: 18px; }
.ml-bullets li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ml-text); }
.ml-chip--soft { background: rgba(255, 255, 255, 0.08); border-color: transparent; }
.ml-tag--hard, .ml-tag--argument, .ml-tag--worry { background: rgba(255, 255, 255, 0.08); border-color: transparent; color: var(--ml-soft); }
.ml-tag--good, .ml-tag--milestone { background: var(--ml-gold-tint); border-color: transparent; color: var(--ml-gold-bright); }

/* Your circle: the orbit */
.ml-p-circle__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ml-has-exit .ml-p-circle__head { padding-right: 56px; }
.ml-orbit { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; margin: 0 auto; }
.ml-orbit__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(244, 239, 231, 0.14); }
.ml-orbit__ring--friends { width: 97%; height: 97%; }
.ml-orbit__ring--family { width: 72%; height: 72%; }
.ml-orbit__ring--partner { width: 43%; height: 43%; background: radial-gradient(circle, rgba(242, 194, 107, 0.06), rgba(255, 255, 255, 0.03)); }
.ml-orbit__label { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--ml-muted); }
.ml-orbit__label--friends { top: 4%; } .ml-orbit__label--family { top: 17%; } .ml-orbit__label--partner { top: 31%; }
.ml-orbit__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ml-orbit__lines line { stroke: rgba(242, 194, 107, 0.7); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.ml-orbit__you, .ml-orbit__person { position: absolute; transform: translate(-50%, -32%); display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.ml-orbit__you { left: 50%; top: 50%; transform: translate(-50%, -38%); }
.ml-orbit__you .ml-avatar--l { width: 58px; height: 58px; box-shadow: 0 0 30px rgba(242, 194, 107, 0.5); }
.ml-orbit__person .ml-avatar { width: 44px; height: 44px; background: rgba(21, 17, 31, 0.85); }
.ml-orbit__name { font-size: 13px; font-weight: 600; color: var(--ml-text); }
.ml-p-circle__legend { flex-direction: column; gap: 6px; }
.ml-p-circle__list .ml-list__row { min-height: 64px; }
@media (min-width: 1024px) { .ml-list__row.is-selected { background: rgba(255, 255, 255, 0.07); border-radius: 14px; margin: 0 -10px; padding-left: 10px; padding-right: 10px; width: calc(100% + 20px); } }
@media (min-width: 1024px) {
  .ml-cols--circle { grid-template-columns: 370px minmax(0, 1fr); gap: 44px; }
  .ml-p-circle__head { align-items: center; }
  .ml-orbit { max-width: 360px; }
  .ml-p-circle__legend { flex-direction: row; }
  .ml-p-circle__list { padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ml-p-circle__list .ml-list__row { border-top: 0; min-height: 54px; padding: 6px 0; }
  .ml-p-circle__panel { padding: 28px 30px; border-radius: 28px; }
}

/* A person */
.ml-person { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ml-person__head { display: flex; flex-direction: column; gap: 10px; }
.ml-person--private .ml-person__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 12px; }
.ml-person__only { grid-column: 1 / -1; justify-self: start; display: inline-flex; gap: 6px; }
.ml-person__pair { display: flex; align-items: center; }
.ml-person__link { width: 36px; height: 1.5px; background: var(--ml-gold); }
.ml-person__mood { padding-top: 12px; border-top: 1px solid var(--ml-divider); }
.ml-person__manage { justify-self: center; color: var(--ml-muted) !important; }
.ml-person--connected { grid-template-areas: "head" "shares" "comm" "starter" "ask" "youshare" "manage"; }
.ml-person--connected .ml-person__head { grid-area: head; } .ml-person__ask { grid-area: ask; } .ml-person__shares { grid-area: shares; }
.ml-person__youshare { grid-area: youshare; } .ml-person__comm { grid-area: comm; } .ml-person__starter { grid-area: starter; }
.ml-person__recent { grid-area: recent; } .ml-person--connected .ml-person__manage { grid-area: manage; }
@media (min-width: 1024px) {
  .ml-person--connected { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "shares youshare" "comm starter" "recent manage"; gap: 16px; }
  .ml-person--connected .ml-person__ask { grid-area: 1 / 2 / 2 / 3; }
  .ml-p-circle__panel .ml-h1 { font-size: 40px; }
  .ml-p-circle__head .ml-h1 { white-space: nowrap; }
  .ml-person--connected .ml-person__head { flex-direction: row; align-items: center; gap: 18px; }
  .ml-person__ask { width: auto; height: 48px; padding: 0 24px; font-size: 16px; align-self: center; justify-self: end; }
  .ml-person__manage { justify-self: end; align-self: center; }
  .ml-person__comm, .ml-person__starter { min-height: 200px; }
  .ml-person--private { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .ml-person--private .ml-person__head, .ml-person__recent-list { grid-column: 1 / -1; }
  .ml-person__log { width: auto; justify-self: start; padding: 0 28px; }
}
.ml-p-person { max-width: 760px; }

/* Add someone */
.ml-p-add { max-width: 600px; }
.ml-add__hint { display: block; margin-top: 4px; }
.ml-add:has(input[name="mode"][value="invite"]:checked) .ml-add__private { display: none; }
.ml-add:has(input[name="mode"][value="private"]:checked) .ml-add__invite { display: none; }
.ml-add:has(input[name="relationship"][value="partner"]:checked) .ml-add__other-only { display: none; }
.ml-add:not(:has(input[name="relationship"][value="partner"]:checked)) .ml-add__partner-only { display: none; }

/* Ask Leyra */
.ml-p-ask__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ml-p-ask__using > summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--ml-soft); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; margin-top: -14px; }
.ml-p-ask__using > summary::-webkit-details-marker { display: none; }
.ml-p-ask__using[open] > summary { margin-bottom: 10px; }
.ml-chat { display: flex; flex-direction: column; gap: 16px; }
.ml-chat__me { align-self: flex-end; max-width: 82%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: rgba(255, 255, 255, 0.1); font-size: 15.5px; line-height: 1.45; }
.ml-chat__leyra { gap: 14px; }
.ml-chat__from { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ml-soft); }
.ml-chat__parts { display: flex; flex-direction: column; gap: 14px; }
.ml-chat__say { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; background: rgba(8, 6, 14, 0.4); }
.ml-chat__signpost { padding-top: 12px; border-top: 1px solid var(--ml-divider); }
.ml-composer { position: sticky; bottom: calc(var(--ml-bar-height) + 10px + var(--ml-safe-bottom)); z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: 30px; background: rgba(18, 14, 27, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ml-composer__input { flex: 1; min-height: 48px; max-height: 160px; padding: 12px 18px; border-radius: 24px; border: 1px solid var(--ml-pill-line); background: var(--ml-field); color: var(--ml-text); font-size: 16px; resize: none; line-height: 1.4; }
.ml-composer__send { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--ml-gold); color: var(--ml-gold-ink); display: flex; align-items: center; justify-content: center; }
.ml-recent { display: flex; flex-direction: column; gap: 2px; }
.ml-recent__row { min-height: 40px; padding: 0 10px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; text-decoration: none; color: var(--ml-text) !important; }
.ml-recent__row[aria-current] { background: rgba(255, 255, 255, 0.07); }
@media (min-width: 1024px) {
  .ml-cols--ask { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; min-height: calc(100dvh - 88px); }
  .ml-p-ask__chat { max-width: 720px; min-height: calc(100dvh - 88px); }
  .ml-p-ask__chat .ml-composer { margin-top: auto; bottom: 24px; margin-left: 0; margin-right: 0; padding: 6px 6px 6px 8px; border: 1px solid var(--ml-glass-line); }
  .ml-p-ask__chat .ml-composer__input { border: 0; background: transparent; }
  .ml-chat__me { max-width: 70%; }
  .ml-chat__parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .ml-p-ask__side { align-self: stretch; min-height: 100dvh; margin: -40px -48px -48px 0; padding: 40px 28px; background: rgba(12, 9, 20, 0.45); border-left: 1px solid var(--ml-glass-soft-line); gap: 26px; }
  .ml-p-ask__side .ml-switch-row { min-height: 52px; }
  .ml-p-ask__side .ml-switch-row__title { font-size: 14px; }
  .ml-p-ask__side .ml-switch-row__hint { font-size: 12px; }
}

/* Journal */
.ml-p-journal__head { display: flex; align-items: center; gap: 12px; }
.ml-p-journal__head .ml-h1 { flex: 1; }
.ml-has-exit .ml-p-journal__head { padding-right: 56px; }
.ml-p-journal__grid { display: flex; flex-direction: column; gap: 16px; }
.ml-p-journal__filters { order: 0; }
.ml-month { display: flex; flex-direction: column; gap: 6px; }
.ml-month__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ml-month__dow { text-align: center; font-size: 11px; color: var(--ml-muted); }
.ml-month__cell { display: flex; justify-content: center; }
.ml-month__day { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--ml-muted); border: 1px solid rgba(255, 255, 255, 0.08); }
.ml-month__day--1 { background: #4A4260; color: #E6DEF2; border-color: transparent; }
.ml-month__day--2 { background: #7D7393; color: #1A1424; border-color: transparent; font-weight: 600; }
.ml-month__day--3 { background: #E9DFC6; color: #1A1424; border-color: transparent; font-weight: 600; }
.ml-month__day--4 { background: #F7E9C4; color: #1A1424; border-color: transparent; font-weight: 700; box-shadow: 0 0 14px rgba(247, 233, 196, 0.5); }
.ml-month__day.is-today { outline: 2px solid var(--ml-gold); outline-offset: 2px; }
.ml-entry { gap: 4px; text-decoration: none; color: var(--ml-text) !important; }
.ml-entry__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.ml-entry__text { color: var(--ml-text); }
.ml-p-journal__foot { align-items: baseline; }
@media (max-width: 1023.98px) {
  .ml-p-journal { gap: 18px; }
  .ml-p-journal__filters { order: 3; }
  .ml-p-journal { display: flex; }
  .ml-p-journal__grid { display: contents; }
  .ml-p-journal__otd { order: 1; } .ml-p-journal__month { order: 2; } .ml-p-journal__pattern { order: 2; } .ml-p-journal__entries { order: 4; }
  .ml-p-journal__head { order: 0; }
  .ml-p-journal__foot { flex-direction: column; align-items: center; gap: 14px; }
}
@media (min-width: 1024px) {
  .ml-p-journal__head .ml-input-icon { width: 320px; }
  .ml-p-journal__grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); grid-template-areas: "month otd" "month entries" "pattern entries" ". entries"; gap: 16px 24px; align-items: start; }
  .ml-p-journal__otd { grid-area: otd; } .ml-p-journal__month { grid-area: month; } .ml-p-journal__pattern { grid-area: pattern; } .ml-p-journal__entries { grid-area: entries; }
  .ml-month__day { width: 36px; height: 36px; }
  .ml-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title when" "text who"; column-gap: 16px; padding: 14px 18px; }
  .ml-entry__title { grid-area: title; } .ml-entry__when { grid-area: when; text-align: right; } .ml-entry__text { grid-area: text; font-size: 14.5px; } .ml-entry__who { grid-area: who; text-align: right; }
}

/* Plans */
.ml-p-plans__head { display: flex; flex-direction: column; gap: 14px; }
.ml-plans { display: flex; flex-direction: column-reverse; gap: 16px; }
.ml-plan { gap: 10px; padding: 22px; }
.ml-plan--current { border: 1.5px solid var(--ml-gold); background: linear-gradient(160deg, rgba(242, 194, 107, 0.14), rgba(242, 194, 107, 0.02) 70%); box-shadow: 0 0 40px rgba(242, 194, 107, 0.12); }
.ml-plan__yours { padding: 4px 10px; border-radius: 12px; background: var(--ml-gold); color: var(--ml-gold-ink); font-size: 12px; font-weight: 700; }
.ml-plan__price { font-size: 15px; }
.ml-plan__price b { font-size: 20px; font-weight: 700; }
.ml-plan__features { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.45; margin: 4px 0 6px; }
.ml-plan__features li { position: relative; padding-left: 20px; }
.ml-plan__features li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--ml-gold); font-size: 12px; line-height: 1.7; }
.ml-p-plans__promises ul { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ml-soft); margin-top: 10px; }
@media (min-width: 1024px) {
  .ml-p-plans__head { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .ml-p-plans__period { width: 200px; }
  .ml-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .ml-p-plans__promises ul { flex-direction: row; flex-wrap: wrap; gap: 10px 34px; padding-top: 18px; border-top: 1px solid var(--ml-divider); }
  .ml-p-plans__promises li::before { content: "✦"; color: var(--ml-gold); margin-right: 10px; }
}

/* You */
.ml-p-you__top { margin-top: -6px; }
.ml-has-exit .ml-p-you__top { padding-right: 56px; }
.ml-p-you__head { display: flex; align-items: center; gap: 16px; }
.ml-p-you__head .ml-avatar--xl { width: 64px; height: 64px; font-size: 24px; }
.ml-p-you__plan { flex-direction: row; align-items: center; justify-content: space-between; text-decoration: none; color: var(--ml-text) !important; }
.ml-p-you__cols { gap: 22px; }
.ml-list__row--danger .ml-list__title { color: var(--ml-coral); }
.ml-setting + .ml-setting .ml-switch-row, .ml-list > .ml-setting + a, .ml-list > a + .ml-setting .ml-switch-row, .ml-list > form + a { border-top: 1px solid var(--ml-divider); }
.ml-setting .ml-switch-row { padding: 10px 0; }
@media (min-width: 1024px) {
  .ml-p-you__cols.ml-cols { gap: 24px; }
  .ml-p-you__cols .ml-col { gap: 22px; }
  .ml-p-you__head .ml-avatar--xl { width: 72px; height: 72px; font-size: 26px; }
  .ml-p-you .ml-switch-row__title, .ml-p-you .ml-list__title { font-size: 14.5px; }
  .ml-p-you .ml-list__row, .ml-p-you .ml-switch-row { min-height: 52px; }
}

/* Help */
.ml-p-help__head { display: flex; flex-direction: column; gap: 16px; }
.ml-p-help__count { padding: 12px 0 4px; }
.ml-p-help__none { padding: 8px 0 14px; }
.ml-help-groups { display: flex; flex-direction: column; gap: 10px; }
.ml-help-topic .ml-list__title { font-size: 15px; }
.ml-help-topic.is-hidden { display: none; }
.ml-help-faq { gap: 4px; }
.ml-help-faq .ml-acc > summary { min-height: 52px; font-size: 15px; }
@media (min-width: 1024px) {
  .ml-cols--help { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
  .ml-p-help__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .ml-p-help__search { width: 340px; flex-shrink: 0; }
  .ml-p-help__search .ml-input { height: 46px; font-size: 15px; border-radius: 14px; }
  .ml-help-groups { display: block; column-count: 3; column-gap: 14px; }
  .ml-help-group, .ml-help-faq { break-inside: avoid; margin-bottom: 14px; }
  .ml-help-group > summary { min-height: 0; padding: 14px 16px 6px; pointer-events: none; }
  .ml-help-group::details-content, .ml-p-sponsor__ask::details-content { content-visibility: visible; display: contents; }
  .ml-help-group > summary .ml-acc__chev { display: none; }
  .ml-help-group > summary .ml-round-icon { width: 30px; height: 30px; }
  .ml-help-group .ml-acc-card__body { padding: 0 16px 8px; }
  .ml-help-group .ml-list__row { min-height: 34px; padding: 6px 0; }
  .ml-help-group .ml-list__title { font-size: 14px; font-weight: 500; color: #E6DEF2; }
  .ml-p-help__aside { gap: 16px; }
  .ml-p-help__yours { padding: 12px 0 2px; }
}

/* Tell us */
.ml-tellus { display: flex; flex-direction: column; gap: 18px; }
.ml-tellus__q { display: none; }
.ml-tellus:has(input[value="fault"]:checked) .ml-tellus__q--fault, .ml-tellus:has(input[value="idea"]:checked) .ml-tellus__q--idea, .ml-tellus:has(input[value="other"]:checked) .ml-tellus__q--other { display: inline; }
.ml-tellus:not(:has(input[value="fault"]:checked)) .ml-tellus__fault { display: none; }
.ml-tellus:not(:has(input[value="idea"]:checked)) .ml-tellus__idea { display: none; }
.ml-tellus__details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.ml-tellus__details > summary::-webkit-details-marker { display: none; }
.ml-tellus__dl { margin-top: 8px; padding: 12px 14px; border-radius: 16px; background: rgba(8, 6, 14, 0.5); display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.ml-tellus__dl dt { color: var(--ml-muted); }
.ml-file { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ml-file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ml-file:has(input:focus-visible) .ml-btn { outline: 2px solid var(--ml-focus); outline-offset: 3px; }
.ml-tellus--compact { gap: 12px; }
.ml-tellus__pills { display: flex; gap: 6px; }
.ml-tellus__pills .ml-chip { flex: 1; justify-content: center; }
.ml-tellus--compact .ml-switch-row { min-height: 44px; font-size: 14px; }
.ml-tellus--compact .ml-btn--primary { height: 48px; font-size: 16px; }
.ml-tick-badge { width: 48px; height: 48px; border-radius: 50%; background: var(--ml-gold); color: var(--ml-gold-ink); display: flex; align-items: center; justify-content: center; }
.ml-ref { padding: 3px 10px; border-radius: 10px; background: rgba(8, 6, 14, 0.45); color: var(--ml-gold); letter-spacing: 0.04em; }
.ml-steps-list { counter-reset: s; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.ml-steps-list li { counter-increment: s; display: flex; gap: 12px; }
.ml-steps-list li::before { content: counter(s); width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(242, 194, 107, 0.5); color: var(--ml-gold); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ml-p-tellus, .ml-p-ideas { max-width: 640px; }

/* Ideas board */
.ml-idea { flex-direction: row; align-items: flex-start; gap: 14px; }
.ml-idea__title { font-size: 16px; }
.ml-vote { width: 56px; min-height: 64px; flex-shrink: 0; border-radius: 18px; border: 1px solid rgba(242, 194, 107, 0.55); background: rgba(242, 194, 107, 0.06); color: var(--ml-gold); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 14px; font-weight: 700; }
.ml-vote[aria-pressed="true"] { border: 0; background: var(--ml-gold); color: var(--ml-gold-ink); }

/* Sponsor */
.ml-p-sponsor { display: flex; flex-direction: column; gap: 18px; }
.ml-p-sponsor__title { font-size: 40px; }
.ml-p-sponsor__moon { gap: 12px; }
.ml-moons { padding: 0 14px; }
.ml-moons .ml-list__row { min-height: 56px; }
.ml-moons__icon.is-taken { opacity: 0.45; }
.ml-p-sponsor__ask > summary { list-style: none; width: max-content; }
.ml-p-sponsor__ask > summary::-webkit-details-marker { display: none; }
.ml-p-sponsor__ask[open] > summary { display: none; }
.ml-p-sponsor__fields { display: flex; flex-direction: column; gap: 12px; }
.ml-xlist { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.ml-xlist li { display: flex; gap: 10px; }
.ml-xlist .ml-icon { color: var(--ml-coral); margin-top: 2px; }
.ml-p-sponsor__never { gap: 14px; }
@media (min-width: 1024px) {
  .ml-p-sponsor { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 22px 56px; align-items: start; }
  .ml-p-sponsor__main { display: flex; flex-direction: column; gap: 26px; }
  .ml-p-sponsor__title { font-size: 60px; line-height: 0.98; }
  .ml-p-sponsor__how { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .ml-p-sponsor__how li { display: flex; flex-direction: column; gap: 4px; }
  .ml-p-sponsor__moon { grid-row: span 3; }
  .ml-p-sponsor__never { grid-column: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; }
  .ml-p-sponsor__love, .ml-p-sponsor__work { grid-column: 1; }
  .ml-p-sponsor__ask > summary { display: none; }
  .ml-p-sponsor__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ml-p-sponsor__fields .ml-input, .ml-p-sponsor__fields .ml-select { height: 46px; font-size: 15px; }
}

/* The small print */
.ml-p-legal { max-width: 760px; }
.ml-draft { align-self: flex-start; display: inline-block; padding: 2px 10px; border-radius: 10px; background: rgba(240, 165, 138, 0.18); color: #F6C9B8; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ml-promises .ml-list__row, .ml-kept .ml-list__row { align-items: flex-start; padding: 14px 0; }
.ml-kept__tags { margin-top: 6px; }
.ml-kept__tags .ml-chip { gap: 5px; color: var(--ml-soft); }
.ml-code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12.5px; color: var(--ml-muted); }
.ml-cookie-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ml-cookie-stats .ml-stat { align-items: center; text-align: center; padding: 14px 8px; }
.ml-cookie-stats .ml-stat__num { font-size: 40px; }
.ml-cookie { gap: 10px; }
.ml-cookie__switch { min-height: 44px; padding: 0; }
.ml-p-terms { display: flex; flex-direction: column; gap: 20px; }
.ml-toc > summary { list-style: none; cursor: pointer; min-height: 40px; display: flex; align-items: center; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 700; }
.ml-toc > summary::-webkit-details-marker { display: none; }
.ml-toc__list { display: flex; flex-direction: column; gap: 2px; }
.ml-toc__list a { min-height: 36px; padding: 6px 12px; border-radius: 12px; display: flex; gap: 14px; font-size: 14.5px; text-decoration: none; color: var(--ml-soft); }
.ml-toc__list a:hover, .ml-toc__list a:focus-visible { background: rgba(255, 255, 255, 0.06); color: var(--ml-text); }
.ml-p-terms__links { padding: 10px 12px; font-size: 14px; }
.ml-terms-short { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ml-terms-short li { gap: 6px; }
.ml-term { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--ml-divider); scroll-margin-top: 24px; }
.ml-term__short { padding: 14px 16px; border-radius: 16px; border-left: 3px solid var(--ml-gold); background: rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 1024px) {
  .ml-p-terms { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
  .ml-p-terms__toc { position: sticky; top: 40px; }
  .ml-p-terms__toc .ml-toc > summary { pointer-events: none; }
  .ml-toc::details-content { content-visibility: visible; display: contents; }
  .ml-terms-short { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .ml-term { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; align-items: start; }
  .ml-p-legal { max-width: 820px; }
}
.ml-p-error { max-width: 560px; margin: 8vh auto 0; align-items: flex-start; }
.ml-p-error__moon { margin-bottom: 8px; }
.ml-tt__play:not(.is-playing) .ml-tt__icon-pause,
.ml-tt__play.is-playing .ml-tt__icon-play { display: none; }
.ml-tt__slider { grid-area: play; width: 100%; accent-color: var(--ml-gold); height: 32px; }

/* Account screens: sign in, create an account, check your email, passwords and security codes */
.ml-p-account { width: 100%; max-width: 440px; margin: 0 auto; gap: 22px; }
.ml-p-account__head { align-items: center; text-align: center; }
.ml-p-account__moon { margin-bottom: 4px; }
.ml-p-account__badge {
  width: 64px; height: 64px; margin-bottom: 4px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ml-gold-tint); border: 1px solid var(--ml-gold-line); color: var(--ml-gold);
}
.ml-p-account__notice, .ml-p-account__error {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--ml-r-s); font-size: 14.5px; line-height: 1.45;
}
.ml-p-account__notice { background: var(--ml-mint-tint); border: 1px solid rgba(159, 217, 201, 0.35); }
.ml-p-account__notice .ml-icon { color: var(--ml-mint); flex-shrink: 0; margin-top: 1px; }
.ml-p-account__error { background: rgba(240, 165, 138, 0.12); border: 1px solid rgba(240, 165, 138, 0.45); }
.ml-p-account__error .ml-icon { color: var(--ml-coral); flex-shrink: 0; margin-top: 1px; }
.ml-p-account__aside-link { font-size: 14px; font-weight: 600; color: var(--ml-link); }
.ml-p-account__invite, .ml-p-account__carry { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ml-soft); }
.ml-p-account__invite .ml-icon, .ml-p-account__carry .ml-icon { color: var(--ml-gold); flex-shrink: 0; }
.ml-p-account__legal { text-align: center; }
.ml-p-account__legal a { color: var(--ml-link); }
.ml-p-account__foot { display: flex; flex-direction: column; gap: 8px; text-align: center; font-size: 15px; color: var(--ml-soft); }
.ml-p-account__foot a { color: var(--ml-link); font-weight: 600; }
.ml-p-account__resend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px; }
.ml-p-account__card .ml-steps-list b { font-weight: 600; }
.ml-password { position: relative; display: block; }
.ml-password .ml-input { width: 100%; padding-right: 56px; }
.ml-password__show {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--ml-muted); cursor: pointer;
}
.ml-password__show:hover { color: var(--ml-text); }
.ml-password__show[aria-pressed="true"] .ml-password__eye,
.ml-password__show[aria-pressed="false"] .ml-password__eye-off { display: none; }
.ml-code-input { height: 60px; font-size: 24px; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .ml-p-account { margin-top: 3vh; }
  .ml-shell--focus .ml-p-account { margin-top: 8vh; }
}

/* Your sky: Tonight's sky (the star chart) */
.ml-sky-switch { width: 100%; max-width: 420px; }
.ml-chart { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ml-chart__stage { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1 / 1; }
.ml-chart__stage::before {
  content: ""; position: absolute; inset: 1.5%; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 70px rgba(122, 92, 210, 0.32), 0 0 0 1px rgba(217, 204, 255, 0.08);
}
.ml-chart__svg, .ml-chart__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ml-chart__canvas { cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.ml-chart__horizon { fill: none; stroke: rgba(217, 204, 255, 0.4); stroke-width: 1.5; }
.ml-chart__ecliptic { fill: none; stroke: rgba(242, 194, 107, 0.4); stroke-width: 1; stroke-dasharray: 3 5; }
.ml-chart__figure { fill: none; stroke: rgba(217, 204, 255, 0.26); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ml-chart__figure--zodiac { stroke: rgba(242, 194, 107, 0.62); stroke-width: 1.4; }
.ml-chart__figure--sign { stroke: var(--ml-gold-bright); stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(242, 194, 107, 0.85)); }
.ml-chart__figure.is-picked { stroke: #FFFFFF; stroke-width: 2.2; }
.ml-chart__star--bright { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.85)); }
.ml-chart__label { font: 600 10px var(--ml-sans); letter-spacing: 0.14em; fill: rgba(217, 204, 255, 0.6); text-anchor: middle; }
.ml-chart__label--zodiac { fill: rgba(242, 194, 107, 0.9); font-size: 11px; }
.ml-chart__label--sign { fill: var(--ml-gold-bright); font-size: 12.5px; font-weight: 700; }
.ml-chart__compass { font: 700 13px var(--ml-sans); fill: var(--ml-soft); text-anchor: middle; dominant-baseline: middle; }
.ml-chart__body-name { font: 600 11px var(--ml-sans); fill: var(--ml-text); }
.ml-chart__planet { fill: var(--c); stroke: rgba(255, 255, 255, 0.75); stroke-width: 1; }
.ml-chart__moon-disc { fill: #F4EFE7; }
.ml-chart__moon-glow { fill: rgba(244, 239, 231, 0.14); }
.ml-chart__sun circle { fill: #FFE6A3; }
.ml-chart__sun .ml-chart__sun-glow { fill: rgba(255, 214, 120, 0.22); }
.ml-chart__body.is-picked .ml-chart__body-name { fill: var(--ml-gold-bright); }
.ml-chart--day .ml-chart__star { opacity: 0.8; }
.ml-chart__time {
  position: absolute; left: 0; top: 0; margin: 0; padding: 4px 10px; border-radius: 14px;
  background: rgba(14, 10, 22, 0.72); border: 1px solid rgba(217, 204, 255, 0.16);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ml-text);
}
.ml-chart__legend { justify-content: center; }
.ml-chart__key { display: inline-block; width: 18px; height: 0; border-top: 2px solid; }
.ml-chart__key--zodiac { border-color: rgba(242, 194, 107, 0.75); }
.ml-chart__key--path { border-top: 2px dashed rgba(242, 194, 107, 0.55); }
.ml-chart__key--sign { border-color: var(--ml-gold-bright); box-shadow: 0 0 6px rgba(242, 194, 107, 0.9); }
.ml-sky-controls__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.ml-sky-controls__play { display: grid; gap: 12px; }
.ml-sky-controls__button { width: 100%; }
.ml-sky-controls__button:not(.is-playing) .ml-chart__icon-pause,
.ml-sky-controls__button.is-playing .ml-chart__icon-play { display: none; }
.ml-sky-controls__slider { display: block; }
.ml-sky-controls__slider input { width: 100%; height: 32px; accent-color: var(--ml-gold); }
.ml-sky-card__hint { margin-top: 2px; }
.ml-sky-list__rows { margin-top: -4px; }
.ml-sky-list__dot {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.2px solid var(--ml-gold-line); color: var(--ml-gold);
}
.ml-sky-list__dot--sign { background: var(--ml-gold-tint); box-shadow: 0 0 12px rgba(242, 194, 107, 0.35); }
.ml-sky-list__row[aria-current="true"] { background: rgba(255, 255, 255, 0.06); border-radius: 14px; }
.ml-sky-list__tag { margin-left: 6px; vertical-align: 2px; }
.ml-sky-birth__why summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ml-link); min-height: 32px; display: flex; align-items: center; }
.ml-sky-birth__why[open] summary { margin-bottom: 6px; }
@media (min-width: 1024px) {
  .ml-p-sky .ml-col:first-child { align-items: stretch; }
  .ml-p-sky .ml-chart__stage { max-width: 600px; }
  .ml-p-sky .ml-chart__time { font-size: 15px; }
}

/* The real sky behind every page (moonlit-sky-bg.js); the tiled stars are its fallback */
.ml-sky__real { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ml-sky__glints { position: absolute; inset: 0; }
.ml-sky__glint {
  position: absolute; width: var(--s, 10px); height: var(--s, 10px); transform: translate(-50%, -50%);
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.35) 22%, rgba(255, 255, 255, 0) 70%);
  animation: ml-glint var(--d, 5s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes ml-glint { 0%, 100% { opacity: 0; } 50% { opacity: var(--o, 0.6); } }
.ml-sky.is-real .ml-stars { display: none; }
[data-theme="morning"] .ml-sky__real, [data-theme="morning"] .ml-sky__glints { display: none; }
@media (prefers-reduced-motion: reduce) { .ml-sky__glint { animation: none; } }

/* Your planets: trails while playing, laps since birth, and how far you've travelled */
.ml-wheel__trail { fill: var(--c); }
.ml-tt__laps { display: flex; gap: 8px; align-items: flex-start; }
.ml-tt__laps .ml-icon { flex-shrink: 0; margin-top: 2px; color: var(--ml-gold); }
.ml-travel__legs { display: flex; flex-direction: column; gap: 16px; }
.ml-travel__leg { display: flex; gap: 12px; align-items: flex-start; }
.ml-travel__icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ml-gold-line); background: var(--ml-gold-tint); color: var(--ml-gold);
}
.ml-travel__text { display: flex; flex-direction: column; gap: 3px; }
.ml-travel__figure { font-family: var(--ml-serif); font-size: 24px; line-height: 1.2; color: var(--ml-text); }
.ml-travel__figure [data-ml-countup] { color: var(--ml-gold-bright); font-variant-numeric: tabular-nums; }
.ml-travel__what { font-family: var(--ml-sans); font-size: 14px; color: var(--ml-soft); }