/* Solace Integrative Health, "The Body Clock": the page is one day of sky. Each section carries its hour's light,
   and blends from the section before it. Bricolage Grotesque for headlines and clock numerals,
   Atkinson Hyperlegible (designed for low-vision readers) for everything you have to read. */
:root {
  --k-predawn: #26264E; --k-dawn: #F4D9CC; --k-morning: #DCE8EE; --k-noon: #F7F5EF; --k-afternoon: #F1D9A2;
  --k-dusk: #4C3667; --k-night: #161C3A; --k-late: #0F1430; --k-sunrise: #F6E1D3;
  --bg: #F7F5EF; --surface: #FFFFFF; --surface-2: #EEF0EE; --line: rgba(28,35,71,.16);
  --ink: #1C2347; --ink-soft: #4A5170; --heading: #1C2347;
  --primary: #1C2347; --primary-ink: #FFFFFF; --primary-hover: #10163A;
  --sun: #E7B65A; --sun-d: #8A5F12; --accent: #E7B65A; --accent-ink: #1C2347;
  --dark: #0F1430; --on-dark: #F6F1E7; --on-dark-soft: #C9CCDD;
  --kicker: #8A5F12; --link: #1C2347; --field-border: #7A809A; --star: #C98F1E; --check: #2F6B55;
  --ph-a: rgba(28,35,71,.06); --ph-b: rgba(28,35,71,.11); --ph-edge: rgba(28,35,71,.4);
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --display-weight: 600; --display-lh: 1.02;
  --radius: 14px; --radius-lg: 22px; --btn-radius: 999px; --chip-radius: 999px; --field-radius: 10px; --photo-radius: 18px;
  --btn-case: none; --btn-track: 0; --btn-weight: 700;
  --brand-size: 1.25rem;
}
body.sky { background: var(--k-predawn); font-family: var(--body); font-size: 1.06rem; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.3rem); line-height: 1.04; font-weight: 600; }
.lede { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.55; max-width: 60ch; }
.link { color: inherit; font-weight: 700; text-underline-offset: 4px; }

/* header sits in the night sky */
.hdr { background: rgba(15,20,48,.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); --ink: #F6F1E7; --ink-soft: #C9CCDD; color: #F6F1E7; }
.hdr .brand-name, .hdr .nav a, .hdr .hdr-phone { color: #F6F1E7; }
.hdr .brand-name small { color: #C9CCDD; letter-spacing: 0; text-transform: none; font-weight: 400; }
.hdr .nav a:hover, .hdr .nav a[aria-current="page"] { color: var(--sun); background: transparent; }
.hdr .btn { background: var(--sun); color: #1C2347; border-color: var(--sun); }
.hdr .menu-btn { color: #F6F1E7; border-color: rgba(255,255,255,.4); }
.btn--sun { background: var(--sun); color: #1C2347; border-color: var(--sun); }
.btn--sun:hover { background: #F2C978; border-color: #F2C978; color: #1C2347; }

/* ---------- the sky system ---------- */
[class*="hour--"] { --c: var(--k-noon); --from: var(--c); --band: 260px; color: var(--ink); background: linear-gradient(to bottom, var(--from) 0, var(--c) var(--band)); position: relative; }
.hour--predawn { --c: var(--k-predawn); }
.hour--dawn { --c: var(--k-dawn); }
.hour--morning { --c: var(--k-morning); }
.hour--noon { --c: var(--k-noon); }
.hour--afternoon { --c: var(--k-afternoon); }
.hour--dusk { --c: var(--k-dusk); background: linear-gradient(to bottom, var(--from) 0, #E59C7C 110px, #A1607C 190px, var(--c) 300px); }
.hour--night { --c: var(--k-night); }
.hour--late { --c: var(--k-late); }
.hour--sunrise { --c: var(--k-sunrise); background: linear-gradient(to bottom, var(--from) 0, #5B4A7C 100px, #D9978F 190px, #F0C6B3 250px, var(--c) 330px); }
.hour--dusk, .hour--night, .hour--late, .hour--predawn { --ink: #F6F1E7; --ink-soft: #CDD0E0; --line: rgba(255,255,255,.18); --link: #F6F1E7; --check: #8FD3B5; --kicker: #F2C978; --field-border: #8C92AD; color: var(--ink); }
.hour--dusk h2, .hour--night h2, .hour--late h2, .hour--predawn h1, .hour--predawn h2, .hour--dusk h1 { color: #F6F1E7; }
.pad { padding-block: clamp(48px, 7vw, 88px); }

/* sun / moon arc at the top of each hour */
.arc { position: absolute; left: 0; right: 0; top: 24px; width: 100%; height: clamp(90px, 12vw, 150px); pointer-events: none; }
.arc-path { fill: none; stroke: currentColor; stroke-opacity: .28; stroke-width: 1.2; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; }
.arc-sun { fill: var(--sun); filter: drop-shadow(0 0 14px rgba(231,182,90,.8)); }
.arc-moon { fill: #E9E4D6; filter: drop-shadow(0 0 10px rgba(233,228,214,.5)); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(40px, 6vw, 84px) clamp(80px, 10vw, 140px); overflow: hidden; background: radial-gradient(ellipse 80% 50% at 70% 110%, rgba(232,150,120,.55), transparent 60%), linear-gradient(to bottom, #0F1430, var(--k-predawn) 70%); }
.stars { position: absolute; inset: 0; background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #fff, transparent), radial-gradient(1.4px 1.4px at 46% 12%, #fff, transparent), radial-gradient(1px 1px at 63% 30%, #fff, transparent), radial-gradient(1.2px 1.2px at 82% 16%, #fff, transparent), radial-gradient(1px 1px at 91% 48%, #fff, transparent), radial-gradient(1px 1px at 8% 62%, #fff, transparent), radial-gradient(1.3px 1.3px at 37% 70%, #fff, transparent), radial-gradient(1px 1px at 55% 56%, #fff, transparent); opacity: .55; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 24px; }
.hero h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); line-height: .98; font-weight: 600; letter-spacing: -0.035em; }
.hero .lede { color: #DADCEA; }
.horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(242,201,120,.7), transparent); }
.tw { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255,255,255,.7); opacity: .25; }
.hero-dial { display: grid; justify-items: center; gap: 12px; }
.dial-hint { font-size: .9rem; color: #B9BDD2; }

/* the dial */
.dial { position: relative; width: min(440px, 100%); aspect-ratio: 1; touch-action: none; cursor: grab; }
.dial:active { cursor: grabbing; }
.dial-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ring { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 18; }
.ring-night { fill: none; stroke: #5B6BB0; stroke-opacity: .55; stroke-width: 18; }
.ring-day { fill: none; stroke: #E7B65A; stroke-opacity: .5; stroke-width: 18; }
.tk { stroke: rgba(255,255,255,.35); stroke-width: 1.4; }
.tk--big { stroke: rgba(255,255,255,.8); stroke-width: 2.2; }
.tl { fill: #C9CCDD; font-family: var(--body); font-size: 13px; text-anchor: middle; }
.hand-line { stroke: rgba(242,201,120,.6); stroke-width: 1.5; stroke-dasharray: 3 5; }
.sunball { fill: #F2C978; filter: drop-shadow(0 0 12px rgba(242,201,120,.95)); stroke: #FFF3D6; stroke-width: 2; }
.dial.is-night .sunball { fill: #E9E4D6; filter: drop-shadow(0 0 10px rgba(233,228,214,.7)); }


.dial-face { position: absolute; inset: 24%; display: grid; place-content: center; text-align: center; gap: 8px; pointer-events: none; }
.dial-time { font-family: var(--display); font-weight: 300; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.dial-fact { font-size: clamp(.86rem, .8rem + .2vw, .98rem); line-height: 1.4; color: #DADCEA; }
.dial-who { font-size: .85rem; color: #B9BDD2; pointer-events: auto; }
.dial-who a { color: #F2C978; font-weight: 700; }
.dial-range { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dial:focus-within .sunball { stroke: #fff; stroke-width: 4; }

/* ---------- Maya ---------- */
.maya { padding-block: clamp(140px, 16vw, 220px) clamp(50px, 6vw, 80px); }
.maya-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.maya-ph { margin: 0; max-width: 380px; }
.maya-k { font-family: var(--display); font-size: 1.15rem; color: #8B4A3C; font-weight: 600; }

/* ---------- hour sections ---------- */
.hour { padding-block: clamp(150px, 17vw, 230px) clamp(56px, 7vw, 96px); }
.hour-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.hour-grid--flip .hour-head { order: 2; }
.hour-head { display: grid; gap: 16px; align-content: start; }
.clock { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); line-height: .82; margin-bottom: 6px; }
.clock b { font-size: clamp(5rem, 3rem + 9vw, 10.5rem); font-weight: 250; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.clock span { font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem); font-weight: 400; }
.hour-copy { font-size: 1.12rem; line-height: 1.6; max-width: 52ch; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ticks li { padding-left: 26px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 2px; background: currentColor; opacity: .55; }
.hour-ph { margin: 0; position: relative; }
.hour-ph .photo { box-shadow: 0 30px 60px -30px rgba(15,20,48,.55); }
.hour-ph figcaption { margin-top: 14px; font-family: var(--display); font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); line-height: 1.35; font-weight: 400; max-width: 42ch; padding-left: 16px; border-left: 2px solid currentColor; }
.pchip { display: inline-flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid var(--line); color: var(--ink); text-decoration: none; justify-self: start; margin-top: 4px; }
.hour--dusk .pchip, .hour--night .pchip { background: rgba(255,255,255,.08); }
.pchip:hover { background: rgba(255,255,255,.85); }
.hour--dusk .pchip:hover, .hour--night .pchip:hover { background: rgba(255,255,255,.16); }
.pchip-ph { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; }
.pchip-ph .photo { aspect-ratio: 1 !important; height: 100%; border-radius: 50%; border: 0; }
.pchip-ph .photo-slot { display: none; }
.pchip b { display: block; font-size: .95rem; }
.pchip i { font-style: normal; font-size: .85rem; opacity: .8; }

/* ---------- where should I start ---------- */
.start-sec { padding-block: clamp(70px, 9vw, 120px); }
.start-sec .lede { color: var(--ink-soft); margin: 12px 0 34px; }
.start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.start-q { border: 0; padding: 0; margin: 0; }
.start-q legend { font-family: var(--display); font-size: 1.3rem; margin-bottom: 14px; }
.start-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.sopt { position: relative; }
.sopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sopt span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35); cursor: pointer; font-size: 1.02rem; }
.sopt input:checked + span { background: #F2C978; border-color: #F2C978; color: #1C2347; font-weight: 700; }
.sopt input:focus-visible + span { outline: 3px solid #F2C978; outline-offset: 3px; }
.start-res { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 18px; min-height: 260px; }
.sr-card { display: none; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; }
.sr-card.is-on { display: grid; }
.sr-ph .photo { border-radius: 14px; }
.sr-txt { display: grid; gap: 6px; justify-items: start; }
.sr-k { color: #F2C978; font-weight: 700; }
.sr-txt h3 { font-size: 1.7rem; color: #fff; }
.sr-who { color: #DADCEA; }
.sr-len { color: #B9BDD2; font-size: .95rem; margin-bottom: 8px; }
.sr-txt .btn { background: #F2C978; color: #1C2347; border-color: #F2C978; }

/* ---------- first 90 minutes ---------- */
.sunrise { padding-block: clamp(300px, 30vw, 360px) clamp(60px, 8vw, 100px); }
.sunrise .lede { margin: 10px 0 36px; color: var(--ink-soft); }
.fv { display: grid; gap: 26px; margin-bottom: 26px; }
.fv-bar { position: relative; height: 14px; border-radius: 999px; background: rgba(28,35,71,.12); }
.fv-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #E59C7C, #E7B65A); transform-origin: left; }
.fv-bar i { position: absolute; top: -5px; bottom: -5px; width: 2px; background: #1C2347; left: calc(var(--a) / 90 * 100%); }
.fv-count { position: absolute; right: 0; top: -40px; font-family: var(--display); font-weight: 300; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.fv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.fv-seg { display: grid; gap: 6px; align-content: start; border-top: 2px solid #1C2347; padding-top: 12px; min-width: 0; }
.fv-t { font-family: var(--display); font-weight: 600; color: var(--sun-d); font-size: .95rem; }
.fv-seg h3 { font-size: 1.2rem; line-height: 1.2; }
.fv-seg p:last-child { font-size: .95rem; color: var(--ink-soft); }

/* ---------- calculator ---------- */
.price-sec { padding-block: clamp(40px, 6vw, 80px); }
.price-sec .lede { margin: 10px 0 30px; color: var(--ink-soft); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); background: #fff; border-radius: 26px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 30px 60px -40px rgba(15,20,48,.4); }
.calc-in { display: grid; gap: 18px; align-content: start; }
.cr { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; }
.cr label { font-weight: 700; }
.cr input { grid-column: 1 / -1; accent-color: #1C2347; width: 100%; min-height: 32px; }
.cr output { font-family: var(--display); font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.co { border-radius: 18px; padding: 20px; background: #F1EEE6; display: grid; gap: 4px; }
.co--m { background: #1C2347; color: #F6F1E7; }
.co p { font-weight: 700; }
.co b { font-family: var(--display); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.co span { font-size: .88rem; opacity: .8; }
.calc-verdict { grid-column: 1 / -1; font-family: var(--display); font-size: 1.25rem; line-height: 1.35; }

/* ---------- proof ---------- */
.proof { padding-block: clamp(30px, 4vw, 50px) clamp(60px, 8vw, 100px); }
.seals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.seal { display: flex; align-items: center; gap: 14px; }
.seal svg { width: 70px; height: 70px; flex: none; }
.seal--sun svg { color: #C98F1E; } .seal--moon svg { color: #4C3667; }
.seal span { display: grid; font-size: .9rem; color: var(--ink-soft); line-height: 1.35; }
.seal b { color: var(--ink); }
.seal-note { font-size: .85rem; color: var(--ink-soft); margin: 14px 0 44px; }
.reviews-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.rv-c { margin: 0; display: grid; gap: 14px; border-top: 2px solid var(--ink); padding-top: 18px; }
.rv-c blockquote { margin: 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.35; font-weight: 400; }
.rv-c figcaption { color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.rv-c figcaption b { color: var(--ink); }

/* ---------- book ---------- */
.book-sec { padding-block: clamp(130px, 14vw, 200px) clamp(60px, 8vw, 100px); }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.book-ph { margin: 0; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.facts li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts li span:first-child { font-weight: 700; }
.facts li span:last-child { text-align: right; }
.facts a { color: inherit; }

/* ---------- inner pages ---------- */
.phead { padding-block: clamp(150px, 16vw, 210px) clamp(40px, 5vw, 64px); }
.phead-in { display: grid; gap: 14px; }
.phead h1 { font-size: clamp(2.8rem, 1.8rem + 4vw, 5.2rem); line-height: .98; letter-spacing: -0.035em; font-weight: 600; max-width: 16ch; }
.crumbs { font-size: .92rem; } .crumbs a { color: inherit; }
.hour--dusk .crumbs, .hour--dusk .lede { color: #E6E1EE; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split .stack h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
.roster { display: grid; gap: clamp(28px, 4vw, 48px); }
.person { display: grid; grid-template-columns: 220px 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; scroll-margin-top: 100px; padding: 18px; border-radius: 26px; }
.person--dawn { background: var(--k-dawn); } .person--morning { background: var(--k-morning); } .person--noon { background: #EDEAE0; }
.person--afternoon { background: var(--k-afternoon); } .person--dusk { background: var(--k-dusk); color: #F6F1E7; } .person--night { background: var(--k-night); color: #F6F1E7; }
.person--dusk h2, .person--night h2 { color: #F6F1E7; }
.person-ph .photo { border-radius: 16px; }
.person-txt { display: grid; gap: 8px; max-width: 64ch; }
.person-hr { font-family: var(--display); font-weight: 250; font-size: 2.4rem; line-height: 1; letter-spacing: -0.04em; }
.person h2 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); }
.person-r { font-weight: 700; opacity: .85; }
.person-for b { font-weight: 700; }
.ptable { width: 100%; border-collapse: collapse; }
.ptable th, .ptable td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.ptable td { text-align: right; font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }
.bk { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: clamp(20px, 3vw, 34px); }
.hour--night .field input, .hour--night .field select, .hour--night .field textarea { background: rgba(255,255,255,.95); color: #1C2347; }
.hour--night .field label, .hour--night .field legend { color: #F6F1E7; }
.hour--night .chip span { background: transparent; color: #F6F1E7; border-color: rgba(255,255,255,.4); }
.hour--night .chip input:checked + span { background: #F2C978; color: #1C2347; border-color: #F2C978; }
.hour--night .small { color: #CDD0E0; }
.map-slot { border: 1px dashed rgba(255,255,255,.35); border-radius: 18px; min-height: 200px; display: grid; place-items: center; color: #CDD0E0; text-align: center; padding: 20px; }
.hour--night .form-success { color: #1C2347; }

@media (max-width: 900px) {
  .hero-grid, .maya-grid, .hour-grid, .start, .calc, .book-grid, .split { grid-template-columns: 1fr; }
  .hour-grid--flip .hour-head { order: 0; }
  .fv-list { grid-template-columns: 1fr 1fr; } .fv-seg:nth-child(3) { grid-column: 1 / -1; }
  .seals { grid-template-columns: 1fr 1fr; }
  .reviews-row { grid-template-columns: 1fr; }
  .maya-ph { max-width: 300px; }
}
@media (max-width: 560px) {
  .calc-out { grid-template-columns: 1fr; }
  .sr-card { grid-template-columns: 96px 1fr; gap: 14px; }
  .person { grid-template-columns: 1fr; } .person-ph { max-width: 220px; }
  .fv-list { grid-template-columns: 1fr; } .fv-seg:nth-child(3) { grid-column: auto; }
  .seals { grid-template-columns: 1fr; }
  .facts li { flex-direction: column; gap: 2px; } .facts li span:last-child { text-align: left; }
  .dial-face { inset: 20%; } .dial-fact { font-size: .8rem; }
}

/* ---- Motion: the body clock (Solace) ---- */
@keyframes sl-rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sl-dawn { from { opacity: 0; transform: scale(.94) rotate(-20deg); } to { opacity: 1; transform: none; } }
html.mo .arc .arc-sun, html.mo .arc .arc-moon { transform-box: fill-box; transform-origin: center; opacity: 0; }
html.mo .arc.up .arc-sun, html.mo .arc.up .arc-moon { animation: sl-rise 1.4s cubic-bezier(.2,.7,.2,1) both; }
html.mo .hero-dial .dial { animation: sl-dawn 1.4s .2s cubic-bezier(.2,.7,.2,1) both; }
html.mo [data-fv] .fv-fill { transform: scaleX(0); transition: transform 2.6s linear; }
html.mo [data-fv].go .fv-fill { transform: scaleX(1); }
/* twinkling stars */
@keyframes sl-twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: var(--twp, .9); transform: scale(1); } }
@keyframes sl-glint { 0%, 88%, 100% { opacity: .2; transform: scale(.6) rotate(0deg); } 93% { opacity: 1; transform: scale(1.6) rotate(45deg); } }
html.mo .stars.live { background-image: none; opacity: 1; }
html.mo .stars .tw { animation: sl-twinkle var(--tw, 4s) ease-in-out var(--twd, 0s) infinite; }
html.mo .stars .tw--big { animation: sl-glint calc(var(--tw, 4s) * 2) ease-in-out var(--twd, 0s) infinite; }
html.mo .stars .tw--big::before, html.mo .stars .tw--big::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1px; margin: -.5px 0 0 -4.5px; background: linear-gradient(90deg, transparent, #fff, transparent); }
html.mo .stars .tw--big::after { transform: rotate(90deg); }