:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color-scheme:light dark}body{margin:0;background:#1c1f24;color:#e6e6e6}a{color:#6cb4ee}.container{max-width:880px;margin:2rem auto;padding:0 1rem}form.connect{display:grid;gap:.75rem;background:#262a31;padding:1.5rem;border-radius:8px}form.connect label{display:grid;gap:.25rem;font-size:.9rem}form.connect label.connect-checkbox{display:flex;align-items:center;gap:.6rem}form.connect input,form.connect select{padding:.5rem .6rem;background:#1c1f24;border:1px solid #3a3f47;color:inherit;border-radius:4px}button{padding:.5rem 1rem;background:#3a76d8;color:#fff;border:none;border-radius:4px;cursor:pointer}button.secondary{background:#3a3f47}button.danger{background:#b44a4a}button:disabled{opacity:.5;cursor:default}.toolbar{display:flex;gap:.5rem;align-items:center;padding:.5rem 1rem;background:#262a31;border-bottom:1px solid #3a3f47}.toolbar .spacer{flex:1}.viewer-layout{position:absolute;inset:48px 0 0;display:flex}.viewer-host{position:absolute;inset:0;background:#000}.viewer-layout .viewer-host{position:relative;flex:1}.capture-panel{width:min(38vw,460px);min-width:260px;border-left:1px solid #3a3f47;background:#14181d;display:flex;flex-direction:column}.capture-panel__header{display:flex;justify-content:space-between;align-items:center;padding:.7rem .9rem;border-bottom:1px solid #2d333c}.capture-panel__body{flex:1;overflow:auto;padding:.5rem .65rem .75rem}.capture-panel__placeholder{margin:.3rem 0}.capture-event{border:1px solid #2d333c;border-radius:6px;background:#11161d}.capture-event+.capture-event{margin-top:.45rem}.capture-event__summary{display:flex;align-items:center;gap:.45rem;cursor:pointer;list-style:none;padding:.45rem .55rem}.capture-event__summary::-webkit-details-marker{display:none}.capture-direction{display:inline-flex;align-items:center;justify-content:center;min-width:3.5rem;padding:.1rem .35rem;border-radius:999px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.capture-direction--in{color:#9ed3ff;background:#3f7cab33}.capture-direction--out{color:#f7c7a0;background:#b8783833}.capture-direction--unknown{color:#bac4cf;background:#606a7538}.capture-event__type{font-size:.74rem;color:#dbe7f4;font-weight:600}.capture-event__time{margin-left:auto;font-size:.68rem}.capture-json{margin:0;padding:0 .55rem .55rem;white-space:pre-wrap;word-break:break-word;font-size:.72rem;color:#c6d4df;line-height:1.35}@media (max-width: 1100px){.viewer-layout{flex-direction:column}.capture-panel{width:100%;min-width:0;max-height:38vh;border-left:0;border-top:1px solid #3a3f47}}.viewer-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#1c1f24eb;z-index:10}.viewer-overlay--standalone{position:fixed}.viewer-overlay__panel{display:flex;flex-direction:column;align-items:center;gap:.75rem;max-width:420px;text-align:center;padding:2rem}.viewer-overlay__panel h2{margin:0;font-size:1.1rem;font-weight:600}.viewer-overlay__panel p{margin:0;font-size:.9rem;line-height:1.4}.spinner{width:36px;height:36px;border-radius:50%;border:3px solid #3a3f47;border-top-color:#6cb4ee;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}table{width:100%;border-collapse:collapse}table th,table td{padding:.5rem;border-bottom:1px solid #3a3f47;text-align:left;font-size:.9rem}.error{background:#5a1f1f;border:1px solid #b44a4a;padding:.5rem .75rem;border-radius:4px}.muted{color:#9aa0a8}