:root {
  color-scheme: light dark;
  --bg: light-dark(hsl(0 0 100%), hsl(0 0 0));
  --fg: light-dark(hsl(0 0 0), hsl(0 0 100%));
  --bd: light-dark(whitesmoke, hsl(0, 0%, 0%));
  --alt: #ffef9b;
  --bounce: cubic-bezier(0.2, 0.01, 0.17, 1);
}

body {
  background: var(--bg);
  margin: 0;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  padding: 1rem;
  box-sizing: border-box;
}

body:has(input[value^="t"]:checked) {
  align-items: start;
}

body:has(input[value^="c"]:checked) {
  align-items: center;
}

body:has(input[value^="b"]:checked) {
  align-items: end;
}

body:has(input[value$="l"]:checked) {
  justify-content: start;
}

body:has(input[value$="c"]:checked) {
  justify-content: center;
}

body:has(input[value$="r"]:checked) {
  justify-content: end;
}

nav {
  position: fixed;
  top: 33.33%;
  left: 33.33%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(3, 1.1rem);
  grid-template-rows: repeat(3, 1.1rem);
  gap: 0.5rem;
}

button {
  width: 3rem;
  height: 3rem;
  border-radius: 4px;
  border: none;
  background: var(--fg);
  color: var(--bg);
  font-size: 2.5rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1),
    0 1px 1px rgba(0, 0, 0, 0.2), inset 0 2px 0 0 rgba(255, 255, 255, 0.3);
  transition: transform 500ms var(--bounce);
  cursor: pointer;
  anchor-name: --popover;
}

button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 2px var(--bg),
    0 0 0 4px var(--fg);
}

button:hover {
  transform: scale(1.1);
}

input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  background: var(--bg);
  border: 1px solid var(--bd);
  accent-color: var(--fg);
  border-radius: 50%;
}

input[type="radio"]:focus-visible {
  outline-color: var(--fg);
  outline-offset: 2px;
}

.popover {
  background: var(--fg);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  padding: 1rem;
  white-space: nowrap;

  position: absolute;
  position-anchor: --popover;
  position-try-fallbacks: --bottom-center, --top-center;
  margin: 1rem;
  inset: auto;
  top: anchor(bottom);
  justify-self: anchor-center;
  opacity: 0;
  transform: translateY(10px);

  transition: display 400ms, opacity 300ms ease-in-out,
    transform 400ms var(--bounce);
  transition-behavior: allow-discrete;
}

.popover:popover-open {
  opacity: 1;
  transform: translateY(0);
  display: grid;

  @starting-style {
    opacity: 0;
    transform: translateY(10px);
  }
}

@position-try --bottom-center {
  inset: unset;
  top: anchor(bottom);
  justify-self: anchor-center;
}

@position-try --top-center {
  inset: unset;
  bottom: anchor(top);
  justify-self: anchor-center;
}
HTML/CSS-only Popover
