:root {
  --white: #ffffff;
  --soft: #f5f7fb;
  --ink: #172033;
  --blue: #2858c8;
  --muted: #667085;
  --line: #d9dee8;
  --sky-wash: #f2f7ff;
  --sky-glow: #ffd166;
  --sky-line: #b8cbed;
  --button-text: #ffffff;
  --sun-progress: 50%;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--white); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-wash) 0, var(--white) min(48vh, 520px));
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
  transition: background .7s ease;
}

body[data-period="dawn"] { --sky-wash: #fff3e8; --sky-glow: #ff9b72; --sky-line: #eac4b6; }
body[data-period="day"] {
  --sky-wash: #dcefff;
  --sky-glow: #ffd166;
  --sky-line: #9fbfe3;
  background:
    radial-gradient(circle at 79% -7%, rgba(255, 224, 132, .58), transparent 27%),
    linear-gradient(180deg, var(--sky-wash) 0%, #f4faff 56%, var(--white) 100%);
  background-attachment: fixed;
}
body[data-period="dusk"] { --sky-wash: #f7efff; --sky-glow: #f49d78; --sky-line: #cfbce3; }
body[data-period="night"] {
  --white: #101a32;
  --soft: #182541;
  --ink: #f4f7ff;
  --blue: #9fb7ff;
  --muted: #aeb9d0;
  --line: #33415f;
  --sky-wash: #071126;
  --sky-glow: #c8d5ff;
  --sky-line: #536687;
  --button-text: #091227;
  background:
    radial-gradient(circle at 72% -8%, rgba(87, 113, 176, .34), transparent 34%),
    radial-gradient(circle at 15% 18%, rgba(48, 75, 137, .2), transparent 30%),
    linear-gradient(180deg, #071126 0%, #101a32 72%, #111b33 100%);
  background-attachment: fixed;
}
body[data-weather="rain"] { --sky-wash: #eef4f6; --sky-glow: #7ea3c0; --sky-line: #aebfca; }
body[data-weather="fog"] { --sky-wash: #f1f3f3; --sky-glow: #b4bdbd; --sky-line: #c1c9c9; }
body[data-weather="storm"] { --sky-wash: #edf0f6; --sky-glow: #8e94d6; --sky-line: #adb3cf; }
body[data-weather="snow"] { --sky-wash: #f5f8fb; --sky-glow: #c2ddf5; --sky-line: #c8d7e5; }
body:not([data-period="night"])[data-weather="cloudy"],
body:not([data-period="night"])[data-weather="fog"] {
  --sky-wash: #d5dde1;
  --sky-line: #aeb9bf;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(255, 255, 255, .66), transparent 30%),
    radial-gradient(ellipse at 82% 24%, rgba(255, 255, 255, .48), transparent 34%),
    linear-gradient(180deg, #cbd4d9 0%, #e2e7e9 48%, #f4f6f7 100%);
  background-attachment: fixed;
}
body[data-period="day"][data-weather="rain"] {
  background: linear-gradient(180deg, #bfcfd9 0%, #e4ecef 58%, var(--white) 100%);
}
body[data-period="day"][data-weather="storm"] {
  background: linear-gradient(180deg, #9caaba 0%, #d7dfea 58%, var(--white) 100%);
}

button, input { font: inherit; }
button { color: inherit; }
.stars { position: fixed; z-index: 0; inset: 0; display: block; overflow: hidden; pointer-events: none; }
.star-field, .shooting-star-field, .cloud-field, .rain-field { position: absolute; inset: 0; overflow: hidden; }
.star-field { z-index: 1; }
.shooting-star-field { z-index: 1; }
.cloud-field { z-index: 2; }
.rain-field { z-index: 3; }
.star {
  --star-size: 2px;
  --star-low: .1;
  --star-mid: .4;
  --star-high: .94;
  position: absolute;
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 5px rgba(190, 211, 255, .9);
  opacity: 0;
}
body[data-period="night"] .star {
  animation-duration: var(--twinkle-speed, 4s);
  animation-timing-function: linear;
  animation-delay: var(--twinkle-delay, 0s);
  animation-iteration-count: infinite;
}
body[data-period="night"] .star--a { animation-name: twinkle-a; }
body[data-period="night"] .star--b { animation-name: twinkle-b; }
body[data-period="night"] .star--c { animation-name: twinkle-c; }
body[data-period="night"][data-weather="rain"] .star,
body[data-period="night"][data-weather="storm"] .star {
  --star-low: .025;
  --star-mid: .07;
  --star-high: .16;
  filter: blur(.3px);
}
.shooting-star {
  position: absolute;
  top: var(--shooting-top, 12vh);
  left: var(--shooting-left, 24vw);
  width: var(--shooting-length, 108px);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(218, 229, 255, .28) 45%, #ffffff);
  box-shadow: 18px 0 8px rgba(189, 211, 255, .2);
  opacity: 0;
  transform: rotate(var(--shooting-angle, -28deg)) translate3d(0, 0, 0);
  transform-origin: right center;
}
.shooting-star::after {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 7px 2px rgba(191, 214, 255, .72);
  content: "";
}
body[data-period="night"] .shooting-star {
  animation: shooting-star var(--shooting-duration, 20s) linear var(--shooting-delay, 2s) infinite;
}
body[data-period="night"][data-weather="rain"] .shooting-star,
body[data-period="night"][data-weather="storm"] .shooting-star,
body[data-period="night"][data-weather="cloudy"] .shooting-star { display: none; }
.cloud {
  position: absolute;
  top: var(--cloud-top, 18vh);
  left: -240px;
  width: var(--cloud-width, 140px);
  height: calc(var(--cloud-width, 140px) * .24);
  opacity: 0;
  backface-visibility: hidden;
  will-change: transform;
}
.cloud > span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--cloud-color, rgba(255, 255, 255, .82));
  box-shadow: var(--cloud-shadow, 0 12px 30px rgba(80, 119, 153, .12));
  filter: blur(var(--cloud-blur, .3px));
  transform-origin: 50% 58%;
  will-change: transform, opacity;
}
.cloud > span::before, .cloud > span::after {
  position: absolute;
  bottom: 9%;
  border-radius: 50%;
  background: inherit;
  content: "";
}
.cloud > span::before { left: 18%; width: 36%; height: 165%; }
.cloud > span::after { right: 16%; width: 28%; height: 128%; }
body:not([data-period="night"])[data-weather="clear"] .cloud:nth-child(7) {
  --cloud-color: rgba(176, 194, 211, .58);
  --cloud-shadow: 0 14px 32px rgba(76, 105, 133, .13);
  animation-name: clear-sky-cloud;
  animation-duration: 86s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
body[data-period="day"][data-weather="partlyCloudy"] .cloud:nth-child(-n+4) {
  opacity: .34;
  animation: cloud-drift var(--cloud-speed, 46s) linear infinite;
}
body:not([data-period="night"])[data-weather="cloudy"] .cloud,
body:not([data-period="night"])[data-weather="fog"] .cloud {
  --cloud-color: rgba(255, 255, 255, .66);
  --cloud-shadow: 0 18px 46px rgba(82, 99, 110, .13);
  --cloud-blur: 2.2px;
  width: var(--cloud-grey-width, 220px);
  height: calc(var(--cloud-grey-width, 220px) * .24);
  opacity: 0;
}
body:not([data-period="night"])[data-weather="cloudy"] .cloud:nth-child(-n+6),
body:not([data-period="night"])[data-weather="fog"] .cloud:nth-child(-n+6) {
  opacity: .38;
  animation: cloud-drift var(--cloud-speed, 46s) linear infinite;
}
body[data-weather="cloudy"] .cloud > span,
body[data-weather="fog"] .cloud > span {
  animation: cloud-breathe var(--cloud-breathe-speed, 10s) ease-in-out var(--cloud-breathe-delay, 0s) infinite;
}
body[data-period="day"][data-weather="rain"] .cloud,
body[data-period="day"][data-weather="storm"] .cloud { opacity: 0; }
body[data-period="day"][data-weather="rain"] .cloud:nth-child(-n+5),
body[data-period="day"][data-weather="storm"] .cloud:nth-child(-n+6) {
  --cloud-color: rgba(137, 158, 174, .76);
  --cloud-shadow: 0 16px 34px rgba(69, 88, 104, .17);
  opacity: .32;
  animation: cloud-drift var(--cloud-speed, 42s) linear infinite;
}
body[data-period="day"][data-weather="storm"] .cloud:nth-child(-n+6) { --cloud-color: rgba(100, 116, 137, .8); opacity: .44; }
body[data-period="night"][data-weather="partlyCloudy"] .cloud:nth-child(-n+4) {
  --cloud-color: rgba(176, 195, 222, .3);
  opacity: .11;
  animation: cloud-drift var(--cloud-speed, 46s) linear infinite;
}
body[data-period="night"][data-weather="cloudy"] .cloud {
  --cloud-color: rgba(220, 230, 243, .34);
  --cloud-shadow: 0 18px 48px rgba(122, 151, 190, .08);
  --cloud-blur: 1.1px;
  width: var(--cloud-grey-width, 220px);
  height: calc(var(--cloud-grey-width, 220px) * .24);
  opacity: 0;
}
body[data-period="night"][data-weather="cloudy"] .cloud:nth-child(-n+6) {
  opacity: .16;
  animation: cloud-drift var(--cloud-speed, 46s) linear infinite;
}
body[data-period="night"][data-weather="fog"] .cloud {
  --cloud-color: rgba(220, 230, 243, .3);
  --cloud-blur: 1.4px;
  width: var(--cloud-grey-width, 220px);
  height: calc(var(--cloud-grey-width, 220px) * .24);
  opacity: 0;
}
body[data-period="night"][data-weather="fog"] .cloud:nth-child(-n+6) {
  opacity: .14;
  animation: cloud-drift var(--cloud-speed, 46s) linear infinite;
}
body[data-period="night"][data-weather="rain"] .cloud:nth-child(-n+5),
body[data-period="night"][data-weather="storm"] .cloud:nth-child(-n+6) {
  --cloud-color: rgba(132, 157, 190, .28);
  opacity: .13;
  animation: cloud-drift var(--cloud-speed, 42s) linear infinite;
}
body[data-period="night"][data-weather="storm"] .cloud:nth-child(-n+6) { opacity: .19; }
.rain-drop {
  position: absolute;
  top: -14vh;
  width: var(--drop-width, 1px);
  height: var(--drop-length, 22px);
  border-radius: 1px;
  background: linear-gradient(180deg, transparent, rgba(139, 187, 222, .72));
  opacity: 0;
  transform: rotate(10deg);
}
body[data-weather="rain"] .rain-drop { animation: rainfall var(--rain-speed, .85s) linear infinite; }
body[data-weather="storm"] .rain-drop { width: var(--storm-drop-width, 1.5px); animation: rainfall var(--rain-speed, .62s) linear infinite; }
.rain-glass {
  position: fixed;
  z-index: 5;
  inset: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
}
body[data-weather="rain"] .rain-glass,
body[data-weather="storm"] .rain-glass { display: block; }
.rain-slide {
  position: absolute;
  top: -22vh;
  width: var(--slide-width, 2px);
  height: var(--slide-length, 70px);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(212, 232, 246, .06) 24%, rgba(189, 218, 238, .48));
  box-shadow: 0 0 4px rgba(204, 229, 246, .16);
  opacity: 0;
}
.rain-slide::after {
  position: absolute;
  right: var(--bead-right, -2px);
  bottom: var(--bead-bottom, -4px);
  width: var(--bead-width, 6px);
  height: var(--bead-height, 9px);
  border: 1px solid rgba(229, 243, 252, .28);
  border-radius: 55% 55% 62% 62%;
  background: rgba(184, 215, 235, .18);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .24), 0 2px 5px rgba(14, 37, 55, .2);
  content: "";
}
body[data-weather="rain"] .rain-slide { animation: glass-slide var(--slide-speed, 4s) ease-in infinite; }
body[data-weather="storm"] .rain-slide { animation: glass-slide var(--storm-slide-speed, 2.7s) ease-in infinite; }

.shell {
  width: min(880px, calc(100% - 48px));
  min-height: calc(100vh - 48px);
  margin: 0 auto;
  padding: 30px 0 64px;
}

.brand { display: flex; align-items: center; }
.brand__name { color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.brand__name:hover { color: var(--blue); }

.skyline {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(210px, 1.1fr);
  gap: 28px;
  align-items: center;
  margin-top: 26px;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--sky-line), transparent 28%);
  border-bottom: 1px solid color-mix(in srgb, var(--sky-line), transparent 28%);
}
.skyline__now { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.skyline__icon {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  color: var(--blue);
  border: 1px solid color-mix(in srgb, var(--sky-line), transparent 20%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--white), transparent 72%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}
body[data-period="night"] .skyline__icon { color: #fff; }
.skyline small, .skyline__times, .skyline__temperature span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.skyline small { display: block; margin-bottom: 3px; color: var(--muted); }
.skyline__now strong { display: block; overflow: hidden; font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.skyline__haiku { margin: 7px 0 0; color: var(--muted); white-space: pre-line; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; }
.skyline__temperature { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.skyline__temperature strong { font-size: 24px; font-weight: 600; letter-spacing: -.04em; }
.skyline__temperature span { color: var(--muted); font-size: 10px; text-transform: none; }
.skyline__day { min-width: 0; }
.skyline__times { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--muted); }
.skyline__track { position: relative; height: 24px; margin: -4px 0 -7px; background: linear-gradient(var(--sky-line), var(--sky-line)) center / 100% 1px no-repeat; cursor: ew-resize; touch-action: none; }
.skyline__track::before, .skyline__track::after { position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--sky-line); content: ""; transform: translateY(-50%); }
.skyline__track::before { left: 0; }
.skyline__track::after { right: 0; }
.skyline__track:focus-visible { outline: 1px solid var(--blue); outline-offset: 3px; }
.skyline__track i {
  position: absolute;
  top: 50%;
  left: clamp(2%, var(--sun-progress), 98%);
  width: 13px;
  height: 13px;
  border: 1px solid color-mix(in srgb, var(--sky-glow), #172033 18%);
  border-radius: 50%;
  background: var(--sky-glow);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sky-glow), transparent 74%);
  transform: translate(-50%, -50%);
  transition: left .8s ease, background .7s ease;
}
.skyline__track:hover i { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sky-glow), transparent 72%); }
body.is-scrubbing .skyline__track i { transform: translate(-50%, -50%) scale(1.16); transition: background .25s ease, transform .15s ease; }
.skyline__rewind { display: flex; min-height: 15px; margin-top: 7px; align-items: center; justify-content: space-between; gap: 10px; }
.skyline__rewind output { color: var(--muted); font: 600 8px/1.2 "IBM Plex Mono", monospace; letter-spacing: .045em; }
.skyline__rewind button { padding: 0; color: var(--blue); border: 0; background: transparent; cursor: pointer; font: 600 8px/1.2 "IBM Plex Mono", monospace; text-decoration: underline; text-underline-offset: 3px; }
.intro {
  max-width: 720px;
  margin: clamp(76px, 13vh, 130px) auto 0;
  animation: rise .4s ease both;
}

.kicker { display: none; }

h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(40px, 5.8vw, 58px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.045em;
}

h1 em { color: var(--blue); font-family: inherit; font-style: normal; font-weight: 600; white-space: nowrap; }
h1 em::after { display: none; }
.intro h1 > span { display: block; color: var(--blue); }
.lede { max-width: 530px; margin: 25px 0 28px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.returning-reader { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px; margin: 0 0 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.returning-reader[hidden] { display: none; }
.returning-reader p { min-width: 0; margin: 0; }
.returning-reader small, .returning-reader p > span { display: block; color: var(--muted); }
.returning-reader small { margin-bottom: 5px; font: 600 8px/1.2 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.returning-reader strong { display: block; font-size: 20px; line-height: 1.2; }
.returning-reader p > span { margin-top: 4px; font-size: 10px; line-height: 1.4; }
.returning-reader > div { display: flex; align-items: center; gap: 10px; }
.returning-reader .primary { min-height: 44px; padding-inline: 14px; font-size: 11px; }
.returning-reader > div > button:last-child { padding: 8px 3px; color: var(--muted); border: 0; border-bottom: 1px solid currentColor; background: transparent; cursor: pointer; font: 600 9px/1.2 "IBM Plex Mono", monospace; }
.returning-reader > div > button:last-child:hover { color: var(--ink); }

.primary, .back { border: 0; cursor: pointer; transition: background .16s ease, color .16s ease; }
.primary { display: inline-flex; min-height: 50px; padding: 0 20px; align-items: center; justify-content: center; gap: 24px; color: var(--button-text); background: var(--blue); border-radius: 8px; font-size: 14px; font-weight: 700; }
.primary > span { font-size: 19px; font-weight: 400; line-height: 1; transition: transform .16s ease; }
.primary:hover { background: #1f47a8; }
.primary:hover > span { transform: translateX(3px); }
body[data-period="night"] .primary:hover { background: #b8c9ff; }
#startButton { width: fit-content; margin-left: auto; color: var(--blue); border: 1px solid var(--blue); background: transparent; }
#startButton:hover { color: #fff; background: var(--blue); }
body[data-period="night"] #startButton { color: #fff; border-color: rgba(255, 255, 255, .86); background: transparent; }
body[data-period="night"] #startButton:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.next-arrow {
  width: 52px;
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 50%;
  background: transparent;
}
.next-arrow:hover { color: var(--button-text); background: var(--blue); }
body[data-period="night"] .next-arrow { color: #fff; border-color: rgba(255, 255, 255, .86); background: transparent; }
body[data-period="night"] .next-arrow:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.primary:focus-visible, .back:focus-visible, input:focus-visible + span, input:focus-visible { outline: 3px solid #b6c9f6; outline-offset: 3px; }
.fine-print { display: none; }

.quiz { width: min(700px, 100%); margin: clamp(64px, 10vh, 100px) auto 0; }
.progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; margin-bottom: 42px; color: var(--muted); font-size: 10px; font-weight: 600; }
.progress__track { height: 3px; overflow: hidden; background: #edf0f5; border-radius: 4px; }
.progress__track i { display: block; width: 25%; height: 100%; background: var(--blue); transition: width .3s ease; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; animation: rise .3s ease both; }
legend { width: 100%; margin: 0 0 28px; padding: 0; font-size: clamp(34px, 5vw, 46px); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }
#lifestyleTitleOne { opacity: .74; }
legend small { display: none; }
.optional-note { color: var(--muted); font-size: .32em; font-weight: 600; letter-spacing: 0; vertical-align: middle; }

.sign-grid, .option-grid { display: grid; gap: 8px; }
.sign-grid { grid-template-columns: repeat(4, 1fr); }
.option-grid { grid-template-columns: repeat(12, 1fr); }
.option-grid label { grid-column: span 3; }
.sign-grid { touch-action: manipulation; }
.sign-grid__hint { margin: 11px 0 0; color: var(--muted); font: 500 9px/1.45 "IBM Plex Mono", monospace; }
.age-grid { grid-template-columns: repeat(5, 1fr); }
.sign-grid label, .option-grid label, .choice-list label { position: relative; cursor: pointer; }
.sign-grid input, .option-grid input, .choice-list input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sign-grid span, .option-grid span { display: flex; min-height: 82px; padding: 10px 6px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); text-align: center; transition: border-color .15s, background .15s; }
.sign-grid b, .option-grid b { font-size: 12px; line-height: 1.25; }
.sign-grid i { color: var(--blue); font: normal 19px/1 Georgia, "Times New Roman", serif; }
.option-grid i { display: block; width: 27px; height: 27px; color: var(--blue); line-height: 0; }
.option-grid i svg { width: 100%; height: 100%; overflow: visible; }
body[data-period="night"] .sign-grid i, body[data-period="night"] .option-grid i { color: #fff; }
.sign-grid label:hover span, .option-grid label:hover span { border-color: var(--blue); }
.sign-grid input:checked + span, .option-grid input:checked + span { color: var(--button-text); border-color: var(--blue); background: var(--blue); }
.sign-grid input:checked + span i, .option-grid input:checked + span i { color: var(--button-text); }

.choice-list { display: grid; gap: 7px; }
.choice-list span { display: flex; padding: 14px 16px; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); transition: border-color .15s, background .15s; }
.choice-list b { font-size: 14px; }
.choice-list small { display: none; }
.choice-list label:hover span { border-color: var(--blue); }
.choice-list input:checked + span { color: var(--button-text); border-color: var(--blue); background: var(--blue); }
.choice-list input:checked + span small { color: #e4ebff; }

.big-input { display: flex; align-items: end; gap: 16px; border-bottom: 1px solid #aeb6c4; }
.big-input input { width: 190px; padding: 0; color: var(--blue); border: 0; outline: 0; background: transparent; font-size: clamp(76px, 16vw, 120px); font-weight: 600; line-height: .9; letter-spacing: -.06em; }
.big-input input::placeholder { color: #d9dee7; }
.big-input i { padding-bottom: 13px; color: var(--muted); font-size: 11px; font-style: normal; }
.text-input { display: block; }
.text-input span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 600; }
.text-input input { width: 100%; padding: 12px 0; color: var(--ink); border: 0; border-bottom: 1px solid #aeb6c4; outline: 0; background: transparent; font-size: clamp(26px, 4.5vw, 40px); font-weight: 500; line-height: 1.2; letter-spacing: -.03em; }
.text-input input::placeholder { color: #aeb6c4; }
.job-fallbacks { display: flex; margin-top: 22px; flex-wrap: wrap; gap: 8px; }
.job-fallback-choice { position: relative; cursor: pointer; }
.job-fallback-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.job-fallback-choice span { display: inline-flex; min-height: 48px; padding: 0 14px; align-items: center; gap: 8px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--white); transition: color .15s, border-color .15s, background .15s; }
.job-fallback-choice i { color: var(--blue); font: normal 17px/1 "IBM Plex Mono", monospace; }
.job-fallback-choice b { font-size: 12px; }
.job-fallback-choice:hover span { border-color: var(--blue); }
.job-fallback-choice input:checked + span { color: var(--button-text); border-color: var(--blue); background: var(--blue); }
.job-fallback-choice input:checked + span i { color: var(--button-text); }
.job-submit-hint { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

.error { min-height: 20px; margin: 16px 0 0; color: #b42318; font-size: 12px; }
.quiz__actions { display: flex; width: 100%; margin-top: 22px; align-items: center; justify-content: flex-start; gap: 15px; }
.quiz__actions .next-arrow { margin-right: 0; margin-left: auto; flex: 0 0 52px; }
.quiz__actions .next-arrow[hidden] { display: none; }
.quiz__actions .back { display: inline-grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid color-mix(in srgb, var(--line), transparent 24%); border-radius: 50%; font-size: 16px; }
.quiz__actions .back[hidden] { display: none; }
.back { padding: 12px 0; color: var(--muted); background: transparent; }
.back:hover { color: var(--ink); }

.result { max-width: 760px; margin: 64px auto 0; text-align: left; animation: rise .4s ease both; }
.result-mode { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.result-mode .kicker { margin: 0; }
.result-mode button { padding: 7px 0; color: var(--muted); border: 0; border-bottom: 1px solid currentColor; background: transparent; cursor: pointer; font: 600 8px/1.2 "IBM Plex Mono", monospace; letter-spacing: .04em; }
.result-mode button:hover, .result-mode button[aria-pressed="true"] { color: var(--ink); }
.reading-tools { margin: 12px 0 20px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--white), transparent 24%); }
.reading-tools > summary { display: flex; min-height: 44px; padding: 0 13px; align-items: center; justify-content: space-between; cursor: pointer; color: var(--muted); font: 600 9px/1.3 "IBM Plex Mono", monospace; letter-spacing: .025em; }
.reading-tools > summary::-webkit-details-marker { display: none; }
.reading-tools > summary::marker { content: ""; }
.reading-tools > summary span { transition: transform .2s ease; }
.reading-tools[open] > summary span { transform: rotate(45deg); }
.reading-tools__body { display: flex; padding: 12px 13px 13px; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); }
.tone-picker { display: inline-flex; padding: 3px; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--white), transparent 18%); }
.tone-picker > span { padding: 0 8px; color: var(--muted); font: 600 8px/1.2 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .055em; }
.tone-picker button, .favorite-sign { min-height: 34px; padding: 7px 10px; color: var(--muted); border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 9px; font-weight: 600; }
.tone-picker button[aria-pressed="true"] { color: var(--button-text); background: var(--blue); }
.favorite-sign { border: 1px solid var(--line); }
.favorite-sign[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.result-signs { margin: 0 0 18px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-signs__head { display: flex; margin-bottom: 9px; align-items: center; justify-content: space-between; gap: 16px; }
.result-signs__head strong, .result-signs__head span { font-family: "IBM Plex Mono", monospace; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.result-signs__head span { color: var(--muted); }
.result-signs__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px 5px; }
.result-signs__grid::-webkit-scrollbar { display: none; }
.result-signs button { min-width: 0; padding: 11px 4px 10px; color: var(--muted); border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; }
.result-signs button i { display: block; margin-bottom: 5px; color: currentColor; font: normal 20px/1 Georgia, "Times New Roman", serif; }
.result-signs button span { display: block; overflow: hidden; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.result-signs button:hover { color: var(--ink); border-color: var(--line); }
.result-signs button[aria-pressed="true"] { color: var(--blue); border-color: var(--blue); box-shadow: inset 0 -2px var(--blue); }
body[data-period="night"] .result-signs button[aria-pressed="true"] { color: #fff; border-color: rgba(255,255,255,.76); box-shadow: inset 0 -2px #fff; background: rgba(255,255,255,.045); }
.result-signs button:focus-visible { outline: 2px solid #b6c9f6; outline-offset: 2px; }
.astro-profile { margin: 0 0 28px; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--white), transparent 18%); animation: rise .28s ease both; }
.astro-profile.is-quick-profile { width: min(760px, 100%); margin: clamp(40px, 7vh, 72px) auto 0; }
.astro-profile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.astro-profile__head small, .astro-profile__facts small, .birth-chart small, .birth-chart__result small { display: block; color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .065em; }
.astro-profile__head h2 { margin: 5px 0 0; font-size: clamp(28px, 5vw, 42px); line-height: 1; letter-spacing: -.035em; }
.astro-profile__head h2 > span:first-child { color: var(--blue); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
body[data-period="night"] .astro-profile__head h2 > span:first-child { color: #fff; }
.astro-profile__head button { width: 34px; height: 34px; padding: 0; color: var(--muted); border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; font-size: 20px; }
.astro-profile__facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.astro-profile__facts p { min-width: 0; margin: 0; padding: 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.astro-profile__facts p:nth-child(n+4) { grid-column: span 1; }
.astro-profile__facts strong { display: block; margin-top: 5px; font-size: 12px; line-height: 1.45; }
.birth-chart { margin-top: 22px; padding-top: 21px; border-top: 1px solid var(--line); }
.birth-chart__intro { display: grid; grid-template-columns: 1fr minmax(220px, .85fr); align-items: end; gap: 24px; }
.birth-chart__intro h3 { margin: 5px 0 0; font-size: 23px; letter-spacing: -.025em; }
.birth-chart__intro p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.known-ascendant { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.known-ascendant label span, .birth-chart__fields label span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 600; }
.known-ascendant select { width: 100%; min-height: 43px; padding: 8px 34px 8px 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; outline: 0; background: var(--white); font: 12px/1.2 inherit; }
.known-ascendant button { align-self: end; min-height: 43px; padding: 0 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.known-ascendant button span { margin-left: 13px; }
.birth-chart__divider { display: flex; margin: 18px 0 0; align-items: center; gap: 10px; color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.birth-chart__divider::before, .birth-chart__divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.birth-chart__precision { max-width: 390px; margin: 13px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.birth-chart__fields { display: grid; grid-template-columns: 1.1fr .75fr 1.1fr; gap: 10px; margin-top: 18px; }
.birth-chart__fields > label { min-width: 0; }
.birth-chart__fields input, .birth-chart__fields select { width: 100%; min-height: 43px; padding: 8px 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; outline: 0; background: transparent; font: 12px/1.2 inherit; }
.birth-chart__fields select { padding-right: 30px; }
.birth-chart__fields select option { color: #172033; background: #fff; }
.birth-chart__fields input:focus, .birth-chart__fields select:focus { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue), transparent 78%); }
.birth-city small, #birthTimeHint { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.birth-date { min-width: 0; }
.birth-date__controls { display: grid !important; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 5px; width: 100%; margin: 0 !important; }
.birth-date__controls select { min-width: 0; padding-right: 21px; }
.birth-chart__submit { display: flex; width: fit-content; min-height: 42px; margin: 14px 0 0 auto; padding: 0 14px; align-items: center; gap: 18px; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.birth-chart__submit:hover { border-color: var(--blue); }
.birth-chart__error { min-height: 16px; margin: 8px 0 0; color: #e05252; font-size: 10px; text-align: right; }
.birth-chart__error.is-note { color: var(--muted); }
.birth-chart__result { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
.birth-chart__result p { position: relative; margin: 0; padding: 18px 18px 18px 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--white), transparent 12%); }
.birth-chart__result p::before { position: absolute; inset: 0 auto 0 0; width: 4px; content: ""; background: var(--tip-color, var(--blue)); }
.astral-tip--ascendant { --tip-color: #315fd1; }
.astral-tip--descendant { --tip-color: #6b5bc7; }
.astral-tip--chinese { --tip-color: #3d8277; }
.astral-tip--decan { --tip-color: #b57a37; }
.birth-chart__result strong, .birth-chart__result span { display: block; }
.birth-chart__result strong { margin: 7px 0; font-size: 18px; line-height: 1.15; }
.birth-chart__result span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.birth-chart__result .astral-tip__cue { position: absolute; top: 17px; right: 18px; color: var(--tip-color); font: 600 8px/1.3 "IBM Plex Mono", monospace; }
.birth-chart__result em { display: block; margin-top: 10px; color: var(--muted); font-size: 9px; font-style: normal; line-height: 1.45; }
.decan-scale { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 12px; }
.decan-scale i { height: 4px; border-radius: 3px; background: var(--line); }
.decan-scale i.is-active { background: var(--blue); }
.birth-chart__result.is-single { grid-template-columns: 1fr; }
.astral-theme-trigger { display: flex; min-height: 44px; margin: 14px 0 0 auto; padding: 0 15px; align-items: center; gap: 22px; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.astral-theme-trigger:hover { border-color: var(--ink); }
.astral-theme { margin-top: 30px; }
.astral-theme__credit { margin: 0 0 14px; color: var(--muted); font: 600 8px/1.3 "IBM Plex Mono", monospace; text-align: right; letter-spacing: .035em; }
.astral-theme__head { display: grid; grid-template-columns: 1fr .9fr; align-items: end; gap: 22px; padding: 19px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--white), transparent 22%); }
.astral-theme__head small, .astral-theme__reading small { color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.astral-theme__head h3 { margin: 5px 0 0; font-size: 25px; letter-spacing: -.03em; }
.astral-theme__head p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.astral-theme__body { display: grid; grid-template-columns: 260px 1fr; gap: 28px; margin-top: 14px; padding: 22px 19px; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--white), transparent 22%); }
.theme-wheel { position: relative; width: 250px; height: 250px; border: 1px solid var(--line); border-radius: 50%; box-shadow: inset 0 0 0 32px color-mix(in srgb, var(--white), transparent 70%), inset 0 0 0 33px var(--line); }
.theme-wheel > span { position: absolute; width: 26px; height: 26px; display: grid; place-items: center; color: var(--muted); border: 1px solid transparent; border-radius: 50%; transform: translate(-50%, -50%); font: 16px/1 Georgia, "Times New Roman", serif; }
.theme-wheel > span.is-sun { color: var(--ink); border-color: var(--ink); background: var(--white); }
.theme-wheel > span.is-ascendant { color: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink), transparent 76%); }
.theme-wheel > span.is-descendant { color: var(--ink); border-color: var(--muted); border-style: dashed; }
.theme-wheel > span.is-sun.is-ascendant { box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--ink); }
.theme-wheel > span.theme-sign-marker { cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.theme-wheel > span.theme-sign-marker:hover, .theme-wheel > span.theme-sign-marker:focus-visible, .theme-wheel > span.theme-sign-marker.is-revealed { z-index: 4; color: var(--white); border-color: var(--ink); outline: 0; background: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink), transparent 76%); }
.theme-wheel > span.theme-planet { z-index: 2; width: 19px; height: 19px; color: #fff; border-color: rgba(255, 255, 255, .72); outline: 0; background: #6b5bc7; cursor: pointer; font-size: 12px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--white), transparent 18%); transition: box-shadow .15s ease, filter .15s ease; }
.theme-wheel > span.theme-planet:hover,
.theme-wheel > span.theme-planet:focus-visible,
.theme-wheel > span.theme-planet.is-revealed { z-index: 4; filter: brightness(1.12); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px #6b5bc7; }
.theme-wheel > span.theme-planet > i {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-style: normal;
  transform-origin: center;
  animation: planet-self-spin var(--planet-spin, 18s) linear infinite;
  animation-direction: var(--planet-direction, normal);
}

@keyframes planet-self-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-wheel > span.theme-planet > i { animation: none; }
}
.theme-wheel > div { position: absolute; inset: 50% auto auto 50%; width: 112px; transform: translate(-50%, -50%); text-align: center; }
.theme-wheel > div small, .theme-wheel > div strong { display: block; }
.theme-wheel > div small { margin: 5px 0 2px; color: var(--muted); font: 7px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.theme-wheel > div strong { font-size: 13px; }
.theme-sign-reveal { position: absolute; z-index: 5; inset: 50% auto auto 50%; width: max-content; max-width: 170px; min-width: 112px; padding: 10px 13px; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; opacity: 0; background: var(--white); box-shadow: 0 8px 26px color-mix(in srgb, var(--ink), transparent 84%); pointer-events: none; transform: translate(-50%, -50%) scale(.9); font-size: 11px; font-weight: 700; line-height: 1.25; text-align: center; transition: opacity .15s ease, transform .15s ease; }
.theme-sign-reveal.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.astral-theme__reading > p { margin: 0; font-size: 14px; line-height: 1.65; }
.astral-theme__reading > div { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
.astral-theme__reading > div p { margin: 0; padding: 0 0 0 13px; border-left: 2px solid var(--line); }
.astral-theme__reading strong { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; }
.astral-theme__extra { margin-top: 12px !important; color: var(--muted); font-size: 10px !important; }
.planet-positions { margin-top: 14px; padding: 19px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--white), transparent 22%); }
.planet-positions__head { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 11px; }
.planet-positions__head small { color: var(--muted); font: 600 8px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .07em; }
.planet-positions__head h4 { margin: 4px 0 0; font-size: 18px; }
.planet-positions__head p { margin: 0; color: var(--muted); font-size: 9px; }
.planet-positions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--line); }
.planet-positions article { display: grid; grid-template-columns: 28px 1fr; gap: 10px; min-width: 0; padding: 11px; background: var(--white); }
.planet-positions article > i { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font: normal 15px/1 Georgia, "Times New Roman", serif; }
.planet-positions article p { min-width: 0; margin: 0; }
.planet-positions article small { display: block; color: var(--muted); font: 600 7px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.planet-positions article strong { display: block; margin-top: 2px; font-size: 11px; }
.planet-positions article span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.chart-guide { margin-top: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); }
.chart-guide summary { display: flex; padding: 12px 14px; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: 11px; font-weight: 700; }
.chart-guide summary::-webkit-details-marker { display: none; }
.chart-guide summary span { font: 18px/1 "IBM Plex Mono", monospace; transition: transform .18s ease; }
.chart-guide[open] summary span { transform: rotate(45deg); }
.chart-guide__body { padding: 0 14px 14px; border-top: 1px solid var(--line); }
.chart-guide__body > p { max-width: 720px; margin: 12px 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.chart-guide dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
.chart-guide dl div { padding: 10px; background: var(--white); }
.chart-guide dt { font-size: 9px; font-weight: 700; }
.chart-guide dd { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.chart-guide__key { margin-bottom: 0 !important; color: var(--ink) !important; }
.theme-summary-wrap { margin-top: 14px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--white), transparent 22%); }
.theme-summary-wrap > summary { display: flex; min-height: 50px; padding: 0 17px; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: 11px; font-weight: 700; }
.theme-summary-wrap > summary::-webkit-details-marker { display: none; }
.theme-summary-wrap > summary span { font: 18px/1 "IBM Plex Mono", monospace; transition: transform .18s ease; }
.theme-summary-wrap[open] > summary span { transform: rotate(45deg); }
.theme-summary-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; overflow: hidden; border-top: 1px solid var(--line); background: var(--line); }
.theme-summary-card p { margin: 0; padding: 12px; background: var(--white); }
.theme-summary-card small { display: block; color: var(--muted); font: 600 8px/1.3 "IBM Plex Mono", monospace; }
.theme-summary-card strong { display: block; margin-top: 5px; font-size: 11px; line-height: 1.35; }
.astral-synthesis { margin-top: 14px; padding: 20px 19px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--white), transparent 22%); }
.astral-synthesis small { color: var(--muted); font: 600 8px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .07em; }
.astral-synthesis strong { display: block; margin-top: 6px; font-size: 15px; line-height: 1.35; }
.astral-synthesis p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.astral-totem { display: grid; grid-template-columns: 38px 1fr; gap: 12px; margin-top: 14px; padding-top: 14px; align-items: center; border-top: 1px solid var(--line); }
.astral-totem > span { display: grid; width: 36px; height: 36px; place-items: center; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; font: 21px/1 Georgia, "Times New Roman", serif; }
.astral-totem p { margin: 0; }
.astral-totem strong { margin-top: 3px; font-size: 13px; }
.astral-totem p > span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.astral-theme__disclaimer { margin: 16px 0 0; padding-top: 12px; color: var(--muted); border-top: 1px solid var(--line); font-size: 8px; line-height: 1.5; text-align: right; }
.astro-profile__note { margin: 12px 0 0; color: var(--muted); font-size: 9px; text-align: right; }
.ticket-wrap { width: 100%; margin: 0 auto 26px; }
.ticket-wrap::before { display: none; }
.ticket { color: var(--ink); background: transparent; text-align: left; }
.ticket__top { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: "IBM Plex Mono", monospace; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .065em; }
.ticket__body { padding: 28px 0 18px; }
.daily-note { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 0 0 44px; padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.daily-note p { margin: 0; font-size: 12px; line-height: 1.45; }
.daily-note__date { grid-column: 1 / -1; color: var(--ink); font-size: 15px !important; font-weight: 700; }
.daily-note__date small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
.daily-note p span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.daily-note a { color: var(--ink); text-decoration-color: #b9c8ed; text-underline-offset: 3px; }
.daily-note__proverb { grid-column: 1 / -1; max-width: 650px; padding-left: 13px; border-left: 2px solid #c5d4f6; color: var(--ink); font-size: 13px !important; line-height: 1.6 !important; }
.daily-note__joke { grid-column: 1 / -1; max-width: 590px; color: var(--muted); font-style: italic; }
.daily-note__action { grid-column: 1 / -1; max-width: 680px; margin-top: 5px !important; padding: 13px 15px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--white), transparent 28%); }
.daily-note__action span { color: var(--blue) !important; font-family: "IBM Plex Mono", monospace; }
.daily-note__action b { display: block; font-size: 13px; font-weight: 600; line-height: 1.55; }
.weather-verdict { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 5px 18px; margin: -18px 0 42px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.weather-verdict small { grid-row: 1 / 3; padding-top: 3px; color: var(--blue); font-family: "IBM Plex Mono", monospace; font-size: 9px; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: .055em; }
.weather-verdict strong { font-size: 15px; line-height: 1.45; }
.weather-verdict span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.ticket__eyebrow { margin: 0 0 10px; color: var(--blue); font-size: 10px; font-weight: 700; }
.ticket h2 { max-width: 620px; margin: 0; font-size: clamp(38px, 6.5vw, 54px); font-weight: 600; line-height: 1.08; letter-spacing: -.04em; }
.ticket__prediction { max-width: 640px; margin: 24px 0 30px; font-size: 17px; line-height: 1.75; overflow-wrap: anywhere; }
.daily-rubrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 34px; margin: 4px 0 36px; }
.daily-rubrics article { min-width: 0; padding: 15px 0 0; border-top: 1px solid var(--line); }
.daily-rubrics small { display: block; margin-bottom: 7px; color: var(--blue); font: 600 8px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .055em; }
.daily-rubrics article p { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.65; }
.daily-reactions { display: flex; margin: 0 0 38px; padding-top: 15px; align-items: center; flex-wrap: wrap; gap: 7px; border-top: 1px solid var(--line); }
.daily-reactions > small { margin-right: 3px; color: var(--muted); font: 600 8px/1.2 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .055em; }
.daily-reactions > div { display: flex; flex-wrap: wrap; gap: 5px; }
.daily-reactions button { min-height: 32px; padding: 6px 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; font-size: 9px; font-weight: 600; }
.daily-reactions button[aria-pressed="true"] { color: var(--button-text); border-color: var(--blue); background: var(--blue); }
.daily-reactions > p { min-width: 100%; margin: 0; color: var(--muted); font-size: 8px; }
.why-sky { max-width: 640px; margin: -8px 0 20px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; }
.why-sky summary { cursor: pointer; font: 600 10px/1.3 "IBM Plex Mono", monospace; }
.why-sky ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.why-sky li { padding: 6px 9px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; font-size: 9px; line-height: 1.3; }
.daily-synthesis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
.daily-synthesis p { margin: 0; padding: 13px; background: var(--white); }
.daily-synthesis small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 600; }
.daily-synthesis strong { font-size: 11px; line-height: 1.45; }
.result-jump-nav { display: none; }
.sign-compare { margin: 32px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.sign-compare summary { display: flex; min-height: 48px; padding: 0 15px; align-items: center; justify-content: space-between; cursor: pointer; font: 600 10px/1.3 "IBM Plex Mono", monospace; }
.sign-compare[open] summary span { transform: rotate(45deg); }
.sign-compare__body { padding: 0 15px 16px; border-top: 1px solid var(--line); }
.sign-compare__body > div { display: grid; grid-template-columns: 1fr auto 1fr; padding: 14px 0; align-items: end; gap: 10px; }
.sign-compare label { color: var(--muted); font-size: 8px; font-weight: 600; }
.sign-compare select { display: block; width: 100%; min-height: 40px; margin-top: 5px; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; background: var(--white); font: 600 11px/1.2 inherit; }
.sign-compare__body > strong { display: block; font-size: 15px; }
.sign-compare__body > p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.recommendations small { display: block; margin-bottom: 9px; color: var(--blue); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.astral-barometer { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.astral-barometer__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--soft); }
.astral-barometer__head small, .dispatch-card small { color: var(--blue); font-family: "IBM Plex Mono", monospace; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .055em; }
.astral-barometer__head span { color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 8px; text-align: right; text-transform: uppercase; letter-spacing: .045em; }
.astral-barometer__items { display: grid; grid-template-columns: repeat(3, 1fr); }
.astral-gauge { min-width: 0; padding: 15px; border-right: 1px solid var(--line); }
.astral-gauge:last-child { border-right: 0; }
.astral-gauge small { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 600; }
.astral-gauge strong { display: block; min-height: 36px; font-size: 12px; line-height: 1.45; }
.astral-gauge > i { display: block; height: 3px; margin-top: 10px; overflow: hidden; border-radius: 2px; background: #edf0f5; }
.astral-gauge > i b { display: block; width: 50%; height: 100%; border-radius: inherit; background: var(--blue); transition: width .5s ease; }
.omens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.omens div { padding: 16px; background: var(--white); }
.omens small, .ticket__advice span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 600; }
.omens strong { font-size: 13px; line-height: 1.4; }
.daily-luck { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.daily-luck__head { display: flex; padding: 14px 16px; align-items: end; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); background: var(--soft); }
.daily-luck__head small { color: var(--blue); font: 600 8px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .065em; }
.daily-luck__head h3 { margin: 5px 0 0; font-size: 13px; }
.daily-luck__head h3 strong { display: inline-grid; min-width: 31px; min-height: 31px; margin-left: 7px; place-items: center; color: var(--button-text); border-radius: 50%; background: var(--blue); font-size: 15px; }
.daily-luck__head p { margin: 0; color: var(--muted); font: 600 9px/1.4 "IBM Plex Mono", monospace; text-align: right; text-transform: uppercase; }
.daily-luck__draw { display: flex; padding: 14px 16px; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.daily-luck__draw > span { margin-right: auto; color: var(--muted); font-size: 9px; font-weight: 600; }
.daily-luck__draw > div { display: flex; gap: 5px; }
.daily-luck__draw > div i, .daily-luck__draw b i { display: inline-grid; width: 27px; height: 27px; place-items: center; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; background: var(--white); font: normal 600 10px/1 "IBM Plex Mono", monospace; }
.daily-luck__draw b { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; }
.daily-luck__draw b i { color: var(--button-text); border-color: var(--blue); background: var(--blue); }
.daily-luck__details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.daily-luck__details p { min-width: 0; margin: 0; padding: 13px; background: var(--white); }
.daily-luck__details small { display: block; margin-bottom: 6px; color: var(--muted); font-size: 8px; font-weight: 600; }
.daily-luck__details strong { display: flex; align-items: center; gap: 7px; font-size: 10px; line-height: 1.45; }
#luckyColorSwatch { display: inline-block; flex: 0 0 12px; width: 12px; height: 12px; border: 1px solid color-mix(in srgb, var(--ink), transparent 70%); border-radius: 50%; }
.daily-luck__disclaimer { margin: 0; padding: 9px 16px; color: var(--muted); border-top: 1px solid var(--line); font-size: 8px; line-height: 1.45; }
.dispatches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.dispatch-card { min-height: 152px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.dispatch-card--paris { background: color-mix(in srgb, var(--sky-wash), var(--white) 46%); }
.dispatch-card--event { background: var(--white); }
.dispatch-card strong { display: block; margin-top: 24px; font-size: 15px; line-height: 1.4; }
.dispatch-card p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.daily-sky { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.daily-sky .daily-sky__head { display: flex; padding: 14px 16px; align-items: end; justify-content: space-between; gap: 22px; border-bottom: 1px solid var(--line); background: var(--soft); }
.daily-sky .daily-sky__head small { color: var(--blue); font: 600 8px/1.3 "IBM Plex Mono", monospace; letter-spacing: .065em; }
.daily-sky .daily-sky__head h3 { margin: 4px 0 0; font-size: 15px; }
.daily-sky .daily-sky__head p { max-width: 260px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; text-align: right; }
.daily-sky__details > #dailySkyList { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.daily-sky article { min-width: 0; padding: 13px 10px; border-right: 1px solid var(--line); }
.daily-sky article:last-child { border-right: 0; }
.daily-sky article i { display: block; color: #6b5bc7; font: normal 19px/1 Georgia, "Times New Roman", serif; }
.daily-sky article small, .daily-sky article strong, .daily-sky article span { display: block; }
.daily-sky article small { margin-top: 8px; color: var(--muted); font: 600 7px/1.2 "IBM Plex Mono", monospace; }
.daily-sky article strong { margin-top: 3px; font-size: 10px; line-height: 1.35; }
.daily-sky article span { margin-top: 5px; color: var(--muted); font-size: 7px; line-height: 1.4; }
.daily-sky__conclusion { display: block; padding: 15px 16px 16px; background: color-mix(in srgb, #6b5bc7, var(--white) 95%); }
.daily-sky__conclusion small { display: block; color: #6b5bc7; font: 600 8px/1.3 "IBM Plex Mono", monospace; letter-spacing: .035em; }
.daily-sky__conclusion dl { max-width: 700px; margin: 8px 0 0; }
.daily-sky__conclusion dl > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--line), transparent 35%); }
.daily-sky__conclusion dl > div:first-child { border-top: 0; }
.daily-sky__conclusion dt { color: var(--muted); font: 600 8px/1.5 "IBM Plex Mono", monospace; }
.daily-sky__conclusion dd { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.daily-sky__conclusion .daily-sky__takeaway dd { color: var(--ink); font-weight: 650; }
.daily-sky__details { border-top: 1px solid var(--line); }
.daily-sky__details summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; color: var(--ink); cursor: pointer; font-size: 9px; font-weight: 650; list-style: none; }
.daily-sky__details summary::-webkit-details-marker { display: none; }
.daily-sky__details summary span { color: #6b5bc7; font-size: 18px; font-weight: 400; transition: transform .18s ease; }
.daily-sky__details[open] summary span { transform: rotate(45deg); }
.daily-sky__details > p { margin: 0; padding: 0 16px 13px; color: var(--muted); font-size: 7px; line-height: 1.45; }
.recommendations { margin-top: 12px; }
.day-navigation { margin: 18px 0 8px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--soft), transparent 24%); }
.day-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0; }
.day-switch button { min-height: 40px; padding: 0 12px; color: var(--muted); border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; font: 600 9px/1 "IBM Plex Mono", monospace; }
.day-switch button:hover { color: var(--ink); border-color: var(--line); }
.day-switch button.is-active { color: var(--button-text); border-color: var(--blue); background: var(--blue); }
.countertop-more { margin-top: 22px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--soft), transparent 28%); }
.countertop-more > summary { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 16px; cursor: pointer; list-style: none; }
.countertop-more > summary::-webkit-details-marker { display: none; }
.countertop-more > summary span { color: var(--ink); font-size: 14px; font-weight: 700; }
.countertop-more > summary small { grid-column: 1; color: var(--muted); font-size: 9px; }
.countertop-more > summary i { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--blue); font: normal 22px/1 sans-serif; transition: transform .18s ease; }
.countertop-more[open] > summary i { transform: rotate(45deg); }
.countertop-more__body { padding: 0 12px 12px; }
.drink-card { width: min(100%, 370px); min-height: 230px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; }
.drink-card h3 { margin: 42px 0 9px; font-size: 21px; line-height: 1.2; letter-spacing: -.025em; }
.drink-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.glass-suggestion { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.glass-suggestion i { display: block; flex: 0 0 42px; width: 42px; height: 52px; color: var(--blue); }
.glass-suggestion svg { display: block; width: 100%; height: 100%; overflow: visible; }
.glass-suggestion span { display: block; min-width: 0; }
.glass-suggestion span small { margin: 0 0 3px; color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .09em; }
.glass-suggestion strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.25; }
body[data-period="night"] .glass-suggestion i { color: #fff; }
.ticket__bottom { display: none; }
.result__actions { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.result__actions #shareReadingButton, .result__actions #shareCardButton { padding: 8px 0; color: var(--muted); border: 0; border-bottom: 1px solid currentColor; background: transparent; cursor: pointer; font: 600 9px/1.2 "IBM Plex Mono", monospace; }
.result__actions #shareReadingButton:hover, .result__actions #shareCardButton:hover { color: var(--ink); }
.result__actions p { margin: 0; color: var(--muted); font-size: 8px; }

footer { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes twinkle-a {
  0%, 100% { opacity: var(--star-low); transform: scale(.68); }
  17% { opacity: var(--star-mid); transform: scale(.92); }
  31% { opacity: var(--star-high); transform: scale(1.42); }
  54% { opacity: var(--star-mid); transform: scale(.82); }
  83% { opacity: var(--star-low); transform: scale(.62); }
}
@keyframes twinkle-b {
  0%, 100% { opacity: var(--star-low); transform: scale(.72); }
  24% { opacity: var(--star-mid); transform: scale(.88); }
  57% { opacity: var(--star-high); transform: scale(1.28); }
  66% { opacity: var(--star-mid); transform: scale(.98); }
  88% { opacity: var(--star-low); transform: scale(.7); }
}
@keyframes twinkle-c {
  0%, 100% { opacity: var(--star-low); transform: scale(.64); }
  13% { opacity: var(--star-high); transform: scale(1.15); }
  27% { opacity: var(--star-mid); transform: scale(.84); }
  63% { opacity: var(--star-low); transform: scale(.68); }
  78% { opacity: var(--star-high); transform: scale(1.38); }
  91% { opacity: var(--star-mid); transform: scale(.8); }
}
@keyframes rainfall {
  0% { opacity: 0; transform: translate3d(0, -12vh, 0) rotate(10deg); }
  8% { opacity: .38; }
  84% { opacity: .3; }
  100% { opacity: 0; transform: translate3d(-34px, 118vh, 0) rotate(10deg); }
}
@keyframes glass-slide {
  0% { opacity: 0; transform: translate3d(0, -18vh, 0) scaleY(.55); }
  10% { opacity: var(--slide-opacity, .2); }
  38% { transform: translate3d(0, 34vh, 0) scaleY(1); }
  76% { opacity: var(--slide-opacity, .2); transform: translate3d(0, 86vh, 0) scaleY(1.18); }
  100% { opacity: 0; transform: translate3d(var(--slide-drift, 0px), 132vh, 0) scaleY(.8); }
}
@keyframes cloud-drift {
  from { transform: translate3d(-12vw, 0, 0); }
  to { transform: translate3d(calc(100vw + 320px), 0, 0); }
}
@keyframes cloud-breathe {
  0%, 100% { opacity: .72; transform: scale3d(.94, .88, 1) translate3d(0, 2px, 0); }
  48% { opacity: 1; transform: scale3d(1.12, 1.18, 1) translate3d(0, -2px, 0); }
}
@keyframes clear-sky-cloud {
  0%, 20% { opacity: 0; transform: translate3d(-12vw, 0, 0); }
  27% { opacity: .22; }
  62% { opacity: .22; }
  70%, 100% { opacity: 0; transform: translate3d(calc(100vw + 320px), 0, 0); }
}

@media (max-width: 780px) {
  .birth-chart__fields { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .shell { width: min(100% - 30px, 880px); padding-top: 22px; }
  .skyline { grid-template-columns: 1fr auto; gap: 12px 18px; margin-top: 18px; padding: 12px 0; }
  .skyline__day { grid-column: 1 / -1; }
  .skyline__temperature strong { font-size: 21px; }
  .cloud-field::before,
  .cloud-field::after {
    --mobile-cloud: rgba(255, 255, 255, .64);
    position: absolute;
    width: 150px;
    height: 64px;
    border-radius: 999px;
    opacity: 0;
    background:
      radial-gradient(circle at 25% 39%, var(--mobile-cloud) 0 30%, transparent 31%),
      radial-gradient(circle at 53% 23%, var(--mobile-cloud) 0 38%, transparent 39%),
      radial-gradient(circle at 80% 43%, var(--mobile-cloud) 0 28%, transparent 29%),
      linear-gradient(var(--mobile-cloud), var(--mobile-cloud)) bottom / 100% 52% no-repeat;
    filter: blur(.35px);
    content: "";
  }
  .cloud-field::before { top: 16vh; left: 7vw; }
  .cloud-field::after { top: 39vh; right: -24px; width: 124px; height: 55px; transform: scale(.9); }
  body[data-weather="partlyCloudy"] .cloud-field::before,
  body[data-weather="cloudy"] .cloud-field::before,
  body[data-weather="cloudy"] .cloud-field::after,
  body[data-weather="fog"] .cloud-field::before,
  body[data-weather="fog"] .cloud-field::after,
  body[data-weather="rain"] .cloud-field::before,
  body[data-weather="rain"] .cloud-field::after,
  body[data-weather="storm"] .cloud-field::before,
  body[data-weather="storm"] .cloud-field::after { opacity: .46; }
  body[data-period="night"] .cloud-field::before,
  body[data-period="night"] .cloud-field::after { --mobile-cloud: rgba(205, 219, 240, .32); }
  body[data-period="day"][data-weather="rain"] .cloud-field::before,
  body[data-period="day"][data-weather="rain"] .cloud-field::after,
  body[data-period="day"][data-weather="storm"] .cloud-field::before,
  body[data-period="day"][data-weather="storm"] .cloud-field::after { --mobile-cloud: rgba(124, 145, 164, .58); }
  body[data-period] .cloud {
    left: -190px;
    height: calc(var(--cloud-width, 140px) * .34);
    animation-duration: var(--cloud-mobile-speed, 24s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  body[data-period] .cloud > span::before { bottom: 5%; width: 40%; height: 180%; }
  body[data-period] .cloud > span::after { bottom: 5%; width: 32%; height: 150%; }
  body:not([data-period="night"])[data-weather="cloudy"] .cloud:nth-child(-n+6),
  body:not([data-period="night"])[data-weather="fog"] .cloud:nth-child(-n+6),
  body[data-period="night"][data-weather="cloudy"] .cloud:nth-child(-n+6),
  body[data-period="night"][data-weather="fog"] .cloud:nth-child(-n+6) {
    width: var(--cloud-grey-mobile-width, 160px);
    height: calc(var(--cloud-grey-mobile-width, 160px) * .34);
    opacity: .46;
    animation-name: cloud-drift-mobile;
    animation-duration: var(--cloud-mobile-speed, 24s);
  }
  body[data-period="day"][data-weather="partlyCloudy"] .cloud:nth-child(-n+4),
  body[data-period="day"][data-weather="rain"] .cloud:nth-child(-n+5),
  body[data-period="day"][data-weather="storm"] .cloud:nth-child(-n+6),
  body[data-period="night"][data-weather="partlyCloudy"] .cloud:nth-child(-n+4),
  body[data-period="night"][data-weather="rain"] .cloud:nth-child(-n+5),
  body[data-period="night"][data-weather="storm"] .cloud:nth-child(-n+6) {
    animation-name: cloud-drift-mobile;
  }
  body:not([data-period="night"])[data-weather="clear"] .cloud:nth-child(7) { animation-duration: 58s; }
  /* Sur mobile, les grandes masses animées de bureau se déforment dans Safari.
     Deux silhouettes simples restent dans le bulletin météo et ne croisent jamais le titre. */
  .cloud-field { top: 0; bottom: auto; height: 370px; }
  body[data-period] .cloud { display: none !important; }
  .cloud-field::before,
  .cloud-field::after {
    width: 116px;
    height: 43px;
    filter: blur(.2px);
    will-change: transform;
  }
  .cloud-field::before { top: 196px; left: -18px; }
  .cloud-field::after { top: 278px; right: -15px; width: 92px; height: 35px; transform: none; }
  body[data-weather="partlyCloudy"] .cloud-field::before,
  body[data-weather="cloudy"] .cloud-field::before,
  body[data-weather="cloudy"] .cloud-field::after,
  body[data-weather="fog"] .cloud-field::before,
  body[data-weather="fog"] .cloud-field::after,
  body[data-weather="rain"] .cloud-field::before,
  body[data-weather="rain"] .cloud-field::after,
  body[data-weather="storm"] .cloud-field::before,
  body[data-weather="storm"] .cloud-field::after { opacity: .24; }
  body[data-weather="partlyCloudy"] .cloud-field::before,
  body[data-weather="cloudy"] .cloud-field::before,
  body[data-weather="fog"] .cloud-field::before,
  body[data-weather="rain"] .cloud-field::before,
  body[data-weather="storm"] .cloud-field::before { animation: mobile-cloud-breathe-a 9s ease-in-out infinite; }
  body[data-weather="cloudy"] .cloud-field::after,
  body[data-weather="fog"] .cloud-field::after,
  body[data-weather="rain"] .cloud-field::after,
  body[data-weather="storm"] .cloud-field::after { animation: mobile-cloud-breathe-b 11s ease-in-out -4s infinite; }
  .cloud-field::before,
  .cloud-field::after { animation: none !important; }
  .intro { margin-top: 72px; }
  .returning-reader { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .returning-reader > div { align-items: flex-start; flex-direction: column; }
  .returning-reader .primary { width: 100%; }
  h1 { font-size: clamp(36px, 10.4vw, 48px); line-height: 1.1; }
  h1 br { display: none; }
  .lede { font-size: 15px; }
  .sign-grid, .option-grid, .age-grid { grid-template-columns: repeat(3, 1fr); }
  .option-grid label { grid-column: auto; }
  .sign-grid span, .option-grid span { min-height: 74px; }
  .choice-list span { align-items: flex-start; flex-direction: column; gap: 3px; }
  .choice-list small { text-align: left; }
  .quiz__actions .primary { min-width: 150px; }
  .quiz__actions .next-arrow { min-width: 52px; }
  .result { margin-top: 48px; }
  .reading-tools__body { align-items: stretch; flex-direction: column; }
  .tone-picker { width: 100%; }
  .tone-picker button { flex: 1; }
  .favorite-sign { width: 100%; }
  .result-jump-nav { position: sticky; z-index: 20; top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 10px 0 15px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--paper), transparent 7%); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink), transparent 90%); backdrop-filter: blur(12px); }
  .result-jump-nav a, .result-jump-nav button { display: grid; min-height: 38px; padding: 0 5px; place-items: center; color: var(--muted); border: 0; border-radius: 6px; background: transparent; font: 600 8px/1.2 "IBM Plex Mono", monospace; text-align: center; text-decoration: none; }
  .result-jump-nav a:active, .result-jump-nav button:active { color: var(--button-text); background: var(--blue); }
  .result-signs__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .astro-profile { padding: 17px; }
  .astro-profile__facts { grid-template-columns: 1fr 1fr; }
  .astro-profile__facts p:nth-child(n) { grid-column: span 1; }
  .astro-profile__facts p:last-child { grid-column: 1 / -1; }
  .birth-chart__intro, .birth-chart__fields, .birth-chart__result { grid-template-columns: 1fr; }
  .known-ascendant { grid-template-columns: 1fr; }
  .known-ascendant button { width: fit-content; margin-left: auto; }
  .birth-chart__intro { align-items: start; gap: 9px; }
  .birth-chart__result { gap: 10px; }
  .birth-chart__result p { padding: 16px 15px 16px 19px; }
  .birth-chart__result .astral-tip__cue { position: static; margin-top: 4px; }
  .birth-chart__result.is-single { grid-template-columns: 1fr; }
  .astral-theme { padding: 0; }
  .astral-theme__head, .astral-theme__body { grid-template-columns: 1fr; }
  .astral-theme__head, .astral-theme__body, .planet-positions, .astral-synthesis { padding: 16px; }
  .theme-summary-card { grid-template-columns: 1fr 1fr; }
  .planet-positions__head { align-items: start; flex-direction: column; gap: 4px; }
  .planet-positions__grid { grid-template-columns: 1fr; }
  .chart-guide dl { grid-template-columns: 1fr; }
  .astral-theme__head { align-items: start; gap: 8px; }
  .theme-wheel { margin: 0 auto; }
  .ticket__body { padding-top: 22px; }
  .ticket__prediction { font-size: 16px; line-height: 1.7; }
  .daily-rubrics { grid-template-columns: 1fr; }
  .sign-compare__body > div { grid-template-columns: 1fr; align-items: stretch; }
  .sign-compare__body > div > span { display: none; }
  .daily-synthesis { grid-template-columns: 1fr; }
  .daily-note { grid-template-columns: 1fr; gap: 13px; margin-bottom: 34px; }
  .daily-note__date, .daily-note__proverb, .daily-note__joke { grid-column: 1; }
  .weather-verdict { grid-template-columns: 1fr; gap: 6px; margin-bottom: 32px; }
  .weather-verdict small { grid-row: auto; }
  .omens { grid-template-columns: 1fr; }
  .daily-luck__head { align-items: start; flex-direction: column; gap: 8px; }
  .daily-luck__head p { text-align: left; }
  .daily-luck__draw { align-items: flex-start; flex-wrap: wrap; }
  .daily-luck__draw > span { width: 100%; margin-right: 0; }
  .daily-luck__details { grid-template-columns: 1fr 1fr; }
  .astral-barometer__items { grid-template-columns: 1fr; }
  .astral-gauge { border-right: 0; border-bottom: 1px solid var(--line); }
  .astral-gauge:last-child { border-bottom: 0; }
  .astral-gauge strong { min-height: 0; }
  .dispatches { grid-template-columns: 1fr; }
  .dispatch-card { min-height: 0; }
  .dispatch-card strong { margin-top: 18px; }
  .daily-sky .daily-sky__head { align-items: start; flex-direction: column; gap: 6px; }
  .daily-sky .daily-sky__head p { max-width: none; text-align: left; }
  .daily-sky__details > #dailySkyList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-sky article { border-bottom: 1px solid var(--line); }
  .daily-sky article:nth-child(2n) { border-right: 0; }
  .daily-sky article:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .daily-sky__conclusion dl > div { grid-template-columns: 70px minmax(0, 1fr); gap: 9px; }
  .drink-card { min-height: 0; }
  .drink-card { width: 100%; }
  .drink-card h3 { margin-top: 28px; }
  .countertop-more__body { padding: 0 8px 8px; }
  .result__actions { flex-direction: column; align-items: flex-end; gap: 6px; }
}

@keyframes cloud-drift-mobile {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(calc(100vw + 380px), 0, 0); transform: translate3d(calc(100vw + 380px), 0, 0); }
}

@keyframes mobile-cloud-breathe-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.96); }
  50% { transform: translate3d(18px, -2px, 0) scale(1.04); }
}

@keyframes mobile-cloud-breathe-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-14px, 2px, 0) scale(.94); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .rain-drop { display: none; }
  .rain-glass { display: none !important; }
  .cloud { animation: none !important; transform: translateX(46vw); }
  .cloud > span { animation: none !important; }
  body[data-period="night"] .star { animation: none !important; opacity: .42; }
  .shooting-star { display: none !important; }
}

@keyframes shooting-star {
  0%, 68% { opacity: 0; transform: rotate(var(--shooting-angle, -28deg)) translate3d(0, 0, 0); }
  69% { opacity: 0; }
  70% { opacity: 1; }
  74% { opacity: 0; transform: rotate(var(--shooting-angle, -28deg)) translate3d(var(--shooting-distance, 42vw), 0, 0); }
  100% { opacity: 0; transform: rotate(var(--shooting-angle, -28deg)) translate3d(var(--shooting-distance, 42vw), 0, 0); }
}

/* 23/10 — thème astral masqué, roue des signes, rubriques en icônes */
body.astral-off #jumpToAstral,
body.astral-off .daily-sky,
body.astral-off #astroProfile,
body.astral-off #astralThemeTrigger { display: none !important; }
body.astral-off .result-jump-nav { grid-template-columns: repeat(2, 1fr); }

#signGrid { display: none; }
.sign-wheel { position: relative; width: min(84vw, 340px); aspect-ratio: 1; margin: 8px auto 0; }
.sign-wheel__dial { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle, transparent 38%, color-mix(in srgb, var(--white), transparent 25%) 39%); box-shadow: inset 0 0 0 18px color-mix(in srgb, var(--blue), transparent 94%), 0 14px 40px color-mix(in srgb, var(--ink), transparent 90%); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.sign-wheel__dial:active { cursor: grabbing; }
.sign-wheel__dial:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.sign-wheel__pointer { position: absolute; z-index: 2; top: -9px; left: 50%; width: 0; height: 0; border: 9px solid transparent; border-top: 12px solid var(--blue); transform: translateX(-50%); }
.sign-wheel__ring { position: absolute; inset: 0; }
.sign-wheel__mark { position: absolute; display: grid; width: 15%; aspect-ratio: 1; place-items: center; color: var(--muted); font: normal clamp(18px, 5.6vw, 24px)/1 Georgia, "Times New Roman", serif; transform: translate(-50%, -50%) scale(var(--mark-scale, 1)); transition: color .2s; pointer-events: auto; }
.sign-wheel__mark.is-current { color: var(--blue); }
.sign-wheel__pick { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 46%; aspect-ratio: 1; padding: 0; place-content: center; gap: 3px; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; background: var(--white); box-shadow: 0 6px 18px color-mix(in srgb, var(--ink), transparent 88%); transform: translate(-50%, -50%); text-align: center; cursor: pointer; transition: transform .15s; }
.sign-wheel__pick:active { transform: translate(-50%, -50%) scale(.95); }
.sign-wheel__pick i { color: var(--blue); font: normal clamp(34px, 11vw, 46px)/1 Georgia, "Times New Roman", serif; }
.sign-wheel__pick b { font-size: 15px; }
.sign-wheel__pick > span { color: var(--blue); font: 600 9px/1.2 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .05em; }
.sign-wheel__pick.is-bump i { animation: wheel-bump .28s ease-out; }
@keyframes wheel-bump { 40% { transform: scale(1.18); } }
.sign-wheel + .sign-grid__hint { text-align: center; }

.daily-rubrics, .daily-rubrics[class] { display: block; margin: 4px 0 36px; }
.rubric-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.daily-rubrics .rubric-card { display: grid; min-width: 0; min-height: 118px; padding: 0; color: #fff; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rubric-card > span { grid-area: 1 / 1; display: flex; padding: 11px 12px 12px; flex-direction: column; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: #23408f; box-shadow: 0 4px 14px rgba(16, 26, 60, .18); transition: opacity 0s .17s, visibility 0s .17s; }
.rubric-card__back { position: relative; align-items: center; justify-content: center; gap: 6px; background: radial-gradient(circle at 50% 40%, #2f52ad, #1c3478 75%) !important; }
.rubric-card__back::before { content: ""; position: absolute; inset: 6px; border: .5px solid rgba(255, 255, 255, .55); border-radius: 8px; pointer-events: none; }
.rubric-card__back svg { width: 30px; height: 30px; }
.rubric-card__back b { font: 600 9px/1.2 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .12em; text-align: center; }
.rubric-card__back i { font-style: normal; font-size: 8px; opacity: .6; }
.rubric-card__face { gap: 6px; opacity: 0; visibility: hidden; }
.rubric-card[aria-pressed="true"] .rubric-card__back { opacity: 0; visibility: hidden; }
.rubric-card[aria-pressed="true"] .rubric-card__face { opacity: 1; visibility: visible; }
.rubric-card.is-flipping { animation: tarot-flip .36s ease-in-out; }
@keyframes tarot-flip { 50% { transform: perspective(700px) rotateY(90deg) scale(1.03); } }
.rubric-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 12px; }
.rubric-card__title { display: flex; align-items: center; gap: 6px; }
.rubric-card__title svg { flex: none; width: 16px; height: 16px; }
.daily-rubrics .rubric-card__title small { margin: 0 !important; color: rgba(255, 255, 255, .78); }
.rubric-card__text { font-size: 12.5px; line-height: 1.42; }
.rubric-cards__hint { margin: 10px 0 0; color: var(--muted); font: 500 9px/1.4 "IBM Plex Mono", monospace; text-align: center; }
@media (prefers-reduced-motion: reduce) { .rubric-card.is-flipping { animation: none; } }
@media (max-width: 359px) {
  .rubric-cards { gap: 8px; }
  .rubric-card > span { padding: 9px 10px 10px; }
  .rubric-card__text { font-size: 11.5px; }
}

/* Barre de raccourcis retirée, boule de cristal */
.result-jump-nav { display: none !important; }
.crystal-ball { display: grid; margin: 0 0 34px; padding: 22px 18px 20px; justify-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 8px 22px color-mix(in srgb, var(--ink), transparent 92%); text-align: center; }
.crystal-ball h3 { margin: 0; color: var(--ink); font: 600 11px/1.2 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.crystal-ball__orb { position: relative; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95) 0 7%, transparent 22%), radial-gradient(circle at 60% 65%, #b9a6ff 0, #6c7cf0 38%, #2a3a8f 72%, #141d4a 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue), transparent 70%), 0 10px 26px rgba(76, 92, 220, .35), inset 0 -8px 18px rgba(10, 14, 40, .55); }
.crystal-ball__orb::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 62px; height: 16px; border-radius: 6px 6px 10px 10px; background: color-mix(in srgb, var(--ink), transparent 15%); transform: translateX(-50%); z-index: -1; }
.crystal-ball__orb span { position: absolute; inset: 18%; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, .45), transparent 40%, rgba(214, 196, 255, .5), transparent 75%); filter: blur(5px); opacity: .55; animation: crystal-swirl 9s linear infinite; }
.crystal-ball__orb.is-thinking { animation: crystal-glow 1.1s ease-in-out; }
.crystal-ball__orb.is-thinking span { opacity: 1; animation-duration: .9s; }
@keyframes crystal-swirl { to { transform: rotate(1turn); } }
@keyframes crystal-glow { 30%, 70% { box-shadow: 0 0 0 1px rgba(186, 170, 255, .8), 0 0 38px 10px rgba(150, 140, 255, .55), inset 0 -8px 18px rgba(10, 14, 40, .55); transform: scale(1.04); } }
.crystal-ball__form { display: flex; width: 100%; margin-top: 4px; gap: 8px; }
.crystal-ball__form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; background: var(--paper, var(--white)); font: inherit; font-size: 16px; }
.crystal-ball__form button { min-height: 44px; padding: 0 14px; color: var(--button-text, #fff); border: 0; border-radius: 12px; background: var(--blue); font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; }
.crystal-ball__answer { min-height: 1.4em; margin: 2px 0 0; color: var(--ink); font-size: 15px; line-height: 1.45; }
.crystal-ball__answer:not(:empty) { animation: rubric-in .35s ease-out; }
@keyframes rubric-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .crystal-ball__orb span, .crystal-ball__orb.is-thinking, .crystal-ball__answer:not(:empty) { animation: none; }
}

/* Onglets Horoscope / Thème astral */
.result-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 6px 0 18px; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.result-tabs button { min-height: 40px; color: var(--muted); border: 0; border-radius: 9px; background: transparent; font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; }
.result-tabs button[aria-selected="true"] { color: #fff; background: #23408f; }
body.view-astral .ticket-wrap { display: none !important; }
body.view-astral .daily-sky { margin-top: 18px; }

/* Tarot de comptoir */
.tarot { display: none; margin: 0 0 30px; }
body.view-tarot .tarot { display: grid; gap: 16px; }
body.view-tarot .ticket-wrap,
body.view-tarot .result-signs { display: none !important; }
.tarot__head small { color: var(--blue); font: 600 9px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.tarot__head h2 { margin: 6px 0 0; color: var(--ink); font-size: 28px; line-height: 1.05; letter-spacing: -.03em; }
.tarot__spread { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tarot-card { display: grid; aspect-ratio: 7 / 12; padding: 0; color: #fff; border: 0; background: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tarot-card > span { grid-area: 1 / 1; position: relative; display: flex; padding: 12px 6px; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 10px; background: radial-gradient(circle at 50% 38%, #3157b4, #1a2f6d 78%); box-shadow: 0 8px 20px rgba(16, 26, 60, .22); transition: opacity 0s .18s, visibility 0s .18s; }
.tarot-card > span::before { content: ""; position: absolute; inset: 5px; border: .5px solid rgba(255, 255, 255, .55); border-radius: 7px; pointer-events: none; }
.tarot-card__back b { font: 600 9px/1.2 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
.tarot-card__back i { font-style: normal; font-size: 11px; opacity: .7; }
.tarot-card__back::after { content: "✷"; position: absolute; top: 50%; left: 50%; font-size: 34px; opacity: .35; transform: translate(-50%, -50%); }
.tarot-card__face { opacity: 0; visibility: hidden; background: linear-gradient(#f8f3e6, #efe5cc) !important; color: #1a2f6d; }
.tarot-card__face::before { border-color: rgba(26, 47, 109, .45) !important; }
.tarot-card__face small { font: 600 11px/1 Georgia, "Times New Roman", serif; letter-spacing: .08em; }
.tarot-card__face i { font: normal 40px/1 Georgia, "Times New Roman", serif; }
.tarot-card__face b { font: 600 10px/1.2 "IBM Plex Mono", monospace; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.tarot-card[aria-pressed="true"] { cursor: default; }
.tarot-card[aria-pressed="true"] .tarot-card__back { opacity: 0; visibility: hidden; }
.tarot-card[aria-pressed="true"] .tarot-card__face { opacity: 1; visibility: visible; }
.tarot-card.is-flipping { animation: tarot-flip .4s ease-in-out; }
.tarot-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 10px; }
.tarot__readings { display: grid; margin: 0; padding: 0; gap: 8px; list-style: none; }
.tarot__readings:empty::before { content: "Touche une carte pour la retourner."; color: var(--muted); font: 500 9px/1.4 "IBM Plex Mono", monospace; text-align: center; }
.tarot__readings li { display: grid; padding: 11px 12px 12px; gap: 3px; color: #fff; border-radius: 12px; background: #23408f; animation: rubric-in .3s ease-out; }
.tarot__readings small { color: rgba(255, 255, 255, .72); font: 600 9px/1.2 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.tarot__readings strong { font-size: 15px; }
.tarot__readings span { font-size: 13px; line-height: 1.42; }
.tarot__shuffle { justify-self: center; min-height: 42px; padding: 0 18px; color: var(--blue); border: 1px solid var(--blue); border-radius: 12px; background: transparent; font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .tarot-card.is-flipping, .tarot__readings li { animation: none; } }
.tarot-card__back::after { top: 40%; }
.tarot-card__back b { transform: translateY(30px); }
@media (max-width: 359px) { .result-tabs button { font-size: 12px; } .tarot-card__face i { font-size: 32px; } .tarot-card__face b { font-size: 9px; } }
/* Face retournée des cartes du jour : bleu clair */
.rubric-card .rubric-card__face { color: var(--ink); border-color: color-mix(in srgb, var(--blue), transparent 78%); background: color-mix(in srgb, var(--blue), var(--white) 90%); box-shadow: 0 4px 14px color-mix(in srgb, var(--ink), transparent 94%); }
.rubric-card__face .rubric-card__title { color: var(--blue); }
.daily-rubrics .rubric-card__face .rubric-card__title small { color: var(--blue); }

/* Nuages mobiles qui défilent (translation seule : rien qui déforme Safari) */
@media (max-width: 620px) {
  .cloud-field::before, .cloud-field::after { display: none !important; }
  body[data-period] .cloud { display: block !important; top: calc(var(--cloud-top, 18vh) * .62); }
  body[data-period] .cloud > span { filter: none; animation: none !important; will-change: auto; }
  body[data-period] .cloud[style] { animation-duration: calc(var(--cloud-mobile-speed, 24s) * 3 / var(--wind-factor, 1)) !important; }
  body:not([data-period="night"])[data-weather="cloudy"] .cloud:nth-child(-n+6),
  body:not([data-period="night"])[data-weather="fog"] .cloud:nth-child(-n+6) { opacity: .2; width: calc(var(--cloud-grey-mobile-width, 160px) * .8); height: calc(var(--cloud-grey-mobile-width, 160px) * .27); }
}

/* Onglets plus doux */
.result-tabs { padding: 5px; gap: 4px; border-color: color-mix(in srgb, var(--line), transparent 30%); border-radius: 999px; background: color-mix(in srgb, var(--white), transparent 35%); box-shadow: none; }
.result-tabs button { min-height: 38px; border-radius: 999px; font-weight: 500; transition: background .2s, color .2s; }
.result-tabs button[aria-selected="true"] { color: var(--blue); background: color-mix(in srgb, var(--blue), var(--white) 87%); box-shadow: 0 2px 8px color-mix(in srgb, var(--blue), transparent 88%); }

/* Titre d'accueil : première phrase sur une seule ligne */
@media (max-width: 620px) {
  .intro h1 { font-size: 6.25vw; white-space: nowrap; }
  .intro h1 > span { margin-top: 6px; font-size: clamp(34px, 10.4vw, 48px); white-space: normal; }
}
.result-tabs { width: fit-content; max-width: 100%; margin-inline: auto; padding: 3px; grid-template-columns: repeat(3, auto); }
.result-tabs button { min-height: 28px; padding: 0 13px; font-size: 11.5px; }
@media (max-width: 359px) { .result-tabs button { padding: 0 9px; font-size: 11px; } }
.crystal-ball { grid-template-columns: minmax(0, 1fr); }
.crystal-ball__form input { width: 100%; }

/* Le vent pousse les nuages : --wind-factor vient de la météo (0,7 calme → 3,5 tempête) */
@media (min-width: 621px) {
  body[data-period] .cloud[style] { animation-duration: calc(var(--cloud-speed, 46s) / var(--wind-factor, 1)) !important; }
}

/* Accueil : titre en bas de l'écran, scène météo dans le vide au-dessus */
.weather-scene { display: none; }
@media (max-width: 620px) {
  .intro { display: flex; min-height: calc(100svh - var(--intro-top, 290px) - 8px); margin-top: 0; padding-bottom: 22px; flex-direction: column; justify-content: flex-end; }
  .intro[hidden] { display: none; }
  .weather-scene { position: relative; display: block; flex: 1; min-height: 130px; margin: 0 -16px 10px; overflow: hidden; pointer-events: none; }
}
.weather-scene > * { position: absolute; display: none; }
/* soleil */
.ws-sun { top: 14%; right: 14%; width: 74px; height: 74px; }
.ws-sun::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #ffe39a, #f6b94a 70%); box-shadow: 0 0 40px 12px rgba(255, 196, 92, .35); }
.ws-sun span { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(246, 185, 74, .55) 0 4deg, transparent 4deg 30deg); -webkit-mask: radial-gradient(circle, transparent 46%, #000 47%, #000 66%, transparent 67%); mask: radial-gradient(circle, transparent 46%, #000 47%, #000 66%, transparent 67%); animation: ws-spin 40s linear infinite; }
/* lune et étoiles */
.ws-moon { top: 14%; right: 16%; width: 54px; height: 54px; border-radius: 50%; box-shadow: inset -14px 6px 0 0 #e9edf8; filter: drop-shadow(0 0 14px rgba(220, 230, 255, .45)); transform: rotate(-18deg); }
.ws-stars { inset: 0; }
.ws-stars i { position: absolute; left: var(--x); top: var(--y); width: 2.5px; height: 2.5px; border-radius: 50%; background: #fff; animation: ws-twinkle 3.4s ease-in-out var(--d) infinite; }
/* nuages */
.ws-cloud { width: 120px; color: rgba(255, 255, 255, .9); animation: ws-drift 26s ease-in-out infinite alternate; }
.ws-cloud svg { display: block; width: 100%; fill: currentColor; filter: drop-shadow(0 8px 14px rgba(70, 95, 120, .12)); }
.ws-cloud--a { top: 18%; left: 8%; }
.ws-cloud--b { top: 40%; left: 46%; width: 150px; animation-duration: 34s; animation-delay: -9s; }
.ws-cloud--c { top: 8%; left: 58%; width: 96px; animation-duration: 30s; animation-delay: -17s; }
/* pluie, neige, éclair, brouillard */
.ws-rain, .ws-snow, .ws-fog { inset: 0; }
.ws-rain i { position: absolute; top: -20%; left: var(--x); width: 1.5px; height: 18px; border-radius: 2px; background: linear-gradient(transparent, rgba(110, 145, 185, .75)); transform: rotate(12deg); animation: ws-rain 1.1s linear var(--d) infinite; }
.ws-snow i { position: absolute; top: -10%; left: var(--x); width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(150, 175, 200, .6); animation: ws-snow 6s linear calc(var(--d) * -1) infinite; }
.ws-bolt { top: 34%; left: 44%; width: 30px; fill: #ffd25c; filter: drop-shadow(0 0 10px rgba(255, 210, 92, .8)); opacity: 0; animation: ws-flash 5s linear infinite; }
.ws-fog i { position: absolute; left: -20%; width: 140%; height: 16px; border-radius: 99px; background: rgba(255, 255, 255, .55); filter: blur(6px); animation: ws-drift 18s ease-in-out infinite alternate; }
.ws-fog i:nth-child(1) { top: 30%; } .ws-fog i:nth-child(2) { top: 52%; animation-delay: -6s; } .ws-fog i:nth-child(3) { top: 74%; animation-delay: -12s; }
/* quelle scène pour quel temps */
body:not([data-period="night"])[data-weather="clear"] .ws-sun,
body:not([data-period="night"])[data-weather="partlyCloudy"] .ws-sun,
body[data-period="night"][data-weather="clear"] .ws-moon,
body[data-period="night"][data-weather="partlyCloudy"] .ws-moon,
body[data-period="night"][data-weather="clear"] .ws-stars,
body[data-period="night"][data-weather="partlyCloudy"] .ws-stars,
body[data-weather="partlyCloudy"] .ws-cloud--b,
body[data-weather="cloudy"] .ws-cloud,
body[data-weather="fog"] .ws-cloud--a,
body[data-weather="fog"] .ws-fog,
body[data-weather="rain"] .ws-cloud,
body[data-weather="rain"] .ws-rain,
body[data-weather="storm"] .ws-cloud,
body[data-weather="storm"] .ws-rain,
body[data-weather="storm"] .ws-bolt,
body[data-weather="snow"] .ws-cloud--a,
body[data-weather="snow"] .ws-cloud--c,
body[data-weather="snow"] .ws-snow { display: block; }
body[data-weather="cloudy"] .ws-cloud { color: rgba(236, 241, 246, .95); }
body[data-weather="rain"] .ws-cloud, body[data-weather="storm"] .ws-cloud { color: rgba(176, 190, 204, .92); }
body[data-weather="storm"] .ws-cloud { color: rgba(130, 142, 160, .92); }
body[data-period="night"] .ws-cloud { color: rgba(150, 165, 195, .35); }
body[data-period="night"] .ws-rain i { background: linear-gradient(transparent, rgba(190, 210, 240, .6)); }
body[data-period="night"] .ws-fog i { background: rgba(200, 212, 235, .2); }
/* le vent accélère les nuages dessinés */
.ws-cloud { animation-duration: calc(26s / var(--wind-factor, 1)); }
.ws-cloud--b { animation-duration: calc(34s / var(--wind-factor, 1)); }
.ws-cloud--c { animation-duration: calc(30s / var(--wind-factor, 1)); }
@keyframes ws-spin { to { transform: rotate(1turn); } }
@keyframes ws-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes ws-drift { from { transform: translateX(-28px); } to { transform: translateX(28px); } }
@keyframes ws-rain { from { transform: translateY(0) rotate(12deg); } to { transform: translateY(260px) rotate(12deg); } }
@keyframes ws-snow { from { transform: translate(0, 0); } 50% { transform: translate(10px, 120px); } to { transform: translate(-6px, 260px); } }
@keyframes ws-flash { 0%, 88%, 93%, 100% { opacity: 0; } 90%, 95% { opacity: 1; } }
/* « Réduire les animations » : la scène reste visible, immobile */
@media (prefers-reduced-motion: reduce) {
  .weather-scene *, .weather-scene *::before { animation: none !important; }
  .ws-rain i { top: auto; bottom: calc(10% + var(--x) * .6); transform: rotate(12deg); }
  .ws-snow i { top: calc(20% + var(--x) * .5); }
  .ws-stars i { opacity: .8; }
  body[data-weather="storm"] .ws-bolt { opacity: 1; }
}
@media (max-width: 620px) { .intro > .primary, .intro > .returning-reader { align-self: flex-start; } #startButton { margin-left: 0; } }
body:not([data-period="night"]) .ws-snow i { background: #dfe8f3; box-shadow: 0 0 0 1px rgba(120, 150, 185, .35); }

/* Nuit : étoiles qui scintillent et étoiles filantes dans la scène météo */
.ws-stars i { width: var(--s, 2.5px); height: var(--s, 2.5px); box-shadow: 0 0 6px rgba(200, 220, 255, .85); animation: ws-twinkle var(--v, 3.4s) ease-in-out var(--d) infinite; }
@keyframes ws-twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 45% { opacity: 1; transform: scale(1.25); } 55% { opacity: .85; transform: scale(1); } }
.ws-shooting { top: 12%; left: 8%; width: 130px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(220, 232, 255, .95)); filter: drop-shadow(0 0 6px rgba(200, 220, 255, .9)); opacity: 0; transform: rotate(18deg); animation: ws-shoot 9s ease-out 2s infinite; }
.ws-shooting::after { content: ""; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(220, 232, 255, .9); }
.ws-shooting--b { top: 30%; left: 34%; width: 100px; transform: rotate(24deg); animation-duration: 11s; animation-delay: 6.5s; }
@keyframes ws-shoot {
  0%, 82% { opacity: 0; translate: 0 0; }
  84% { opacity: 1; }
  93% { opacity: 1; }
  96%, 100% { opacity: 0; translate: 210px 70px; }
}
body[data-period="night"][data-weather="clear"] .ws-shooting,
body[data-period="night"][data-weather="partlyCloudy"] .ws-shooting { display: block; }
/* Même avec « Réduire les animations » : scintillement et étoiles filantes gardés (demande de Ste, 23/10) */
@media (prefers-reduced-motion: reduce) {
  .weather-scene .ws-stars i { animation: ws-twinkle var(--v, 3.4s) ease-in-out var(--d) infinite !important; }
  .weather-scene .ws-shooting { animation: ws-shoot 9s ease-out 2s infinite !important; }
  .weather-scene .ws-shooting--b { animation: ws-shoot 11s ease-out 6.5s infinite !important; }
  body[data-period="night"] .star-field .star--a { animation: twinkle-a var(--twinkle-speed, 4s) linear var(--twinkle-delay, 0s) infinite !important; }
  body[data-period="night"] .star-field .star--b { animation: twinkle-b var(--twinkle-speed, 4s) linear var(--twinkle-delay, 0s) infinite !important; }
  body[data-period="night"] .star-field .star--c { animation: twinkle-c var(--twinkle-speed, 4s) linear var(--twinkle-delay, 0s) infinite !important; }
}
@media (max-width: 620px) { .intro h1 > span { font-size: 8.4vw; white-space: nowrap; } }
html, body { overflow-x: clip; }

/* Titres plus légers partout (23/10, demande de Ste) */
legend { font-size: clamp(26px, 3.8vw, 36px); }
.ticket h2 { font-size: clamp(27px, 4.6vw, 40px); line-height: 1.12; letter-spacing: -.03em; }
.astro-profile__head h2 { font-size: clamp(24px, 4vw, 34px); }
.tarot__head h2 { font-size: 23px; }
.ticket .drink-card h3, .drink-card h3 { font-size: 20px; }

/* L'éphéméride du jour en première page, sous « Ciel du jour » */
.home-ephemeris { max-width: 720px; margin: 8px auto 56px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.intro[hidden] + .home-ephemeris { display: none; }
.home-ephemeris h2 { margin: 0 0 18px; color: var(--blue); font: 600 10px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.home-ephemeris .daily-note { margin-bottom: 26px; }
.home-ephemeris .weather-verdict { margin: 0; border-bottom: 0; }

/* Pluie sur la vitre de l'écran : impacts qui restent, coulures plus visibles (23/10) */
.rain-bead {
  position: absolute;
  width: var(--bead-size, 8px);
  height: calc(var(--bead-size, 8px) * 1.12);
  border-radius: 48% 48% 52% 52%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .85) 0 12%, rgba(220, 236, 248, .22) 30%, rgba(150, 185, 210, .12) 70%, rgba(255, 255, 255, .35) 100%);
  box-shadow: inset -1px -2px 2px rgba(255, 255, 255, .35), 0 2px 4px rgba(20, 40, 60, .18);
  -webkit-backdrop-filter: blur(1.2px) brightness(1.08);
  backdrop-filter: blur(1.2px) brightness(1.08);
  opacity: 0;
  animation: glass-impact var(--bead-life, 6s) ease-out infinite;
}
@keyframes glass-impact {
  0% { opacity: 0; transform: scale(.2); }
  3% { opacity: .95; transform: scale(1.25, .85); }
  6% { transform: scale(1); }
  70% { opacity: .85; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px) scaleY(1.15); }
}
body[data-period="night"] .rain-bead { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7) 0 12%, rgba(170, 195, 235, .2) 32%, rgba(90, 120, 170, .14) 70%, rgba(220, 230, 255, .3) 100%); }
.rain-slide { width: calc(var(--slide-width, 2px) + 1px); background: linear-gradient(180deg, transparent, rgba(220, 236, 248, .14) 22%, rgba(200, 224, 242, .7)); }
@keyframes glass-slide {
  0% { opacity: 0; transform: translate3d(0, -18vh, 0) scaleY(.55); }
  10% { opacity: calc(var(--slide-opacity, .2) * 2.6); }
  38% { transform: translate3d(0, 34vh, 0) scaleY(1); }
  76% { opacity: calc(var(--slide-opacity, .2) * 2.6); transform: translate3d(0, 86vh, 0) scaleY(1.18); }
  100% { opacity: 0; transform: translate3d(var(--slide-drift, 0px), 132vh, 0) scaleY(.8); }
}
/* Même avec « Réduire les animations », la pluie reste (demande de Ste) */
@media (prefers-reduced-motion: reduce) {
  body[data-weather="rain"] .rain-glass, body[data-weather="storm"] .rain-glass { display: block !important; }
  body[data-weather="rain"] .rain-drop, body[data-weather="storm"] .rain-drop { display: block; animation: rainfall var(--rain-speed, .85s) linear infinite !important; }
  body[data-weather="rain"] .rain-slide { animation: glass-slide var(--slide-speed, 4s) ease-in infinite !important; }
  body[data-weather="storm"] .rain-slide { animation: glass-slide var(--storm-slide-speed, 2.7s) ease-in infinite !important; }
  .rain-glass .rain-bead { animation: glass-impact var(--bead-life, 6s) ease-out infinite !important; }
  .weather-scene .ws-rain i { top: -20%; bottom: auto; animation: ws-rain 1.1s linear var(--d) infinite !important; }
}
/* 23/10 20 h 30 : plus de grosses gouttes rondes (bulles) ; têtes de coulures fines */
.rain-bead { display: none !important; }
.rain-slide::after { width: calc(var(--bead-width, 6px) * .55); height: calc(var(--bead-height, 9px) * .55); right: 50%; transform: translateX(50%); border: 0; background: rgba(210, 230, 245, .35); box-shadow: none; }
/* Gouttes plus courtes (23/10 20 h 30) */
.rain-slide { height: calc(var(--slide-length, 70px) * .42); }
.rain-drop { height: calc(var(--drop-length, 22px) * .6); }
.ws-rain i { height: 11px; }

/* Pluie simplifiée (23/10 20 h 40) : une seule goutte, courte et ovale, tailles variées, sur tout l'écran */
.rain-drop, .weather-scene .ws-rain { display: none !important; }
.rain-glass .rain-slide {
  top: -4vh;
  width: var(--drop-size, 2px);
  height: calc(var(--drop-size, 2px) * 2.6);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, rgba(225, 238, 250, .25), rgba(205, 226, 245, .8));
  box-shadow: none;
  opacity: 0;
  transform: rotate(8deg);
  animation: drop-fall var(--fall-speed, 1.2s) linear infinite !important;
}
.rain-glass .rain-slide::after { display: none; }
body:not([data-period="night"]) .rain-glass .rain-slide { background: linear-gradient(180deg, rgba(120, 150, 180, .2), rgba(100, 135, 170, .65)); }
body[data-weather="storm"] .rain-glass .rain-slide { animation-duration: calc(var(--fall-speed, 1.2s) * .7) !important; }
@keyframes drop-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(8deg); }
  8% { opacity: 1; }
  90% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(-16px, 108vh, 0) rotate(8deg); }
}

/* Pluie dessinée (canvas) : remplace toutes les anciennes gouttes en CSS (23/10 20 h 50) */
.rain-glass, .rain-drop, .weather-scene .ws-rain { display: none !important; }
.rain-canvas { position: fixed; z-index: 5; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rain-flash { position: fixed; z-index: 4; inset: 0; pointer-events: none; background: rgba(225, 232, 255, .55); opacity: 0; }
.rain-flash.is-on { animation: storm-flash 1.1s ease-out; }
@keyframes storm-flash { 0% { opacity: 0; } 6% { opacity: .9; } 14% { opacity: .1; } 22% { opacity: .6; } 100% { opacity: 0; } }

/* Nuages qui dérivent chacun à sa vitesse (23/10 21 h), même avec « Réduire les animations » */
@keyframes ws-drift-a { from { transform: translateX(-46px); } to { transform: translateX(46px); } }
@keyframes ws-drift-b { from { transform: translateX(64px); } to { transform: translateX(-64px); } }
@keyframes ws-drift-c { from { transform: translateX(-30px); } to { transform: translateX(34px); } }
.weather-scene .ws-cloud--a { animation: ws-drift-a calc(19s / var(--wind-factor, 1)) ease-in-out infinite alternate !important; }
.weather-scene .ws-cloud--b { animation: ws-drift-b calc(31s / var(--wind-factor, 1)) ease-in-out -8s infinite alternate !important; }
.weather-scene .ws-cloud--c { animation: ws-drift-c calc(13s / var(--wind-factor, 1)) ease-in-out -4s infinite alternate !important; }
@media (prefers-reduced-motion: reduce) {
  html body[data-period] .cloud-field .cloud[style] { transform: none; animation: cloud-drift-mobile calc(var(--cloud-mobile-speed, 24s) * 3 / var(--wind-factor, 1)) linear infinite !important; }
}

/* Humeur du ciel en haut, haïku dans l'éphéméride (23/10 21 h 15) */
.skyline__mood { white-space: normal; }
.skyline__mood b { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; }
.weather-verdict--haiku .sky-haiku { margin: 0; color: var(--ink); white-space: pre-line; font-size: 15px; font-style: italic; line-height: 1.6; }
/* Température sous la ligne lever / coucher (23/10 21 h 20) */
.skyline__temperature { margin-top: 10px; }
@media (min-width: 621px) { .skyline { grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.1fr); } }
/* Nuit pluvieuse ou couverte : quelques étoiles discrètes entre les nuages (23/10 21 h 25) */
body[data-period="night"][data-weather="rain"] .ws-stars,
body[data-period="night"][data-weather="storm"] .ws-stars,
body[data-period="night"][data-weather="cloudy"] .ws-stars,
body[data-period="night"][data-weather="fog"] .ws-stars { display: block; opacity: .45; }
body[data-period="night"][data-weather="rain"] .ws-stars i:nth-child(3n),
body[data-period="night"][data-weather="storm"] .ws-stars i:nth-child(3n),
body[data-period="night"][data-weather="cloudy"] .ws-stars i:nth-child(3n),
body[data-period="night"][data-weather="fog"] .ws-stars i:nth-child(3n) { display: none; }
body[data-period="night"][data-weather="rain"] .star,
body[data-period="night"][data-weather="storm"] .star { --star-low: .06; --star-mid: .16; --star-high: .34; }

/* Lune et planètes replié par défaut (23/10 21 h 30) */
.daily-sky__fold > summary { display: block; cursor: pointer; list-style: none; }
.daily-sky__fold > summary::-webkit-details-marker { display: none; }
.daily-sky__fold:not([open]) .daily-sky__head { border-bottom: 0; }
.daily-sky__head i { color: var(--blue); font-style: normal; font-size: 22px; line-height: 1; transition: transform .2s; }
.daily-sky__fold[open] .daily-sky__head i { transform: rotate(45deg); }
.daily-sky__fold .daily-sky__head { flex-direction: row !important; align-items: center !important; justify-content: space-between; }

/* Boule de cristal : reflets qui bougent (23/10 22 h 25), même avec « Réduire les animations » */
.crystal-ball__orb { background: radial-gradient(circle at 60% 65%, #b9a6ff 0, #6c7cf0 38%, #2a3a8f 72%, #141d4a 100%); overflow: visible; }
.crystal-ball__orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, .25) 14%, transparent 24%), radial-gradient(circle at 70% 76%, rgba(255, 255, 255, .22) 0 4%, transparent 11%); animation: crystal-glint 9s ease-in-out infinite alternate !important; }
@keyframes crystal-glint {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  35% { transform: translate(6px, 3px) rotate(8deg); opacity: .85; }
  70% { transform: translate(2px, 8px) rotate(-6deg); opacity: 1; }
  100% { transform: translate(-5px, 4px) rotate(4deg); opacity: .9; }
}
.crystal-ball .crystal-ball__orb span { opacity: .8; animation: crystal-swirl 7s linear infinite !important; }
.crystal-ball .crystal-ball__orb.is-thinking span { animation-duration: .9s !important; }

/* Dos des cartes : bleu nuit profond légèrement violet, cadre crème (comme l'icône) — 23/10 22 h 30 */
.rubric-card .rubric-card__back,
.tarot-card .tarot-card__back { background: radial-gradient(circle at 50% 38%, #3a4486, #1d2456 72%, #161b44) !important; border-color: rgba(244, 234, 210, .18); }
.rubric-card__back::before,
.tarot-card__back::before { border-color: rgba(244, 234, 210, .5) !important; }
.rubric-card__back i, .tarot-card__back i { color: #f1dfae; opacity: .85; }

/* « Pourquoi ce ciel ? » : fond plein pour lire par-dessus étoiles et pluie */
.why-sky { background: color-mix(in srgb, var(--white) 92%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body[data-period="night"] .why-sky { background: rgba(14, 21, 45, 0.9); }
body[data-period="night"] .why-sky li { color: var(--ink); background: rgba(255, 255, 255, 0.05); }

/* Boule de cristal (hors du ticket) : seulement dans l'onglet Horoscope */
body.view-astral .crystal-ball, body.view-tarot .crystal-ball { display: none !important; }

/* Bandeau météo du haut (« Ici maintenant ») : seulement sur l'accueil, caché dès qu'un horoscope est ouvert */
body:has(#result:not([hidden])) .skyline { display: none !important; }

/* Dos des cartes (rubriques et tarot) très foncés, comme « Pourquoi ce ciel ? » ; cadre et étoiles crème gardés */
.rubric-card .rubric-card__back,
.tarot-card .tarot-card__back { background: rgba(14, 21, 45, 0.92) !important; border-color: rgba(244, 234, 210, .2); }

/* « Pourquoi ce ciel ? » retiré à la demande de Ste (25/10) ; gardé caché dans la page car le code le remplit */
.why-sky { display: none !important; }

/* Notification du matin (Android, ordinateur) */
.morning-call { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 26px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.morning-call[hidden] { display: none; }
.morning-call p { margin: 0; font-size: 12px; line-height: 1.45; }
.morning-call b { display: block; color: var(--ink); font-size: 13px; }
.morning-call span { color: var(--muted); }
.morning-call button { flex: none; min-height: 38px; padding: 8px 14px; color: var(--white); border: 0; border-radius: 8px; background: var(--ink); cursor: pointer; font: 600 11px/1.2 "IBM Plex Mono", monospace; }
.morning-call button[aria-pressed="true"] { color: var(--muted); border: 1px solid var(--line); background: transparent; }