:root{--bg:#0b0d11;--surface:#12151b;--surface-2:#181c24;--surface-3:#1f2430;--border:#242a35;--border-strong:#323a48;--text:#e7eaf0;--text-muted:#9aa4b2;--text-faint:#6b7584;--accent:#38bdf8;--accent-strong:#7dd3fc;--accent-ink:#04121c;--fast:#4ade80;--moderate:#fbbf24;--slow:#f87171;--radius:10px;--radius-sm:6px;--sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;--mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-size:16px;line-height:1.5}*,:before,:after{box-sizing:border-box}body{background:radial-gradient(1200px 500px at 50% -200px, #38bdf814, transparent 70%), var(--bg);min-height:100svh;margin:0}h1,h2,h3,p{margin:0}code{font-family:var(--mono);font-size:.9em}a{color:var(--accent-strong);text-decoration:none}a:hover{text-underline-offset:3px;text-decoration:underline}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}}.app{max-width:1040px;margin:0 auto;padding:1.25rem 1.5rem 2.5rem}.topbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:1rem;padding-bottom:1.25rem;display:flex}.brand{letter-spacing:-.01em;align-items:center;gap:.625rem;font-size:1rem;font-weight:650;display:flex}.mode-badge{border:1px solid var(--border-strong);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);cursor:help;border-radius:999px;align-items:center;gap:.375rem;margin-left:.25rem;padding:.125rem .5rem;font-size:.6875rem;font-weight:600;display:inline-flex}.mode-dot{background:currentColor;border-radius:50%;width:6px;height:6px}.mode-live{color:var(--fast);border-color:#4ade8059}.mode-live .mode-dot{animation:1.8s ease-in-out infinite pulse}.mode-demo{color:var(--accent-strong);border-color:#38bdf859}.mode-checking .mode-dot{animation:1s ease-in-out infinite pulse}.repo-link{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);align-items:center;gap:.4rem;padding:.375rem .75rem;font-size:.8125rem;font-weight:500;transition:color .15s,border-color .15s,background .15s;display:inline-flex}.repo-link:hover{color:var(--text);border-color:var(--border-strong);background:var(--surface);text-decoration:none}.hero{padding:2.25rem 0 1.75rem}.hero h1{letter-spacing:-.025em;max-width:22ch;font-size:clamp(1.625rem,3.2vw,2.25rem);font-weight:700;line-height:1.15}.lede{max-width:64ch;color:var(--text-muted);margin-top:.75rem;font-size:1rem}.demo-note{border-left:2px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;max-width:64ch;color:var(--text-muted);background:#38bdf80f;margin-top:.875rem;padding:.625rem .875rem;font-size:.875rem}.controls{flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;display:flex}.lookup{flex:320px;gap:.5rem;display:flex}.lookup input{min-width:0;height:2.75rem;font:inherit;font-family:var(--mono);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);flex:1;padding:0 .875rem;font-size:.875rem;transition:border-color .15s,box-shadow .15s}.lookup input::placeholder{font-family:var(--sans);color:var(--text-faint)}.lookup input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #38bdf826}.btn{height:2.75rem;font:inherit;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:0 1.125rem;font-size:.9375rem;font-weight:600;transition:background .15s,border-color .15s,color .15s,transform .1s;display:inline-flex}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:progress;opacity:.7}.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 1px #7dd3fc66,0 6px 20px -8px #38bdf899}.btn-primary:hover:not(:disabled){background:var(--accent-strong)}.btn-lg{padding:0 1.375rem}.btn-secondary{background:var(--surface-2);border-color:var(--border-strong);color:var(--text)}.btn-secondary:hover:not(:disabled){background:var(--surface-3)}.btn-ghost{border-color:var(--border-strong);color:var(--text-muted);background:0 0}.btn-ghost:hover{color:var(--text);background:var(--surface-2)}.btn-link{height:auto;color:var(--text-muted);background:0 0;padding:.25rem .5rem;font-size:.8125rem;font-weight:500}.btn-link:hover{color:var(--text)}.spinner{border:2px solid #04121c4d;border-top-color:var(--accent-ink);border-radius:50%;width:14px;height:14px;animation:.7s linear infinite spin}.section-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);font-size:.6875rem;font-weight:600}.history{align-items:center;gap:.75rem;min-width:0;margin-bottom:.875rem;display:flex}.history ul{scrollbar-width:none;gap:.5rem;margin:0;padding:0 0 2px;list-style:none;display:flex;overflow-x:auto}.history-chip{font:inherit;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;align-items:center;gap:.5rem;padding:.3125rem .625rem;font-size:.75rem;transition:border-color .15s,background .15s,color .15s;animation:.25s both fade-in;display:inline-flex}.history-chip:hover{color:var(--text);border-color:var(--border-strong)}.history-chip.is-active{color:var(--text);background:var(--surface-2);border-color:var(--accent)}.history-source{color:var(--text-faint)}.latency-badge{--tone:var(--text-muted);font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--tone);background:color-mix(in srgb, var(--tone) 13%, transparent);border:1px solid color-mix(in srgb, var(--tone) 28%, transparent);border-radius:999px;align-items:center;gap:.3125rem;padding:.0625rem .4375rem;font-size:.75rem;font-weight:600;transition:color .2s,background .2s,border-color .2s;display:inline-flex}.latency-badge:before{content:"";background:currentColor;border-radius:50%;width:5px;height:5px}.tone-fast{--tone:var(--fast)}.tone-moderate{--tone:var(--moderate)}.tone-slow{--tone:var(--slow)}.tone-open{--tone:var(--text-faint)}.latency-badge.is-pending:before{animation:.7s ease-in-out infinite pulse}.trace-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);animation:.28s cubic-bezier(.2,.7,.2,1) both card-in;overflow:hidden}.trace-summary{border-bottom:1px solid var(--border);background:linear-gradient(to bottom, var(--surface-2), var(--surface));flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;padding:1.125rem 1.25rem;display:flex}.trace-summary-main{flex-direction:column;gap:.375rem;min-width:0;display:flex}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--accent-strong);font-size:.6875rem;font-weight:600}.trace-id{color:var(--text);overflow-wrap:anywhere;font-size:.9375rem}.trace-stats{flex-wrap:wrap;gap:.5rem 1.75rem;margin:0;display:flex}.trace-stats div{flex-direction:column;gap:.25rem;display:flex}.trace-stats dt{letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);font-size:.6875rem;font-weight:600}.trace-stats dd{font-variant-numeric:tabular-nums;align-items:center;min-height:1.375rem;margin:0;font-size:.875rem;font-weight:600;display:flex}.stat-started dd{font-family:var(--mono);color:var(--text-muted);font-size:.8125rem;font-weight:500}.waterfall{--label-col:190px;--duration-col:84px;padding:.5rem 0 .75rem}.waterfall-axis,.span-row{grid-template-columns:var(--label-col) minmax(0, 1fr) var(--duration-col);align-items:center;gap:1rem;padding:0 1.25rem;display:grid}.waterfall-axis{height:2rem;margin-bottom:.25rem}.axis-label{letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);font-size:.6875rem;font-weight:600}.axis-label-end{text-align:right}.axis-scale{height:100%;position:relative}.axis-tick{font-family:var(--mono);color:var(--text-faint);font-variant-numeric:tabular-nums;font-size:.6875rem;position:absolute;top:50%;transform:translate(-50%,-50%)}.axis-tick:first-child{transform:translateY(-50%)}.axis-tick:last-child{transform:translate(-100%,-50%)}.span-row{height:3rem;transition:background .15s,opacity .25s,transform .25s}.span-row.is-hovered{background:var(--surface-2)}.span-row.is-staggered{animation:.36s cubic-bezier(.2,.7,.2,1) both row-in;animation-delay:calc(var(--i,0) * 70ms + 80ms)}.span-row.is-pending{opacity:0;transform:translate(-8px)}.span-label{min-width:0;padding-left:calc(var(--depth,0) * 14px);align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;display:flex}.service-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.service-dot{background:var(--service);border-radius:2px;flex-shrink:0;width:8px;height:8px}.span-track{background-image:linear-gradient(to right, var(--border) 1px, transparent 1px);height:100%;box-shadow:1px 0 0 var(--border) inset, -1px 0 0 var(--border) inset;background-size:25% 100%;position:relative}.span-bar{background:color-mix(in srgb, var(--service) 78%, transparent);height:14px;box-shadow:0 0 0 1px color-mix(in srgb, var(--service) 90%, white 10%) inset;border-radius:4px;transition:filter .15s,height .15s;position:absolute;top:50%;transform:translateY(-50%)}.span-row.is-hovered .span-bar{filter:brightness(1.12);height:18px}.span-bar.is-running:after{content:"";width:6px;box-shadow:0 0 12px 2px var(--service);background:#fff;border-radius:3px;animation:.6s ease-in-out infinite pulse;position:absolute;top:-3px;bottom:-3px;right:-3px}.span-bar.is-open{background:repeating-linear-gradient(-45deg, color-mix(in srgb, var(--service) 55%, transparent) 0 6px, color-mix(in srgb, var(--service) 30%, transparent) 6px 12px)}.span-event{background:#ffffff8c;border-radius:1px;width:2px;height:100%;position:absolute;top:50%;transform:translate(-50%,-50%)}.span-duration{justify-content:flex-end;display:flex}.events{border-top:1px solid var(--border);padding:1rem 1.25rem 1.125rem}.event-list{margin:.625rem 0 0;padding:0;list-style:none}.event-row{border-radius:var(--radius-sm);grid-template-columns:4.5rem 11rem minmax(0,1fr);align-items:center;gap:1rem;margin:0 -.5rem;padding:.375rem .5rem;font-size:.8125rem;transition:background .15s,opacity .25s;display:grid}.event-row.is-hovered{background:var(--surface-2)}.event-row.is-pending{opacity:0}.event-offset{font-family:var(--mono);color:var(--text-faint);font-variant-numeric:tabular-nums}.event-service{color:var(--text-muted);align-items:center;gap:.5rem;display:flex}.event-message{color:var(--text)}.stage{min-height:420px}.stage-footer{justify-content:space-between;align-items:center;gap:1rem;margin-top:.625rem;display:flex}.legend{flex-wrap:wrap;gap:.375rem;display:flex}.state-panel{text-align:center;background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--radius);flex-direction:column;align-items:center;gap:.75rem;padding:3rem 1.5rem;animation:.28s cubic-bezier(.2,.7,.2,1) both card-in;display:flex}.state-icon{background:var(--surface-3);width:3rem;height:3rem;color:var(--text-muted);border-radius:50%;place-items:center;font-size:1.375rem;font-weight:600;display:grid}.state-panel h2{font-size:1.125rem;font-weight:650}.state-body{max-width:52ch;color:var(--text-muted);flex-direction:column;gap:.5rem;font-size:.9375rem;display:flex}.state-body code{color:var(--text);overflow-wrap:anywhere}.state-actions{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.5rem;display:flex}.shimmer{background:linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);background-size:200% 100%;border-radius:4px;animation:1.2s ease-in-out infinite shimmer;display:block}.shimmer-line{height:.75rem}.shimmer-lg{height:1rem}.shimmer-bar{height:14px;position:absolute;top:50%;transform:translateY(-50%)}.footer{border-top:1px solid var(--border);color:var(--text-faint);flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;margin-top:2.5rem;padding-top:1.25rem;font-size:.8125rem;display:flex}@keyframes row-in{0%{opacity:0;transform:translate(-8px)}}@keyframes card-in{0%{opacity:0;transform:translateY(6px)}}@keyframes fade-in{0%{opacity:0}}@keyframes pulse{50%{opacity:.35}}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=640px){.app{padding:1rem 1rem 2rem}.repo-link span{display:none}.hero{padding:1.5rem 0 1.25rem}.lede{font-size:.9375rem}.controls .btn-lg{width:100%}.lookup{flex-basis:100%}.history{flex-direction:column;align-items:stretch;gap:.5rem}.trace-summary{padding:1rem}.trace-stats{gap:.75rem 1.25rem}.stat-started{flex-basis:100%}.waterfall-axis,.span-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label duration""track track";gap:.375rem .75rem;padding:0 1rem}.waterfall-axis{grid-template-areas:"track track";height:1.5rem}.waterfall-axis .axis-label{display:none}.axis-scale{grid-area:track}.span-row{height:auto;padding-top:.625rem;padding-bottom:.625rem}.span-label{grid-area:label}.span-duration{grid-area:duration}.span-track{grid-area:track;height:20px}.events{padding:1rem}.event-row{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"service offset""message message";gap:.125rem .75rem}.event-service{grid-area:service}.event-offset{text-align:right;grid-area:offset}.event-message{color:var(--text-muted);grid-area:message;padding-left:1rem}.stage-footer{flex-wrap:wrap}}