body {
  font-family: system-ui, sans-serif;
  background: radial-gradient(circle at 50% 150px, hsl(222deg 50% 25%) 5%, hsl(222deg 50% 10%));
  color: hsl(222deg 50% 95%);
  min-block-size: 100dvb;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header,
footer {
  display: flex;
  justify-content: center;
}

footer {
  margin-block: 8px;
}

main {
  inline-size: min(1080px, 100% - 16px);
  margin-inline: auto;
}

input {
  display: block;
  background: hsl(222deg 50% 95%);
  color: hsl(222deg 50% 10%);
  inline-size: 6rem;
  block-size: 4rem;
  margin-inline: auto;
  margin-block-end: 8px;
  padding: 4px 8px 10px 7px;
  border-radius: 4px;
  border: none;
  font-size: 3rem;
  text-align: center;
  transition: filter 800ms;
}

input:hover,
input:focus-within {
  filter: drop-shadow(0 0 8px hsl(222deg 50% 50%));
  transition: filter 400ms;
}

div#visualizations {
  inline-size: fit-content;
  margin-inline: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  isolation: isolate;
}

a {
  color: inherit;
  text-decoration: inherit;
}

a.icon-link {
  line-height: 0;
  background: hsl(222deg 50% 30%);
  color: hsl(222deg 50% 95%);
  padding: 12px;
  border-radius: 24px;
  transition: filter 800ms;
}

a.icon-link:hover,
a.icon-link:focus-within {
  filter: brightness(120%) drop-shadow(0 0 4px hsl(222deg 50% 50%));
  transition: filter 400ms;
}

a.icon-link>svg {
  inline-size: 24px;
  block-size: 24px;
  transition: translate 600ms;
}

:is(a.icon-link:hover, a.icon-link:focus-within)>svg {
  translate: 0 -2px;
  transition: translate 200ms;
}

a:not(.icon-link) {
  text-decoration: underline;
  font-weight: 700;
  color: hsl(222deg 80% 95% / 90%);
}

:is(a:not(.icon-link):hover, a:not(.icon-link):focus-within) {
  text-decoration: none;
}

:is(#visualizations, #count)::selection {
  color: hsl(222deg 50% 30%);
  background-color: hsl(58deg 80% 90%);
}

/* For the point binary */
.shrink {
  display: inline-block;
  inline-size: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: inline-size 600ms, margin 600ms;
}

:is(al-point-visualization:hover, al-point-visualization:focus-within) .shrink {
  transition: inline-size 200ms, margin 200ms;

  &:not(:first-child) {
    margin-inline-start: 1ch;
  }
}

/* Can't use inline-size: fit-content or inline-size: auto, must hardcode a concrete size for transition to work. */
:is(al-point-visualization:hover, al-point-visualization:focus-within) .shrink.w-2 {
  inline-size: 2ch;
}

:is(al-point-visualization:hover, al-point-visualization:focus-within) .shrink.w-3 {
  inline-size: 3ch;
}

:is(al-point-visualization:hover, al-point-visualization:focus-within) .shrink.w-4 {
  inline-size: 4ch;
}

:is(al-point-visualization:hover, al-point-visualization:focus-within) .shrink.w-5 {
  inline-size: 5ch;
}

:is(al-point-visualization:hover, al-point-visualization:focus-within) .shrink.w-6 {
  inline-size: 6ch;
}

/* For the raw UTF-8 bytes */
.insignificant {
  transition: opacity 600ms;

  &:not(:first-child) {
    margin-inline-start: 1ch;
  }
}

:is(al-point-visualization:hover, al-point-visualization:focus-within) .insignificant {
  opacity: 20%;
  transition: opacity 200ms;
}

/* These keyframes are used in the al-point-visualization template styling, but must be declared globally */
@keyframes slideIn {
  from {
    translate: 0 -100%;
  }

  to {
    translate: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#count {
  text-align: center;
  margin-block: 1ch;
  font-family: ui-monospace, monospace;
  font-size: 1rem;
}