| |
| |
| |
| * { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| font-family: Arial, sans-serif; |
| background: #f5f7fa; |
| margin: 0; |
| } |
|
|
| p { |
| line-height: 1.5; |
| } |
|
|
| |
| |
| |
| .container { |
| max-width: 900px; |
| margin: 50px auto; |
| padding: 25px; |
| text-align: center; |
| } |
|
|
| h1 { |
| margin-bottom: 25px; |
| } |
|
|
| .input-container { |
| display: flex; |
| gap: 10px; |
| justify-content: center; |
| margin-bottom: 20px; |
| } |
|
|
| input { |
| padding: 12px; |
| font-size: 16px; |
| flex: 1; |
| border-radius: 8px; |
| border: 1px solid #ccc; |
| max-width: 600px; |
| } |
|
|
| button { |
| padding: 12px 16px; |
| font-size: 16px; |
| border-radius: 8px; |
| border: none; |
| background: #007bff; |
| color: white; |
| cursor: pointer; |
| } |
|
|
| button:hover { |
| background: #0056b3; |
| } |
|
|
| |
| |
| |
| #answer { |
| margin-top: 20px; |
| width: 100%; |
| text-align: left; |
| } |
|
|
| .answer-box pre { |
| background: #807d7d; |
| padding: 14px; |
| border-radius: 10px; |
| overflow-x: auto; |
| margin: 10px 0; |
| } |
|
|
| .answer-box pre code { |
| background: transparent !important; |
| color: #f8f8f2 !important; |
| font-family: "Courier New", monospace; |
| font-size: 14px; |
| display: block; |
| white-space: pre; |
| } |
|
|
| .answer-box code:not(pre code) { |
| background: #eee; |
| color: #333; |
| padding: 2px 6px; |
| border-radius: 4px; |
| } |
|
|
| .answer-box ul, |
| .answer-box ol { |
| text-align: left; |
| padding-left: 20px; |
| } |
|
|
| .query-panel, |
| .latency-panel, |
| .p2-panel, |
| .p3-panel { |
| margin-top: 28px; |
| border: 1px solid #e2e8f0; |
| border-radius: 10px; |
| padding: 20px 24px; |
| background: #f8fafc; |
| font-family: 'JetBrains Mono', 'Fira Code', monospace; |
| } |
|
|
| .panel-title { |
| margin: 0 0 16px; |
| font-size: 13px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: #64748b; |
| } |
|
|
| .bottleneck-callout, |
| .llm-callout, |
| .slowest-callout { |
| margin-top: 8px; |
| padding: 8px 12px; |
| border-left-width: 3px; |
| border-left-style: solid; |
| border-radius: 4px; |
| font-size: 12px; |
| } |
|
|
| .bottleneck-callout { |
| background: #fff7ed; |
| border-left-color: #ef4444; |
| color: #7c2d12; |
| margin-top: 12px; |
| } |
|
|
| .bottleneck-callout b { |
| color: #dc2626; |
| } |
|
|
| .llm-callout { |
| background: #f0f9ff; |
| border-left-color: #64748b; |
| color: #1e3a5f; |
| } |
|
|
| .llm-callout b { |
| color: #334155; |
| } |
|
|
| .slowest-callout { |
| background: #fdf4ff; |
| border-left-color: #a855f7; |
| color: #581c87; |
| font-family: 'JetBrains Mono', 'Fira Code', monospace; |
| } |
|
|
| .slowest-callout b { |
| color: #7e22ce; |
| } |
|
|
| .p2-dot, |
| .p3-dot-lg { |
| display: inline-block; |
| width: 10px; |
| height: 10px; |
| margin-right: 4px; |
| vertical-align: middle; |
| } |
|
|
| .p2-dot { |
| border-radius: 3px; |
| } |
|
|
| .p3-dot-lg { |
| border-radius: 50%; |
| } |
|
|
|
|
| .p2-winner, |
| .p2-dropped { |
| display: inline-block; |
| margin-left: 5px; |
| font-size: 10px; |
| border-radius: 4px; |
| padding: 1px 5px; |
| font-weight: 600; |
| border-width: 1px; |
| border-style: solid; |
| } |
|
|
| .p2-winner { |
| background: #fef9c3; |
| color: #854d0e; |
| border-color: #fde047; |
| } |
|
|
| .p2-dropped { |
| background: #fee2e2; |
| color: #991b1b; |
| border-color: #fca5a5; |
| } |
|
|
|
|
| .p2-tooltip, |
| .p3-scatter-tooltip { |
| display: none; |
| position: absolute; |
| pointer-events: none; |
| background: #1e293b; |
| color: #e2e8f0; |
| border-radius: 6px; |
| font-family: Arial, sans-serif; |
| } |
|
|
| .p2-tooltip { |
| top: 100%; |
| left: 0; |
| z-index: 100; |
| width: 380px; |
| max-height: 200px; |
| overflow-y: auto; |
| font-size: 12px; |
| line-height: 1.6; |
| padding: 12px 14px; |
| border-radius: 8px; |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
|
|
| .p3-scatter-tooltip { |
| font-size: 11px; |
| line-height: 1.5; |
| padding: 8px 10px; |
| max-width: 220px; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); |
| z-index: 50; |
| } |
|
|
| .p2-tooltip.visible, |
| .p3-scatter-tooltip.visible { |
| display: block; |
| } |
|
|
| .p2-legend, |
| .p3-scatter-legend { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 14px; |
| align-items: center; |
| font-size: 12px; |
| color: #475569; |
| } |
|
|
| .p2-legend { |
| margin-bottom: 14px; |
| } |
|
|
| .p3-scatter-legend { |
| margin-top: 8px; |
| } |
|
|
| .p2-legend-sep { |
| color: #cbd5e1; |
| } |
|
|
| .p2-bar-bg, |
| .complexity-bar-bg { |
| height: 6px; |
| background: #e2e8f0; |
| border-radius: 3px; |
| overflow: hidden; |
| } |
|
|
| .p2-bar-fill, |
| .complexity-bar-fill { |
| height: 100%; |
| border-radius: 3px; |
| } |
|
|
| .p2-bar-fill { |
| transition: width 0.4s ease; |
| } |
|
|
| .complexity-bar-fill { |
| background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444); |
| transition: width 0.5s ease; |
| } |
|
|
| |
| |
| |
| .token-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-bottom: 20px; |
| } |
|
|
| .token-pill { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 3px; |
| } |
|
|
| .pill-text { |
| padding: 4px 10px; |
| border-radius: 20px; |
| font-size: 13px; |
| font-weight: 600; |
| color: #fff; |
| letter-spacing: 0.02em; |
| white-space: nowrap; |
| } |
|
|
| .pill-id { |
| font-size: 9px; |
| color: #94a3b8; |
| } |
|
|
| .pill-idf { |
| font-size: 9px; |
| color: #64748b; |
| font-weight: 500; |
| } |
|
|
| .heatmap-label { |
| font-size: 11px; |
| color: #64748b; |
| margin-bottom: 6px; |
| font-weight: 500; |
| } |
|
|
| .heatmap-strip { |
| display: flex; |
| height: 22px; |
| border-radius: 4px; |
| overflow: hidden; |
| width: 100%; |
| gap: 1px; |
| margin-bottom: 10px; |
| } |
|
|
| .heatmap-cell { |
| flex: 1; |
| border-radius: 1px; |
| transition: opacity 0.15s; |
| cursor: default; |
| } |
|
|
| .heatmap-cell:hover { |
| opacity: 0.7; |
| } |
|
|
| .embed-note { |
| font-size: 12px; |
| color: #475569; |
| background: #eff6ff; |
| border-left: 3px solid #6366f1; |
| border-radius: 4px; |
| padding: 7px 12px; |
| margin-bottom: 14px; |
| font-family: Arial, sans-serif; |
| } |
|
|
| .stats-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 16px; |
| } |
|
|
| .stat-chip { |
| display: flex; |
| flex-direction: column; |
| gap: 2px; |
| } |
|
|
| .stat-label { |
| font-size: 10px; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| color: #94a3b8; |
| } |
|
|
| .stat-value { |
| font-size: 15px; |
| font-weight: 700; |
| color: #0f172a; |
| } |
|
|
| .complexity-wrap { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| flex: 1; |
| min-width: 140px; |
| } |
|
|
| |
| |
| |
| .p2-panel { |
| width: 100vw; |
| max-width: 100vw; |
| margin-left: calc(50% - 50vw); |
| margin-right: calc(50% - 50vw); |
| } |
|
|
| .p2-table-wrap { |
| overflow-x: auto; |
| border-radius: 8px; |
| border: 1px solid #e2e8f0; |
| } |
|
|
| .p2-table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 12px; |
| } |
|
|
| .p2-th { |
| padding: 8px 12px; |
| text-align: left; |
| font-size: 11px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| color: #64748b; |
| background: #f1f5f9; |
| border-bottom: 1px solid #e2e8f0; |
| white-space: nowrap; |
| } |
|
|
| .p2-row { |
| border-bottom: 1px solid #e2e8f0; |
| } |
|
|
| .p2-row:last-child { |
| border-bottom: none; |
| } |
|
|
| .p2-td { |
| padding: 10px 12px; |
| vertical-align: middle; |
| color: #1e293b; |
| } |
|
|
| .p2-rank { |
| font-weight: 700; |
| font-size: 13px; |
| white-space: nowrap; |
| min-width: 80px; |
| } |
|
|
| .p2-preview-cell { |
| position: relative; |
| max-width: 260px; |
| min-width: 160px; |
| } |
|
|
| .p2-preview { |
| font-size: 12px; |
| color: #334155; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| max-width: 240px; |
| cursor: default; |
| font-family: Arial, sans-serif; |
| } |
|
|
| .p2-score-wrap { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| min-width: 90px; |
| } |
|
|
| .p2-bar-bg { |
| flex: 1; |
| } |
|
|
| .p2-score-num { |
| font-size: 11px; |
| font-weight: 600; |
| color: #475569; |
| min-width: 36px; |
| } |
|
|
| .p2-delta { |
| text-align: center; |
| min-width: 40px; |
| } |
|
|
| .p2-arrow { |
| font-size: 12px; |
| font-weight: 700; |
| padding: 2px 5px; |
| border-radius: 4px; |
| } |
|
|
| .p2-arrow.up { |
| color: #059669; |
| background: #d1fae5; |
| } |
|
|
| .p2-arrow.down { |
| color: #dc2626; |
| background: #fee2e2; |
| } |
|
|
| .p2-arrow.flat { |
| color: #94a3b8; |
| background: #f1f5f9; |
| } |
|
|
| |
| |
| |
| .p3-section-label { |
| font-size: 11px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.07em; |
| color: #64748b; |
| margin-bottom: 8px; |
| } |
|
|
| .p3-slider-row { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| margin-bottom: 18px; |
| flex-wrap: wrap; |
| } |
|
|
| .p3-slider-label { |
| font-size: 13px; |
| color: #334155; |
| min-width: 70px; |
| } |
|
|
| .p3-slider { |
| flex: 1; |
| max-width: 260px; |
| accent-color: #6366f1; |
| cursor: pointer; |
| } |
|
|
| .p3-slider-hint { |
| font-size: 11px; |
| color: #94a3b8; |
| } |
|
|
| .p3-top-row { |
| display: flex; |
| gap: 20px; |
| flex-wrap: wrap; |
| align-items: flex-start; |
| } |
|
|
| .p3-scatter-wrap { |
| position: relative; |
| flex-shrink: 0; |
| } |
|
|
| .p3-canvas { |
| display: block; |
| border-radius: 8px; |
| border: 1px solid #e2e8f0; |
| background: #fff; |
| } |
|
|
| .p3-side-wrap { |
| display: flex; |
| gap: 14px; |
| flex: 1; |
| min-width: 280px; |
| } |
|
|
| .p3-side-col { |
| flex: 1; |
| min-width: 120px; |
| } |
|
|
| .p3-chunk-list { |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| max-height: 280px; |
| overflow-y: auto; |
| } |
|
|
| .p3-side-item { |
| display: flex; |
| gap: 8px; |
| padding: 6px 8px; |
| background: #fff; |
| border: 1px solid #e2e8f0; |
| border-radius: 6px; |
| font-size: 11px; |
| align-items: flex-start; |
| font-family: Arial, sans-serif; |
| } |
|
|
| .p3-side-sim { |
| font-weight: 700; |
| color: #6366f1; |
| white-space: nowrap; |
| flex-shrink: 0; |
| font-family: 'JetBrains Mono', monospace; |
| } |
|
|
| .p3-side-text { |
| color: #475569; |
| overflow: hidden; |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| } |
|
|
| .p3-matrix-wrap { |
| overflow-x: auto; |
| margin-top: 6px; |
| padding-bottom: 16px; |
| } |
|
|
| |
| |
| |
| .latency-bar { |
| display: flex; |
| height: 28px; |
| border-radius: 6px; |
| overflow: hidden; |
| width: 100%; |
| } |
|
|
| .latency-segment { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 11px; |
| font-weight: 600; |
| color: #fff; |
| white-space: nowrap; |
| overflow: hidden; |
| transition: opacity 0.2s; |
| cursor: default; |
| } |
|
|
| .latency-segment:last-child { |
| flex: 1; |
| } |
|
|
| .latency-segment:hover { |
| opacity: 0.85; |
| } |
|
|
| .seg-embed { |
| background: #6366f1; |
| } |
|
|
| .seg-vector { |
| background: #0ea5e9; |
| } |
|
|
| .seg-bm25 { |
| background: #10b981; |
| } |
|
|
| .seg-hybrid { |
| background: #f59e0b; |
| } |
|
|
| .seg-mmr { |
| background: #8b5cf6; |
| } |
|
|
| .seg-rerank { |
| background: #ef4444; |
| } |
|
|
| .seg-llm { |
| background: #64748b; |
| } |
|
|
| .latency-small-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-top: 6px; |
| margin-bottom: 2px; |
| } |
|
|
| .latency-small-label { |
| font-size: 10px; |
| font-weight: 700; |
| background: #f1f5f9; |
| border-radius: 4px; |
| padding: 2px 6px; |
| white-space: nowrap; |
| } |
|
|
| .latency-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px; |
| margin-top: 14px; |
| align-items: center; |
| } |
|
|
| .latency-chip { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| font-size: 12px; |
| color: #334155; |
| } |
|
|
| .chip-dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 3px; |
| flex-shrink: 0; |
| } |
|
|
| .chip-time { |
| font-weight: 700; |
| color: #0f172a; |
| } |
|
|
| .latency-total { |
| margin-left: auto; |
| font-size: 13px; |
| font-weight: 700; |
| color: #0f172a; |
| } |
|
|
| |
| |
| |
| .chunk-card { |
| border: 1px solid #e2e8f0; |
| border-radius: 10px; |
| background: #fff; |
| margin-bottom: 14px; |
| overflow: hidden; |
| } |
|
|
| .chunk-card-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 10px 14px; |
| background: #f8fafc; |
| border-bottom: 1px solid #e2e8f0; |
| gap: 10px; |
| flex-wrap: wrap; |
| } |
|
|
| .chunk-card-title { |
| font-size: 14px; |
| font-weight: 700; |
| color: #1e293b; |
| } |
|
|
| .chunk-score-badge { |
| font-size: 12px; |
| font-weight: 700; |
| padding: 3px 8px; |
| border-radius: 20px; |
| white-space: nowrap; |
| } |
|
|
| .chunk-source-link { |
| font-size: 14px; |
| color: #6366f1; |
| text-decoration: none; |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| max-width: 380px; |
| } |
|
|
| .chunk-source-link:hover { |
| text-decoration: underline; |
| } |
|
|
| .chunk-source-icon { |
| font-size: 12px; |
| flex-shrink: 0; |
| } |
|
|
| .chunk-card-body { |
| padding: 14px; |
| } |
|
|
| .chunk-content { |
| font-size: 14px; |
| color: #334155; |
| line-height: 1.6; |
| text-align: left; |
| } |
|
|
| .chunk-content pre, |
| .chunk-content code { |
| background: none !important; |
| color: inherit !important; |
| padding: 0 !important; |
| border-radius: 0 !important; |
| font-family: inherit !important; |
| white-space: normal !important; |
| } |
|
|
| .chunk { |
| border: 1px solid #ddd; |
| padding: 12px; |
| margin-bottom: 12px; |
| border-radius: 10px; |
| background: white; |
| text-align: left; |
| } |
|
|
| .chunk pre, |
| .chunk code { |
| background: none !important; |
| color: inherit !important; |
| padding: 0 !important; |
| border-radius: 0 !important; |
| font-family: inherit !important; |
| white-space: normal !important; |
| } |
|
|
| .source { |
| margin-top: 8px; |
| } |
