@font-face {
  font-family: 'Montserrat';
  font-weight: 400 800;
  font-optical-sizing: auto;
  font-display: swap;
  src: url('./fonts/Montserrat/Montserrat-VariableFont_wght.ttf');
}
@font-face {
  font-family: 'JetBrainsMono';
  font-weight: 400 800;
  font-optical-sizing: auto;
  font-display: swap;
  src: url('./fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf');
}

:root {
  /* defaults */
  --background_color: #222222;
  --base_type_color: #42ffc2;
  --bookmark_color: #147dfa;
  --brace_mismatch_color: #ff786b;
  --breakpoint_color: #ff786b;
  --caret_background_color: #000000; /* UNUSED, see docs */
  --caret_color: #ffffff;
  --code_folding_color: #ffffff45;
  --comment_color: #cfcfcf80;

  --comment_markers__critical_color: #c45959;
  --comment_markers__notice_color: #8fab82;
  --comment_markers__warning_color: #b89c7a;

  --completion_background_color: #3d3d3d;
  --completion_existing_color: #ffffff24;
  --completion_font_color: #cfcfcf;
  --completion_scroll_color: #ffffff4a;
  --completion_scroll_hovered_color: #ffffff66;
  --completion_selected_color: #ffffff12;

  --control_flow_keyword_color: #ff8ccc;
  --current_line_color: #ffffff12;
  --doc_comment_color: #99b3cccc;
  --engine_type_color: #8fffdb;
  --executing_line_color: #fae345;
  --folded_code_region_color: #ad74c333;
  --function_color: #57b3ff;

  --gdscript__annotation_color: #ffb373;
  --gdscript__function_definition_color: #66e6ff;
  --gdscript__global_function_color: #a3a3f5;
  --gdscript__node_path_color: #b8c47d;
  --gdscript__node_reference_color: #63c259;
  --gdscript__string_name_color: #ffc2a6;

  --keyword_color: #ff7085;
  --line_length_guideline_color: #3d3d3d;
  --line_number_color: #cfcfcf80;
  --mark_color: #ff786b4d;
  --member_variable_color: #bce0ff;
  --number_color: #a1ffe0;
  --safe_line_number_color: #cff8cfbf;
  --search_result_border_color: #699ce861;
  --search_result_color: #ffffff12;
  --selection_color: #70bafa66;
  --string_color: #ffeda1;
  --symbol_color: #abc9ff;
  --text_color: #cfcfcf;
  --user_type_color: #c7ffed;
  --warning_color: #ffde6626;
  --word_highlighted_color: #ffffff12;

  --gutter-width: 11.5ch;
  --line-50-pos: calc(80ch + var(--gutter-width));
  --line-100-pos: calc(100ch + var(--gutter-width));

  /* Website stuff */
  color-scheme: light dark;
  --web-background: light-dark(#eff1f5, #25282b);
  --web-primary: #3e8ecc;
  --web-primary-dark: light-dark(#546b99, #ffffffd9);
  --web-primary-darkest: #455175;
  --web-toggle-bg: light-dark(#546b99, var(--web-primary-darkest));
  --web-white: light-dark(#fff, #333639);
  --web-black: light-dark(#000, #fff);
  --web-box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.4705882353);
  --header-color-rot: 135deg;
  --header-height: 30vh;
}
#hero,
#theme-selector,
button {
  color-scheme: light;
}

html,
body,
pre {
  margin: 0;
  padding: 0;
}
html {
  font-family:
    'Montserrat',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen-Sans,
    Ubuntu,
    Cantarell,
    'Helvetica Neue',
    sans-serif;
  font-size: 18px;
  color: #4a5365;
  color-scheme: light !important;
}
html:has(#is-dark:checked) {
  color-scheme: dark !important;
}
body {
  background: var(--web-background);
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', sans-serif;
}
footer {
  color: var(--web-primary-dark);
  background: var(--web-white);
  margin-top: 3.5rem;
  font-size: 17px;
  box-shadow: 0 5px 20px 0 #0003;
}
footer::before {
  content: '';
  display: block;
  height: 0.4rem;
  background:
    linear-gradient(transparent, #6003 150%),
    linear-gradient(
      var(--header-color-rot),
      transparent 0% 12.5%,
      #0005 12.5%,
      transparent 13.5% 25%,
      #0007 25%,
      transparent 26% 37.5%,
      #0004 37.5%,
      transparent 38.5% 50%,
      #0006 50%,
      transparent 51% 62.5%,
      #0005 62.5%,
      transparent 63.5% 75%,
      #0004 75%,
      transparent 76% 87.5%,
      #0004 87.5%,
      transparent 88.5% 100%
    ),
    linear-gradient(
      var(--header-color-rot),
      #73e 0% 12.5%,
      #07f 12.5% 25%,
      #0ce 25% 37.5%,
      #0b0 37.5% 50%,
      #9d0 50% 62.5%,
      #fd0 62.5% 75%,
      #f90 75% 87.5%,
      #e40 87.5% 100%
    );
  opacity: 0.75;
}
footer > div {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem 2.4rem;
}
::selection {
  color: var(--web-white);
  background: var(--web-primary);
}
a {
  color: var(--web-primary);
}
#mode-toggle {
  font-family: 'Montserrat';
  font-weight: 800;
  gap: 0 0.75rem;
  display: flex;
  align-items: center;
}
#mode-toggle > * {
  width: 3.2em;
  text-align: center;
}
label,
input {
  cursor: pointer;
}
label[for='is-dark'] {
  vertical-align: text-bottom;
  display: inline-block;
  position: relative;
  font-size: 1.5rem;
  height: 1.25em;
  width: 2.5em !important;
  background: var(--web-toggle-bg);
  background: var(--web-primary-dark);
  border-radius: 99rem;
  align-self: center;
  text-shadow:
    0 2px 0 #2228,
    0 0 5px #2228;
  box-shadow: inset 0 3px 2px #2228;
}
label[for='is-dark']:hover {
  filter: brightness(1.175);
}
.dark,
#mode-toggle:has(#is-dark:checked) .light {
  opacity: 0.5;
  font-weight: 400;
}
#mode-toggle:has(#is-dark:checked) .dark {
  opacity: 1;
  font-weight: 800;
}
label[for='is-dark']::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  background: var(--web-white);
  box-shadow: 1px 3px 0 #2228;
  scale: 0.7;
  border-radius: inherit;
  transition: translate 100ms ease-in-out;
}
label[for='is-dark']:has(#is-dark:checked)::after {
  content: '';
  translate: 100% -50%;
}
#is-dark {
  display: none;
}
#hero {
  height: var(--header-height);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  background:
    linear-gradient(transparent, #6003 150%),
    linear-gradient(
      var(--header-color-rot),
      transparent 0% 12.5%,
      #0005 12.5%,
      transparent 13.5% 25%,
      #0007 25%,
      transparent 26% 37.5%,
      #0004 37.5%,
      transparent 38.5% 50%,
      #0006 50%,
      transparent 51% 62.5%,
      #0005 62.5%,
      transparent 63.5% 75%,
      #0004 75%,
      transparent 76% 87.5%,
      #0004 87.5%,
      transparent 88.5% 100%
    ),
    linear-gradient(
      var(--header-color-rot),
      #73e 0% 12.5%,
      #07f 12.5% 25%,
      #0ce 25% 37.5%,
      #0b0 37.5% 50%,
      #9d0 50% 62.5%,
      #fd0 62.5% 75%,
      #f90 75% 87.5%,
      #e40 87.5% 100%
    );
  background-attachment: fixed;
  background-size: 100vw var(--header-height);
}
@supports (animation-timeline: scroll()) {
  #hero {
    background-size: 100vw calc(100% + 200px);
    background-attachment: scroll;
    animation: parallax linear;
    animation-timeline: scroll();
  }

  @keyframes parallax {
    from {
      background-position-y: 50%;
    }
    to {
      background-position-y: -100%;
    }
  }
}
#hero img {
  transform-origin: 50% 90%;
  animation: happy 2s infinite;
}
@keyframes happy {
  0%,
  38%,
  100% {
    scale: 1;
    translate: 0;
  }
  5%,
  7.5% {
    scale: 1.1 0.8;
    translate: 0;
  }
  8% {
    translate: 0;
  }
  17% {
    scale: 0.8 1.1;
    translate: 0 -40%;
  }
  20% {
    scale: 0.8 1.1;
  }
  27.5% {
    translate: 0;
  }
  29% {
    scale: 1.1 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  #hero,
  #hero img {
    animation: none !important;
  }
}
h1 {
  display: block;
  width: 1200px;
  font-size: 3rem;
  color: var(--web-white) !important;
  filter: drop-shadow(2px 3px 1px #0007) drop-shadow(0 0 10px #0004);
  margin: 0 auto;
  padding: 0.75rem;
}
.godot-icon {
  height: 1lh;
  width: auto;
  vertical-align: text-bottom;
}
.version {
  display: inline-block;
  font-size: 0.35em;
  padding: 0.05rem 0.5rem;
  border-radius: 0.5rem;
  vertical-align: super;
  background: var(--web-primary-dark);
  text-shadow: 1px 2px 0 #0004;
}
header {
  z-index: 10;
  position: sticky;
  top: 0;
  left: 0;
  padding: 0.75rem 1rem;
  font-weight: 800;
  color: var(--web-primary-dark);
  background: var(--web-white);
  box-shadow: 0 -2px 30px 0 #0003;
}
nav {
  max-width: 1200px;
  margin: 0 auto;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
}
#theme-selector {
  padding: 0 0.75rem 0.1rem;
  font: inherit;
  font-size: 1.6rem;
  background: var(--web-primary-dark);
  color: var(--web-white);
  border-radius: 0.5rem;
  border: none;
  outline: 4px solid var(--web-primary-darkest);
  outline-offset: -1px;
  cursor: pointer;
  text-shadow: 2px 3px 0 #0004;
}
option {
  font-family: inherit;
  font-size: 1rem;
  color: var(--web-primary-dark);
  background: var(--web-white);
}
#download {
  margin-left: auto;
  padding: 0.6rem 1.5rem;
  font: inherit;
  font-size: 1rem;
  color: var(--web-white);
  background: var(--web-primary);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  text-shadow: 1px 2px 0 #0004;
  transition: all 100ms ease-in-out;
}
#theme-selector:hover,
#download:hover {
  filter: brightness(1.175);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  padding-top: 2rem;
}
h1,
h2,
h3 {
  font-weight: 800;
  color: var(--web-primary-dark);
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}
[hidden] {
  scale: 0;
  position: absolute !important;
  top: 0;
  left: 0;
}
.demo-wrapper {
  overflow-x: auto;
  border-radius: 0.4rem !important;
  box-shadow: var(--web-box-shadow);
}
.demo {
  font-family: 'JetBrainsMono';
  font-size: 14px;
  line-height: calc(1.5em + 4px);
  transition: all 150ms;
}
pre {
  position: relative;
  font-variant-ligatures: none;
  tab-size: 4;
  color: var(--text_color);
  --line-50-color: color(
    from var(--line_length_guideline_color) srgb r g b / 0.5
  );
  --line-100-color: var(--line_length_guideline_color);
  background:
    linear-gradient(
      to right,
      transparent var(--line-50-pos),
      var(--line-50-color) var(--line-50-pos) calc(var(--line-50-pos) + 1px),
      transparent calc(var(--line-50-pos) + 1px) var(--line-100-pos),
      var(--line-100-color) var(--line-100-pos) calc(var(--line-100-pos) + 1px),
      transparent calc(var(--line-100-pos) + 1px)
    ),
    var(--background_color);
  background-attachment: local;
  counter-reset: line;
  cursor: text;
}
pre div {
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1em * 1.5 + 4px);
  counter-increment: line;
}
pre div::before {
  content: counter(line, decimal) '\00a0\00a0\00a0';
  display: inline-block;
  width: var(--gutter-width) !important;
  text-align: right;
  color: var(--safe_line_number_color);
}
pre div.not_safe::before {
  color: var(--line_number_color);
}
pre div::selection,
pre div *::selection {
  color: var(--text_selected_color);
  background: var(--selection_color);
}

pre div span {
  display: inline-block;
}

#theme-demo {
  min-width: calc(var(--line-100-pos) + var(--gutter-width));
  padding: 0.4rem 0;
}
.tab {
  /* FIXME: alpha value is a complete guess */
  background: color(from var(--symbol_color) srgb r g b / 0.75);
  mask: left center no-repeat url('./text_edit_tab.svg');
  width: 4ch;
}

.bookmark {
  display: inline-block;
  position: absolute;
  left: 2.4ch;
  width: calc(1ch * 5 / 3.8);
  height: 2.1ch;
  translate: 0 1px;
  background: var(--bookmark_color);
  mask: center / 100% 100% no-repeat url('./bookmark.svg');
}
.breakpoint {
  display: inline-block;
  position: absolute;
  left: 1.5ch;
  height: 2ch;
  width: 2ch;
  translate: 0 0.5ch;
  scale: 0.8;
  background: radial-gradient(var(--breakpoint_color), transparent 200%);
  mask: center no-repeat url('./breakpoint.svg');
}
.executing_line {
  display: inline-block;
  position: absolute;
  left: 1.7ch;
  height: 0;
  width: 0;
  translate: 0 0.53ch;
  border: 1ch solid transparent;
  border-left: 1.6ch solid var(--executing_line_color);
  scale: 1 0.5;
}
.control_flow_keyword::before,
.gdscript__function_definition::before {
  content: '';
  background: var(--code_folding_color);
  mask: center / contain no-repeat url('./CodeFoldDownArrow.svg');

  display: inline-block;
  width: 1.8ch;
  height: 1.8ch;
  position: absolute;
  left: calc(var(--gutter-width) - 2ch);
  top: 50%;
  translate: -1px -50%;
}

.comment_code_region {
  color: color(from var(--folded_code_region_color) srgb r g b / 1);
}
.comment_code_region.start::before {
  content: '';
  /* force minimum alpha of 40% in accordance with https://github.com/godotengine/godot/pull/74843/files#diff-6b3879fe8504d721cd9c247489803d697d29ebc128a7288eb620013941b3af65R1530 */
  background: color(
    from var(--folded_code_region_color) srgb r g b / max(alpha, 0.4)
  );
  mask: center / contain no-repeat url('./CodeRegionFoldDownArrow.svg');

  display: inline-block;
  width: 1.8ch;
  height: 1.8ch;
  position: absolute;
  left: calc(var(--gutter-width) - 2ch);
  top: 50%;
  translate: -1px -50%;
}
.folded::before {
  rotate: -90deg;
}

.folded {
  background: var(--folded_code_region_color);
}
.folded::after {
  content: '\00a0' url('./text_edit_ellipsis.svg');
  display: inline-block;
  translate: 0 -1px;
}
.folded,
.mark,
.warning {
  width: calc(100% - var(--gutter-width));
}
#brace_mismatch_example::before {
  content: ')';
}
.caret {
  height: calc(1.5em - 4px);
  width: 1px;
  background: var(--caret_color);
  overflow: hidden;
  position: absolute;
  top: calc(50% - 1px);
  translate: 0 -50%;
  animation: blink 1s infinite steps(2, jump-none);
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.base_type {
  color: var(--base_type_color);
}
.brace_mismatch {
  color: var(--brace_mismatch_color);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.comment {
  color: var(--comment_color);
}
.comment_markers__critical {
  color: var(--comment_markers__critical_color);
}
.comment_markers__notice {
  color: var(--comment_markers__notice_color);
}
.comment_markers__warning {
  color: var(--comment_markers__warning_color);
}
.control_flow_keyword {
  color: var(--control_flow_keyword_color);
}
.current_line {
  background: var(--current_line_color);
}
.doc_comment {
  color: var(--doc_comment_color);
}
.engine_type {
  color: var(--engine_type_color);
}
.function {
  color: var(--function_color);
}
.gdscript__annotation {
  color: var(--gdscript__annotation_color);
}
.gdscript__function_definition {
  color: var(--gdscript__function_definition_color);
}
.gdscript__global_function {
  color: var(--gdscript__global_function_color);
}
.gdscript__node_path {
  color: var(--gdscript__node_path_color);
}
.gdscript__node_reference {
  color: var(--gdscript__node_reference_color);
}
.gdscript__string_name {
  color: var(--gdscript__string_name_color);
}
.keyword {
  color: var(--keyword_color);
}
.mark {
  background: var(--mark_color);
}
.member_variable {
  color: var(--member_variable_color);
}
.number {
  color: var(--number_color);
}
.search_result {
  position: relative;
  background: var(--search_result_color);
  outline: 1px solid var(--search_result_border_color);
}
.search_result.active {
  /* layers selection color over result color */
  background:
    linear-gradient(var(--selection_color)),
    linear-gradient(var(--search_result_color));
}
*[title] {
  cursor: help;
  z-index: 1;
}
.string {
  color: var(--string_color);
}
.symbol {
  color: var(--symbol_color);
}
.text {
  color: var(--text_color);
}
.user_type {
  color: var(--user_type_color);
}
.warning {
  background: var(--warning_color);
}
.word_highlighted {
  background: var(--word_highlighted_color);
}
.word_selection {
  /* layers selection color over result color */
  background:
    linear-gradient(var(--selection_color)),
    linear-gradient(var(--word_highlighted_color));
}

#partial-demos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 0 3rem;
}
#partial-demos h3 {
  text-align: center;
}
#partial-demos .demo {
  --gutter-width: 6ch;
  position: relative;
  height: 8lh;
  width: 12lh;
  padding: 1ch 0;
  background: var(--background_color);
}
#completion-demo {
  user-select: none;
}
#completion-demo > div {
  position: relative;
  padding-left: 3px;
}
#completion-dialog {
  display: inline-flex;
  position: absolute;
  top: 100%;
  left: 3px;
  translate: 1ch -2px;
  background: var(--completion_background_color);
}
#completion-dialog ul {
  font: inherit;
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--completion_font_color);
}
#completion-dialog li {
  padding: 0 3.5px;
  padding-left: 3.3ch;
  --background: 4px center no-repeat url('./BoxMesh.svg');
  background: var(--background);
}
#completion-dialog span {
  display: inline-block;
}
.completion_selected {
  background: var(--background), var(--completion_selected_color) !important;
}
.completion_existing {
  background-color: var(--completion_existing_color);
}
#completion-dialog .scrollbar {
  width: 6px;
  margin-top: 15%;
  background: var(--completion_scroll_color);
  cursor: pointer;
}
#completion-dialog .scrollbar:hover {
  background: var(--completion_scroll_hovered_color);
}