:root{--text:#94a3b8;--text-h:#e2e8f0;--text-dim:#64748b;--bg:#0c0e14;--bg-raised:#10131a;--surface:#151820;--surface-hover:#1c1f2a;--border:#1e2230;--border-strong:#2a2e3e;--accent:#818cf8;--accent-dim:#818cf81f;--accent-strong:#6366f1;--ev-click:#34d399;--ev-press:#fbbf24;--ev-move:#64748b;--ev-hover:#38bdf8;--ev-ctx:#f87171;--ev-wheel:#c084fc;--ev-touch:#fb923c;--mono:ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;--sans:system-ui, -apple-system, "Segoe UI", sans-serif;--radius:10px;--radius-sm:6px;font:14px/1.5 var(--sans);color:var(--text);background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:light){:root{--text:#475569;--text-h:#0f172a;--text-dim:#94a3b8;--bg:#f1f5f9;--bg-raised:#f8fafc;--surface:#fff;--surface-hover:#f8fafc;--border:#e2e8f0;--border-strong:#cbd5e1;--accent:#6366f1;--accent-dim:#6366f114;--accent-strong:#4f46e5;--ev-click:#16a34a;--ev-press:#d97706;--ev-move:#94a3b8;--ev-hover:#0284c7;--ev-ctx:#dc2626;--ev-wheel:#9333ea;--ev-touch:#ea580c;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{margin:0}#app{flex-direction:column;height:100svh;display:flex;overflow:hidden}.header{border-bottom:1px solid var(--border);background:var(--bg-raised);flex-shrink:0;align-items:center;gap:12px;padding:10px 16px;display:flex}.header-title{font-family:var(--sans);color:var(--text-h);letter-spacing:-.2px;white-space:nowrap;font-size:14px;font-weight:600}.header-title svg{vertical-align:-2px;opacity:.5;margin-right:6px;display:inline-block}.header-sep{background:var(--border);flex-shrink:0;width:1px;height:16px}.event-count{font-family:var(--mono);color:var(--text-dim);white-space:nowrap;font-size:12px}.header-spacer{flex:1}.filters{flex-shrink:0;align-items:center;gap:4px;display:flex}.filter-pill{font-family:var(--mono);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;background:0 0;border-radius:4px;padding:2px 8px;font-size:11px;transition:all .15s}.filter-pill:hover{border-color:var(--border-strong);color:var(--text)}.filter-pill.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.filter-pill .pill-dot{vertical-align:1px;border-radius:50%;width:6px;height:6px;margin-right:4px;display:inline-block}.btn{font-family:var(--sans);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;padding:4px 12px;font-size:12px;font-weight:500;transition:all .15s}.btn:hover{border-color:var(--border-strong);color:var(--text-h);background:var(--surface-hover)}.btn:active{transform:scale(.97)}.btn-danger:hover{border-color:var(--ev-ctx);color:var(--ev-ctx)}.layout{flex:1;min-height:0;display:flex}.playground-wrap{border-right:1px solid var(--border);flex-direction:column;flex:0 0 380px;display:flex}.playground-label{text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);border-bottom:1px solid var(--border);background:var(--bg-raised);padding:8px 12px;font-size:11px;font-weight:500}#playground{background:var(--surface);cursor:crosshair;-webkit-user-select:none;user-select:none;flex:1;min-height:0;position:relative;overflow:hidden}#playground:before{content:"";background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);pointer-events:none;background-size:24px 24px;position:absolute;inset:0}.crosshair-h,.crosshair-v{pointer-events:none;opacity:.4;position:absolute}.crosshair-h{background:var(--accent);height:1px;top:-10px;left:0;right:0}.crosshair-v{background:var(--accent);width:1px;top:0;bottom:0;left:-10px}.coords{font-family:var(--mono);color:var(--accent);pointer-events:none;white-space:nowrap;background:var(--surface);border:1px solid var(--border);opacity:0;border-radius:4px;padding:2px 6px;font-size:11px;transition:opacity .1s;position:absolute}.coords.visible{opacity:1}.playground-hint{pointer-events:none;color:var(--text-dim);opacity:1;justify-content:center;align-items:center;font-size:13px;transition:opacity .2s;display:flex;position:absolute;inset:0}.playground-hint.hidden{opacity:0}.playground-hint svg{opacity:.4;margin-right:6px}.table-wrap{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.table-scroll{flex:1;overflow:auto}table{border-collapse:collapse;width:max-content;min-width:100%;font-family:var(--mono);font-size:12px;line-height:1.5}thead{z-index:2;position:sticky;top:0}th{background:var(--bg-raised);text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;padding:6px 10px;font-size:10px;font-weight:600;position:relative}td{border-bottom:1px solid var(--border);white-space:nowrap;color:var(--text);padding:3px 10px}.col-id{color:var(--text-dim);text-align:right;width:40px;padding-right:12px}.col-type{font-weight:600}.ev-click .col-type{color:var(--ev-click)}.ev-press .col-type{color:var(--ev-press)}.ev-move .col-type{color:var(--ev-move)}.ev-hover .col-type{color:var(--ev-hover)}.ev-ctx .col-type{color:var(--ev-ctx)}.ev-wheel .col-type{color:var(--ev-wheel)}.ev-touch .col-type{color:var(--ev-touch)}@keyframes row-enter{0%{background:var(--accent-dim)}to{background:0 0}}tbody tr{animation:.6s ease-out row-enter}tbody tr:hover{background:var(--accent-dim)}.ev-click{box-shadow:inset 3px 0 0 var(--ev-click)}.ev-press{box-shadow:inset 3px 0 0 var(--ev-press)}.ev-move{box-shadow:inset 3px 0 #0000}.ev-hover{box-shadow:inset 3px 0 0 var(--ev-hover)}.ev-ctx{box-shadow:inset 3px 0 0 var(--ev-ctx)}.ev-wheel{box-shadow:inset 3px 0 0 var(--ev-wheel)}.ev-touch{box-shadow:inset 3px 0 0 var(--ev-touch)}tr.filtered-out{display:none}.empty-state{color:var(--text-dim);text-align:center;flex:1;justify-content:center;align-items:center;padding:40px 20px;font-size:13px;display:flex}.table-scroll::-webkit-scrollbar{width:6px;height:6px}.table-scroll::-webkit-scrollbar-track{background:0 0}.table-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}.table-scroll::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}@media (width<=900px){.layout{flex-direction:column}.playground-wrap{border-right:none;border-bottom:1px solid var(--border);flex:none}#playground{min-height:220px}.table-wrap{min-height:250px}.filters{-webkit-overflow-scrolling:touch;overflow-x:auto}.header{flex-wrap:wrap;gap:8px}}@media (width<=600px){.playground-wrap{flex:none}#playground{min-height:180px}.header-title{font-size:13px}}@media (prefers-reduced-motion:reduce){tbody tr{animation:none}.btn:active{transform:none}.coords,.playground-hint{transition:none}}