:root{--bg: #101216;--panel: #171a20;--border: #262b34;--text: #d9dce3;--dim: #8b93a1;--accent: #e3b34c;--ok: #7dba84;--err: #d98080;--panel-hover: #22262f;--lane-border: #5c657a;--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sans: system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.55}.app{height:100%;max-width:860px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column}.header{display:flex;align-items:baseline;gap:12px;padding:20px 2px 10px;border-bottom:1px solid var(--border)}.header h1{margin:0;font-size:15px;font-weight:600;letter-spacing:.02em;white-space:nowrap;flex:none}.header .trace-title{color:var(--dim);font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .source-link{flex:none;color:var(--dim);font-size:12.5px;padding:13px 4px;margin:-13px -4px;text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px}.header .source-link:hover,.header .source-link:focus-visible{color:var(--text);text-decoration-color:var(--dim)}.transcript{flex:1;overflow-y:auto;padding:16px 2px 24px;font-family:var(--mono);font-size:13px;line-height:1.65}.transcript:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.transcript.is-empty{display:grid;place-content:center}.pane-hint{margin:0;color:var(--dim);font-style:italic;text-align:center}.turn-divider{display:flex;align-items:center;gap:10px;margin:18px 0 10px;color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.turn-divider:before,.turn-divider:after{content:"";flex:1;border-top:1px solid var(--border)}.msg{margin:10px 0;white-space:pre-wrap;overflow-wrap:break-word}.msg-user{color:var(--dim);border-left:2px solid var(--border);padding-left:10px}.role-tag{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}.cursor{display:inline-block;width:7px;height:1.05em;margin-left:2px;vertical-align:text-bottom;background:var(--accent);animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}.turn-stats{margin:6px 0 2px;text-align:right;font-size:11px;color:var(--dim)}.tool-card{margin:10px 0;background:var(--panel);border:1px solid var(--border);border-radius:6px;overflow:hidden;font-size:12.5px}.tool-head{display:flex;align-items:center;gap:8px;padding:7px 10px;min-width:0;width:100%;font:inherit;text-align:left;color:inherit;background:none;border:none;cursor:pointer}.tool-head:hover{background:var(--panel-hover)}.tool-head:hover .tool-chevron,.tool-head:hover .tool-dur{color:var(--text)}.tool-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.tool-chevron{flex:none;color:var(--dim);transition:transform .15s ease;transform:rotate(0)}.tool-chevron.is-open{transform:rotate(90deg)}.tool-body{border-top:1px solid var(--border);padding:8px 10px 10px}.tool-section{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:6px 0 4px}.tool-body pre{margin:0;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;overflow-x:auto;font-family:var(--mono);font-size:12px;line-height:1.5}.tool-body pre:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.tool-dot{flex:none;width:7px;height:7px;border-radius:50%}.tool-dot.is-running{background:var(--accent);animation:pulse .9s ease-in-out infinite alternate}.tool-dot.is-ok{background:var(--ok)}.tool-dot.is-err{background:var(--err)}@keyframes pulse{0%{opacity:1}to{opacity:.3}}.tool-name{font-weight:600;flex:none}.tool-summary{color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tool-dur{flex:none;color:var(--dim);font-variant-numeric:tabular-nums}.timeline{width:100%;display:block;margin-top:4px;border:1px solid var(--lane-border);border-radius:6px;cursor:crosshair;touch-action:none}.timeline:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.legend{display:flex;flex-wrap:wrap;gap:2px 14px;margin:6px 0 0;padding:0;list-style:none;font-size:12px;color:var(--dim)}.legend li{display:flex;align-items:center;gap:6px;font-family:var(--mono)}.legend-swatch{flex:none;width:10px;height:10px;border-radius:2px}.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 2px 14px;border-top:1px solid var(--border)}.btn{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:5px 12px;cursor:pointer}.btn:hover{border-color:var(--dim)}.btn:focus-visible,.header .source-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;position:relative;z-index:1}.btn-play{min-width:74px;font-weight:600}.speed-group{display:flex}.btn-speed{border-radius:0;padding:5px 9px;font-variant-numeric:tabular-nums;color:var(--dim)}.btn-speed:first-child{border-radius:5px 0 0 5px}.btn-speed:last-child{border-radius:0 5px 5px 0}.btn-speed+.btn-speed{margin-left:-1px}.btn-speed.is-active{color:var(--bg);background:var(--accent);border-color:var(--accent);position:relative}.btn-speed:focus-visible{box-shadow:0 0 0 6px var(--bg)}.btn-speed.is-active:focus-visible{border-color:var(--bg);box-shadow:0 0 0 2px var(--bg),inset 0 0 0 2px var(--bg)}.time-readout{margin-left:auto;color:var(--dim);font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}@media(max-width:480px){.app{padding:0 12px}.header{padding-top:16px}.transcript{padding-top:12px;font-size:12.5px}.controls{gap:8px;padding-bottom:10px}.btn{padding:5px 9px;min-height:44px}.btn-play{min-width:62px}.btn-speed{min-width:44px}.tool-head{min-height:44px}.tool-body pre{white-space:pre-wrap;overflow-wrap:anywhere}.tool-summary{font-size:11.5px}}@media(pointer:coarse){.btn{min-height:44px}.btn-speed{min-width:44px}.tool-head{min-height:44px}}