.lilith-thinking-tree {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(0, 1.4fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  align-items: start;
  gap: 6px 16px;
  margin-top: 14px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(164, 100, 205, .38);
  border-radius: 12px;
  background: radial-gradient(ellipse at 20% 60%, rgba(105, 42, 140, .18), transparent 55%), linear-gradient(115deg, rgba(13, 11, 24, .96), rgba(7, 12, 19, .95));
  color: #e9e1f2;
  box-shadow: inset 0 0 25px rgba(125, 63, 174, .08), 0 8px 26px rgba(0, 0, 0, .15);
}
.lilith-thinking-tree__visual {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 4;
  min-width: 0;
  height: 190px;
  overflow: hidden;
  border: 1px solid rgba(126, 76, 161, .3);
  border-radius: 9px;
  background: radial-gradient(ellipse at 50% 80%, rgba(29, 198, 231, .13), transparent 30%), radial-gradient(ellipse at 48% 30%, rgba(182, 70, 231, .15), transparent 55%), linear-gradient(180deg, rgba(8, 8, 17, .18), rgba(5, 8, 14, .72));
}
.lilith-thinking-tree__visual::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(226, 176, 255, .7) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(77, 225, 255, .45) 0 1px, transparent 1.5px);
  background-position: 13px 20px, 35px 47px;
  background-size: 59px 53px, 83px 71px;
  content: "";
  opacity: .28;
}
.lilith-thinking-tree__visual::after {
  position: absolute;
  right: 13%;
  bottom: 8%;
  left: 13%;
  height: 17px;
  border: 1px solid rgba(97, 220, 255, .25);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(114, 72, 255, .18), inset 0 0 16px rgba(90, 226, 255, .1);
  content: "";
}
.lilith-thinking-tree__trunk {
  position: absolute;
  z-index: 1;
  bottom: 6%;
  left: 49%;
  width: 15px;
  height: 80%;
  transform: rotate(3deg);
  transform-origin: center bottom;
  border: 1px solid rgba(255, 181, 255, .38);
  border-radius: 74% 30% 20% 35%;
  background: linear-gradient(90deg, #24142f, #b649bc 44%, #4e63a1 63%, #24142f);
  box-shadow: 0 0 17px rgba(197, 74, 255, .28), inset 0 0 7px rgba(232, 186, 255, .3);
}
.lilith-thinking-tree__trunk::after {
  position: absolute;
  right: -10px;
  bottom: 0;
  left: -10px;
  height: 28px;
  border-bottom: 2px solid rgba(235, 126, 255, .42);
  border-radius: 50%;
  content: "";
}
.lilith-thinking-tree__seed {
  position: absolute;
  z-index: 3;
  top: 9%;
  left: 50%;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  transform: translateX(-50%);
  border: 1px solid rgba(240, 193, 255, .7);
  border-radius: 50%;
  background: #1f1230;
  color: #ffb9fc;
  font-size: 10px;
  box-shadow: 0 0 13px rgba(228, 102, 255, .65);
}
.lilith-thinking-tree__seed::after { content: "✦"; }
.lilith-thinking-tree__seed.is-active {
  color: #69eeff;
  border-color: #69eeff;
  animation: lilith-tree-breathe 2.8s ease-in-out infinite;
}
.lilith-thinking-tree__branch {
  position: absolute;
  z-index: 2;
  bottom: var(--branch-level, 30%);
  left: 49%;
  width: var(--branch-length, 39%);
  height: 4px;
  transform: rotate(var(--branch-angle, -145deg)) scaleX(0);
  transform-origin: 0 50%;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(242, 133, 255, .92), rgba(112, 227, 255, .78));
  box-shadow: 0 0 9px rgba(207, 98, 255, .8);
  opacity: 0;
}
.lilith-thinking-tree__branch.is-done { animation: lilith-branch-grow .8s cubic-bezier(.2, .75, .2, 1) both; animation-delay: var(--branch-delay, 0ms); }
.lilith-thinking-tree__blossom {
  position: absolute;
  top: 50%;
  right: -9px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  transform: translateY(-50%) scale(.3);
  border: 1px solid rgba(255, 203, 255, .7);
  border-radius: 50%;
  background: #301843;
  color: #ffc4ff;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 0 9px #ec73ff;
  box-shadow: 0 0 14px rgba(223, 94, 255, .72);
  opacity: .2;
}
.lilith-thinking-tree__title {
  grid-column: 2;
  grid-row: 1;
  display: block;
  align-self: end;
  margin-top: 2px;
  color: #e49aff;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.lilith-thinking-tree__note {
  grid-column: 2;
  grid-row: 2;
  margin: 0 0 4px;
  color: #aaa0b9;
  font-size: 11px;
  line-height: 1.45;
}
.lilith-thinking-tree__steps {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  align-content: start;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lilith-thinking-tree__step {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 23px;
  color: #d9d1e3;
  font-size: 12px;
  line-height: 1.4;
}
.lilith-thinking-tree__flower {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: #171023;
  color: #ff9ce3;
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 0 9px rgba(255, 105, 220, .58);
}
.lilith-thinking-tree__step.is-active .lilith-thinking-tree__flower { color: #63eaff; animation: lilith-tree-breathe 2.8s ease-in-out infinite; }
.lilith-thinking-tree__status { color: #9b91a9; font: 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; white-space: nowrap; }
.lilith-thinking-tree__step.is-active .lilith-thinking-tree__status { color: #63eaff; }
.lilith-thinking-tree__step.is-failed .lilith-thinking-tree__flower,
.lilith-thinking-tree__step.is-failed .lilith-thinking-tree__status { color: #ff9cae; }
@keyframes lilith-tree-breathe { 50% { transform: scale(1.13); opacity: .68; } }
@keyframes lilith-branch-grow {
  from { opacity: 0; transform: rotate(var(--branch-angle)) scaleX(0); }
  to { opacity: .95; transform: rotate(var(--branch-angle)) scaleX(1); }
}
@keyframes lilith-flower-bloom {
  0% { opacity: .2; transform: translateY(-50%) scale(.3); }
  70% { opacity: 1; transform: translateY(-50%) scale(1.12); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
.lilith-thinking-tree__branch.is-done .lilith-thinking-tree__blossom { animation: lilith-flower-bloom .75s ease-out both; animation-delay: calc(var(--branch-delay, 0ms) + 450ms); }
@media (max-width: 560px) {
  .lilith-thinking-tree { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; gap: 7px; padding: 11px; }
  .lilith-thinking-tree__visual { grid-column: 1; grid-row: 1; height: 145px; }
  .lilith-thinking-tree__title { grid-column: 1; grid-row: 2; }
  .lilith-thinking-tree__note { grid-column: 1; grid-row: 3; }
  .lilith-thinking-tree__steps { grid-column: 1; grid-row: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .lilith-thinking-tree__seed.is-active,
  .lilith-thinking-tree__step.is-active .lilith-thinking-tree__flower,
  .lilith-thinking-tree__branch.is-done,
  .lilith-thinking-tree__branch.is-done .lilith-thinking-tree__blossom { animation: none; }
  .lilith-thinking-tree__branch.is-done { opacity: .95; transform: rotate(var(--branch-angle)) scaleX(1); }
  .lilith-thinking-tree__branch.is-done .lilith-thinking-tree__blossom { opacity: 1; transform: translateY(-50%) scale(1); }
}