preload 힌트

<div class="atlas"><div class="head"><b>PRELOAD · discover earlier</b><span class="pulse"></span></div><div class="stage"><div class="pre-row"><b>normal</b><div class="pre-track"><span>HTML</span><span>CSS</span><i id="pre-normal">font</i></div></div><div class="pre-row"><b>preload</b><div class="pre-track"><span>HTML</span><i id="pre-early">font</i><span>CSS</span></div></div><div class="pre-caption mono" id="pre-caption">early hint moves font request left</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)}.pre-row{height:40%;display:flex;align-items:center;gap:8px}.pre-row b{width:48px;font-size:12px}.pre-track{flex:1;display:flex;align-items:center;gap:4px;border-bottom:2px solid var(--line);height:65%}.pre-track span,.pre-track i{font:500 12px var(--font-sans);font-style:normal;padding:6px 4px;border-radius:4px;background:var(--bg);border:1px solid var(--line);text-align:center;min-width:22%}.pre-track i{background:color-mix(in srgb,var(--accent) 20%,var(--bg));border-color:var(--accent);color:var(--accent);transition:transform .5s}.pre-track i.on{transform:translateY(-10px)}.pre-caption{color:var(--accent);text-align:right;font-size:12px}

let up=false;function tick(){up=!up;document.getElementById('pre-normal').classList.toggle('on',!up);document.getElementById('pre-early').classList.toggle('on',up);document.getElementById('pre-caption').textContent=up?'font request starts with HTML':'font waits for CSS discovery'}tick();setInterval(tick,2200)