@font-face {
  font-family: "HexCode Inter";
  src: url("hexcode-inter.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

html.theme-dark,
html.theme-black,
html.theme-auto,
html.theme-light {
  color-scheme: dark;
  --color-base-font: #a3a3a3;
  --color-base-font-rgb: 163, 163, 163;
  --color-base-background: #000;
  --color-base-background-mobile: #000;
  --color-url-font: #d4d4d4;
  --color-url-visited-font: #a3a3a3;
  --color-header-background: #000;
  --color-header-border: #171717;
  --color-footer-background: #000;
  --color-footer-border: #171717;
  --color-sidebar-border: #262626;
  --color-sidebar-font: #fff;
  --color-sidebar-background: #0a0a0a;
  --color-backtotop-font: #d4d4d4;
  --color-backtotop-border: #262626;
  --color-backtotop-background: #0a0a0a;
  --color-btn-background: #fff;
  --color-btn-font: #000;
  --color-show-btn-background: #171717;
  --color-show-btn-font: #fff;
  --color-search-border: #262626;
  --color-search-shadow: 0 18px 60px rgb(0 0 0 / 45%);
  --color-search-background: #0a0a0a;
  --color-search-font: #fff;
  --color-search-background-hover: #e5e5e5;
  --color-categories-item-selected-font: #fff;
  --color-categories-item-border-selected: #fff;
  --color-autocomplete-font: #fff;
  --color-autocomplete-border: #262626;
  --color-autocomplete-background: #0a0a0a;
  --color-autocomplete-background-hover: #171717;
  --color-answer-font: #d4d4d4;
  --color-answer-background: #0a0a0a;
  --color-result-background: #0a0a0a;
  --color-result-border: #171717;
  --color-result-url-font: #a3a3a3;
  --color-result-vim-selected: #171717;
  --color-result-vim-arrow: #fff;
  --color-result-description-highlight-font: #fff;
  --color-result-link-font: #fff;
  --color-result-link-font-highlight: #fff;
  --color-result-link-visited-font: #a3a3a3;
  --color-result-publishdate-font: #737373;
  --color-result-engines-font: #737373;
  --color-result-search-url-border: #262626;
  --color-result-search-url-font: #d4d4d4;
  --color-settings-tr-hover: #111;
  --color-settings-engine-description-font: #a3a3a3;
  --color-settings-table-group-background: #0a0a0a;
  --color-toolkit-badge-background: #171717;
  --color-toolkit-dialog-border: #262626;
  --color-toolkit-dialog-background: #0a0a0a;
  --color-toolkit-tabs-label-border: #171717;
  --color-toolkit-tabs-section-border: #262626;
  --color-toolkit-select-background: #0a0a0a;
  --color-toolkit-select-border: #262626;
  --color-toolkit-select-background-hover: #171717;
  --color-toolkit-input-text-font: #fff;
  --color-toolkit-checkbox-onoff-off-background: #262626;
  --color-toolkit-checkbox-onoff-on-background: #262626;
  --color-toolkit-checkbox-onoff-on-mark-background: #fff;
  --color-toolkit-checkbox-onoff-on-mark-color: #000;
  --color-toolkit-checkbox-onoff-off-mark-background: #737373;
  --color-toolkit-checkbox-onoff-off-mark-color: #000;
  --color-toolkit-checkbox-label-background: #0a0a0a;
  --color-toolkit-checkbox-label-border: #262626;
  --color-toolkit-checkbox-input-border: #fff;
  --color-toolkit-engine-tooltip-border: #262626;
  --color-toolkit-engine-tooltip-background: #0a0a0a;
}

html {
  min-height: 100%;
  background: #000 !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body,
input,
button,
select,
textarea {
  font-family: "HexCode Inter", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: #000;
  letter-spacing: -0.01em;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body > main {
  flex: 1 0 auto;
}

a {
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

.hexcode-site-mark {
  position: absolute;
  z-index: 20;
  top: 1.55rem;
  left: max(1.5rem, calc((100vw - 72rem) / 2 + 1.5rem));
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

body:not(.index_endpoint) > .hexcode-site-mark {
  display: none;
}

#links_on_top {
  top: 1rem;
  right: max(1rem, calc((100vw - 72rem) / 2 + 1rem));
}

#links_on_top a {
  color: #a3a3a3 !important;
  border-radius: 999px;
}

#links_on_top a:hover,
#links_on_top a:focus-visible {
  color: #fff;
}

#main_index {
  box-sizing: border-box;
  width: 100%;
  max-width: 72rem;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(8rem, 16vh, 11rem) 1.5rem 5rem;
}

#main_index .index {
  position: static;
  width: 100%;
  max-width: 48rem;
  margin: 0;
  transform: none;
  text-align: left;
}

.hexcode-hero {
  margin-bottom: 2.25rem;
}

.hexcode-kicker {
  margin: 0 0 1.25rem;
  color: #737373;
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: 0.3em;
}

.hexcode-hero h1 {
  max-width: 44rem;
  margin: 0;
  color: #fff;
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 620;
  letter-spacing: -0.055em;
  line-height: 0.98;
  visibility: visible !important;
}

.hexcode-intro {
  max-width: 38rem;
  margin: 1.5rem 0 0;
  color: #a3a3a3;
  font-size: 1.05rem;
  line-height: 1.75;
}

#main_index #search {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 48rem;
  margin: 0;
}

#main_index #search_header,
#main_index #search_view {
  margin: 0 !important;
  padding: 0 !important;
}

#main_index #search_header {
  display: block !important;
  width: 100%;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

#main_index #search_view {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

#main_index #search:focus-within #search_view {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

.search_box {
  display: flex;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100% !important;
  border: 1px solid #262626 !important;
  border-radius: 999px !important;
  background: #0a0a0a !important;
  box-shadow: 0 18px 60px rgb(0 0 0 / 45%) !important;
  overflow: visible;
}

.search_box:focus-within {
  border-color: #525252 !important;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 8%), 0 18px 60px rgb(0 0 0 / 55%) !important;
}

.search_box #q {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3.65rem;
  padding-left: 1.4rem;
  background: transparent !important;
  color: #fff !important;
  font-size: 16px !important;
}

.search_box #q:focus,
.search_box #q:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.search_box #q::placeholder {
  color: #525252;
}

.search_box #q:placeholder-shown + #clear_search {
  display: none !important;
}

.search_box #send_search {
  margin: 0.35rem;
  border-radius: 999px;
  background: #fff !important;
  color: #000 !important;
}

.search_box #send_search:hover {
  background: #e5e5e5 !important;
}

.search_box #clear_search {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0 !important;
  color: #737373;
  touch-action: manipulation;
}

.search_box #send_search {
  flex: 0 0 3rem;
  width: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  padding: 0 !important;
  touch-action: manipulation;
}

.search_box .autocomplete {
  right: 0 !important;
  left: 0 !important;
  z-index: 50;
  box-sizing: border-box;
  width: 100% !important;
  max-height: min(18rem, calc(var(--hexcode-vvh, 100dvh) - 8rem));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hexcode-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.25rem 0 0;
  color: #525252;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.hexcode-status span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgb(16 185 129 / 10%);
}

#main_results,
#main_preferences,
#main_stats,
#main_info {
  padding-top: 4.75rem;
}

#search_header {
  display: grid !important;
  grid-template-areas:
    "brand query spare"
    ". categories categories";
  grid-template-columns: 5.5rem minmax(20rem, 40rem) minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.8rem;
  box-sizing: border-box;
  width: 100%;
  padding: 1.15rem max(1rem, calc((100vw - 80rem) / 2)) 0.8rem !important;
  border-bottom-color: #171717;
  background: rgb(0 0 0 / 92%);
  backdrop-filter: blur(16px);
}

#search_logo {
  grid-area: brand;
  box-sizing: border-box;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  align-self: center;
  justify-content: flex-start;
  overflow: visible;
}

#search_view {
  grid-area: query;
  min-width: 0;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
}

#search:focus-within #search_header #search_view {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#main_index #search:focus-within #search_header #search_view {
  width: 100% !important;
}

#search_header #categories {
  grid-area: categories;
  min-width: 0;
  margin: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

#search_header #categories::-webkit-scrollbar {
  display: none;
}

#search_header #categories_container {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 0.35rem;
  width: max-content;
  min-width: 100%;
}

#search_header #categories .category {
  flex: 0 0 auto;
}

.hexcode-search-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  line-height: 1;
}

.hexcode-search-logo strong {
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hexcode-search-logo small {
  margin-top: 0.28rem;
  color: #525252;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.28em;
}

.result,
.answer,
.infobox {
  border: 1px solid #171717 !important;
  border-radius: 1rem !important;
  background: rgb(10 10 10 / 78%) !important;
}

.result {
  margin-bottom: 0.75rem !important;
  padding: 1.1rem 1.25rem !important;
}

.result:hover {
  border-color: #262626 !important;
}

.result h3 a {
  color: #fff !important;
  font-weight: 520;
  letter-spacing: -0.02em;
}

.result .content,
.result p {
  color: #a3a3a3;
  line-height: 1.65;
}

#sidebar a {
  color: #d4d4d4;
}

.dialog-error {
  border: 1px solid #3f1d1d !important;
  border-radius: 0.85rem !important;
  background: #140a0a !important;
  color: #fca5a5 !important;
}

.dialog-error a {
  color: #fecaca !important;
}

button,
input,
select,
.button,
.btn {
  border-radius: 999px;
}

.hexcode-page-header {
  width: auto;
  margin: 0;
  padding: 1.5rem 0 0.25rem;
}

.hexcode-page-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff !important;
  line-height: 1;
  text-decoration: none;
}

.hexcode-page-brand strong {
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hexcode-page-brand small {
  margin-top: 0.28rem;
  color: #525252;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.28em;
}

#main_preferences.page_with_header,
#main_stats.page_with_header,
#main_info.page_with_header {
  box-sizing: border-box;
  width: min(72rem, calc(100% - 3rem));
  margin: 0 auto;
}

.page_with_header h1 {
  margin-top: 1.6rem;
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 620;
  letter-spacing: -0.045em;
}

.tabs > input:checked + label,
.tabs > input:checked + label:hover,
#categories input:checked + label,
#categories input:checked + label:hover {
  border-color: #fff !important;
  color: #fff !important;
}

#categories .category label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-sizing: border-box;
  min-height: 2.15rem;
  padding: 0.35rem 0.75rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #737373 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

#categories .category label svg {
  display: block;
  flex: 0 0 auto;
  width: 1.05rem !important;
  height: 1.05rem !important;
}

#categories .category .category_name {
  line-height: 1;
}

#categories .category label:hover {
  border-color: #262626 !important;
  background: #0a0a0a !important;
  color: #d4d4d4 !important;
}

#categories .category input:checked + label {
  border-color: #404040 !important;
  background: #171717 !important;
  color: #fff !important;
}

input[type="submit"],
.btn-primary {
  border-color: #fff !important;
  background: #fff !important;
  color: #000 !important;
}

#categories button.category {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-sizing: border-box;
  min-height: 2.15rem;
  padding: 0.35rem 0.75rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #737373 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

#categories button.category:hover {
  border-color: #262626 !important;
  background: #0a0a0a !important;
  color: #d4d4d4 !important;
}

#categories button.category.selected {
  border-color: #404040 !important;
  background: #171717 !important;
  color: #fff !important;
}

#categories button.category svg {
  display: block !important;
  flex: 0 0 auto;
  width: 1.05rem !important;
  height: 1.05rem !important;
}

.search_filters {
  display: grid !important;
  grid-template-columns: minmax(12rem, 18rem) minmax(7rem, 10rem) minmax(11rem, 14rem);
  align-items: center;
  justify-content: start;
  gap: 0.65rem 1rem;
  box-sizing: border-box;
  width: min(72rem, 100%);
  margin: 0 auto !important;
  padding: 0.75rem 0.75rem !important;
  overflow: visible !important;
}

.search_filters select {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
}

button[type="reset"],
.btn-secondary {
  border-color: #262626 !important;
  background: #171717 !important;
  color: #d4d4d4 !important;
}

.onoff-checkbox input:checked + label::before,
input[type="checkbox"]:checked {
  border-color: #fff !important;
  accent-color: #fff;
}

input.checkbox-onoff[type="checkbox"]:checked::before,
input.checkbox-onoff.reversed-checkbox[type="checkbox"]::before {
  background: #fff !important;
  color: #000 !important;
}

.result .highlight,
.result .highlight-link,
.result h3 .highlight {
  color: #fff !important;
  font-weight: 650;
}

.hexcode-footer {
  box-sizing: border-box;
  border-top: 1px solid #171717;
  background: #000 !important;
  color: #525252;
  padding: 1.5rem max(1.5rem, calc((100vw - 72rem) / 2 + 1.5rem)) 1.25rem;
  position: static !important;
  width: 100%;
  flex: none;
  text-align: left !important;
}

.hexcode-footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.hexcode-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hexcode-footer-brand strong {
  color: #d4d4d4;
  font-size: 0.82rem;
  font-weight: 560;
}

.hexcode-footer-brand span,
.hexcode-powered {
  color: #525252;
  font-size: 0.72rem;
}

.hexcode-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem 1.25rem;
}

.hexcode-footer a {
  color: #a3a3a3;
  font-size: 0.78rem;
  text-decoration: none;
}

.hexcode-footer a:hover {
  color: #fff;
}

.hexcode-powered {
  margin: 1rem 0 0;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:not(#q):focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px;
}

@media (max-width: 48rem) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  button,
  input,
  select,
  textarea,
  a {
    touch-action: manipulation;
  }

  .hexcode-site-mark {
    top: max(1.35rem, env(safe-area-inset-top));
    left: max(1rem, env(safe-area-inset-left));
  }

  #links_on_top {
    top: max(1rem, env(safe-area-inset-top));
    right: max(0.5rem, env(safe-area-inset-right));
  }

  #main_index {
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
    transition: padding-top 160ms ease;
  }

  body.index_endpoint.hexcode-input-focus #main_index {
    padding-top: max(5.75rem, calc(env(safe-area-inset-top) + 4.75rem));
  }

  body.index_endpoint.hexcode-input-focus .hexcode-hero {
    display: none;
  }

  body.index_endpoint.hexcode-input-focus .hexcode-status {
    margin-top: 1rem;
  }

  .hexcode-intro {
    font-size: 0.98rem;
  }

  #main_results,
  #main_preferences,
  #main_stats,
  #main_info {
    padding-top: 4rem;
  }

  .result,
  .answer,
  .infobox {
    border-radius: 0.9rem !important;
  }

  #search_logo {
    width: auto !important;
    min-width: 0;
  }

  #search_logo .hexcode-search-logo small {
    display: none;
  }

  #search_header {
    grid-template-areas:
      "brand query"
      "categories categories";
    grid-template-columns: 3.7rem minmax(0, 1fr);
    column-gap: 0.65rem;
    row-gap: 0.65rem;
    padding: max(0.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.65rem max(1rem, env(safe-area-inset-left)) !important;
    overflow-x: clip;
  }

  #search_header .hexcode-search-logo strong {
    font-size: 0.64rem;
    letter-spacing: 0.1em;
  }

  #search_header #categories .category label {
    min-height: 2rem;
    padding: 0.3rem 0.65rem !important;
  }

  #search_header #categories button.category {
    min-height: 2rem;
    padding: 0.3rem 0.65rem !important;
  }

  .search_filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.55rem 0.75rem;
    width: 100%;
    padding: 0.7rem 1rem !important;
  }

  .search_filters #safesearch {
    grid-column: 1 / -1;
  }

  .hexcode-page-header,
  #main_preferences.page_with_header,
  #main_stats.page_with_header,
  #main_info.page_with_header {
    width: calc(100% - 2rem);
  }

  .hexcode-page-header {
    width: auto;
  }

  .hexcode-footer {
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  .hexcode-footer-inner {
    flex-direction: column;
    gap: 1rem;
  }

  .hexcode-footer nav {
    justify-content: flex-start;
  }
}

@media (max-width: 48rem) and (max-height: 34rem) {
  #main_index {
    padding-top: max(4.75rem, calc(env(safe-area-inset-top) + 4rem));
  }

  #main_index .hexcode-kicker,
  #main_index .hexcode-intro {
    display: none;
  }

  #main_index .hexcode-hero {
    margin-bottom: 1rem;
  }

  #main_index .hexcode-hero h1 {
    font-size: clamp(2rem, 9vw, 3rem);
  }
}

@media (max-width: 22rem) {
  #search_header {
    grid-template-areas:
      "query"
      "categories";
    grid-template-columns: minmax(0, 1fr);
  }

  #search_logo {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}