/* Each ability has a dedicated path and its own visual result. */
.back-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 49px;
  padding: 14px 30px;
  border: 0;
  border-bottom: 1px solid #bf8caf24;
  background: #180f2166;
  color: #dab3cc;
  text-align: left;
  font-size: 11px;
  transition: background .2s, color .2s;
}
.back-link:hover { color: #ffe0ed; background: #55314944; }
.experience-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 17px; margin-top: 21px; }
.experience-meta span { color: #c7a4bd; font-size: 10px; line-height: 1.6; }
.experience-meta span:first-child { color: #d8b499; }
.experience-body { max-width: 950px; margin: auto; }
.stepper { list-style: none; padding: 0; gap: 9px; }
.step-chip { padding: 7px 13px 7px 7px; gap: 8px; font-size: 11px; }
.step-chip > span { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #99738e47; border-radius: 50%; color: #c1a6b9; font-size: 10px; }
.step-chip.current { border-color: #e9afcd8c; background: #79406341; color: #ffe2ef; }
.step-chip.current > span { color: #442038; background: #f0b8d1; border-color: #f0b8d1; }
.step-chip.complete { color: #dfba9d; background: #4c344631; }
.step-chip.complete > span { color: #e8bd98; border-color: #d7ab845c; }
.wizard-form > h2 { font-size: 31px; margin: 4px 0 27px; }
.wizard-form > h2:focus { outline: none; }
.wizard-fields { display: block; }
.wizard-fields > .field:last-child { margin-bottom: 0; }
.wizard-fields .field { display: block; margin: 0 0 22px; }
.field > span:first-child { display: block; margin-bottom: 2px; color: #f0d1e3; font-size: 13px; }
.field > span > small { margin-left: 6px; color: #b595ac; font-size: 10px; font-weight: 400; }
.required-star { color: #eeb3ce; font-size: 13px; font-weight: 400; }
.field input, .field select, .field textarea { margin-top: 8px; }
.field textarea { min-height: 122px; }
.field textarea[rows='6'] { min-height: 220px; }
.field-hint { display: block; margin: 8px 0 0; font-size: 11px; line-height: 1.7; color: #b99bb0; }
.wizard-fields > .field-hint { padding: 5px 0 3px; }
.option-field { margin: 0 0 25px; }
.option-field legend { font-size: 13px; color: #edcee0; padding: 0; margin-bottom: 14px; }
.option-field .option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.option-grid:has(> .option-tile:nth-child(3)):not(:has(> .option-tile:nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-field .option-tile { position: relative; flex-direction: row; align-items: flex-start; cursor: pointer; padding: 18px; min-height: 87px; }
.option-tile > input { appearance: none; width: 17px; height: 17px; min-width: 17px; margin: 3px 0 0; padding: 0; border: 1px solid #b381a360; border-radius: 50%; background: #271b32; box-shadow: none; }
.option-tile > input:checked { background: #eeb4d0; border: 4px solid #60384f; box-shadow: 0 0 0 1px #eab2d0; }
.option-tile > input:focus-visible { outline: none; }
.option-tile:has(input:focus-visible) { outline: 2px solid #ffe4f0; outline-offset: 3px; }
.option-tile > span { min-width: 0; display: block; padding-left: 3px; }
.option-tile strong { display: block; color: #f8d8e9; font-size: 13px; font-weight: 500; line-height: 1.5; }
.option-tile small { display: block; margin-top: 5px; font-size: 11px; color: #c3a2ba; line-height: 1.7; }
.option-tile:has(input:checked) small { color: #e5bdd3; }
.day-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 0 0 27px; }
.day-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; min-height: 101px; padding: 19px 23px; border: 1px solid #b887a463; border-radius: 14px; background: radial-gradient(ellipse at top right, #985c8233, transparent 70%), #302039; text-align: left; transition: border-color .25s, box-shadow .25s, background .25s; }
.day-choice > span { color: #cba5c0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.day-choice > strong { color: #f8d6e5; font: 26px/1.2 var(--serif); }
.day-choice::after { content: '☾'; position: absolute; right: 22px; top: 21px; color: #dfaecc50; font: 39px/1 var(--serif); }
.day-choice.selected { border-color: #efbcd5cf; background: radial-gradient(ellipse at top right, #ba78934a, transparent 75%), #4b2b47; box-shadow: inset 0 1px 0 #ffdaeb1f, 0 5px 25px #a4609c15; }
.day-choice.selected::after { color: #edc495; text-shadow: 0 0 20px #dfa7c435; }
.day-choice:hover { border-color: #edb6d3a1; }
.birth-form { min-width: 0; }
.birth-form > h3 { font-size: 25px; margin: 2px 0 21px; color: #edc9df; }
.birth-form .form-columns { gap: 20px 18px; margin-bottom: 0; }
.birth-form .field { margin: 0; }
.two-person-form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.two-person-form .birth-form { padding: 22px; border: 1px solid #b682a045; border-radius: 15px; background: linear-gradient(130deg, #65405929, #21182866); }
.two-person-form .form-columns { grid-template-columns: 1fr; gap: 19px; }
.two-person-form + .field-hint { margin-top: 19px; }
.choice-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.choice-pair .field { background: #49304629; border: 1px solid #b885a33d; padding: 21px; border-radius: 14px; }
.choice-pair .field > span { font-family: var(--serif); font-size: 24px; }
.choice-pair textarea { min-height: 155px; }
.review-note { display: flex; align-items: center; gap: 17px; margin: 25px 0 18px; padding: 20px 23px; border: 1px solid #c194743d; border-radius: 14px; background: radial-gradient(ellipse at right, #9d745c19, transparent 70%), #35222f; }
.review-note > span { color: #dfbb8d; font-size: 32px; line-height: 1; }
.review-note strong { color: #e8c9ad; font-size: 12px; font-weight: 500; }
.review-note p { color: #c7a6bd; font-size: 11px; line-height: 1.8; margin: 7px 0 0; }
.answer-review, .method-notes { border: 1px solid #b884a245; border-radius: 13px; padding: 17px 21px; background: #1b142332; color: #c4a6ba; }
.answer-review summary, .method-notes summary { cursor: pointer; color: #dfbbd2; font-size: 12px; padding: 2px 0; }
.answer-review p, .method-notes p { color: #bea0b5; font-size: 12px; line-height: 1.8; margin: 16px 0 0; white-space: pre-wrap; }
.answer-review p b { color: #e1bed3; font-weight: 500; }
.answer-review summary:focus-visible, .method-notes summary:focus-visible { outline: 2px solid var(--rose-light); outline-offset: 5px; }
.form-error { padding: 15px 18px; margin: 22px 0 0; border: 1px solid #e49ab27a; border-radius: 12px; background: #8c354d29; color: #ffd4df; font-size: 12px; line-height: 1.75; }
.form-error .button { display: flex; margin: 14px auto 0; width: max-content; }
.form-cost { font-size: 10px; color: #b998b0; line-height: 1.75; text-align: right; margin: 14px 0 0; }
.saved-daily-note { display: flex; align-items: center; gap: 17px; margin-top: 22px; padding: 19px 22px; border: 1px solid #d6ad754a; border-radius: 14px; background: #79544424; }
.saved-daily-note > span { color: #e6c58e; font-size: 25px; }
.saved-daily-note p { color: #d4b5c8; font-size: 11px; line-height: 1.8; margin: 0; }
.saved-daily-note .button { margin-left: auto; font-size: 10px; white-space: nowrap; min-height: 38px; }
.experience-loading { text-align: center; min-height: 330px; padding: 30px 24px 38px; background: radial-gradient(ellipse at center, #96528218, transparent 70%); }
.experience-loading > .loading-orbit { display: block; }
.experience-loading h2 { font-size: 30px; margin: 14px 0; }
.experience-loading p { font-size: 13px; line-height: 1.8; color: #cdb0c5; }
.experience-loading .small-copy { font-size: 10px; margin-top: 21px; }
.loading-stars { display: block; font: 26px/1.2 var(--serif); letter-spacing: .3em; color: #d6ac92; margin-top: 22px; animation: star-breathe 3s ease-in-out infinite; }

/* The finished reading is a document with a beautiful, reusable visual cover. */
.result-banner { position: relative; isolation: isolate; overflow: hidden; min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 28px; background: #271b31; }
.result-banner::before { content: ''; position: absolute; z-index: -2; inset: 0; background: var(--result-art) center 42% / cover no-repeat; opacity: .42; transform: scale(1.02); }
.result-banner::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #271b31ed, #271b3182 50%, #271b31ed), linear-gradient(0deg, #271b31, transparent 85%); }
.result-banner h1 { font-size: 44px; max-width: 780px; margin: 17px 0 11px; text-shadow: 0 3px 20px #0b051c77; }
.result-banner > p { font-size: 13px; color: #e1bfd1; margin: 0 0 15px; }
.result-saved { display: inline-flex; align-items: center; font-size: 9px; line-height: 1.5; color: #dcc59f; border: 1px solid #dfbf8745; border-radius: 100px; padding: 6px 12px; background: #4f384526; }
.period-ribbon { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 20px; padding: 17px 25px; background: linear-gradient(90deg, #6749580f, #84667a22, #6749580f); border-bottom: 1px solid #b991ab22; color: #e6c19b; font-size: 12px; }
.period-ribbon > span { color: #bda2b5; font-size: 10px; }
.reading-content { padding: 4px 32px 32px; }
.result-summary { max-width: 800px; margin: 13px auto 27px; padding: 24px 27px; border-left: 2px solid #e0b98b; border-radius: 0 13px 13px 0; background: linear-gradient(90deg, #8d5b6e26, #3a233420); }
.result-summary p { color: #efd1df; font: 20px/1.75 var(--serif); margin: 0 0 10px; }
.result-summary p:last-child { margin-bottom: 0; }
.result-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.result-sections > .result-section { position: relative; padding: 26px; }
.result-sections > .result-section:only-child, .result-sections > .result-section:last-child:nth-child(odd) { grid-column: 1 / -1; }
.section-number { display: block; color: #bc9676; font-size: 9px; letter-spacing: .15em; margin-bottom: 13px; }
.result-sections h2 { font-size: 25px; line-height: 1.35; margin: 0 0 16px; }
.result-section strong { color: #f5dbe9; font-weight: 600; }
.result-section, .result-summary, .answer-review { overflow-wrap: anywhere; }
.result-section p:first-of-type { margin-top: 0; }
.result-section p:last-child { margin-bottom: 0; }
.full-reading { max-width: 830px; margin: 20px auto 0; padding: 30px; }
.method-notes { margin-top: 24px; }
.method-notes p { font-size: 11px; }
.result-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border); }
.result-actions .button { min-height: 42px; font-size: 11px; padding: 11px 20px; }
.result-actions .text-button { margin-left: auto; }
.result-return-note { text-align: center; font-size: 10px; margin: 16px 0 0; color: #b291aa; }

/* Reveal: consistent geometry for one card and large spreads, without 3D overflow. */
.tarot-spread { gap: 25px 18px; padding: 35px 30px 27px; align-items: flex-start; background: radial-gradient(ellipse at center, #a4678230, transparent 65%); }
.tarot-position { display: flex; flex-direction: column; align-items: center; width: 150px; min-width: 0; text-align: center; }
.card-position { min-height: 30px; color: #d4aec5; font-size: 10px; line-height: 1.5; max-width: 145px; padding: 0 3px 10px; }
.tarot-card { display: block; width: 150px; min-height: 235px; height: 235px; transition: transform .4s var(--ease); }
.tarot-card:hover:not(.is-revealed) { transform: translateY(-5px) rotate(-1deg); }
.card-inner { display: block; min-height: 235px; height: 235px; transition: transform .95s var(--ease); transition-delay: calc(var(--card-index, 0) * 35ms); }
.card-back { display: flex; flex-direction: column; align-items: center; justify-content: center; font: 10px/1.4 var(--sans); background: radial-gradient(ellipse at 50% 45%, #81456580, transparent 60%), #21172e; box-shadow: inset 0 0 0 5px #1a1226, inset 0 0 0 6px #d3aa8173, 0 10px 35px #9952862e; }
.card-back::before { inset: 23px 20px 29px; border-color: #cda27555; }
.card-back-rim { position: absolute; inset: 10px; border: 1px solid #b9897057; border-radius: 7px; pointer-events: none; }
.card-back-stars { color: #d8b68e; font-size: 10px; letter-spacing: .18em; }
.card-back b { display: block; color: #efcea1; font: 66px/1.2 var(--serif); margin: 10px 0 7px; text-shadow: 0 0 28px #f0c1994a; }
.card-back > span:nth-last-child(2) { color: #d7b596; font-size: 9px; letter-spacing: .1em; }
.card-back small { color: #c8a3bb; font: 8px/1.5 var(--sans); margin-top: 15px; }
.card-front { display: flex; justify-content: flex-start; padding: 9px 9px 12px; background: linear-gradient(150deg, #704652, #392b45); border-color: #f0c597a6; box-shadow: inset 0 0 0 4px #25162e, 0 8px 35px #bd7b801c; }
.card-front > img { width: 100%; height: 129px; object-fit: cover; border-radius: 5px 5px 2px 2px; border: 1px solid #c99a7766; }
.card-number { display: block; font-size: 8px; letter-spacing: .13em; color: #e4bd92; margin-top: 9px; }
.card-front-title { display: block; padding: 0 4px; color: #ffeddd; font: 18px/1.2 var(--serif); margin: 6px 0 5px; }
.card-front > small { margin-top: auto; font-size: 8px; color: #d7b6c9; }
.card-caption { display: block; color: #cdb0c3; font-size: 10px; line-height: 1.5; max-width: 145px; margin-top: 13px; }
.single-card .tarot-position { width: 215px; }
.single-card .tarot-card, .single-card .card-inner { width: 205px; height: 312px; min-height: 312px; }
.single-card .card-back b { font-size: 88px; margin: 17px 0 10px; }
.single-card .card-back small { font-size: 10px; margin-top: 21px; }
.single-card .card-back-stars { font-size: 13px; }
.single-card .card-front > img { height: 187px; }
.single-card .card-front-title { font-size: 25px; margin-top: 9px; }
.single-card .card-front > small { font-size: 10px; }
.single-card .card-caption { font-size: 12px; max-width: 215px; }
.single-card .card-position { max-width: 215px; font-size: 11px; }
.reveal-invitation { max-width: 660px; margin: 0 auto; padding: 0 25px 35px; text-align: center; }
.reveal-invitation p { color: #d7b7cb; font: italic 20px/1.7 var(--serif); margin: 4px 0 21px; }
.reveal-invitation .button { min-height: 44px; font-size: 12px; }

/* Astrology: a real plotted wheel next to explicit planet positions. */
.natal-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 35px 42px; background: radial-gradient(ellipse at 20% 50%, #79527629, transparent 60%); }
.natal-panel .zodiac-wheel { width: 100%; max-width: 365px; margin: 0 auto; border: 0; border-radius: 50%; box-shadow: 0 0 65px #b16c951e; background: none; }
.zodiac-wheel svg { display: block; width: 100%; height: auto; overflow: visible; }
.planet-list { min-width: 0; }
.planet-list > .eyebrow { display: block; margin-bottom: 15px; font-size: 9px; color: #d8ad97; }
.planet-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 36px; border-bottom: 1px solid #a87a9426; font-size: 12px; }
.planet-row > span { color: #d9b6cf; white-space: nowrap; }
.planet-row strong { color: #f3d7e6; font-size: 11px; font-weight: 500; text-align: right; max-width: 62%; line-height: 1.7; }
.planet-row small { color: #b393ad; font-size: 9px; margin-left: 5px; white-space: nowrap; }
.planet-list > p { font-size: 10px; line-height: 1.8; margin: 18px 0 0; }
.solar-result { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 30px 35px; background: radial-gradient(ellipse at 40% 50%, #a96b5e24, transparent 68%); }
.solar-result > img { width: 150px; height: 150px; object-fit: cover; border: 1px solid #cea2806b; border-radius: 50%; box-shadow: 0 0 40px #b28a9a27; }
.solar-result h2 { font-size: 40px; margin: 14px 0 0; }
.solar-result .eyebrow { font-size: 8px; }
.number-result { display: flex; justify-content: center; align-items: center; gap: 55px; padding: 37px 30px; text-align: center; background: radial-gradient(ellipse at center, #87517926, transparent 68%); }
.number-result > div { min-width: 0; max-width: 320px; }
.number-orb { display: grid; place-items: center; width: 104px; height: 104px; margin: 0 auto 16px; border: 1px solid #e6be8f8c; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #b5828670, #442a4b 62%, #21162f); box-shadow: inset 0 0 0 6px #22172b66, inset 0 0 0 7px #d0a67d4d, 0 0 45px #c284ab28; color: #f7d6ac; font: 48px/1 var(--serif); }
.number-result h2 { font-size: 32px; }
.number-result h3 { font-size: 25px; margin: 9px 0; }
.number-result p { color: #c4a4bb; font-size: 12px; line-height: 1.7; margin: 8px 0 0; }
.number-result > .number-orb { margin: 0; flex-shrink: 0; }
.number-result:has(> .number-orb) { text-align: left; gap: 26px; }

/* Compatibility is shown as two people with shared questions, never a score. */
.compatibility-result { display: flex; align-items: center; justify-content: center; gap: 35px; padding: 35px 28px 30px; background: radial-gradient(ellipse at center, #9d638337, transparent 72%); }
.person-result { min-width: 0; flex: 0 1 245px; text-align: center; }
.person-result > img { display: block; width: 126px; height: 126px; object-fit: cover; margin: 0 auto 19px; border: 1px solid #d5a88591; border-radius: 50%; box-shadow: 0 0 0 6px #d6a88a08, 0 0 0 7px #d6a88a1f, 0 5px 30px #de90c124; }
.person-result > span { color: #cba3b9; font-size: 8px; letter-spacing: .15em; }
.person-result h2 { font-size: 31px; margin: 11px 0 7px; }
.person-result p { color: #bc9eb3; font-size: 11px; margin: 0; }
.compatibility-link { color: #f0c5c8; font: 65px/1 var(--serif); margin-top: -40px; font-weight: 400; text-shadow: 0 0 30px #e6a4d14d; }
.compatibility-result + .result-section { margin: 0 32px 24px; padding: 25px 28px; }
.reflection-list { margin: 0; padding: 0; list-style: none; }
.reflection-list li { position: relative; padding: 13px 0 13px 25px; border-top: 1px solid #c997b127; margin: 0; }
.reflection-list li::before { content: '✧'; position: absolute; left: 0; top: 14px; color: #d8ae8a; font-size: 15px; }

/* Energy self-report: seven readable scales on both form and result. */
.energy-intro { display: flex; align-items: center; gap: 24px; padding: 19px; border: 1px solid #a27ca13d; border-radius: 15px; margin-bottom: 23px; background: linear-gradient(120deg, #4d2c493b, #271b3261); }
.energy-intro img { width: 152px; height: 100px; object-fit: cover; border: 1px solid #be90b050; border-radius: 10px; }
.energy-intro p { color: #d4b4ca; font-size: 12px; line-height: 1.9; margin: 0; }
.energy-fields { display: grid; gap: 1px; padding: 0; }
.energy-field { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 0; border-bottom: 1px solid #bd8daf29; }
.energy-field > span { display: flex; align-items: center; gap: 11px; color: #e1c3d7; font-size: 13px; line-height: 1.6; }
.energy-field i { display: inline-block; width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: var(--energy-color, #deb0ce); box-shadow: 0 0 12px color-mix(in srgb, var(--energy-color, #deb0ce) 35%, transparent); }
.energy-field select { width: 154px; flex-shrink: 0; margin: 0; font-size: 12px; min-height: 42px; }
.energy-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; margin: 25px 32px; padding: 28px; }
.energy-result > div { min-width: 0; }
.energy-result h2 { margin: 13px 0; }
.energy-result p { font-size: 12px; }
.energy-result-art { display: block; width: 100%; max-height: 185px; object-fit: cover; border: 1px solid #ab7da542; border-radius: 13px; margin-top: 21px; }
.energy-chart { padding: 2px 0; gap: 20px; align-content: start; }
.energy-row > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 11px; color: #d7b6cd; }
.energy-row b { flex-shrink: 0; color: #eaccdf; font-size: 10px; font-weight: 500; }
.energy-track { height: 7px; border-radius: 7px; overflow: hidden; background: #65415842; }
.energy-track > span { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--energy-color) 45%, #362038), var(--energy-color)); border-radius: inherit; transition: width .7s var(--ease); box-shadow: 0 0 10px color-mix(in srgb, var(--energy-color) 40%, transparent); }
.energy-chart > small { color: #ac8da5; font-size: 9px; line-height: 1.6; }

/* A practice can be completed, paused, and resumed without losing its reading. */
.practice-player { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; gap: 32px; padding: 30px; margin-top: 25px; background: radial-gradient(ellipse at left, #97615529, transparent 60%), #3424347a; border-color: #c3917456; }
.practice-timer { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; width: 184px; height: 184px; margin-top: 14px; border: 1px solid #d6aa8370; border-radius: 50%; background: radial-gradient(circle at center, #8c5b6a44, #281b3199 70%); box-shadow: 0 0 45px #ce88a71a, inset 0 0 0 9px #a9759023; }
.practice-timer::before { content: '✦'; position: absolute; top: 18px; font-size: 12px; color: #dcb58b; }
.timer-orbit { position: absolute; inset: -8px; border: 1px dashed #cc9c7d40; border-radius: 50%; }
.practice-timer strong { color: #f8d9c0; font: 46px/1.2 var(--serif); font-variant-numeric: tabular-nums; margin-top: 4px; }
.practice-timer small { color: #cfa9ba; font-size: 10px; margin-top: 8px; }
.practice-steps { min-width: 0; }
.practice-steps > .eyebrow { color: #d9b292; font-size: 8px; }
.practice-steps h2 { margin-top: 13px; font-size: 29px; }
.practice-steps > p { font-size: 12px; color: #d2b0c4; }
.practice-steps ol { counter-reset: practice; list-style: none; margin: 21px 0; padding: 0; }
.practice-steps li { margin: 0; border-top: 1px solid #bf8fac29; padding: 14px 0; }
.practice-steps li label { display: flex; align-items: flex-start; gap: 13px; cursor: pointer; color: #e2c3d5; font-size: 12px; line-height: 1.85; }
.practice-steps input { width: 18px; height: 18px; flex-shrink: 0; margin: 3px 0 0; accent-color: #e9b3c9; }
.practice-steps input:checked + span { color: #b293a8; text-decoration: line-through; text-decoration-color: #d1ab8b7d; }
.practice-steps .button { min-height: 42px; font-size: 11px; }
.practice-steps .text-button { margin-left: 15px; font-size: 11px; }
.practice-steps > .small-copy { font-size: 10px; margin-bottom: 0; }

/* Lunar calendar: seven columns stay seven, details move below on narrow screens. */
.lunar-calendar-shell { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 28px; padding: 31px; }
.calendar-main { min-width: 0; }
.calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.calendar-heading h2 { color: #f0d3e2; font-size: 29px; margin: 5px 0; text-align: center; text-transform: capitalize; }
.round-button { width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; padding: 0; border: 1px solid #c48fab79; border-radius: 50%; background: #402a4166; color: #eac0d4; font-size: 19px; transition: background .2s; }
.round-button:hover { background: #78456866; }
.calendar-timezone { color: #b79bad; font-size: 9px; line-height: 1.7; margin: 13px 0 24px; text-align: center; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; text-align: center; }
.calendar-weekdays > span { color: #bd9fb4; font-size: 9px; letter-spacing: .06em; }
.calendar-weekdays > span:nth-last-child(-n + 2) { color: #e2b596; }
.calendar-grid { gap: 7px; }
.calendar-day { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 91px; padding: 8px 5px; border: 1px solid #a7799733; border-radius: 10px; color: #d9bbd0; background: #36243d91; transition: background .2s, border-color .2s, transform .2s; }
.calendar-day:hover { border-color: #d8a6c298; background: #5f3b5766; transform: translateY(-2px); }
.calendar-day > span { color: #dfbfd3; font-size: 11px; line-height: 1.4; }
.calendar-day > svg { width: 34px; height: 34px; display: block; margin: 4px 0 2px; filter: drop-shadow(0 0 6px #e2b78518); }
.calendar-day > small { color: #bba0b2; font-size: 8px; line-height: 1.4; }
.calendar-day.today { border-color: #dcad7770; }
.calendar-day.today::after { content: ''; width: 4px; height: 4px; border-radius: 50%; position: absolute; right: 6px; top: 6px; background: #e5bd8a; }
.calendar-day.selected { border-color: #f0b9d9; background: linear-gradient(130deg, #8d536863, #5a3653); box-shadow: inset 0 1px 0 #facce31f, 0 3px 18px #b27a9224; }
.calendar-day.selected > span { color: #ffe4eb; }
.calendar-day.selected > small { color: #e3c6d4; }
.calendar-spacer { min-height: 1px; }
.calendar-detail { min-width: 0; display: flex; flex-direction: column; align-items: center; align-self: start; text-align: center; padding: 28px 22px; border: 1px solid #b887a84a; border-radius: 18px; background: radial-gradient(ellipse at top, #b776932a, transparent 70%), #2d1e35; }
.selected-moon { width: 137px; height: 137px; margin: 0 0 18px; filter: drop-shadow(0 0 26px #d6a37a26); }
.selected-moon svg { width: 100%; height: 100%; display: block; }
.calendar-detail > .eyebrow { font-size: 8px; line-height: 1.8; letter-spacing: .11em; }
.calendar-detail h2 { font-size: 27px; margin: 17px 0 10px; }
.calendar-detail > p { color: #c7a9be; font-size: 11px; line-height: 1.8; margin: 0; }
.moon-fact { font-size: 11px; color: #e1bc9b; border-top: 1px solid #b88b7435; padding-top: 17px; margin-top: 17px; width: 100%; }
.calendar-detail .button { width: 100%; font-size: 10px; min-height: 43px; margin-top: 23px; padding: 11px 13px; }
.calendar-detail > small { display: block; color: #b798af; font-size: 9px; line-height: 1.7; margin-top: 12px; }
.calendar-loading { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.calendar-loading > .loading-orbit { display: block; margin-top: 0; }
.calendar-loading > p { color: #c8a4bd; font-size: 13px; margin-top: 0; }
.lunar-events { padding: 0 31px 27px; }
.lunar-events > .eyebrow { display: block; font-size: 9px; margin-bottom: 17px; }
.lunar-events > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.lunar-events article { min-width: 0; text-align: center; border: 1px solid #b784a143; border-radius: 13px; padding: 16px 12px; background: #3b294636; }
.lunar-events article > span { color: #ddbc9a; font-size: 25px; }
.lunar-events h3 { font-size: 20px; color: #edcbdc; margin: 10px 0 6px; }
.lunar-events p { font-size: 10px; line-height: 1.7; color: #ba9ab0; margin: 0; }
.method-caption { color: #b396ad; font-size: 10px; line-height: 1.8; text-align: center; margin: 0 31px 27px; padding-top: 20px; border-top: 1px solid #b684a025; }
.lunar-result-strip { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 24px 30px 31px; background: radial-gradient(ellipse at 40% 40%, #9a748126, transparent 70%); }
.moon-display { width: 110px; height: 110px; display: grid; place-items: center; color: #f1d1a3; font: 86px/1 var(--serif); text-shadow: 0 0 36px #d6a97f47; }
.lunar-result-strip h2 { font-size: 30px; margin: 13px 0 8px; }
.lunar-result-strip p { color: #bc9fb4; font-size: 12px; margin: 0; }

@media (max-width: 960px) {
  .experience-heading h1 { font-size: 34px; }
  .experience-heading p { font-size: 12px; }
  .experience-meta { margin-top: 15px; gap: 7px 13px; }
  .experience-meta span { font-size: 9px; }
  .experience-body { padding: 28px; }
  .step-chip { font-size: 10px; }
  .wizard-form > h2 { font-size: 29px; }
  .option-field .option-tile { padding: 16px; }
  .birth-form .form-columns { grid-template-columns: 1fr 1fr; }
  .two-person-form { gap: 18px; }
  .two-person-form .birth-form { padding: 20px; }
  .two-person-form .form-columns { grid-template-columns: 1fr; }
  .choice-pair { gap: 14px; }
  .choice-pair .field { padding: 17px; }
  .reading-content { padding: 3px 25px 28px; }
  .result-banner h1 { font-size: 39px; }
  .result-sections { gap: 15px; }
  .result-sections > .result-section { padding: 24px; }
  .result-sections h2 { font-size: 24px; }
  .result-summary p { font-size: 19px; }
  .natal-panel { gap: 25px; padding: 30px; }
  .planet-row { gap: 10px; font-size: 11px; }
  .planet-row strong { font-size: 10px; }
  .planet-row small { font-size: 8px; }
  .planet-list > p { font-size: 9px; }
  .compatibility-result { gap: 28px; }
  .compatibility-result + .result-section { margin: 0 25px 24px; }
  .energy-result { margin: 22px 25px; padding: 24px; gap: 22px; }
  .energy-chart { gap: 18px; }
  .practice-player { grid-template-columns: 160px minmax(0, 1fr); gap: 22px; padding: 25px; }
  .practice-timer { width: 145px; height: 145px; }
  .practice-timer strong { font-size: 38px; }
  .practice-timer small { font-size: 9px; }
  .practice-timer::before { top: 13px; font-size: 10px; }
  .practice-steps h2 { font-size: 27px; }
  .lunar-calendar-shell { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; padding: 24px; }
  .calendar-heading h2 { font-size: 24px; }
  .calendar-day { min-height: 82px; padding: 7px 3px; }
  .calendar-day > svg { width: 29px; height: 29px; }
  .calendar-grid, .calendar-weekdays { gap: 5px; }
  .calendar-detail { padding: 23px 17px; }
  .selected-moon { width: 112px; height: 112px; }
  .calendar-detail h2 { font-size: 24px; }
  .calendar-detail .button { font-size: 9px; }
  .lunar-events { padding: 0 24px 24px; }
  .lunar-events > div { gap: 10px; }
  .lunar-events article { padding: 15px 10px; }
  .lunar-events h3 { font-size: 18px; }
}

@media (max-width: 760px) {
  .lunar-calendar-shell { grid-template-columns: 1fr; }
  .calendar-grid { gap: 7px; }
  .calendar-day { min-height: 87px; }
  .calendar-day > svg { width: 34px; height: 34px; }
  .calendar-detail { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 20px; text-align: left; align-items: center; padding: 23px; }
  .selected-moon { grid-column: 1; grid-row: 1 / 5; width: 105px; height: 105px; margin: 0; }
  .calendar-detail > .eyebrow, .calendar-detail h2, .calendar-detail > p, .calendar-detail .moon-fact { grid-column: 2; }
  .calendar-detail h2 { font-size: 26px; margin: 9px 0 7px; }
  .calendar-detail .moon-fact { margin-top: 11px; padding-top: 10px; }
  .calendar-detail .button, .calendar-detail > small { grid-column: 1 / -1; text-align: center; }
  .calendar-detail .button { font-size: 11px; margin-top: 22px; }
  .calendar-detail > small { margin-top: 10px; }
  .natal-panel { grid-template-columns: 1fr; gap: 25px; }
  .natal-panel .zodiac-wheel { max-width: 360px; }
  .planet-row { font-size: 13px; min-height: 39px; }
  .planet-row strong { font-size: 12px; }
  .planet-row small { font-size: 10px; }
  .planet-list > p { font-size: 10px; }
}

@media (max-width: 650px) {
  .back-link { font-size: 10px; padding: 13px 21px; min-height: 43px; }
  .experience-header .experience-heading { padding: 9px 22px 25px; }
  .experience-heading h1 { font-size: 33px; margin: 12px 0; }
  .experience-meta { gap: 7px 12px; margin-top: 16px; }
  .experience-meta span { font-size: 8px; }
  .experience-body { padding: 22px 19px 25px; }
  .stepper { gap: 7px; margin: 0 0 24px; }
  .step-chip { padding: 6px 9px 6px 6px; font-size: 8px; gap: 6px; line-height: 1.4; }
  .step-chip > span { width: 18px; height: 18px; min-width: 18px; font-size: 8px; }
  .wizard-form > h2 { font-size: 28px; margin: 5px 0 23px; }
  .field > span:first-child { font-size: 12px; line-height: 1.7; }
  .field > span > small { font-size: 9px; margin-left: 4px; }
  .field-hint { font-size: 10px; line-height: 1.8; }
  .field textarea { min-height: 125px; }
  .field textarea[rows='6'] { min-height: 210px; }
  .option-field { margin-bottom: 23px; }
  .option-field legend { font-size: 12px; margin-bottom: 12px; }
  .option-field .option-grid { gap: 9px; }
  .option-field .option-tile { padding: 14px 11px; gap: 8px; min-height: 93px; }
  .option-tile > input { width: 14px; height: 14px; min-width: 14px; margin-top: 3px; }
  .option-tile > input:checked { border-width: 3px; }
  .option-tile > span { padding: 0; }
  .option-tile strong { font-size: 11px; line-height: 1.55; }
  .option-tile small { font-size: 9px; line-height: 1.7; }
  .option-grid:has(> .option-tile:nth-child(3)):not(:has(> .option-tile:nth-child(4))) { grid-template-columns: 1fr; }
  .option-grid:has(> .option-tile:nth-child(3)):not(:has(> .option-tile:nth-child(4))) .option-tile { min-height: 0; padding: 15px; }
  .day-picker { gap: 11px; margin-bottom: 25px; }
  .day-choice { min-height: 92px; padding: 17px 16px; gap: 8px; }
  .day-choice > span { font-size: 8px; }
  .day-choice > strong { font-size: 21px; }
  .day-choice::after { font-size: 25px; right: 13px; top: 12px; }
  .birth-form > h3 { font-size: 25px; margin-bottom: 19px; }
  .birth-form .form-columns { grid-template-columns: 1fr; gap: 20px; }
  .two-person-form { grid-template-columns: 1fr; gap: 21px; }
  .two-person-form .birth-form { padding: 21px 17px; }
  .choice-pair { grid-template-columns: 1fr; gap: 17px; }
  .choice-pair .field { margin: 0; padding: 18px; }
  .choice-pair .field > span { font-size: 25px; }
  .choice-pair textarea { min-height: 115px; }
  .review-note { gap: 13px; padding: 17px; margin-top: 23px; border-radius: 12px; align-items: flex-start; }
  .review-note > span { margin-top: 3px; font-size: 25px; }
  .review-note strong { font-size: 11px; }
  .review-note p { font-size: 10px; }
  .answer-review, .method-notes { padding: 16px 18px; }
  .answer-review summary, .method-notes summary { font-size: 11px; }
  .answer-review p, .method-notes p { font-size: 11px; }
  .form-error { font-size: 11px; padding: 14px 16px; }
  .form-cost { text-align: left; font-size: 9px; margin-top: 16px; line-height: 1.8; }
  .wizard-actions { gap: 11px; }
  .wizard-actions .button { font-size: 10px; padding: 10px 14px; min-height: 43px; }
  .wizard-actions .primary { max-width: 100%; }
  .saved-daily-note { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 9px 11px; padding: 18px; }
  .saved-daily-note p { font-size: 10px; }
  .saved-daily-note .button { grid-column: 1 / -1; width: 100%; margin-top: 5px; }
  .experience-loading { padding: 27px 23px 35px; min-height: 325px; }
  .experience-loading h2 { font-size: 28px; line-height: 1.35; }
  .experience-loading p { font-size: 12px; }
  .experience-loading .small-copy { font-size: 9px; }
  .result-banner { min-height: 213px; padding: 30px 23px; }
  .result-banner > .eyebrow { font-size: 8px; }
  .result-banner h1 { font-size: 34px; line-height: 1.17; margin: 15px 0 11px; }
  .result-banner > p { font-size: 11px; line-height: 1.8; margin-bottom: 15px; }
  .result-saved { font-size: 8px; padding: 6px 10px; }
  .period-ribbon { gap: 7px 12px; font-size: 11px; padding: 15px 18px; }
  .period-ribbon > span { font-size: 9px; }
  .reading-content { padding: 4px 17px 25px; }
  .result-summary { margin: 11px 0 22px; padding: 19px 20px; }
  .result-summary p { font-size: 18px; line-height: 1.75; }
  .result-sections { grid-template-columns: 1fr; gap: 15px; }
  .result-sections > .result-section { padding: 22px 20px; border-radius: 14px; }
  .result-sections h2 { font-size: 25px; margin-bottom: 15px; }
  .section-number { font-size: 8px; margin-bottom: 11px; }
  .result-section p { font-size: 13px; line-height: 1.9; }
  .full-reading { padding: 21px 18px; margin-top: 17px; }
  .result-actions { gap: 10px; margin-top: 25px; padding-top: 22px; }
  .result-actions .button { flex: 1; min-width: 0; padding: 10px 12px; font-size: 10px; }
  .result-actions .text-button { width: 100%; margin: 3px 0 0; font-size: 11px; }
  .result-return-note { font-size: 9px; line-height: 1.8; margin-top: 12px; }
  .tarot-spread { gap: 23px 12px; padding: 25px 15px 22px; }
  .tarot-position { width: calc((100% - 12px) / 2); max-width: 141px; }
  .tarot-card, .card-inner { width: 100%; height: 223px; min-height: 223px; }
  .card-position { font-size: 9px; min-height: 38px; max-width: 140px; padding-bottom: 9px; }
  .card-back { border-radius: 11px; }
  .card-back::before { inset: 23px 17px 29px; }
  .card-back b { font-size: 57px; margin: 10px 0 8px; }
  .card-back-stars { font-size: 8px; }
  .card-back small { font-size: 7px; margin-top: 14px; }
  .card-front { padding: 8px 8px 11px; border-radius: 11px; }
  .card-front > img { height: 120px; }
  .card-number { font-size: 7px; margin-top: 8px; }
  .card-front-title { font-size: 17px; margin-top: 6px; }
  .card-front > small { font-size: 7px; }
  .card-caption { font-size: 9px; margin-top: 11px; }
  .single-card .tarot-position { width: 207px; max-width: 207px; }
  .single-card .tarot-card, .single-card .card-inner { width: 190px; height: 297px; min-height: 297px; }
  .single-card .card-position { max-width: 200px; min-height: 29px; font-size: 10px; }
  .single-card .card-front > img { height: 178px; }
  .single-card .card-front-title { font-size: 24px; }
  .single-card .card-front > small { font-size: 9px; }
  .single-card .card-back b { font-size: 79px; }
  .single-card .card-back-stars { font-size: 11px; }
  .single-card .card-back small { font-size: 9px; }
  .single-card .card-caption { font-size: 11px; }
  .reveal-invitation { padding: 0 23px 30px; }
  .reveal-invitation p { font-size: 18px; line-height: 1.75; margin-top: 2px; }
  .reveal-invitation .button { width: 100%; font-size: 11px; }
  .natal-panel { padding: 25px 22px; gap: 26px; }
  .natal-panel .zodiac-wheel { max-width: 325px; }
  .planet-list > .eyebrow { font-size: 8px; margin-bottom: 14px; }
  .planet-row { min-height: 37px; font-size: 11px; gap: 10px; }
  .planet-row strong { font-size: 10px; }
  .planet-row small { font-size: 8px; }
  .planet-list > p { font-size: 9px; line-height: 1.8; }
  .solar-result { gap: 20px; padding: 27px 22px; }
  .solar-result > img { width: 98px; height: 98px; }
  .solar-result h2 { font-size: 31px; margin-top: 12px; }
  .solar-result .eyebrow { font-size: 7px; letter-spacing: .1em; }
  .number-result { gap: 24px; padding: 30px 22px; }
  .number-orb { width: 83px; height: 83px; font-size: 39px; margin-bottom: 14px; }
  .number-result h3 { font-size: 24px; }
  .number-result p { font-size: 10px; line-height: 1.8; }
  .number-result > .number-orb { width: 87px; height: 87px; }
  .number-result:has(> .number-orb) { gap: 20px; }
  .number-result h2 { font-size: 27px; }
  .number-result .eyebrow { font-size: 7px; }
  .compatibility-result { gap: 16px; padding: 29px 21px 27px; }
  .person-result { flex-basis: 130px; }
  .person-result > img { width: 92px; height: 92px; margin-bottom: 15px; }
  .person-result > span { font-size: 6px; letter-spacing: .09em; }
  .person-result h2 { font-size: 25px; margin: 10px 0 7px; }
  .person-result p { font-size: 9px; }
  .compatibility-link { font-size: 41px; margin-top: -38px; }
  .compatibility-result + .result-section { margin: 0 17px 20px; padding: 23px 20px; }
  .reflection-list li { padding: 13px 0 13px 23px; font-size: 12px; line-height: 1.85; }
  .reflection-list li::before { font-size: 14px; }
  .energy-intro { gap: 16px; padding: 14px; margin-bottom: 17px; }
  .energy-intro img { width: 101px; height: 101px; object-position: center; }
  .energy-intro p { font-size: 10px; line-height: 1.95; }
  .energy-field { gap: 12px; padding: 14px 0; }
  .energy-field > span { gap: 8px; font-size: 11px; }
  .energy-field i { width: 8px; height: 8px; }
  .energy-field select { width: 120px; font-size: 16px; min-height: 42px; padding: 10px 8px; }
  .energy-result { grid-template-columns: 1fr; gap: 27px; margin: 22px 17px; padding: 22px 20px; }
  .energy-result-art { max-height: 160px; margin-top: 17px; object-position: center; }
  .energy-result p { font-size: 12px; }
  .energy-chart { gap: 19px; }
  .energy-row > div:first-child { font-size: 11px; margin-bottom: 9px; }
  .energy-row b { font-size: 10px; }
  .energy-track { height: 7px; }
  .energy-chart > small { font-size: 9px; }
  .practice-player { grid-template-columns: 1fr; gap: 26px; padding: 27px 20px; }
  .practice-timer { margin: 7px auto 0; width: 151px; height: 151px; }
  .practice-timer strong { font-size: 39px; }
  .practice-timer small { font-size: 9px; }
  .practice-steps h2 { font-size: 28px; }
  .practice-steps > p { font-size: 12px; }
  .practice-steps li label { gap: 11px; font-size: 12px; }
  .practice-steps input { width: 18px; height: 18px; }
  .practice-steps .button { font-size: 10px; padding: 11px 16px; }
  .practice-steps .text-button { font-size: 10px; margin-left: 12px; }
  .practice-steps > .small-copy { font-size: 9px; }
  .lunar-calendar-shell { gap: 22px; padding: 23px 17px; }
  .calendar-heading { gap: 10px; }
  .calendar-heading h2 { font-size: 25px; line-height: 1.3; }
  .round-button { width: 33px; height: 33px; font-size: 17px; }
  .calendar-timezone { font-size: 8px; line-height: 1.8; margin: 12px 0 19px; }
  .calendar-weekdays { gap: 4px; margin-bottom: 9px; }
  .calendar-weekdays > span { font-size: 8px; }
  .calendar-grid { gap: 4px; }
  .calendar-day { min-height: 71px; border-radius: 7px; padding: 6px 1px; }
  .calendar-day > span { font-size: 10px; }
  .calendar-day > svg { width: 26px; height: 26px; margin: 3px 0 2px; }
  .calendar-day > small { font-size: 7px; }
  .calendar-day.today::after { right: 4px; top: 4px; width: 3px; height: 3px; }
  .calendar-detail { grid-template-columns: 78px minmax(0, 1fr); gap: 0 16px; padding: 21px 18px; border-radius: 15px; }
  .selected-moon { width: 78px; height: 78px; }
  .calendar-detail > .eyebrow { font-size: 7px; letter-spacing: .06em; }
  .calendar-detail h2 { font-size: 24px; line-height: 1.3; margin: 9px 0 7px; }
  .calendar-detail > p { font-size: 10px; }
  .calendar-detail .moon-fact { margin-top: 10px; padding-top: 9px; font-size: 10px; }
  .calendar-detail .button { font-size: 10px; margin-top: 21px; }
  .calendar-detail > small { font-size: 8px; }
  .calendar-loading { min-height: 320px; }
  .calendar-loading > p { font-size: 12px; }
  .lunar-events { padding: 0 17px 22px; }
  .lunar-events > .eyebrow { font-size: 8px; margin-bottom: 15px; }
  .lunar-events > div { grid-template-columns: 1fr 1fr; gap: 11px; }
  .lunar-events article { padding: 17px 11px; }
  .lunar-events article > span { font-size: 24px; }
  .lunar-events h3 { font-size: 21px; line-height: 1.3; margin: 10px 0 6px; }
  .lunar-events p { font-size: 9px; line-height: 1.8; }
  .method-caption { margin: 0 19px 23px; padding-top: 19px; font-size: 9px; line-height: 1.9; }
  .lunar-result-strip { gap: 18px; padding: 25px 22px 29px; }
  .moon-display { width: 76px; height: 90px; font-size: 70px; flex-shrink: 0; }
  .lunar-result-strip h2 { font-size: 25px; line-height: 1.3; }
  .lunar-result-strip p { font-size: 11px; }
  .lunar-result-strip .eyebrow { font-size: 8px; }
}

@media (max-width: 370px) {
  .experience-body { padding-left: 16px; padding-right: 16px; }
  .option-field .option-grid { grid-template-columns: 1fr; }
  .option-field .option-tile { min-height: 0; padding: 15px; }
  .day-choice { padding: 16px 13px; }
  .day-choice > strong { font-size: 19px; }
  .day-choice::after { right: 10px; top: 13px; font-size: 23px; }
  .tarot-position { max-width: 124px; }
  .tarot-card, .card-inner { height: 214px; min-height: 214px; }
  .card-front > img { height: 114px; }
  .card-front-title { font-size: 16px; }
  .card-back-stars { font-size: 7px; }
  .person-result > img { width: 79px; height: 79px; }
  .person-result h2 { font-size: 23px; }
  .compatibility-result { gap: 12px; }
  .compatibility-link { font-size: 34px; }
  .number-result { gap: 19px; }
  .number-result h3 { font-size: 22px; }
  .calendar-heading h2 { font-size: 22px; }
  .calendar-day > svg { width: 23px; height: 23px; }
  .calendar-day { min-height: 68px; }
  .calendar-detail { grid-template-columns: 66px minmax(0, 1fr); gap: 0 13px; padding: 19px 15px; }
  .selected-moon { width: 66px; height: 66px; }
  .calendar-detail h2 { font-size: 22px; }
  .energy-intro img { width: 86px; height: 96px; }
  .energy-intro { gap: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-card:hover:not(.is-revealed), .calendar-day:hover { transform: none; }
  .card-inner { transition: none !important; }
  .loading-stars { animation: none; }
}

/* A clear promise, a short first answer, and a result worth returning to. */
.experience-outcomes { display: grid; gap: 9px; margin: 20px 0 0; }
.experience-outcomes > span { display: flex; align-items: center; gap: 10px; color: #f0d9e5; font-size: 12px; line-height: 1.6; }
.experience-outcomes b { font-size: 16px; color: #edc299; font-weight: 400; }
.experience-header.is-context-step { grid-template-columns: 128px minmax(0, 1fr); min-height: 0; }
.experience-header.is-context-step .experience-art { height: 100%; max-height: 155px; }
.experience-header.is-context-step .experience-heading { padding: 23px 29px; margin: 0; }
.experience-header.is-context-step h1 { font-size: 30px; margin: 8px 0; }
.experience-header.is-context-step .experience-heading > p,
.experience-header.is-context-step .experience-outcomes { display: none; }
.experience-header.is-context-step .experience-meta { margin-top: 10px; }
.wizard-form > h2 { margin-bottom: 11px; }
.wizard-step-help { max-width: 68ch; margin: 0 0 25px; color: #d0b9cb; font-size: 13px; line-height: 1.8; }
.extra-questions { margin: 21px 0 25px; border: 1px solid #b58aaa42; border-radius: 15px; background: linear-gradient(145deg, #5c3b5420, #20182b38); overflow: hidden; }
.extra-questions > summary { cursor: pointer; padding: 18px 21px; color: #f0cfdf; font-size: 13px; line-height: 1.7; }
.extra-questions > summary::marker { color: #dfb7c9; }
.extra-questions > summary > small { display: block; margin: 5px 0 0 18px; color: #c2a7bc; font-size: 11px; line-height: 1.7; }
.extra-questions > div { padding: 4px 21px 20px; }
.extra-questions > div > .field:last-child { margin-bottom: 0; }
.extra-questions[open] { border-color: #c69db263; background: #412c442e; }
.extra-questions > summary:focus-visible,
.question-example > summary:focus-visible,
.reading-question > summary:focus-visible { outline: 2px solid #f2c9de; outline-offset: -5px; border-radius: 10px; }
.birth-form > .field { margin-bottom: 17px; }
.birth-form .birth-details { margin-top: 17px; }
.birth-form .birth-details .form-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }
.birth-details .form-columns > .field:last-child:nth-child(odd) { grid-column: 1 / -1; }
.two-person-form .birth-details .form-columns { grid-template-columns: 1fr; }
.question-example { margin: -5px 0 25px; border-left: 2px solid #cdaa8555; padding: 0 17px; }
.question-example > summary { min-height: 44px; padding: 11px 0; cursor: pointer; color: #e7c6b0; font-size: 12px; line-height: 1.7; }
.question-example > span { display: block; margin: 7px 0; color: #bfa5ba; font-size: 10px; }
.question-example > p { max-width: 65ch; margin: 0 0 12px; color: #dec5d6; font-size: 13px; line-height: 1.85; }
.reading-overview { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding: 27px 0 13px; }
.reading-overview > span:last-child { color: #c8acbf; font-size: 11px; }
.reading-overview .eyebrow { font-size: 10px; }
.reading-question { margin: 0 0 17px; padding: 0 15px; border: 1px solid #b58aaa35; border-radius: 11px; background: #140f1d32; }
.reading-question > summary { cursor: pointer; padding: 12px 0; color: #d5bbcd; font-size: 12px; }
.reading-question > p { color: #d3bccd; font-size: 13px; line-height: 1.85; margin: 0 0 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.summary-label { display: block; color: #eac397; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.reading-navigation { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 25px; }
.reading-navigation > button { display: flex; align-items: baseline; gap: 8px; max-width: 100%; padding: 11px 13px; border: 1px solid #b482a447; border-radius: 12px; color: #e4c5da; background: #432d4729; font-size: 11px; text-align: left; line-height: 1.5; overflow-wrap: anywhere; transition: background .2s, border-color .2s; }
.reading-navigation > button > span { flex-shrink: 0; color: #d8ad88; font-size: 9px; }
.reading-navigation > button:hover { border-color: #dcabc685; background: #79527336; }
.result-sections > .action-section { border-color: #d8b17a70; background: radial-gradient(ellipse at top left, #a3754e20, transparent 70%), #36243545; }
.result-sections > .result-section, .personal-result-notes { scroll-margin-top: 30px; }
.result-sections > .result-section:focus { outline: 2px solid #e3bad475; outline-offset: 3px; }
.experience-next { display: flex; align-items: center; gap: 25px; margin-top: 26px; padding: 25px 27px; border: 1px solid #ce9cab4d; border-radius: 17px; background: linear-gradient(135deg, #69445e2e, #2d21382e); }
.experience-next > div { flex: 1; min-width: 0; }
.experience-next .eyebrow { font-size: 9px; color: #d8b18e; }
.experience-next h2 { font-size: 27px; line-height: 1.3; margin: 10px 0; }
.experience-next p { font-size: 13px; line-height: 1.8; color: #d5bccc; margin: 0; }
.experience-next .button { flex-shrink: 0; gap: 8px; min-height: 44px; font-size: 11px; }
.lunar-day-idea { text-align: left; margin-top: 20px; padding: 16px; border-radius: 12px; border: 1px solid #c0976847; background: #a2704c0d; }
.lunar-day-idea > span { color: #e2bf9c; font-size: 8px; letter-spacing: .1em; }
.lunar-day-idea > p { color: #e1c6d7; font-size: 12px; line-height: 1.8; margin: 9px 0; }
.lunar-day-idea > small { display: block; color: #bfa5b8; font-size: 9px; line-height: 1.7; }

@media (max-width: 760px) {
 .calendar-detail .lunar-day-idea { grid-column: 1 / -1; }
 .experience-next { flex-direction: column; align-items: stretch; gap: 18px; padding: 23px; }
 .experience-next .button { align-self: flex-start; }
}
@media (max-width: 650px) {
 .experience-header:not(.is-context-step) .experience-art { height: 163px; }
 .experience-header.is-context-step { grid-template-columns: 78px minmax(0, 1fr); }
 .experience-header.is-context-step .experience-art { max-height: 143px; }
 .experience-header.is-context-step .experience-art::after { background: linear-gradient(90deg, transparent 30%, #2a1c3388); }
 .experience-header.is-context-step .experience-heading { padding: 18px 16px; }
 .experience-header.is-context-step h1 { font-size: 25px; line-height: 1.2; }
 .experience-header.is-context-step .experience-meta { font-size: 10px; }
 .experience-outcomes { gap: 7px; margin-top: 16px; }
 .experience-outcomes > span { font-size: 12px; }
 .experience-outcomes b { font-size: 14px; }
 .wizard-step-help { font-size: 13px; line-height: 1.75; margin-bottom: 22px; }
 .extra-questions > summary { padding: 17px; font-size: 13px; }
 .extra-questions > summary > small { font-size: 11px; }
 .extra-questions > div { padding: 2px 17px 18px; }
 .birth-form .birth-details .form-columns { grid-template-columns: 1fr; }
 .experience-body .field > span:first-child, .experience-body .option-field legend { font-size: 14px; }
 .experience-body .field input, .experience-body .field textarea, .experience-body .field select { font-size: 16px; }
 .experience-body .field-hint { font-size: 11px; }
 .question-example { padding-left: 14px; }
 .question-example > summary { font-size: 12px; }
 .reading-overview { padding-top: 23px; }
 .reading-navigation { flex-wrap: nowrap; overflow-x: auto; margin-right: -17px; margin-left: -17px; padding: 0 17px 10px; overscroll-behavior-x: contain; scrollbar-width: thin; }
 .reading-navigation > button { min-width: 158px; max-width: 240px; flex-shrink: 0; min-height: 48px; }
 .reading-content .result-section p { font-size: 14px; line-height: 1.85; }
 .result-banner h1 { overflow-wrap: anywhere; }
 .experience-next h2 { font-size: 26px; }
 .experience-next .button { align-self: stretch; }
 .lunar-day-idea { padding: 15px; margin-top: 18px; }
 .lunar-day-idea > p { font-size: 12px; }
}
@media print {
 .reading-navigation, .question-example, .experience-next, .reading-overview > span:last-child { display: none !important; }
 .reading-overview .eyebrow, .summary-label { color: #60434e !important; }
 .result-sections > .result-section { break-inside: avoid; }
}