Contract testing

<div class="stage"><div class="title">CONTRACT TEST</div><div class="canvas"><div class="contract"><div class="box"><b>CONSUMER</b><span>id: number</span><span>name: text</span></div><div class="join" id="join">⇄</div><div class="box"><b>PROVIDER</b><span>id: 42</span><span id="field">name: Ada</span></div></div><div id="status" class="status">fields match</div></div></div>

.stage{width:min(94vw,820px);height:min(88vh,330px);box-sizing:border-box;padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(12px,2.5vmin,16px)/1.28 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:var(--fg);overflow:hidden}.title{color:var(--accent);letter-spacing:.035em;flex:none}.canvas{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,monospace}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.4vmin,12px);text-align:center}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.canvas{flex-direction:column;gap:clamp(9px,3vmin,18px)}.contract{display:flex;align-items:center;gap:clamp(4px,3vmin,25px);width:100%;justify-content:center}.contract .box{display:flex;flex-direction:column;gap:5px;width:37%;max-width:220px;text-align:left}.contract b{color:var(--accent);font-size:1em}.contract span{font-family:ui-monospace,monospace}.join{font-size:1.8em;color:var(--accent)}.status{color:var(--accent)}.missing{opacity:.2;text-decoration:line-through}

let match=true;function compare(){match=!match;document.getElementById('field').classList.toggle('missing',!match);document.getElementById('status').textContent=match?'fields match':'missing: name';document.getElementById('join').textContent=match?'⇄':'×'}compare();setInterval(compare,1500)