google-chrome --remote-debugging-port=9222 --user-data-dir="$HOME/.config/google-chrome"

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest -u http://localhost:9222

.layout:has(:popover-open) {
  grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
  translate: 0 var(--ctrl);
  height: var(--extend);
}

#anchor {
  position: absolute;
  anchor-name: --anchor;
}

#tooltip {
  --d: 1em;   /* расстояние между якорем и тултипом */
  --s: 1.2em; /* размер хвостика */
  
  position: absolute; 
  position-anchor: --anchor;
  /* размещаем тултип сверху */
  position-area: top;
  bottom: var(--d);
  margin-top: var(--d); /* этот margin наследуется псевдоэлементом, здесь он ничего не делает */
  /* если сверху тултип не помещается — переключаемся вниз (margin перевернётся автоматически) */
  position-try-fallbacks: flip-block; 
  anchor-name: --tooltip;
}

/* хвостик тултипа */
#tooltip:before {
  content: "";
  position: fixed;
  z-index: -1;
  width: var(--s);
  background: inherit;
  /* вертикальное положение относительно тултипа */
  top:    calc(anchor(--tooltip top) - var(--d));
  bottom: calc(anchor(--tooltip bottom) - var(--d));
  /* горизонтальное положение относительно якоря */
  left: calc(anchor(--anchor center) - var(--s)/2);
  margin: inherit; /* делает магию — скрывает верх или низ формы в зависимости от положения */
  /* форма стрелки */
  clip-path: polygon(
    50% .2em,
    100% var(--d),
    100% calc(100% - var(--d)),
    50% calc(100% - .2em),
    0 calc(100% - var(--d)),
    0 var(--d)
  );
}

nav::before { position-anchor: --h; }
nav::before { left: anchor(left); }
a:hover { anchor-name: --h; }