body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: black;
  user-select: none;
  overflow: hidden;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

.wallpaper {
  width: 100dvw;
  height: 100dvh;
  object-fit: cover;
  cursor: pointer;
  display: block;
}
.search-container {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.search-box {
  display: flex;
  align-items: center;
  min-height: 54px;
  width: 100%;
  padding: 16px 32px;
  font-size: 20px;
  background-color: #2c2c2e;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  opacity: 0.9;
  cursor: text;
}

@media (prefers-reduced-transparency: reduce) {
  body .search-box {
    opacity: 1;
  }
}

.search-logo {
  height: 22px;
  width: auto;
  margin-right: 16px;
  flex-shrink: 0;
}

#search-query {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  font-size: 20px;
  pointer-events: none;
}

#search-input {
  flex: 1;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  color: white;
  font-size: 20px;
  font-family: inherit;
  pointer-events: auto;
  box-sizing: border-box;
}

#search-input::placeholder {
  color: #a1a1aa;
}

.search-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: url("./search-icon-BD6Rfjhr.webp") no-repeat center center;
  background-size: 20px 20px;
  width: 44px;
  height: 44px;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  flex-shrink: 0;
  margin-right: -12px;
}
.hidden {
  display: none !important;
}

.content {
  pointer-events: auto;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.content.search-result-visible {
  transform: translateY(-40px);
}

@media (prefers-reduced-motion: reduce) {
  .content {
    transition: none;
  }

  .content.search-result-visible {
    transform: none;
  }
}

.search-query-result {
  display: block;
  position: relative;
  z-index: 0;
  margin: -14px auto 0;
  max-width: 900px;
  width: 100%;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
}

.search-query-result.visible {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .search-query-result {
    transition: none;
  }
}

.search-query-fade-in {
  animation: fade-in var(--fade-in-duration, 600ms) ease forwards;
}

.search-query-fade-out {
  animation: fade-out var(--fade-out-duration, 600ms) ease forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-query-fade-in,
  .search-query-fade-out {
    animation: none;
  }
}
.search-query-cursor::after,
.search-query-cursor-left::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: white;
  animation: blink 0.7s steps(1) infinite;
  vertical-align: middle;
  position: relative;
  bottom: 3px;
}

/* Reserves the same 2px space without showing the cursor (used on hover) */
.search-query-cursor-space::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: transparent;
  vertical-align: middle;
  position: relative;
  bottom: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .search-query-cursor::after,
  .search-query-cursor-left::before {
    animation: none;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
#mouse-pointer {
  position: absolute;
  pointer-events: none;
  width: 16px;
  height: 24px;
  background-image: url("./mouse-pointer-DSDsXotA.webp");
  background-size: contain;
  background-repeat: no-repeat;
}
#try-now-button.animate,
#try-now-button.animate-tap {
  z-index: 1;
}

#try-now-button.animate {
  animation: try-now-button-animation 833ms linear forwards;
}

@keyframes try-now-button-animation {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  30% {
    transform: scale(1.3);
    animation-timing-function: ease-in;
  }
  60% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  80% {
    transform: scale(1.1);
    animation-timing-function: ease-in;
  }
  100% {
    transform: scale(1);
  }
}

#try-now-button.animate-tap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tap-indicator-size, 54px);
  height: var(--tap-indicator-size, 54px);
  border-radius: 50%;
  background: var(--tap-indicator-color, rgba(255, 255, 255, 0.5));
  pointer-events: none;
  animation: simulate-tap var(--tap-duration, 1200ms) linear forwards;
}

@keyframes simulate-tap {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  47% {
    transform: translate(-50%, -50%) scale(var(--tap-indicator-max-scale, 2.5));
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  51% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(var(--tap-indicator-min-scale, 2.1));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #try-now-button.animate {
    animation: none;
  }

  #try-now-button.animate-tap::after {
    animation: none;
  }
}
.search-query-char-fade-in {
  animation: char-fade-in 0.2s ease forwards;
}

@keyframes char-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-query-char-fade-in {
    animation: none;
    opacity: 1;
  }
}
.search-query-scramble-char {
  opacity: 0.55;
  transition: opacity 0.06s;
}

.search-query-scramble-char.search-query-scramble-locked {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .search-query-scramble-char {
    transition: none;
  }
}
@keyframes word-burst {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(5px) rotate(var(--burst-rotate, 0deg));
  }
  55% {
    opacity: 1;
    transform: scale(var(--burst-scale, 1.2)) translateY(0) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

.search-query-word-burst {
  display: inline-block;
  animation: word-burst 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .search-query-word-burst {
    animation: none;
    opacity: 1;
  }
}
@keyframes char-bounce-in {
  0% {
    opacity: 0;
    transform: translateY(var(--bounce-from-y, -12px)) scaleY(0.6);
  }
  55% {
    opacity: 1;
    transform: translateY(var(--bounce-overshoot, 4px)) scaleY(1.05);
  }
  72% {
    transform: translateY(-2px) scaleY(0.98);
  }
  85% {
    transform: translateY(1px) scaleY(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.search-query-char-bounce {
  display: inline-block;
  opacity: 0;
  animation: char-bounce-in var(--bounce-duration, 360ms)
    cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .search-query-char-bounce {
    animation: none;
    opacity: 1;
  }
}
@keyframes query-reveal-ltr {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

.search-query-reveal-ltr {
  animation: query-reveal-ltr var(--reveal-duration, 600ms)
    cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .search-query-reveal-ltr {
    animation: none;
    clip-path: none;
  }
}
.search-query-slot-machine-outer {
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
}

.search-query-slot-machine-clip {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.2) calc(var(--slot-opaque-start) * 0.15),
    rgba(0, 0, 0, 0.5) calc(var(--slot-opaque-start) * 0.4),
    black var(--slot-opaque-start),
    black var(--slot-opaque-end),
    rgba(0, 0, 0, 0.5)
      calc(var(--slot-opaque-end) + (100% - var(--slot-opaque-end)) * 0.6),
    rgba(0, 0, 0, 0.2)
      calc(var(--slot-opaque-end) + (100% - var(--slot-opaque-end)) * 0.85),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.2) calc(var(--slot-opaque-start) * 0.15),
    rgba(0, 0, 0, 0.5) calc(var(--slot-opaque-start) * 0.4),
    black var(--slot-opaque-start),
    black var(--slot-opaque-end),
    rgba(0, 0, 0, 0.5)
      calc(var(--slot-opaque-end) + (100% - var(--slot-opaque-end)) * 0.6),
    rgba(0, 0, 0, 0.2)
      calc(var(--slot-opaque-end) + (100% - var(--slot-opaque-end)) * 0.85),
    transparent 100%
  );
}

@keyframes slot-spin {
  0% {
    transform: translateY(var(--slot-start));
  }
  72% {
    transform: translateY(calc(var(--slot-travel) + var(--slot-bounce)));
  }
  84% {
    transform: translateY(
      calc(var(--slot-travel) - calc(var(--slot-bounce) * 0.4))
    );
  }
  94% {
    transform: translateY(
      calc(var(--slot-travel) + calc(var(--slot-bounce) * 0.15))
    );
  }
  100% {
    transform: translateY(var(--slot-travel));
  }
}

.search-query-slot-machine-inner {
  display: block;
  animation: slot-spin var(--slot-duration, 600ms) ease-in forwards;
}

.search-query-slot-machine-inner > span {
  display: block;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .search-query-slot-machine-clip {
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .search-query-slot-machine-inner {
    animation: none;
    transform: none;
  }
}
@keyframes char-focus-in {
  0% {
    opacity: 0;
    filter: blur(var(--focus-blur, 16px));
  }
  35% {
    opacity: 1;
    filter: blur(1.5px);
  }
  60% {
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.search-query-char-focus {
  display: inline-block;
  opacity: 0;
  animation: char-focus-in var(--focus-duration, 480ms) ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .search-query-char-focus {
    animation: none;
    opacity: 1;
    filter: none;
  }
}
@keyframes char-neon-flicker {
  0% {
    opacity: 0;
    text-shadow: none;
  }
  15% {
    opacity: 1;
    text-shadow:
      0 0 6px var(--neon-color),
      0 0 14px var(--neon-color);
  }
  30% {
    opacity: 0.6;
    text-shadow: 0 0 2px var(--neon-color);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 8px var(--neon-color),
      0 0 20px var(--neon-color),
      0 0 40px var(--neon-color-dim);
  }
  65% {
    opacity: 0.9;
    text-shadow:
      0 0 4px var(--neon-color),
      0 0 10px var(--neon-color);
  }
  80% {
    opacity: 1;
    text-shadow:
      0 0 6px var(--neon-color),
      0 0 16px var(--neon-color),
      0 0 30px var(--neon-color-dim);
  }
  100% {
    opacity: 1;
    text-shadow:
      0 0 4px var(--neon-color),
      0 0 12px var(--neon-color);
  }
}

.search-query-char-neon {
  display: inline-block;
  opacity: 0;
  animation: char-neon-flicker var(--neon-duration, 400ms) ease-out forwards;
  animation-delay: var(--neon-jitter, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .search-query-char-neon {
    animation: none;
    opacity: 1;
  }
}
@keyframes char-ghost-in {
  0% {
    opacity: 0.12;
    filter: blur(4px);
    color: rgba(255, 255, 255, 0.3);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    color: white;
  }
}

.search-query-char-ghost {
  display: inline-block;
  opacity: 0.12;
  filter: blur(4px);
  animation: char-ghost-in var(--ghost-duration, 600ms)
    cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .search-query-char-ghost {
    animation: none;
    opacity: 1;
    filter: none;
    color: white;
  }
}
@keyframes wf-fall {
  0% {
    opacity: 0;
    transform: translateY(var(--wf-from-y, -30px));
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wf-trail-fall {
  0% {
    opacity: 0.45;
    transform: translateY(var(--wf-from-y, -30px));
  }
  60% {
    opacity: 0.15;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}

.search-query-wf-char {
  display: inline-block;
  position: relative;
  overflow: visible;
}

.search-query-wf-primary {
  display: inline-block;
  opacity: 0;
  animation: wf-fall var(--wf-fall-duration, 280ms) ease-out forwards;
}

.search-query-wf-trail {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: wf-trail-fall var(--wf-trail-duration, 250ms) ease-out forwards;
  animation-delay: var(--wf-trail-delay, 100ms);
  pointer-events: none;
  white-space: pre;
  color: rgba(255, 255, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .search-query-wf-primary {
    animation: none;
    opacity: 1;
  }

  .search-query-wf-trail {
    display: none;
  }
}
@keyframes char-assemble {
  0% {
    opacity: 0;
    transform: translate(var(--fly-from-x, 0px), var(--fly-from-y, -20px))
      scale(var(--character-start-scale, 1.8))
      rotate(var(--character-start-rotation, 0deg));
  }
  65% {
    opacity: 1;
  }
  85% {
    transform: translate(0, 0) scale(var(--character-end-scale, 1.1))
      rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

.search-query-char-assemble {
  display: inline-block;
  opacity: 0;
  animation: char-assemble var(--fly-duration, 420ms)
    cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .search-query-char-assemble {
    animation: none;
    opacity: 1;
  }
}
.search-query-char-sprinkle {
  opacity: 0;
  animation: sprinkle-char-fade-in var(--sprinkle-fade-duration) ease forwards;
}

@keyframes sprinkle-char-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-query-char-sprinkle {
    animation: none;
    opacity: 1;
  }
}
.suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #2c2c2e;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 0;
}

.suggestion {
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  font-family: sans-serif;
  min-height: 44px;
}

.suggestion:hover,
.suggestion--active {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.suggestion-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  background: url("./search-icon-BD6Rfjhr.webp") no-repeat center center;
  background-size: 20px 20px;
  flex-shrink: 0;
}

.suggestion-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.suggestion-title {
  color: #c0c0c0;
  font-size: 18px;
  font-family: inherit;
}

.suggestion-description {
  color: #b0b0b0;
  margin-top: 4px;
  font-size: 13px;
  font-family: inherit;
}
#try-now-button {
  position: relative;
  flex: 1;
  max-width: 66%;
  margin: 0 auto;
  opacity: 1;
  border-radius: 100px;
  background-color: var(--try-now-button-background-color, #ff6000);
  --button-color: var(--try-now-button-color, white);
  transition:
    filter 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease;
}

#try-now-button:hover {
  filter: var(--try-now-button-hover-filter, brightness(1.15));
  background-color: var(
    --try-now-button-hover-background-color,
    var(--try-now-button-background-color, #ff6000)
  );
  transform: scale(1.05);
}

#try-now-button.animate:hover {
  animation: none;
}
#make-default-button {
  border-radius: 100px;
  background-color: var(--make-default-button-background-color, #303033);
  --button-color: var(--make-default-button-color, white);
  transition:
    filter 0.2s ease,
    background-color 0.2s ease;
}

#make-default-button:hover {
  filter: var(--make-default-button-hover-filter, brightness(1.15));
  background-color: var(
    --make-default-button-hover-background-color,
    var(--make-default-button-background-color, #303033)
  );
}
@font-face {
  font-family: Inter;
  src: url("./Inter-VariableFont_opsz_wght-BtFs5cFQ.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
}

body {
  font-family: Inter, sans-serif;
}

.wallpaper {
  pointer-events: none;
  cursor: default;
}

.content-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.logo {
  display: block;
  height: 66px;
  width: auto;
  margin: calc(var(--safe-area-top) + 60px) auto 8px;
}

.tagline {
  font-size: 40px;
  font-weight: 300;
  color: white;
  text-align: center;
  white-space: nowrap;
  opacity: 0.9;
  margin: 0 0 80px;
  width: 100%;
}

.buttons {
  display: flex;
  gap: 12px;
  margin: 36px auto 0;
  max-width: 600px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 54px;
  padding: 16px 24px;
  font-size: 18px;
  font-family: sans-serif;
  font-weight: 500;
  color: var(--button-color, white);
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.buttons button:hover {
  opacity: 1;
}

@media (prefers-reduced-transparency: reduce) {
  .buttons button {
    opacity: 1;
  }
}