/* Praxoria Startseite – v536: Premium-Feinschliff für Schreib- und Prüfeffekt.
   Visuelle Abstimmung; bestehende Inhalts-Texte bleiben unverändert. */

html body.home.homeRefinedV536 #studioPanel2 .studioTileQuote{
  background:
    radial-gradient(420px 180px at 12% 8%, color-mix(in oklab, var(--accent2) 5%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklab, var(--surface) 90%, transparent), color-mix(in oklab, var(--surface2) 42%, transparent)) !important;
}

html body.home.homeRefinedV536 #studioPanel2 .studioTileQuote .answerWriteText{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  position: relative !important;
  min-height: calc(2 * 1.38em) !important;
  color: var(--text) !important;
  text-wrap: balance !important;
}

html body.home.homeRefinedV536 #studioPanel2 .studioTileQuote .answerWriteText::before{
  content: attr(data-write-text);
  grid-area: 1 / 1;
  visibility: hidden;
  white-space: normal;
  pointer-events: none;
}

html body.home.homeRefinedV536 #studioPanel2 .studioTileQuote .answerWriteText .inkLive{
  grid-area: 1 / 1;
  display: block;
  color: color-mix(in oklab, var(--text) 94%, var(--accent2));
  text-shadow: 0 .018em 0 color-mix(in oklab, var(--accent2) 7%, transparent);
}

html body.home.homeRefinedV536 #studioPanel2 .studioTileQuote .answerWriteText.isInking{
  letter-spacing: -.026em !important;
}

html body.home.homeRefinedV536 #studioPanel2 .studioTileQuote .answerWriteText.isInking .inkLive::after{
  content: "";
  display: inline-block;
  width: .45em;
  height: .16em;
  margin-left: .14em;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--accent2) 70%, white),
      color-mix(in oklab, var(--accent2) 32%, transparent));
  transform: translateY(-.16em) rotate(-10deg);
  opacity: .88;
  box-shadow: 0 4px 12px color-mix(in oklab, var(--accent2) 16%, transparent);
  animation: praxoriaInkBreath .78s ease-in-out infinite;
}

html body.home.homeRefinedV536 #studioPanel2 .studioTileQuote .answerWriteText.isComplete{
  animation: praxoriaInkSettle .72s cubic-bezier(.2,.8,.2,1) both;
}

html body.home.homeRefinedV536 #studioPanel2 .demoNotice{
  position: relative !important;
  overflow: hidden !important;
  min-height: 6.25rem !important;
  isolation: isolate;
  transition:
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    opacity .2s ease !important;
}

html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isQueued{
  border-color: color-mix(in oklab, var(--border) 54%, transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--surface) 82%, transparent), color-mix(in oklab, var(--surface2) 32%, transparent)) !important;
}

html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isQueued .feedbackQuietHold{
  display: grid;
  gap: .72rem;
  width: min(24rem, 100%);
  opacity: .42;
}

html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isQueued .feedbackQuietHold i{
  display: block;
  height: .72rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--text) 8%, transparent);
}

html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isQueued .feedbackQuietHold i:first-child{
  width: 7rem;
}

html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isQueued .feedbackQuietHold i:last-child{
  width: min(21rem, 92%);
}

html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isChecking{
  border-color: color-mix(in oklab, var(--accent3) 26%, var(--border)) !important;
  background:
    radial-gradient(380px 170px at 12% 0%, color-mix(in oklab, var(--accent3) 7%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in oklab, var(--surface) 88%, transparent), color-mix(in oklab, var(--surface2) 42%, transparent)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--accent3) 5%, transparent),
    0 18px 44px color-mix(in oklab, var(--accent3) 6%, transparent) !important;
}

html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isChecking .demoNoticeLabel,
html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isChecking .demoNoticeText{
  display: none !important;
}

html body.home.homeRefinedV536 #studioPanel2 .criteriaCheck{
  display: grid;
  gap: .82rem;
  color: color-mix(in oklab, var(--text) 74%, var(--muted));
}

html body.home.homeRefinedV536 #studioPanel2 .criteriaCheckHead{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}

html body.home.homeRefinedV536 #studioPanel2 .criteriaCheckDot{
  width: .56rem;
  height: .56rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent3) 68%, var(--accent2));
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent3) 22%, transparent);
  animation: praxoriaCheckDot 1.18s ease-in-out infinite;
}

html body.home.homeRefinedV536 #studioPanel2 .criteriaCheckLabel{
  color: color-mix(in oklab, var(--muted) 78%, var(--text));
  font-size: .74rem;
  letter-spacing: .125em;
  text-transform: uppercase;
  font-weight: 760;
}

html body.home.homeRefinedV536 #studioPanel2 .criteriaCheckLine{
  position: relative;
  display: block;
  height: 2px;
  width: min(24rem, 100%);
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in oklab, var(--border) 68%, transparent);
}

html body.home.homeRefinedV536 #studioPanel2 .criteriaCheckLine i{
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 72%, white),
    color-mix(in oklab, var(--accent3) 70%, var(--accent2)),
    color-mix(in oklab, var(--accent2) 60%, white));
  transform-origin: left center;
  animation: praxoriaCheckLine 1.14s cubic-bezier(.55,.05,.18,.98) infinite;
}

html body.home.homeRefinedV536 #studioPanel2 .criteriaCheckSteps{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .92rem;
  color: color-mix(in oklab, var(--text) 64%, var(--muted));
  font-size: .82rem;
  line-height: 1.25;
  font-weight: 690;
}

html body.home.homeRefinedV536 #studioPanel2 .criteriaCheckSteps b{
  position: relative;
  font: inherit;
  padding-left: .74rem;
}

html body.home.homeRefinedV536 #studioPanel2 .criteriaCheckSteps b::before{
  content: "";
  position: absolute;
  left: 0;
  top: .44em;
  width: .32rem;
  height: .32rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent3) 42%, var(--border));
  animation: praxoriaCheckStep 1.18s ease-in-out infinite;
}

html body.home.homeRefinedV536 #studioPanel2 .criteriaCheckSteps b:nth-child(2)::before{ animation-delay: .16s; }
html body.home.homeRefinedV536 #studioPanel2 .criteriaCheckSteps b:nth-child(3)::before{ animation-delay: .32s; }

html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isRevealing .demoNoticeLabel,
html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isRevealing .demoNoticeText{
  animation: praxoriaFeedbackReveal .58s cubic-bezier(.2,.75,.2,1) both;
}

html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isRevealing .demoNoticeText{
  animation-delay: .06s;
}

html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isReadyFlash{
  animation: praxoriaFeedbackHalo .74s ease both;
}

html body.home.homeRefinedV536 #studioPanel2 .critChips:has(+ .demoNotice.isChecking) .critChip.isOn{
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent3) 34%, var(--border)),
    0 0 0 4px color-mix(in oklab, var(--accent3) 8%, transparent) !important;
  transform: translateY(-1px) !important;
}

@keyframes praxoriaInkBreath{
  0%, 100%{ opacity: .34; transform: translateY(-.16em) rotate(-10deg) scaleX(.72); }
  46%{ opacity: .96; transform: translateY(-.16em) rotate(-10deg) scaleX(1.05); }
}

@keyframes praxoriaInkSettle{
  0%{ filter: blur(.22px); color: color-mix(in oklab, var(--text) 90%, var(--accent2)); }
  100%{ filter: blur(0); color: var(--text); }
}

@keyframes praxoriaCheckDot{
  0%, 100%{ transform: scale(.82); opacity: .58; box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent3) 0%, transparent); }
  48%{ transform: scale(1); opacity: .96; box-shadow: 0 0 0 7px color-mix(in oklab, var(--accent3) 10%, transparent); }
}

@keyframes praxoriaCheckLine{
  0%{ transform: translateX(-115%) scaleX(.74); opacity: .54; }
  42%{ opacity: .92; }
  100%{ transform: translateX(255%) scaleX(1.18); opacity: .22; }
}

@keyframes praxoriaCheckStep{
  0%, 100%{ opacity: .34; transform: scale(.82); }
  48%{ opacity: .9; transform: scale(1); }
}

@keyframes praxoriaFeedbackReveal{
  from{ opacity: 0; transform: translateY(5px); filter: blur(2px); }
  to{ opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes praxoriaFeedbackHalo{
  0%{ box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent3) 12%, transparent); }
  42%{ box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent3) 22%, transparent), 0 0 0 5px color-mix(in oklab, var(--accent3) 7%, transparent); }
  100%{ box-shadow: none; }
}

@media (prefers-reduced-motion: reduce){
  html body.home.homeRefinedV536 #studioPanel2 .studioTileQuote .answerWriteText.isInking .inkLive::after,
  html body.home.homeRefinedV536 #studioPanel2 .criteriaCheckDot,
  html body.home.homeRefinedV536 #studioPanel2 .criteriaCheckLine i,
  html body.home.homeRefinedV536 #studioPanel2 .criteriaCheckSteps b::before,
  html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isRevealing .demoNoticeLabel,
  html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isRevealing .demoNoticeText,
  html body.home.homeRefinedV536 #studioPanel2 .demoNotice.isReadyFlash{
    animation: none !important;
  }
}