.flag-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #000;
}

.flag-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

:root {
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}

.link--mail {
  text-underline-offset: 0.12em;
  hyphens: none;
  -webkit-hyphens: none;
}

.heading del {
  text-decoration: line-through;
  text-decoration-thickness: 0.14em;
  hyphens: none;
  -webkit-hyphens: none;
}

.heading ins {
  text-decoration: none;
  hyphens: none;
  -webkit-hyphens: none;
}

.stealth {
  white-space: nowrap;
}

.stealth__icon {
  display: inline-block;
  height: var(--mk-skull, 1.35em);
  width: auto;
  vertical-align: calc((0.744em - var(--mk-skull, 1.35em)) / 2);
}

.stealth__icon--oxo {
  height: var(--mk-oxo, 1.1em);
  vertical-align: calc((0.744em - var(--mk-oxo, 1.1em)) / 2);
}

.stealth__icon--blur {
  height: var(--mk-names, 0.744em);
  margin-inline-start: var(--mk-gap, 0);
  vertical-align: 0;
}

html.flag-fit {
  --fit-rem: 60;
  font-size: calc(var(--fit-w, 1200px) / var(--fit-rem));
  height: 100%;
  overflow: hidden;
}

html.flag-fit body {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

html.flag-fit .hero {
  position: fixed;
  inset: 0;
  display: block;
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

html.flag-fit .flag-block {
  position: absolute;
  left: var(--fit-x, 0px);
  top: var(--fit-y, 0px);
  width: var(--fit-w, 1200px);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

html.flag-fit .hero__content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

html.flag-fit .heading {
  font-size: calc(1.5rem * var(--tx-size, 1));
  line-height: var(--tx-lh, 1.2);
  letter-spacing: var(--tx-ls, 0.02em);
  word-spacing: var(--tx-ws, 0em);
  text-align: var(--tx-align, justify);
  text-align-last: var(--tx-align-last, start);
  text-wrap: var(--tx-wrap, pretty);
  hyphens: var(--tx-hyph, auto);
  -webkit-hyphens: var(--tx-hyph, auto);
}

html.flag-fit .logo {
  width: calc(100% * var(--tx-name, 1));
  margin-inline: var(--tx-name-m, 0);
}

html.flag-fit .footer {
  --footer-gap: 1rem;
}

html.flag-fit .footer__x line {
  stroke-width: 0.1rem;
}

html.flag-fit .social {
  width: 100%;
  max-width: none;
  margin: 0;
}

html.flag-fit .social__divider {
  height: 0.1rem;
}

@media (max-width: 767px) {
  html.flag-fit {
    --fit-rem: 17.55;
  }

  html.flag-fit .flag-block {
    gap: 1rem;
  }

  html.flag-fit .heading {
    font-size: calc(0.75rem * var(--tx-size, 1));
  }

  html.flag-fit .footer {
    --footer-gap: 0.625rem;
    --footer-font-size: 1.22rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--footer-gap);
    row-gap: 0.5em;
  }

  html.flag-fit .footer__row,
  html.flag-fit .footer__row--globe {
    display: contents;
  }

  html.flag-fit .footer__name {
    grid-area: 1 / 1;
    justify-self: center;
  }

  html.flag-fit .footer__row--globe .footer__globe {
    grid-area: 1 / 2;
    justify-self: center;
  }

  html.flag-fit .footer__roles {
    grid-area: 1 / 3;
    justify-self: center;
  }

  html.flag-fit .footer__row--globe .footer__available {
    grid-area: 2 / 1;
    justify-self: center;
  }

  html.flag-fit .footer__x-wrap {
    grid-area: 2 / 2;
    justify-self: center;
    flex: none;
    width: 3.3em;
    min-width: 0;
    height: 0.6em;
    max-height: none;
  }

  html.flag-fit .footer__row--globe .footer__worldwide {
    grid-area: 2 / 3;
    justify-self: center;
  }

  html.flag-fit .footer__copy {
    grid-area: 3 / 1 / 4 / 4;
    padding-top: 0.2em;
  }

  html.flag-fit .hero__content {
    padding: 0;
  }

  html.flag-fit .social {
    position: fixed;
    left: var(--fit-x, 0px);
    right: auto;
    bottom: max(var(--sa-b), 2.5vh);
    width: var(--fit-w, 100%);
    padding: 0;
    background: none;
    gap: 0.75rem;
  }

  html.flag-fit .social__divider--grow {
    height: 0.05rem;
  }
}

html.flag-on .flag-block {
  opacity: 0;
}

html.flag-on .hero {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html.flag-on.flag-dragging,
html.flag-on.flag-dragging * {
  cursor: grabbing !important;
}

html.flag-on .hero a {
  cursor: pointer;
}

html.flag-on.flag-nopan,
html.flag-on.flag-nopan body {
  touch-action: none;
  overscroll-behavior: none;
}

html.flag-on,
html.flag-on body {
  background: #000;
}

.dialkit-root {
  touch-action: pan-y;
}

.flag-dev__toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 2147483000;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 8px;
  background: #1c1c1e;
  color: #fff;
  font: 500 13px/1.2 -apple-system, system-ui, sans-serif;
  pointer-events: none;
}

html:not(.flag-on) .stealth__icon--blur {
  filter: blur(0.2em);
}

.sound-toggle {
  position: fixed;
  right: calc(12px + var(--sa-r));
  bottom: calc(12px + var(--sa-b));
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  opacity: 0.5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s;
}

html.flag-on .sound-toggle {
  display: flex;
}

@media (max-width: 767px) {
  .sound-toggle {
    top: calc(12px + var(--sa-t));
    bottom: auto;
  }
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  opacity: 1;
  outline: none;
}

.sound-toggle i {
  width: 2px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: height 0.3s;
}

.sound-toggle[aria-pressed="true"] {
  opacity: 0.85;
}

.sound-toggle[aria-pressed="true"] i {
  height: 12px;
  animation: sound-eq 0.8s ease-in-out infinite alternate;
}

.sound-toggle[aria-pressed="true"] i:nth-of-type(2) {
  animation-duration: 0.55s;
  animation-delay: -0.2s;
}

.sound-toggle[aria-pressed="true"] i:nth-of-type(3) {
  animation-duration: 0.95s;
  animation-delay: -0.5s;
}

.sound-toggle[aria-pressed="true"] i:nth-of-type(4) {
  animation-duration: 0.65s;
  animation-delay: -0.35s;
}

.sound-toggle__hint {
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 4px;
  font: 400 11px/1 "Inter", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(8px, -50%);
  transition: opacity 0.5s, transform 0.5s;
  pointer-events: none;
}

html.sound-hint .sound-toggle {
  opacity: 1;
}

html.sound-hint .sound-toggle__hint {
  opacity: 0.85;
  transform: translate(0, -50%);
  pointer-events: auto;
}

@keyframes sound-eq {
  from {
    height: 3px;
  }
  to {
    height: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sound-toggle[aria-pressed="true"] i {
    animation: none;
  }

  .sound-toggle__hint {
    transition: opacity 0.5s;
    transform: translate(0, -50%);
  }
}

.flag-dev__info {
  position: fixed;
  left: calc(12px + var(--sa-l));
  bottom: calc(12px + var(--sa-b));
  z-index: 2147483000;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(28, 28, 30, 0.9);
  color: #fff;
  font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
  pointer-events: none;
}