:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #111;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.035), transparent 18rem),
    linear-gradient(135deg, #fff, #f7f5f0 48%, #fff);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.22;
  background:
    linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}

main {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 2rem;
}

.monogram {
  position: relative;
  margin: 0;
  font-size: clamp(5.5rem, 17vw, 15rem);
  font-weight: 400;
  letter-spacing: -0.12em;
  line-height: 0.82;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.25),
    0 1.4rem 4rem rgba(0, 0, 0, 0.08);
}

.dot {
  position: relative;
  display: inline-block;
  outline: none;
  cursor: crosshair;
  transform-origin: 50% 72%;
}

.dot::before {
  position: absolute;
  left: 52%;
  top: 54%;
  width: 0.34em;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(17, 17, 17, 0.24);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(17, 17, 17, 0.88) 0 0.06em, transparent 0.07em),
    radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(239, 235, 226, 0.85));
  box-shadow:
    0 0 0 0 rgba(17, 17, 17, 0),
    0 1.1rem 2.2rem rgba(17, 17, 17, 0.08);
  transform: translate(-50%, -50%) scale(0.12);
  transition:
    opacity 180ms ease,
    box-shadow 240ms ease,
    transform 240ms ease;
}

.dot::after {
  position: absolute;
  left: 72%;
  top: 11%;
  width: max-content;
  max-width: 18rem;
  content: "a name can be a locked room";
  opacity: 0;
  color: rgba(17, 17, 17, 0.62);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.66rem, 1.1vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.35;
  text-transform: uppercase;
  text-shadow: none;
  transform: translateY(0.8rem);
  transition:
    opacity 180ms ease,
    transform 220ms ease;
}

.dot:hover,
.dot:focus-visible {
  transform: rotate(-4deg);
}

.dot:hover::before,
.dot:focus-visible::before {
  opacity: 1;
  box-shadow:
    0 0 0 0.14em rgba(17, 17, 17, 0.08),
    0 0 0 0.31em rgba(17, 17, 17, 0.035),
    0 1.1rem 2.2rem rgba(17, 17, 17, 0.11);
  transform: translate(-50%, -50%) scale(1);
}

.dot:hover::after,
.dot:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.monogram::before,
.monogram::after {
  position: absolute;
  left: calc(100% - 0.08em);
  top: 59%;
  pointer-events: none;
  content: "";
  opacity: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  transition:
    opacity 220ms ease,
    transform 260ms ease;
}

.monogram::before {
  width: 0.78em;
  aspect-ratio: 1;
  border: 1px solid rgba(17, 17, 17, 0.16);
}

.monogram::after {
  width: 1.25em;
  aspect-ratio: 1;
  border: 1px dashed rgba(17, 17, 17, 0.12);
}

.monogram:has(.dot:hover)::before,
.monogram:has(.dot:focus-visible)::before,
.monogram:has(.dot:hover)::after,
.monogram:has(.dot:focus-visible)::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}