/* Decorative / Visual Effects */
.bg-layer {
  position:fixed; inset:0; overflow:hidden; pointer-events:none;
  z-index:-1;
}
.bg-orb {
  position:absolute; border-radius:50%; filter: blur(55px);
  opacity:.42; mix-blend-mode:overlay;
  animation: orbFloat 14s ease-in-out infinite;
}
.orb-1 { width:460px; height:460px; background:#c7d2fe; top:-120px; left:-140px; }
.orb-2 { width:380px; height:380px; background:#ead9ff; top:40%; right:-130px; animation-delay:3s; }
.orb-3 { width:320px; height:320px; background:#ffe4f2; bottom:-140px; left:20%; animation-delay:6s; }

@keyframes orbFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-60px) scale(1.07); }
}

/* Click text effect */
.click-text {
  position:fixed;
  left:0; top:0;
  font-weight:600;
  pointer-events:none;
  animation: clickFloat .9s ease-out forwards;
  text-shadow:0 4px 12px rgba(0,0,0,.25);
  font-size:14px;
}
@keyframes clickFloat {
  0% { transform: translate(-50%, -50%) scale(.6); opacity:0; }
  20% { transform: translate(-50%,-70%) scale(1); opacity:1; }
  100% { transform: translate(-50%,-125%) scale(1.1) rotate(-6deg); opacity:0; }
}


.rootfrac-box{
  width:3rem;
  text-align:center;
  font-size:.85rem;
  padding:.35rem .2rem;
  border:1.5px solid var(--border-color,#cbd5e1);
  border-radius:8px;
  background:var(--layer-bg,#fff);
  font-family:var(--mono,monospace);
}
.rootfrac-box:focus{
  outline:2px solid #6366f1;
  outline-offset:1px;
}