:root {

  --bg-top: #3d444d;
  --bg-bottom: #202429;
  --card: rgba(255,255,255,.08);
  --text: #ffffff;
  --muted: rgba(255,255,255,.65);

}

* {
  box-sizing: border-box;
}

html,
body {

  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;

  font-family: system-ui;
  color: var(--text);

}

body {

  display: flex;
  flex-direction: column;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255,255,255,.12),
      transparent 35%
    ),

    radial-gradient(
      circle at 80% 30%,
      rgba(255,255,255,.08),
      transparent 40%
    ),

    linear-gradient(
      180deg,
      var(--bg-top),
      var(--bg-bottom)
    );

  overflow: hidden;

}

body::before {

  content: "";

  position: fixed;
  inset: 0;

  background:

    radial-gradient(
      circle at 30% 40%,
      rgba(255,255,255,.08),
      transparent 30%
    ),

    radial-gradient(
      circle at 70% 20%,
      rgba(255,255,255,.06),
      transparent 35%
    );

  filter: blur(90px);

  pointer-events: none;

}

@keyframes lightning {

  0%,95%,100% {
    opacity:0;
  }

  96% {
    opacity:.2;
  }

  97% {
    opacity:0;
  }

  98% {
    opacity:.15;
  }

}

body::after {

  content:"";

  position:fixed;
  inset:0;

  background:white;

  opacity:0;

  animation:lightning 21s infinite;

  pointer-events:none;

}

.status-bar {

  height: 56px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  text-align:center;

  font-size:.9rem;

  color:var(--muted);

  flex-shrink:0;

}

.block-row {

  display:flex;
  justify-content:center;
  align-items:center;
  gap:.4rem;

  cursor:pointer;

}

main {

  flex:1;

  display:flex;
  justify-content:center;
  align-items:center;

  padding:20px;

}

.card {

  width:min(84vw, 420px);

  padding:45px;

  border-radius:28px;

  background:var(--card);

  backdrop-filter:blur(30px);

  border:1px solid rgba(255,255,255,.12);

}

.row {

  display:flex;

  align-items:center;

  gap:21px;

  margin:21px 0;

}

.label {

  width:72px;

 font-size: clamp(
    2.1rem,
    6vw,
    3.21rem
  );

  font-weight: 600;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color:var(--muted);

}

.input {

  flex:1;

  min-width:0;

  border:none;

  background:none;

  outline:none;

  color:white;

  text-align:center;

  font-size: clamp(
    1.8rem,
    4.5vw,
    2.4rem
  );

  font-weight: 500;

}

.input::placeholder {
  color:rgba(255,255,255,.3);
}

#sat::placeholder {
  font-size: 0.48em;
}

footer {

  text-align:center;

  color:rgba(255,255,255,.36);
  font-size:.84rem;

  margin-bottom:20px;

}

a:hover {
    color: rgba(255,255,255,.69);
    font-weight:600;
    opacity:.9;
    transition:.1s;
}

a {
    color: rgba(255,255,255,.6);
    text-decoration:none;
}