:root {
  color-scheme: dark;
  --black: #000;
  --white: #fff;
  --green: #00ff3a;
  --red: #ff2b2b;
  font-family:
    "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--white);
  background: var(--black);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.floor {
  display: grid;
  min-height: 100svh;
  place-items: center;
  background: var(--black);
  scroll-margin-top: 0;
}

.frame {
  position: relative;
  width: min(100vw, calc(100svh * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--black);
}

.frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.hotspot {
  position: absolute;
  display: block;
  overflow: hidden;
  color: transparent;
  border: 2px solid transparent;
  touch-action: manipulation;
}

.hotspot:hover,
.hotspot:focus-visible {
  border-color: var(--red);
  outline: 0;
  box-shadow:
    0 0 0 2px rgba(255, 43, 43, 0.35),
    0 0 18px rgba(255, 43, 43, 0.52);
}

.floor0-more {
  left: 8.7%;
  bottom: 19.1%;
  width: 41.6%;
  height: 14.7%;
  border-radius: 4px;
}

.panel-one,
.panel-two,
.panel-three,
.panel-four {
  left: 35.8%;
  width: 38.5%;
  height: 10.3%;
  border-radius: 4px;
}

.panel-one {
  top: 20.2%;
}

.panel-two {
  top: 33.3%;
}

.panel-three {
  top: 46.3%;
}

.panel-four {
  top: 58.6%;
}

.panel-one::after,
.panel-two::after,
.panel-three::after,
.panel-four::after {
  position: absolute;
  top: 50%;
  left: -20.8%;
  width: 6.5%;
  height: 62%;
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 10%, #ff8d7d 11% 24%, var(--red) 25% 45%, rgba(255, 43, 43, 0.1) 46% 70%, transparent 71%);
  filter: blur(0.2px);
  box-shadow:
    0 0 14px rgba(255, 43, 43, 0.95),
    0 0 30px rgba(255, 43, 43, 0.75);
  pointer-events: none;
}

.panel-one:hover::after,
.panel-one:focus-visible::after,
.panel-two:hover::after,
.panel-two:focus-visible::after,
.panel-three:hover::after,
.panel-three:focus-visible::after,
.panel-four:hover::after,
.panel-four:focus-visible::after {
  opacity: 1;
}

.sounds-nav-0,
.sounds-nav-1,
.sounds-nav-2,
.sounds-nav-3,
.sounds-nav-4,
.sounds-back-top {
  bottom: 4.6%;
  height: 7.4%;
  border-radius: 4px;
}

.sounds-nav-0 {
  left: 24.3%;
  width: 9.2%;
}

.sounds-nav-1 {
  left: 35.4%;
  width: 9.1%;
}

.sounds-nav-2 {
  left: 46.3%;
  width: 9.1%;
}

.sounds-nav-3 {
  left: 57.1%;
  width: 9.1%;
}

.sounds-nav-4 {
  left: 68%;
  width: 9.2%;
}

.sounds-back-top {
  right: 5.3%;
  width: 12.4%;
}

.event-details-one,
.event-details-two {
  left: 52.7%;
  width: 8.3%;
  height: 5.8%;
  border-radius: 2px;
}

.event-details-one {
  top: 44.3%;
}

.event-details-two {
  top: 68.7%;
}

.event-contact {
  left: 7.4%;
  bottom: 9.1%;
  width: 44.4%;
  height: 9.8%;
  border-radius: 4px;
}

.music-tab {
  left: 51.8%;
  top: 9.8%;
  width: 18.9%;
  height: 19%;
  border-radius: 4px;
}

.art-tab {
  left: 72%;
  top: 9.8%;
  width: 16.3%;
  height: 19%;
  border-radius: 4px;
}

.artist-showcase {
  left: 48.5%;
  top: 31.6%;
  width: 26%;
  height: 9.8%;
  border-radius: 4px;
}

.play-mix {
  left: 62%;
  top: 64%;
  width: 15.6%;
  height: 7.7%;
  border-radius: 4px;
}

.nav-floor-1,
.nav-floor-2,
.nav-floor-3,
.nav-floor-4,
.nav-floor-5 {
  bottom: 8.2%;
  height: 8.2%;
  border-radius: 4px;
}

.nav-floor-1 {
  left: 25.3%;
  width: 9.7%;
}

.nav-floor-2 {
  left: 36%;
  width: 9.3%;
}

.nav-floor-3 {
  left: 46.3%;
  width: 9.4%;
}

.nav-floor-4 {
  left: 56.7%;
  width: 9.6%;
}

.nav-floor-5 {
  left: 67.1%;
  width: 9.6%;
}

.back-top {
  right: 3.9%;
  bottom: 7.8%;
  width: 14.7%;
  height: 8.8%;
  border-radius: 4px;
}

.contact-floor {
  min-height: 100svh;
}

.contact-card {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--black);
}

.contact-mail-form {
  position: absolute;
  left: 11.4%;
  top: 54.5%;
  display: grid;
  width: 42.4%;
  height: 13%;
  grid-template-columns: 72% 28%;
  z-index: 2;
}

.contact-mail-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-mail-form input,
.contact-mail-form button {
  min-width: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  font: inherit;
  font-size: clamp(0.75rem, 2.15vw, 2rem);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.contact-mail-form input {
  padding: 0 6%;
  color: #d7d0c8;
  background: transparent;
}

.contact-mail-form input::placeholder {
  color: transparent;
}

.contact-mail-form input:focus,
.contact-mail-form button:hover,
.contact-mail-form button:focus-visible {
  border-color: var(--red);
  outline: 0;
  box-shadow:
    0 0 0 2px rgba(255, 43, 43, 0.35),
    0 0 18px rgba(255, 43, 43, 0.52);
}

.contact-mail-form button {
  color: transparent;
  background: transparent;
  cursor: pointer;
}

.contact-mail-form button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.mail-status {
  position: absolute;
  left: 0;
  top: 112%;
  min-height: 1.4em;
  color: var(--red);
  font-weight: 900;
  text-shadow: 0 2px 0 #000;
  text-transform: uppercase;
}

.contact-telegram {
  left: 61.1%;
  top: 36.9%;
  width: 29.6%;
  height: 16.1%;
}

.contact-mailto {
  left: 61.1%;
  top: 57.7%;
  width: 29.6%;
  height: 16.3%;
}

.mail-launcher {
  padding: 0;
  font: inherit;
  background: transparent;
  cursor: pointer;
}

.mail-options-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  padding: 4%;
  place-items: center;
  background: rgba(0, 0, 0, 0.78);
}

.mail-options-backdrop[hidden] {
  display: none;
}

.mail-options {
  position: relative;
  width: min(72%, 760px);
  padding: 4% 5%;
  color: #d7d0c8;
  border: 3px solid #d7d0c8;
  border-radius: 4px;
  background: #0a0a0a;
  box-shadow: 0 0 0 5px #1e1e1e, 0 0 34px rgba(255, 43, 43, 0.3);
  text-align: center;
  text-transform: uppercase;
}

.mail-options h2,
.mail-options p {
  margin: 0 0 3%;
  letter-spacing: 0;
}

.mail-options h2 {
  font-size: clamp(1rem, 3vw, 2.6rem);
}

.mail-options p,
.mail-copy-status {
  font-size: clamp(0.62rem, 1.45vw, 1.25rem);
  overflow-wrap: anywhere;
}

.mail-options-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mail-options-actions a,
.mail-options-actions button,
.mail-options-close {
  color: #d7d0c8;
  border: 2px solid #666;
  border-radius: 3px;
  font: inherit;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  background: #111;
  cursor: pointer;
}

.mail-options-actions a,
.mail-options-actions button {
  display: grid;
  min-height: 48px;
  padding: 3%;
  place-items: center;
  font-size: clamp(0.65rem, 1.55vw, 1.25rem);
}

.mail-options-actions a:hover,
.mail-options-actions a:focus-visible,
.mail-options-actions button:hover,
.mail-options-actions button:focus-visible,
.mail-options-close:hover,
.mail-options-close:focus-visible {
  color: #fff;
  border-color: var(--red);
  outline: 0;
  box-shadow: 0 0 16px rgba(255, 43, 43, 0.55);
}

.mail-options-close {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
}

.mail-copy-status {
  display: block;
  min-height: 1.4em;
  margin-top: 2%;
  color: var(--red);
  font-weight: 900;
}

.contact-nav-0,
.contact-nav-1,
.contact-nav-2,
.contact-nav-3,
.contact-nav-5 {
  bottom: 8.2%;
  height: 8.2%;
  border-radius: 4px;
}

.contact-nav-0 {
  left: 25.3%;
  width: 9.7%;
}

.contact-nav-1 {
  left: 36%;
  width: 9.3%;
}

.contact-nav-2 {
  left: 46.3%;
  width: 9.4%;
}

.contact-nav-3 {
  left: 56.7%;
  width: 9.6%;
}

.contact-nav-5 {
  left: 67.1%;
  width: 9.6%;
}

.contact-back-top {
  right: 3.9%;
  bottom: 7.8%;
  width: 14.7%;
  height: 8.8%;
  border-radius: 4px;
}

@media (max-width: 680px) {
  .contact-mail-form input,
  .contact-mail-form button {
    font-size: clamp(0.62rem, 2vw, 1rem);
  }
}

@media (max-width: 1180px) and (orientation: portrait) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  .floor {
    position: relative;
    display: block;
    min-height: 100svh;
    overflow: hidden;
  }

  .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100svh;
    height: 100vw;
    aspect-ratio: auto;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
  }

  .hotspot {
    min-width: 44px;
    min-height: 44px;
  }

  .contact-mail-form input,
  .contact-mail-form button {
    font-size: clamp(0.75rem, 2.15svh, 1.35rem);
  }

  .mail-status {
    font-size: clamp(0.7rem, 1.8svh, 1.1rem);
  }
}

@media (max-aspect-ratio: 16 / 9) {
  .frame {
    width: 100vw;
    height: calc(100vw * 9 / 16);
  }
}

@media (min-aspect-ratio: 16 / 9) {
  .frame {
    width: calc(100svh * 16 / 9);
    height: 100svh;
  }
}

@media (max-width: 1180px) and (orientation: portrait) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  .floor {
    position: relative;
    display: block;
    min-height: 100svh;
    overflow: hidden;
  }

  .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100svh;
    height: 100vw;
    aspect-ratio: auto;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
  }
}