@charset "UTF-8";
@-webkit-keyframes connected_colors {
  0% {
    background-color: var(--connected-green);
  }
  14% {
    background-color: var(--connected-yellow);
  }
  29% {
    background-color: var(--connected-orange);
  }
  43% {
    background-color: var(--connected-red);
  }
  57% {
    background-color: var(--connected-purple);
  }
  71% {
    background-color: var(--connected-blue);
  }
  86% {
    background-color: var(--relay-blue);
  }
  100% {
    background-color: var(--connected-green);
  }
}
@keyframes connected_colors {
  0% {
    background-color: var(--connected-green);
  }
  14% {
    background-color: var(--connected-yellow);
  }
  29% {
    background-color: var(--connected-orange);
  }
  43% {
    background-color: var(--connected-red);
  }
  57% {
    background-color: var(--connected-purple);
  }
  71% {
    background-color: var(--connected-blue);
  }
  86% {
    background-color: var(--relay-blue);
  }
  100% {
    background-color: var(--connected-green);
  }
}
@-webkit-keyframes rotateInThirds {
  0%, 30% {
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  33% {
    -webkit-transform: translateX(2px) translateY(2px) rotate(129deg);
    transform: translateX(2px) translateY(2px) rotate(129deg);
  }
  35%, 63% {
    -webkit-transform: translateX(2px) translateY(2px) rotate(120deg);
    transform: translateX(2px) translateY(2px) rotate(120deg);
  }
  66% {
    -webkit-transform: translateX(-2px) translateY(1px) rotate(249deg);
    transform: translateX(-2px) translateY(1px) rotate(249deg);
  }
  68%, 96% {
    -webkit-transform: translateX(-2px) translateY(1px) rotate(240deg);
    transform: translateX(-2px) translateY(1px) rotate(240deg);
  }
  98% {
    -webkit-transform: translateX(0px) translateY(0px) rotate(369deg);
    transform: translateX(0px) translateY(0px) rotate(369deg);
  }
  100% {
    -webkit-transform: translateX(0px) translateY(0px) rotate(360deg);
    transform: translateX(0px) translateY(0px) rotate(360deg);
  }
}
@keyframes rotateInThirds {
  0%, 30% {
    -webkit-transform: translateX(0px) translateY(0px) rotate(0deg);
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  33% {
    -webkit-transform: translateX(2px) translateY(2px) rotate(129deg);
    transform: translateX(2px) translateY(2px) rotate(129deg);
  }
  35%, 63% {
    -webkit-transform: translateX(2px) translateY(2px) rotate(120deg);
    transform: translateX(2px) translateY(2px) rotate(120deg);
  }
  66% {
    -webkit-transform: translateX(-2px) translateY(1px) rotate(249deg);
    transform: translateX(-2px) translateY(1px) rotate(249deg);
  }
  68%, 96% {
    -webkit-transform: translateX(-2px) translateY(1px) rotate(240deg);
    transform: translateX(-2px) translateY(1px) rotate(240deg);
  }
  98% {
    -webkit-transform: translateX(0px) translateY(0px) rotate(369deg);
    transform: translateX(0px) translateY(0px) rotate(369deg);
  }
  100% {
    -webkit-transform: translateX(0px) translateY(0px) rotate(360deg);
    transform: translateX(0px) translateY(0px) rotate(360deg);
  }
}
@-webkit-keyframes rotateInHalfs {
  0%, 45% {
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(2px) rotate(190deg);
    transform: translateY(2px) rotate(190deg);
  }
  55%, 90% {
    -webkit-transform: translateY(2px) rotate(180deg);
    transform: translateY(2px) rotate(180deg);
  }
  95% {
    -webkit-transform: translateY(0px) rotate(370deg);
    transform: translateY(0px) rotate(370deg);
  }
  100% {
    -webkit-transform: translateY(0px) rotate(360deg);
    transform: translateY(0px) rotate(360deg);
  }
}
@keyframes rotateInHalfs {
  0%, 45% {
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(2px) rotate(190deg);
    transform: translateY(2px) rotate(190deg);
  }
  55%, 90% {
    -webkit-transform: translateY(2px) rotate(180deg);
    transform: translateY(2px) rotate(180deg);
  }
  95% {
    -webkit-transform: translateY(0px) rotate(370deg);
    transform: translateY(0px) rotate(370deg);
  }
  100% {
    -webkit-transform: translateY(0px) rotate(360deg);
    transform: translateY(0px) rotate(360deg);
  }
}
@-webkit-keyframes buzz_out {
  10% {
    -webkit-transform: translateX(1.5px) rotate(2deg);
    transform: translateX(1.5px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-1.5px) rotate(-2deg);
    transform: translateX(-1.5px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(1.5px) rotate(2deg);
    transform: translateX(1.5px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-1.5px) rotate(-2deg);
    transform: translateX(-1.5px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(1px) rotate(1deg);
    transform: translateX(1px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-1px) rotate(-1deg);
    transform: translateX(-1px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(1px) rotate(1deg);
    transform: translateX(1px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-1px) rotate(-1deg);
    transform: translateX(-1px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(0.5px) rotate(0);
    transform: translateX(0.5px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-0.5px) rotate(0);
    transform: translateX(-0.5px) rotate(0);
  }
}
@keyframes buzz_out {
  10% {
    -webkit-transform: translateX(1.5px) rotate(2deg);
    transform: translateX(1.5px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-1.5px) rotate(-2deg);
    transform: translateX(-1.5px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(1.5px) rotate(2deg);
    transform: translateX(1.5px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-1.5px) rotate(-2deg);
    transform: translateX(-1.5px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(1px) rotate(1deg);
    transform: translateX(1px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-1px) rotate(-1deg);
    transform: translateX(-1px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(1px) rotate(1deg);
    transform: translateX(1px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-1px) rotate(-1deg);
    transform: translateX(-1px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(0.5px) rotate(0);
    transform: translateX(0.5px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-0.5px) rotate(0);
    transform: translateX(-0.5px) rotate(0);
  }
}
@-webkit-keyframes rotateCoin {
  to {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@keyframes rotateCoin {
  to {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes pulsePurple {
  0% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--connected-purple-rgb), 0.7);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(var(--connected-purple-rgb), 0);
  }
  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--connected-purple-rgb), 0);
  }
}
@keyframes pulsePurple {
  0% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--connected-purple-rgb), 0.7);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(var(--connected-purple-rgb), 0);
  }
  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--connected-purple-rgb), 0);
  }
}
@-webkit-keyframes slider_thumb_hint {
  0%, 100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  25% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  75% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}
@keyframes slider_thumb_hint {
  0%, 100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  25% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  75% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}
@-webkit-keyframes slider_label_hint {
  0%, 100% {
    opacity: 0;
  }
  20%, 80% {
    opacity: 1;
  }
}
@keyframes slider_label_hint {
  0%, 100% {
    opacity: 0;
  }
  20%, 80% {
    opacity: 1;
  }
}
@-webkit-keyframes pop {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
}
@keyframes pop {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
}
@-webkit-keyframes pop2 {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes pop2 {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@-webkit-keyframes ring_gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes ring_gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-webkit-keyframes rule_highlight {
  0%, 5% {
    color: var(--connected-blue);
  }
  10%, 12% {
    color: var(--document-text-color);
  }
  15%, 17% {
    color: var(--connected-blue);
  }
  20%, 22% {
    color: var(--document-text-color);
  }
  25%, 27% {
    color: var(--connected-blue);
  }
  30%, 32% {
    color: var(--document-text-color);
  }
  35%, 90% {
    color: var(--connected-blue);
  }
  100% {
    color: var(--document-text-color);
  }
}
@keyframes rule_highlight {
  0%, 5% {
    color: var(--connected-blue);
  }
  10%, 12% {
    color: var(--document-text-color);
  }
  15%, 17% {
    color: var(--connected-blue);
  }
  20%, 22% {
    color: var(--document-text-color);
  }
  25%, 27% {
    color: var(--connected-blue);
  }
  30%, 32% {
    color: var(--document-text-color);
  }
  35%, 90% {
    color: var(--connected-blue);
  }
  100% {
    color: var(--document-text-color);
  }
}
@-webkit-keyframes pick_highlight {
  0%, 5% {
    background: var(--element-active-color);
  }
  10%, 12% {
    background: var(--element-neutral-color);
  }
  15%, 17% {
    background: var(--element-active-color);
  }
  20%, 22% {
    background: var(--element-neutral-color);
  }
  25%, 27% {
    background: var(--element-active-color);
  }
  30%, 32% {
    background: var(--element-neutral-color);
  }
  35%, 90% {
    background: var(--element-active-color);
  }
  100% {
    background: var(--element-active-color);
  }
}
@keyframes pick_highlight {
  0%, 5% {
    background: var(--element-active-color);
  }
  10%, 12% {
    background: var(--element-neutral-color);
  }
  15%, 17% {
    background: var(--element-active-color);
  }
  20%, 22% {
    background: var(--element-neutral-color);
  }
  25%, 27% {
    background: var(--element-active-color);
  }
  30%, 32% {
    background: var(--element-neutral-color);
  }
  35%, 90% {
    background: var(--element-active-color);
  }
  100% {
    background: var(--element-active-color);
  }
}
:root {
  --safe-top: env(safe-area-inset-top);
  --connected-green-rgb: 68, 153, 52;
  --connected-yellow-rgb: 252, 194, 0;
  --connected-orange-rgb: 239, 123, 0;
  --connected-red-rgb: 229, 31, 46;
  --connected-purple-rgb: 157, 52, 137;
  --connected-blue-rgb: 13, 135, 202;
  --connected-grey-rgb: 107, 138, 164;
  --relay-blue-rgb: 51, 63, 72;
  --connected-green: rgb(var(--connected-green-rgb));
  --connected-yellow: rgb(var(--connected-yellow-rgb));
  --connected-orange: rgb(var(--connected-orange-rgb));
  --connected-red: rgb(var(--connected-red-rgb));
  --connected-purple: rgb(var(--connected-purple-rgb));
  --connected-blue: rgb(var(--connected-blue-rgb));
  --connected-grey: rgb(var(--connected-grey-rgb));
  --relay-blue: rgb(var(--relay-blue-rgb));
  --eu-blue: #001489;
  --eu-yellow: #ffdd00;
  --text-primary-color: #31373d;
  --space-side-padding: 16px;
  --space-between-sm: 8px;
  --space-between-md: 16px;
  --space-between-lg: 32px;
  --space-between-xl: 44px;
  font-size: 14px;
  --background-color-rgb: 255, 255, 255;
  --background-color: rgb(var(--background-color-rgb));
  --text-secondary-color: #7b8a98;
  --link-color: #106dc6;
  --link-hover-color: #23527c;
  --element-neutral-color: rgba(0, 0, 0, 0);
  --element-hover-color: rgba(0, 0, 0, 0.05);
  --element-active-color: rgba(13, 135, 202, 0.1);
  --element-corner-radius: 8px;
  --element-padding: 8px;
  --element-padding-neg: -8px;
  --corner-radius: 4px;
  --graphic-border: 1px solid rgba(0, 0, 0, 0.1);
  --graphic-size: 60px;
  --document-background-color: var(--connected-blue);
  --document-text-color: #543404;
  --document-link-color: rgba(239, 123, 0, 0.7);
  --rounded-text: ui-rounded, "SF Pro Rounded", ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui,
  	"Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color-rgb: 0, 0, 0;
    --text-primary-color: #9baec1;
    --text-secondary-color: #637c96;
    --link-color: var(--connected-blue);
    --link-hover-color: #33adf1;
    --graphic-border: 1px solid rgba(255, 255, 255, 0.25);
    --element-neutral-color: rgba(255, 255, 255, 0);
    --element-hover-color: rgba(255, 255, 255, 0.1);
    --element-active-color: rgba(13, 135, 202, 0.3);
    --document-background-color: var(--relay-blue);
  }
}
@media screen and (min-width: 576px) {
  :root {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) {
  :root {
    --graphic-size: 72px;
    --space-side-padding: 32px;
    --space-between-xl: 64px;
    font-size: 18px;
  }
}
@media screen and (min-width: 1200px) {
  :root {
    --graphic-size: 80px;
  }
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input.clean,
button.clean,
select.clean {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  outline: inherit;
  -webkit-appearance: none;
}

input[type=checkbox].clean,
button.clean,
select.clean {
  cursor: pointer;
}

input[type=number],
input[type=text],
input[type=search] {
  font-size: max(16px, 1em);
}
input[type=number]::placeholder,
input[type=text]::placeholder,
input[type=search]::placeholder {
  color: var(--text-secondary-color);
  opacity: 1;
  font-weight: normal;
}
input[type=number]:-ms-input-placeholder,
input[type=text]:-ms-input-placeholder,
input[type=search]:-ms-input-placeholder {
  color: var(--text-secondary-color);
  font-weight: normal;
}
input[type=number]::-ms-input-placeholder,
input[type=text]::-ms-input-placeholder,
input[type=search]::-ms-input-placeholder {
  color: var(--text-secondary-color);
  font-weight: normal;
}

input[type=number] {
  -moz-appearance: textfield;
}
input[type=number].clean::-webkit-inner-spin-button, input[type=number].clean::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

html,
body {
  overflow-x: hidden;
}

body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-feature-settings: "ss01" on, "ss02" on;
}

.container {
  width: 100vw;
  overflow-x: hidden;
  min-height: 100vh;
}
.container:before, .container:after {
  content: "";
  position: fixed;
  width: 100%;
  left: 0;
  height: 1000px;
  -webkit-transform: translate3d(0, 0, 0);
}
.container:before {
  top: -1000px;
}
.container:after {
  bottom: -1000px;
}

p {
  margin: 0;
}

section > p + p,
.section_article > p + p {
  margin-top: var(--space-between-md);
}

.top_button,
button.top_button {
  display: block;
  height: 40px;
  border-radius: 20px;
  color: var(--link-color);
  position: absolute;
  top: 20px;
  top: max(20px, env(safe-area-inset-top));
  z-index: 8;
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
}
@media (hover: hover) {
  .top_button:hover,
  button.top_button:hover {
    transform: scale(1.2);
  }
}
.top_button:focus, .top_button:active,
button.top_button:focus,
button.top_button:active {
  transform: scale(1.1);
}

.back_button {
  left: 20px;
}

#share_button {
  display: none;
  right: 20px;
}
#music_button + #share_button, #search_button + #share_button {
  right: 76px;
}

button.copy_direct_url {
  display: inline-flex;
  align-content: center;
  justify-content: center;
  padding: 0.5em;
  margin: -0.25em;
  border-radius: 50%;
  background: none;
  transition: 300ms opacity ease, 300ms background ease, 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
}
button.copy_direct_url > svg {
  height: 1em;
  width: 1em;
}
button.copy_direct_url:hover {
  background: var(--share-link-background);
  color: var(--share-link-color);
  transform: scale(1.05);
}
button.copy_direct_url:active {
  transform: scale(0.95);
}

.banner {
  text-align: center;
  color: white;
  padding: 8px 16px;
  background-color: var(--banner-color);
}
.banner p {
  max-width: 650px;
  margin-right: auto;
  margin-left: auto;
}
.banner b {
  font-size: 1.2rem;
}
.banner br + span {
  opacity: 0.8;
}
.banner.euies {
  background-color: var(--eu-blue);
  color: var(--eu-yellow);
}

.contrast {
  text-shadow: 0px 0px 4px rgba(82, 53, 0, 0.8);
  font-weight: 600;
}

.nowrap {
  white-space: nowrap;
}

.img_emoji {
  height: 1em;
  width: auto;
  display: inline;
}

span.need_space--xs,
span.need_space--sm {
  display: none;
}

@media screen and (min-width: 375px) {
  span.need_space--xs {
    display: inline;
  }
}
@media screen and (min-width: 576px) {
  span.need_space--sm {
    display: inline;
  }
  span.less_space--sm {
    display: none;
  }
}
a:link, a:visited {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 0.14em;
}
@media (hover: hover) {
  a:hover {
    color: var(--link-hover-color);
  }
}
a:focus, a:active {
  color: var(--link-hover-color);
}

button.js_link {
  color: var(--link-color);
}
@media (hover: hover) {
  button.js_link:hover {
    color: var(--link-hover-color);
  }
}
button.js_link:focus, button.js_link:active {
  color: var(--link-hover-color);
}

.bill_footer a,
footer button,
.banner a,
footer a:not(#footer_corner),
nav a,
nav button.js_link {
  font-weight: 500;
}
.bill_footer a.js_link,
footer button.js_link,
.banner a.js_link,
footer a:not(#footer_corner).js_link,
nav a.js_link,
nav button.js_link.js_link {
  color: white;
  cursor: pointer;
  opacity: 0.8;
  text-decoration: underline;
  text-underline-offset: 0.14em;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bill_footer a:link, .bill_footer a:visited,
footer button:link,
footer button:visited,
.banner a:link,
.banner a:visited,
footer a:not(#footer_corner):link,
footer a:not(#footer_corner):visited,
nav a:link,
nav a:visited,
nav button.js_link:link,
nav button.js_link:visited {
  color: white;
  opacity: 0.8;
}
@media (hover: hover) {
  .bill_footer a:hover,
  footer button:hover,
  .banner a:hover,
  footer a:not(#footer_corner):hover,
  nav a:hover,
  nav button.js_link:hover {
    opacity: 1;
  }
}
.bill_footer a:focus, .bill_footer a:active,
footer button:focus,
footer button:active,
.banner a:focus,
.banner a:active,
footer a:not(#footer_corner):focus,
footer a:not(#footer_corner):active,
nav a:focus,
nav a:active,
nav button.js_link:focus,
nav button.js_link:active {
  opacity: 1;
}

a {
  font-weight: 500;
}
a:not(.list_item_content)[href^="https://apps.apple.com"]:after, a:not(.list_item_content)[href^="https://discordapp.com"]:after, a:not(.list_item_content)[href^="https://github.com"]:after, a:not(.list_item_content)[href^="https://gist.github.com"]:after, a:not(.list_item_content)[href^="https://twitter.com"]:after, a:not(.list_item_content)[href^="https://mastodon.social"]:after {
  display: inline-block;
  margin-left: 0.3em;
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
}
a:not(.list_item_content)[href^="https://twitter.com"]:after {
  opacity: 0.7;
  content: url("/images/logos/twitter.svg");
  transform: translate(0px, 1px);
}
@media (hover: hover) {
  a:not(.list_item_content)[href^="https://twitter.com"]:hover:after {
    transform: translate(3px, 0px);
    opacity: 1;
  }
}
a:not(.list_item_content)[href^="https://github.com"]:after, a:not(.list_item_content)[href^="https://gist.github.com"]:after {
  content: url("/images/logos/github.svg");
  transform: translate(0px, 1px);
}
@media (hover: hover) {
  a:not(.list_item_content)[href^="https://github.com"]:hover:after, a:not(.list_item_content)[href^="https://gist.github.com"]:hover:after {
    transform: scale(1.2);
  }
}
a:not(.list_item_content)[href^="https://apps.apple.com"]:after {
  content: url("/images/logos/app-store.svg");
  transform: translate(0px, 1px);
}
@media (hover: hover) {
  a:not(.list_item_content)[href^="https://apps.apple.com"]:hover:after {
    transform: scale(1.2);
  }
}
a:not(.list_item_content)[href^="https://discordapp.com"]:after {
  content: url("/images/logos/discord.svg");
  transform: translate(0px, 1px);
}
@media (hover: hover) {
  a:not(.list_item_content)[href^="https://discordapp.com"]:hover:after {
    transform: scale(1.2);
  }
}
a:not(.list_item_content)[href^="https://mastodon.social"]:after {
  content: url("/images/logos/mastodon.svg");
  transform: translate(-1px, 0px);
}
@media (hover: hover) {
  a:not(.list_item_content)[href^="https://mastodon.social"]:hover:after {
    transform: scale(1.2);
  }
}

h1 {
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  margin: 0;
}

header {
  position: relative;
  text-align: center;
  padding: var(--space-between-lg) var(--space-side-padding);
  padding-top: calc(var(--space-between-lg) + env(safe-area-inset-top));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
header .gradient {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom, hsla(205.71, 17.07%, 24.12%, 0) 0%, hsla(205.71, 17.07%, 24.12%, 0.003) 18.7%, hsla(205.71, 17.07%, 24.12%, 0.01) 34.9%, hsla(205.71, 17.07%, 24.12%, 0.021) 48.8%, hsla(205.71, 17.07%, 24.12%, 0.035) 60.6%, hsla(205.71, 17.07%, 24.12%, 0.052) 70.4%, hsla(205.71, 17.07%, 24.12%, 0.07) 78.4%, hsla(205.71, 17.07%, 24.12%, 0.09) 84.8%, hsla(205.71, 17.07%, 24.12%, 0.11) 89.8%, hsla(205.71, 17.07%, 24.12%, 0.13) 93.6%, hsla(205.71, 17.07%, 24.12%, 0.148) 96.3%, hsla(205.71, 17.07%, 24.12%, 0.165) 98.1%, hsla(205.71, 17.07%, 24.12%, 0.179) 99.2%, hsla(205.71, 17.07%, 24.12%, 0.19) 99.8%, hsla(205.71, 17.07%, 24.12%, 0.197) 100%, hsla(205.71, 17.07%, 24.12%, 0.2) 100%);
}
@media (prefers-color-scheme: dark) {
  header .gradient {
    background-image: linear-gradient(to bottom, hsla(205.71, 17.07%, 24.12%, 0) 0%, hsla(205.71, 17.07%, 24.12%, 0.008) 11.1%, hsla(205.71, 17.07%, 24.12%, 0.029) 21%, hsla(205.71, 17.07%, 24.12%, 0.062) 29.8%, hsla(205.71, 17.07%, 24.12%, 0.105) 37.6%, hsla(205.71, 17.07%, 24.12%, 0.156) 44.6%, hsla(205.71, 17.07%, 24.12%, 0.211) 50.9%, hsla(205.71, 17.07%, 24.12%, 0.27) 56.7%, hsla(205.71, 17.07%, 24.12%, 0.33) 62%, hsla(205.71, 17.07%, 24.12%, 0.389) 67.1%, hsla(205.71, 17.07%, 24.12%, 0.444) 72.1%, hsla(205.71, 17.07%, 24.12%, 0.495) 77.1%, hsla(205.71, 17.07%, 24.12%, 0.538) 82.2%, hsla(205.71, 17.07%, 24.12%, 0.571) 87.7%, hsla(205.71, 17.07%, 24.12%, 0.592) 93.5%, hsla(205.71, 17.07%, 24.12%, 0.6) 100%);
  }
}
header .big_year {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 900;
  font-size: 100px;
  margin-top: 30px;
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-shadow: 0px 2px 8px rgba(51, 63, 72, 0.1);
}
@media screen and (min-width: 375px) {
  header .big_year {
    margin-top: 40px;
    font-size: 120px;
  }
}
@media screen and (min-width: 768px) {
  header .big_year {
    font-size: 180px;
    margin-top: 0;
  }
}
header.custom.color {
  background-image: none;
  background-size: auto 100%;
}
header.contain_img img {
  height: 80%;
  filter: drop-shadow(0px 1px 6px rgba(51, 63, 72, 0.5));
  border-radius: var(--corner-radius);
}
header.home {
  background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3) 0%, hsla(0, 0%, 100%, 0.306) 8.1%, hsla(0, 0%, 100%, 0.324) 15.5%, hsla(0, 0%, 100%, 0.352) 22.5%, hsla(0, 0%, 100%, 0.388) 29%, hsla(0, 0%, 100%, 0.43) 35.3%, hsla(0, 0%, 100%, 0.476) 41.2%, hsla(0, 0%, 100%, 0.525) 47.1%, hsla(0, 0%, 100%, 0.575) 52.9%, hsla(0, 0%, 100%, 0.624) 58.8%, hsla(0, 0%, 100%, 0.67) 64.7%, hsla(0, 0%, 100%, 0.712) 71%, hsla(0, 0%, 100%, 0.748) 77.5%, hsla(0, 0%, 100%, 0.776) 84.5%, hsla(0, 0%, 100%, 0.794) 91.9%, hsla(0, 0%, 100%, 0.8) 100%), url("/images/confetti.svg");
}
@media (prefers-color-scheme: dark) {
  header.home {
    color: white;
    background-image: linear-gradient(to bottom, hsla(205.71, 17.07%, 24.12%, 0.3) 0%, hsla(205.71, 17.07%, 24.12%, 0.306) 8.1%, hsla(205.71, 17.07%, 24.12%, 0.324) 15.5%, hsla(205.71, 17.07%, 24.12%, 0.352) 22.5%, hsla(205.71, 17.07%, 24.12%, 0.388) 29%, hsla(205.71, 17.07%, 24.12%, 0.43) 35.3%, hsla(205.71, 17.07%, 24.12%, 0.476) 41.2%, hsla(205.71, 17.07%, 24.12%, 0.525) 47.1%, hsla(205.71, 17.07%, 24.12%, 0.575) 52.9%, hsla(205.71, 17.07%, 24.12%, 0.624) 58.8%, hsla(205.71, 17.07%, 24.12%, 0.67) 64.7%, hsla(205.71, 17.07%, 24.12%, 0.712) 71%, hsla(205.71, 17.07%, 24.12%, 0.748) 77.5%, hsla(205.71, 17.07%, 24.12%, 0.776) 84.5%, hsla(205.71, 17.07%, 24.12%, 0.794) 91.9%, hsla(205.71, 17.07%, 24.12%, 0.8) 100%), url("/images/confetti.svg");
  }
}
header.home {
  padding: 48px var(--space-side-padding);
  padding-top: calc(48px + env(safe-area-inset-top));
}
@media screen and (min-width: 992px) {
  header.home {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}
header.home .hero_content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
header.home .hero_content img.trophy {
  width: 128px;
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
}
@media (hover: hover) {
  header.home .hero_content img.trophy {
    cursor: pointer;
  }
  header.home .hero_content img.trophy:hover {
    transform: scale(1.05);
  }
}
header.home .hero_content img.trophy:active {
  transform: scale(0.95);
}
header.home .hero_content img.trophy--dark {
  display: none;
}
header.home .hero_content p + p {
  margin-top: 16px;
}
@media (prefers-color-scheme: dark) {
  header.home .hero_content img.trophy--dark {
    display: block;
  }
  header.home .hero_content img.trophy--light {
    display: none;
  }
}
header.home .hero_content h1 {
  margin-bottom: 4px;
}
@media screen and (min-width: 992px) {
  header.home .hero_content {
    flex-direction: row;
    justify-content: center;
  }
  header.home .hero_content img.trophy {
    width: 200px;
    margin-bottom: -48px;
    margin-right: var(--space-between-lg);
  }
  header.home .hero_content .hero_heading {
    text-align: left;
  }
}
header.trophies h1, header.apple_events h1, header.charities h1, header.about h1, header.search h1, header.details h1, header.leaderboard h1 {
  text-transform: uppercase;
  color: white;
  text-shadow: 0px 1px 6px rgba(51, 63, 72, 0.5);
}
header.trophies h1 span.lowercase_caps, header.apple_events h1 span.lowercase_caps, header.charities h1 span.lowercase_caps, header.about h1 span.lowercase_caps, header.search h1 span.lowercase_caps, header.details h1 span.lowercase_caps, header.leaderboard h1 span.lowercase_caps {
  text-transform: initial;
}
header.trophies h1, header.apple_events h1, header.charities h1, header.about h1, header.details h1, header.leaderboard h1 {
  position: absolute;
  z-index: 2;
  left: var(--space-between-lg);
  right: var(--space-between-lg);
  bottom: var(--space-between-lg);
}
header.details {
  height: 100vw;
  max-height: 375px;
  max-height: calc(375px + env(safe-area-inset-top));
}
header.about, header.search, header.details {
  background-color: var(--connected-blue);
  background-size: cover;
  background-image: url(/images/diagonal-rainbow-header.svg);
}
header.details.euies {
  background-color: var(--eu-blue);
  background-size: contain;
  background-image: url(/images/seo/hero-euies-details.jpg);
}
header.charities {
  background-size: auto 100%;
  background-color: var(--connected-red);
  background-image: url(/images/hands-holding-rainbow-heart.png);
}
header.apple_events {
  background-size: auto 100%;
  background-color: black;
  background-image: url(/images/tim-connected.jpg);
}
header.leaderboard {
  background-image: url(/images/connected-map.png);
}
header.leaderboard.triple_j {
  background-image: url(/images/connected-map-3j.png);
}
header.trophies {
  background-size: auto 100%, cover;
  background-image: url(/images/trophies-header.jpg), linear-gradient(90deg, var(--connected-green) 49.9%, var(--connected-blue) 50.1%);
}
header.search {
  padding-top: 80px;
  padding-top: calc(80px + env(safe-area-inset-top));
}
header.trophies, header.charities, header.apple_events, header.about, header.leaderboard {
  height: 100vw;
  max-height: 300px;
  max-height: calc(300px + env(safe-area-inset-top));
}

html {
  line-height: 1.5;
  background: var(--relay-blue);
  color: var(--text-primary-color);
  scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  background: var(--relay-blue);
}

.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: var(--background-color);
}
.container:before, .container:after {
  background: var(--relay-blue);
}

#statusbar {
  height: 0;
  height: env(safe-area-inset-top);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 22;
  pointer-events: none;
  background-image: linear-gradient(to bottom, hsla(0, 0%, 0%, 0.4) 0%, hsla(0, 0%, 0%, 0.395) 9.7%, hsla(0, 0%, 0%, 0.381) 18.7%, hsla(0, 0%, 0%, 0.358) 27.2%, hsla(0, 0%, 0%, 0.33) 35.1%, hsla(0, 0%, 0%, 0.296) 42.6%, hsla(0, 0%, 0%, 0.259) 49.6%, hsla(0, 0%, 0%, 0.22) 56.2%, hsla(0, 0%, 0%, 0.18) 62.5%, hsla(0, 0%, 0%, 0.141) 68.4%, hsla(0, 0%, 0%, 0.104) 74.1%, hsla(0, 0%, 0%, 0.07) 79.5%, hsla(0, 0%, 0%, 0.042) 84.8%, hsla(0, 0%, 0%, 0.019) 89.9%, hsla(0, 0%, 0%, 0.005) 95%, hsla(0, 0%, 0%, 0) 100%);
}

.nav_content {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  background-color: var(--connected-blue);
}
.nav_content.multicolor {
  -webkit-animation-name: connected_colors;
  animation-name: connected_colors;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.nav_content .nav_content--items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  padding: 0 var(--space-between-sm);
}
.nav_content .nav_content--items button.js_link,
.nav_content .nav_content--items a {
  transition: 300ms padding ease-in-out, 300ms background ease-in-out;
  padding: var(--space-between-md) var(--space-between-sm);
  white-space: nowrap;
  text-decoration: none;
}
.nav_content .nav_content--items button.js_link .emoji,
.nav_content .nav_content--items a .emoji {
  margin: 0;
  filter: grayscale(100%) brightness(2.5);
}
.nav_content .nav_content--items button.js_link.active,
.nav_content .nav_content--items a.active {
  opacity: 1;
  font-weight: bold;
  text-decoration: none;
  position: relative;
}
.nav_content .nav_content--items button.js_link.active:after,
.nav_content .nav_content--items a.active:after {
  content: "";
  position: absolute;
  top: var(--space-between-sm);
  right: 2px;
  bottom: var(--space-between-sm);
  left: 2px;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(51, 63, 72, 0.5);
  border: 0.5px solid rgba(0, 0, 0, 0.3);
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
}
@media screen and (min-width: 576px) {
  .nav_content .nav_content--items button.js_link,
  .nav_content .nav_content--items a {
    padding: var(--space-between-md);
  }
  .nav_content .nav_content--items button.js_link.active:after,
  .nav_content .nav_content--items a.active:after {
    border-radius: 50px;
  }
}
@media (hover: hover) {
  .nav_content .nav_content--items button.js_link:hover,
  .nav_content .nav_content--items a:hover {
    text-decoration: underline;
    text-underline-offset: 0.14em;
    background: var(--element-hover-color);
  }
  .nav_content .nav_content--items button.js_link:hover.active,
  .nav_content .nav_content--items a:hover.active {
    text-decoration: none;
  }
  .nav_content .nav_content--items button.js_link:hover.active:after,
  .nav_content .nav_content--items a:hover.active:after {
    border-width: 1px;
    transform: scale(1.04);
  }
}
.nav_content #nav_content--extra-items {
  max-height: 80px;
  transition: 300ms max-height cubic-bezier(0.68, 0.07, 0.27, 1.54);
  overflow: hidden;
}
.nav_content #nav_content--extra-items.hidden {
  max-height: 0px;
}
#nav_opener {
  text-decoration: none;
  position: relative;
}
#nav_opener span.row_indicator {
  display: inline-block;
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
}
#nav_opener .top_row {
  transform: translateY(0px);
}
#nav_opener .bottom_row {
  transform: translateY(0px);
  position: absolute;
  left: var(--space-between-sm);
}
@media screen and (min-width: 576px) {
  #nav_opener .bottom_row {
    left: var(--space-between-md);
  }
}
#nav_opener.opened .top_row {
  transform: translateY(3px);
}
#nav_opener.opened .bottom_row {
  transform: translateY(-3px);
}
@media screen and (min-width: 576px) {
  #nav_opener.opened .top_row {
    transform: translateY(4px);
  }
  #nav_opener.opened .bottom_row {
    transform: translateY(-4px);
  }
}

.menu_top svg {
  margin-bottom: -2px;
}

nav.nav_container {
  position: relative;
  height: 1px;
}
nav.nav_container #nav_content_sticky {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  z-index: 11;
}
nav.nav_container.sticky #statusbar {
  background-image: none;
}
nav.nav_container.sticky #nav_content_sticky {
  position: fixed;
  padding-top: env(safe-area-inset-top);
}

h2.list_title {
  position: relative;
}
h2.list_title select {
  width: calc(100% + 2 * var(--element-padding));
  margin: var(--element-padding-neg);
  padding: var(--element-padding);
  padding-right: calc(1em + var(--element-padding));
  border-radius: var(--element-corner-radius);
  overflow: hidden;
  text-overflow: ellipsis;
}
h2.list_title.active {
  color: var(--link-color);
}
h2.list_title svg {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0.25em;
  height: 1em;
  width: auto;
}
h2.list_title svg path {
  fill: var(--link-color);
}
@media (hover: hover) {
  h2.list_title:hover select {
    background-color: var(--element-hover-color);
  }
  h2.list_title:hover {
    color: var(--link-hover-color);
  }
  h2.list_title:hover svg path {
    fill: var(--link-hover-color);
  }
}
h2.list_title:active select {
  background-color: var(--element-active-color);
}

:root {
  --nav-height: 53px;
}

section {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-between-lg);
  padding: 0 var(--space-side-padding);
  padding-left: max(var(--space-side-padding), env(safe-area-inset-left));
  padding-right: max(var(--space-side-padding), env(safe-area-inset-right));
}
section.navigate_with_mobile_menu {
  display: none;
  padding-top: calc(var(--nav-height) + var(--space-side-padding));
  padding-top: calc(var(--nav-height) + var(--space-side-padding) + env(safe-area-inset-top));
  pointer-events: none;
  margin-top: calc(-1 * env(safe-area-inset-top));
}
section.navigate_with_mobile_menu.active {
  display: block;
}
section.navigate_with_mobile_menu:not(.article) h2 {
  display: none;
}
section#list {
  margin-top: 0;
  padding-top: var(--space-between-lg);
}

section.navigate_with_mobile_menu {
  margin-top: calc(-1 * env(safe-area-inset-top));
}

section.navigate_with_mobile_menu,
.host_byline {
  padding-top: calc(var(--nav-height) + var(--space-side-padding));
  padding-top: calc(var(--nav-height) + var(--space-side-padding) + env(safe-area-inset-top));
}

h2 {
  margin-top: 0;
  margin-bottom: var(--space-between-md);
}

section.article {
  margin-bottom: var(--space-between-lg);
}
section.article h2:not(:first-of-type) {
  margin-top: var(--space-between-lg);
}

section h2,
.timeline--container,
.section_group,
.section_article,
.section_grid {
  pointer-events: all;
}

.section_grid {
  display: grid;
  gap: var(--space-between-lg) var(--space-between-md);
  grid-gap: var(--space-between-lg) var(--space-between-md);
}

.section_group--list:not(:first-of-type) {
  margin-top: var(--space-between-lg);
}

.host_stats {
  display: none;
}
.host_stats.active {
  display: block;
}

@media screen and (min-width: 576px) {
  :root {
    --nav-height: 56px;
  }
}
@media screen and (max-width: 768px) {
  section#stats {
    padding-top: 0;
  }
}
@media screen and (min-width: 768px) {
  :root {
    --nav-height: 59px;
  }
  .host_byline {
    padding-top: 0;
    margin-top: 0;
  }
  section {
    max-width: 650px;
  }
  section.large_columns {
    max-width: 1400px;
  }
  section.large_columns:not(.navigate_with_mobile_menu) {
    padding-top: var(--space-between-lg);
  }
  section.navigate_with_mobile_menu {
    margin-top: var(--space-between-lg);
    display: block;
    padding-top: var(--nav-height);
    padding-top: calc(var(--nav-height) + env(safe-area-inset-top));
  }
  section.navigate_with_mobile_menu:not(:last-of-type) {
    margin-bottom: calc(-1 * (var(--nav-height)));
    margin-bottom: calc(-1 * (var(--nav-height) + env(safe-area-inset-top)));
  }
  section.navigate_with_mobile_menu h2 {
    padding-top: var(--space-between-lg);
    display: block !important;
  }
  section.navigate_with_mobile_menu ~ .navigate_with_mobile_menu:not(.article) h2 {
    border-top: 1px solid var(--element-hover-color);
  }
  .host_stats {
    display: block;
  }
  .section_group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  .section_group .section_group--list {
    margin-top: 0;
    flex-basis: calc(33.3333333333% - var(--space-between-lg) / 2);
  }
  .section_group .section_group--list + .section_group--list {
    margin-left: var(--space-between-lg);
  }
  .section_grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: var(--space-between-lg) 0;
  }
  .section_grid .column1 {
    grid-column: 1/2;
  }
  .section_grid .column2 {
    grid-column: 2/3;
  }
  .section_grid .column3 {
    grid-column: 3/4;
  }
}
.image-grid {
  display: grid;
  position: relative;
  gap: var(--space-between-md);
  margin: var(--space-between-md) 0;
}
.image-grid.img1 {
  grid-template-columns: 1fr;
}
.image-grid.img2 {
  grid-template-columns: 1fr 1fr;
}
.image-grid img {
  width: 100%;
}
.image-grid img.span-full {
  grid-column: 1/3;
}

h2.subtitled {
  margin-bottom: 0;
}

p.subtitle {
  margin-top: 0;
  color: var(--text-secondary-color);
  font-style: italic;
}

#header_corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  width: calc(env(safe-area-inset-top) + 90px);
  height: calc(env(safe-area-inset-top) + 90px);
  background-image: url("/images/triangle.svg");
  background-size: cover;
}
#header_corner img {
  width: 34px;
  position: absolute;
  left: 10px;
  top: 10px;
  left: calc(env(safe-area-inset-left) + 10px);
  top: calc(env(safe-area-inset-top) + 10px);
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
}
@media screen and (min-width: 768px) {
  #header_corner {
    width: 120px;
    height: 120px;
    width: calc(env(safe-area-inset-top) + 120px);
    height: calc(env(safe-area-inset-top) + 120px);
  }
  #header_corner img {
    width: 44px;
    top: 13px;
    left: 13px;
    top: calc(env(safe-area-inset-top) + 13px);
    left: calc(env(safe-area-inset-top) + 13px);
  }
}
@media (hover: hover) {
  #header_corner:hover img {
    transform: scale(1.2) translate(0px, -1px);
  }
}
#header_corner:active img {
  transform: scale(1.1);
}

#footer_corner {
  display: none;
}
@media screen and (min-width: 576px) {
  #footer_corner {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(90deg, var(--relay-blue) 20%, indigo 100%);
    display: flex;
    padding: var(--space-side-padding);
  }
  #footer_corner img {
    transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
    width: 2rem;
  }
}
@media (hover: hover) {
  #footer_corner:hover img {
    transform: scale(1.2);
  }
}
#footer_corner:active img {
  transform: scale(1.1);
}

.item_graphic {
  border-radius: var(--corner-radius);
}
.item_graphic.app_shape {
  border-radius: 22.37%;
}
.item_graphic {
  border: var(--graphic-border);
  width: var(--graphic-size);
  height: var(--graphic-size);
  flex-grow: 0;
  flex-shrink: 0;
  position: relative;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: center;
}
.item_graphic.avatar {
  border-radius: 50%;
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.85) 100%);
}
@media (prefers-color-scheme: dark) {
  .item_graphic.avatar {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 100%);
  }
}
.item_graphic.avatar img {
  width: 120%;
  height: 120%;
  object-fit: contain;
  object-position: center;
  position: absolute;
  left: -10%;
  top: -10%;
}
.item_graphic.annual {
  color: white;
  text-align: center;
  line-height: var(--graphic-size);
  font-weight: 800;
  font-size: calc(var(--graphic-size) / 1.8);
}
.item_graphic.diagonal {
  background-color: var(--connected-blue);
  background-size: cover;
  background-image: url(/images/diagonal-rainbow.png);
}
.item_graphic.fill_image {
  background-size: cover;
}
.item_graphic.placeholder {
  background-color: var(--relay-blue);
  -webkit-animation-name: connected_colors;
  animation-name: connected_colors;
  -webkit-animation-duration: 60s;
  animation-duration: 60s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

ul.list_item_group {
  margin-left: var(--element-padding-neg);
  margin-right: var(--element-padding-neg);
}

li.list_item + li.list_item {
  margin-top: var(--space-between-sm);
}

li.list_item .list_item_content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: var(--element-padding);
  width: 100%;
}
li.list_item .list_item_content .list_item_labels {
  margin-left: var(--space-between-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
  width: 100%;
  min-height: var(--graphic-size);
  justify-content: center;
}
li.list_item .list_item_content .list_item_labels .secondary_string {
  margin-top: 4px;
  color: var(--text-secondary-color);
  font-size: 0.75rem;
}
li.list_item .list_item_content .list_item_labels .secondary_string .tag_group {
  margin-right: 8px;
  color: white;
}
li.list_item .list_item_content .list_item_labels .label2 + .secondary_string {
  margin-top: 2px;
}
li.list_item.host_details .list_item_content {
  align-items: flex-start;
}
li.list_item.host_details .list_item_content .list_item_labels {
  margin-top: 8px;
}
li.list_item.host_details .list_item_content .list_item_labels .ranking {
  color: var(--text-secondary-color);
  font-size: 0.75rem;
}
li.list_item.host_details .list_item_content .list_item_labels .mini_stats {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-top: 8px;
  width: 100%;
}
li.list_item.host_details .list_item_content .list_item_labels .mini_stats .mini_stats--list {
  width: 100%;
  max-width: 200px;
}
li.list_item.host_details .list_item_content .list_item_labels .mini_stats .mini_stats--list + .mini_stats--list {
  margin-left: 8px;
}
@media screen and (min-width: 768px) {
  li.list_item.host_details .list_item_content {
    flex-direction: column;
  }
  li.list_item.host_details .list_item_content .list_item_labels {
    margin-left: 0;
  }
}
li.list_item a.list_item_content {
  text-decoration: none;
  font-weight: normal;
}
li.list_item a.list_item_content .list_item_labels .label1 {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}
li.list_item a.list_item_content .list_item_labels .label2 {
  color: var(--text-primary-color);
}
li.list_item a.list_item_content {
  border-radius: var(--element-corner-radius);
  background: var(--element-neutral-color);
  transition: 300ms background ease-in-out;
}
li.list_item a.list_item_content .item_graphic {
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
}
@media (hover: hover) {
  li.list_item a.list_item_content:hover {
    background: var(--element-hover-color);
  }
  li.list_item a.list_item_content:hover .item_graphic {
    transform: scale(1.1);
  }
}
li.list_item a.list_item_content:active {
  background: var(--element-active-color);
  transition: none;
}
li.list_item a.list_item_content:active .item_graphic {
  transform: scale(0.95);
}
li.list_item a[href^="https://apps.apple.com"] .secondary_string:before,
li.list_item a[href^="https://discordapp.com"] .secondary_string:before,
li.list_item a[href^="https://github.com"] .secondary_string:before,
li.list_item a[href^="https://gist.github.com"] .secondary_string:before,
li.list_item a[href^="https://twitter.com"] .secondary_string:before,
li.list_item a[href^="https://www.youtube.com"] .secondary_string:before,
li.list_item a[href^="https://mastodon.social"] .secondary_string:before {
  display: inline-block;
  margin-right: 0.3em;
  transform: translate(0px, 1px);
}
li.list_item a[href^="https://www.youtube.com"] .secondary_string:before {
  content: url("/images/logos/youtube.svg");
}
li.list_item a[href^="https://twitter.com"] .secondary_string:before {
  content: url("/images/logos/twitter.svg");
}
li.list_item a[href^="https://discordapp.com"] .secondary_string:before {
  content: url("/images/logos/discord.svg");
}
li.list_item a[href^="https://apps.apple.com"] .secondary_string:before {
  content: url("/images/logos/app-store.svg");
}
li.list_item a[href^="https://mastodon.social"] .secondary_string:before {
  content: url("/images/logos/mastodon.svg");
}
li.list_item a[href^="https://gist.github.com"] .secondary_string:before,
li.list_item a[href^="https://github.com"] .secondary_string:before {
  content: url("/images/logos/github.svg");
}

.host_picks h3 {
  overflow: auto;
}
.host_picks h3:after {
  content: "";
  clear: both;
  display: table;
}
.host_picks h3 span {
  color: var(--text-secondary-color);
  float: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on, "lnum" on;
}

li.pick_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--element-padding);
}
li.pick_item + li.pick_item {
  margin-top: var(--space-between-sm);
}
li.pick_item span.round {
  color: var(--text-secondary-color);
  font-size: 0.75rem;
}
li.pick_item p.pick {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
li.pick_item p.pick span.label {
  flex-grow: 1;
  position: relative;
}
li.pick_item p.pick span.points {
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 8px;
  color: white;
  width: 1.3rem;
  height: 1.3rem;
  border: var(--graphic-border);
  display: inline-block;
  line-height: 1.2rem;
  text-align: center;
  letter-spacing: -0.05em;
  font-size: 0.75rem;
  font-weight: 600;
  position: relative;
  border-radius: 50%;
}
li.pick_item p.pick span.points.flexy {
  border-radius: var(--corner-radius);
}
li.pick_item p.pick span.points {
  background: var(--connected-yellow);
}
li.pick_item p.pick span.points.correct {
  background: var(--connected-green);
}
li.pick_item p.pick span.points.correct.flexy {
  background: var(--connected-blue);
}
li.pick_item p.pick span.points.correct.condition1 {
  background: linear-gradient(90deg, var(--connected-green) 33%, var(--relay-blue) 34%);
}
li.pick_item p.pick span.points.correct.condition2 {
  background: linear-gradient(90deg, var(--connected-green) 66%, var(--relay-blue) 67%);
}
li.pick_item p.pick span.points.wrong {
  background: var(--connected-red);
}
li.pick_item p.pick span.points.wrong.eventually {
  background-origin: border-box;
  background-position: center;
  background-image: linear-gradient(120deg, var(--connected-red) 20%, var(--connected-purple) 60%);
}
li.pick_item p.pick span.points.long {
  border-radius: 1.3rem;
  width: 2.6rem;
}
li.pick_item p.pick span.points.risky.correct.condition3:after, li.pick_item p.pick span.points.risky.wrong:after {
  content: "";
  border-radius: 50%;
  border: 1px solid;
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
}
li.pick_item p.pick span.points.risky.correct.condition3:after {
  border-color: var(--connected-green);
}
li.pick_item p.pick span.points.risky.wrong:after {
  border-color: var(--connected-red);
}
li.pick_item .note ol,
li.pick_item .note ul,
li.pick_item .note p {
  color: var(--text-secondary-color);
  font-size: 0.75rem;
}
li.pick_item .note ol,
li.pick_item .note ul {
  margin-left: 1.4em;
}
li.pick_item .note ul {
  list-style: initial;
}
li.pick_item .note p.tag_group,
li.pick_item .note ol + ul,
li.pick_item .note ul + ol,
li.pick_item .note ol + ol,
li.pick_item .note ul + ul,
li.pick_item .note p + ol,
li.pick_item .note p + ul,
li.pick_item .note ol + p,
li.pick_item .note ul + p,
li.pick_item .note p + p {
  margin-top: 4px;
}
li.pick_item.interactive, li.pick_item.target, li.pick_item:target {
  border-radius: var(--element-corner-radius);
}
li.pick_item.interactive {
  cursor: pointer;
  background: var(--element-neutral-color);
  transition: 300ms background ease-in-out;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
li.pick_item.interactive + li.pick_item.interactive {
  margin-top: 2px;
}
li.pick_item.interactive p.pick span.points {
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
}
@media (hover: hover) {
  li.pick_item.interactive:hover {
    background: var(--element-hover-color);
  }
  li.pick_item.interactive:hover p.pick span.points {
    transform: scale(1.2);
  }
}
li.pick_item.interactive:active {
  background: var(--element-active-color);
  transition: none;
}
li.pick_item.interactive:active p.pick span.points {
  transform: scale(1.1);
}
li.pick_item.no_results {
  color: var(--text-secondary-color);
}
li.pick_item.manual {
  background-color: rgba(239, 123, 0, 0.15);
}
li.pick_item.target, li.pick_item:target {
  background: var(--element-active-color);
  -webkit-animation: pick_highlight 10s linear forwards;
  animation: pick_highlight 10s linear forwards;
}
li.pick_item:hover button.copy_direct_url {
  transition: 300ms opacity ease;
  opacity: 0.3;
}
li.pick_item {
  --share-link-color: white;
  --share-link-background: var(--link-color);
}
li.pick_item button.copy_direct_url {
  position: absolute;
  top: 0;
  right: 0px;
}
@media screen and (min-width: 768px) {
  li.pick_item button.copy_direct_url {
    right: unset;
    left: -30px;
  }
}
li.pick_item button.copy_direct_url {
  opacity: 0;
}
li.pick_item button.copy_direct_url:hover {
  opacity: 0.6;
}
li.pick_item button.copy_direct_url:active {
  opacity: 1;
}

#picks li.pick_item + li.pick_item {
  margin-top: var(--space-between-md);
}

.pick_item:hover .recycle, .pick_item:focus .recycle, .pick_item:active .recycle {
  -webkit-animation: rotateInThirds 8s infinite;
  animation: rotateInThirds 8s infinite;
}
.pick_item:hover .hourglass, .pick_item:focus .hourglass, .pick_item:active .hourglass {
  -webkit-animation: rotateInHalfs 6s infinite;
  animation: rotateInHalfs 6s infinite;
}
.pick_item:hover .buzz, .pick_item:focus .buzz, .pick_item:active .buzz {
  -webkit-animation: buzz_out 0.3s infinite linear;
  animation: buzz_out 0.3s infinite linear;
}

.tag {
  color: #fff !important;
  display: inline-block;
  background: var(--tag-color);
  padding: 0px 0.4em;
  border-radius: var(--corner-radius);
  border: var(--graphic-border);
}
.tag:not(:last-of-type) {
  margin-right: 4px;
}
.tag {
  --first-color: 0.7;
  --next-color: 0.5;
}
@media (prefers-color-scheme: dark) {
  .tag {
    --first-color: 0.8;
    --next-color: 0.4;
  }
}
.tag.cat_hw {
  background: rgba(var(--relay-blue-rgb), var(--first-color));
}
.tag.cat_hw ~ .tag.cat_hw {
  background: rgba(var(--relay-blue-rgb), var(--next-color));
}
.tag.cat_sw {
  background: rgba(var(--connected-blue-rgb), var(--first-color));
}
.tag.cat_sw ~ .tag.cat_sw {
  background: rgba(var(--connected-blue-rgb), var(--next-color));
}
.tag.cat_cloud {
  background: rgba(var(--connected-purple-rgb), var(--first-color));
}
.tag.cat_cloud ~ .tag.cat_cloud {
  background: rgba(var(--connected-purple-rgb), var(--next-color));
}
.tag.cat_people {
  background: rgba(var(--connected-green-rgb), var(--first-color));
}
.tag.cat_people ~ .tag.cat_people {
  background: rgba(var(--connected-green-rgb), var(--next-color));
}
.tag.euies:after {
  content: " ★";
}
.tag.euies {
  background: var(--eu-blue);
  color: var(--eu-yellow) !important;
}

a.tag {
  text-decoration: none;
  transition: 300ms background ease;
}
a.tag:hover.cat_hw {
  background: var(--relay-blue) !important;
}
a.tag:hover.cat_sw {
  background: var(--connected-blue) !important;
}
a.tag:hover.cat_cloud {
  background: var(--connected-purple) !important;
}
a.tag:hover.cat_people {
  background: var(--connected-green) !important;
}

.tag_group {
  margin-bottom: -4px;
}
.tag_group .tag {
  margin-bottom: 4px;
}

.avatar_leaderboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-between-sm);
}
@media screen and (min-width: 576px) {
  .avatar_leaderboard {
    gap: var(--space-between-lg);
  }
}
.avatar_leaderboard {
  max-width: 650px;
  margin: var(--space-between-lg) auto;
  padding: 0 var(--space-side-padding);
}
.avatar_leaderboard .host {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  order: 0;
}
.avatar_leaderboard .host .avatar {
  margin-bottom: 8px;
  margin: 8px;
}
.avatar_leaderboard .host span:not(:first-of-type) {
  margin-top: 4px;
}
.avatar_leaderboard .host .name {
  font-weight: bold;
}
.avatar_leaderboard .host .title {
  color: var(--text-secondary-color);
  font-size: 0.75rem;
}
.avatar_leaderboard .host .title span.emoji {
  display: none;
}
.avatar_leaderboard .host .title a.priority {
  white-space: nowrap;
}
.avatar_leaderboard .host.winner .avatar {
  margin-top: 0px;
  margin-bottom: 16px;
  cursor: pointer;
}
@media (hover: hover) {
  .avatar_leaderboard .host.winner .avatar .ring,
  .avatar_leaderboard .host.winner .avatar img {
    transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
  }
  .avatar_leaderboard .host.winner .avatar:hover .ring {
    transform: scale(1.1);
  }
  .avatar_leaderboard .host.winner .avatar:hover img {
    transform: scale(1.4) rotate(-10deg);
  }
}
.avatar_leaderboard .host.winner .avatar:active .ring,
.avatar_leaderboard .host.winner .avatar:active img {
  transform: scale(0.95);
}

.timeline--host-avatar.winner .avatar .ring,
.avatar_leaderboard .host.winner .avatar .ring {
  width: calc(var(--graphic-size) + 16px);
  height: calc(var(--graphic-size) + 16px);
  position: absolute;
  border-radius: 50%;
  top: -9px;
  left: -9px;
  mask-image: url("/images/ring.svg");
  -webkit-mask-image: url("/images/ring.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: calc(var(--graphic-size) + 16px);
  -webkit-mask-size: calc(var(--graphic-size) + 16px);
  background-color: var(--connected-orange);
  background-image: linear-gradient(-45deg, var(--connected-purple), var(--connected-blue), var(--connected-green), var(--connected-yellow), var(--connected-orange), var(--connected-red), var(--connected-purple), var(--connected-blue), var(--connected-green), var(--connected-yellow));
  background-size: 500% 500%;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ring_gradient;
  animation-name: ring_gradient;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.timeline--host-avatar.winner.mega_winner .avatar .ring,
.avatar_leaderboard .host.winner.mega_winner .avatar .ring {
  width: calc(var(--graphic-size) + 42px);
  height: calc(var(--graphic-size) + 42px);
  top: -21px;
  left: -21px;
  mask-image: url("/images/ring-double.svg");
  -webkit-mask-image: url("/images/ring-double.svg");
  mask-size: calc(var(--graphic-size) + 42px);
  -webkit-mask-size: calc(var(--graphic-size) + 42px);
}

.host_stats {
  position: relative;
  padding-left: calc(var(--space-between-md) + var(--graphic-size));
}
.host_stats .avatar {
  position: absolute;
  left: 0;
  bottom: -6px;
}
@media screen and (min-width: 768px) {
  .host_stats .avatar {
    top: -6px;
    bottom: unset;
  }
}
.host_stats h3 + p {
  color: var(--text-secondary-color);
  font-size: 0.75rem;
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .host_stats {
    padding-left: 0;
  }
  .host_stats .avatar {
    position: relative;
  }
}
table.full_stats {
  border-collapse: collapse;
  border: none;
}
table.full_stats td {
  vertical-align: top;
}
table.full_stats td b,
table.full_stats td strong {
  color: var(--highlight-color);
  white-space: nowrap;
}
table.full_stats td.value {
  font-weight: bold;
  padding-right: 0.4em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on, "lnum" on;
  color: var(--highlight-color);
}

.charts {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 8px 0;
  flex-wrap: wrap;
}
.charts .chart_pick_type {
  position: relative;
}
.charts .chart_pick_type .chart_emoji {
  font-family: "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, emoji, sans-serif;
  font-variant-emoji: emoji;
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  text-align: center;
}
.charts .chart_pick_type .chart_label {
  color: var(--text-secondary-color);
  font-size: 0.75rem;
  text-align: center;
  display: block;
  margin-top: 4px;
}
.charts .chart_pick_type + .chart_pick_type {
  margin-left: var(--space-between-md);
}
.charts .chart-container {
  height: 60px;
  width: 60px;
}
@media screen and (min-width: 1400px) {
  .charts .chart_pick_type .chart_emoji {
    top: 25px;
  }
  .charts .chart-container {
    height: 80px;
    width: 80px;
  }
}

.chart-container {
  position: relative;
}

.rotate_coin {
  -webkit-perspective: 100px;
  perspective: 100px;
}
.rotate_coin span {
  display: inline-block;
  -webkit-animation: rotateCoin 3s infinite linear;
  animation: rotateCoin 3s infinite linear;
}

.pulse_orb {
  -webkit-animation: pulsePurple 2s infinite;
  animation: pulsePurple 2s infinite;
  border-radius: 50%;
}

#menu_stats {
  display: none;
}

@media screen and (min-width: 768px) {
  #menu_stats {
    display: block;
  }
  .menu_mobile_only {
    display: none;
  }
}
section#timeline {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  max-width: unset;
  --day-scale: 1;
  --auto-padding: max(calc((100vw - 1400px) / 2 + var(--space-side-padding)), var(--space-side-padding));
}
section#timeline .timeline--host-track,
section#timeline .chairman,
section#timeline .year,
section#timeline .month {
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.68, 0.07, 0.27, 1.54);
  transition-property: width, left, transform;
}
section#timeline h2,
section#timeline .timeline--legend-set {
  pointer-events: all;
  margin-left: var(--auto-padding);
  margin-left: max(var(--auto-padding), env(safe-area-inset-left));
}

.timeline--container {
  position: relative;
  --scale-line-width: 1px;
  --day-width: calc(var(--day-scale) * 1px);
}
@media screen and (min-width: 768px) {
  .timeline--container {
    --day-width: calc(var(--day-scale) * 2px);
  }
}

.timeline--content {
  cursor: ew-resize;
  overflow: scroll hidden;
  padding-left: var(--space-side-padding);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--nav-height) - var(--space-side-padding) * 3 - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
@media screen and (min-width: 768px) {
  .timeline--content {
    height: calc(100vh - var(--nav-height) - var(--space-side-padding) * 3 - 40px - 1.5em - var(--space-between-lg) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}
.timeline--content {
  min-height: 400px;
  max-height: 800px;
}

.timeline--host-track {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.timeline--host-avatar {
  position: absolute;
  right: -4px;
  z-index: 10;
}
@media screen and (min-width: 576px) {
  .timeline--host-avatar {
    right: var(--space-side-padding);
  }
}

.timeline--chairman-track {
  position: relative;
  background-color: rgba(var(--background-color-rgb), 0.3);
}
@media (prefers-color-scheme: dark) {
  .timeline--chairman-track {
    background-color: rgba(var(--background-color-rgb), 0.2);
  }
}
.timeline--chairman-track {
  --track-height: 2rem;
}
.timeline--chairman-track.flexies_keynote, .timeline--chairman-track.flexies_annual {
  --track-height: 1.2rem;
  --space-between-md: 8px;
}
.timeline--chairman-track {
  height: var(--track-height);
  transition-duration: 300ms;
  transition-property: height margin;
  transition-timing-function: cubic-bezier(0.68, 0.07, 0.27, 1.54);
}
.timeline--chairman-track + .timeline--chairman-track:not(.hidden) {
  margin-top: var(--space-between-md);
}
.timeline--chairman-track.hidden {
  overflow: hidden;
  height: 0;
  margin-top: 0;
}
.timeline--chairman-track .chairman {
  position: absolute;
  height: 100%;
  border-radius: var(--track-height);
  border: var(--graphic-border);
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) {
  .timeline--chairman-track .chairman:hover {
    z-index: 9;
    box-shadow: 0px 1px 6px rgba(51, 63, 72, 0.5);
  }
}
.timeline--chairman-track .chairman a {
  padding-left: 8px;
  width: 100%;
  display: block;
  line-height: calc(var(--track-height) - 2px);
  font-weight: 500;
  color: white;
  text-decoration: none;
}
.timeline--chairman-track .chairman.open_ended {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0px;
  background-origin: border-box;
  min-width: var(--space-between-lg);
}
.timeline--chairman-track .chairman.pre_rickies {
  opacity: 0.5;
}
@media (hover: hover) {
  .timeline--chairman-track.rickies_annual .chairman:hover, .timeline--chairman-track.flexies_annual .chairman:hover {
    transform: scale(1.05);
  }
}
@media (hover: hover) {
  .timeline--chairman-track.rickies_keynote .chairman:hover, .timeline--chairman-track.flexies_keynote .chairman:hover {
    transform: scale(1.2);
  }
}
.timeline--chairman-track.rickies_annual .chairman {
  background-color: var(--connected-blue);
}
.timeline--chairman-track.rickies_annual .chairman.open_ended {
  background-color: transparent;
  background-image: linear-gradient(-90deg, rgba(var(--connected-blue-rgb), 0) 0px, var(--connected-blue) 16px);
}
.timeline--chairman-track.flexies_annual .chairman {
  background-color: var(--connected-green);
}
.timeline--chairman-track.flexies_annual .chairman.open_ended {
  background-color: transparent;
  background-image: linear-gradient(-90deg, rgba(var(--connected-green-rgb), 0) 0px, var(--connected-green) 16px);
}
.timeline--chairman-track.rickies_keynote .chairman {
  background-color: var(--connected-orange);
}
.timeline--chairman-track.rickies_keynote .chairman.open_ended {
  background-color: transparent;
  background-image: linear-gradient(-90deg, rgba(var(--connected-orange-rgb), 0) 0px, var(--connected-orange) 16px);
}
.timeline--chairman-track.flexies_keynote .chairman {
  background-color: var(--connected-yellow);
}
.timeline--chairman-track.flexies_keynote .chairman.open_ended {
  background-color: transparent;
  background-image: linear-gradient(-90deg, rgba(var(--connected-yellow-rgb), 0) 0px, var(--connected-yellow) 16px);
}

.timeline--scale {
  position: relative;
  pointer-events: none;
  height: 2.5rem;
  flex-shrink: 0;
  flex-grow: 0;
}
.timeline--scale .year,
.timeline--scale .month {
  position: absolute;
  height: 1000px;
}
.timeline--scale .year > span,
.timeline--scale .month > span {
  position: absolute;
  color: var(--text-secondary-color);
  font-size: 0.75rem;
  left: 4px;
  right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline--scale .year {
  margin-left: calc(-1 * var(--scale-line-width));
}
.timeline--scale .year > span {
  font-weight: bold;
}
.timeline--scale .year {
  border-left: var(--scale-line-width) solid rgba(var(--connected-grey-rgb), 0.8);
}
.timeline--scale .month {
  top: 1rem;
  border-right: var(--scale-line-width) solid rgba(var(--connected-grey-rgb), 0.3);
}

.timeline--content.month_md .timeline--scale .month > span > span:last-child {
  display: none;
}
.timeline--content.month_sm .timeline--scale .month > span > span:last-child {
  display: none;
}
.timeline--content.month_sm .timeline--scale .month > span > span:nth-child(2) {
  display: none;
}
.timeline--content.month_xx .timeline--scale .month > span {
  display: none;
}

.timeline--zoom {
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  bottom: calc(-40px - var(--space-between-md));
  right: var(--auto-padding);
  right: max(var(--auto-padding), env(safe-area-inset-right));
}
.timeline--zoom button {
  box-shadow: 0px 1px 6px rgba(51, 63, 72, 0.5);
  height: 40px;
  color: var(--link-color);
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
  border-radius: 2px;
}
.timeline--zoom button:disabled {
  color: var(--text-secondary-color);
  opacity: 0.7;
}
.timeline--zoom button:first-of-type {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  z-index: 1;
}
@media (hover: hover) {
  .timeline--zoom button:first-of-type:not(:disabled):hover {
    transform: scale(1.2) translateX(3px);
  }
}
.timeline--zoom button:first-of-type:not(:disabled):focus, .timeline--zoom button:first-of-type:not(:disabled):active {
  transform: scale(1.1) translateX(2px);
}
.timeline--zoom button:last-of-type {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
@media (hover: hover) {
  .timeline--zoom button:last-of-type:not(:disabled):hover {
    transform: scale(1.2) translateX(-3px);
  }
}
.timeline--zoom button:last-of-type:not(:disabled):focus, .timeline--zoom button:last-of-type:not(:disabled):active {
  transform: scale(1.1) translateX(-2px);
}
.timeline--zoom button + button {
  margin-right: 1px;
}
@media screen and (min-width: 768px) {
  .timeline--zoom {
    top: calc(-1 * (40px + var(--space-between-md)));
    bottom: unset;
  }
}

.timeline--gradient-start,
.timeline--gradient-end {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 9;
}

.timeline--gradient-start {
  left: 0;
  width: var(--space-side-padding);
  background: linear-gradient(-90deg, rgba(var(--background-color-rgb), 0) 0%, rgba(var(--background-color-rgb), 1) 50%);
}

.timeline--gradient-end {
  right: 0;
  width: calc(var(--graphic-size) - 4px);
}
@media screen and (min-width: 576px) {
  .timeline--gradient-end {
    width: calc(var(--graphic-size) + var(--space-side-padding));
  }
}
.timeline--gradient-end {
  background: linear-gradient(90deg, rgba(var(--background-color-rgb), 0) 0%, rgba(var(--background-color-rgb), 1) 30%);
}

.timeline--legend-set {
  display: flex;
  gap: var(--space-between-sm) var(--space-between-lg);
  flex-flow: column wrap;
}
@media screen and (min-width: 576px) {
  .timeline--legend-set {
    gap: var(--space-between-sm) var(--space-between-lg);
    flex-flow: row wrap;
  }
}

.timeline--legend {
  margin-top: var(--space-between-md);
}
.timeline--legend li {
  width: fit-content;
  cursor: pointer;
}
.timeline--legend li:before {
  content: "";
  display: inline-block;
  margin-right: 8px;
  height: 1em;
  width: 1em;
  border-radius: 50%;
  border: var(--graphic-border);
  transform: translateY(2px) scale(1);
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
}
.timeline--legend li.rickies_annual:before {
  background: var(--connected-blue);
}
.timeline--legend li.flexies_annual:before {
  background: var(--connected-green);
}
.timeline--legend li.rickies_keynote:before {
  background: var(--connected-orange);
}
.timeline--legend li.flexies_keynote:before {
  background: var(--connected-yellow);
}
.timeline--legend li.hidden:before {
  background: transparent;
}
@media (hover: hover) {
  .timeline--legend li:hover {
    color: var(--link-hover-color);
  }
  .timeline--legend li:hover:before {
    transform: translateY(2px) scale(1.2);
  }
}

.timeline--host-avatar.mega_winner .avatar, .timeline--host-avatar.winner .avatar {
  -webkit-animation-timing-function: cubic-bezier(0.68, 0.07, 0.27, 1.54);
  animation-timing-function: cubic-bezier(0.68, 0.07, 0.27, 1.54);
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
}
.timeline--host-avatar.winner .avatar {
  -webkit-animation-name: pop;
  animation-name: pop;
}
.timeline--host-avatar.mega_winner .avatar {
  -webkit-animation-name: pop2;
  animation-name: pop2;
}

#interactive_magtricky {
  margin: var(--space-between-md) auto;
  position: relative;
  transform: rotate(-5deg);
}
#interactive_magtricky > img {
  width: 100%;
}
#interactive_magtricky > button {
  position: absolute;
  width: 48px;
  height: 48px;
  transform: translateX(-24px) translateY(-24px);
  transition: 300ms background-size cubic-bezier(0.68, 0.07, 0.27, 1.54);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
}
#interactive_magtricky > button[data-chairman="0"] {
  background-image: url(/images/magtricky-chairman-silver.png);
  background-size: 0px auto;
}
#interactive_magtricky > button[data-chairman="1"] {
  background-image: url(/images/magtricky-chairman-silver.png);
  background-size: 34px auto;
}
#interactive_magtricky > button[data-chairman="2"] {
  background-image: url(/images/magtricky-chairman-gold.png);
  background-size: 42px auto;
}
#interactive_magtricky > button#magnet_myke {
  top: 36.7%;
  left: 60.5%;
}
#interactive_magtricky > button#magnet_federico {
  top: 43.4%;
  left: 69.2%;
}
#interactive_magtricky > button#magnet_stephen {
  top: 45.2%;
  left: 20.4%;
}

:root {
  --search-height: 48px;
}
@media screen and (min-width: 768px) {
  :root {
    --search-height: 56px;
  }
}

#custom_share_sheet,
#fixed_search {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  bottom: calc(-1 * env(safe-area-inset-top));
  padding: 40px var(--space-side-padding) var(--space-side-padding) var(--space-side-padding);
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition-property: background, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 300ms;
  transition-timing-function: ease;
  background: rgba(0, 0, 0, 0);
}
#custom_share_sheet form,
#fixed_search form {
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
  transform: translateY(-160px);
}
#custom_share_sheet.open,
#fixed_search.open {
  pointer-events: unset;
  -webkit-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark) {
  #custom_share_sheet.open,
  #fixed_search.open {
    background: rgba(106, 106, 106, 0.3);
  }
}
#custom_share_sheet.open form,
#fixed_search.open form {
  transform: translateY(200px);
  transform: translateY(calc(200px + env(safe-area-inset-top)));
}
@media screen and (min-width: 768px) {
  #custom_share_sheet.open form,
  #fixed_search.open form {
    transform: translateY(0px);
  }
}
@media screen and (min-width: 768px) and (min-height: 500px) {
  #custom_share_sheet.open form,
  #fixed_search.open form {
    transform: translateY(110px);
  }
}

.input_button_combo {
  width: 100%;
  position: relative;
}
.input_button_combo input[type=text],
.input_button_combo input[type=search] {
  width: 100%;
  box-shadow: 0px 1px 6px rgba(51, 63, 72, 0.5);
  background: var(--background-color);
  border-radius: calc(var(--search-height) / 2);
  height: var(--search-height);
  padding-right: var(--search-height);
  padding-left: 16px;
}
@media (prefers-color-scheme: dark) {
  .input_button_combo input[type=text],
  .input_button_combo input[type=search] {
    border: 1px solid var(--connected-blue);
  }
}
@media screen and (min-width: 768px) {
  .input_button_combo input[type=text],
  .input_button_combo input[type=search] {
    padding-left: 20px;
  }
}
.input_button_combo button {
  position: absolute;
  right: 4px;
  top: 4px;
}
@media screen and (min-width: 768px) {
  .input_button_combo button {
    right: 8px;
    top: 8px;
  }
}

#share_button,
#search_button {
  color: var(--link-color);
  z-index: 21;
}

#search_button {
  right: 20px;
}
#search_button svg {
  transition: 300ms opacity ease;
}
#search_button svg + svg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#search_button.open {
  transform: rotate(180deg) scale(1);
}
@media (hover: hover) {
  #search_button.open:hover {
    transform: rotate(180deg) scale(1.2);
  }
}
#search_button.open:focus, #search_button.open:active {
  transform: rotate(180deg) scale(1.1);
}
#search_button.open {
  position: fixed;
}
#search_button.open svg {
  opacity: 0;
}
#search_button.open svg + svg {
  opacity: 1;
}

#share_button svg > g {
  -webkit-perspective: 100px;
  perspective: 100px;
}
#share_button svg > g > path {
  transform-origin: 0px;
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
}
#share_button.open svg > g > path:first-of-type {
  transform: translateY(-19px) rotateX(180deg);
}
#share_button.open svg > g > path:last-of-type {
  transform: translateY(4px);
}

#share_input {
  transition: 500ms border ease-in-out;
}

#custom_share_sheet {
  color: var(--text-primary-color);
}
#custom_share_sheet #share_field_combo button svg {
  transition: 300ms opacity ease;
}
#custom_share_sheet #share_field_combo button svg + svg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#custom_share_sheet p {
  text-align: center;
  margin-top: 8px;
}
#custom_share_sheet p span {
  border: 2px solid var(--connected-green);
  background: var(--background-color);
  padding: 4px 16px;
  border-radius: 40px;
  opacity: 0;
  transition: 500ms opacity ease-in-out;
}

#custom_share_sheet.success p span {
  opacity: 1;
}
#custom_share_sheet.success #share_field_combo button {
  color: var(--connected-green);
}
#custom_share_sheet.success #share_field_combo button svg {
  opacity: 0;
}
#custom_share_sheet.success #share_field_combo button svg + svg {
  opacity: 1;
}
#custom_share_sheet.success #share_input {
  border-color: var(--connected-green);
}

.filters {
  position: relative;
  max-width: 650px;
  width: 100%;
  margin: var(--space-between-lg) auto 0 auto;
}

#search_field_combo.in_summary {
  position: absolute;
  z-index: 1;
  padding: 4px;
}
@media screen and (min-width: 768px) {
  #search_field_combo.in_summary {
    padding: 8px;
  }
}
#search_field_combo.in_summary button {
  transition: 300ms transform ease, 300ms opacity ease;
  right: 8px;
  top: 8px;
}
@media screen and (min-width: 768px) {
  #search_field_combo.in_summary button {
    right: 16px;
    top: 16px;
  }
}
#search_field_combo.in_summary.summary_open button {
  transform: translateY(80px);
  opacity: 0;
  pointer-events: none;
}
#search_field_combo.in_summary.summary_open input[type=search] {
  padding-right: 8px;
}
@media screen and (min-width: 768px) {
  #search_field_combo.in_summary.summary_open input[type=search] {
    padding-right: 12px;
  }
}

mark {
  background: var(--connected-yellow);
  color: black;
  padding: 0 1px;
  margin: 0 -1px;
  border-radius: 2px;
}

:root {
  --label-padding: 0.3em;
}
@media (hover: hover) {
  :root {
    --label-padding: 0px;
  }
}

#pick_filter_sheet {
  position: relative;
  border-radius: calc(var(--search-height) / 2 + 4px);
}
@media screen and (min-width: 768px) {
  #pick_filter_sheet {
    border-radius: calc(var(--search-height) / 2 + 8px);
  }
}
#pick_filter_sheet {
  overflow: hidden;
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-property: background, box-shadow, -webkit-backdrop-filter, backdrop-filter;
}
#pick_filter_sheet > summary {
  list-style: none;
}
#pick_filter_sheet > summary::-webkit-details-marker {
  display: none;
}
#pick_filter_sheet > summary {
  outline: none;
  margin: 0 var(--space-between-md);
  padding: calc(var(--search-height) + 4px + var(--space-between-md)) 0 var(--space-between-md) 0;
  text-align: right;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: white;
}
#pick_filter_sheet > summary .opened {
  display: none;
}
#pick_filter_sheet > summary .filter_icon {
  margin-left: 8px;
  transform: translateY(4px);
  display: inline-block;
}
#pick_filter_sheet > summary .filter_icon svg {
  height: 1.2rem;
  width: auto;
}
#pick_filter_sheet[open] > summary {
  color: var(--link-color);
}
@media (hover: hover) {
  #pick_filter_sheet[open] > summary:hover {
    color: var(--link-hover-color);
  }
}
#pick_filter_sheet[open] > summary:focus, #pick_filter_sheet[open] > summary:active {
  color: var(--link-hover-color);
}
#pick_filter_sheet[open] > summary .closed {
  display: none;
}
#pick_filter_sheet[open] > summary .opened {
  display: inline;
}
#pick_filter_sheet[open] {
  transition-delay: 0s;
  transition-duration: 300ms;
  box-shadow: 0px 1px 6px rgba(51, 63, 72, 0.5);
  background: rgba(255, 255, 255, 0.9);
}
@media (prefers-color-scheme: dark) {
  #pick_filter_sheet[open] {
    background: rgba(0, 0, 0, 0.95);
  }
}
@supports (-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px)) {
  #pick_filter_sheet[open] {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.8);
  }
  @media (prefers-color-scheme: dark) {
    #pick_filter_sheet[open] {
      background: rgba(0, 0, 0, 0.8);
    }
  }
}

#pick_filter_sheet > .content {
  margin: 0 var(--space-between-md) var(--space-between-md);
  display: grid;
  gap: var(--space-between-md);
  grid-gap: var(--space-between-md);
  justify-items: stretch;
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#pick_filter_sheet > .content > fieldset.hosts, #pick_filter_sheet > .content > fieldset.categories, #pick_filter_sheet > .content > fieldset.pick_metadata, #pick_filter_sheet > .content > .button_section {
  grid-column: 1/3;
}
@media screen and (min-width: 1200px) {
  #pick_filter_sheet > .content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #pick_filter_sheet > .content > .button_section {
    grid-column: 1/4;
  }
}
#pick_filter_sheet > .content fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
}
#pick_filter_sheet > .content fieldset.list {
  flex-direction: column;
}
#pick_filter_sheet > .content fieldset {
  text-align: left;
}
#pick_filter_sheet > .content > fieldset {
  padding: var(--space-between-sm);
  padding: calc(var(--space-between-sm) - var(--label-padding)) var(--space-between-sm);
  border-radius: 12px;
}
@media screen and (min-width: 768px) {
  #pick_filter_sheet > .content > fieldset {
    border-radius: 4px;
  }
}
#pick_filter_sheet > .content > fieldset {
  background: rgba(var(--connected-blue-rgb), 0.05);
}
@media (prefers-color-scheme: dark) {
  #pick_filter_sheet > .content > fieldset {
    background: rgba(var(--connected-blue-rgb), 0.15);
  }
}
#pick_filter_sheet > .content > fieldset.hosts {
  position: relative;
  justify-content: center;
  align-items: center;
  padding-bottom: var(--space-between-lg);
}
#pick_filter_sheet > .content > fieldset.hosts .host {
  flex-basis: 33.3333333333%;
  max-width: 120px;
}
#pick_filter_sheet > .content > fieldset.hosts .host input[type=checkbox] {
  display: none;
}
#pick_filter_sheet > .content > fieldset.hosts .host label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
#pick_filter_sheet > .content > fieldset.hosts .host label img {
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
  transform: scale(1);
  filter: grayscale(100%);
  opacity: 0.3;
}
@media (prefers-color-scheme: dark) {
  #pick_filter_sheet > .content > fieldset.hosts .host label img {
    opacity: 0.5;
  }
}
#pick_filter_sheet > .content > fieldset.hosts .host label img {
  display: block;
}
#pick_filter_sheet > .content > fieldset.hosts .host label img:first-of-type {
  display: none;
}
#pick_filter_sheet > .content > fieldset.hosts .host label span {
  display: block;
  margin-top: -8px;
}
#pick_filter_sheet > .content > fieldset.hosts .host input[type=checkbox]:checked + label img {
  filter: grayscale(0%);
  opacity: 1;
}
#pick_filter_sheet > .content > fieldset.hosts .host input[type=checkbox]:checked + label img:first-of-type {
  display: block;
}
#pick_filter_sheet > .content > fieldset.hosts .host input[type=checkbox]:checked + label img:nth-of-type(2) {
  display: none;
}
@media (hover: hover) {
  #pick_filter_sheet > .content > fieldset.hosts .host:hover img {
    filter: grayscale(50%);
    transform: scale(1.2) rotate(-2deg);
  }
}
#pick_filter_sheet > .content > fieldset.hosts .host:focus img, #pick_filter_sheet > .content > fieldset.hosts .host:active img {
  transform: scale(1.1) rotate(-1deg);
}
#pick_filter_sheet > .content > fieldset.hosts .host + .host {
  margin-left: var(--space-between-md);
}
#pick_filter_sheet > .content > fieldset.hosts .triple_j_filter {
  position: absolute;
  bottom: var(--space-between-sm);
  right: var(--space-between-sm);
  font-size: 0.75em;
}
#pick_filter_sheet > .content > fieldset.hosts .triple_j_filter label {
  padding-left: 4px;
}
#pick_filter_sheet > .content > fieldset.hosts .triple_j_filter input[type=checkbox] {
  margin-right: 0;
  margin-left: 4px;
}
#pick_filter_sheet > .content > fieldset.categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-between-md);
  grid-gap: var(--space-between-md);
  justify-items: stretch;
}
@media screen and (min-width: 576px) {
  #pick_filter_sheet > .content > fieldset.categories {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-between-lg);
    grid-gap: var(--space-between-lg);
  }
}
@media screen and (min-width: 576px) {
  #pick_filter_sheet > .content > fieldset.categories > fieldset:not(:last-child) > ul > li {
    margin-right: -24px;
  }
}
#pick_filter_sheet > .content > fieldset.categories > fieldset > ul > li ul {
  margin-top: 4px;
  flex-basis: 100%;
}
#pick_filter_sheet > .content > fieldset.categories > fieldset > ul > li ul li.filter_option {
  font-size: 0.75em;
  margin-left: 4px;
  margin-right: 4px;
  border-radius: 4px;
}
@media screen and (min-width: 576px) {
  #pick_filter_sheet > .content > fieldset.pick_status {
    grid-column: 1/2;
  }
  #pick_filter_sheet > .content > fieldset.pick_metadata {
    grid-row: 2/4;
    grid-column: 2/3;
  }
}
@media screen and (min-width: 1200px) {
  #pick_filter_sheet > .content > fieldset.pick_status {
    grid-column: 2/3;
  }
  #pick_filter_sheet > .content > fieldset.pick_metadata {
    grid-row: 1/3;
    grid-column: 3/4;
  }
  #pick_filter_sheet > .content > fieldset.categories {
    grid-column: 1/4;
  }
}
#pick_filter_sheet > .content > fieldset .filter_option {
  display: flex;
  justify-content: left;
  align-items: flex-start;
  flex-wrap: wrap;
  border-radius: 5px;
}
#pick_filter_sheet > .content > fieldset .filter_option.hidden {
  display: none;
}
@media (hover: hover) {
  #pick_filter_sheet > .content > fieldset .filter_option:hover {
    background-color: var(--element-hover-color);
  }
}
#pick_filter_sheet > .content > fieldset .filter_option:focus, #pick_filter_sheet > .content > fieldset .filter_option:active {
  background-color: var(--element-active-color);
}
#pick_filter_sheet > .content > fieldset .filter_option label,
#pick_filter_sheet > .content > fieldset .filter_option select {
  flex-basis: 0;
  flex-grow: 1;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pick_filter_sheet > .content > fieldset .filter_option {
  margin-bottom: 4px;
}
#pick_filter_sheet > .content > fieldset .filter_option:last-child {
  margin-bottom: 0;
}
#pick_filter_sheet > .content > fieldset .range,
#pick_filter_sheet > .content > fieldset .select {
  position: relative;
}
#pick_filter_sheet > .content > fieldset .range .select_icon,
#pick_filter_sheet > .content > fieldset .range .range_icon,
#pick_filter_sheet > .content > fieldset .select .select_icon,
#pick_filter_sheet > .content > fieldset .select .range_icon {
  opacity: 0.3;
}
@media (prefers-color-scheme: dark) {
  #pick_filter_sheet > .content > fieldset .range .select_icon,
  #pick_filter_sheet > .content > fieldset .range .range_icon,
  #pick_filter_sheet > .content > fieldset .select .select_icon,
  #pick_filter_sheet > .content > fieldset .select .range_icon {
    opacity: 0.6;
  }
}
#pick_filter_sheet > .content > fieldset .range .select_icon,
#pick_filter_sheet > .content > fieldset .range .range_icon,
#pick_filter_sheet > .content > fieldset .select .select_icon,
#pick_filter_sheet > .content > fieldset .select .range_icon {
  width: 1.5em;
  height: calc(1.5em + 2 * (var(--label-padding)));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media (hover: hover) {
  #pick_filter_sheet > .content > fieldset .range .select_icon:hover,
  #pick_filter_sheet > .content > fieldset .range .range_icon:hover,
  #pick_filter_sheet > .content > fieldset .select .select_icon:hover,
  #pick_filter_sheet > .content > fieldset .select .range_icon:hover {
    opacity: 1;
  }
}
#pick_filter_sheet > .content > fieldset .range .select_icon,
#pick_filter_sheet > .content > fieldset .range .range_icon,
#pick_filter_sheet > .content > fieldset .select .select_icon,
#pick_filter_sheet > .content > fieldset .select .range_icon {
  pointer-events: none;
}
#pick_filter_sheet > .content > fieldset .select select {
  padding: var(--label-padding) 0 var(--label-padding) calc(1.4rem + 8px);
  width: 100%;
}
#pick_filter_sheet > .content > fieldset .select .select_icon {
  position: absolute;
  background-image: url("/images/buttons/input-unselect.svg");
}
#pick_filter_sheet > .content > fieldset .select select:not([data-chosen=""]) + .select_icon {
  background-image: url("/images/buttons/input-select.svg");
  opacity: 1;
}
#pick_filter_sheet > .content > fieldset .range {
  flex-wrap: nowrap;
}
#pick_filter_sheet > .content > fieldset .range input[type=number] {
  width: 2rem;
  font-weight: bold;
  text-align: center;
  border: 1px solid var(--link-color);
  margin: 0 4px;
  border-radius: 4px;
  height: 1.5rem;
  height: calc(1.5rem + 2 * var(--label-padding));
  line-height: 1em;
}
#pick_filter_sheet > .content > fieldset .range input[type=number]:placeholder-shown {
  opacity: 0.3;
}
@media (prefers-color-scheme: dark) {
  #pick_filter_sheet > .content > fieldset .range input[type=number]:placeholder-shown {
    opacity: 0.6;
  }
}
@media (hover: hover) {
  #pick_filter_sheet > .content > fieldset .range input[type=number]:placeholder-shown:hover {
    opacity: 1;
  }
}
#pick_filter_sheet > .content > fieldset .range input[type=number]:placeholder-shown:focus, #pick_filter_sheet > .content > fieldset .range input[type=number]:placeholder-shown:active {
  opacity: 1;
}
#pick_filter_sheet > .content > fieldset .range input[type=number]:not(:placeholder-shown) {
  background: var(--link-color);
  color: white;
}
@media screen and (min-width: 1200px) {
  #pick_filter_sheet > .content > fieldset .range input[type=number] {
    width: 1.45rem;
  }
}
#pick_filter_sheet > .content > fieldset .range label:not(.end_of_input) {
  flex-basis: unset;
  flex-grow: unset;
}
#pick_filter_sheet > .content > fieldset .range span.big_label {
  display: none;
}
@media screen and (min-width: 375px) {
  #pick_filter_sheet > .content > fieldset .range span.small_label {
    display: none;
  }
  #pick_filter_sheet > .content > fieldset .range span.big_label {
    display: inline;
  }
}
@media screen and (min-width: 576px) {
  #pick_filter_sheet > .content > fieldset .range span.small_label {
    display: inline;
  }
  #pick_filter_sheet > .content > fieldset .range span.big_label {
    display: none;
  }
}
#pick_filter_sheet > .content > fieldset .range .range_icon {
  margin-right: 4px;
  background-image: url("/images/buttons/input-number-empty.svg");
}
#pick_filter_sheet > .content > fieldset .range.active .range_icon {
  opacity: 1;
  background-image: url("/images/buttons/input-number.svg");
}
#pick_filter_sheet > .content > fieldset input[type=checkbox] {
  opacity: 0.3;
}
@media (prefers-color-scheme: dark) {
  #pick_filter_sheet > .content > fieldset input[type=checkbox] {
    opacity: 0.6;
  }
}
#pick_filter_sheet > .content > fieldset input[type=checkbox] {
  width: 1.5em;
  height: calc(1.5em + 2 * (var(--label-padding)));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media (hover: hover) {
  #pick_filter_sheet > .content > fieldset input[type=checkbox]:hover {
    opacity: 1;
  }
}
#pick_filter_sheet > .content > fieldset input[type=checkbox] {
  background-image: url("/images/buttons/input-uncheck.svg");
  margin-right: 4px;
  flex-shrink: 0;
}
#pick_filter_sheet > .content > fieldset input[type=checkbox]:indeterminate {
  background-image: url("/images/buttons/input-check-indeterminate.svg");
  opacity: 1;
}
#pick_filter_sheet > .content > fieldset input[type=checkbox]:checked {
  background-image: url("/images/buttons/input-check.svg");
  opacity: 1;
}
#pick_filter_sheet > .content label {
  padding: var(--label-padding) 0;
}
#pick_filter_sheet > .content label img {
  width: 100%;
  max-width: 100px;
  height: auto;
}

.filter_sheet_toggle {
  display: inline-block;
  border-radius: var(--element-corner-radius);
}
@media (hover: hover) {
  .filter_sheet_toggle {
    margin: calc(var(--element-padding-neg) / 2) 0;
    padding: calc(var(--element-padding) / 2) var(--element-padding);
  }
  .filter_sheet_toggle:hover {
    background-color: var(--element-hover-color);
  }
  .filter_sheet_toggle:focus, .filter_sheet_toggle:active {
    background-color: var(--element-active-color);
  }
}

.button_section {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

#reset_button,
#search_button_plus {
  border-radius: 12px;
}
@media screen and (min-width: 768px) {
  #reset_button,
  #search_button_plus {
    border-radius: 26px;
  }
}

#reset_button {
  padding: 0 var(--element-padding);
}
@media screen and (min-width: 768px) {
  #reset_button {
    padding: 0 var(--space-between-md);
  }
}
@media (hover: hover) {
  #reset_button:not(:disabled):hover {
    background-color: var(--element-hover-color);
  }
}
#reset_button:not(:disabled):focus, #reset_button:not(:disabled):active {
  background-color: var(--element-active-color);
}
#reset_button:disabled {
  color: var(--text-secondary-color);
  opacity: 0.7;
}

#search_button_plus {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 1px 6px rgba(51, 63, 72, 0.5);
  background: white;
  padding-left: 16px;
  font-weight: 500;
  transition: 300ms transform cubic-bezier(0.68, 0.07, 0.27, 1.54);
}
#search_button_plus svg {
  transform: scale(0.8);
}
#search_button_plus svg path:first-child {
  fill: none;
}
@media (hover: hover) {
  #search_button_plus:hover {
    transform: scale(1.1);
  }
}
#search_button_plus:focus, #search_button_plus:active {
  transform: scale(1.05);
}

#picks {
  margin-top: calc(-1 * env(safe-area-inset-top));
  padding-top: calc(env(safe-area-inset-top));
}

#results {
  margin: 0 auto;
  grid-template-columns: repeat(4, minmax(96px, 1fr));
  padding: var(--space-between-lg) var(--space-side-padding);
  text-align: center;
  overflow: scroll hidden;
  width: 100%;
}

.avatar_leaderboard {
  --chart-size-factor: 1.2;
}
@media screen and (min-width: 375px) {
  .avatar_leaderboard {
    --chart-size-factor: 1.4;
  }
}
@media screen and (min-width: 576px) {
  .avatar_leaderboard {
    --chart-size-factor: 1.5;
  }
}
.avatar_leaderboard .chart-container {
  height: calc(var(--graphic-size) * var(--chart-size-factor));
  width: calc(var(--graphic-size) * var(--chart-size-factor));
}
.avatar_leaderboard .host.with_chart {
  position: relative;
}
.avatar_leaderboard .host.with_chart img {
  width: calc(var(--graphic-size) * var(--chart-size-factor));
  position: absolute;
  top: 8px;
  padding: 8px;
}
.avatar_leaderboard .host.with_chart img.no_results {
  opacity: 0.3;
  filter: grayscale(100%);
}
.avatar_leaderboard .host.with_chart .chart-container.no_results {
  border: 8px solid rgba(var(--relay-blue-rgb), 0.05);
  border-radius: 50%;
}
.avatar_leaderboard .host.with_chart:nth-of-type(4) {
  color: var(--text-secondary-color);
}

@media screen and (min-width: 1200px) {
  .filters.with_sheet {
    max-width: 800px;
  }
}
.footer_space {
  margin-top: calc(var(--space-between-lg) * 2);
}

footer {
  padding: var(--space-side-padding);
  color: white;
  text-align: center;
  font-size: 0.875rem;
}
footer:first-of-type {
  margin-top: auto;
}
footer p {
  max-width: 650px;
  margin: auto;
}
footer#footer {
  padding-bottom: max(var(--space-side-padding), env(safe-area-inset-bottom));
  background: var(--relay-blue);
  position: relative;
}
footer#footer p#promote_webapp {
  margin-bottom: var(--space-between-md);
}

p#promote_webapp {
  display: none;
}

h3 {
  margin: 0;
  font-weight: 600;
  font-size: 1.25rem;
}

h4 {
  text-transform: uppercase;
  color: var(--text-secondary-color);
  font-weight: bold;
  font-size: 0.875rem;
  margin: 0;
}

span.emoji {
  font-family: "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, emoji, sans-serif;
  font-variant-emoji: emoji;
  display: inline-block;
  width: 1.5em;
  margin-right: 0.4em;
  overflow: hidden;
  vertical-align: top;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  text-align: center;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

ul.bullet_list > li {
  display: flex;
  margin: 8px 0;
}
ul.bullet_list > li span.emoji {
  margin-right: 8px;
}

.highlight_card {
  margin: var(--space-between-lg) auto;
  border: 1px solid var(--connected-blue);
  background: var(--element-active-color);
}

code,
pre,
.highlight_card {
  border-radius: var(--corner-radius);
  border: 1px solid var(--connected-blue);
  background: var(--element-active-color);
}

pre,
.highlight_card {
  padding: var(--space-between-sm) var(--space-between-md);
}

code,
pre {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  border: 1px solid var(--connected-green);
  background: rgba(var(--connected-green-rgb), 0.1);
}

code {
  padding: 2px;
}

pre {
  overflow-x: scroll;
}

.top_button {
  box-shadow: 0px 1px 6px rgba(51, 63, 72, 0.5);
}