html, body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000
}

.main-frame {
  opacity:0;
  transition:opacity .45s ease;
}

.main-frame.visible {
  opacity:1;
}

.start-gate {
  position:fixed;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  padding-left:14.5%;
  background:#000;
  color:#cfcfcf;
  font-family:"Courier New", monospace;
  cursor:pointer;
  transition:opacity .42s ease, transform .52s cubic-bezier(.2, .8, .2, 1)
}

.start-gate.hidden {
  opacity:0;
  transform:translate3d(-10px, 0, 0);
  pointer-events:none
}

.start-gate:focus, .start-gate:focus-visible {
  outline:0
}

.start-content {
  display:flex;
  flex-direction:column;
  gap:16px
}

.start-title {
  font-size:17px;
  line-height:1;
  letter-spacing:.055em;
  color:#d1d1d1
}

.start-command {
  font-size:15px;
  line-height:1.2;
  letter-spacing:.025em;
  color:#9b9b9b;
  animation:startPulse 1.45s steps(2) infinite
}

.cursor {
  display:inline-block;
  width:8px;
  height:16px;
  margin-left:5px;
  vertical-align:-2px;
  background:#a7a7a7;
  animation:cursorBlink .75s steps(1) infinite
}

@keyframes cursorBlink {
  0%, 49% {
    opacity:1
  }

  50%, 100% {
    opacity:0
  }

}

@keyframes startPulse {
  0%, 100% {
    opacity:.58
  }

  50% {
    opacity:1
  }

}

.boot-loader {
  position:fixed;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  padding-left:14.5%;
  background:#000;
  color:#cfcfcf;
  font-family:"Courier New", monospace;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease
}

.boot-loader.visible {
  opacity:1
}

.boot-content {
  display:flex;
  flex-direction:column;
  gap:15px;
  min-width:320px
}

.boot-exe {
  font-size:17px;
  line-height:1;
  letter-spacing:.055em;
  color:#d1d1d1
}

.boot-command {
  min-height:18px;
  font-size:15px;
  line-height:1.2;
  letter-spacing:.025em;
  color:#9b9b9b
}

.boot-word {
  margin-top:10px;
  font-size:38px;
  line-height:1;
  letter-spacing:.2em;
  color:#d8d8d8;
  text-transform:lowercase
}

.boot-access {
  margin-top:2px;
  font-size:15px;
  letter-spacing:.2em;
  color:#aaa
}

.boot-blackout {
  position:fixed;
  inset:0;
  z-index:4;
  background:#000;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease
}

.boot-blackout.active {
  opacity:1
}

.audio-toggle {
  position:fixed;
  right:clamp(17px, 2.4vw, 38px);
  bottom:clamp(17px, 2.4vw, 38px);
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  min-height:22px;
  padding:0 12px;
  border:1px solid rgba(255, 255, 255, .24);
  background:rgba(0, 0, 0, .34);
  color:rgba(255, 255, 255, .68);
  font:500 clamp(7px, .54vw, 10px)/1 "Courier New", monospace;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .32s ease, border-color .28s ease, color .28s ease, background .28s ease
}

.audio-toggle.visible {
  opacity:1;
  pointer-events:auto
}

.audio-toggle:hover, .audio-toggle:focus-visible {
  border-color:rgba(255, 255, 255, .72);
  color:#fff;
  background:rgba(255, 255, 255, .05);
  outline:0
}

@media(max-width:700px) {
  .start-gate, .boot-loader {
    padding-left:9%
  }

  .start-title, .boot-exe {
    font-size:13px
  }

  .start-command, .boot-command, .boot-access {
    font-size:11px
  }

  .boot-word {
    font-size:24px
  }

  .cursor {
    width:6px;
    height:13px
  }

  .audio-toggle {
    right:18px;
    bottom:16px;
    min-width:78px;
    min-height:20px;
    font-size:6px;
    letter-spacing:.18em;
    text-indent:.18em
  }

}

.start-gate, .audio-toggle {
  outline:none
}

.start-gate:focus-visible, .audio-toggle:focus-visible {
  outline:none
}