body { margin:0; } main { max-width:1440px; margin:auto; padding:32px; } header { margin-bottom:24px; } a { color:var(--wui-active); } h1 { font-size:clamp(28px,4vw,48px); letter-spacing:-.045em; margin:8px 0; font-weight:500; } .intro { color:var(--wui-muted); max-width:660px; font-size:17px; } .toolbar,.section-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .section-title { justify-content:space-between; margin:20px 0 12px; } .workspace > div { min-width:0; } .workspace { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; margin-top:24px; } aside { border-left:1px solid var(--wui-line); padding-left:24px; } aside label { display:flex; flex-direction:column; gap:4px; margin-top:12px; font-size:12px; min-width:0; } .pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; } .metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0; } #diagram svg { display:block; width:100%; min-width:780px; min-height:240px; } #diagram { overflow:auto; border:1px solid var(--wui-line); border-radius:4px; } .diagram-node { fill:var(--wui-paper); stroke:var(--wui-line); } .diagram-node[data-active=true] { stroke:var(--wui-active); } .diagram-label { fill:var(--wui-ink); font:12px var(--wui-mono); } .diagram-detail { fill:var(--wui-muted); font:10px var(--wui-mono); } .diagram-link { stroke:var(--wui-line); fill:none; } .cluster { fill:var(--wui-active-bg); stroke:var(--wui-line); stroke-dasharray:3 4; } .requests { display:flex; flex-wrap:wrap; gap:8px; } #history { font:12px/1.8 var(--wui-mono); padding-left:24px; } #history li { padding:4px 0; border-bottom:1px solid var(--wui-line); } #inspector { position:relative; margin:16px 0; } footer { margin-top:40px; border-top:1px solid var(--wui-line); padding-top:16px; } table { border-collapse:collapse; width:100%; font-size:12px; } td,th { text-align:right; border-bottom:1px solid var(--wui-line); padding:8px; } td:first-child,th:first-child { text-align:left; } #editor-status[data-error=true] { color:var(--wui-danger); } @media(max-width:760px) { main { padding:16px; } .workspace { grid-template-columns:minmax(0,1fr); gap:16px; } aside { border-left:0; border-top:1px solid var(--wui-line); padding:16px 0 0; } .metrics { gap:8px; } }