CSS anchor positioning

<div class="v"><header>ANCHOR POSITION <span id="side">left edge</span></header><div class="stage anchorstage"><div class="rail"><button id="anchor">target</button><div class="tooltip" id="tooltip">attached tip</div></div></div><div class="muted">anchor moves → popup follows</div></div>

.v{width:min(94vw,760px);height:min(88vh,320px);padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:12px;background:var(--surface);font:500 clamp(12px,2.4vmin,16px)/1.3 var(--font-sans,system-ui,sans-serif);display:flex;flex-direction:column;gap:clamp(5px,1.4vmin,10px);overflow:hidden}.v header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--accent);font-weight:700}.v header span{color:var(--muted);font-weight:500}.v .stage{flex:1;min-height:0;position:relative}.v .muted{color:var(--muted)}.v .active{background:color-mix(in srgb,var(--accent) 18%,var(--surface));border-color:var(--accent)!important;color:var(--fg)}.v button{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 8px;cursor:pointer}.anchorstage{display:grid;place-items:center}.rail{position:relative;width:75%;height:70%;border:1px dashed var(--line);border-radius:9px}.rail button{position:absolute;left:12%;top:50%;transform:translateY(-50%);anchor-name:--target;animation:anchorMove 2.7s ease-in-out infinite alternate;background:var(--accent);color:var(--bg)}.tooltip{position:absolute;position-anchor:--target;top:anchor(top);left:anchor(left);transform:translateY(-125%);padding:6px;border:1px solid var(--accent);border-radius:6px;background:var(--surface);white-space:nowrap}.tooltip:after{content:"";position:absolute;bottom:-5px;left:35%;width:7px;height:7px;background:var(--surface);border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:rotate(45deg)}@keyframes anchorMove{to{left:65%}}@supports not (left:anchor(left)){.tooltip{left:12%;top:5%;transform:none;animation:tipMove 2.7s ease-in-out infinite alternate}}@keyframes tipMove{to{left:58%}}

let right=false;setInterval(()=>{right=!right;document.getElementById("side").textContent=right?"right edge":"left edge"},1350)