<div class="demo"><div class="title">CONFIG FILE → SIGNALS</div><div class="scene"><div class="config-file" id="config-file">config-a.yaml<br>traces: on<br>metrics: off</div><div class="config-arrow">→</div><div class="config-signals"><span id="signal-trace">traces</span><span id="signal-metric">metrics</span></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{gap:7px}.config-file{width:45%;box-sizing:border-box;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);font:600 clamp(12px,2.4vmin,15px)/1.3 ui-monospace,monospace;white-space:nowrap}.config-arrow{color:var(--accent);font-size:22px}.config-signals{flex:1;display:grid;gap:8px}.config-signals span{padding:8px 3px;border:1px solid var(--line);border-radius:6px;text-align:center;color:var(--muted);transition:background .3s,border-color .3s,color .3s}.config-signals span.on{border-color:var(--accent);color:var(--fg);background:color-mix(in srgb,var(--accent) 15%,var(--surface))}
let a=true;function draw(){document.getElementById("config-file").innerHTML=(a?"config-a.yaml<br>traces: on<br>metrics: off":"config-b.yaml<br>traces: on<br>metrics: on");document.getElementById("signal-trace").classList.add("on");document.getElementById("signal-metric").classList.toggle("on",!a);a=!a}draw();setInterval(draw,1250)
