:root {
  --iaw-ink: #173f3b;
  --iaw-ink-soft: #5d716e;
  --iaw-paper: rgba(255, 254, 249, 0.89);
  --iaw-line: rgba(23, 63, 59, 0.14);
  --iaw-teal: #347f77;
  --iaw-teal-strong: #246d67;
  --iaw-violet: #6255c8;
  --iaw-coral: #d47d5c;
  --iaw-gold: #e5ad4d;
  --iaw-sage: #dcebe0;
  --iaw-shadow: 0 20px 52px rgba(19, 51, 46, 0.22);
}

body.activity-card-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.theme-v2 .activity-card.has-immersive-world.is-open,
.activity-card.has-immersive-world.is-open {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  contain: none !important;
}

.activity-card.has-immersive-world.is-open .activity-card-back {
  position: fixed;
  z-index: 10000;
  inset: clamp(10px, 2vh, 22px) clamp(10px, 2vw, 28px);
  width: auto;
  height: calc(100dvh - clamp(20px, 4vh, 44px));
  box-sizing: border-box;
  min-height: 0;
  max-height: none;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  box-shadow:
    0 0 0 100vmax rgba(17, 42, 39, 0.4),
    0 34px 100px rgba(11, 35, 31, 0.3);
  contain: layout paint;
}

/*
 * Firefox can resolve a fixed grid child against its card instead of the
 * viewport. While an immersive activity is open, activity-card.js moves the
 * back face directly under <body>; this standalone selector makes that portal
 * the authoritative full-screen surface in every browser.
 */
body > .activity-card-back.is-immersive-portal {
  position: fixed !important;
  z-index: 2147483000 !important;
  top: clamp(10px, 2vh, 22px) !important;
  right: clamp(10px, 2vw, 28px) !important;
  bottom: clamp(10px, 2vh, 22px) !important;
  left: clamp(10px, 2vw, 28px) !important;
  inset: clamp(10px, 2vh, 22px) clamp(10px, 2vw, 28px) !important;
  width: auto !important;
  height: calc(100dvh - clamp(20px, 4vh, 44px)) !important;
  box-sizing: border-box !important;
  flex: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  display: flex !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 30px !important;
  background: #dce8df !important;
  box-shadow:
    0 0 0 100vmax rgba(17, 42, 39, 0.4),
    0 34px 100px rgba(11, 35, 31, 0.3) !important;
  opacity: 0 !important;
  visibility: visible !important;
  transform: scale(0.992) !important;
  transform-origin: center !important;
  pointer-events: none !important;
  contain: layout paint !important;
  isolation: isolate;
  transition:
    opacity 220ms ease,
    transform 280ms cubic-bezier(0.22, 0.75, 0.24, 1) !important;
}

body > .activity-card-back.is-immersive-portal.is-portal-active {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

body > .activity-card-back.is-immersive-portal.is-portal-closing {
  opacity: 0 !important;
  transform: scale(0.992) !important;
  pointer-events: none !important;
}

.activity-card.has-immersive-world .activity-card-back-header,
.activity-card-back.is-immersive-portal .activity-card-back-header {
  position: absolute;
  z-index: 100;
  top: 15px;
  right: 15px;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.activity-card.has-immersive-world .activity-card-back-heading,
.activity-card-back.is-immersive-portal .activity-card-back-heading {
  display: none;
}

.activity-card.has-immersive-world .activity-card-back-close,
.activity-card-back.is-immersive-portal .activity-card-back-close {
  min-width: 88px;
  min-height: 42px;
  border-color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 254, 249, 0.82);
  box-shadow: 0 8px 24px rgba(18, 53, 47, 0.16);
  color: var(--iaw-ink);
  backdrop-filter: blur(14px) saturate(1.15);
  pointer-events: auto;
}

.activity-card.has-immersive-world .activity-card-back-body,
.activity-card-back.is-immersive-portal .activity-card-back-body {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.activity-card.has-immersive-world .activity-card-back-body [data-activity-card-container],
.activity-card-back.is-immersive-portal .activity-card-back-body [data-activity-card-container] {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/*
 * The first two activities use the same body portal as every other immersive
 * route, but their existing layouts can exceed a phone viewport. Keep the
 * message page locked and scroll only the activity surface.
 */
body > .activity-card-back.is-immersive-portal.is-scrollable-immersive
  .activity-card-back-body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

body > .activity-card-back.is-immersive-portal.is-scrollable-immersive
  .activity-card-back-body
  [data-activity-card-container] {
  height: auto;
  min-height: 100%;
}

.activity-card.has-immersive-world .activity-card-back-footer,
.activity-card-back.is-immersive-portal .activity-card-back-footer {
  display: none;
}

.iaw {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 620px;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
  color: var(--iaw-ink);
  background: #dce8df;
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
}

.iaw--theme-lavender {
  --iaw-accent: #675bc8;
  --iaw-accent-soft: #e8e3fb;
}

.iaw--theme-coral {
  --iaw-accent: #c97354;
  --iaw-accent-soft: #f5ded4;
}

.iaw--theme-teal,
.iaw--theme-sage {
  --iaw-accent: #347f77;
  --iaw-accent-soft: #dcebe0;
}

.iaw--theme-gold {
  --iaw-accent: #b98635;
  --iaw-accent-soft: #f3e5c3;
}

.iaw--theme-blue {
  --iaw-accent: #477a98;
  --iaw-accent-soft: #dce9ef;
}

.iaw__picture,
.iaw__image,
.iaw__veil,
.iaw__ambient,
.iaw__stage {
  position: absolute;
  inset: 0;
}

.iaw__picture {
  z-index: 0;
  display: block;
}

.iaw__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 700ms ease, transform 1400ms cubic-bezier(.2, .8, .2, 1);
}

.iaw.is-awake .iaw__image {
  filter: saturate(1.09) brightness(1.035);
  transform: scale(1.012);
}

.iaw__veil {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(20, 47, 43, 0.08), transparent 18%, transparent 70%, rgba(13, 39, 35, 0.21)),
    linear-gradient(to right, rgba(255, 255, 255, 0.04), transparent 45%);
}

.iaw__ambient {
  z-index: 2;
  pointer-events: none;
}

.iaw__ambient-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  opacity: 0.35;
  background: rgba(255, 239, 184, 0.88);
  box-shadow: 0 0 18px rgba(255, 228, 137, 0.65);
  animation: iawFloat 7s ease-in-out infinite alternate;
}

.iaw__ambient-dot:nth-child(1) { left: 16%; top: 24%; animation-delay: -1s; }
.iaw__ambient-dot:nth-child(2) { left: 31%; top: 63%; animation-delay: -4s; }
.iaw__ambient-dot:nth-child(3) { left: 51%; top: 30%; animation-delay: -2s; }
.iaw__ambient-dot:nth-child(4) { left: 67%; top: 61%; animation-delay: -5s; }
.iaw__ambient-dot:nth-child(5) { left: 82%; top: 38%; animation-delay: -3s; }
.iaw__ambient-dot:nth-child(6) { left: 73%; top: 78%; animation-delay: -6s; }
.iaw__ambient-dot:nth-child(7) { left: 23%; top: 80%; animation-delay: -2.5s; }

@keyframes iawFloat {
  to { opacity: 0.8; transform: translate3d(6px, -16px, 0) scale(1.3); }
}

.iaw__stage {
  z-index: 5;
  pointer-events: none;
}

.iaw__stage button,
.iaw__stage .iaw-orbit-node {
  pointer-events: auto;
}

.iaw__topbar {
  position: absolute;
  z-index: 30;
  top: 15px;
  right: 118px;
  left: 15px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 62px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 19px;
  background: rgba(255, 254, 249, 0.8);
  box-shadow: 0 10px 30px rgba(22, 58, 52, 0.14);
  backdrop-filter: blur(16px) saturate(1.12);
}

.iaw__kicker,
.iaw__step-label,
.iaw__result-kicker,
.iaw-intro small {
  margin: 0;
  color: var(--iaw-accent, var(--iaw-violet));
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.iaw__title {
  margin: 3px 0 0;
  color: var(--iaw-ink);
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.iaw__progress {
  display: flex;
  gap: 6px;
}

.iaw__progress-step {
  position: relative;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(23, 63, 59, 0.16);
  border-radius: 50%;
  color: #738480;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.69rem;
  font-weight: 850;
  transition: transform 240ms ease, color 240ms ease, background 240ms ease;
}

.iaw__progress-step.is-current {
  color: #fff;
  background: var(--iaw-accent, var(--iaw-violet));
  transform: scale(1.08);
}

.iaw__progress-step.is-complete {
  color: #fff;
  background: var(--iaw-teal);
}

.iaw__guide {
  position: absolute;
  z-index: 25;
  top: 93px;
  left: 17px;
  display: flex;
  width: min(430px, calc(100% - 500px));
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 17px;
  background: rgba(255, 254, 249, 0.8);
  box-shadow: 0 12px 32px rgba(19, 53, 47, 0.14);
  backdrop-filter: blur(15px) saturate(1.1);
}

.iaw__guide-title {
  margin: 3px 0 2px;
  font-size: clamp(0.98rem, 1.5vw, 1.25rem);
  line-height: 1.08;
}

.iaw__guide-text {
  margin: 0;
  color: var(--iaw-ink-soft);
  font-size: 0.78rem;
  line-height: 1.35;
}

.iaw__guide-count {
  display: grid;
  flex: 0 0 auto;
  min-width: 45px;
  height: 45px;
  padding: 0 6px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--iaw-ink);
  font-size: 0.73rem;
  font-weight: 850;
}

.iaw.is-direct .iaw__guide {
  width: min(380px, calc(100% - 34px));
}

.iaw__tray {
  position: absolute;
  z-index: 24;
  right: 17px;
  bottom: 17px;
  width: min(445px, calc(100% - 34px));
  max-height: min(535px, calc(100% - 108px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 22px;
  background: rgba(255, 254, 249, 0.86);
  box-shadow: var(--iaw-shadow);
  backdrop-filter: blur(18px) saturate(1.13);
}

.iaw__tray-body {
  max-height: min(440px, calc(100vh - 210px));
  padding: 17px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.iaw__tray-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  border-top: 1px solid var(--iaw-line);
  background: rgba(255, 255, 255, 0.6);
}

.iaw__privacy {
  max-width: 54%;
  margin: 0;
  color: var(--iaw-ink-soft);
  font-size: 0.66rem;
  line-height: 1.3;
}

.iaw__tray-actions,
.iaw__result-actions,
.iaw-plan-review__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.iaw-button {
  min-height: 41px;
  padding: 8px 15px;
  border-radius: 13px;
  font: inherit;
  font-size: 0.77rem;
  font-weight: 820;
  cursor: pointer;
  transition: transform 170ms ease, box-shadow 170ms ease, opacity 170ms ease;
}

.iaw-button:hover:not(:disabled) {
  transform: translateY(-2px);
}

.iaw-button--primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--iaw-accent, var(--iaw-teal)), var(--iaw-teal-strong));
  box-shadow: 0 8px 20px rgba(40, 113, 105, 0.22);
}

.iaw-button--secondary {
  border: 1px solid var(--iaw-line);
  color: var(--iaw-ink);
  background: rgba(255, 255, 255, 0.9);
}

.iaw-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  box-shadow: none;
}

.iaw-intro__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(52, 127, 119, 0.18);
  border-radius: 15px;
  background: rgba(226, 241, 233, 0.72);
}

.iaw-intro__icon {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--iaw-accent, var(--iaw-teal));
}

.iaw-intro__meta strong {
  display: block;
  margin-top: 3px;
  font-size: 0.83rem;
  line-height: 1.25;
}

.iaw-intro__use,
.iaw-intro__detail {
  margin: 12px 2px 0;
  color: var(--iaw-ink-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}

.iaw-intro__use strong {
  color: var(--iaw-ink);
}

.iaw-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.iaw-choice {
  position: relative;
  min-height: 57px;
  padding: 9px 10px 9px 39px;
  border: 1px solid rgba(23, 63, 59, 0.13);
  border-radius: 15px;
  color: var(--iaw-ink);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 4px 0 rgba(23, 63, 59, 0.055);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 760;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease;
}

.iaw-choice::before {
  position: absolute;
  top: 50%;
  left: 9px;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 8px;
  content: attr(data-icon);
  color: var(--iaw-accent, var(--iaw-teal));
  background: var(--iaw-accent-soft, var(--iaw-sage));
  transform: translateY(-50%);
}

.iaw-choice:hover {
  border-color: color-mix(in srgb, var(--iaw-accent, var(--iaw-teal)) 55%, transparent);
  transform: translateY(-2px);
}

.iaw-choice.is-selected {
  border-color: color-mix(in srgb, var(--iaw-accent, var(--iaw-teal)) 65%, transparent);
  background: color-mix(in srgb, var(--iaw-accent-soft, var(--iaw-sage)) 52%, white);
}

.iaw-choice.is-selected::before {
  content: "✓";
  color: #fff;
  background: var(--iaw-accent, var(--iaw-teal));
}

.iaw-selection__title {
  margin: 0 0 10px;
  font-size: 0.96rem;
}

.iaw-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

.iaw-entry textarea {
  min-height: 54px;
  max-height: 100px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid rgba(23, 63, 59, 0.16);
  border-radius: 13px;
  color: var(--iaw-ink);
  background: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.35;
}

.iaw__result {
  position: absolute;
  z-index: 40;
  right: 20px;
  bottom: 20px;
  display: grid;
  width: min(500px, calc(100% - 40px));
  max-height: calc(100% - 112px);
  grid-template-columns: auto 1fr;
  gap: 13px;
  padding: 20px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 24px;
  background: rgba(255, 254, 249, 0.9);
  box-shadow: 0 25px 70px rgba(15, 47, 42, 0.28);
  backdrop-filter: blur(20px) saturate(1.15);
  animation: iawResultReveal 550ms cubic-bezier(.2, .82, .2, 1);
}

.iaw__result[hidden] {
  display: none;
}

.iaw__guide[hidden],
.iaw__tray[hidden] {
  display: none !important;
}

.iaw__result-mark {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--iaw-teal);
  box-shadow: 0 0 0 9px rgba(52, 127, 119, 0.13);
  font-weight: 900;
}

.iaw__result-title {
  margin: 4px 0 11px;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  line-height: 1.08;
}

.iaw__result-summary {
  margin: 0;
  padding: 13px 14px;
  border-left: 4px solid var(--iaw-accent, var(--iaw-coral));
  border-radius: 0 13px 13px 0;
  background: rgba(255, 255, 255, 0.76);
  font-size: 0.91rem;
  font-weight: 690;
  line-height: 1.5;
}

.iaw__result-note {
  margin: 10px 0 13px;
  color: var(--iaw-ink-soft);
  font-size: 0.7rem;
  line-height: 1.4;
}

@keyframes iawResultReveal {
  from { opacity: 0; transform: translateY(17px) scale(0.98); }
}

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

.iaw-scene-token {
  position: absolute;
  z-index: 10;
  top: var(--iaw-y);
  left: var(--iaw-x);
  display: block;
  max-width: min(240px, 27vw);
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  color: var(--iaw-ink);
  background: rgba(255, 254, 249, 0.82);
  box-shadow: 0 8px 25px rgba(15, 48, 43, 0.18);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(10px);
  animation: iawTokenArrive 430ms cubic-bezier(.18, .9, .25, 1.2);
}

@keyframes iawTokenArrive {
  from { opacity: 0; transform: translate(-50%, -30%) scale(0.76); }
}

.iaw-particle {
  position: absolute;
  z-index: 16;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 1;
  background: var(--iaw-gold);
  box-shadow: 0 0 12px rgba(229, 173, 77, 0.75);
  animation: iawParticle 1.25s ease-out forwards;
}

@keyframes iawParticle {
  to { opacity: 0; transform: translate3d(var(--iaw-px), var(--iaw-py), 0) scale(0.2); }
}

/* Breathing world */
.iaw-breath-orb-wrap {
  position: absolute;
  z-index: 8;
  top: 51%;
  left: 43%;
  display: grid;
  width: 260px;
  height: 260px;
  place-items: center;
  transform: translate(-50%, -50%);
}

.iaw-breath-rings,
.iaw-breath-rings::before,
.iaw-breath-rings::after {
  position: absolute;
  border: 1px solid rgba(44, 121, 113, 0.34);
  border-radius: 50%;
  content: "";
}

.iaw-breath-rings { inset: 0; }
.iaw-breath-rings::before { inset: 23px; }
.iaw-breath-rings::after { inset: 47px; }

.iaw-breath-orb {
  position: relative;
  display: grid;
  width: 128px;
  height: 128px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.62), transparent 22%),
    radial-gradient(circle at 52% 66%, #55ada1, #246f69 75%);
  box-shadow: 0 0 0 14px rgba(74, 160, 149, 0.14), 0 22px 46px rgba(28, 91, 84, 0.32);
  cursor: pointer;
  transition: transform var(--iaw-breath-duration, 800ms) cubic-bezier(.36, .05, .23, 1), box-shadow var(--iaw-breath-duration, 800ms) ease;
}

.iaw-breath-orb strong,
.iaw-breath-orb span {
  display: block;
  text-align: center;
  pointer-events: none;
}

.iaw-breath-orb strong { font-size: 1.04rem; }
.iaw-breath-orb span { margin-top: 3px; font-size: 0.7rem; opacity: 0.9; }

.iaw[data-breath-phase="inhale"] .iaw-breath-orb,
.iaw[data-breath-phase="hold"] .iaw-breath-orb {
  box-shadow: 0 0 0 27px rgba(74, 160, 149, 0.13), 0 27px 55px rgba(28, 91, 84, 0.28);
  transform: scale(1.43);
}

.iaw[data-breath-phase="exhale"] .iaw-breath-orb,
.iaw[data-breath-phase="ready"] .iaw-breath-orb {
  transform: scale(0.94);
}

.iaw[data-breath-phase="complete"] .iaw-breath-orb {
  box-shadow: 0 0 0 27px rgba(229, 173, 77, 0.16), 0 27px 55px rgba(28, 91, 84, 0.28);
  transform: scale(1.08);
}

.iaw-breath-bloom {
  position: absolute;
  z-index: 7;
  top: calc(34% + (var(--bloom-index) * 8%));
  left: calc(21% + (var(--bloom-index) * 18%));
  width: 22px;
  height: 22px;
  border-radius: 70% 30% 65% 35%;
  opacity: 0;
  background: color-mix(in srgb, var(--iaw-coral) 70%, var(--iaw-gold));
  transform: scale(0.2) rotate(45deg);
  transition: opacity 500ms ease, transform 700ms cubic-bezier(.2, .9, .25, 1.3);
}

.iaw-breath-bloom.is-open {
  opacity: 1;
  transform: scale(1) rotate(45deg);
}

/* Grounding world */
.iaw-grounding-target {
  position: absolute;
  z-index: 11;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  color: var(--iaw-ink);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 5px 0 rgba(24, 65, 59, 0.12), 0 9px 25px rgba(24, 65, 59, 0.25);
  font: inherit;
  font-size: 0.77rem;
  font-weight: 850;
  cursor: pointer;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(9px);
}

.iaw-grounding-target::before {
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  content: "";
  animation: iawHotspot 2.15s ease-out infinite;
}

.iaw-grounding-target.is-found {
  color: #fff;
  background: var(--iaw-teal);
  transform: translate(-50%, -50%) scale(0.92);
}

.iaw-grounding-target.is-found::before { display: none; }
@keyframes iawHotspot { 0% { opacity: .8; transform: scale(.82); } 75%, 100% { opacity: 0; transform: scale(1.5); } }

.iaw-grounding-target[data-target="plant"] { left: 23%; top: 42%; }
.iaw-grounding-target[data-target="window"] { left: 69%; top: 29%; }
.iaw-grounding-target[data-target="mug"] { left: 27%; top: 71%; }
.iaw-grounding-target[data-target="notebook"] { left: 49%; top: 79%; }
.iaw-grounding-target[data-target="blanket"] { left: 79%; top: 67%; }
.iaw-grounding-target[data-target="stone"] { left: 67%; top: 84%; }
.iaw-grounding-target[data-target="rug"] { left: 43%; top: 66%; }

.iaw-anchor-orb,
.iaw-loom-seal,
.iaw-compass-core,
.iaw-balance-core,
.iaw-orbit-center {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 35% 27%, rgba(255, 255, 255, 0.58), transparent 22%),
    linear-gradient(145deg, #58aa9e, #2a746d);
  box-shadow: 0 0 0 14px rgba(73, 154, 143, 0.13), 0 20px 42px rgba(27, 87, 80, 0.28);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  text-align: center;
  cursor: pointer;
}

.iaw-anchor-orb {
  width: 128px;
  height: 128px;
  margin: 8px auto;
}

.iaw-anchor-orb.is-breathing {
  animation: iawAnchorBreath 10s ease-in-out forwards;
}

@keyframes iawAnchorBreath {
  0%, 100% { transform: scale(.9); }
  40%, 56% { transform: scale(1.32); }
}

/* Body-awareness world */
.iaw-body-hotspot {
  position: absolute;
  z-index: 12;
  left: 37%;
  top: 51%;
  display: grid;
  width: 94px;
  height: 94px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(255, 250, 222, 0.2);
  box-shadow: 0 0 0 12px rgba(255, 224, 148, 0.15), 0 0 45px rgba(255, 220, 125, 0.45);
  cursor: pointer;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(2px);
}

.iaw-body-hotspot::before {
  position: absolute;
  inset: -20px;
  border: 1px solid rgba(255, 237, 184, 0.5);
  border-radius: 50%;
  content: "";
  animation: iawBodyPulse 2.4s ease-in-out infinite;
}

.iaw-body-hotspot__core {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 50%;
  color: var(--iaw-ink);
  background: rgba(255, 254, 244, 0.88);
  font-size: 0.67rem;
  font-weight: 820;
  text-align: center;
}

.iaw-body-hotspot[data-target="jaw"] { left: 36%; top: 35%; }
.iaw-body-hotspot[data-target="shoulders"] { left: 36%; top: 44%; }
.iaw-body-hotspot[data-target="breath"],
.iaw-body-hotspot[data-target="pause"] { left: 36%; top: 51%; }

.iaw-body-hotspot.is-active { animation: iawBodyActive 2s ease-in-out infinite; }
@keyframes iawBodyPulse { 50% { opacity: .45; transform: scale(1.18); } }
@keyframes iawBodyActive { 50% { transform: translate(-50%, -50%) scale(1.22); } }

/* Builder, compass, and balance worlds */
.iaw-loom-seal,
.iaw-compass-core,
.iaw-balance-core {
  position: absolute;
  z-index: 12;
  width: 118px;
  height: 118px;
  transform: translate(-50%, -50%);
}

.iaw-loom-seal { left: 50%; top: 53%; }
.iaw-compass-core { left: 50%; top: 57%; }
.iaw-balance-core { left: 50%; top: 48%; }

.iaw.has-woven-statement .iaw__image,
.iaw.has-active-paths .iaw__image,
.iaw.is-balanced .iaw__image {
  filter: saturate(1.12) brightness(1.05);
}

.iaw.is-balanced::after,
.iaw.has-active-paths::after,
.iaw.has-woven-statement::after {
  position: absolute;
  z-index: 4;
  inset: 16% 14%;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 231, 153, 0.28), transparent 66%);
  animation: iawWorldGlow 1.1s ease-out both;
}

@keyframes iawWorldGlow { from { opacity: 0; transform: scale(.75); } }

/* Action path */
.iaw-path-stone {
  position: absolute;
  z-index: 11;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  color: var(--iaw-ink);
  background: rgba(255, 254, 246, 0.78);
  box-shadow: 0 5px 0 rgba(29, 67, 61, 0.12), 0 10px 26px rgba(17, 55, 49, 0.21);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(9px);
}

.iaw-path-stone[data-index="0"] { left: 29%; top: 76%; }
.iaw-path-stone[data-index="1"] { left: 37%; top: 66%; }
.iaw-path-stone[data-index="2"] { left: 47%; top: 56%; }
.iaw-path-stone[data-index="3"] { left: 57%; top: 45%; }
.iaw-path-stone[data-index="4"] { left: 66%; top: 34%; }

.iaw-path-stone.is-current::before {
  position: absolute;
  inset: -10px;
  border: 2px solid rgba(255, 218, 120, 0.72);
  border-radius: 50%;
  content: "";
  animation: iawHotspot 1.8s ease-out infinite;
}

.iaw-path-stone.is-complete {
  color: #fff;
  background: var(--iaw-teal);
}

.iaw-path-stone.is-reminding { animation: iawStoneRemind .42s ease; }
@keyframes iawStoneRemind { 50% { transform: translate(-50%, -50%) scale(1.2); } }

.iaw-plan-review__row {
  display: grid;
  grid-template-columns: 28px minmax(0, .8fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  padding: 9px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
}

.iaw-plan-review__row > span:first-child {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--iaw-accent, var(--iaw-teal));
  font-weight: 850;
}

.iaw-plan-review__row p { margin: 0; color: var(--iaw-ink-soft); }
.iaw-plan-review__actions { margin-top: 12px; }

/* Time world */
.iaw-time-portal {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 43%;
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55), transparent 22%),
    conic-gradient(var(--iaw-gold) calc(var(--iaw-time-progress, 0) * 1turn), rgba(49, 113, 105, 0.72) 0);
  box-shadow: 0 0 0 17px rgba(255, 234, 174, 0.13), 0 22px 50px rgba(24, 71, 65, 0.3);
  font: inherit;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.iaw-time-portal strong,
.iaw-time-portal span { display: block; text-align: center; }
.iaw-time-portal strong { font-size: 0.88rem; }
.iaw-time-portal span { margin-top: 4px; font-size: 0.84rem; font-weight: 800; }

.iaw-time-controls {
  position: absolute;
  z-index: 14;
  top: calc(50% + 103px);
  left: 43%;
  transform: translateX(-50%);
}

.iaw-time-lantern {
  position: absolute;
  z-index: 8;
  top: calc(29% + ((var(--lantern-index) % 3) * 10%));
  left: calc(22% + (var(--lantern-index) * 7.4%));
  width: 12px;
  height: 17px;
  border-radius: 50% 50% 45% 45%;
  opacity: 0.34;
  background: #917f61;
  transition: opacity 450ms ease, background 450ms ease, box-shadow 450ms ease, transform 450ms ease;
}

.iaw-time-lantern.is-lit {
  opacity: 1;
  background: #ffd985;
  box-shadow: 0 0 18px rgba(255, 214, 115, 0.9);
  transform: translateY(-4px) scale(1.18);
}

/* Constellation world */
.iaw-orbit-lines {
  position: absolute;
  z-index: 7;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.iaw-orbit-lines line {
  stroke: rgba(255, 225, 145, 0.38);
  stroke-width: .38;
  transition: stroke 400ms ease, stroke-width 400ms ease;
}

.iaw-orbit-lines line.is-strong,
.iaw.has-strong-links .iaw-orbit-lines line {
  stroke: rgba(255, 226, 135, 0.95);
  stroke-width: .72;
  filter: drop-shadow(0 0 5px rgba(255, 220, 120, 0.75));
}

.iaw-orbit-center {
  position: absolute;
  z-index: 10;
  top: 53%;
  left: 50%;
  width: 112px;
  height: 112px;
  transform: translate(-50%, -50%);
}

.iaw-orbit-node {
  position: absolute;
  z-index: 11;
  top: var(--iaw-y);
  left: var(--iaw-x);
  max-width: 190px;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  color: var(--iaw-ink);
  background: rgba(255, 254, 245, 0.86);
  box-shadow: 0 8px 24px rgba(11, 42, 37, 0.22);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 790;
  line-height: 1.15;
  cursor: grab;
  touch-action: none;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(10px);
}

.iaw-orbit-node.is-dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(1.06); }
.iaw-orbit-node.is-pulsing { animation: iawNodePulse .5s ease; }
@keyframes iawNodePulse { 50% { box-shadow: 0 0 0 12px rgba(255, 219, 120, .18), 0 8px 25px rgba(11, 42, 37, .25); } }

.iaw-orbit-continue { width: 100%; margin-top: 10px; }

button:focus-visible,
.iaw-entry textarea:focus-visible {
  outline: 3px solid rgba(98, 85, 200, 0.36);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .activity-card.has-immersive-world.is-open .activity-card-back,
  body > .activity-card-back.is-immersive-portal {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .activity-card.has-immersive-world .activity-card-back-header,
  .activity-card-back.is-immersive-portal .activity-card-back-header {
    top: 8px;
    right: 8px;
  }

  .activity-card.has-immersive-world .activity-card-back-close,
  .activity-card-back.is-immersive-portal .activity-card-back-close {
    min-width: 68px;
    min-height: 38px;
    padding: 6px 10px;
    font-size: 0.68rem;
  }

  .iaw {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
  }

  .iaw__topbar {
    top: 8px;
    right: 83px;
    left: 8px;
    min-height: 51px;
    padding: 8px 9px;
    border-radius: 15px;
  }

  .iaw__kicker { font-size: 0.55rem; }
  .iaw__title { font-size: 0.95rem; }
  .iaw__progress { gap: 4px; }
  .iaw__progress-step { width: 22px; height: 22px; font-size: 0.59rem; }

  .iaw__guide {
    top: 68px;
    right: 8px;
    left: 8px;
    width: auto;
    min-height: 52px;
    padding: 8px 10px;
    border-radius: 15px;
  }

  .iaw.is-direct .iaw__guide { width: auto; }
  .iaw.is-direct .iaw__step-label,
  .iaw.is-direct .iaw__guide-text { display: none; }
  .iaw.is-direct .iaw__guide { min-height: 45px; }

  .iaw__step-label { font-size: 0.55rem; }
  .iaw__guide-title { margin: 2px 0; font-size: 0.94rem; }
  .iaw__guide-text { font-size: 0.67rem; line-height: 1.28; }
  .iaw__guide-count { min-width: 37px; height: 37px; font-size: 0.63rem; }

  .iaw__tray {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 8px;
    width: auto;
    max-height: 42dvh;
    border-radius: 18px;
  }

  .iaw__tray-body {
    max-height: 31dvh;
    padding: 11px;
  }

  .iaw__tray-footer {
    min-height: 47px;
    padding: 7px 9px;
  }

  .iaw__privacy { max-width: 42%; font-size: 0.56rem; }
  .iaw-button { min-height: 36px; padding: 6px 11px; font-size: 0.69rem; }

  .iaw-intro__meta { padding: 8px 9px; }
  .iaw-intro__icon { width: 30px; height: 30px; }
  .iaw-intro__meta strong { font-size: 0.72rem; }
  .iaw-intro small { font-size: 0.55rem; }
  .iaw-intro__use,
  .iaw-intro__detail { margin-top: 8px; font-size: 0.7rem; line-height: 1.36; }

  .iaw-choice-grid { gap: 6px; }
  .iaw-choice { min-height: 48px; padding: 7px 7px 7px 34px; border-radius: 12px; font-size: 0.66rem; }
  .iaw-choice::before { left: 7px; width: 20px; height: 20px; }
  .iaw-selection__title { margin-bottom: 7px; font-size: 0.78rem; }
  .iaw-entry { grid-template-columns: 1fr; gap: 6px; margin-top: 7px; }
  .iaw-entry textarea { min-height: 45px; max-height: 68px; padding: 8px 9px; font-size: 0.7rem; }

  .iaw__result {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 8px;
    width: auto;
    max-height: 47dvh;
    grid-template-columns: 36px 1fr;
    gap: 9px;
    padding: 13px;
    border-radius: 18px;
  }

  .iaw__result-mark { width: 35px; height: 35px; box-shadow: 0 0 0 6px rgba(52, 127, 119, .13); }
  .iaw__result-title { margin-bottom: 7px; font-size: 1rem; }
  .iaw__result-summary { padding: 9px 10px; font-size: 0.72rem; line-height: 1.4; }
  .iaw__result-note { margin: 7px 0 9px; font-size: 0.59rem; }

  .iaw-scene-token {
    max-width: 42vw;
    padding: 6px 8px;
    font-size: 0.61rem;
  }

  .iaw-breath-orb-wrap { top: 45%; left: 50%; width: 190px; height: 190px; }
  .iaw-breath-orb { width: 96px; height: 96px; }
  .iaw-breath-orb strong { font-size: .86rem; }
  .iaw-breath-orb span { font-size: .59rem; }
  .iaw-breath-bloom { top: calc(31% + (var(--bloom-index) * 8%)); left: calc(16% + (var(--bloom-index) * 19%)); }

  .iaw-grounding-target { width: 39px; height: 39px; font-size: .68rem; }
  .iaw-grounding-target[data-target="plant"] { left: 24%; top: 40%; }
  .iaw-grounding-target[data-target="window"] { left: 68%; top: 24%; }
  .iaw-grounding-target[data-target="mug"] { left: 23%; top: 62%; }
  .iaw-grounding-target[data-target="notebook"] { left: 49%; top: 69%; }
  .iaw-grounding-target[data-target="blanket"] { left: 79%; top: 53%; }
  .iaw-grounding-target[data-target="stone"] { left: 76%; top: 70%; }
  .iaw-grounding-target[data-target="rug"] { left: 49%; top: 75%; }

  .iaw-anchor-orb { width: 98px; height: 98px; font-size: .69rem; }

  .iaw-body-hotspot { left: 50%; width: 78px; height: 78px; }
  .iaw-body-hotspot__core { width: 51px; height: 51px; font-size: .58rem; }
  .iaw-body-hotspot[data-target="jaw"] { left: 50%; top: 42%; }
  .iaw-body-hotspot[data-target="shoulders"] { left: 50%; top: 49%; }
  .iaw-body-hotspot[data-target="breath"],
  .iaw-body-hotspot[data-target="pause"] { left: 50%; top: 54%; }

  .iaw-loom-seal,
  .iaw-compass-core,
  .iaw-balance-core { width: 92px; height: 92px; font-size: .66rem; }
  .iaw-loom-seal { left: 50%; top: 52%; }
  .iaw-compass-core { left: 50%; top: 49%; }
  .iaw-balance-core { left: 50%; top: 47%; }

  .iaw-path-stone { width: 43px; height: 43px; font-size: .68rem; }
  .iaw-path-stone[data-index="0"] { left: 49%; top: 75%; }
  .iaw-path-stone[data-index="1"] { left: 46%; top: 65%; }
  .iaw-path-stone[data-index="2"] { left: 51%; top: 55%; }
  .iaw-path-stone[data-index="3"] { left: 54%; top: 45%; }
  .iaw-path-stone[data-index="4"] { left: 50%; top: 34%; }

  .iaw-plan-review__row { grid-template-columns: 24px 1fr; font-size: .63rem; }
  .iaw-plan-review__row > span:nth-child(3) { display: none; }
  .iaw-plan-review__row p { grid-column: 2; }

  .iaw-time-portal { top: 44%; left: 50%; width: 116px; height: 116px; }
  .iaw-time-controls { top: calc(44% + 82px); left: 50%; }
  .iaw-time-lantern { top: calc(26% + ((var(--lantern-index) % 3) * 10%)); left: calc(15% + (var(--lantern-index) * 9.6%)); }

  .iaw-orbit-center { top: 52%; width: 86px; height: 86px; font-size: .64rem; }
  .iaw-orbit-node { max-width: 34vw; min-height: 35px; padding: 6px 8px; font-size: .58rem; }
}

@media (max-width: 390px) {
  .iaw__topbar { right: 76px; }
  .iaw__title { font-size: .86rem; }
  .iaw__progress-step { width: 20px; height: 20px; }
  .iaw__tray { max-height: 44dvh; }
  .iaw__tray-body { max-height: 33dvh; }
  .iaw-choice { font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .iaw *,
  .iaw *::before,
  .iaw *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   MOBILE PORTAL SAFETY NET

   The launcher normally reparents the immersive face directly under body.
   If a mobile browser paints one frame before that reparent completes, remove
   the legacy flip-card containing blocks and keep the face viewport-fixed.
   Desktop rules are intentionally untouched.
   ========================================================= */

@media screen and (max-width: 760px) {
  body.activity-card-open
    .activity-card.has-immersive-world {
    perspective: none !important;
    transform: none !important;
    filter: none !important;
    contain: none !important;
  }

  body.activity-card-open
    .activity-card.has-immersive-world
    .activity-card-frame {
    transform: none !important;
    transform-style: flat !important;
    will-change: auto !important;
  }

  body.activity-card-open
    .activity-card.has-immersive-world
    .activity-card-front {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.activity-card-open
    .activity-card.has-immersive-world
    .activity-card-back:not(.is-immersive-portal) {
    position: fixed !important;
    z-index: 2147483000 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    display: flex !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    contain: layout paint !important;
  }

  body > .activity-card-back.is-immersive-portal,
  body.activity-card-open
    .activity-card.has-immersive-world
    .activity-card-back:not(.is-immersive-portal) {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
  }

  body > .activity-card-back.is-scrollable-immersive
    .activity-card-back-body,
  body.activity-card-open
    .activity-card.has-immersive-world
    .activity-card-back.is-scrollable-immersive
    .activity-card-back-body {
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   MOBILE CLOSED-CARD FLOW

   The activity faces overlap for the flip effect. On phones, the redesign
   removes the Try card's minimum height, so the absolutely positioned front
   face otherwise contributes no height and Explore more rises over it.
   Keep only the closed front face in normal flow; opening the activity
   restores the existing portal/flip lifecycle.
   ========================================================= */

@media screen and (max-width: 600px) {
  .try-core-card.activity-card:not(.is-open)
    .activity-card-front {
    position: relative !important;
    inset: auto !important;
  }
}