/* Generated from web/src/design-system/chromatic.css. No chrome variant. */
@property --gems-holo-angle {
  syntax: '<angle>';
  initial-value: 118deg;
  inherits: false;
}

:root {
  --gems-void: #050506;
  --gems-ink: #09090B;
  --gems-graphite: #141519;
  --gems-steel: #2A2D33;
  --gems-mist: #B9BDC7;
  --gems-white: #F6F7FA;
  --gems-cyan: #5EEBFF;
  --gems-violet: #8B7CFF;
  --gems-magenta: #FF4FD8;
  --gems-amber: #FFB45D;
  --gems-lime: #C8FF73;
  --gems-ease: cubic-bezier(.22, .8, .22, 1);
  --gems-fast: 180ms;
  --gems-standard: 240ms;
  --gems-material: 1200ms;
  --gems-space-0: 0;
  --gems-space-2: 2px;
  --gems-space-4: 4px;
  --gems-space-6: 6px;
  --gems-space-8: 8px;
  --gems-space-12: 12px;
  --gems-space-16: 16px;
  --gems-space-20: 20px;
  --gems-space-24: 24px;
  --gems-space-32: 32px;
  --gems-space-40: 40px;
  --gems-space-48: 48px;
  --gems-space-64: 64px;
  --gems-space-80: 80px;
  --gems-space-96: 96px;
  --gems-leading-display: 1.12;
  --gems-leading-title: 1.2;
  --gems-leading-control: 1.25;
  --gems-leading-body: 1.5;
  --gems-holo-stroke: conic-gradient(
    from var(--gems-holo-angle),
    #B7F7FF 0deg,
    #5EEBFF 36deg,
    #8B7CFF 78deg,
    #FF4FD8 128deg,
    #FFB45D 178deg,
    #E9FFB8 222deg,
    #F6F7FA 264deg,
    #8B7CFF 310deg,
    #B7F7FF 360deg
  );
}
.gems-button {
  border-radius: 4px !important;
  letter-spacing: -.01em;
  line-height: var(--gems-leading-control) !important;
  filter: none !important;
  transition:
    color var(--gems-fast) var(--gems-ease),
    background var(--gems-fast) var(--gems-ease),
    box-shadow var(--gems-fast) var(--gems-ease),
    transform var(--gems-fast) var(--gems-ease) !important;
}

.gems-button--holo {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent !important;
  color: var(--gems-white) !important;
  background:
    linear-gradient(#121317, #121317) padding-box,
    linear-gradient(118deg, rgba(255, 195, 124, .28), rgba(123, 232, 255, .46) 36%, rgba(172, 151, 255, .42) 68%, rgba(255, 118, 210, .3)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  isolation: isolate;
}

.gems-button--holo::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(110deg, transparent 8%, rgba(127, 230, 255, .08) 40%, rgba(174, 149, 255, .07) 62%, transparent 92%);
  background-position: 0 50%;
  background-size: 180% 100%;
  content: '';
  opacity: .5;
  pointer-events: none;
  transition: background-position 420ms var(--gems-ease), opacity var(--gems-fast) var(--gems-ease);
}

.gems-button--holo > * {
  position: relative;
  z-index: 1;
}

.gems-button--holo:hover:not(:disabled) {
  color: #fff !important;
  background:
    linear-gradient(#15161a, #15161a) padding-box,
    linear-gradient(118deg, rgba(255, 195, 124, .42), rgba(123, 232, 255, .66) 36%, rgba(172, 151, 255, .62) 68%, rgba(255, 118, 210, .45)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.gems-button--holo:hover:not(:disabled)::before {
  background-position: 100% 50%;
  opacity: .86;
}

.gems-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.gems-button--primary {
  border: 1px solid transparent !important;
  color: var(--gems-white) !important;
  background:
    linear-gradient(var(--gems-ink), var(--gems-ink)) padding-box,
    var(--gems-holo-stroke) border-box !important;
  box-shadow:
    inset 0 0 0 1px rgba(246, 247, 250, .035),
    0 10px 34px rgba(139, 124, 255, .08) !important;
  animation: gems-holo-orbit 12s linear infinite;
}

.gems-button--primary:hover:not(:disabled) {
  color: #FFFFFF !important;
  box-shadow:
    inset 0 0 0 1px rgba(246, 247, 250, .08),
    0 0 18px rgba(94, 235, 255, .15),
    0 0 34px rgba(255, 79, 216, .1) !important;
}

.gems-button--secondary {
  border: 1px solid var(--gems-steel) !important;
  color: var(--gems-white) !important;
  background: var(--gems-graphite) !important;
  box-shadow: inset 0 1px 0 rgba(246, 247, 250, .04) !important;
}

.gems-button--secondary:hover:not(:disabled) {
  border-color: #4B4F59 !important;
  background: #1B1D22 !important;
}

.gems-button--quiet {
  border: 1px solid transparent !important;
  color: var(--gems-mist) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gems-button--quiet:hover:not(:disabled) {
  color: var(--gems-white) !important;
  background: var(--gems-graphite) !important;
}

.gems-button--danger {
  border: 1px solid #6A3039 !important;
  color: #FFB7C0 !important;
  background: #190D10 !important;
  box-shadow: none !important;
}

.gems-button--danger:hover:not(:disabled) {
  border-color: #9B4552 !important;
  background: #241014 !important;
}

.gems-icon-button {
  border: 1px solid var(--gems-steel) !important;
  border-radius: 4px !important;
  color: var(--gems-mist) !important;
  background: var(--gems-ink) !important;
  box-shadow: inset 0 1px 0 rgba(246, 247, 250, .035) !important;
}

.gems-icon-button:hover:not(:disabled) {
  border-color: #585D68 !important;
  color: var(--gems-white) !important;
  background: var(--gems-graphite) !important;
}

@keyframes gems-holo-orbit {
  to { --gems-holo-angle: 478deg; }
}
body .gems-button {display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;font-weight:500;min-height:40px;padding:10px 20px;text-decoration:none;}
body .gems-button > span {color:inherit!important;background:none!important;-webkit-text-fill-color:currentColor;font-weight:inherit;}
body .gems-button > span[aria-hidden] {background:none!important;box-shadow:none!important;border-radius:0!important;}
body .gems-button svg {color:inherit;stroke:currentColor;}
body .gems-button:active:not(:disabled) {transform:translateY(0);}
body :is(.gems-button,.gems-icon-button):focus-visible {outline:2px solid #5eebff;outline-offset:3px;}
body :is(.gems-button,.gems-icon-button):disabled {opacity:.35;cursor:not-allowed;}
body .gems-icon-button {display:inline-flex;align-items:center;justify-content:center;transition:background 180ms var(--gems-ease),border-color 180ms var(--gems-ease),color 180ms var(--gems-ease);}
[data-gems-nav] .gems-button--primary,[data-gems-nav][data-theme=light]>div>a.gems-button--primary {color:var(--gems-white)!important;background:linear-gradient(var(--gems-ink),var(--gems-ink)) padding-box,var(--gems-holo-stroke) border-box!important;}
[data-gems-nav][data-theme=light] .gems-button--quiet {color:#24252c!important;}
[data-gems-nav][data-theme=light] .gems-button--quiet:hover {background:#e8e8ed!important;}
[data-gems-nav] .gems-button--quiet {min-height:36px;padding:8px 10px;}
body [data-gems-nav] .gems-mobile-toggle {color:var(--gems-white)!important;}
.gems-mobile-toggle {display:none!important;}
@media(max-width:767px){.gems-mobile-toggle {display:flex!important;}[data-gems-nav].is-mobile-open .gems-button--quiet{color:var(--gems-white)!important;}}
@media(prefers-reduced-motion:reduce){.gems-button{animation:none!important;transition:none!important;}}