:root {
  --bg1: #000;
  --bg2: #0a0a0a;
  --text: #d0d0d0;
  --accent: #00fff7;
  --focus: #fff;
  --radius: 12px;
  --fs-base: clamp(15px, 1.15vw, 17px);
  --fs-h1: clamp(28px, 4vw, 36px);
  --header-footer-allowance: 160px
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font: 400 var(--fs-base)/1.55 "Courier New", Courier, monospace;
  color: var(--text);
  background: radial-gradient(circle at center, var(--bg1) 0%, var(--bg2) 100%);
  -webkit-tap-highlight-color: transparent
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #000;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700
}

.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 1000
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  text-align: center;
  padding: 1rem 1rem .75rem;
  border-bottom: 1px solid var(--accent);
  background: #000;
  backdrop-filter: blur(3px)
}

.brand {
  margin: 0;
  font-size: var(--fs-h1);
  letter-spacing: .5px;
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent), 0 0 30px var(--accent)
}

.brand span {
  color: var(--accent)
}

.site-nav ul {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: inline-flex;
  gap: 1rem;
  align-items: center
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 24px;
  transition: color .25s ease, box-shadow .25s ease
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent);
  box-shadow: 0 0 12px rgba(0, 255, 247, .35)
}

.tooltip {
  position: absolute;
  bottom: -1.9em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #000;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease
}

.site-nav a:hover .tooltip,
.site-nav a:focus-visible .tooltip {
  opacity: 1
}

@media(hover:none) {
  .tooltip {
    display: none
  }
}

.stage {
  position: relative;
  flex: 1;
  min-height: calc(100vh - var(--header-footer-allowance));
  padding: 1rem 1rem 2rem
}

.card {
  width: min(92vw, 720px);
  margin-inline: auto;
  background: rgba(0, 0, 0, .72);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 0 25px #00fff744;
  backdrop-filter: blur(8px);
  padding: 2rem;
  text-align: center;
  isolation: isolate
}

button {
  margin-top: 1rem;
  padding: 12px 22px;
  font-size: 1rem;
  color: #000;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 15px var(--accent);
  transition: transform .2s, background .2s
}

button:hover {
  background: #00e6dd;
  transform: translateY(-1px)
}

button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px
}

.info {
  margin-top: 1rem;
  width: 100%;
  background: rgba(15, 15, 15, .7);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 1rem;
  text-align: left;
  color: #a8ffff;
  box-shadow: inset 0 0 10px #00fff722;
  overflow-wrap: anywhere
}

.info p {
  margin: 6px 0
}

#particles-back,
#particles-front {
  position: fixed;
  inset: 0;
  pointer-events: none;
  will-change: transform
}

#particles-back {
  z-index: -2;
  background: #000
}

#particles-front {
  z-index: -1;
  mix-blend-mode: screen;
  opacity: .6
}

.site-footer {
  margin-top: auto;
  text-align: center;
  padding: 1.5rem;
  border-top: 1px solid var(--accent);
  background: #000;
  position: relative;
  z-index: 10
}

.site-footer a {
  color: var(--accent);
  text-decoration: none
}

.site-footer a:hover {
  text-decoration: underline
}

@media(max-width:600px) {
  .site-header {
    padding: .9rem .9rem .6rem
  }

  .card {
    padding: 1.5rem
  }
}