/* Oraculo del I Ching V2 --------------------------------------------------- */
.oapp.oapp-iching-v2-enabled {
  max-width: 1040px;
}

.oapp-ic2 {
  --ic2-jade-950: #031512;
  --ic2-jade-900: #06231e;
  --ic2-jade-800: #0a382f;
  --ic2-jade-700: #115244;
  --ic2-jade-500: #25866d;
  --ic2-bronze-200: #ead59a;
  --ic2-bronze-300: #d7b96f;
  --ic2-bronze-500: #9d7130;
  --ic2-bronze-700: #60431c;
  --ic2-cinnabar: #ad3429;
  --ic2-cinnabar-bright: #db5949;
  --ic2-rice: #f5f0df;
  --ic2-rice-deep: #ded3b6;
  --ic2-ink: #17201c;
  --ic2-ink-soft: #4f5850;
  --ic2-line: rgba(105, 74, 26, .24);
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 40rem;
  overflow: hidden;
  border: 1px solid rgba(219, 191, 119, .38);
  border-radius: clamp(1rem, 3vw, 1.75rem);
  background:
    radial-gradient(circle at 12% 3%, rgba(48, 135, 107, .2), transparent 29rem),
    linear-gradient(145deg, var(--ic2-jade-900), var(--ic2-jade-950));
  box-shadow:
    0 1.4rem 4rem rgba(0, 12, 10, .28),
    inset 0 1px rgba(255, 246, 215, .08);
  color: #f8f2df;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

.oapp-ic2,
.oapp-ic2 *,
.oapp-ic2 *::before,
.oapp-ic2 *::after {
  box-sizing: border-box;
}

.oapp-ic2 [hidden] {
  display: none !important;
}

.oapp-ic2 button,
.oapp-ic2 textarea {
  font: inherit;
}

.oapp-ic2 button {
  -webkit-tap-highlight-color: transparent;
}

.oapp-ic2 h2,
.oapp-ic2 h3,
.oapp-ic2 h4,
.oapp-ic2 p,
.oapp-ic2 blockquote {
  margin-top: 0;
}

.oapp-ic2 h2,
.oapp-ic2 h3,
.oapp-ic2 h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  text-wrap: balance;
}

.oapp-ic2-atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.oapp-ic2-atmosphere::before,
.oapp-ic2-atmosphere::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  filter: blur(1px);
}

.oapp-ic2-atmosphere::before {
  top: -19rem;
  right: -13rem;
  width: 38rem;
  aspect-ratio: 1;
  border: 1px solid rgba(215, 185, 111, .12);
  box-shadow:
    0 0 0 4rem rgba(214, 184, 111, .025),
    0 0 0 9rem rgba(214, 184, 111, .018);
}

.oapp-ic2-atmosphere::after {
  bottom: -15rem;
  left: -11rem;
  width: 30rem;
  aspect-ratio: 1;
  background: rgba(19, 91, 73, .18);
  filter: blur(4rem);
}

.oapp-ic2-atmosphere > span {
  position: absolute;
  width: .22rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ic2-bronze-200);
  box-shadow: 0 0 .8rem rgba(234, 213, 154, .55);
  opacity: .36;
  animation: oapp-ic2-drift 8s ease-in-out infinite alternate;
}

.oapp-ic2-atmosphere > span:nth-child(1) { top: 11%; left: 8%; animation-delay: -2s; }
.oapp-ic2-atmosphere > span:nth-child(2) { top: 25%; right: 17%; animation-delay: -5s; }
.oapp-ic2-atmosphere > span:nth-child(3) { top: 64%; left: 19%; animation-delay: -3.5s; }
.oapp-ic2-atmosphere > span:nth-child(4) { top: 79%; right: 9%; animation-delay: -7s; }
.oapp-ic2-atmosphere > span:nth-child(5) { top: 48%; right: 47%; animation-delay: -1s; }

@keyframes oapp-ic2-drift {
  0% { transform: translate3d(0, 0, 0); opacity: .18; }
  100% { transform: translate3d(.35rem, -1.25rem, 0); opacity: .58; }
}

.oapp-ic2-step {
  position: relative;
  z-index: 1;
}

.oapp-ic2-eyebrow {
  margin-bottom: .65rem;
  color: var(--ic2-bronze-300);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .24em;
  line-height: 1.25;
  text-transform: uppercase;
}

.oapp-ic2-button {
  position: relative;
  display: inline-flex;
  min-height: 3.35rem;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  overflow: hidden;
  padding: .78rem 1.25rem;
  border: 1px solid rgba(238, 210, 137, .55);
  border-radius: .45rem;
  background:
    linear-gradient(180deg, rgba(50, 123, 100, .98), rgba(14, 68, 56, .98));
  box-shadow:
    0 .75rem 1.6rem rgba(3, 28, 23, .25),
    inset 0 1px rgba(255, 250, 227, .16),
    inset 0 -1px rgba(0, 0, 0, .38);
  color: #fff9e8;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.oapp-ic2-button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 28%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 247, 218, .2), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
}

.oapp-ic2-button:hover {
  border-color: var(--ic2-bronze-200);
  box-shadow:
    0 .9rem 2rem rgba(3, 28, 23, .33),
    0 0 0 3px rgba(215, 185, 111, .1),
    inset 0 1px rgba(255, 250, 227, .18);
  transform: translateY(-2px);
}

.oapp-ic2-button:hover::before {
  left: 118%;
}

.oapp-ic2-button:active {
  transform: translateY(0);
}

.oapp-ic2 :is(button, textarea, summary):focus {
  outline: 0;
}

.oapp-ic2 :is(button, textarea, summary):focus-visible {
  outline: 3px solid #f3d77e;
  outline-offset: 3px;
}

.oapp-ic2-button:disabled {
  cursor: wait;
  filter: saturate(.55);
  opacity: .68;
  transform: none;
}

.oapp-ic2-button-mark {
  position: relative;
  width: 1.35rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: 1px solid rgba(241, 216, 153, .72);
  border-radius: 50%;
}

.oapp-ic2-button-mark i,
.oapp-ic2-button-mark::before,
.oapp-ic2-button-mark::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: .65rem;
  height: 1px;
  content: "";
  background: var(--ic2-bronze-200);
  transform: translate(-50%, -50%);
}

.oapp-ic2-button-mark::before { transform: translate(-50%, -50%) rotate(60deg); }
.oapp-ic2-button-mark::after { transform: translate(-50%, -50%) rotate(-60deg); }

/* Intro -------------------------------------------------------------------- */
.oapp-ic2-intro {
  min-height: 42rem;
  background: var(--ic2-jade-950);
}

.oapp-ic2-hero {
  position: relative;
  display: grid;
  min-height: 38rem;
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .78fr);
  align-items: end;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  overflow: hidden;
  padding: clamp(3.25rem, 7vw, 6.25rem) clamp(1.25rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
  background:
    linear-gradient(90deg, rgba(2, 18, 15, .98) 0%, rgba(4, 27, 23, .89) 42%, rgba(3, 21, 18, .5) 72%, rgba(2, 15, 13, .75) 100%),
    linear-gradient(0deg, rgba(2, 17, 14, .94), transparent 58%),
    var(--ic2-hero) center / cover no-repeat,
    var(--ic2-jade-900);
}

.oapp-ic2-hero::before {
  position: absolute;
  inset: 1.1rem;
  content: "";
  border: 1px solid rgba(226, 198, 126, .2);
  border-radius: .15rem;
  pointer-events: none;
}

.oapp-ic2-hero::after {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  width: 6.5rem;
  height: 6.5rem;
  content: "";
  border-top: 2px solid rgba(226, 198, 126, .68);
  border-left: 2px solid rgba(226, 198, 126, .68);
  pointer-events: none;
}

.oapp-ic2-hero-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 42rem;
  padding-top: 1rem;
}

.oapp-ic2-seal,
.oapp-ic2-result-seal {
  position: relative;
  display: grid;
  width: 4.35rem;
  aspect-ratio: 1;
  margin-bottom: 1.35rem;
  place-items: center;
  border: 1px solid rgba(223, 193, 117, .64);
  border-radius: 50%;
  box-shadow:
    0 0 0 .35rem rgba(223, 193, 117, .035),
    inset 0 0 1.1rem rgba(229, 199, 123, .08);
}

.oapp-ic2-seal::before,
.oapp-ic2-seal::after,
.oapp-ic2-seal i,
.oapp-ic2-result-seal::before,
.oapp-ic2-result-seal::after,
.oapp-ic2-result-seal i {
  position: absolute;
  width: 2.2rem;
  height: .22rem;
  content: "";
  border-radius: 9rem;
  background: var(--ic2-bronze-300);
  box-shadow: 0 .5rem var(--ic2-bronze-300), 0 -.5rem var(--ic2-bronze-300);
}

.oapp-ic2-seal::after,
.oapp-ic2-result-seal::after {
  width: .45rem;
  height: .22rem;
  background: var(--ic2-jade-900);
  box-shadow: 0 .5rem var(--ic2-jade-900), 0 -.5rem var(--ic2-jade-900);
}

.oapp-ic2-seal i,
.oapp-ic2-result-seal i {
  width: .32rem;
  height: .32rem;
  border-radius: 50%;
  background: var(--ic2-cinnabar-bright);
  box-shadow: none;
}

.oapp-ic2-hero h2 {
  max-width: 11ch;
  margin-bottom: 1rem;
  color: #fffaf0;
  font-size: clamp(2.45rem, 6.2vw, 5.3rem);
  letter-spacing: -.045em;
  line-height: .98;
  text-shadow: 0 .25rem 1.8rem rgba(0, 0, 0, .28);
}

.oapp-ic2-lead {
  max-width: 39rem;
  margin-bottom: 0;
  color: rgba(248, 242, 223, .8);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.02rem, 2vw, 1.25rem);
  line-height: 1.7;
}

.oapp-ic2-question {
  position: relative;
  z-index: 2;
  align-self: end;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid rgba(225, 201, 142, .66);
  border-radius: .35rem;
  background:
    repeating-linear-gradient(0deg, rgba(101, 76, 35, .018) 0 1px, transparent 1px 5px),
    linear-gradient(140deg, rgba(250, 246, 230, .98), rgba(229, 219, 191, .98));
  box-shadow:
    0 2rem 4rem rgba(0, 8, 7, .42),
    inset 0 0 2.5rem rgba(126, 86, 29, .08);
  color: var(--ic2-ink);
}

.oapp-ic2-question::before,
.oapp-ic2-question::after {
  position: absolute;
  width: 2.1rem;
  height: 2.1rem;
  content: "";
  border-color: rgba(125, 86, 30, .46);
  pointer-events: none;
}

.oapp-ic2-question::before {
  top: .65rem;
  left: .65rem;
  border-top: 1px solid;
  border-left: 1px solid;
}

.oapp-ic2-question::after {
  right: .65rem;
  bottom: .65rem;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.oapp-ic2-question label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
}

.oapp-ic2-question label span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.14rem;
  font-weight: 700;
}

.oapp-ic2-question label small {
  color: #746e60;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.oapp-ic2-question-field {
  position: relative;
}

.oapp-ic2-question textarea {
  display: block;
  width: 100%;
  min-height: 6.2rem;
  resize: vertical;
  padding: 1rem 2.4rem 1rem 1rem;
  border: 1px solid rgba(78, 72, 56, .27);
  border-radius: .2rem;
  background: rgba(255, 253, 244, .66);
  box-shadow: inset 0 1px .35rem rgba(54, 38, 15, .06);
  color: #1d2923;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.5;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.oapp-ic2-question textarea::placeholder {
  color: #7c7d71;
  opacity: 1;
}

.oapp-ic2-question textarea:focus {
  border-color: var(--ic2-jade-500);
  background: rgba(255, 254, 247, .96);
  box-shadow: 0 0 0 3px rgba(37, 134, 109, .11), inset 0 1px .35rem rgba(54, 38, 15, .05);
}

.oapp-ic2-brush {
  position: absolute;
  right: .85rem;
  bottom: .75rem;
  width: .34rem;
  height: 1.65rem;
  border-radius: 60% 60% 45% 45%;
  background: var(--ic2-cinnabar);
  box-shadow: 0 -.45rem 0 -.05rem #7c5226;
  opacity: .72;
  transform: rotate(35deg);
  pointer-events: none;
}

.oapp-ic2-question-hint {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .65rem 0 1.15rem;
  color: #66685f;
  font-size: .76rem;
  line-height: 1.5;
}

.oapp-ic2-question-hint > span {
  width: .35rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  margin-top: .42rem;
  border-radius: 50%;
  background: var(--ic2-cinnabar);
}

.oapp-ic2-begin {
  width: 100%;
}

.oapp-ic2-begin > b {
  margin-left: auto;
  font-size: 1.2rem;
  font-weight: 400;
}

.oapp-ic2-method {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  min-height: 7.2rem;
  padding: 1.2rem clamp(1.25rem, 6vw, 5rem);
  border-top: 1px solid rgba(220, 190, 116, .2);
  background:
    linear-gradient(90deg, rgba(7, 44, 37, .98), rgba(3, 25, 21, .98));
}

.oapp-ic2-method-icon {
  position: relative;
  display: grid;
  width: 3.5rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, .42rem);
  place-content: center;
  gap: .2rem;
  border: 1px solid rgba(219, 189, 113, .36);
  border-radius: 50%;
}

.oapp-ic2-method-icon i {
  display: block;
  width: .42rem;
  height: 1.6rem;
  border-radius: 2rem;
  background: linear-gradient(var(--ic2-bronze-200), var(--ic2-bronze-500));
  transform: rotate(calc((var(--ic2-m, 0) - 1) * 12deg));
}

.oapp-ic2-method-icon i:nth-child(1) { --ic2-m: 0; }
.oapp-ic2-method-icon i:nth-child(2) { --ic2-m: 1; transform: translateY(-.2rem); }
.oapp-ic2-method-icon i:nth-child(3) { --ic2-m: 2; }

.oapp-ic2-method strong {
  display: block;
  margin-bottom: .2rem;
  color: var(--ic2-bronze-200);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}

.oapp-ic2-method p {
  max-width: 55rem;
  margin-bottom: 0;
  color: rgba(245, 239, 220, .68);
  font-size: .86rem;
}

/* Ceremonia ---------------------------------------------------------------- */
.oapp-ic2-ceremony {
  min-height: 43rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background:
    linear-gradient(rgba(4, 31, 26, .95), rgba(2, 20, 17, .98)),
    var(--ic2-hero) center / cover no-repeat;
}

.oapp-ic2-ceremony::before {
  position: absolute;
  inset: .9rem;
  z-index: -1;
  content: "";
  border: 1px solid rgba(222, 190, 109, .16);
  pointer-events: none;
}

.oapp-ic2-ceremony-head {
  display: flex;
  max-width: 74rem;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin: 0 auto 1.5rem;
}

.oapp-ic2-ceremony-head h2 {
  margin-bottom: .4rem;
  color: #fff9e9;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.1;
}

.oapp-ic2-ceremony-head > div > p:last-child {
  max-width: 46rem;
  margin-bottom: 0;
  color: rgba(247, 241, 221, .7);
}

.oapp-ic2-skip {
  flex: 0 0 auto;
  padding: .65rem .1rem;
  border: 0;
  border-bottom: 1px solid rgba(220, 188, 108, .5);
  background: transparent;
  color: var(--ic2-bronze-200);
  cursor: pointer;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease;
}

.oapp-ic2-skip span {
  display: inline-block;
  margin-left: .45rem;
  transition: transform .2s ease;
}

.oapp-ic2-skip:hover {
  border-color: var(--ic2-bronze-200);
  color: #fff5d8;
}

.oapp-ic2-skip:hover span {
  transform: translateX(.2rem);
}

.oapp-ic2-progress {
  display: grid;
  max-width: 74rem;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 1rem;
  margin: 0 auto 1.5rem;
}

.oapp-ic2-progress-copy {
  display: flex;
  min-width: 8rem;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
}

.oapp-ic2-progress-copy small {
  color: rgba(244, 234, 204, .56);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.oapp-ic2-progress-copy strong {
  color: var(--ic2-bronze-200);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.oapp-ic2-progress-copy strong i {
  margin: 0 .12rem;
  font-style: normal;
  opacity: .42;
}

.oapp-ic2-progress-track {
  display: block;
  height: 2px;
  overflow: hidden;
  background: rgba(236, 213, 155, .15);
}

.oapp-ic2-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--ic2-bronze-500), #f3dda0);
  box-shadow: 0 0 .7rem rgba(239, 211, 139, .55);
  transition: width .55s cubic-bezier(.2, .8, .2, 1);
}

.oapp-ic2-ritual {
  display: grid;
  max-width: 74rem;
  grid-template-columns: minmax(18rem, .88fr) minmax(20rem, 1.12fr);
  gap: clamp(1rem, 3vw, 2rem);
  margin: 0 auto;
}

.oapp-ic2-hexagram-build {
  position: relative;
  overflow: hidden;
  padding: clamp(1.3rem, 3vw, 2.1rem);
  border: 1px solid rgba(217, 188, 117, .45);
  border-radius: .35rem;
  background:
    repeating-linear-gradient(0deg, rgba(83, 62, 28, .018) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #f7f2e2, #ddd1b1);
  box-shadow: 0 1.4rem 3rem rgba(0, 7, 6, .26), inset 0 0 2.5rem rgba(87, 58, 18, .08);
  color: var(--ic2-ink);
}

.oapp-ic2-hexagram-build::after {
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 12rem;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(152, 106, 39, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 1.1rem rgba(152, 106, 39, .025), 0 0 0 2.2rem rgba(152, 106, 39, .018);
}

.oapp-ic2-hexagram-build > header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(95, 70, 30, .18);
}

.oapp-ic2-hexagram-build > header > span {
  width: .65rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: .1rem;
  background: var(--ic2-cinnabar);
  box-shadow: inset 0 0 0 1px rgba(91, 15, 11, .25);
}

.oapp-ic2-hexagram-build .oapp-ic2-eyebrow {
  margin-bottom: .15rem;
  color: #875a25;
}

.oapp-ic2-hexagram-build h3 {
  margin-bottom: 0;
  color: #1c2c25;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
}

.oapp-ic2-line-slots {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .48rem;
  margin: 1.35rem 0 1rem;
  padding: 0;
  list-style: none;
}

.oapp-ic2-line-slots > li {
  display: grid;
  min-height: 2.9rem;
  grid-template-columns: 1.5rem minmax(7rem, 1fr) minmax(5.8rem, .8fr);
  align-items: center;
  gap: .75rem;
  padding: .4rem .55rem;
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: background-color .4s ease, border-color .4s ease, transform .4s ease;
}

.oapp-ic2-line-slots > li[data-state="revealed"] {
  border-color: rgba(106, 75, 29, .14);
  background: rgba(255, 253, 245, .45);
  animation: oapp-ic2-line-in .56s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes oapp-ic2-line-in {
  from { opacity: 0; transform: translateY(.65rem); }
  to { opacity: 1; transform: translateY(0); }
}

.oapp-ic2-line-index {
  color: #8a806d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
}

.oapp-ic2-line-shape {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr .72rem 1fr;
  align-items: center;
}

.oapp-ic2-line-shape > i,
.oapp-ic2-line-shape > b {
  display: block;
  height: .52rem;
  background: #c9c0aa;
  box-shadow: inset 0 1px rgba(255, 255, 255, .32);
  transition: background-color .35s ease, box-shadow .35s ease, opacity .35s ease;
}

.oapp-ic2-line-shape > i:first-child { border-radius: .12rem 0 0 .12rem; }
.oapp-ic2-line-shape > i:last-child { border-radius: 0 .12rem .12rem 0; }
.oapp-ic2-line-shape > b { opacity: 0; }

.oapp-ic2-line-slots > li[data-state="revealed"] .oapp-ic2-line-shape > :is(i, b) {
  background: #173a30;
  box-shadow: 0 1px 2px rgba(8, 31, 25, .16), inset 0 1px rgba(255, 255, 255, .08);
}

.oapp-ic2-line-slots > li[data-type="yang"] .oapp-ic2-line-shape > b {
  opacity: 1;
}

.oapp-ic2-line-slots > li[data-changing="true"] .oapp-ic2-line-shape > :is(i, b) {
  background: var(--ic2-cinnabar);
  box-shadow: 0 0 .65rem rgba(173, 52, 41, .24), inset 0 1px rgba(255, 255, 255, .1);
}

.oapp-ic2-line-slots > li[data-changing="true"] .oapp-ic2-line-index {
  color: var(--ic2-cinnabar);
  font-weight: 800;
}

.oapp-ic2-line-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

.oapp-ic2-line-meta small {
  min-height: .85rem;
  color: #98723c;
  font-size: .65rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.oapp-ic2-line-meta strong {
  overflow: hidden;
  max-width: 100%;
  color: #7c7c70;
  font-size: .68rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oapp-ic2-line-slots > li[data-changing="true"] .oapp-ic2-line-meta strong {
  color: #9a342b;
}

.oapp-ic2-build-note {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  color: #68675e;
  font-size: .72rem;
  font-style: italic;
  text-align: center;
}

.oapp-ic2-altar {
  position: relative;
  display: flex;
  min-height: 30rem;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.7rem);
  border: 1px solid rgba(213, 180, 99, .34);
  border-radius: .35rem;
  background:
    radial-gradient(ellipse at 50% 63%, rgba(52, 145, 112, .23), transparent 45%),
    linear-gradient(145deg, rgba(12, 54, 45, .94), rgba(2, 20, 17, .98));
  box-shadow: 0 1.4rem 3rem rgba(0, 7, 6, .3), inset 0 0 3rem rgba(0, 0, 0, .24);
  text-align: center;
}

.oapp-ic2-altar::before {
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(80%, 25rem);
  aspect-ratio: 2.7;
  content: "";
  border: 1px solid rgba(226, 197, 127, .2);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(236, 211, 150, .07), transparent 65%);
  box-shadow: 0 1.3rem 1.5rem rgba(0, 0, 0, .28), inset 0 -.6rem 1rem rgba(0, 0, 0, .25);
  transform: translate(-50%, -50%);
}

.oapp-ic2-altar > header {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

.oapp-ic2-altar h3 {
  margin-bottom: .45rem;
  color: #fff8e5;
  font-size: clamp(1.45rem, 3vw, 2.05rem);
}

.oapp-ic2-altar header > p:last-child {
  margin-bottom: 0;
  color: rgba(245, 239, 218, .65);
  font-size: .88rem;
}

.oapp-ic2-coins {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 25rem);
  min-height: 9.5rem;
  align-items: center;
  justify-content: center;
  gap: clamp(.75rem, 3vw, 1.4rem);
  perspective: 55rem;
}

.oapp-ic2-coin {
  position: relative;
  display: block;
  width: clamp(4.6rem, 10vw, 6.25rem);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: .28rem solid #8a5c1d;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 8deg, rgba(255, 242, 177, .18) 0 3deg, transparent 3deg 26deg),
    radial-gradient(circle at 37% 30%, #f2d580 0 12%, #c39136 38%, #77501e 74%, #b9822e 100%);
  box-shadow:
    0 .75rem 1rem rgba(0, 0, 0, .42),
    inset 0 0 0 .18rem rgba(255, 224, 139, .2),
    inset 0 0 1.1rem rgba(73, 42, 9, .52);
  transform: rotate(calc((var(--ic2-coin) - 1) * 7deg));
  transform-style: preserve-3d;
}

.oapp-ic2-coin::before,
.oapp-ic2-coin::after {
  position: absolute;
  inset: 12%;
  content: "";
  border: 1px solid rgba(89, 52, 11, .55);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 229, 156, .13);
}

.oapp-ic2-coin::after {
  inset: 22%;
  border-style: dotted;
  opacity: .62;
}

.oapp-ic2-coin-edge {
  position: absolute;
  right: 8%;
  bottom: -10%;
  left: 8%;
  height: 14%;
  border-radius: 50%;
  background: #5a3712;
  filter: blur(2px);
  opacity: .42;
}

.oapp-ic2-coin-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.oapp-ic2-coin-face > i {
  position: relative;
  z-index: 2;
  display: block;
  width: 25%;
  aspect-ratio: 1;
  border: .18rem solid #6d4416;
  border-radius: .1rem;
  background: #082b24;
  box-shadow:
    inset 0 0 .25rem rgba(0, 0, 0, .8),
    0 0 0 .12rem rgba(235, 203, 120, .32);
}

.oapp-ic2-coin-face > b,
.oapp-ic2-coin-face::before,
.oapp-ic2-coin-face::after {
  position: absolute;
  width: 55%;
  height: .16rem;
  content: "";
  background: rgba(102, 60, 14, .7);
  transform: rotate(45deg);
}

.oapp-ic2-coin-face::after { transform: rotate(-45deg); }
.oapp-ic2-coin-face > b { width: 46%; transform: rotate(90deg); }

.oapp-ic2-coin[data-face="yin"] {
  filter: brightness(.78) saturate(.78);
  transform: rotate(calc((var(--ic2-coin) - 1) * 7deg + 180deg));
}

.oapp-ic2-coin[data-face="yang"] {
  filter: brightness(1.08) saturate(1.12);
}

.oapp-ic2-coin[data-state="tossing"],
.oapp-ic2-coin.is-tossing {
  animation: oapp-ic2-coin-toss 1.18s cubic-bezier(.2, .74, .3, 1) both;
  animation-delay: calc(var(--ic2-coin) * 70ms);
}

@keyframes oapp-ic2-coin-toss {
  0% { filter: blur(0); transform: translate3d(0, 0, 0) rotateX(0) rotateZ(0); }
  24% { filter: blur(.3px); transform: translate3d(calc((var(--ic2-coin) - 1) * .65rem), -4.6rem, 1rem) rotateX(420deg) rotateZ(35deg); }
  56% { transform: translate3d(calc((var(--ic2-coin) - 1) * -.35rem), -1.1rem, 0) rotateX(790deg) rotateZ(-18deg); }
  76% { transform: translate3d(0, -.42rem, 0) rotateX(910deg) rotateZ(7deg); }
  100% { filter: blur(0); transform: translate3d(0, 0, 0) rotateX(1080deg) rotateZ(calc((var(--ic2-coin) - 1) * 7deg)); }
}

.oapp-ic2-cast {
  z-index: 1;
  min-width: min(100%, 17rem);
}

.oapp-ic2-cast-hint {
  position: relative;
  z-index: 1;
  margin: .75rem 0 0;
  color: rgba(244, 234, 207, .52);
  font-size: .72rem;
}

.oapp-ic2-live {
  min-height: 1.35rem;
  margin: 1rem auto 0;
  color: var(--ic2-bronze-200);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-align: center;
}

/* Resultado ---------------------------------------------------------------- */
.oapp-ic2-result {
  min-height: 43rem;
  padding: clamp(1.5rem, 5vw, 4.6rem);
  background:
    repeating-linear-gradient(0deg, rgba(92, 68, 31, .016) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 95% 7%, rgba(155, 110, 39, .11), transparent 27rem),
    linear-gradient(145deg, #f8f3e5, #e1d5b8);
  color: var(--ic2-ink);
}

.oapp-ic2-result::before {
  position: absolute;
  inset: .9rem;
  z-index: -1;
  content: "";
  border: 1px solid rgba(119, 82, 29, .2);
  pointer-events: none;
}

.oapp-ic2-result-head {
  max-width: 51rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.oapp-ic2-result-seal {
  margin: 0 auto 1rem;
  border-color: rgba(115, 79, 27, .45);
}

.oapp-ic2-result-seal::before,
.oapp-ic2-result-seal i {
  background: #8d6429;
  box-shadow: 0 .5rem #8d6429, 0 -.5rem #8d6429;
}

.oapp-ic2-result-seal::after {
  background: var(--ic2-rice);
  box-shadow: 0 .5rem var(--ic2-rice), 0 -.5rem var(--ic2-rice);
}

.oapp-ic2-result-head .oapp-ic2-eyebrow,
.oapp-ic2-changing .oapp-ic2-eyebrow {
  color: #895c22;
}

.oapp-ic2-result-head h2 {
  margin-bottom: .65rem;
  color: #143029;
  font-size: clamp(2rem, 5vw, 3.8rem);
  letter-spacing: -.03em;
  line-height: 1.05;
}

.oapp-ic2-result-head > p:last-child {
  margin-bottom: 0;
  color: #62665f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.98rem, 2vw, 1.13rem);
}

.oapp-ic2-result-question {
  display: flex;
  max-width: 58rem;
  align-items: flex-start;
  gap: 1rem;
  margin: 0 auto 2rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(122, 84, 31, .2);
  border-left: 3px solid var(--ic2-cinnabar);
  background: rgba(255, 253, 245, .45);
}

.oapp-ic2-result-question > span {
  width: .55rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  margin-top: .45rem;
  border-radius: 50%;
  background: var(--ic2-cinnabar);
  box-shadow: 0 0 0 .3rem rgba(173, 52, 41, .08);
}

.oapp-ic2-result-question small {
  display: block;
  margin-bottom: .25rem;
  color: #896735;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.oapp-ic2-result-question p {
  margin-bottom: 0;
  color: #26332d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
}

.oapp-ic2-reading {
  display: grid;
  max-width: 70rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(.85rem, 2.5vw, 1.5rem);
  margin: 0 auto 2rem;
}

.oapp-ic2-hexagram-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(218, 188, 115, .38);
  border-radius: .35rem;
  background:
    radial-gradient(circle at 100% 0, rgba(58, 144, 113, .18), transparent 17rem),
    linear-gradient(145deg, #0b352c, #041b17);
  box-shadow: 0 1.2rem 2.8rem rgba(24, 36, 31, .17), inset 0 1px rgba(255, 247, 220, .07);
  color: #f5eedb;
}

.oapp-ic2-hexagram-card::before {
  position: absolute;
  inset: .55rem;
  content: "";
  border: 1px solid rgba(223, 193, 118, .12);
  pointer-events: none;
}

.oapp-ic2-hexagram-card > header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: .75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(224, 196, 126, .18);
}

.oapp-ic2-card-index {
  display: grid;
  width: 2.5rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(225, 198, 132, .4);
  border-radius: 50%;
  color: var(--ic2-bronze-200);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .92rem;
}

.oapp-ic2-hexagram-card .oapp-ic2-eyebrow {
  margin-bottom: .1rem;
  font-size: .59rem;
}

.oapp-ic2-hexagram-card h3 {
  margin-bottom: 0;
  color: #fff7e4;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.oapp-ic2-character {
  color: rgba(236, 210, 147, .42);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.2rem;
  line-height: 1;
}

.oapp-ic2-hexagram-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(7.5rem, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 1rem;
  padding: 1.45rem 0 1.25rem;
}

.oapp-ic2-result-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

.oapp-ic2-result-figure > span {
  min-height: 1em;
  color: var(--ic2-bronze-300);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.oapp-ic2-result-lines {
  display: grid;
  width: min(100%, 9.5rem);
  gap: .48rem;
}

.oapp-ic2-result-line {
  display: grid;
  grid-template-columns: 1fr .75rem 1fr;
  align-items: center;
}

.oapp-ic2-result-line > :is(i, b) {
  display: block;
  height: .5rem;
  background: #f0ddab;
  box-shadow: 0 0 .5rem rgba(240, 221, 171, .08);
}

.oapp-ic2-result-line > i:first-child { border-radius: .1rem 0 0 .1rem; }
.oapp-ic2-result-line > i:last-child { border-radius: 0 .1rem .1rem 0; }
.oapp-ic2-result-line > b { opacity: 0; }
.oapp-ic2-result-line[data-type="yang"] > b { opacity: 1; }

.oapp-ic2-result-line[data-changing="true"] > :is(i, b) {
  background: var(--ic2-cinnabar-bright);
  box-shadow: 0 0 .55rem rgba(219, 89, 73, .35);
}

.oapp-ic2-result-name small {
  display: block;
  margin-bottom: .3rem;
  color: var(--ic2-bronze-300);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.oapp-ic2-result-name h4 {
  margin-bottom: 0;
  color: #fff8e8;
  font-size: clamp(1.45rem, 2.7vw, 1.95rem);
  hyphens: auto;
  letter-spacing: -.025em;
  line-height: 1.08;
  overflow-wrap: break-word;
}

.oapp-ic2-oracle-copy {
  position: relative;
  z-index: 1;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(224, 196, 126, .18);
}

.oapp-ic2-copy-label {
  margin-bottom: .45rem;
  color: var(--ic2-bronze-300);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.oapp-ic2-oracle-copy > p:last-child {
  margin-bottom: 0;
  color: rgba(247, 240, 220, .82);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .98rem;
  line-height: 1.7;
  white-space: pre-line;
}

.oapp-ic2-change-arrow {
  display: flex;
  width: 2.2rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: #8a6029;
}

.oapp-ic2-change-arrow span {
  width: 1px;
  height: 2.7rem;
  background: linear-gradient(transparent, rgba(131, 89, 35, .46));
}

.oapp-ic2-change-arrow span:last-child {
  background: linear-gradient(rgba(131, 89, 35, .46), transparent);
}

.oapp-ic2-change-arrow i {
  position: relative;
  display: block;
  width: 1.85rem;
  aspect-ratio: 1;
  border: 1px solid rgba(134, 91, 35, .35);
  border-radius: 50%;
}

.oapp-ic2-change-arrow i::before,
.oapp-ic2-change-arrow i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .7rem;
  height: 1px;
  content: "";
  background: #8c622d;
  transform: translate(-58%, -50%);
}

.oapp-ic2-change-arrow i::after {
  width: .35rem;
  transform: translate(-8%, -50%) rotate(45deg);
  transform-origin: right center;
}

.oapp-ic2-stable {
  grid-column: 2 / 4;
  display: flex;
  align-self: center;
  gap: 1rem;
  padding: 1.3rem;
  border: 1px solid rgba(117, 80, 29, .2);
  background: rgba(255, 253, 245, .4);
}

.oapp-ic2-stable-mark {
  position: relative;
  display: grid;
  width: 3.5rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(110, 76, 30, .35);
  border-radius: 50%;
}

.oapp-ic2-stable-mark::before,
.oapp-ic2-stable-mark::after,
.oapp-ic2-stable-mark i {
  position: absolute;
  width: 1.55rem;
  height: .18rem;
  content: "";
  border-radius: 1rem;
  background: #715126;
}

.oapp-ic2-stable-mark::before { transform: translateY(-.42rem); }
.oapp-ic2-stable-mark::after { transform: translateY(.42rem); }

.oapp-ic2-stable h3 {
  margin-bottom: .25rem;
  color: #18362d;
  font-size: 1.3rem;
}

.oapp-ic2-stable p:last-child {
  margin-bottom: 0;
  color: #62675f;
  font-size: .87rem;
}

.oapp-ic2-changing {
  max-width: 58rem;
  margin: 0 auto 1.8rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(121, 84, 32, .22);
  background: rgba(255, 253, 245, .42);
  box-shadow: inset 0 0 2.6rem rgba(113, 79, 28, .035);
}

.oapp-ic2[data-reading="stable"] .oapp-ic2-changing {
  display: none;
}

.oapp-ic2-section-head {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.oapp-ic2-section-head > span {
  width: .48rem;
  min-height: 3.7rem;
  flex: 0 0 auto;
  background: var(--ic2-cinnabar);
}

.oapp-ic2-section-head h3 {
  margin-bottom: .35rem;
  color: #17332b;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.oapp-ic2-section-head > div > p:last-child {
  margin-bottom: 0;
  color: #686a61;
  font-size: .88rem;
}

.oapp-ic2-changing-list {
  display: grid;
  gap: .6rem;
}

.oapp-ic2-change {
  border: 1px solid rgba(111, 77, 30, .2);
  border-radius: .2rem;
  background: rgba(255, 254, 248, .52);
}

.oapp-ic2-change summary {
  display: grid;
  min-height: 4.35rem;
  grid-template-columns: 3.25rem 1fr 1.8rem;
  align-items: center;
  gap: .85rem;
  padding: .7rem 1rem;
  color: #20322b;
  cursor: pointer;
  list-style: none;
}

.oapp-ic2-change summary::-webkit-details-marker {
  display: none;
}

.oapp-ic2-change summary:hover {
  background: rgba(34, 94, 76, .045);
}

.oapp-ic2-change-number {
  display: grid;
  width: 3.1rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--ic2-cinnabar);
  box-shadow: inset 0 0 0 1px rgba(88, 18, 13, .25);
  color: #fff7e6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .72rem;
  line-height: 1.05;
  text-align: center;
}

.oapp-ic2-change-title {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.oapp-ic2-change-title small {
  color: #8a6737;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.oapp-ic2-change-title strong {
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.04rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oapp-ic2-change-toggle {
  position: relative;
  display: block;
  width: 1.7rem;
  aspect-ratio: 1;
  border: 1px solid rgba(109, 75, 28, .28);
  border-radius: 50%;
}

.oapp-ic2-change-toggle::before,
.oapp-ic2-change-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .62rem;
  height: 1px;
  content: "";
  background: #755329;
  transition: transform .22s ease;
  transform: translate(-50%, -50%);
}

.oapp-ic2-change-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.oapp-ic2-change[open] .oapp-ic2-change-toggle::after {
  transform: translate(-50%, -50%) rotate(0);
}

.oapp-ic2-change-body {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: .85rem;
  padding: 0 1rem 1.1rem;
}

.oapp-ic2-change-body > span {
  width: 1px;
  justify-self: center;
  background: linear-gradient(var(--ic2-cinnabar), transparent);
}

.oapp-ic2-change-body p {
  margin-bottom: 0;
  padding-top: .8rem;
  border-top: 1px solid rgba(108, 76, 31, .15);
  color: #4f5751;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .95rem;
  line-height: 1.7;
  white-space: pre-line;
}

.oapp-ic2-no-changing {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(36, 98, 78, .18);
  background: rgba(22, 82, 67, .045);
}

.oapp-ic2-no-changing > span {
  position: relative;
  display: grid;
  width: 2.7rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(32, 93, 75, .28);
  border-radius: 50%;
}

.oapp-ic2-no-changing > span::before,
.oapp-ic2-no-changing > span::after,
.oapp-ic2-no-changing > span i {
  position: absolute;
  width: 1.15rem;
  height: 2px;
  content: "";
  border-radius: 1rem;
  background: #246b58;
}

.oapp-ic2-no-changing > span::before { transform: translateY(-.32rem); }
.oapp-ic2-no-changing > span::after { transform: translateY(.32rem); }

.oapp-ic2-no-changing strong {
  display: block;
  margin-bottom: .2rem;
  color: #1a4337;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}

.oapp-ic2-no-changing p {
  margin-bottom: 0;
  color: #626a63;
  font-size: .85rem;
}

.oapp-ic2-sequence-wrap {
  display: flex;
  max-width: 58rem;
  align-items: center;
  gap: 1rem;
  margin: 0 auto 1.7rem;
  padding: .9rem 1rem;
  border-top: 1px solid rgba(112, 77, 29, .18);
  border-bottom: 1px solid rgba(112, 77, 29, .18);
}

.oapp-ic2-sequence-mark {
  display: flex;
  width: 2.6rem;
  flex: 0 0 auto;
  gap: .17rem;
}

.oapp-ic2-sequence-mark i {
  display: block;
  width: .75rem;
  height: 2.1rem;
  border-radius: 1rem;
  background: linear-gradient(#2a725e, #114639);
  transform: rotate(-7deg);
}

.oapp-ic2-sequence-mark i:nth-child(2) { transform: translateY(-.2rem); }
.oapp-ic2-sequence-mark i:nth-child(3) { transform: rotate(7deg); }

.oapp-ic2-sequence-wrap small {
  display: block;
  color: #866434;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.oapp-ic2-sequence-wrap p {
  margin-bottom: 0;
  color: #233b32;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .95rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.oapp-ic2-actions {
  display: flex;
  max-width: 58rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin: 0 auto;
}

.oapp-ic2-actions .oapp-ic2-button {
  min-width: 12rem;
}

.oapp-ic2-copy,
.oapp-ic2-again {
  border-color: rgba(41, 89, 74, .32);
  background: rgba(255, 253, 245, .34);
  box-shadow: none;
  color: #194538;
}

.oapp-ic2-copy:hover,
.oapp-ic2-again:hover {
  border-color: rgba(32, 91, 73, .64);
  box-shadow: 0 .55rem 1.2rem rgba(24, 64, 52, .08);
}

.oapp-ic2-share-status {
  min-height: 1.35rem;
  margin: .8rem auto 0;
  color: #27604f;
  font-size: .76rem;
  font-weight: 700;
  text-align: center;
}

/* Estados ------------------------------------------------------------------ */
.oapp-ic2[data-state="ceremony"] .oapp-ic2-ceremony,
.oapp-ic2[data-state="result"] .oapp-ic2-result {
  animation: oapp-ic2-stage-in .5s ease both;
}

@keyframes oapp-ic2-stage-in {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Adaptacion --------------------------------------------------------------- */
@media (max-width: 900px) {
  .oapp-ic2-hero {
    min-height: 42rem;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, .82fr);
    gap: 1.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
  }

  .oapp-ic2-hero h2 {
    font-size: clamp(2.35rem, 7vw, 4rem);
  }

  .oapp-ic2-ritual {
    grid-template-columns: minmax(17rem, .9fr) minmax(17rem, 1.1fr);
  }

  .oapp-ic2-line-slots > li {
    grid-template-columns: 1.2rem 1fr;
  }

  .oapp-ic2-line-meta {
    display: none;
  }

  .oapp-ic2-reading {
    grid-template-columns: 1fr;
    max-width: 37rem;
  }

  .oapp-ic2-change-arrow {
    width: 100%;
    flex-direction: row;
  }

  .oapp-ic2-change-arrow span {
    width: 3.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(131, 89, 35, .46));
  }

  .oapp-ic2-change-arrow span:last-child {
    background: linear-gradient(90deg, rgba(131, 89, 35, .46), transparent);
  }

  .oapp-ic2-change-arrow i {
    transform: rotate(90deg);
  }

  .oapp-ic2-stable {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .oapp-ic2 {
    min-height: 34rem;
    border-radius: .8rem;
  }

  .oapp-ic2-intro {
    min-height: 0;
  }

  .oapp-ic2-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.7rem;
    padding: 3.7rem 1.15rem 2rem;
    background:
      linear-gradient(0deg, rgba(2, 18, 15, .99) 0%, rgba(3, 24, 20, .9) 52%, rgba(2, 18, 15, .55) 100%),
      var(--ic2-hero) 58% center / cover no-repeat,
      var(--ic2-jade-900);
  }

  .oapp-ic2-hero::before {
    inset: .65rem;
  }

  .oapp-ic2-hero::after {
    top: .65rem;
    left: .65rem;
    width: 4rem;
    height: 4rem;
  }

  .oapp-ic2-seal,
  .oapp-ic2-result-seal {
    width: 3.7rem;
  }

  .oapp-ic2-hero-copy {
    padding: 0 .35rem;
  }

  .oapp-ic2-hero h2 {
    max-width: 12ch;
    font-size: clamp(2.35rem, 13vw, 3.6rem);
  }

  .oapp-ic2-lead {
    font-size: 1rem;
    line-height: 1.62;
  }

  .oapp-ic2-question {
    padding: 1.2rem;
  }

  .oapp-ic2-question label {
    align-items: flex-start;
    flex-direction: column;
    gap: .15rem;
  }

  .oapp-ic2-method {
    align-items: flex-start;
    padding: 1.2rem 1.1rem;
  }

  .oapp-ic2-method-icon {
    width: 3rem;
  }

  .oapp-ic2-ceremony,
  .oapp-ic2-result {
    padding: 2.2rem 1rem;
  }

  .oapp-ic2-ceremony::before,
  .oapp-ic2-result::before {
    inset: .5rem;
  }

  .oapp-ic2-ceremony-head {
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem;
  }

  .oapp-ic2-ceremony-head h2 {
    font-size: 2rem;
  }

  .oapp-ic2-skip {
    align-self: flex-end;
  }

  .oapp-ic2-progress {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .oapp-ic2-progress-copy {
    width: 100%;
  }

  .oapp-ic2-ritual {
    grid-template-columns: 1fr;
  }

  .oapp-ic2-hexagram-build,
  .oapp-ic2-altar {
    padding: 1.2rem;
  }

  .oapp-ic2-line-slots {
    gap: .3rem;
  }

  .oapp-ic2-line-slots > li {
    min-height: 2.55rem;
    padding: .3rem;
  }

  .oapp-ic2-altar {
    min-height: 27rem;
  }

  .oapp-ic2-coins {
    min-height: 8rem;
    gap: .7rem;
  }

  .oapp-ic2-coin {
    width: clamp(4rem, 23vw, 5.5rem);
  }

  .oapp-ic2-result-head {
    padding: 0 .4rem;
  }

  .oapp-ic2-result-head h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .oapp-ic2-result-question {
    margin-right: .2rem;
    margin-left: .2rem;
  }

  .oapp-ic2-hexagram-card {
    padding: 1.15rem;
  }

  .oapp-ic2-hexagram-card > header {
    grid-template-columns: 2.25rem 1fr auto;
  }

  .oapp-ic2-card-index {
    width: 2.25rem;
  }

  .oapp-ic2-character {
    font-size: 1.7rem;
  }

  .oapp-ic2-hexagram-main {
    grid-template-columns: minmax(6.5rem, .78fr) minmax(0, 1.22fr);
  }

  .oapp-ic2-result-name h4 {
    font-size: 1.55rem;
  }

  .oapp-ic2-changing {
    padding: 1.1rem;
  }

  .oapp-ic2-change summary {
    grid-template-columns: 2.25rem 1fr 1.7rem;
    gap: .65rem;
    padding: .65rem .7rem;
  }

  .oapp-ic2-change-number {
    width: 2.2rem;
  }

  .oapp-ic2-change-body {
    grid-template-columns: 2.25rem 1fr;
    gap: .65rem;
    padding-right: .7rem;
    padding-left: .7rem;
  }

  .oapp-ic2-stable,
  .oapp-ic2-no-changing {
    flex-direction: column;
  }

  .oapp-ic2-sequence-wrap {
    align-items: flex-start;
  }

  .oapp-ic2-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .oapp-ic2-actions .oapp-ic2-button {
    min-width: 0;
  }

  .oapp-ic2-share {
    grid-column: 1 / -1;
  }
}

@media (max-width: 400px) {
  .oapp-ic2-hexagram-main {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .oapp-ic2-result-lines {
    width: 8.5rem;
  }

  .oapp-ic2-actions {
    grid-template-columns: 1fr;
  }

  .oapp-ic2-share {
    grid-column: auto;
  }
}

/* Preferencias de accesibilidad ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .oapp-ic2 *,
  .oapp-ic2 *::before,
  .oapp-ic2 *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .oapp-ic2-coin[data-state="tossing"],
  .oapp-ic2-coin.is-tossing {
    transform: none;
  }
}

@media (forced-colors: active) {
  .oapp-ic2,
  .oapp-ic2-hero,
  .oapp-ic2-ceremony,
  .oapp-ic2-result,
  .oapp-ic2-question,
  .oapp-ic2-hexagram-build,
  .oapp-ic2-altar,
  .oapp-ic2-hexagram-card,
  .oapp-ic2-changing,
  .oapp-ic2-change {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: auto;
  }

  .oapp-ic2 :is(h2, h3, h4, p, small, strong, span, label) {
    color: CanvasText;
  }

  .oapp-ic2-button,
  .oapp-ic2-skip {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .oapp-ic2-line-shape > :is(i, b),
  .oapp-ic2-result-line > :is(i, b) {
    background: CanvasText;
  }

  .oapp-ic2-question textarea {
    border: 1px solid FieldText;
    background: Field;
    color: FieldText;
  }
}