:root {
  --art-paper: #f5f3ff;
  --art-line: #6d28d9;
  --art-gold: #d97706;
  --art-sage: #8b5cf6;
  --art-mist: #ede9fe;
  --art-clay: #db2777;
  --art-skin: #fde68a;
  --art-blue: #0284c7;
}
.telegram-dark,
body[data-theme="dark"] {
  --art-paper: #151128;
  --art-line: #e2b853;
  --art-gold: #f59e0b;
  --art-sage: #a855f7;
  --art-mist: #261e47;
  --art-clay: #ec4899;
  --art-skin: #fef08a;
  --art-blue: #38bdf8;
}
.tarot-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 180 / 280;
  overflow: visible;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}
.lunar-symbol-art {
  display: block;
  width: 74px;
  height: 74px;
  flex: none;
  overflow: visible;
  filter: drop-shadow(0 8px 18px rgba(56, 189, 248, 0.2));
}
.art-line {
  fill: none;
  stroke: var(--art-line);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.solar-illustration {
  position: absolute;
  right: 24px;
  top: 62px;
  width: 128px;
  opacity: 0.92;
  pointer-events: none;
}
.solar-card:has(.solar-illustration) .solar-footer {
  padding-right: 150px;
}
.tarot-feature-art {
  width: 156px;
  flex: 0 0 156px;
}
.tarot-feature > div:last-child {
  min-width: 0;
}
.period-art {
  width: 49px;
  flex: 0 0 49px;
  margin: 1px 12px 8px 0;
  float: left;
}
.day-period:after {
  content: "";
  display: table;
  clear: both;
}
.lunar-period-symbol {
  width: 53px;
  float: left;
  margin: 1px 12px 7px 0;
}
.lunar-period-symbol .lunar-symbol-art {
  width: 53px;
  height: 53px;
}
.lunar-symbol-feature {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 0 0 17px;
}
.lunar-symbol-feature > div {
  min-width: 0;
}
.lunar-symbol-feature h3 {
  margin: 0;
}
.segment > .lunar-symbol-art {
  margin: 15px 0;
}
.motion-art .art-glow {
  animation: illustration-glow 6s ease-in-out infinite;
  animation-play-state: paused;
}
.motion-art .art-flow {
  animation: illustration-water 7s ease-in-out infinite;
  animation-play-state: paused;
}
.motion-art .art-wings {
  transform-origin: 45px 45px;
  animation: illustration-wings 8s ease-in-out infinite;
  animation-play-state: paused;
}
.motion-art .art-lunar-wheel {
  transform-origin: 45px 45px;
  animation: illustration-wheel 70s linear infinite;
  animation-play-state: paused;
}
.motion-art.is-visible :is(.art-glow, .art-flow, .art-wings, .art-lunar-wheel) {
  animation-play-state: running;
}
.icons-paused .motion-art * {
  animation-play-state: paused !important;
}
@keyframes illustration-glow {
  0%, 100% { opacity: 0.68; }
  50% { opacity: 1; }
}
@keyframes illustration-water {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(1.5px); }
}
@keyframes illustration-wings {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.96); }
}
@keyframes illustration-wheel {
  to { transform: rotate(360deg); }
}
@media (max-width: 1199px) {
  .solar-illustration { width: 108px; right: 18px; top: 70px; opacity: 0.78; }
  .solar-card:has(.solar-illustration) .solar-footer { padding-right: 120px; }
}
@media (max-width: 980px) {
  .solar-illustration { width: 88px; right: 14px; top: 82px; opacity: 0.45; }
  .solar-card:has(.solar-illustration) .solar-footer { padding-right: 0; }
}
@media (max-width: 760px) {
  .tarot-feature-art { width: 132px; flex-basis: 132px; }
}
@media (max-width: 520px) {
  .solar-illustration { width: 96px; right: 14px; top: 58px; opacity: 0.35; }
  .tarot-feature { display: block; }
  .tarot-feature-art { width: 135px; margin: 0 auto 22px; }
  .period-art { width: 44px; margin-right: 11px; }
  .lunar-symbol-feature { gap: 13px; }
  .lunar-symbol-feature .lunar-symbol-art { width: 62px; height: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-art :is(.art-glow, .art-flow, .art-wings, .art-lunar-wheel) { animation: none !important; }
}
@media print {
  .motion-art * { animation: none !important; }
  .solar-illustration { display: none; }
  .tarot-feature-art { width: 110px; flex-basis: 110px; }
}