*{box-sizing:border-box}:root{--bg: #f1f5f9;--panel: #ffffff;--border: #e2e8f0;--text: #0f172a;--muted: #64748b;--accent: #2563eb}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg)}.app{display:flex;flex-direction:column;height:100%}.header{display:flex;align-items:center;gap:24px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--border)}.header h1{font-size:16px;margin:0;white-space:nowrap}.toolbar{display:flex;align-items:center;gap:8px}.toolbar .sep{width:1px;height:22px;background:var(--border);margin:0 4px}.lamport-view{display:flex;flex-direction:column;gap:12px;align-items:flex-start}button{font:inherit;font-size:13px;padding:5px 10px;border:1px solid var(--border);border-radius:6px;background:#fff;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}button:disabled{opacity:.45;cursor:default}button.danger:hover:not(:disabled){border-color:#dc2626;color:#dc2626}.main{display:flex;flex:1;min-height:0}.canvas-wrap{flex:1;overflow:auto;padding:20px}.sidebar{width:340px;flex-shrink:0;border-left:1px solid var(--border);background:var(--bg);overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:14px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px 14px}.panel h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.panel h3:not(:first-child){margin-top:16px}.panel label{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}.panel input,.panel select,.panel textarea{display:block;width:100%;margin-top:4px;font:inherit;font-size:13px;color:var(--text);padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:#fff}.panel .row{display:flex;gap:8px;margin-bottom:10px}.panel .row button{flex:1}.panel .row.heading{align-items:center;justify-content:space-between;margin-top:16px;margin-bottom:10px}.panel .row.heading h3{margin:0;line-height:1.4}.panel .row.heading .preset-select{display:inline-block;width:auto;margin:0;font-size:11px;line-height:1.4;padding:1px 6px}.hint,.meta{font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 8px}.meta strong{color:var(--accent)}.nl-form{display:flex;gap:8px}.nl-form input{flex:1}.examples{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.chip{font-size:11px;padding:3px 8px;color:var(--muted);background:var(--bg)}textarea.json{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.4;white-space:pre;resize:vertical}.error{padding:8px 18px;background:#fef2f2;color:#b91c1c;border-bottom:1px solid #fecaca;font-size:13px;cursor:pointer}.error .dismiss{opacity:.6}.canvas{background:#fff;border:1px solid var(--border);border-radius:8px;-webkit-user-select:none;user-select:none}.process-line{stroke:#cbd5e1;stroke-width:2}.process-line.selected{stroke:var(--accent)}.process-label{font-size:14px;font-weight:600;fill:var(--text)}.message{stroke:#334155;stroke-width:2}.message.selected{stroke:var(--accent)}.message.pending{stroke:var(--accent);stroke-dasharray:5 4}.message-label{font-size:11px;fill:var(--muted)}.event{stroke:#fff;stroke-width:2}.event.selected{stroke:var(--accent);stroke-width:3}.event.hover-target{stroke:#f59e0b;stroke-width:3}.clock{font-size:11px;font-weight:700;fill:var(--muted)}.event-label{font-size:11px;fill:var(--text)}.view-toggle{display:flex;gap:0}.view-toggle button{border-radius:0}.view-toggle button:first-child{border-radius:6px 0 0 6px}.view-toggle button:last-child{border-radius:0 6px 6px 0;margin-left:-1px}.view-toggle button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.csd-view{display:flex;flex-direction:column;gap:12px;align-items:flex-start}.csd-cut{stroke:#bfdbfe;stroke-width:1.5}.csd-step-hit{fill:transparent;cursor:pointer}.csd-step-hit:hover{fill:#2563eb0f}.csd-step-sel{fill:#2563eb1f;stroke:#2563eb;stroke-width:1;stroke-dasharray:3 3}.csd-cell-hit,.csd-col-hit,.csd-row-hit{fill:transparent;cursor:default}.csd-col-hit.active{fill:#2563eb1a}.csd-col-num{font-size:10px;font-weight:700;fill:#8b97c4;pointer-events:none}.csd-hl-band{fill:#2563eb17;pointer-events:none}.csd-flow.active{stroke:#2563eb;stroke-width:3.5}.csd-tick.active{fill:#2563eb}.csd-toolbar{display:flex;align-items:center;gap:8px}.csd-toolbar .spacer{flex:1}.csd-presets{display:flex;flex-direction:column;gap:8px}.csd-presets-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.csd-presets-label{font-size:13px;font-weight:600;color:var(--muted)}.csd-presets-row button{font-size:12px;padding:4px 10px}.csd-presets-row .hint{margin:0}.csd-playback{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px;background:var(--panel);border:1px solid var(--border);border-radius:8px}.csd-playback .spacer{flex:1}.csd-playback button{font-size:12px;padding:4px 10px}.csd-playback button.primary{background:#2563eb;color:#fff;border-color:#2563eb}.csd-playback input[type=range]{flex:1;min-width:120px}.csd-frame-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.csd-metrics{display:flex;gap:12px;font-size:12px;font-variant-numeric:tabular-nums}.csd-metrics .metric-same{color:var(--muted)}.csd-metrics .metric-better{color:#16a34a;font-weight:600}.csd-metrics .metric-worse{color:#dc2626;font-weight:600}.csd-edits{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:28px}.csd-edits .hint{margin:0}.csd-edits button{font-size:12px;padding:4px 10px}.csd-flow{fill:none;stroke:#334155;stroke-width:2}.csd-tick{fill:#475569;stroke:#fff;stroke-width:1.5}.csd-tick-handle{fill:transparent;cursor:grab}.csd-tick-handle:active{cursor:grabbing}.csd-tick.dragging{fill:#2563eb;pointer-events:none}.csd-step-target{fill:#2563eb1f;stroke:#2563eb;stroke-width:1}.csd-tick-label{font-size:11px;font-weight:700;fill:var(--muted)}.csd-site-label{font-size:13px;font-weight:600;fill:var(--text)}.csd-site-label.msg{font-weight:500;fill:#2563eb}.csd-site-label.active{fill:#2563eb;font-weight:700}.csd-clock-label{font-size:11px;font-weight:700;fill:var(--muted)}.csd-term{font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:8px 12px;max-width:100%}.csd-term summary{cursor:pointer;-webkit-user-select:none;user-select:none}.csd-term pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--text);margin:10px 0 0}.csd-term-label{font-weight:600;color:var(--text)}.csd-term-head{color:var(--muted)}.csd-term-token{border-radius:3px;padding:0 1px}.csd-term-token.active{background:#2563eb2e;color:var(--text)}.csd-term .row{display:flex;gap:8px;margin-top:10px}.about-button{margin-left:auto}.modal-backdrop{position:fixed;inset:0;background:#0f172a73;display:flex;align-items:center;justify-content:center;padding:24px;z-index:100}.modal{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:24px 28px;max-width:560px;width:100%;max-height:calc(100vh - 48px);overflow-y:auto;box-shadow:0 10px 40px #0f172a33}.modal-close{position:absolute;top:14px;right:14px;padding:4px 8px;line-height:1;color:var(--muted)}.modal h2{margin:0 0 12px;font-size:18px;padding-right:28px}.modal h3{margin:20px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.modal p{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--text)}.modal ul{margin:0 0 12px;padding-left:20px}.modal li{font-size:14px;line-height:1.6;color:var(--text);margin-bottom:6px}