<div>
  <button class="open anchor" autofocus><span>⚓︎</span></button>

  <article class="anchor-positioned">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure earum, exercitationem quasi mollitia natus sequi voluptas, placeat animi quisquam fuga quae. Maiores molestias totam magni dolor veniam. Quis, veniam eius? Maiores molestias totam magni dolor veniam. Quis, veniam eius?Maiores molestias totam magni dolor veniam. Quis, veniam eius?
  </article>
</div>

@layer base, demo;

@layer demo {
  .anchor {
    anchor-name: --myAnchor;
  }
  .anchor-positioned {
    position: fixed;
    position-anchor: --myAnchor;
    inset-area: right;
    max-width: 300px;
    max-height: calc(anchor-size(block) * 2);
    overflow: auto;
  }
}

@layer base {
  body {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto,
      Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    background: hsl(0 0% 6%);
    gap: 2rem;
  }

  body::before {
    --line: hsl(0 0% 95% / 0.35);
    content: "";
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin)
        0 -5vmin / 10vmin 10vmin,
      linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin
        10vmin;
    mask: radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 70%
    );
    top: 0;
    z-index: -1;
  }

  *:not(dialog) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .open {
    width: 62px;
    height: 62px;
    cursor: pointer;
    border: 1px solid #15181a;
    background: #33393e;
    border-radius: 100%;
    background: no-repeat center center,
      -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3c4349), color-stop(100%, #252a2d));
    box-shadow: 0px -3px 2px 0px #212428 inset, 0px 2px 2px #535d65 inset,
      0px 2px 2px -1px #050606, 0px 7px 4px -1px #1a1d1f;
    &:hover {
      background: #33393e;
      background: no-repeat center center,
        -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #252a2d), color-stop(100%, #3c4349));
      box-shadow: 0px -3px 2px 0px #212428 inset, 0px 2px 2px #535d65 inset,
        0px 2px 2px -1px #050606, 0px 7px 4px -1px #1a1d1f;
      & span {
        background-image: -webkit-linear-gradient(
          90deg,
          rgba(255, 145, 0, 1) 0%,
          rgba(255, 214, 1, 1) 100%
        );
      }
    }
    &:focus {
      outline: 3px solid cyan;
    }
    & span {
      font-size: 2rem;
      color: transparent;
      background: white;
      background-size: cover;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(2px 2px 5px #000);
    }
  }

  .anchor-positioned {
    background-color: white;
    padding: 1rem;
    border-radius: 15px;
  }
}