.viewer {
  --world-color: #93d9ed;
  overflow: hidden;
  padding: 18px;
  background: linear-gradient(145deg, #312347, #1c1834 60%, #182943);
}

.chooser { position: relative; z-index: 2; }
.spirit-view { display: block; margin-top: 17px; }

.spirit-stage {
  position: relative;
  isolation: isolate;
  height: 440px;
  overflow: hidden;
  border: 0;
  border-radius: 21px;
  background: #1c1834;
  box-shadow: inset 0 0 80px #060614aa;
  touch-action: pan-y;
}

.spirit-stage canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stage-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  transform: translate(var(--pointer-x, 0px), var(--pointer-y, 0px));
  transition: transform .3s ease-out;
  background: radial-gradient(ellipse at 50% 50%, transparent 25%, #120d27a8 100%);
}

.stage-atmosphere::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(70%, 360px);
  height: 70%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--world-color);
  opacity: .18;
  filter: blur(62px);
  transition: background .4s ease;
}

.stage-orbit {
  position: absolute;
  left: 50%;
  top: 45%;
  display: block;
  border-radius: 50%;
  border: 2px solid var(--world-color);
  border-color: color-mix(in srgb, var(--world-color) 67%, white);
  box-shadow: 0 0 21px color-mix(in srgb, var(--world-color) 48%, transparent), inset 0 0 18px color-mix(in srgb, var(--world-color) 20%, transparent);
}

.stage-orbit-one {
  width: min(88%, 510px);
  height: 73%;
  transform: translate(-50%, -50%) rotate(-22deg);
  animation: orbit-one 12s ease-in-out infinite alternate;
}

.stage-orbit-two {
  width: min(97%, 570px);
  height: 86%;
  opacity: .48;
  border-width: 1px;
  transform: translate(-50%, -50%) rotate(27deg);
  animation: orbit-two 15s ease-in-out infinite alternate;
}

.stage-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff2d8;
  box-shadow: 0 0 9px 3px var(--world-color), 0 0 24px 9px color-mix(in srgb, var(--world-color) 55%, transparent);
  animation: spark-pulse 2.8s ease-in-out infinite alternate;
}

.stage-spark-one { left: 16%; top: 22%; }
.stage-spark-two { right: 14%; top: 37%; animation-delay: -.9s; }
.stage-spark-three { left: 24%; bottom: 16%; animation-delay: -1.7s; }

.portrait-shell {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 43%;
  width: min(41%, 220px);
  aspect-ratio: 2 / 3;
  margin: 0;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff4db, var(--world-color) 65%, #524774);
  box-shadow: 0 27px 54px #050412c9, 0 0 42px color-mix(in srgb, var(--world-color) 30%, transparent);
  transition: box-shadow .4s ease;
}

.portrait-shell img,
.portrait-shell video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.portrait-shell video { z-index: 1; }

.portrait-shell::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 26px #110d25a0;
}

.spirit-stage.pre-reveal .portrait-shell { opacity: 0; }
.spirit-stage.is-revealing .portrait-shell { animation: spirit-reveal 1.4s cubic-bezier(.19, .75, .22, 1) both; }

.reveal-burst {
  position: absolute;
  z-index: 4;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.spirit-stage.is-revealing .reveal-burst { opacity: 1; }

.reveal-burst::before,
.reveal-burst::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 43%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.1);
  opacity: 0;
}

.reveal-burst::before {
  width: min(80%, 430px);
  aspect-ratio: 1;
  background: radial-gradient(circle, #fff9e9 0 4%, var(--world-color) 19%, transparent 65%);
  mix-blend-mode: screen;
}

.reveal-burst::after {
  width: min(75%, 420px);
  aspect-ratio: 1;
  border: 3px solid var(--world-color);
  box-shadow: 0 0 36px var(--world-color), inset 0 0 32px var(--world-color);
}

.spirit-stage.is-revealing .reveal-burst::before { animation: reveal-flash 1.1s ease-out both; }
.spirit-stage.is-revealing .reveal-burst::after { animation: reveal-ring 1.15s ease-out both; }

.reveal-burst span {
  --angle: 0deg;
  position: absolute;
  left: 50%;
  top: 43%;
  width: 3px;
  height: 68%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--angle)) scaleY(.1);
  background: linear-gradient(transparent, #fff8e4 42%, var(--world-color) 50%, #fff8e4 58%, transparent);
  box-shadow: 0 0 15px var(--world-color);
}

.reveal-burst span:nth-child(2) { --angle: 45deg; }
.reveal-burst span:nth-child(3) { --angle: 90deg; }
.reveal-burst span:nth-child(4) { --angle: 135deg; }
.spirit-stage.is-revealing .reveal-burst span { animation: reveal-ray 1.05s ease-out both; }

.spirit-copy { padding: 14px 5px 2px; }
.spirit-copy h2 { margin-top: 5px; }
.viewer-footnote { margin-bottom: 0; }
.viewer-wrap { position: relative; }

.detail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 15px;
  border-radius: 11px;
  background: #f0d686;
  color: #2b1b34;
  font-size: .92rem;
  font-weight: 750;
  text-decoration: none;
}

.detail-link { margin: 4px 0 12px; }
.detail-link[hidden] { display: none !important; }

.personal-detail {
  max-width: 1240px;
  margin: auto;
  padding: 68px 28px;
  border-top: 0;
}

.personal-detail[hidden] { display: none !important; }
.detail-heading { max-width: 800px; margin-bottom: 28px; }
.detail-heading h2,
.detail-chapters-heading h3,
.detail-elements-panel h3 { font-family: Georgia, serif; letter-spacing: -.045em; }
.detail-heading h2 { margin: 9px 0; font-size: clamp(2.5rem, 4.5vw, 4.5rem); line-height: 1.05; }
.detail-layout { display: grid; grid-template-columns: minmax(220px, .66fr) minmax(0, 1.34fr); gap: 26px; align-items: start; }
.detail-art { margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #251d3d; }
.detail-motion { position: relative; overflow: hidden; aspect-ratio: 2/3; border-radius: 0; }
.detail-motion img, .detail-motion video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-motion video { z-index: 1; }
.detail-body { display: grid; gap: 13px; }
.detail-traits { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-traits span { padding: 7px 12px; border: 0; border-radius: 99px; background: #493353; color: #f3e8ff; font-size: .9rem; }
.detail-body article { padding: 19px; border: 0; border-radius: 15px; background: #241d39; }
.detail-body article h3 { margin: 0 0 9px; font-family: Georgia, serif; font-size: 1.35rem; }
.detail-body article p,
.detail-body article li { margin: 0; color: #e2d8ed; line-height: 1.6; }
.detail-body article ul { margin: 0; padding-left: 20px; }
.detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.detail-facts div { display: grid; gap: 6px; padding: 14px; border-radius: 13px; background: #352849; }
.detail-facts span { color: #cdb9e7; font-size: .86rem; }
.detail-facts strong { color: #fff3d4; font-size: 1rem; }
.detail-chapters-heading { max-width: 700px; margin: 60px 0 23px; }
.detail-chapters-heading h3,
.detail-elements-panel h3 { margin: 8px 0 12px; font-size: clamp(2rem, 3vw, 3.1rem); line-height: 1.1; }
.detail-chapters-heading>p:last-child,
.detail-elements-panel p:not(.eyebrow) { color: #dfd3ed; font-size: 1rem; }
.detail-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.detail-chapters article { padding: 24px; border: 0; border-radius: 15px; background: #241d39; }
.detail-chapters article h4 { margin: 10px 0; font-family: Georgia, serif; font-size: 1.55rem; }
.detail-chapters article p { color: #e4dced; }
.detail-chapters blockquote { margin: 16px 0; padding-left: 15px; border-left: 2px solid #e7ccff; color: #ffebb0; }
.detail-chapters summary { cursor: pointer; color: #ddc9f5; font-size: .9rem; }
.detail-chapters details ul { padding-left: 20px; color: #d4c8df; }
.detail-elements-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 35px; margin-top: 45px; padding: 28px; border: 0; border-radius: 15px; background: #211a35; }
.detail-elements { display: grid; gap: 13px; align-content: center; }
.detail-element-row { display: grid; grid-template-columns: 105px 1fr; align-items: center; gap: 12px; }
.detail-element-row>span:first-child { font-size: .9rem; color: #f2e8fc; }
.detail-element-track { height: 12px; overflow: hidden; border-radius: 99px; background: #ffffff1b; }
.detail-element-track span { display: block; height: 100%; border-radius: inherit; }
.detail-polarity { margin: 14px 0 33px; color: #d6c7e7; font-size: .9rem; }
.detail-pillars-panel { padding: 28px; border: 0; border-radius: 15px; background: #211a35; }
.detail-pillars-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.detail-pillars-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 2rem; }
.detail-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.detail-pillar { display: grid; gap: 6px; padding: 16px; border: 0; border-radius: 10px; background: #2a2040; }
.detail-day-pillar { background: #45344d; }
.detail-pillar>span { color: #d5c0ee; font-size: .82rem; font-weight: 700; letter-spacing: .05em; }
.detail-pillar strong { font-size: 2.1rem; color: #fff0c7; }
.detail-pillar p { margin: 0; color: #f0e6fa; font-size: .9rem; }
.detail-pillar small { color: #cbb9dc; font-size: .82rem; }
.detail-calculation { margin-top: 22px; padding-top: 18px; }
.detail-calculation summary { cursor: pointer; color: #e8d0ff; font-weight: 700; }
.detail-calculation>p { color: #d9cde7; }
.detail-table-scroll { overflow-x: auto; }
.detail-calculation table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; }
.detail-calculation caption { margin: 10px 0; color: #e8d0ff; text-align: left; font-weight: 700; }
.detail-calculation th,
.detail-calculation td { padding: 10px; border-bottom: 1px solid #ffffff30; color: #e5dceb; vertical-align: top; }
.detail-calculation th { color: #fff0bd; font-size: .86rem; }

.viewer-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 38%;
  top: 1%;
  width: 54%;
  height: 38%;
  border-radius: 50%;
  background: #805fc233;
  filter: blur(100px);
  pointer-events: none;
}

@keyframes orbit-one {
  to { transform: translate(-50%, -50%) rotate(17deg); }
}

@keyframes orbit-two {
  to { transform: translate(-50%, -50%) rotate(-14deg); }
}

@keyframes spark-pulse {
  to { opacity: .35; transform: scale(.55); }
}

@keyframes spirit-reveal {
  0%, 42% { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(-8deg); filter: blur(18px); }
  66% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); filter: blur(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); filter: blur(0); }
}

@keyframes reveal-flash {
  0%, 11% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  38% { opacity: .95; transform: translate(-50%, -50%) scale(.85); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.75); }
}

@keyframes reveal-ring {
  0%, 17% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  41% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

@keyframes reveal-ray {
  0%, 12% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) scaleY(.1); }
  39% { opacity: .92; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) scaleY(1.4); }
}

@media (max-width: 900px) {
  .detail-layout { grid-template-columns: minmax(170px, .65fr) minmax(0, 1.35fr); }
  .detail-facts { grid-template-columns: 1fr; }
  .detail-elements-panel { grid-template-columns: 1fr; }
  .detail-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .viewer { padding: 13px; }
  .spirit-stage { height: 355px; }
  .portrait-shell { top: 43%; width: min(50%, 180px); }
  .stage-orbit-one { width: 92%; height: 66%; }
  .stage-orbit-two { width: 105%; height: 78%; }
  .personal-detail { padding: 48px 18px; }
  .detail-layout, .detail-chapters { grid-template-columns: 1fr; }
  .detail-art { max-width: 320px; }
  .detail-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-facts div { padding: 10px; }
  .detail-facts span { font-size: .78rem; }
  .detail-facts strong { font-size: .9rem; }
  .detail-elements-panel { padding: 20px; }
  .detail-pillars-panel { padding: 18px; }
  .detail-pillars-heading { display: block; }
  .detail-pillars-heading h3 { font-size: 1.75rem; }
  .detail-pillar { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-orbit, .stage-spark { animation: none; }
  .stage-atmosphere, .portrait-shell { transition: none; }
  .spirit-stage.pre-reveal .portrait-shell { opacity: 1; }
  .spirit-stage.is-revealing .portrait-shell { animation: none; opacity: 1; transform: translate(-50%, -50%); filter: none; }
  .reveal-burst { display: none; }
}