| |
| |
| |
|
|
| :root { |
| |
| --crl-primary: #4F46E5; |
| --crl-primary-light: #6366F1; |
| --crl-primary-dark: #3730A3; |
|
|
| |
| --crl-correct: #10B981; |
| --crl-correct-bg: rgba(16, 185, 129, 0.1); |
| --crl-incorrect: #EF4444; |
| --crl-incorrect-bg: rgba(239, 68, 68, 0.1); |
| --crl-corrected: #3B82F6; |
| --crl-corrected-bg: rgba(59, 130, 246, 0.1); |
| --crl-misguided: #F59E0B; |
| --crl-misguided-bg: rgba(245, 158, 11, 0.1); |
|
|
| |
| --crl-knowledge: #8B5CF6; |
| --crl-bias: #EC4899; |
| --crl-safety: #F97316; |
| --crl-reasoning: #06B6D4; |
|
|
| |
| --crl-radius-sm: 8px; |
| --crl-radius-md: 12px; |
| --crl-radius-lg: 16px; |
| --crl-radius-xl: 24px; |
| --crl-radius-pill: 999px; |
|
|
| |
| --crl-glass-bg: rgba(255, 255, 255, 0.7); |
| --crl-glass-border: rgba(255, 255, 255, 0.3); |
| --crl-glass-blur: 12px; |
| } |
|
|
| [data-theme="dark"] { |
| --crl-glass-bg: rgba(18, 18, 18, 0.7); |
| --crl-glass-border: rgba(255, 255, 255, 0.1); |
|
|
| --crl-correct-bg: rgba(16, 185, 129, 0.15); |
| --crl-incorrect-bg: rgba(239, 68, 68, 0.15); |
| --crl-corrected-bg: rgba(59, 130, 246, 0.15); |
| --crl-misguided-bg: rgba(245, 158, 11, 0.15); |
| } |
|
|
| |
| |
| |
|
|
| |
| .crl-feature-pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 4px 12px; |
| border-radius: var(--crl-radius-pill); |
| font-size: 13px; |
| font-weight: 500; |
| font-family: 'JetBrains Mono', monospace; |
| background: var(--surface-bg); |
| border: 1px solid var(--border-color); |
| transition: all 0.2s ease; |
| } |
|
|
| .crl-feature-pill:hover { |
| border-color: var(--crl-primary); |
| box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); |
| } |
|
|
| .crl-feature-pill__dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| } |
|
|
| .crl-feature-pill--corrected { border-color: var(--crl-corrected); background: var(--crl-corrected-bg); } |
| .crl-feature-pill--misguided { border-color: var(--crl-misguided); background: var(--crl-misguided-bg); } |
| .crl-feature-pill--correct { border-color: var(--crl-correct); background: var(--crl-correct-bg); } |
| .crl-feature-pill--incorrect { border-color: var(--crl-incorrect); background: var(--crl-incorrect-bg); } |
|
|
| |
| .crl-glass-card { |
| background: var(--crl-glass-bg); |
| backdrop-filter: blur(var(--crl-glass-blur)); |
| -webkit-backdrop-filter: blur(var(--crl-glass-blur)); |
| border: 1px solid var(--crl-glass-border); |
| border-radius: var(--crl-radius-lg); |
| padding: 24px; |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
|
|
| .crl-glass-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); |
| } |
|
|
| |
| .crl-insight { |
| position: relative; |
| padding: 20px 24px; |
| border-radius: var(--crl-radius-lg); |
| border-left: 4px solid var(--crl-primary); |
| background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(99, 102, 241, 0.02)); |
| margin: 24px 0; |
| } |
|
|
| .crl-insight::before { |
| content: 'Key Insight'; |
| display: block; |
| font-size: 11px; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| color: var(--crl-primary); |
| margin-bottom: 8px; |
| } |
|
|
| |
| .crl-metrics { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); |
| gap: 16px; |
| margin: 24px 0; |
| } |
|
|
| .crl-metric { |
| text-align: center; |
| padding: 20px 16px; |
| border-radius: var(--crl-radius-lg); |
| background: var(--surface-bg); |
| border: 1px solid var(--border-color); |
| } |
|
|
| .crl-metric__value { |
| font-size: 28px; |
| font-weight: 700; |
| color: var(--crl-primary); |
| line-height: 1.2; |
| } |
|
|
| .crl-metric__label { |
| font-size: 13px; |
| color: var(--muted-color); |
| margin-top: 4px; |
| } |
|
|
| .crl-metric__gain { |
| font-size: 14px; |
| font-weight: 600; |
| color: var(--crl-correct); |
| margin-top: 4px; |
| } |
|
|
| |
| .crl-layer-badge { |
| display: inline-flex; |
| align-items: center; |
| padding: 2px 10px; |
| border-radius: var(--crl-radius-pill); |
| font-size: 12px; |
| font-weight: 600; |
| font-family: 'JetBrains Mono', monospace; |
| background: rgba(79, 70, 229, 0.1); |
| color: var(--crl-primary); |
| } |
|
|
| a:has(> .crl-layer-badge) { |
| text-decoration: none !important; |
| border-bottom: none !important; |
| box-shadow: none !important; |
| } |
|
|
| a:has(> .crl-layer-badge):hover .crl-layer-badge { |
| background: rgba(79, 70, 229, 0.2); |
| } |
|
|
| |
| .crl-comparison { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 16px; |
| margin: 24px 0; |
| } |
|
|
| @media (max-width: 640px) { |
| .crl-comparison { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| .crl-comparison__side { |
| padding: 20px; |
| border-radius: var(--crl-radius-lg); |
| border: 1px solid var(--border-color); |
| } |
|
|
| .crl-comparison__side--correct { |
| border-color: var(--crl-correct); |
| background: var(--crl-correct-bg); |
| } |
|
|
| .crl-comparison__side--incorrect { |
| border-color: var(--crl-incorrect); |
| background: var(--crl-incorrect-bg); |
| } |
|
|
| |
| .crl-equation { |
| padding: 24px; |
| border-radius: var(--crl-radius-lg); |
| background: var(--surface-bg); |
| border: 1px solid var(--border-color); |
| margin: 24px 0; |
| text-align: center; |
| } |
|
|
| |
| .full-width:has(.html-embed .hero-3d-container) { |
| background-color: transparent !important; |
| } |
| .full-width > .html-embed:has(.hero-3d-container) { |
| margin-bottom: 0; |
| } |
| .full-width > .html-embed:has(.hero-3d-container) .html-embed__card { |
| border-radius: 0; |
| } |
|
|
