:root{--tl-node-bg: #ffffff;--tl-node-border: #cbd5e1;--tl-node-text: #0f172a;--tl-entry-bg: #1e293b;--tl-entry-text: #f8fafc;--tl-accent: #f59e0b;--tl-count-bg: #e2e8f0;--tl-count-text: #334155;--tl-edge: #94a3b8;--tl-flash: #22c55e;--tl-bullet-idle: #ef4444;--tl-error-bg: #fee2e2;--tl-error-border: #ef4444;--tl-error-text: #991b1b}@media (prefers-color-scheme: dark){:root:not([data-theme]){--tl-node-bg: #1e293b;--tl-node-border: #334155;--tl-node-text: #e2e8f0;--tl-entry-bg: #0b1220;--tl-entry-text: #f8fafc;--tl-count-bg: #334155;--tl-count-text: #e2e8f0;--tl-edge: #64748b;--tl-error-bg: #450a0a;--tl-error-border: #ef4444;--tl-error-text: #fecaca}}[data-theme=dark]{--tl-node-bg: #1e293b;--tl-node-border: #334155;--tl-node-text: #e2e8f0;--tl-entry-bg: #0b1220;--tl-entry-text: #f8fafc;--tl-count-bg: #334155;--tl-count-text: #e2e8f0;--tl-edge: #64748b;--tl-error-bg: #450a0a;--tl-error-border: #ef4444;--tl-error-text: #fecaca}.tl-node{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;min-width:170px;width:max-content;height:56px;padding:0 12px;border:1px solid var(--tl-node-border);border-radius:10px;background:var(--tl-node-bg);color:var(--tl-node-text);font:13px/1.2 ui-sans-serif,system-ui,sans-serif;box-shadow:0 1px 2px #0f172a0f}.tl-node--entry{background:var(--tl-entry-bg);color:var(--tl-entry-text);border-color:var(--tl-entry-bg)}.tl-node--error{background:var(--tl-error-bg);color:var(--tl-error-text);border-color:var(--tl-error-border);cursor:pointer}.tl-node--error .tl-node__count{background:var(--tl-error-border);color:#fff}.tl-node__label{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tl-node__count{flex:0 0 auto;min-width:22px;padding:2px 8px;border-radius:999px;background:var(--tl-count-bg);color:var(--tl-count-text);font-variant-numeric:tabular-nums;text-align:center}.tl-node--entry .tl-node__count{background:#f8fafc2e;color:var(--tl-entry-text)}.tl-node__bullet{position:absolute;top:7px;left:9px;width:8px;height:8px;border-radius:50%;background:var(--tl-bullet-idle);overflow:hidden}.tl-node__bullet-error{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:var(--tl-error-border)}.tl-node__bullet-hit{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:var(--tl-flash);animation:tl-bullet .5s linear forwards}@keyframes tl-bullet{0%{opacity:1}to{opacity:0}}.tl-handle{width:6px;height:6px;background:var(--tl-edge);border:none}.tl-edge{stroke:var(--tl-edge);stroke-width:1.5}.tl-edge__flash{stroke:var(--tl-flash);stroke-width:3;fill:none;pointer-events:none}.tl-edge__timing{font-size:10px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;padding:1px 4px;border-radius:4px;color:var(--tl-count-text);background:var(--tl-count-bg)}.tl-gl-controls{position:absolute;bottom:12px;left:12px;display:flex;flex-direction:column;border-radius:6px;overflow:hidden;box-shadow:0 1px 4px #0f172a33}.tl-gl-controls button{width:28px;height:28px;border:none;border-bottom:1px solid var(--tl-node-border);background:var(--tl-node-bg);color:var(--tl-node-text);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.tl-gl-controls button:last-child{border-bottom:none}.tl-gl-controls button:hover{background:var(--tl-count-bg)}.tl-root{--app-bg: #f1f5f9;--app-text: #0f172a;--bar-bg: #ffffff;--bar-border: #e2e8f0;--ctl-bg: #f8fafc;--ctl-bg-hover: #eef2f7;--ctl-border: #cbd5e1;--muted: #64748b;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;font-family:ui-sans-serif,system-ui,sans-serif;color:var(--app-text);background:var(--app-bg)}.tl-root *,.tl-root *:before,.tl-root *:after{box-sizing:border-box}.tl-root[data-theme=dark]{--app-bg: #0b1220;--app-text: #e2e8f0;--bar-bg: #111827;--bar-border: #334155;--ctl-bg: #1e293b;--ctl-bg-hover: #334155;--ctl-border: #475569;--muted: #94a3b8}.toolbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bar-bg);border-bottom:1px solid var(--bar-border);flex:0 0 auto}.brand{font-weight:700;font-size:15px}.status{display:inline-flex;align-items:center;gap:6px;font-size:13px}.status__dot{width:8px;height:8px;border-radius:50%;background:currentColor}.status--on{color:#16a34a}.status--off{color:#dc2626}.url{flex:1 1 auto;max-width:360px;padding:6px 10px;border:1px solid var(--ctl-border);border-radius:8px;background:var(--ctl-bg);color:var(--app-text);font:13px ui-monospace,monospace}.toolbar button{padding:6px 12px;border:1px solid var(--ctl-border);border-radius:8px;background:var(--ctl-bg);color:var(--app-text);cursor:pointer;font-size:13px}.toolbar button:hover{background:var(--ctl-bg-hover)}.icon-btn{line-height:1}.icon-btn--off{opacity:.4}.theme-toggle{line-height:1}.muted{margin-left:auto;color:var(--muted);font-size:13px}.route-select{position:relative}.route-select__button{display:inline-flex;align-items:center;gap:8px;min-width:160px;max-width:260px}.route-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,monospace}.route-select__caret{margin-left:auto;color:var(--muted);font-size:10px}.route-select__pop{position:absolute;top:calc(100% + 6px);left:0;z-index:20;width:280px;max-width:80vw;background:var(--bar-bg);border:1px solid var(--ctl-border);border-radius:10px;box-shadow:0 8px 30px #00000040;overflow:hidden}.route-select__search{width:100%;padding:8px 10px;border:none;border-bottom:1px solid var(--bar-border);background:var(--ctl-bg);color:var(--app-text);font:13px ui-monospace,monospace;outline:none}.route-select__list{list-style:none;margin:0;padding:4px;max-height:320px;overflow-y:auto}.route-select__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:none;border-radius:6px;background:transparent;color:var(--app-text);cursor:pointer;font-size:13px;text-align:left}.route-select__item:hover{background:var(--ctl-bg-hover)}.route-select__item.is-active{background:var(--ctl-bg-hover);font-weight:600}.route-select__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,monospace}.route-select__count{margin-left:auto;flex:0 0 auto;padding:1px 7px;border-radius:999px;background:var(--ctl-bg);border:1px solid var(--ctl-border);color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.route-select__empty{padding:10px 8px;color:var(--muted);font-size:13px;text-align:center}.rec{color:#dc2626;font-weight:600}.rec:disabled{color:var(--muted);opacity:.6;cursor:not-allowed}.rec--on{background:#dc2626;border-color:#dc2626;color:#fff;animation:rec-pulse 1.2s ease-in-out infinite}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.55}}.reviewbar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--bar-bg);border-bottom:1px solid var(--bar-border);flex:0 0 auto;font-size:13px}.reviewbar button{padding:5px 10px;border:1px solid var(--ctl-border);border-radius:8px;background:var(--ctl-bg);color:var(--app-text);cursor:pointer;font-size:13px}.reviewbar button:hover:not(:disabled){background:var(--ctl-bg-hover)}.reviewbar button:disabled{opacity:.4;cursor:default}.reviewbar__live{font-weight:600}.reviewbar__group{display:inline-flex;align-items:center;gap:8px}.reviewbar__label{min-width:320px;color:var(--muted)}.reviewbar__label code{color:var(--app-text);font-family:ui-monospace,monospace}.reviewbar__speeds{display:inline-flex;gap:4px;margin-left:auto}.reviewbar__speeds .is-active{background:var(--app-text);color:var(--app-bg);border-color:var(--app-text)}.reviewbar__play{font-weight:600}.canvas{position:relative;flex:1 1 auto;min-height:0;background:var(--app-bg)}.stack-panel{position:absolute;top:12px;right:12px;bottom:12px;width:420px;max-width:calc(100% - 24px);display:flex;flex-direction:column;background:var(--bar-bg);border:1px solid var(--ctl-border);border-radius:10px;box-shadow:0 8px 30px #00000040;overflow:hidden;z-index:10}.stack-panel__head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--bar-border);background:#ef4444;color:#fff}.stack-panel__title{font-weight:700;font-family:ui-monospace,monospace;font-size:13px}.stack-panel__count{font-size:12px;opacity:.85}.stack-panel__close{margin-left:auto;border:none;background:transparent;color:#fff;cursor:pointer;font-size:14px;line-height:1}.stack-panel__message{margin:0;padding:10px 12px;font-family:ui-monospace,monospace;font-size:12px;color:var(--app-text);border-bottom:1px solid var(--bar-border);white-space:pre-wrap;word-break:break-word}.stack-panel__stack{margin:0;padding:10px 12px;overflow:auto;flex:1 1 auto;font-family:ui-monospace,monospace;font-size:11.5px;line-height:1.6;color:var(--muted);white-space:pre-wrap;word-break:break-word}.tabs{display:inline-flex;gap:4px}.tab.is-active{background:var(--app-text);color:var(--app-bg);border-color:var(--app-text);font-weight:600}.traces{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;background:var(--app-bg)}.traces__actions{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--bar-bg);border-bottom:1px solid var(--bar-border);flex:0 0 auto}.traces__actions button{padding:6px 12px;border:1px solid var(--ctl-border);border-radius:8px;background:var(--ctl-bg);color:var(--app-text);cursor:pointer;font-size:13px}.traces__actions button:hover:not(:disabled){background:var(--ctl-bg-hover)}.traces__actions button:disabled{opacity:.4;cursor:default}.traces__actions button.danger{color:#dc2626;border-color:#dc2626}.traces__actions button.danger:hover:not(:disabled){background:#dc2626;color:#fff}.traces__error{color:#dc2626;font-size:13px}.traces__body{display:flex;flex:1 1 auto;min-height:0}.trace-groups{width:320px;flex:0 0 auto;overflow-y:auto;padding:6px;border-right:1px solid var(--bar-border);background:var(--bar-bg)}.trace-group{margin-bottom:2px}.trace-group__header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;width:100%;padding:7px 10px;border:none;border-radius:8px;background:transparent;color:var(--app-text);cursor:pointer;text-align:left;font-weight:600}.trace-group__header:hover{background:var(--ctl-bg-hover)}.trace-group__header.has-active{outline:1px solid var(--ctl-border)}.trace-group__caret{color:var(--muted);font-size:11px}.trace-group__route{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,monospace;font-size:13px}.trace-group__count{min-width:20px;padding:1px 7px;border-radius:999px;background:var(--ctl-bg-hover);color:var(--muted);font-size:11px;text-align:center;font-variant-numeric:tabular-nums}.trace-list{list-style:none;margin:0 0 4px;padding:0 0 0 8px}.trace-list__empty{padding:16px 12px;color:var(--muted);font-size:13px;line-height:1.5}.trace-list__item{display:grid;grid-template-columns:1fr auto;gap:2px 8px;width:100%;padding:8px 10px;border:none;border-radius:8px;background:transparent;color:var(--app-text);cursor:pointer;text-align:left}.trace-list__item:hover{background:var(--ctl-bg-hover)}.trace-list__item.is-active{background:var(--ctl-bg-hover);outline:1px solid var(--ctl-border)}.trace-list__entry{grid-column:1 / 2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,monospace;font-size:13px}.trace-list__meta{grid-column:1 / 2;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.trace-list__time{grid-column:2 / 3;grid-row:1 / 3;align-self:center;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.waterfall-pane{flex:1 1 auto;min-width:0;overflow:auto;padding:16px 20px}.waterfall-pane__empty{color:var(--muted);font-size:13px}.trace-detail{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.trace-detail__waterfall{flex:0 0 auto;max-height:45%;overflow:auto;padding:16px 20px;border-bottom:1px solid var(--bar-border)}.trace-detail__graph{flex:1 1 auto;min-height:0;position:relative}.trace-detail__empty{padding:16px 20px;color:var(--muted);font-size:13px}.waterfall__head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}.waterfall__head code{font-family:ui-monospace,monospace;font-size:14px;font-weight:600}.waterfall__head .muted{margin-left:0}.waterfall__rows{list-style:none;margin:0;padding:0}.waterfall__row{display:grid;grid-template-columns:minmax(120px,260px) 84px 1fr;align-items:center;gap:12px;padding:3px 0}.waterfall__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,monospace;font-size:13px}.waterfall__ms{text-align:right;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.waterfall__track{position:relative;height:16px;border-radius:4px;background:var(--ctl-bg);border:1px solid var(--bar-border)}.waterfall__bar{position:absolute;top:0;bottom:0;border-radius:4px;background:#3b82f6;min-width:2px}.waterfall__bar--unknown{background:repeating-linear-gradient(45deg,var(--muted),var(--muted) 3px,transparent 3px,transparent 6px)}:root{--demo-bg: #f1f5f9}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--demo-bg: #0b1220}}:root[data-theme=dark]{--demo-bg: #0b1220}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:ui-sans-serif,system-ui,sans-serif;background:var(--demo-bg)}.demo-shell{position:relative;height:100%}.demo-theme-toggle{position:fixed;bottom:16px;right:16px;z-index:40;padding:8px 11px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;box-shadow:0 2px 10px #0003;cursor:pointer;font-size:14px;line-height:1}:root[data-theme=dark] .demo-theme-toggle{background:#1e293b;border-color:#475569}