/* stylelint-disable */

/* MakerSpace UI kit styles: vanilla ports of 21st.dev components (see ui.js for credits).
   Theme through --ui-* tokens; defaults are the lab's purple and cyan. */
:root { --ui-a: #7B3BFF; --ui-b: #5BE7FF; --ui-hot: #B488FF; }
rx-sr { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
rx-scr { white-space: pre-wrap; }

/* Text Blur Reveal (wensity) */
rx-w { display: inline-block; white-space: nowrap; }
rx-c { display: inline-block; }
.ui-br rx-c { filter: blur(10px); opacity: 0; transform: translateY(-.45em); }
.ui-br.is-in rx-c { animation: ui-blur-in calc(var(--ui-br-step, .35s) * 2) ease-out both; animation-delay: calc(var(--i) * var(--ui-br-stagger, 40ms)); }
@keyframes ui-blur-in {
  0% { filter: blur(10px); opacity: 0; transform: translateY(-.45em); }
  50% { filter: blur(5px); opacity: .5; transform: translateY(.05em); }
  100% { filter: blur(0); opacity: 1; transform: none; }
}

/* Glowing Effect (Aceternity UI): the card needs position + border-radius */
rx-glow { border-radius: inherit; inset: -1px; opacity: var(--active, 0); pointer-events: none; position: absolute; transition: opacity .35s; z-index: 2; }
rx-glow i, rx-glow b { border-radius: inherit; inset: 0; position: absolute; }
rx-glow i {
  background: conic-gradient(from calc((var(--start, 0) - var(--spread, 40)) * 1deg),
    transparent 0deg, var(--ui-a) calc(var(--spread, 40) * .55deg), #fff calc(var(--spread, 40) * 1deg),
    var(--ui-b) calc(var(--spread, 40) * 1.45deg), transparent calc(var(--spread, 40) * 2deg));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  padding: var(--ui-bw, 2px);
}
rx-glow b { filter: blur(9px); opacity: .9; }

/* Spotlight (kevingirelli): host needs position + isolation */
rx-spot {
  background: radial-gradient(var(--ui-spot-size, 320px) circle at var(--sx, 50%) var(--sy, 50%), color-mix(in oklab, var(--ui-hot) 16%, transparent), transparent 70%); border-radius: inherit; inset: 0; opacity: 0; pointer-events: none;
  position: absolute; transition: opacity .3s; z-index: -1;
}
:hover > rx-spot, :focus-within > rx-spot { opacity: 1; }

/* Border Beam (Magic UI) */
rx-beam { border-radius: inherit; inset: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: var(--bw, 1.5px); pointer-events: none;
  position: absolute; z-index: 3;
}
rx-beam::after {
  animation: ui-beam calc(var(--duration) * 1s) linear infinite; animation-delay: var(--delay); aspect-ratio: 1;
  background: linear-gradient(to left, var(--from), var(--to), transparent);
  content: "";
  offset-anchor: 90% 50%; offset-path: rect(0 auto auto 0 round var(--round, calc(var(--size) * 1px))); position: absolute; width: calc(var(--size) * 1px);
}
@keyframes ui-beam { to { offset-distance: 100%; } }
@property --ui-beam-a { inherits: false; initial-value: 0deg; syntax: "<angle>"; }
@supports not (offset-path: rect(0 auto auto 0)) {
  rx-beam::after { display: none; }
  rx-beam { animation: ui-beam-spin calc(var(--duration) * 1s) linear infinite; animation-delay: var(--delay); background: conic-gradient(from var(--ui-beam-a), transparent 0 76%, var(--to) 90%, var(--from) 94%, transparent 96%); }
}
@keyframes ui-beam-spin { to { --ui-beam-a: 360deg; } }

/* Optimized Tilt Card (sh20raj) */
.ui-tilt { transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) scale(var(--ts, 1)); transition: transform .35s cubic-bezier(.23, 1, .32, 1); }
rx-sheen {
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(180,140,255,.45) 0%, transparent 80%), radial-gradient(circle 90px at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.18), transparent 70%); inset: 0; mix-blend-mode: overlay; opacity: 0; pointer-events: none; position: absolute; transition: opacity .3s; z-index: 4; }
:hover > rx-sheen { opacity: 1; }

/* Shiny Borders Button (muhammad-binsalman), purple; .is-primary fills it */
@property --blob { inherits: false; initial-value: 56px; syntax: "<length>"; }
.ui-shiny {
  --blob: 56px; --in-hi: #3b2f5c; --in-lo: #0c0a16;
  background:
    radial-gradient(circle 60px at 0% 100%, rgba(123,59,255,.24), rgba(91,231,255,.06), transparent) padding-box,
    radial-gradient(circle 90px at 80% -50%, var(--in-hi), var(--in-lo)) padding-box,
    radial-gradient(circle var(--blob) at 0% 100%, #c6a2ff, rgba(123,59,255,.55), transparent) border-box,
    radial-gradient(circle 80px at 80% -10%, #ffffff, #1b1828) border-box !important; border: 1.5px solid transparent !important;
  box-shadow: 14px -8px 22px -12px rgba(255,255,255,.28), -10px 10px 34px -10px rgba(123,59,255,.55); color: #fff !important; cursor: pointer;
  position: relative; text-decoration: none;
  transition: --blob .35s ease-out, box-shadow .35s ease-out, translate var(--ui-mag-t, 600ms cubic-bezier(.34,1.56,.64,1));
}
.ui-shiny.is-primary { --in-hi: #a57cff; --in-lo: #4a1cc0; }
.ui-shiny:hover, .ui-shiny:focus-visible { --blob: 104px; box-shadow: 16px -10px 34px -12px rgba(255,255,255,.42), -14px 6px 46px -8px rgba(123,59,255,.8); }
[data-mag] { transition: translate var(--ui-mag-t, 600ms cubic-bezier(.34,1.56,.64,1)); }

/* Number Flow (soralabs): digits roll under a soft top and bottom fade */
.ui-odo { display: inline-flex; font-variant-numeric: tabular-nums; margin: -.14em 0;
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 .24em, #000 calc(100% - .24em), transparent 100%);
  mask: linear-gradient(to bottom, transparent 0, #000 .24em, #000 calc(100% - .24em), transparent 100%); overflow: hidden; padding: .14em 0; }
rx-d { display: inline-block; position: relative; }
rx-dz { display: block; visibility: hidden; }
rx-df { align-items: center; display: flex; inset: 0; justify-content: center; position: absolute; will-change: transform; }

/* Orbiting Circles (Magic UI) */
.ui-orbit-paths { height: 1px; left: 50%; overflow: visible; pointer-events: none; position: absolute; top: 50%; width: 1px; z-index: 0; }
.ui-orbit-paths ellipse { fill: none; stroke: rgba(255,255,255,.14); stroke-dasharray: 3 6; stroke-width: 1; }
rx-sat {
  background: radial-gradient(circle at 30% 25%, rgba(180,136,255,.35), rgba(12,8,30,.85) 70%); border: 1px solid rgba(200,170,255,.45); border-radius: 50%;
  box-shadow: 0 0 14px rgba(123,59,255,.55); color: #fff; display: grid; height: 30px; left: 50%; place-items: center; pointer-events: none; position: absolute; top: 50%; width: 30px; will-change: transform, opacity; }
rx-sat svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 15px; }

/* Animated Beam (Magic UI) */
.ui-beams { left: 0; overflow: visible; pointer-events: none; position: absolute; top: 0; z-index: 0; }

/* Evervault Card (Aceternity UI): host needs position + isolation + overflow hidden */
rx-ev { border-radius: inherit; inset: 0;
  -webkit-mask-image: radial-gradient(250px at var(--ex, 50%) var(--ey, 50%), #000, transparent); mask-image: radial-gradient(250px at var(--ex, 50%) var(--ey, 50%), #000, transparent); opacity: 0; overflow: hidden; pointer-events: none; position: absolute; transition: opacity .5s; z-index: -1; }
:hover > rx-ev { opacity: 1; }
rx-ev i { background: linear-gradient(90deg, rgba(123,59,255,.5), rgba(91,231,255,.38)); inset: 0; position: absolute; }
rx-ev b { color: rgba(255,255,255,.45); font: 700 11px/1.4 ui-monospace, Menlo, monospace; inset: 0; mix-blend-mode: overlay; position: absolute; white-space: pre-wrap; word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
  .ui-br rx-c { animation: none !important; filter: none; opacity: 1; transform: none; }
  rx-beam { display: none; }
  .ui-tilt { transition: none; }
  .ui-shiny { transition: none; }
}