#debug-bar {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  bottom: calc(var(--safe-area-bottom, 16px) + 12px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  color: #000;
  display: flex;
  font-family: monospace;
  font-size: 13px;
  gap: 8px;
  justify-content: center;
  left: 50%;
  padding: 4px 10px;
  pointer-events: auto;
  position: fixed;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2147483647;
}

#debug-bar::before {
  color: rgba(0, 0, 0, 0.35);
  content: "debug";
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.05em;
  pointer-events: none;
  text-transform: uppercase;
}

.debug-bar-separator {
  color: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
#debug-locale-picker {
  align-items: center;
  display: flex;
  gap: 5px;
  position: relative;
}

#debug-locale-label {
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  box-shadow: none;
  color: #000;
  cursor: pointer;
  font-family: monospace;
  font-size: 13px;
  outline: none;
  padding: 0;
}

#debug-locale-label:focus,
#debug-locale-label:focus-visible {
  box-shadow: none;
  outline: none;
}

#debug-locale-dropdown {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  margin: -4px;
  padding: 4px;
}

#debug-locale-chevron {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #000;
  display: inline-block;
  height: 0;
  transition: none;
  width: 0;
}

#debug-locale-picker.open #debug-locale-chevron {
  transform: rotate(180deg);
}

#debug-locale-options[hidden] {
  display: none !important;
}

#debug-locale-options {
  background: #fff;
  border-radius: 6px;
  bottom: calc(100% + 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 2px;
  left: 50%;
  padding: 4px;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2147483647;
}

#debug-locale-options button {
  background: none;
  border: none;
  border-radius: 4px;
  color: #000;
  cursor: pointer;
  font-family: monospace;
  font-size: 13px;
  padding: 4px 8px;
  text-align: left;
}

#debug-locale-options button:hover {
  background: rgba(0, 0, 0, 0.06);
}

#debug-locale-options button[data-active]::before {
  content: "✓";
  margin-right: 6px;
}

#debug-locale-options button:not([data-active])::before {
  content: "";
  display: inline-block;
  width: calc(1ch + 6px);
}
.debug-picker-item-description {
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.85em;
}

.debug-picker-group-label {
  color: rgba(0, 0, 0, 0.35);
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 6px 8px 2px;
  pointer-events: none;
  text-transform: uppercase;
}

.debug-picker-group-label:not(:first-child) {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 2px;
}

.debug-picker-divider {
  background: rgba(0, 0, 0, 0.08);
  height: 1px;
  margin: 2px auto;
  width: 75%;
}

.debug-picker-label-icon {
  display: inline-block;
  filter: brightness(0);
  height: 10px;
  margin-left: 4px;
  vertical-align: 0;
  width: 10px;
}

.debug-picker-item-icon {
  display: inline-block;
  filter: brightness(0);
  height: 10px;
  margin-left: 4px;
  vertical-align: 0;
  width: 10px;
}

.debug-picker-item-icon[hidden] {
  display: none;
}
#debug-autotype-picker {
  align-items: center;
  display: flex;
  gap: 5px;
  position: relative;
}

#debug-autotype-label {
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  box-shadow: none;
  color: #000;
  cursor: pointer;
  font-family: monospace;
  font-size: 13px;
  outline: none;
  padding: 0;
}

#debug-autotype-label:focus,
#debug-autotype-label:focus-visible {
  box-shadow: none;
  outline: none;
}

#debug-autotype-dropdown {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  margin: -4px;
  padding: 4px;
}

#debug-autotype-chevron {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #000;
  display: inline-block;
  height: 0;
  transition: none;
  width: 0;
}

#debug-autotype-picker.open #debug-autotype-chevron {
  transform: rotate(180deg);
}

#debug-autotype-options[hidden] {
  display: none !important;
}

#debug-autotype-options {
  background: #fff;
  border-radius: 6px;
  bottom: calc(100% + 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 2px;
  left: 50%;
  padding: 4px;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2147483647;
}

#debug-autotype-options button {
  background: none;
  border: none;
  border-radius: 4px;
  color: #000;
  cursor: pointer;
  font-family: monospace;
  font-size: 13px;
  padding: 4px 8px;
  text-align: left;
}

#debug-autotype-options button:hover {
  background: rgba(0, 0, 0, 0.06);
}

#debug-autotype-options button[data-active]::before {
  content: "✓";
  margin-right: 6px;
}

#debug-autotype-options button:not([data-active])::before {
  content: "";
  display: inline-block;
  width: calc(1ch + 6px);
}

.debug-autotype-icon-mouse-pointer {
  background: url(./mouse-pointer-DSDsXotA.webp) no-repeat center / contain;
}
#debug-query-order-picker {
  align-items: center;
  display: flex;
  gap: 5px;
  position: relative;
}

#debug-query-order-label {
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  box-shadow: none;
  color: #000;
  cursor: pointer;
  font-family: monospace;
  font-size: 13px;
  outline: none;
  padding: 0;
}

#debug-query-order-label:focus,
#debug-query-order-label:focus-visible {
  box-shadow: none;
  outline: none;
}

#debug-query-order-dropdown {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  margin: -4px;
  padding: 4px;
}

#debug-query-order-chevron {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #000;
  display: inline-block;
  height: 0;
  transition: none;
  width: 0;
}

#debug-query-order-picker.open #debug-query-order-chevron {
  transform: rotate(180deg);
}

#debug-query-order-options[hidden] {
  display: none !important;
}

#debug-query-order-options {
  background: #fff;
  border-radius: 6px;
  bottom: calc(100% + 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 2px;
  left: 50%;
  padding: 4px;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2147483647;
}

#debug-query-order-options button {
  background: none;
  border: none;
  border-radius: 4px;
  color: #000;
  cursor: pointer;
  font-family: monospace;
  font-size: 13px;
  padding: 4px 8px;
  text-align: left;
}

#debug-query-order-options button:hover {
  background: rgba(0, 0, 0, 0.06);
}

#debug-query-order-options button[data-active]::before {
  content: "✓";
  margin-right: 6px;
}

#debug-query-order-options button:not([data-active])::before {
  content: "";
  display: inline-block;
  width: calc(1ch + 6px);
}
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 {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 600px;
  position: relative;
  width: 100%;
}

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

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

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

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

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

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

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

.content {
  pointer-events: auto;
  transition: transform var(--content-slide-up-duration, 900ms)
    var(--content-slide-up-easing, cubic-bezier(0.16, 1, 0.3, 1));
}

.content.search-result-visible,
.content.content-search-result-shown {
  transform: translateY(var(--content-slide-up-on-result-visible, -40px));
}

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

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

@media (prefers-reduced-transparency) {
  .search-result-image {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

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

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

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

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.search-query-cursor::after,
.search-query-cursor-left::before {
  animation: blink 700ms steps(1) infinite;
  background: white;
  bottom: 3px;
  content: "";
  display: inline-block;
  height: 1em;
  position: relative;
  vertical-align: middle;
  width: 2px;
}

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

@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 {
  background-image: url(./mouse-pointer-DSDsXotA.webp);
  background-repeat: no-repeat;
  background-size: contain;
  height: 24px;
  pointer-events: none;
  position: absolute;
  width: 16px;
  z-index: 2;
}
#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% {
    animation-timing-function: ease-out;
    transform: scale(1);
  }
  30% {
    animation-timing-function: ease-in;
    transform: scale(1.3);
  }
  60% {
    animation-timing-function: ease-out;
    transform: scale(1);
  }
  80% {
    animation-timing-function: ease-in;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

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

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

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

  #try-now-button.animate-tap::after {
    animation: none;
  }
}
.search-query-character-fade-in {
  animation: character-fade-in 200ms ease forwards;
}

@keyframes character-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.search-query-character-scramble {
  opacity: 0.55;
  transition: opacity 60ms;
}

.search-query-character-scramble.search-query-character-scramble-locked {
  opacity: 1;
}
@keyframes word-burst-scale {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(var(--word-burst-rotate, 0deg));
  }
  60% {
    opacity: 1;
    transform: scale(var(--word-burst-scale, 1.35)) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes word-burst-squish {
  0% {
    opacity: 0;
    transform: scaleX(0.3) scaleY(1.5);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.3) scaleY(0.8);
  }
  75% {
    transform: scaleX(0.95) scaleY(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Spins in while scaling up. Direction set via --word-burst-spin-start. */
@keyframes word-burst-spin {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(var(--word-burst-spin-start, -180deg));
  }
  65% {
    opacity: 1;
    transform: scale(1.25) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes word-burst-punch {
  0% {
    opacity: 0;
    transform: scale(1.9);
  }
  35% {
    opacity: 1;
    transform: scale(0.88);
  }
  65% {
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.search-query-word-burst {
  display: inline-block;
}
@keyframes character-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-character-bounce {
  animation: character-bounce-in var(--bounce-in-duration, 360ms)
    var(--bounce-in-easing, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
  display: inline-block;
  opacity: 0;
}
@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-ltr-duration, 600ms)
    var(--reveal-ltr-easing, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}
.search-box.slot-machine-overflow::after {
  background: linear-gradient(to right, transparent, #2c2c2e);
  bottom: 0;
  content: "";
  pointer-events: none;
  position: absolute;
  right: 44px;
  top: 0;
  width: 48px;
  z-index: 1;
}

.slot-machine-reel {
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
}

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

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

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

.slot-machine-reel-strip > span {
  display: block;
  line-height: 1;
}

@keyframes slot-machine-winning-line {
  0% {
    transform: scaleY(1);
  }
  30% {
    transform: scaleY(1.18);
  }
  55% {
    transform: scaleY(0.93);
  }
  75% {
    transform: scaleY(1.06);
  }
  90% {
    transform: scaleY(0.98);
  }
  100% {
    transform: scaleY(1);
  }
}

.slot-machine-reel.slot-machine-winning-line {
  animation: slot-machine-winning-line
    var(--slot-machine-winning-line-duration, 320ms) ease-out forwards;
  transform-origin: bottom center;
}

.slot-machine-reel.slot-machine-winning-line .slot-machine-payline {
  color: var(--slot-machine-winning-line-color, rgb(255, 215, 0));
  transition: color calc(var(--slot-machine-winning-line-duration, 320ms) * 0.4)
    ease-in;
}
@keyframes character-focus-in {
  0% {
    filter: blur(var(--focus-in-blur, 16px));
    opacity: 0;
  }
  35% {
    filter: blur(1.5px);
    opacity: 1;
  }
  60% {
    filter: blur(4px);
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

.search-query-character-focus {
  animation: character-focus-in var(--focus-in-duration, 1200ms) ease-out
    forwards;
  display: inline-block;
  opacity: 0;
}
@keyframes character-neon-flicker {
  0% {
    opacity: 0;
    text-shadow: none;
  }
  8% {
    opacity: 1;
    text-shadow:
      0 0 2px var(--neon-core),
      0 0 8px var(--neon-color),
      0 0 20px var(--neon-color),
      0 0 40px var(--neon-color-dim);
  }
  13% {
    opacity: 0.06;
    text-shadow: 0 0 3px var(--neon-color-dim);
  }
  22% {
    opacity: 0.95;
    text-shadow:
      0 0 2px var(--neon-core),
      0 0 6px var(--neon-color),
      0 0 16px var(--neon-color);
  }
  27% {
    opacity: 0.08;
    text-shadow: 0 0 2px var(--neon-color-dim);
  }
  42% {
    opacity: 1;
    text-shadow:
      0 0 2px var(--neon-core),
      0 0 8px var(--neon-color),
      0 0 20px var(--neon-color),
      0 0 40px var(--neon-color-dim);
  }
  56% {
    opacity: 0.86;
    text-shadow:
      0 0 1px var(--neon-core),
      0 0 5px var(--neon-color),
      0 0 12px var(--neon-color);
  }
  70% {
    opacity: 1;
    text-shadow:
      0 0 2px var(--neon-core),
      0 0 8px var(--neon-color),
      0 0 20px var(--neon-color),
      0 0 40px var(--neon-color-dim);
  }
  85% {
    opacity: 0.94;
    text-shadow:
      0 0 2px var(--neon-core),
      0 0 6px var(--neon-color),
      0 0 14px var(--neon-color),
      0 0 30px var(--neon-color-dim);
  }
  100% {
    opacity: 1;
    text-shadow:
      0 0 2px var(--neon-core),
      0 0 8px var(--neon-color),
      0 0 18px var(--neon-color),
      0 0 36px var(--neon-color-dim);
  }
}

@keyframes character-neon-random-glow {
  0%,
  100% {
    opacity: 1;
    text-shadow:
      0 0 2px var(--neon-core),
      0 0 8px var(--neon-color),
      0 0 18px var(--neon-color),
      0 0 36px var(--neon-color-dim);
  }
  16% {
    opacity: 0.88;
    text-shadow:
      0 0 1px var(--neon-core),
      0 0 5px var(--neon-color),
      0 0 12px var(--neon-color),
      0 0 22px var(--neon-color-dim);
  }
  21% {
    opacity: var(--neon-idle-dropout-opacity);
    text-shadow:
      0 0 1px var(--neon-core),
      0 0 4px var(--neon-color),
      0 0 10px var(--neon-color-dim);
  }
  30% {
    opacity: 0.94;
    text-shadow:
      0 0 2px var(--neon-core),
      0 0 6px var(--neon-color),
      0 0 16px var(--neon-color),
      0 0 30px var(--neon-color-dim);
  }
  42% {
    opacity: 1;
    text-shadow:
      0 0 2px var(--neon-core),
      0 0 8px var(--neon-color),
      0 0 18px var(--neon-color),
      0 0 36px var(--neon-color-dim);
  }
  60% {
    opacity: 0.96;
    text-shadow:
      0 0 2px var(--neon-core),
      0 0 7px var(--neon-color),
      0 0 16px var(--neon-color),
      0 0 32px var(--neon-color-dim);
  }
  75% {
    opacity: 1;
    text-shadow:
      0 0 2px var(--neon-core),
      0 0 8px var(--neon-color),
      0 0 18px var(--neon-color),
      0 0 36px var(--neon-color-dim);
  }
}

.search-query-character-neon {
  animation: character-neon-flicker var(--neon-flicker-duration, 400ms) ease-out
    forwards;
  animation-delay: var(--neon-jitter, 0ms);
  display: inline-block;
  opacity: 0;
}
@keyframes character-ghost-in {
  0% {
    color: rgba(255, 255, 255, 0.3);
    filter: blur(4px);
    opacity: 0.12;
  }
  100% {
    color: white;
    filter: blur(0);
    opacity: 1;
  }
}

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

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

@keyframes waterfall-fall {
  0% {
    opacity: 0;
    transform: translateY(var(--waterfall-from-y, -30px));
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes waterfall-trail-fall {
  0% {
    opacity: 0.45;
    transform: translateY(var(--waterfall-from-y, -30px));
  }
  60% {
    opacity: 0.15;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes character-assemble {
  0% {
    opacity: 0;
    transform: translate(
        var(--assemble-fly-from-x, 0),
        var(--assemble-fly-from-y, -20px)
      )
      scale(var(--assemble-character-start-scale, 1.8))
      rotate(var(--assemble-character-start-rotation, 0deg));
  }
  65% {
    opacity: 1;
  }
  85% {
    transform: translate(0, 0) scale(var(--assemble-character-end-scale, 1.1))
      rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

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

@keyframes character-sprinkle-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*
 * The container is block and full-width so text wraps at the same width as
 * it would directly in the parent element. Cipher and real-text layers are
 * position:absolute so they overlay the same box; words break at the same
 * points since spaces are preserved.
 */
.magnify-container {
  display: block;
  position: relative;
  width: 100%;
}

/* Invisible real text that establishes the container's size and word-wrap. */
.magnify-layout {
  visibility: hidden;
}

.magnify-cipher-layer,
.magnify-real-layer {
  inset: 0;
  position: absolute;
}

/*
 * Cipher layer: flickering Matrix chars at normal scale, dim so the
 * contrast against the revealed real text is clear. A CSS clip-path hides
 * everything to the left of the lens (already decrypted), and a CSS mask
 * punches a hole inside the lens circle itself.
 */
.magnify-cipher-layer {
  font-size: inherit;
  line-height: inherit;
  opacity: 0.4;
  transition: opacity var(--magnify-cipher-fade-duration) ease-out;
}

.magnify-cipher-layer.magnify-cipher-fade-out {
  opacity: 0;
}

/*
 * Lens canvas: warped magnified view of the real text, drawn
 * inside the lens circle each frame. Appended to document.body at a fixed
 * position so it stacks above the search box clone.
 */
.magnify-lens-canvas {
  pointer-events: none;
}

@media (prefers-reduced-transparency: reduce) {
  .magnify-lens-bezel,
  .magnify-lens-canvas {
    transition: none;
  }

  .magnify-cipher-layer {
    transition: none;
  }
}

.magnify-lens-bezel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.06),
    0 4px 20px rgba(0, 0, 0, 0.55),
    0 1px 6px rgba(0, 0, 0, 0.4),
    inset 0 1px 3px rgba(255, 255, 255, 0.22),
    inset 0 -1px 3px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
@keyframes redact-block-flicker {
  0% {
    opacity: 0;
  }
  12% {
    opacity: calc(var(--redact-block-opacity) * 0.92);
  }
  20% {
    opacity: calc(var(--redact-block-opacity) * 0.14);
  }
  36% {
    opacity: var(--redact-block-opacity);
  }
  50% {
    opacity: calc(var(--redact-block-opacity) * 0.52);
  }
  66% {
    opacity: var(--redact-block-opacity);
  }
  80% {
    opacity: calc(var(--redact-block-opacity) * 0.84);
  }
  100% {
    opacity: var(--redact-block-opacity);
  }
}

@keyframes redact-block-fade {
  from {
    opacity: var(--redact-block-opacity);
  }
  to {
    opacity: 0;
  }
}

@keyframes redact-char-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.redact-character {
  display: inline-block;
  margin-inline: 1px;
  position: relative;
}

/* Invisible real character in flow; sets the cell width. */
.redact-layout {
  opacity: 0;
}

.redact-block {
  background: currentColor;
  border-radius: 2px;
  inset: 0;
  opacity: 0;
  position: absolute;
}

/* Real character stacked over the layout anchor, hidden until reveal. */
.redact-char-text {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}

.redact-block.redact-block-flicker {
  animation: redact-block-flicker var(--redact-flicker-duration) ease-out
    forwards;
}

.redact-char-text.redact-char-reveal {
  animation: redact-char-reveal var(--redact-reveal-duration) ease-out forwards;
}
.suggestions {
  background-color: #2c2c2e;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  left: 0;
  padding: 0;
  position: absolute;
  top: calc(100% + 4px);
  width: 100%;
  z-index: 1000;
}
.ask-brave {
  align-items: center;
  background-color: #4c4c4e;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  font-family: sans-serif;
  margin: 8px;
  min-height: 44px;
  padding: 8px;
}

.ask-brave:hover {
  background-color: #5c5c5e;
}

.ask-brave-icon {
  background: url(./ask-brave-icon-DdJTJrmV.webp) no-repeat center center;
  background-size: 20px 20px;
  display: flex;
  flex-shrink: 0;
  height: 28px;
  margin-right: 12px;
  width: 28px;
}

.ask-brave-label {
  color: #c0c0c0;
  font-size: 18px;
}
.suggestion {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-family: sans-serif;
  min-height: 44px;
  padding: 8px;
}

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

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

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

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

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

#try-now-button:hover {
  background-color: var(
    --try-now-button-hover-background-color,
    var(--try-now-button-background-color, rgb(255, 96, 0))
  );
  filter: var(--try-now-button-hover-filter, brightness(1.15));
  transform: scale(var(--try-now-button-hover-scale));
}

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

#make-default-button:hover {
  background-color: var(
    --make-default-button-hover-background-color,
    var(--make-default-button-background-color, #303033)
  );
  filter: var(--make-default-button-hover-filter, brightness(1.15));
}
@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 {
  cursor: default;
  pointer-events: none;
}

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

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

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

.sub-headline {
  color: white;
  font-size: 18px;
  font-weight: 300;
  margin: 0 0 74px;
  opacity: 0.65;
  text-align: center;
  white-space: nowrap;
  width: 100%;
}

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

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