/* Beveled Generate Button, recolored for SlabOS. No external assets or runtime. */
.slabos-generate-frame {
  display: inline-block;
  position: relative;
  isolation: isolate;
  padding: 4px;
  border-radius: 31px;
  background: linear-gradient(0deg, #090604, #161310);
  box-shadow: 0 12px 18px -12px #000e, 0 5px 12px -5px #ff5e1f99,
    1px 1px 1px #ffffff22, -1px -1px 1px #0008;
}
/* A close U-shaped halo follows the lower rim and rises up both sides.
   A shallow second layer pulses outward from the center underneath it. */
.slabos-generate-frame::before, .slabos-generate-frame::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.slabos-generate-frame::before {
  inset: -2px;
  border: 2px solid #ff803ed9;
  border-top-color: transparent;
  border-radius: inherit;
  box-shadow: 0 0 6px #ff8a45bb, 0 0 12px #ff5e1f99,
    inset 0 -1px 4px #ff884d77;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 32%);
  animation: slabosRimReverb 2.2s ease-out infinite;
}
.slabos-generate-frame::after {
  left: 50%;
  bottom: -10px;
  width: 104%;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #ff8a3ccc 14%, #ff782ed9 36%, #ff681fb3 52%, #ff5e1f66 64%, #ff5e1f00 80%);
  filter: blur(4px);
  transform: translateX(-50%);
  transform-origin: center;
  animation: slabosUnderglow 2.2s cubic-bezier(.2,.65,.3,1) infinite;
}
.slabos-generate-rays {
  position: absolute;
  inset: -58px -46px -58px;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 51%, #ff6b24a6 4%, #ff641d66 38%, #ff5e1f22 60%, transparent 76%);
  filter: blur(4px);
  /* Fade before the layer boundary so expanding rays never hit a flat edge. */
  mask-image: linear-gradient(to bottom, transparent 0%, #0004 18%, #000 42%, #000 72%, transparent 100%),
    radial-gradient(ellipse at 50% 51%, #000 28%, #000b 48%, transparent 72%);
  mask-composite: intersect;
}
.slabos-generate-rays::before, .slabos-generate-rays::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-conic-gradient(from 0deg at 50% 51%,
    #ffad6600 0deg 9deg, #ffbb7bcc 13deg, #ff793c88 17deg, #ff641d00 24deg 32deg);
  mask-image: radial-gradient(ellipse at 50% 51%, transparent 10%, #000 34%, #000 56%, transparent 75%);
  transform-origin: 50% 51%;
  animation: slabosLightRays 2.6s cubic-bezier(.16,.65,.3,1) infinite;
}
.slabos-generate-rays::after {
  animation-delay: -1.3s;
}
@keyframes slabosLightRays {
  0% { opacity: 0; transform: scale(.28, .5); }
  22% { opacity: 1; }
  65% { opacity: .8; transform: scale(1, 1.1); }
  100% { opacity: 0; transform: scale(1.2, 1.4); }
}
.slabos-generate-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  min-width: min(280px, calc(100vw - 64px));
  padding: 13px 25px;
  border: 1px solid #ff8d5e55;
  border-radius: 27px;
  background: #16100d;
  font-family: Inter, "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .015em;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 1px 1px #ffffff33, inset 0 2px 2px #ffffff26,
    inset 0 4px 4px #ffffff1a, inset 0 8px 8px #ffffff0d,
    inset 0 16px 16px #ffffff0d, 0 -1px 1px #0005, 0 -4px 4px #0005;
  transition: box-shadow .4s, border-color .4s, background-color .4s;
}
.slabos-generate-button::before, .slabos-generate-button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity .4s, filter .4s, box-shadow .4s;
}
.slabos-generate-button::before {
  inset: -4px;
  border-radius: 31px;
  z-index: -1;
  box-shadow: 0 -7px 8px -5px #ffbe8faa inset, 0 -16px 18px -8px #ff5e1f88 inset;
}
.slabos-generate-button::after {
  background: linear-gradient(0deg, #ffbd83, #ff884d 2%, #ff884d55 5%, transparent 12%);
  opacity: .9;
}
.slabos-generate-logo {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 0 3px #ff5e1f77);
  animation: logoGlow 2.6s ease-in-out infinite;
  transition: filter .4s;
}
.slabos-generate-label { position: relative; min-width: 0; text-align: left; white-space: nowrap; }
.slabos-generate-letter {
  display: inline-block;
  /* White letter faces with a silver bevel confined to the outer edges. */
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: .4px #bec9d6;
  paint-order: stroke fill;
  text-shadow: 0 1px 1px #0009;
  transition: color .4s, text-shadow .4s;
}
.slabos-generate-button:hover, .slabos-generate-button:focus-visible, .slabos-generate-button[data-open=true] { border-color: #ffaa7fbb; }
.slabos-generate-button:hover::before, .slabos-generate-button:focus-visible::before, .slabos-generate-button[data-open=true]::before {
  box-shadow: 0 -8px 12px -6px #fff6 inset, 0 -16px 16px -8px #ff5e1f99 inset, 0 0 26px #ff5e1f22;
}
.slabos-generate-button:hover::after, .slabos-generate-button:focus-visible::after, .slabos-generate-button[data-open=true]::after { opacity: 1; }
.slabos-generate-button:hover .slabos-generate-logo, .slabos-generate-button:focus-visible .slabos-generate-logo { filter: drop-shadow(0 0 5px #ff5e1f); animation: none; }
.slabos-generate-button:active { background: #3c1e10; border-color: #ffbf9b; }
.slabos-generate-button:active::after { filter: brightness(1.5); }
.slabos-generate-button[data-generating=true] .slabos-generate-letter {
  animation: focusedLetter 1s ease-in-out, shimmer 1.2s ease-in-out infinite;
  animation-delay: var(--letter-delay), calc(1s + var(--letter-delay));
}
.slabos-generate-button[data-generating=true] .slabos-generate-logo { animation-duration: 1.2s; }
@keyframes shimmer { 50% { color: #fff5ee; text-shadow: 0 0 5px #ff9562aa; } }
@keyframes logoGlow { 50% { filter: drop-shadow(0 0 7px #ff5e1fcc) brightness(1.2); } }
@keyframes focusedLetter { 50% { transform: scale(1.25); filter: blur(3px) brightness(1.5); } }
@keyframes slabosUnderglow {
  0% { opacity: 0; transform: translateX(-50%) scale(.08, .45); }
  18% { opacity: .85; }
  60% { opacity: .8; transform: translateX(-50%) scale(.92, 1.15); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.15, 1.35); }
}
@keyframes slabosRimReverb {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 2px #ff5e1f44); }
  28% { filter: brightness(1.2) drop-shadow(0 0 6px #ff701fcc); }
  65% { filter: brightness(1.1) drop-shadow(0 0 4px #ff701faa); }
}
/* All light layers are absolute: neither version changes the CTA's footprint. */
@media (min-width: 1024px) {
  .slabos-generate-button { font-size: 23px; line-height: 1.34; letter-spacing: .01em; }
  .slabos-generate-letter { -webkit-text-stroke: .7px #e5ebf2; text-shadow: 0 1px 1px #0009, 0 0 3px #ffffff66, 0 0 7px #ffffff26; }
}
@media (max-width: 1023px) {
  .slabos-generate-rays { display: none; }
  .slabos-generate-button {
    min-width: 0;
    padding-inline: 18px;
  }
  .slabos-generate-frame::before { animation-duration: 2.1s; }
  .slabos-generate-frame::after {
    bottom: -8px;
    width: 104%;
    height: 20px;
    background: radial-gradient(ellipse at center, #ff8a3ccc 14%, #ff782ed9 36%, #ff681fb3 52%, #ff5e1f66 64%, transparent 80%);
    filter: blur(4px);
    animation: slabosMobileUnderglow 2.1s cubic-bezier(.2,.65,.3,1) infinite;
  }
}
@keyframes slabosMobileUnderglow {
  0% { opacity: 0; transform: translateX(-50%) scale(.12, .55); }
  18% { opacity: .85; }
  65% { opacity: .8; transform: translateX(-50%) scale(.9, 1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.12, 1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .slabos-generate-frame::before { animation: none; filter: none; }
  .slabos-generate-frame::after { animation: none; opacity: .4; }
  .slabos-generate-rays::before, .slabos-generate-rays::after { animation: none; opacity: .45; }
  .slabos-generate-button, .slabos-generate-button::before, .slabos-generate-button::after, .slabos-generate-letter, .slabos-generate-logo { animation: none !important; transition: none !important; }
}


.slabos-generate-button { text-decoration: none; text-transform: uppercase; font-style: italic; white-space: nowrap; }
.slabos-generate-button:focus-visible { outline: 2px solid #ffac80; outline-offset: 4px; }