Exemplars

<div class="demo"><div class="title">OUTLIER → TRACE</div><div class="scene"><div class="ex-chart"><span></span><span></span><span class="spike"></span><span></span><span></span></div><div class="ex-trace">trace 7f3a · 840 ms</div></div></div>

.demo{width:min(94vw,690px);height:min(88vh,320px);box-sizing:border-box;padding:clamp(9px,2.5vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);font:600 clamp(12px,2.4vmin,16px)/1.25 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);overflow:hidden}.title{color:var(--accent);font:700 clamp(12px,2.4vmin,16px)/1.2 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);letter-spacing:.04em}.scene{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.scene{flex-direction:column;gap:8px}.ex-chart{width:90%;height:58%;display:flex;align-items:flex-end;justify-content:space-around;border-bottom:1px solid var(--line)}.ex-chart span{width:12%;height:28%;border-radius:4px 4px 0 0;background:var(--accent);opacity:.7}.ex-chart span:nth-child(2){height:41%}.ex-chart span:nth-child(4){height:36%}.ex-chart span:nth-child(5){height:25%}.ex-chart .spike{height:86%;background:var(--accent-3);opacity:1;animation:select 2s infinite}.ex-trace{border:1px solid var(--accent-3);border-radius:5px;padding:6px 10px;background:color-mix(in srgb,var(--accent-3) 12%,var(--surface));font:600 clamp(12px,2.4vmin,15px)/1.1 ui-monospace,monospace;animation:reveal 2s infinite}@keyframes select{0%,15%,100%{box-shadow:none}35%,85%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-3) 20%,transparent)}}@keyframes reveal{0%,20%,100%{opacity:.4;transform:translateY(-3px)}40%,85%{opacity:1;transform:translateY(0)}}