* {
  box-sizing: border-box;
}

[popovertarget] {
  anchor-name: --⚓︎-button;
}

[popover] {
  position-anchor: --⚓︎-button;
  position: fixed;
  margin: unset;
  
  width: 70dvi;
  height: 300px;
  
  transition: 
    display 1s allow-discrete,
    top 1s ease,
    left 1s ease,
    height 1s ease,
    width 1s ease;
  
  /* STATE: Open State */
  top: 200px;
  left: 2rem;
  
  /* STATE: Closed State (the way out) */
  &:not(:popover-open) {
    position-anchor: --⚓︎-target;
    
    top: anchor(top);
    left: anchor(left);
    width: anchor-size(width);
    height: anchor-size(height);
  }

  /* STATE: Before-Open State */
  @starting-style {
    &:popover-open {
      top: anchor(top);
      left: anchor(left);
      width: anchor-size(width);
      height: anchor-size(height);
    }
  }
}

.target {
  anchor-name: --⚓︎-target;
  position: absolute;
  bottom: 10px;
  right: 10px;

  svg {
    fill: #666;
    width: 60px;
  }
}

button {
  border: 0;
  background: none;
  padding: 0;

  svg {
    width: 100px;
    height: 87px;
    display: block;
    fill: oklch(76% 28% 230deg);
  }

  &:hover {
    svg {
      fill: oklch(70% 28% 230deg);
      stroke: oklch(100% 0 0 / 0.33);
    }
  }
}

body {
  height: 100dvh;
  margin: 0;
  padding: 2rem;
  background-image: url('https://images.unsplash.com/photo-1536514498073-50e69d39c6cf?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NzI3NDE5NTB8&ixlib=rb-4.1.0&q=85');
  background-size: cover;
}