:root {
  --font-display: "Instrument Serif", "DM Serif Display", Georgia, Cambria, "Times New Roman", serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-reading: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
  --bg: #05040a;
  --ink: #fff8e7;
  --soft: #d9c9ad;
  --muted: #9e91b2;
  --gold: #e7c46b;
  --gold2: #fff0b8;
  --violet: #7c5cff;
  --violet2: #b9a6ff;
  --blue: #10152e;
  --panel: rgba(9, 8, 18, 0.56);
  --panel2: rgba(14, 12, 29, 0.68);
  --line: rgba(231, 196, 107, 0.26);
  --lineStrong: rgba(255, 232, 166, 0.52);
  --danger: #ffb08a;
  --ok: #c8f0a4;
  --shadow: 0 32px 120px rgba(0, 0, 0, .56);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  line-height: 1.4;
}

button, input, textarea, select { font-family: var(--font-ui); }
button { -webkit-tap-highlight-color: transparent; }

.cosmos {
  position: fixed;
  inset: 0;
  z-index: -4;
  overflow: hidden;
  background-image: url('/assets/bg-desktop.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #05040a;
}

.cosmos::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 245, 210, .10), transparent 18rem),
    radial-gradient(circle at 50% 26%, rgba(92, 66, 190, .20), transparent 34rem),
    linear-gradient(180deg, rgba(2, 2, 6, .04) 0%, rgba(4,4,10,.14) 34%, rgba(3,3,8,.42) 72%, rgba(2,2,5,.72) 100%);
}

.cosmos::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    radial-gradient(circle at center, transparent 0, rgba(0,0,0,.12) 46%, rgba(0,0,0,.72) 100%);
  background-size: 52px 52px, 52px 52px, auto;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.78) 60%, rgba(0,0,0,.40));
  opacity: .34;
}

.stars,
.nebula,
.gridVeil {
  display: none;
}

@keyframes drift { to { transform: translate3d(-8rem, 6rem, 0); } }
@keyframes slowSpin { to { transform: rotate(1turn); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes revealUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { to { transform: translateX(140%); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(28px) rotateX(18deg) scale(.96); } to { opacity: 1; transform: translateY(0) rotateX(0deg) scale(1); } }
@keyframes measureRing { to { transform: translate(-50%, -50%) scale(1.72); opacity: 0; } }

.shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 0 calc(90px + env(safe-area-inset-bottom));
}

.hero {
  text-align: center;
  position: relative;
  padding: 22px 0 44px;
  min-height: 520px;
  display: grid;
  place-items: center;
  align-content: center;
}

.orbWrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .34;
}

.voidOrb {
  position: relative;
  width: clamp(180px, 26vw, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 42%, rgba(124,92,255,.55), rgba(24,18,56,.26) 38%, rgba(0,0,0,.9) 68%, rgba(0,0,0,1) 100%);
  box-shadow:
    inset 0 0 42px rgba(255, 240, 184, .08),
    inset 0 0 98px rgba(124, 92, 255, .20),
    0 0 68px rgba(124,92,255,.28),
    0 0 160px rgba(231,196,107,.08);
  animation: pulse 7s ease-in-out infinite;
}

.voidOrb::before,
.voidOrb::after {
  content: "";
  position: absolute;
  inset: -9%;
  border-radius: 50%;
  border: 1px solid rgba(231,196,107,.18);
}
.voidOrb::after {
  inset: 10%;
  border-color: rgba(185,166,255,.18);
  filter: blur(.2px);
}
.voidOrb span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(255,255,255,.22) 48%, transparent 56%);
  transform: translateX(-80%);
  animation: shimmer 9s ease-in-out infinite;
}

.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(220px, 34vw, 470px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(231,196,107,.22);
  transform: translate(-50%, -50%) rotate(16deg) skew(6deg);
  box-shadow: 0 0 40px rgba(124,92,255,.06);
}
.orbit1 { animation: slowSpin 32s linear infinite; }
.orbit2 { width: clamp(260px, 41vw, 560px); transform: translate(-50%, -50%) rotate(70deg) skew(-12deg); opacity: .65; animation: slowSpin 46s linear infinite reverse; }
.orbit3 { width: clamp(140px, 22vw, 290px); transform: translate(-50%, -50%) rotate(-28deg) skew(18deg); opacity: .72; animation: slowSpin 28s linear infinite; }

.eyebrow {
  margin: 0 0 14px;
  color: var(--gold);
  letter-spacing: .34em;
  text-transform: uppercase;
  font-size: .75rem;
  font-family: var(--font-ui);
  position: relative;
  z-index: 1;
}

h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 500;
  letter-spacing: -.075em;
  font-size: clamp(4rem, 10vw, 8.4rem);
  line-height: .86;
  color: var(--ink);
  text-shadow:
    0 0 18px rgba(255,240,184,.18),
    0 0 72px rgba(124,92,255,.42),
    0 18px 90px rgba(0,0,0,.65);
}

.claim {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 26px auto 0;
  color: var(--gold2);
  font-size: clamp(1.22rem, 2.5vw, 1.78rem);
  line-height: 1.25;
  text-shadow: 0 0 28px rgba(231,196,107,.14);
}

.subtitle {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 14px auto 0;
  color: var(--soft);
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  line-height: 1.62;
}

.heroGuide {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 14px auto 0;
  color: rgba(255, 240, 184, .84);
  font: 600 .95rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: .03em;
}

.ritualCard, .panel, .reading {
  position: relative;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(18, 14, 38, .50), rgba(6, 5, 12, .62)),
    radial-gradient(circle at 50% 0%, rgba(231,196,107,.10), transparent 28rem);
  border-radius: 34px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}

.ritualCard::before, .panel::before, .reading::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 232, 166, .13);
  border-radius: 25px;
  pointer-events: none;
}

.ritualCard {
  padding: clamp(22px, 4vw, 38px);
  overflow: hidden;
}

.ritualCard::after {
  content: "✦";
  position: absolute;
  right: 26px;
  bottom: 18px;
  color: rgba(231,196,107,.26);
  font-size: 3rem;
  line-height: 1;
}

.ritualHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.sectionKicker {
  margin: 0 0 6px;
  color: var(--gold);
  letter-spacing: .24em;
  text-transform: uppercase;
  font: 700 .72rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}

.ritualHeader h2 {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3.8rem);
  line-height: .95;
  font-weight: 500;
  letter-spacing: -.045em;
}

.miniSigil {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(231,196,107,.36);
  color: var(--gold2);
  font-size: 2rem;
  box-shadow: 0 0 38px rgba(124,92,255,.18), inset 0 0 22px rgba(231,196,107,.08);
  animation: slowSpin 18s linear infinite;
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.questionFrame {
  position: relative;
  border-radius: 26px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(231,196,107,.48), rgba(124,92,255,.24), rgba(231,196,107,.16));
}

.questionFrame::before {
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 40px;
  background: radial-gradient(circle at 50% 50%, rgba(124,92,255,.18), transparent 62%);
  opacity: .6;
  pointer-events: none;
}

textarea, input, select {
  width: 100%;
  border: 0;
  outline: none;
  color: var(--ink);
  background: rgba(4, 4, 11, .68);
  border-radius: 25px;
  font-size: 16px;
}

textarea {
  min-height: 172px;
  resize: vertical;
  padding: 24px 24px;
  line-height: 1.68;
  font-size: 1.13rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 24px 80px rgba(0,0,0,.24);
}

textarea::placeholder, input::placeholder { color: rgba(217,201,173,.58); }
select { appearance: none; cursor: pointer; }
textarea:focus, input:focus, select:focus { box-shadow: 0 0 0 3px rgba(231,196,107,.12), inset 0 0 0 1px rgba(231,196,107,.34); }
button:focus-visible { outline: none; }

.birthDetails {
  margin-top: 18px;
  color: var(--muted);
}

summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--gold2);
  font-size: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "◇";
  color: var(--gold);
  font-size: 1rem;
  transition: transform .25s ease;
}
details[open] summary::before { transform: rotate(45deg); }
summary small {
  color: var(--muted);
  font: 500 .8rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.birthGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px;
}

label {
  display: block;
  color: var(--gold);
  letter-spacing: .10em;
  text-transform: uppercase;
  font: 700 .76rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}

.birthGrid input, .birthGrid select {
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(231,196,107,.18);
}

.hint, .small, .panelText, .status, .meta {
  color: var(--muted);
  line-height: 1.55;
}
.hint, .small { font-size: .92rem; }

.voidPromise {
  margin: 18px 0 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px 11px;
  padding: 13px 14px;
  border: 1px solid rgba(231,196,107,.18);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(231,196,107,.055), rgba(124,92,255,.075), rgba(231,196,107,.055));
  color: var(--soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.voidPromise span {
  font: 800 .74rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold2);
}
.voidPromise i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(231,196,107,.58);
  box-shadow: 0 0 12px rgba(231,196,107,.44);
}
.collapseHint {
  margin: 12px 0 0;
  text-align: center;
  color: var(--gold2);
  font-size: .98rem;
  line-height: 1.45;
  opacity: .86;
}
.fieldMap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.fieldItem {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(231,196,107,.18);
  border-radius: 22px;
  padding: 17px 16px 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(231,196,107,.12), transparent 12rem),
    rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.fieldItem::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,232,166,.08);
  pointer-events: none;
}
.fieldTopline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 12px;
}
.fieldTopline span {
  color: var(--muted);
  font: 800 .68rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.fieldTopline b {
  color: var(--gold2);
  font-size: 1.05rem;
  font-weight: 600;
}
.fieldPolarity {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  color: var(--soft);
  font: 700 .72rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.fieldPolarity i {
  height: auto;
  background: none;
  color: rgba(231,196,107,.64);
  text-align: center;
  font-style: normal;
}
.fieldItem p {
  position: relative;
  margin: 0;
  color: #efe5d0;
  line-height: 1.58;
  font-size: .98rem;
}

.microGuide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0 16px;
}
.microGuide div {
  border: 1px solid rgba(231,196,107,.14);
  border-radius: 18px;
  padding: 12px 12px;
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  gap: 10px;
}
.microGuide b {
  color: var(--gold);
  font-size: 1rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.microGuide span {
  color: var(--soft);
  font: 700 .76rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: .06em;
  text-transform: none;
}

.ritualSteps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0 16px;
}
.ritualSteps div {
  border: 1px solid rgba(231,196,107,.16);
  border-radius: 18px;
  padding: 12px 12px;
  background: rgba(255,255,255,.025);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ritualSteps b {
  color: var(--gold);
  font-size: 1.16rem;
  font-weight: 500;
}
.ritualSteps span {
  color: var(--soft);
  font: 700 .72rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ritualSteps div.active {
  border-color: rgba(255, 232, 166, .38);
  background: rgba(255,255,255,.055);
  box-shadow: 0 0 24px rgba(231,196,107,.10);
}
.ritualSteps div.active b,
.ritualSteps div.active span {
  color: var(--gold2);
}

.voidButton {
  position: relative;
  margin-top: 2px;
  width: 100%;
  min-height: 74px;
  border: 1px solid rgba(255, 240, 184, .5);
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  color: #080609;
  background:
    radial-gradient(circle at 50% 20%, #fff7d0, transparent 54%),
    linear-gradient(90deg, #b78a35, #f3d887 24%, #fff0ba 50%, #d7af56 76%, #9a7129);
  box-shadow:
    0 20px 60px rgba(231,196,107,.22),
    0 0 0 8px rgba(231,196,107,.035),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.voidButton:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 24px 76px rgba(231,196,107,.28), 0 0 0 8px rgba(231,196,107,.045), inset 0 1px 0 rgba(255,255,255,.8); }
.voidButton:active { transform: translateY(1px) scale(.995); }
.voidButton:disabled { cursor: wait; filter: saturate(.6) brightness(.82); }
.buttonAura {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.55) 48%, transparent 60%);
  transform: translateX(-120%);
  animation: shimmer 3.8s ease-in-out infinite;
}
.buttonText {
  position: relative;
  z-index: 1;
  font: 900 1.03rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.status {
  text-align: center;
  margin: 16px 0 0;
  font-size: 1rem;
}
.status.measuring { color: var(--gold2); }
.status.error { color: var(--danger); }

.preDeck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 28px 0;
  perspective: 1200px;
}
.preDeckHint {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  text-align: center;
  color: rgba(255,240,184,.80);
  font-size: .98rem;
}

.cardBack {
  position: relative;
  min-height: 240px;
  border: 1px solid rgba(231,196,107,.26);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 46%, rgba(124,92,255,.28), transparent 32%),
    linear-gradient(145deg, rgba(20,16,42,.72), rgba(5,4,10,.76));
  box-shadow: 0 22px 70px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: float 6s ease-in-out infinite;
}
.cardBack:nth-child(2) { animation-delay: -1.5s; }
.cardBack:nth-child(3) { animation-delay: -3s; }
.cardBack::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 232, 166, .18);
  background:
    linear-gradient(45deg, transparent 48%, rgba(231,196,107,.10) 49% 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(124,92,255,.12) 49% 51%, transparent 52%);
}
.cardBack i {
  width: 84px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,240,184,.5);
  position: relative;
  box-shadow: 0 0 34px rgba(231,196,107,.18), inset 0 0 30px rgba(124,92,255,.18);
}
.cardBack i::before, .cardBack i::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(231,196,107,.34);
  transform: rotate(45deg);
}
.cardBack i::after { inset: 25px; border-radius: 50%; transform: none; }
.cardBack span {
  position: absolute;
  bottom: 22px;
  color: var(--gold);
  letter-spacing: .22em;
  text-transform: uppercase;
  font: 800 .76rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}

body.isMeasuring .voidOrb::before,
body.isMeasuring .voidOrb::after {
  animation: measureRing 1.35s ease-out infinite;
}
body.isMeasuring .preDeckHint {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  text-align: center;
  color: rgba(255,240,184,.80);
  font-size: .98rem;
}

.cardBack { filter: brightness(1.12); box-shadow: 0 26px 86px rgba(124,92,255,.16), 0 22px 70px rgba(0,0,0,.42); }
body.hasReading .preDeck { display: none; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0;
  perspective: 1600px;
}

.card {
  position: relative;
  border: 1px solid rgba(231,196,107,.30);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 0%, rgba(231,196,107,.13), transparent 18rem),
    linear-gradient(180deg, rgba(19,15,38,.92), rgba(7,6,13,.92));
  overflow: hidden;
  box-shadow: 0 22px 80px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
  animation: cardIn .72s cubic-bezier(.2,.8,.2,1) both;
}
.card:nth-child(2) { animation-delay: .12s; }
.card:nth-child(3) { animation-delay: .24s; }
.card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,232,166,.16);
  border-radius: 23px;
  pointer-events: none;
  z-index: 1;
}
.card::after {
  content: attr(data-roman);
  position: absolute;
  top: 20px;
  left: 22px;
  z-index: 2;
  color: rgba(255, 240, 184, .92);
  font-size: 1.18rem;
  text-shadow: 0 0 18px rgba(231,196,107,.4);
}
.imageWrap {
  position: relative;
  aspect-ratio: 3 / 4.55;
  display: grid;
  place-items: center;
  padding: 20px 18px 10px;
}
.imageWrap::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 34%, rgba(124,92,255,.18), transparent 60%);
  filter: blur(8px);
}
.card img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
  filter: drop-shadow(0 24px 26px rgba(0,0,0,.58));
  transform-origin: center center;
}
.card.reversed img { transform: rotate(180deg); }
.cardBody {
  padding: 4px 18px 22px;
  text-align: center;
}
.position, .orientation {
  margin: 0;
  color: var(--gold);
  letter-spacing: .18em;
  text-transform: uppercase;
  font: 800 .72rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.orientation { color: var(--muted); margin-top: 7px; letter-spacing: .12em; }
.card h3 {
  margin: 8px 0 0;
  font-size: clamp(1.18rem, 2vw, 1.56rem);
  line-height: 1.08;
  font-weight: 500;
}

.panel, .reading {
  padding: clamp(22px, 3vw, 34px);
  margin: 20px 0;
  animation: revealUp .65s ease both;
}
.panel h2, .reading h2, .reading h3 {
  margin: 0 0 12px;
  color: var(--gold2);
  font-weight: 500;
  letter-spacing: -.02em;
}
.panel h2 { font-size: clamp(1.45rem, 2vw, 2rem); }
.reading h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top: 8px; }
.reading h3 { font-size: clamp(1.35rem, 2.2vw, 1.88rem); margin-top: 26px; }
.reading p {
  color: #f1e8d6;
  line-height: 1.72;
  font-size: clamp(1rem, 1.45vw, 1.10rem);
}
.reading strong { color: var(--gold2); font-weight: 600; }
.reading em { color: var(--violet2); }
.reading h3:first-child, .reading h2:first-child { margin-top: 0; }

.entropySeal {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.sealIcon {
  flex: 0 0 auto;
  width: 58px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(231,196,107,.38);
  color: var(--gold2);
  box-shadow: 0 0 34px rgba(124,92,255,.18), inset 0 0 18px rgba(231,196,107,.08);
}
.sourcePill {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(231,196,107,.20);
  background: rgba(255,255,255,.035);
  color: var(--gold2);
  font: 700 .74rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.bars { display: grid; gap: 12px; margin-top: 14px; }
.barRow {
  display: grid;
  grid-template-columns: 142px 1fr 64px;
  gap: 12px;
  align-items: center;
  font-family: var(--font-ui);
  font-size: .9rem;
}
.barRow span { color: var(--soft); }
.barRow b { color: var(--gold2); font-weight: 700; text-align: right; }
.bar {
  height: 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--gold2));
  box-shadow: 0 0 18px rgba(231,196,107,.28);
}

.axisGrid { display: grid; gap: 16px; margin-top: 14px; }
.axisRow {
  display: grid;
  grid-template-columns: 92px 1fr 92px 64px;
  gap: 12px;
  align-items: center;
  font-family: var(--font-ui);
  font-size: .88rem;
}
.pole.right { text-align: left; color: var(--gold2); }
.pole.left { text-align: right; color: var(--soft); }
.axis {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(231,196,107,.26), rgba(124,92,255,.24), rgba(231,196,107,.26));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.axis i {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #fff0ba;
  box-shadow: 0 0 22px rgba(240, 220, 171, 0.78), 0 0 44px rgba(124,92,255,.36);
}
.axisRow b { color: var(--muted); font-weight: 700; text-align: right; }

.ok { color: var(--ok); }
.warning { color: var(--danger); }
.hidden { display: none !important; }

.meta {
  text-align: center;
  margin: 24px auto 0;
  max-width: 780px;
  padding: 18px 22px 2px;
  color: rgba(255, 240, 184, .88);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.18rem, 2.1vw, 1.55rem);
  line-height: 1.28;
  letter-spacing: .012em;
  text-shadow: 0 0 24px rgba(231,196,107,.12), 0 12px 48px rgba(0,0,0,.42);
}

.meta::before,
.meta::after {
  content: "✦";
  display: inline-block;
  color: rgba(231,196,107,.68);
  font-style: normal;
  font-size: .72em;
  margin: 0 .68em;
  transform: translateY(-.08em);
}


@media (max-width: 960px) {
  .cosmos {
    background-image: url('/assets/bg-mobile.png');
    background-position: center top;
  }
  .shell {
    width: min(100% - 20px, 1180px);
    padding-top: max(14px, env(safe-area-inset-top));
  }
  .hero {
    min-height: 430px;
    padding: 10px 0 30px;
  }
  .orbWrap { opacity: .24; }
  .claim br { display: none; }
  .ritualHeader { align-items: center; }
  .miniSigil { width: 48px; height: 48px; font-size: 1.55rem; }
  .birthGrid, .cards, .preDeck { grid-template-columns: 1fr; }
  .preDeck { display: none; }
  .ritualSteps { grid-template-columns: 1fr; }
  .microGuide { grid-template-columns: 1fr; }
  .fieldMap { grid-template-columns: 1fr; }
  .voidPromise { border-radius: 24px; }
  .barRow { grid-template-columns: 116px 1fr 54px; gap: 8px; }
  .axisRow { grid-template-columns: 78px 1fr 78px; }
  .axisRow b { grid-column: 2; text-align: center; }
  .entropySeal { align-items: flex-start; }
  .sealIcon { width: 46px; }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 14px, 1180px); }
  .hero { min-height: 380px; }
  h1 { letter-spacing: -.05em; }
  .claim {
    margin-top: 18px;
    font-size: clamp(1.2rem, 7vw, 1.65rem);
  }
  .subtitle {
    margin-top: 14px;
    font-size: 1rem;
    line-height: 1.55;
  }
  .heroGuide {
    font-size: .9rem;
    line-height: 1.5;
  }
  .ritualCard, .panel, .reading { border-radius: 26px; }
  .ritualCard::before, .panel::before, .reading::before { inset: 8px; border-radius: 19px; }
  .ritualHeader {
    align-items: flex-start;
    gap: 12px;
  }
  .ritualHeader h2 { font-size: clamp(1.7rem, 9vw, 2.5rem); }
  .miniSigil {
    width: 42px;
    height: 42px;
    font-size: 1.3rem;
  }
  textarea {
    min-height: 156px;
    padding: 18px 16px;
    line-height: 1.6;
  }
  .birthGrid { grid-template-columns: 1fr; }
  .voidButton { min-height: 64px; }
  .buttonText { letter-spacing: .14em; font-size: .95rem; }
  .status { font-size: .95rem; }
  .card { border-radius: 26px; }
  .imageWrap { padding: 18px 16px 8px; }
  .cardBody { padding: 4px 16px 18px; }
  .panel, .reading { padding: 20px 18px; }
  .entropySeal {
    flex-direction: column;
    gap: 12px;
  }
  .barRow { grid-template-columns: 1fr; }
  .barRow b { text-align: left; }
  .axisRow { grid-template-columns: 1fr; gap: 7px; }
  .pole.left, .pole.right, .axisRow b { text-align: left; }
}


/* Premium field map refinement */
.fieldTopline {
  align-items: center;
}
.fieldTopline span::after {
  content: ":";
}
.fieldTopline b {
  margin-left: auto;
}
.fieldPolarity {
  column-gap: 10px;
}
.fieldPolarity span {
  white-space: nowrap;
}
.fieldItem p {
  max-width: 34ch;
}
@media (max-width: 960px) {
  .fieldItem p { max-width: none; }
}

/* V2.8: Mappa del campo più oracolare, meno dashboard. */
.fieldOracle {
  max-width: 780px;
  margin-bottom: 0;
  line-height: 1.75;
}
.fieldOracle strong {
  color: var(--gold);
  font-family: var(--serif);
  letter-spacing: .02em;
}


/* V30 Minimal onboarding: meno istruzioni, più vuoto rituale. */
.status.hidden {
  display: none;
}

.status:not(.hidden) {
  display: block;
}

.ritualCard {
  background:
    linear-gradient(180deg, rgba(18, 14, 38, .42), rgba(6, 5, 12, .54)),
    radial-gradient(circle at 50% 0%, rgba(231,196,107,.085), transparent 28rem);
}

.questionFrame textarea,
textarea {
  background: rgba(4, 4, 11, .58);
}

.birthDetails {
  margin-top: 20px;
  margin-bottom: 22px;
}

.ritualSteps {
  margin: 14px 0 18px;
}

.ritualSteps.hidden {
  display: none !important;
}

.voidButton {
  margin-top: 10px;
}

.preDeck {
  margin-top: 24px;
}

.preDeckHint {
  opacity: .82;
}

.heroGuide {
  color: rgba(255, 240, 184, .88);
}

@media (min-width: 961px) {
  .ritualCard {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Gli elementi V29 restano nel CSS per compatibilità, ma non sono più usati nell'onboarding. */
.microGuide,
.voidPromise {
  display: none !important;
}


/* V31 Ritual Minimal: onboarding senza manuale d'istruzioni. */
.microGuide,
.voidPromise,
.collapseHint {
  display: none !important;
}

.hero .subtitle {
  display: none !important;
}

.claim {
  max-width: 840px;
}

.heroGuide {
  margin-top: 18px;
  color: rgba(255, 240, 184, .88);
  font: 600 .96rem ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: .03em;
}

.ritualCard {
  padding-top: clamp(24px, 4vw, 40px);
}

.birthDetails {
  margin-top: 20px;
  margin-bottom: 24px;
}

.ritualSteps.hidden {
  display: none !important;
}

.ritualSteps:not(.hidden) {
  display: grid;
}

.status.hidden {
  display: none !important;
}

/* Più sfondo, meno lastra opaca. */
.ritualCard,
.panel,
.reading {
  background:
    linear-gradient(180deg, rgba(18, 14, 38, .38), rgba(6, 5, 12, .50)),
    radial-gradient(circle at 50% 0%, rgba(231,196,107,.075), transparent 28rem);
  backdrop-filter: blur(10px);
}

textarea,
input,
select {
  background: rgba(4, 4, 11, .54);
}

.cardBack {
  background:
    radial-gradient(circle at 50% 46%, rgba(124,92,255,.23), transparent 32%),
    linear-gradient(145deg, rgba(20,16,42,.62), rgba(5,4,10,.70));
}


/* V33 refined layout */
.shell {
  width: min(1240px, calc(100% - 44px));
}
.hero {
  min-height: 420px;
  padding: 18px 0 22px;
}
.claim {
  max-width: 760px;
  margin-top: 20px;
  font-size: clamp(1.18rem, 2.4vw, 1.7rem);
}
.minimalLayout {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(20px, 3.4vw, 30px);
}
.ritualHeader {
  margin-bottom: 18px;
  align-items: center;
}
.ritualHeader h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1;
}
.miniSigil {
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
}
.questionFrame::before {
  inset: -18px;
  opacity: .42;
}
textarea {
  min-height: 146px;
  padding: 20px 20px;
  font-size: 1.08rem;
}
.birthDetails {
  margin-top: 14px;
  margin-bottom: 0;
}
summary {
  font-size: .95rem;
}
.voidButton {
  margin-top: 18px;
}
.status.hidden { display: none !important; }
.preDeck {
  max-width: 1080px;
  margin: 24px auto 0;
  gap: 16px;
}
.cardBack {
  min-height: 148px;
  border-radius: 24px;
}
.cardBack span {
  margin-bottom: 14px;
}
.preDeckHint { display: none !important; }
.cards {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.ritualCard::after {
  opacity: .7;
}
@media (max-width: 960px) {
  .shell { width: min(100%, calc(100% - 22px)); }
  .hero { min-height: 360px; padding-bottom: 16px; }
  .minimalLayout { padding: 18px; border-radius: 26px; }
  .preDeck { margin-top: 18px; }
}


/* V34 final compact tuning */
.hero {
  min-height: 330px;
  padding: 10px 0 8px;
}
.eyebrow {
  margin-bottom: 10px;
}
h1 {
  font-size: clamp(3.6rem, 8.6vw, 7.1rem);
}
.claim {
  margin-top: 16px;
  max-width: 680px;
  font-size: clamp(1.08rem, 2vw, 1.52rem);
  line-height: 1.2;
}
.minimalLayout {
  max-width: 940px;
  margin-top: 2px;
  padding: 16px 18px 18px;
  border-radius: 28px;
}
.ritualHeaderSolo {
  justify-content: flex-end;
  margin-bottom: 10px;
  min-height: 34px;
}
.ritualHeader h2,
.sectionKicker { display:none !important; }
.miniSigil {
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
}
.questionFrame {
  border-radius: 22px;
}
.questionFrame::before {
  inset: -12px;
  opacity: .34;
}
textarea {
  min-height: 118px;
  padding: 16px 16px;
  line-height: 1.54;
  font-size: 1rem;
  border-radius: 21px;
}
.birthDetails {
  margin-top: 10px;
}
summary {
  gap: 8px;
  font-size: .9rem;
}
summary small {
  font-size: .72rem;
}
.voidButton {
  min-height: 50px;
  margin-top: 14px;
  border-radius: 999px;
}
.buttonText {
  font-size: .83rem;
  letter-spacing: .38em;
}
.status {
  margin-top: 8px;
  font-size: .84rem;
}
.preDeck {
  max-width: 1000px;
  margin: 12px auto 0;
  gap: 12px;
}
.cardBack {
  min-height: 118px;
  border-radius: 20px;
}
.cardBack::before {
  inset: 10px;
  border-radius: 14px;
}
.cardBack i {
  width: 50px;
  height: 50px;
}
.cardBack i::before, .cardBack i::after { inset: 12px; }
.cardBack i::after { inset: 18px; }
.cardBack span {
  margin-bottom: 10px;
  font-size: .68rem;
  letter-spacing: .22em;
}
@media (max-width: 960px) {
  .hero { min-height: 290px; }
  .minimalLayout { padding: 14px 14px 16px; }
  .miniSigil { width: 42px; height: 42px; }
  textarea { min-height: 104px; }
  .voidButton { min-height: 48px; }
  .preDeck { gap: 10px; margin-top: 10px; }
  .cardBack { min-height: 108px; }
}


/* V35 privacy + compact */
.minimalLayout {
  padding-top: 12px;
}
.ritualHeader,
.ritualHeaderSolo,
.miniSigil { display: none !important; }
.questionFrame { margin-top: 0; }
.birthDetails { margin-top: 8px; }
.voidButton { margin-top: 10px; }
.preDeck { margin-top: 8px; }
@media (max-width: 960px) {
  .minimalLayout { padding-top: 12px; }
}

.sexSelector {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sexChoice {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 108px;
  padding: 14px 10px 12px;
  border: 1px solid rgba(231,196,107,.22);
  border-radius: 22px;
  cursor: pointer;
  color: var(--soft);
  background:
    radial-gradient(circle at 50% 8%, rgba(255,232,166,.08), transparent 5rem),
    linear-gradient(180deg, rgba(9, 14, 28, .72), rgba(2, 4, 12, .84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 38px rgba(0,0,0,.20);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
}

.sexChoice::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255,232,166,.055);
  pointer-events: none;
}

.sexChoice:hover,
.sexChoice:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,232,166,.58);
  box-shadow: 0 0 0 3px rgba(231,196,107,.10), 0 0 26px rgba(231,196,107,.10);
}

.sexChoice.selected {
  color: #1b1305;
  border-color: rgba(255,240,184,.80);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,247,208,.46), transparent 7rem),
    linear-gradient(180deg, #ffe9a3, #c99639);
  box-shadow: 0 0 22px rgba(231,196,107,.18), inset 0 1px 0 rgba(255,255,255,.50);
}

.sexIcon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--gold);
  filter: drop-shadow(0 0 10px rgba(231,196,107,.16));
}

.sexChoice.selected .sexIcon {
  color: #6c430d;
  filter: none;
}

.sexIcon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sexIconNeutral {
  width: 42px;
  height: 42px;
}

.sexLabel {
  color: rgba(255,248,231,.92);
  font-size: .92rem;
  line-height: 1.1;
  text-align: center;
  text-transform: none;
  letter-spacing: .01em;
}

.sexChoice.selected .sexLabel {
  color: #1b1305;
  font-weight: 700;
}

@media (max-width: 760px) {
  .sexSelector { grid-template-columns: 1fr; }
  .sexChoice { min-height: 86px; grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 12px; padding: 12px 14px; }
  .sexChoice::before { inset: 7px; }
  .sexLabel { text-align: left; font-size: .94rem; }
  .sexIcon, .sexIconNeutral { width: 38px; height: 38px; }
}


/* V3.15 Typography Polish: ritual display + precise modern UI */
h1,
.claim,
.ritualHeader h2,
.panel h2,
.reading h2,
.reading h3,
.cardTop h2,

.eyebrow,
.sectionKicker,
label,

body,
.reading,
.reading p,
.panelText,
.fieldItem p,
.collapseHint,
.hint,
.small,
.claim + .subtitle {
  font-family: var(--font-reading);
}

h1 {
  font-weight: 500;
  letter-spacing: -0.045em;
}

.claim {
  font-weight: 400;
  letter-spacing: -0.018em;
}

.ritualHeader h2,
.panel h2,
.reading h2 {
  font-weight: 500;
  letter-spacing: -0.025em;
}

.reading h3 {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.04;
  color: var(--gold2);
  margin-top: 1.45em;
  margin-bottom: .55em;
}

.reading p {
  font-size: clamp(1.02rem, 1.55vw, 1.13rem);
  line-height: 1.78;
  letter-spacing: -0.006em;
}

.reading strong {
  font-weight: 700;
  color: var(--gold2);
}

textarea {
  font-size: 1.05rem;
  line-height: 1.62;
  letter-spacing: -0.006em;
}


.buttonText,
.eyebrow,
.sectionKicker,
label,

.voidButton .buttonText {
  font-weight: 800;
}

@supports (font-variation-settings: normal) {
  body,
  .reading p,
  textarea,
  input,
  select,
  button { font-optical-sizing: auto; }
}


/* V3.19 — Claude visual fusion: soglia piena, lama prima, lettura a livelli. */
:root {
  --cream: #f5eddd;
  --cream-dim: rgba(245, 237, 221, .52);
  --gold-soft: rgba(233, 201, 138, .38);
}

body {
  background: #060512;
  color: var(--cream);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.cosmos {
  z-index: -2;
  background-image: url('/assets/bg-desktop.png');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
.cosmos::before {
  background:
    radial-gradient(circle at 50% 9%, rgba(255,245,210,.10), transparent 13rem),
    radial-gradient(circle at 50% 25%, rgba(92,66,190,.12), transparent 33rem),
    linear-gradient(180deg, rgba(6,5,18,.20) 0%, rgba(6,5,18,0) 26%, rgba(6,5,18,.58) 78%, rgba(6,5,18,.94) 100%);
}
.cosmos::after {
  opacity: .16;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.42) 60%, rgba(0,0,0,.18));
}

.wordmark {
  position: absolute;
  top: max(22px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  font: 600 .66rem/1 var(--font-ui);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--cream-dim);
  opacity: .82;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

body.hasReading .wordmark {
  opacity: 0;
  transform: translateY(-10px);
}

.voidShell {
  width: min(100%, 1180px);
  padding: 0 24px max(52px, env(safe-area-inset-bottom));
}

.voidChamber {
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  text-align: center;
  padding: 90px 0 max(52px, env(safe-area-inset-bottom));
}

.entryCard {
  width: min(540px, 100%);
  margin-bottom: clamp(34px, 6vh, 74px);
  animation: revealUp 1s ease both;
}

.promptTitle {
  margin: 0;
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 6.4vw, 3.95rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  text-shadow: 0 2px 46px rgba(0,0,0,.64), 0 0 36px rgba(233,201,138,.10);
}

.lineQuestion {
  margin-top: 34px;
  padding: 0;
  border-radius: 0;
  background: none;
}
.lineQuestion::before { display: none; }

#question {
  width: 100%;
  min-height: 3.2em;
  max-height: 180px;
  resize: none;
  overflow: hidden;
  padding: 2px 4px 14px;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cream);
  caret-color: var(--gold);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 4.2vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: .002em;
}
#question::placeholder {
  color: var(--cream-dim);
  opacity: .72;
  font-style: italic;
}
#question:focus { box-shadow: none; }

.questionUnderline {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
  opacity: .50;
  transition: opacity .25s ease, filter .25s ease;
}
.lineQuestion:focus-within .questionUnderline {
  opacity: .98;
  filter: drop-shadow(0 0 8px rgba(233,201,138,.18));
}

.summonButton {
  width: auto;
  min-width: min(340px, 100%);
  min-height: 58px;
  margin-top: 34px;
  padding: 0 44px;
  border-radius: 999px;
  color: #090711;
  border: none;
  background: linear-gradient(180deg,#f6e2af,#e3c079 48%,#c79a44);
  box-shadow: 0 0 46px rgba(233,201,138,.28), inset 0 1px 0 rgba(255,255,255,.52);
}
.summonButton:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 0 62px rgba(233,201,138,.36), inset 0 1px 0 rgba(255,255,255,.58);
}
.summonButton .buttonText {
  font: 650 .78rem/1 var(--font-ui);
  letter-spacing: .30em;
}

.seedArea { margin-top: 28px; }
.seedHelp,
.again {
  border: 0;
  background: transparent;
  color: var(--cream-dim);
  cursor: pointer;
  font: 600 .82rem/1 var(--font-ui);
  letter-spacing: .045em;
  text-transform: lowercase;
  transition: color .25s ease, opacity .25s ease;
}
.seedHelp:hover,
.seedHelp:focus-visible,
.again:hover,
.again:focus-visible { color: var(--gold); outline: none; }

.seedPanel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .42s ease;
  margin-top: 12px;
}
.seedPanel.open { max-height: 360px; }
.seedChoice {
  display: block;
  width: 100%;
  padding: 12px 8px;
  border: 0;
  border-top: 1px solid rgba(233,201,138,.12);
  background: transparent;
  color: var(--cream-dim);
  font: 500 .92rem/1.25 var(--font-ui);
  cursor: pointer;
  transition: color .2s ease;
}
.seedChoice:hover,
.seedChoice:focus-visible { color: var(--gold); outline: none; }

.ritualOptions {
  width: min(560px, 100%);
  margin: 22px auto 0;
  text-align: left;
  opacity: .78;
}
.ritualOptions > summary {
  justify-content: center;
  color: var(--cream-dim);
  font-size: .82rem;
}
.ritualOptions[open] { opacity: 1; }
.ritualOptions .compactBirthGrid { margin-top: 14px; }

.ritualSteps {
  max-width: 620px;
  margin: 20px auto 0;
  opacity: .82;
}
.ritualSteps div {
  background: rgba(8, 6, 20, .32);
  backdrop-filter: blur(6px);
}
.status {
  color: var(--cream-dim);
  font-size: .84rem;
  letter-spacing: .06em;
  margin-top: 16px;
}
.status.measuring { color: rgba(255,240,184,.76); }

#preDeck { display: none !important; }
body.hasReading .voidChamber {
  min-height: auto;
  padding-bottom: 20px;
}
body.hasReading .entryCard {
  display: none;
}

.cards {
  display: block;
  width: min(640px, 100%);
  margin: 0 auto 0;
  padding-top: max(72px, env(safe-area-inset-top));
  text-align: center;
  animation: revealUp .75s ease both;
}
.ritualQuestion {
  max-width: 64ch;
  margin: 0 auto 36px;
  color: var(--cream-dim);
  font: 500 .78rem/1.55 var(--font-ui);
  letter-spacing: .018em;
}
.voidCardDeck {
  display: flex;
  gap: clamp(10px, 2.8vw, 22px);
  justify-content: center;
  align-items: flex-start;
  margin-bottom: clamp(42px, 7vh, 60px);
  perspective: 1700px;
}
.voidSlot {
  position: relative;
  width: clamp(92px, 24vw, 140px);
  aspect-ratio: 5 / 8.35;
  border: 1px solid rgba(233,201,138,.34);
  border-radius: 9px;
  background: radial-gradient(circle at 50% 42%, #241a4d, #0a0818 72%);
  box-shadow: 0 18px 52px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.035);
  display: grid;
  place-items: center;
  padding: 13px 8px;
  opacity: 0;
  transform: translateY(28px) rotateY(7deg);
  animation: voidCardIn .72s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay: calc(var(--deal) * 120ms);
}
@keyframes voidCardIn { to { opacity: 1; transform: translateY(0) rotateY(0deg); } }
.voidSlot::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(233,201,138,.10);
  border-radius: 6px;
  pointer-events: none;
}
.voidSlot::after {
  content: '';
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(233,201,138,.26);
  box-shadow: 0 0 18px rgba(233,201,138,.18);
  opacity: .18;
}
.voidCardName {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px 12px 34px;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(.82rem, 2.3vw, 1.03rem);
  line-height: 1.05;
  text-shadow: 0 0 18px rgba(233,201,138,.12);
}
.voidCardOrient {
  position: absolute;
  bottom: 13px;
  left: 0;
  right: 0;
  color: rgba(245,237,221,.46);
  font: 650 .50rem/1 var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.voidPosition {
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  color: var(--gold);
  opacity: .88;
  font: 750 .54rem/1 var(--font-ui);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.reading {
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 0 0 8vh;
  background: transparent !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center;
  animation: revealUp .75s .1s ease both;
}
.reading::before,
.reading::after { display: none !important; }

.lamaBlock {
  max-width: 18.5ch;
  margin: 0 auto;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 5.4vw, 3.25rem);
  line-height: 1.18;
  letter-spacing: -.008em;
  text-shadow: 0 2px 54px rgba(0,0,0,.74), 0 0 46px rgba(233,201,138,.12);
}

.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin-top: 48px;
  opacity: 1;
  transform: none;
}
.a {
  border: 1px solid rgba(233,201,138,.34);
  border-radius: 999px;
  padding: 13px 24px;
  background: rgba(20,15,42,.40);
  color: var(--cream);
  backdrop-filter: blur(6px);
  font: 650 .70rem/1 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.a:hover,
.a:focus-visible {
  border-color: var(--gold);
  background: rgba(36,26,77,.50);
  outline: none;
}
.a-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--cream-dim);
  padding-left: 6px;
  padding-right: 6px;
  backdrop-filter: none;
}
.a-ghost:hover,
.a-ghost:focus-visible {
  color: var(--gold);
  background: transparent;
}
.again {
  display: block;
  margin: 42px auto 0;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.expand {
  max-height: none;
  overflow: visible;
  margin-top: 28px;
}
.expand-in {
  max-width: 52ch;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(233,201,138,.14);
  text-align: left;
}
.expand-label {
  margin: 0 0 14px;
  color: var(--gold);
  opacity: .88;
  font: 700 .62rem/1 var(--font-ui);
  letter-spacing: .20em;
  text-transform: uppercase;
}
.nude {
  margin: 0;
  color: var(--cream-dim);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.12rem, 2.2vw, 1.34rem);
  line-height: 1.6;
}
.readingDeep p {
  color: rgba(245,237,221,.62);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2vw, 1.24rem);
  line-height: 1.66;
  letter-spacing: .002em;
  margin: 0 0 1em;
}
.readingDeep strong {
  color: var(--cream);
  font-weight: 500;
}
.readingDeep em {
  color: var(--cream);
  font-style: italic;
}
.deepSection { margin: 0 0 25px; }
.deepSection:last-child { margin-bottom: 0; }
.premiumReading {
  position: relative;
}
.premiumKicker {
  margin: 0 0 28px;
  color: rgba(233,201,138,.50);
  text-align: center;
  font: 750 .58rem/1 var(--font-ui);
  letter-spacing: .28em;
  text-transform: uppercase;
}
.sectionSotto p:first-of-type {
  color: rgba(245,237,221,.78);
  font-size: clamp(1.18rem, 2.1vw, 1.42rem);
  line-height: 1.58;
}
.lensStack {
  display: grid;
  gap: 20px;
}
.lensItem {
  padding: 18px 0 4px;
  border-top: 1px solid rgba(233,201,138,.12);
}
.lensItem:first-child { border-top-color: rgba(233,201,138,.18); }
.lensName {
  margin: 0 0 9px;
  color: rgba(233,201,138,.72);
  font: 800 .56rem/1 var(--font-ui);
  letter-spacing: .23em;
  text-transform: uppercase;
}
.riteBox {
  padding: 22px 22px 20px;
  border: 1px solid rgba(233,201,138,.16);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(22,17,44,.38), rgba(9,7,18,.18));
  box-shadow: 0 18px 60px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04);
}
.riteFamily {
  margin: 0 0 12px;
  color: rgba(233,201,138,.62);
  font: 750 .56rem/1 var(--font-ui);
  letter-spacing: .20em;
  text-transform: uppercase;
}
.thresholdLine {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(233,201,138,.12);
  color: rgba(245,237,221,.70);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.03rem, 1.9vw, 1.18rem);
  line-height: 1.55;
}
.thresholdLine span {
  display: block;
  margin: 0 0 7px;
  color: rgba(233,201,138,.56);
  font: 750 .54rem/1 var(--font-ui);
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sigilloBlock {
  color: var(--cream);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.44rem, 3.2vw, 2.18rem);
  line-height: 1.30;
  letter-spacing: -.006em;
  text-shadow: 0 0 38px rgba(233,201,138,.10);
}
.readingDeep h2,
.readingDeep h3 { display: none; }

.panel { display: none !important; }
.meta {
  max-width: 640px;
  margin: 26px auto 0;
  padding: 22px 0 0;
  color: rgba(245,237,221,.42);
  font: 500 .78rem/1.55 var(--font-ui);
  letter-spacing: .035em;
  text-align: center;
}
.meta::before,
.meta::after { display: none; }

@media (max-width: 780px) {
  .cosmos {
    background-image: url('/assets/bg-mobile.png');
    background-position: center top;
  }
  .voidShell { padding-left: 18px; padding-right: 18px; }
  .voidChamber { justify-content: flex-end; padding-top: 78px; padding-bottom: max(38px, env(safe-area-inset-bottom)); }
  .entryCard { margin-bottom: 3.5vh; }
  .promptTitle { font-size: clamp(2.25rem, 11.5vw, 3.05rem); }
  .lineQuestion { margin-top: 28px; }
  .summonButton { min-width: min(316px, 100%); min-height: 56px; padding: 0 28px; }
  .summonButton .buttonText { letter-spacing: .25em; }
  .seedPanel.open { max-height: 460px; }
  .cards { padding-top: 72px; }
  .ritualQuestion { margin-bottom: 30px; }
  .voidCardDeck { gap: 12px; margin-bottom: 50px; }
  .voidSlot { width: min(29vw, 124px); }
  .voidCardName { font-size: clamp(.72rem, 3.2vw, .92rem); padding: 28px 8px 32px; }
  .voidCardOrient { display: block; font-size: .44rem; bottom: 10px; letter-spacing: .12em; }
  .voidPosition { font-size: .45rem; letter-spacing: .18em; top: 10px; }
  .lamaBlock { font-size: clamp(2rem, 10vw, 2.8rem); }
  .acts { margin-top: 38px; gap: 10px 14px; }
  .a { font-size: .64rem; padding: 12px 18px; }
  .a-ghost { padding-left: 4px; padding-right: 4px; }
  .expand-in { max-width: 100%; }
}

@media (max-width: 420px) {
  .voidShell { padding-left: 14px; padding-right: 14px; }
  .wordmark { top: 18px; font-size: .58rem; }
  .voidCardDeck { gap: 8px; }
  .voidSlot { width: 30vw; }
}


/* V4.16: testo lineare per copia/accessibilità senza rompere le carte visive. */
.copyOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
}


/* V4.17 — leggibilità, carte vere, meno ritualizzazione UI */
:root {
  --cream: #fff8ea;
  --cream-dim: rgba(255, 248, 234, .76);
  --cream-body: rgba(255, 248, 234, .88);
  --panel-readable: rgba(4, 5, 14, .66);
  --panel-readable-strong: rgba(3, 4, 12, .78);
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.cosmos::before {
  background:
    radial-gradient(circle at 50% 13%, rgba(255, 236, 186, .08), transparent 18rem),
    radial-gradient(circle at 50% 26%, rgba(74, 54, 165, .18), transparent 34rem),
    linear-gradient(180deg, rgba(2, 2, 7, .34) 0%, rgba(3, 3, 10, .46) 32%, rgba(3,3,9,.70) 66%, rgba(2,2,6,.92) 100%);
}
body.hasReading .cosmos::before {
  background:
    radial-gradient(circle at 50% 9%, rgba(255, 236, 186, .07), transparent 18rem),
    radial-gradient(circle at 50% 28%, rgba(72, 52, 160, .14), transparent 32rem),
    linear-gradient(180deg, rgba(2,2,7,.52) 0%, rgba(2,2,8,.62) 25%, rgba(2,2,8,.80) 58%, rgba(1,1,5,.96) 100%);
}
.cosmos::after {
  opacity: .10;
}

/* Le opzioni rituali sono rimosse dall'HTML; questa regola evita residui se cache/vecchi template le mostrano. */
.ritualOptions { display: none !important; }

.cards {
  width: min(860px, 100%);
  padding-top: max(72px, env(safe-area-inset-top));
}
.ritualQuestion {
  color: rgba(255, 248, 234, .70);
  font-size: .86rem;
  line-height: 1.55;
  text-shadow: 0 2px 24px rgba(0,0,0,.78);
}
.voidCardDeck {
  gap: clamp(14px, 3vw, 30px);
  margin-bottom: clamp(46px, 7vh, 72px);
}
.voidSlot {
  width: clamp(146px, 18vw, 210px);
  aspect-ratio: 5 / 8.25;
  padding: 0;
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid rgba(255, 225, 151, .48);
  background: rgba(6,5,16,.82);
  box-shadow:
    0 24px 76px rgba(0,0,0,.55),
    0 0 34px rgba(233,201,138,.10),
    inset 0 0 0 1px rgba(255,255,255,.045);
  display: block;
}
.voidSlot::before {
  inset: 7px;
  border-color: rgba(255, 232, 166, .18);
  border-radius: 10px;
  z-index: 4;
}
.voidSlot::after { display: none; }
.voidCardArt {
  position: absolute;
  inset: 9px 9px 52px;
  width: calc(100% - 18px);
  height: calc(100% - 61px);
  object-fit: cover;
  object-position: center;
  border-radius: 9px 9px 5px 5px;
  filter: saturate(1.08) contrast(1.08) brightness(.94);
  transform-origin: 50% 50%;
  transition: filter .25s ease, transform .25s ease;
  z-index: 1;
}
.voidSlot.reversed .voidCardArt {
  transform: rotate(180deg);
}
.voidSlot:hover .voidCardArt {
  filter: saturate(1.16) contrast(1.12) brightness(1.02);
}
.voidCardShade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,3,10,.44) 0%, transparent 23%, transparent 61%, rgba(3,3,10,.84) 100%),
    radial-gradient(circle at 50% 44%, transparent 30%, rgba(0,0,0,.18) 100%);
}
.voidPosition {
  top: 13px;
  z-index: 5;
  color: rgba(255, 226, 151, .96);
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
  font-size: .58rem;
}
.voidCardCaption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  z-index: 5;
  min-height: 42px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px 7px 7px;
  border-radius: 8px;
  background: rgba(3, 3, 12, .72);
  border: 1px solid rgba(255, 232, 166, .14);
  backdrop-filter: blur(4px);
}
.voidCardName {
  position: static;
  display: block;
  padding: 0;
  color: #fff8ea;
  font-size: clamp(.90rem, 1.45vw, 1.08rem);
  line-height: 1.05;
  text-shadow: 0 2px 16px rgba(0,0,0,.85);
}
.voidCardOrient {
  position: static;
  color: rgba(255, 248, 234, .62);
  font-size: .50rem;
  letter-spacing: .16em;
}

.reading {
  width: min(820px, 100%);
}
.lamaBlock {
  max-width: 20.5ch;
  color: #fff9ed;
  text-shadow:
    0 3px 30px rgba(0,0,0,.92),
    0 0 48px rgba(233,201,138,.16);
}
.expand-in {
  max-width: 64ch;
  padding: 30px clamp(18px, 4vw, 42px) 34px;
  border: 1px solid rgba(233,201,138,.16);
  border-radius: 28px;
  background:
    linear-gradient(180deg, var(--panel-readable-strong), var(--panel-readable)),
    radial-gradient(circle at 50% 0%, rgba(233,201,138,.06), transparent 22rem);
  box-shadow: 0 28px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(8px);
}
#nudeBox .expand-in {
  max-width: 58ch;
  text-align: center;
}
.nude {
  color: rgba(255, 248, 234, .88);
  text-shadow: 0 2px 24px rgba(0,0,0,.72);
}
.readingDeep p,
.sectionSotto p:first-of-type,
.thresholdLine {
  color: var(--cream-body);
  font-family: var(--font-reading);
  font-size: clamp(1.02rem, 1.25vw, 1.12rem);
  line-height: 1.82;
  letter-spacing: .004em;
  text-shadow: 0 1px 18px rgba(0,0,0,.52);
}
.sectionSotto p:first-of-type {
  font-size: clamp(1.04rem, 1.35vw, 1.16rem);
}
.readingDeep strong {
  color: #fff8ea;
  font-weight: 700;
}
.expand-label,
.lensName,
.thresholdLine span,
.premiumKicker {
  color: rgba(255, 220, 128, .92);
  text-shadow: 0 1px 14px rgba(0,0,0,.78);
}
.deepSection {
  margin-bottom: 32px;
}
.lensItem {
  padding: 20px 0 6px;
  border-top-color: rgba(233,201,138,.18);
}
.riteBox {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.riteFamily { display: none !important; }
.sigilloBlock {
  color: #fff8ea;
  text-shadow: 0 2px 34px rgba(0,0,0,.70), 0 0 30px rgba(233,201,138,.10);
}
.meta {
  color: rgba(255, 248, 234, .56);
}

@media (max-width: 780px) {
  .cards { width: min(100%, 560px); }
  .voidCardDeck { gap: 10px; }
  .voidSlot { width: min(31vw, 148px); border-radius: 12px; }
  .voidCardArt { inset: 7px 7px 46px; width: calc(100% - 14px); height: calc(100% - 53px); }
  .voidCardCaption { left: 7px; right: 7px; bottom: 7px; min-height: 36px; padding: 6px 5px; }
  .voidPosition { top: 10px; font-size: .46rem; letter-spacing: .18em; }
  .voidCardName { font-size: clamp(.72rem, 3vw, .90rem); }
  .voidCardOrient { font-size: .42rem; letter-spacing: .12em; }
  .expand-in {
    max-width: 100%;
    padding: 24px 18px 28px;
    border-radius: 22px;
  }
  .readingDeep p,
  .sectionSotto p:first-of-type,
  .thresholdLine {
    font-size: 1rem;
    line-height: 1.78;
  }
}

@media (max-width: 420px) {
  .voidCardDeck { gap: 7px; }
  .voidSlot { width: 30.5vw; }
  .voidCardName { font-size: .70rem; }
}

/* V4.17.1 — card art reliability + readable single label */
.voidSlot {
  width: clamp(168px, 19vw, 232px);
  aspect-ratio: 5 / 8.35;
  background:
    radial-gradient(circle at 50% 30%, rgba(71, 50, 150, .42), transparent 58%),
    rgba(5, 4, 13, .92);
}
.voidCardArt {
  inset: 32px 9px 56px;
  width: calc(100% - 18px);
  height: calc(100% - 88px);
  object-fit: contain;
  object-position: center;
  background: rgba(2, 2, 8, .88);
  border-radius: 8px;
  filter: saturate(1.14) contrast(1.10) brightness(1.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.voidCardShade {
  background:
    linear-gradient(180deg, rgba(3,3,10,.52) 0%, rgba(3,3,10,.10) 14%, transparent 36%, transparent 64%, rgba(3,3,10,.70) 100%);
}
.voidPosition,
.voidCardCaption {
  user-select: none;
}
.voidCardCaption {
  background: rgba(3, 3, 12, .82);
  border-color: rgba(255, 232, 166, .20);
}
.voidCardName {
  font-size: clamp(.84rem, 1.25vw, 1.02rem);
}
.voidSlot.missingArt .voidCardShade {
  background: radial-gradient(circle at 50% 42%, rgba(71, 50, 150, .44), transparent 54%);
}
.voidSlot.missingArt::after {
  display: block;
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(233,201,138,.30);
  box-shadow: 0 0 28px rgba(233,201,138,.20);
  opacity: .35;
}

@media (max-width: 780px) {
  .voidSlot { width: min(31vw, 150px); }
  .voidCardArt {
    inset: 27px 7px 48px;
    width: calc(100% - 14px);
    height: calc(100% - 75px);
  }
}

@media (max-width: 420px) {
  .voidSlot { width: 30.5vw; }
  .voidCardArt {
    inset: 24px 6px 45px;
    width: calc(100% - 12px);
    height: calc(100% - 69px);
  }
  .voidCardCaption { min-height: 34px; }
}

/* V4.20 — definitive mobile reading layout */
#question::placeholder {
  color: rgba(255, 241, 209, .66) !important;
  opacity: 1 !important;
  font-style: normal !important;
  letter-spacing: .01em;
}

.bladeShell {
  position: relative;
  width: min(100%, 760px);
  margin: 8px auto 38px;
  padding: clamp(26px, 4vw, 44px) clamp(12px, 3vw, 30px) 4px;
  text-align: center;
}
.bladeShell::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(420px, 72vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(233,201,138,.68), transparent);
  box-shadow: 0 0 22px rgba(233,201,138,.20);
}
.bladeShell::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  width: min(520px, 82vw);
  aspect-ratio: 5 / 1;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(233,201,138,.08), transparent 68%);
  pointer-events: none;
}
.bladeRune {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 225, 154, .88);
  border: 1px solid rgba(233,201,138,.32);
  background: radial-gradient(circle at 50% 35%, rgba(233,201,138,.16), rgba(16,12,34,.16) 62%, rgba(3,3,10,.02));
  box-shadow: 0 0 30px rgba(233,201,138,.14), inset 0 0 20px rgba(124,92,255,.12);
  font-size: 1rem;
}
.bladeShell .lamaBlock {
  position: relative;
  z-index: 1;
}
.bladeShell .lamaBlock::before,
.bladeShell .lamaBlock::after {
  content: "";
  display: block;
  width: 68px;
  height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, rgba(233,201,138,.38), transparent);
}
.bladeShell .lamaBlock::before {
  margin: 0 auto 18px;
}

.reading .expand {
  margin-top: 30px;
}
.reading .expand-in.voidReadingDeep,
.reading .expand-in.readingDeep {
  max-width: 760px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.voidReadingSection {
  position: relative;
  margin: 0 auto 18px;
  padding: clamp(22px, 3.2vw, 34px);
  border: 1px solid rgba(233,201,138,.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 14% 0%, rgba(233,201,138,.075), transparent 22rem),
    radial-gradient(circle at 92% 15%, rgba(124,92,255,.08), transparent 20rem),
    linear-gradient(180deg, rgba(12,10,25,.74), rgba(4,4,12,.50));
  box-shadow: 0 26px 88px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.045);
  overflow: hidden;
}
.voidReadingSection::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(233,201,138,.07);
  border-radius: 22px;
  pointer-events: none;
}
.voidReadingSection::after {
  content: "";
  position: absolute;
  right: -44px;
  top: -46px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  border: 1px solid rgba(233,201,138,.08);
  box-shadow: inset 0 0 36px rgba(233,201,138,.035);
  pointer-events: none;
}
.voidSectionHeader {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 17px;
}
.voidGlyph {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 226, 158, .92);
  border: 1px solid rgba(233,201,138,.28);
  background: radial-gradient(circle at 50% 40%, rgba(233,201,138,.13), rgba(9,7,19,.15));
  box-shadow: 0 0 20px rgba(233,201,138,.09);
  font-family: var(--font-display);
  font-size: 1rem;
}
.voidSectionHeader .expand-label {
  margin: 0;
  color: rgba(255, 223, 151, .95);
  letter-spacing: .24em;
}
.voidSectionBody {
  position: relative;
  z-index: 1;
}
.voidReadingSection p,
.voidReadingSection .configBody p,
.voidReadingSection .attoText p {
  color: rgba(255,248,234,.84) !important;
  font-family: var(--font-reading) !important;
  font-size: clamp(1.02rem, 1.18vw, 1.12rem) !important;
  line-height: 1.78 !important;
  margin: 0 0 1.02em !important;
  letter-spacing: .002em;
  text-shadow: 0 1px 18px rgba(0,0,0,.40);
}
.voidReadingSection p:last-child,
.voidReadingSection .configBody p:last-child,
.voidReadingSection .attoText p:last-child {
  margin-bottom: 0 !important;
}

.configTriptych {
  display: grid;
  gap: 13px;
}
.configCard {
  position: relative;
  padding: 18px 18px 17px;
  border-radius: 22px;
  border: 1px solid rgba(233,201,138,.13);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  overflow: hidden;
}
.configCard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(233,201,138,.18), rgba(233,201,138,.48), rgba(233,201,138,.10));
}
.configTop {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 11px;
}
.configTop > span {
  color: rgba(233,201,138,.88);
  font: 700 1.18rem/1 var(--font-display);
  text-align: center;
}
.configTop b {
  display: block;
  color: rgba(255, 232, 166, .92);
  font: 800 .58rem/1 var(--font-ui);
  letter-spacing: .20em;
  text-transform: uppercase;
}
.configTop em {
  display: block;
  margin-top: 5px;
  color: rgba(255,248,234,.88);
  font-family: var(--font-reading);
  font-style: normal;
  font-size: 1rem;
  line-height: 1.25;
}

.section-ombra {
  background:
    radial-gradient(circle at 16% 0%, rgba(124,92,255,.10), transparent 22rem),
    linear-gradient(180deg, rgba(10,8,24,.78), rgba(3,3,11,.54));
}
.section-ombra .voidGlyph {
  color: rgba(213,199,255,.90);
  border-color: rgba(176,155,255,.24);
}
.section-risposta {
  border-color: rgba(233,201,138,.23);
  background:
    radial-gradient(circle at 50% 0%, rgba(233,201,138,.105), transparent 26rem),
    linear-gradient(180deg, rgba(17,13,31,.78), rgba(5,4,13,.55));
}

.section-atto {
  border-color: rgba(233,201,138,.20);
  background:
    radial-gradient(circle at 6% 4%, rgba(233,201,138,.09), transparent 20rem),
    linear-gradient(180deg, rgba(11,10,23,.82), rgba(4,4,12,.56));
}
.attoOracle {
  display: grid;
  gap: 1px;
  border: 1px solid rgba(233,201,138,.10);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(233,201,138,.06);
}
.attoRow {
  display: grid;
  grid-template-columns: minmax(145px, 190px) 1fr;
  gap: 18px;
  padding: 17px 18px;
  background: rgba(4,4,12,.54);
}
.attoTerm {
  color: rgba(255, 224, 154, .92);
  font: 800 .58rem/1.35 var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.attoTerm span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,248,234,.34);
  font: 700 .70rem/1 var(--font-display);
  letter-spacing: .02em;
}
.attoText p {
  color: rgba(255,248,234,.80) !important;
}

.section-sigillo {
  padding-top: clamp(26px, 4vw, 42px);
  padding-bottom: clamp(28px, 4vw, 46px);
  text-align: center;
  background:
    radial-gradient(circle at 50% 16%, rgba(233,201,138,.13), transparent 20rem),
    linear-gradient(180deg, rgba(12,10,24,.72), rgba(3,3,10,.62));
}
.section-sigillo .voidSectionHeader {
  justify-content: center;
  margin-bottom: 22px;
}
.section-sigillo .voidSectionHeader .expand-label {
  display: block;
  color: rgba(255, 226, 158, .82);
  letter-spacing: .28em;
}
.section-sigillo .voidGlyph {
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
}
.section-sigillo .sigilloBlock {
  max-width: 24ch;
  margin: 0 auto;
  color: #fff8ea;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.5vw, 2.45rem);
  line-height: 1.24;
  letter-spacing: -.006em;
  text-shadow: 0 2px 34px rgba(0,0,0,.78), 0 0 42px rgba(233,201,138,.13);
}

/* V4.21.1 — Domande-seme: ritorno a una lista rituale leggibile.
   Niente colonne strette: le domande devono sembrare inviti, non tessere compresse. */
.seedPanel.open {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: min(760px, calc(100vw - 40px));
  max-height: 560px;
  margin: 18px auto 0;
  padding: 2px 0 4px;
}
.seedChoice {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  width: 100%;
  min-height: 0;
  padding: 14px 18px 14px 14px;
  border-radius: 20px;
  border: 1px solid rgba(233,201,138,.16);
  background:
    radial-gradient(circle at 18px 50%, rgba(233,201,138,.18), transparent 34px),
    linear-gradient(180deg, rgba(18,14,38,.48), rgba(5,4,12,.34));
  color: rgba(255,248,234,.88);
  font: 560 clamp(.94rem, 1.3vw, 1.02rem)/1.38 var(--font-reading);
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 36px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.seedChoice::before {
  content: "✦";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: rgba(233,201,138,.76);
  font: 700 .78rem/1 var(--font-ui);
  text-shadow: 0 0 16px rgba(233,201,138,.32);
}
.seedChoice:hover,
.seedChoice:focus-visible {
  transform: translateY(-1px);
  color: #fff8ea;
  border-color: rgba(233,201,138,.40);
  background:
    radial-gradient(circle at 18px 50%, rgba(233,201,138,.27), transparent 38px),
    linear-gradient(180deg, rgba(35,27,67,.54), rgba(8,7,18,.42));
  box-shadow: 0 18px 44px rgba(0,0,0,.22), 0 0 28px rgba(233,201,138,.055), inset 0 1px 0 rgba(255,255,255,.05);
  outline: none;
}

@media (max-width: 900px) {
  .seedPanel.open {
    width: min(640px, calc(100vw - 28px));
    max-height: 620px;
    gap: 8px;
    margin-top: 16px;
  }
  .seedChoice {
    grid-template-columns: 26px 1fr;
    padding: 13px 15px 13px 12px;
    border-radius: 18px;
    font-size: .96rem;
    line-height: 1.34;
    text-align: left;
  }
}

@media (max-width: 520px) {
  .seedPanel.open { width: min(100%, calc(100vw - 24px)); }
  .seedChoice {
    grid-template-columns: 24px 1fr;
    padding: 12px 13px 12px 11px;
    border-radius: 16px;
    font-size: .92rem;
  }
  .seedChoice::before { width: 20px; height: 20px; font-size: .7rem; }
}

@media (max-width: 780px) {
  .reading { width: 100%; padding-left: 0; padding-right: 0; }
  .bladeShell { margin-top: 0; margin-bottom: 30px; padding-top: 24px; }
  .bladeRune { width: 36px; height: 36px; margin-bottom: 14px; }
  .bladeShell .lamaBlock { max-width: 19ch; font-size: clamp(2.0rem, 9.2vw, 2.72rem); line-height: 1.13; }
  .voidReadingSection {
    margin-bottom: 14px;
    padding: 22px 17px;
    border-radius: 24px;
  }
  .voidReadingSection::before { inset: 7px; border-radius: 18px; }
  .voidSectionHeader { gap: 10px; margin-bottom: 15px; }
  .voidGlyph { width: 28px; height: 28px; }
  .voidSectionHeader .expand-label { font-size: .56rem; letter-spacing: .19em; }
  .voidReadingSection p,
  .voidReadingSection .configBody p,
  .voidReadingSection .attoText p {
    font-size: 1.02rem !important;
    line-height: 1.72 !important;
  }
  .configCard { padding: 16px 15px 15px; border-radius: 18px; }
  .attoRow {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 16px 15px;
  }
  .attoTerm span { display: inline; margin: 0 8px 0 0; }
  .section-sigillo .sigilloBlock { max-width: 22ch; font-size: clamp(1.55rem, 7.2vw, 2.05rem); }
}

/* V4.21 — Quantum Measure Chamber: domanda → misura → collasso → voce */
.quantumMeasure {
  position: relative;
  width: min(760px, 100%);
  margin: 26px auto 0;
  padding: clamp(22px, 4vw, 36px) clamp(14px, 3vw, 28px) clamp(18px, 3vw, 28px);
  display: grid;
  justify-items: center;
  text-align: center;
  border-radius: 34px;
  border: 1px solid rgba(233,201,138,.18);
  background:
    radial-gradient(circle at 50% 20%, rgba(233,201,138,.10), transparent 18rem),
    radial-gradient(circle at 50% 62%, rgba(124,92,255,.13), transparent 24rem),
    linear-gradient(180deg, rgba(7,6,18,.26), rgba(3,3,10,.34));
  box-shadow:
    0 34px 120px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 80px rgba(124,92,255,.045);
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.quantumMeasure.hidden { display: none !important; }
.quantumMeasure::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 25px;
  border: 1px solid rgba(233,201,138,.075);
  pointer-events: none;
}
.quantumMeasure::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(640px, 96vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: .15;
  mask-image: radial-gradient(circle, rgba(0,0,0,.70), transparent 62%);
  pointer-events: none;
}
.measureHalo {
  position: relative;
  z-index: 1;
  width: clamp(108px, 20vw, 148px);
  aspect-ratio: 1;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
}
.measureRing {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(233,201,138,.25);
  box-shadow: 0 0 34px rgba(233,201,138,.06), inset 0 0 26px rgba(124,92,255,.08);
}
.ringA { animation: quantumSpin 16s linear infinite; }
.ringB { inset: 6%; transform: rotate(58deg) skew(14deg); border-color: rgba(181,164,255,.22); animation: quantumSpin 24s linear infinite reverse; }
.ringC { inset: 25%; transform: rotate(-32deg) skew(-18deg); border-color: rgba(233,201,138,.18); animation: quantumSpin 18s linear infinite; }
.measureCore {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255,241,199,.90);
  font: 500 1.2rem/1 var(--font-display);
  background:
    radial-gradient(circle at 50% 42%, rgba(255,241,199,.16), rgba(124,92,255,.10) 44%, rgba(5,4,12,.16) 70%, transparent 100%);
  border: 1px solid rgba(233,201,138,.25);
  box-shadow: 0 0 40px rgba(233,201,138,.12), 0 0 80px rgba(124,92,255,.12);
}
.measureParticle {
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff0b8;
  box-shadow: 0 0 14px rgba(255,240,184,.88), 0 0 38px rgba(124,92,255,.45);
  transform-origin: 42px 42px;
  animation: quantumOrbit 4.2s cubic-bezier(.58,.05,.22,.99) infinite;
}
.quantumMeasure[data-step="0"] .measureParticle { animation-duration: 4.4s; }
.quantumMeasure[data-step="1"] .measureParticle { animation-duration: 2.6s; }
.quantumMeasure[data-step="2"] .measureParticle { animation-duration: 1.4s; }
.quantumMeasure[data-step="3"] .measureParticle { animation-duration: 3.2s; }
.measureTitle {
  position: relative;
  z-index: 1;
  margin: 2px 0 16px;
  color: rgba(255,226,158,.94);
  font: 800 .72rem/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .34em;
  text-shadow: 0 0 28px rgba(233,201,138,.18);
}
.measurePhases {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 auto 18px;
}
.measurePhases::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 17px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233,201,138,.20), rgba(124,92,255,.16), rgba(233,201,138,.20), transparent);
  z-index: -1;
}
.measurePhase {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: rgba(255,248,234,.46);
  transition: transform .35s ease, color .35s ease, opacity .35s ease, filter .35s ease;
}
.measurePhase b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255,248,234,.52);
  background: rgba(5,4,13,.46);
  border: 1px solid rgba(233,201,138,.13);
  box-shadow: 0 0 22px rgba(0,0,0,.20);
  font: 600 .94rem/1 var(--font-display);
  transition: all .35s ease;
}
.measurePhase span {
  font: 800 .56rem/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .18em;
}
.measurePhase.active { color: rgba(255,232,166,.78); }
.measurePhase.active b {
  color: rgba(255,241,199,.92);
  border-color: rgba(233,201,138,.34);
  background: radial-gradient(circle at 50% 38%, rgba(233,201,138,.14), rgba(8,6,18,.56));
  box-shadow: 0 0 24px rgba(233,201,138,.12);
}
.measurePhase.current {
  transform: translateY(-2px);
  color: rgba(255,240,184,.96);
  filter: drop-shadow(0 0 12px rgba(233,201,138,.20));
}
.measureLine {
  position: relative;
  z-index: 1;
  min-height: 1.55em;
  margin: 0;
  color: rgba(255,248,234,.92);
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 2.9vw, 1.62rem);
  line-height: 1.22;
  letter-spacing: .005em;
  text-shadow: 0 2px 34px rgba(0,0,0,.70), 0 0 42px rgba(233,201,138,.10);
}
.measureLine::before,
.measureLine::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  margin: 0 12px .35em;
  background: linear-gradient(90deg, transparent, rgba(233,201,138,.42));
}
.measureLine::after {
  background: linear-gradient(90deg, rgba(233,201,138,.42), transparent);
}
.measureAxiom {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  color: rgba(233,201,138,.64);
  font: 700 .66rem/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .22em;
}
body.isMeasuring .entryCard {
  overflow: visible;
}
body.isMeasuring .status.measuring {
  display: none !important;
}
@keyframes quantumSpin { to { transform: rotate(1turn); } }
@keyframes quantumOrbit {
  0% { transform: rotate(0deg) translateX(46px) scale(.82); opacity: .48; }
  38% { transform: rotate(155deg) translateX(52px) scale(1.05); opacity: 1; }
  62% { transform: rotate(230deg) translateX(22px) scale(1.4); opacity: .96; }
  100% { transform: rotate(360deg) translateX(46px) scale(.82); opacity: .48; }
}
@media (max-width: 780px) {
  .quantumMeasure {
    margin-top: 22px;
    padding: 22px 12px 20px;
    border-radius: 26px;
    background:
      radial-gradient(circle at 50% 14%, rgba(233,201,138,.11), transparent 14rem),
      radial-gradient(circle at 50% 60%, rgba(124,92,255,.14), transparent 18rem),
      linear-gradient(180deg, rgba(7,6,18,.24), rgba(3,3,10,.30));
  }
  .quantumMeasure::before { inset: 7px; border-radius: 20px; }
  .measureHalo { width: 104px; margin-bottom: 12px; }
  .measureTitle { font-size: .62rem; letter-spacing: .28em; margin-bottom: 13px; }
  .measurePhases { gap: 2px; margin-bottom: 16px; }
  .measurePhase b { width: 29px; height: 29px; font-size: .82rem; }
  .measurePhase span { font-size: .48rem; letter-spacing: .10em; }
  .measureLine { font-size: clamp(1.08rem, 5.6vw, 1.38rem); max-width: 19ch; }
  .measureLine::before,
  .measureLine::after { display: none; }
  .measureAxiom { font-size: .54rem; letter-spacing: .16em; line-height: 1.35; }
}

/* V4.21.2 — Reading ritual hotfix: Simbolo emerso esplicito, niente CTA sperimentali, restart in fondo. */
.acts { display: none !important; }

.bladeShell {
  margin-bottom: clamp(34px, 5vw, 58px) !important;
  padding-top: clamp(30px, 4.8vw, 54px) !important;
}
.bladeKicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 8px;
  color: rgba(255, 226, 158, .92);
  font: 800 clamp(.62rem, 1.05vw, .76rem)/1 var(--font-ui);
  letter-spacing: .28em;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(233,201,138,.18);
}
.bladeKicker::before,
.bladeKicker::after {
  content: "";
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233,201,138,.46));
}
.bladeKicker::after {
  background: linear-gradient(90deg, rgba(233,201,138,.46), transparent);
}
.bladeMeasure {
  position: relative;
  z-index: 1;
  margin: 0 auto clamp(18px, 2.7vw, 28px);
  color: rgba(255, 248, 234, .46);
  font: 650 .62rem/1 var(--font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.bladeShell .lamaBlock {
  position: relative;
  z-index: 1;
}
.bladeShell .lamaBlock::after {
  content: "";
  display: block;
  width: min(170px, 38vw);
  height: 1px;
  margin: clamp(22px, 3.5vw, 34px) auto 0;
  background: linear-gradient(90deg, transparent, rgba(233,201,138,.40), transparent);
  box-shadow: 0 0 18px rgba(233,201,138,.12);
}
.readingFooter {
  width: min(100%, 760px);
  margin: clamp(34px, 5vw, 62px) auto 0;
  padding: clamp(28px, 4vw, 44px) 18px max(28px, env(safe-area-inset-bottom));
  text-align: center;
  border-top: 1px solid rgba(233,201,138,.16);
  position: relative;
}
.readingFooter::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: min(320px, 72vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(233,201,138,.62), transparent);
  box-shadow: 0 0 24px rgba(233,201,138,.16);
}
.footerGlyph {
  width: 38px;
  height: 38px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 230, 164, .86);
  border: 1px solid rgba(233,201,138,.25);
  background: radial-gradient(circle at 50% 38%, rgba(233,201,138,.12), rgba(7,6,18,.36));
  box-shadow: 0 0 26px rgba(233,201,138,.10), inset 0 0 18px rgba(124,92,255,.08);
  font-family: var(--font-display);
  font-size: 1rem;
}
.readingFooter p {
  max-width: 48ch;
  margin: 0 auto 26px;
  color: rgba(255,248,234,.58);
  font: 520 clamp(.88rem, 1.4vw, 1rem)/1.7 var(--font-ui);
  letter-spacing: .03em;
}
.readingFooter .again {
  margin-top: 0 !important;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid rgba(233,201,138,.22);
  background: rgba(10, 8, 22, .34);
  color: rgba(255,248,234,.72);
  font-size: .68rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.readingFooter .again:hover,
.readingFooter .again:focus-visible {
  color: #fff8ea;
  border-color: rgba(233,201,138,.46);
  background: rgba(24, 18, 48, .42);
}

@media (max-width: 780px) {
  .bladeKicker { letter-spacing: .20em; font-size: .58rem; }
  .bladeKicker::before,
  .bladeKicker::after { width: 24px; }
  .bladeMeasure { font-size: .55rem; letter-spacing: .14em; margin-bottom: 18px; }
  .readingFooter { margin-top: 34px; padding-left: 12px; padding-right: 12px; }
  .readingFooter p { max-width: 28ch; font-size: .86rem; line-height: 1.62; }
}


/* V4.21.3 — Sigillo esplicito + Risposta coerente.
   Il Sigillo torna nominato; La Risposta non usa più capolettera decorativo. */
.section-sigillo .voidSectionHeader {
  flex-direction: column;
  gap: 10px;
}
.section-sigillo .voidSectionHeader .expand-label::before,
.section-sigillo .voidSectionHeader .expand-label::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  margin: 0 12px 4px;
  background: linear-gradient(90deg, transparent, rgba(233,201,138,.48), transparent);
}
.section-risposta .voidSectionBody p:first-child {
  text-indent: 0;
}