:root {
  color-scheme: light;
  font: 100%/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #24272b;
  background: #fafafa;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
[hidden] { display: none !important; }

.entry {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
}
.stage {
  position: relative;
  width: min(100%, 30rem);
  width: min(100%, 30rem, 115svh);
  aspect-ratio: 6 / 5;
  display: grid;
  place-items: center;
  isolation: isolate;
}
#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: #889096;
  pointer-events: none;
}
.proximity {
  display: grid;
  place-items: center;
  width: 60%;
  aspect-ratio: 1;
}
#name-form {
  width: 84%;
  margin: 0;
  border: 1px solid #d3d7da;
  border-radius: 1.4rem;
  background: #fafafa;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease-out;
}
.stage[data-open] #name-form {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 200ms 85ms ease-out;
}
#name-form:focus-within { border-color: #90999f; }
#name-form:has([aria-invalid="true"]) { border-color: #b1908b; }
.input-row { position: relative; display: flex; align-items: center; min-height: 2.75rem; }
#name {
  width: 100%;
  min-width: 0;
  padding: .55rem .95rem;
  border: 0;
  outline: none;
  border-radius: inherit;
  background: transparent;
  color: #252a2e;
  font-size: 1rem;
  text-align: center;
}
#name::placeholder { color: #747b80; opacity: 1; }
#name:not(:placeholder-shown) { padding-inline: 2.75rem; }
#enter {
  position: absolute;
  inset: 0 0 0 auto;
  width: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #546169;
  cursor: pointer;
}
#enter svg { width: 1.05rem; height: 1.05rem; }
#enter:focus-visible { outline: 2px solid #697882; outline-offset: -4px; }
#enter:disabled { opacity: .5; cursor: progress; }
#feedback { text-align: center; color: #905b55; font-size: .78rem; }
#feedback:not(:empty) { padding: 0 .65rem .55rem; }
@media (prefers-reduced-motion: reduce) {
  #name-form, .stage[data-open] #name-form { transition: none; }
}