Speculation Rules 사전 가져오기

<div class="atlas"><div class="head"><b>SPECULATION RULES · prefetch</b><span class="pulse"></span></div><div class="stage"><div class="sp-link box" id="sp-link">Read next page <i id="sp-cursor">↖</i></div><div class="sp-flow"><span>hover</span><i id="sp-request"></i><span>prefetch</span><i id="sp-click"></i><span>click</span></div><div class="sp-note mono" id="sp-note">link available</div></div></div>

.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.sp-link{height:43%;position:relative;display:grid;place-items:center;color:var(--accent);font-weight:700}.sp-link i{position:absolute;right:10%;bottom:0;font-size:22px;font-style:normal;animation:spMove 3s infinite}@keyframes spMove{50%{transform:translate(-28px,-14px)}}.sp-link.on{background:color-mix(in srgb,var(--accent) 17%,var(--bg))}.sp-flow{display:flex;align-items:center;gap:4px;margin-top:14px;font-size:12px}.sp-flow span{flex:0 0 auto}.sp-flow i{flex:1;height:9px;border-radius:5px;background:var(--line);transition:background .3s}.sp-flow i.on{background:var(--accent)}.sp-note{text-align:right;margin-top:8px;color:var(--accent);font-size:12px}

let phase=0;function tick(){document.getElementById('sp-link').classList.toggle('on',phase>=1);document.getElementById('sp-request').classList.toggle('on',phase>=1);document.getElementById('sp-click').classList.toggle('on',phase>=2);document.getElementById('sp-note').textContent=['link available','document prefetched','click uses prepared document'][phase];phase=(phase+1)%3}tick();setInterval(tick,700)