* { box-sizing: border-box; }
:root { color-scheme: dark; background: #2b203b; color: #fff8ec; font-family: Georgia, "Times New Roman", serif; }
body { margin: 0; min-height: 100svh; background: radial-gradient(ellipse at 50% 10%, #463255 0, #2b203b 65%); }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23f8e9cf'%3E%3Cpath d='M40 8 44 35 70 40 44 45 40 72 36 45 10 40 36 35Z'/%3E%3Cpath d='M174 132 177 148 194 151 177 154 174 172 171 154 154 151 171 148Z'/%3E%3Ccircle cx='132' cy='58' r='2'/%3E%3Ccircle cx='67' cy='196' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); }
.reading { position: relative; width: min(100%, 1280px); margin: 0 auto; padding: clamp(30px, 5vw, 70px) 24px 40px; text-align: center; }
h1 { max-width: 880px; margin: 0 auto clamp(28px, 4vw, 52px); font-size: clamp(27px, 3.3vw, 45px); line-height: 1.2; font-weight: 500; text-wrap: balance; }
.cards { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: clamp(8px, 1.1vw, 16px); width: 100%; perspective: 1400px; }
.card { display: block; min-width: 0; width: 100%; aspect-ratio: .58; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .18s ease; }
.card:not(:disabled):hover { transform: translateY(-7px); }
.card:focus-visible { outline: 3px solid #ffe19a; outline-offset: 5px; }
.card:disabled { cursor: default; }
.card-inner { position: relative; display: block; width: 100%; height: 100%; border-radius: inherit; transform-style: preserve-3d; transition: transform .45s ease; box-shadow: 0 9px 24px #08031070; }
.card.revealed .card-inner { transform: rotateY(180deg); }
.card-face { display: block; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-back { background: #6f4726; }
.card-back img { object-fit: fill; }
.card-front { transform: rotateY(180deg); background: #ece0c5; }
.card-face img { display: block; width: 100%; height: 100%; object-fit: contain; }
.result { max-width: 720px; margin: 32px auto 0; }
.result[hidden] { display: none; }
.result p { margin: 0 0 20px; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.4; text-wrap: balance; }
.result strong { font-weight: 700; }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 15px 32px; border-radius: 8px; background: #efd295; color: #271b34; text-decoration: none; font: 700 18px/1.3 Georgia, serif; box-shadow: 0 5px 18px #08031045; }
.cta:hover { background: #ffe4ac; }
.cta:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.vsl-page { display: grid; place-items: start center; padding: 30px 16px; }
.player { position: relative; width: min(100%, 1000px); }
vturb-smartplayer { display: block; width: 100%; }
@media (max-width: 700px) {
  .reading { max-width: 470px; padding: 28px 24px 36px; }
  h1 { font-size: 28px; margin-bottom: 24px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 17px; }
  .card { aspect-ratio: .62; }
  .result { margin-top: 25px; }
  .result p { font-size: 21px; }
  .cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; scroll-behavior: auto !important; } }