Spaces:
Running
Running
| /* ===== Reset & Base ===== */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --sidebar-w: 240px; | |
| --color-bg: #ffffff; | |
| --color-bg-alt: #f8f9fa; | |
| --color-text: #1a1a2e; | |
| --color-text-muted: #6b7280; | |
| --color-primary: #4f46e5; | |
| --color-primary-light: #e0e7ff; | |
| --color-accent: #10b981; | |
| --color-border: #e5e7eb; | |
| --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --font-mono: 'JetBrains Mono', monospace; | |
| --radius: 8px; | |
| --shadow: 0 1px 3px rgba(0,0,0,0.08); | |
| } | |
| html { font-size: 16px; scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--font-sans); | |
| color: var(--color-text); | |
| background: var(--color-bg); | |
| line-height: 1.65; | |
| display: flex; | |
| min-height: 100vh; | |
| } | |
| a { color: var(--color-primary); text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| /* ===== Sidebar ===== */ | |
| .sidebar { | |
| position: fixed; | |
| top: 0; left: 0; | |
| width: var(--sidebar-w); | |
| height: 100vh; | |
| background: #fafafa; | |
| border-right: 1px solid var(--color-border); | |
| display: flex; | |
| flex-direction: column; | |
| z-index: 100; | |
| overflow-y: auto; | |
| } | |
| .sidebar-header { | |
| padding: 1.5rem 1.25rem 1rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .sidebar-logo { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: var(--color-primary); | |
| letter-spacing: -0.02em; | |
| } | |
| .sidebar-logo:hover { text-decoration: none; } | |
| .sidebar-toggle { display: none; background: none; border: none; cursor: pointer; } | |
| .sidebar-toggle span { | |
| display: block; width: 20px; height: 2px; | |
| background: var(--color-text); margin: 4px 0; | |
| transition: 0.2s; | |
| } | |
| .sidebar-nav { | |
| list-style: none; | |
| padding: 0 0.75rem; | |
| flex: 1; | |
| } | |
| .nav-item { margin-bottom: 2px; } | |
| .nav-link { | |
| display: block; | |
| padding: 0.5rem 0.75rem; | |
| border-radius: 6px; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| color: var(--color-text); | |
| transition: background 0.15s; | |
| } | |
| .nav-link:hover { background: var(--color-primary-light); text-decoration: none; } | |
| .nav-item.active > .nav-link { | |
| background: var(--color-primary-light); | |
| color: var(--color-primary); | |
| } | |
| .nav-children { | |
| list-style: none; | |
| padding-left: 1rem; | |
| } | |
| .nav-child a { | |
| display: block; | |
| padding: 0.3rem 0.75rem; | |
| font-size: 0.8125rem; | |
| color: var(--color-text-muted); | |
| border-radius: 4px; | |
| } | |
| .nav-child a:hover { color: var(--color-primary); text-decoration: none; } | |
| .nav-child.active a { color: var(--color-primary); font-weight: 500; } | |
| .sidebar-footer { | |
| padding: 1rem 1.25rem; | |
| border-top: 1px solid var(--color-border); | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .sidebar-link { | |
| font-size: 0.8125rem; | |
| color: var(--color-text-muted); | |
| } | |
| /* ===== Page Wrap ===== */ | |
| .page-wrap { | |
| margin-left: var(--sidebar-w); | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| /* ===== Main Content ===== */ | |
| .main-content { | |
| flex: 1; | |
| } | |
| .container { | |
| max-width: 75%; | |
| margin: 0 auto; | |
| padding: 3rem 2rem; | |
| } | |
| .container-wide { | |
| max-width: 85%; | |
| margin: 0 auto; | |
| padding: 3rem 2rem; | |
| } | |
| /* ===== Typography ===== */ | |
| h1, h2, h3, h4 { line-height: 1.3; letter-spacing: -0.01em; } | |
| h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.75rem; } | |
| h2 { font-size: 1.5rem; font-weight: 600; margin: 2rem 0 0.75rem; } | |
| h3 { font-size: 1.125rem; font-weight: 600; margin: 1.5rem 0 0.5rem; } | |
| p { margin-bottom: 1rem; } | |
| .subtitle { | |
| font-size: 1.125rem; | |
| color: var(--color-text-muted); | |
| margin-bottom: 2rem; | |
| } | |
| /* ===== Hero (Home) ===== */ | |
| .hero { | |
| text-align: center; | |
| padding: 5rem 2rem 3rem; | |
| background: linear-gradient(135deg, #f0f0ff 0%, #e8faf0 100%); | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .hero .tagline { | |
| font-size: 1.125rem; | |
| color: var(--color-text-muted); | |
| max-width: 800px; | |
| margin: 0 auto 2.5rem; | |
| line-height: 1.7; | |
| } | |
| .cta-group { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem 1.75rem; | |
| border-radius: var(--radius); | |
| font-size: 0.9375rem; | |
| font-weight: 600; | |
| transition: all 0.15s; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .btn:hover { text-decoration: none; transform: translateY(-1px); } | |
| .btn-primary { | |
| background: var(--color-primary); | |
| color: #fff; | |
| } | |
| .btn-primary:hover { background: #4338ca; } | |
| .btn-accent { | |
| background: var(--color-accent); | |
| color: #fff; | |
| } | |
| .btn-accent:hover { background: #059669; } | |
| .btn-outline { | |
| background: transparent; | |
| color: var(--color-primary); | |
| border: 2px solid var(--color-primary); | |
| } | |
| .btn-outline:hover { background: var(--color-primary-light); } | |
| /* ===== Home Sections ===== */ | |
| .home-section { | |
| padding: 3rem 2rem; | |
| max-width: 75%; | |
| margin: 0 auto; | |
| } | |
| .feature-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 1.5rem; | |
| } | |
| .feature-card { | |
| padding: 1.5rem; | |
| background: var(--color-bg); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius); | |
| } | |
| .feature-card h3 { | |
| margin: 0 0 0.5rem; | |
| font-size: 1rem; | |
| } | |
| .feature-card p { | |
| font-size: 0.875rem; | |
| color: var(--color-text-muted); | |
| margin: 0; | |
| } | |
| /* ===== Research ===== */ | |
| .paper-header { | |
| border-bottom: 1px solid var(--color-border); | |
| padding-bottom: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .paper-header h1 { font-size: 1.75rem; } | |
| .paper-meta { | |
| display: flex; | |
| gap: 1.5rem; | |
| flex-wrap: wrap; | |
| margin-top: 0.75rem; | |
| font-size: 0.875rem; | |
| color: var(--color-text-muted); | |
| } | |
| .abstract-box { | |
| background: var(--color-bg-alt); | |
| border-left: 4px solid var(--color-primary); | |
| padding: 1.5rem; | |
| border-radius: 0 var(--radius) var(--radius) 0; | |
| margin: 1.5rem 0; | |
| } | |
| .abstract-box p { | |
| margin: 0; | |
| font-size: 0.9375rem; | |
| line-height: 1.75; | |
| } | |
| .dimensions-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1rem; | |
| margin: 1.5rem 0; | |
| } | |
| .dimension-card { | |
| padding: 1.25rem; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius); | |
| text-align: center; | |
| } | |
| .dimension-card .icon { font-size: 1.5rem; margin-bottom: 0.5rem; } | |
| .dimension-card h4 { font-size: 0.875rem; margin-bottom: 0.25rem; } | |
| .dimension-card p { font-size: 0.8125rem; color: var(--color-text-muted); margin: 0; } | |
| /* ===== Method page ===== */ | |
| .phase-steps { | |
| list-style: none; | |
| counter-reset: step; | |
| padding: 0; | |
| margin: 1.5rem 0; | |
| } | |
| .phase-steps li { | |
| counter-increment: step; | |
| display: flex; | |
| gap: 1rem; | |
| align-items: flex-start; | |
| padding: 1rem 0; | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .phase-steps li:last-child { border-bottom: none; } | |
| .phase-steps li::before { | |
| content: counter(step); | |
| flex-shrink: 0; | |
| width: 2rem; | |
| height: 2rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--color-primary); | |
| color: #fff; | |
| border-radius: 50%; | |
| font-size: 0.875rem; | |
| font-weight: 700; | |
| } | |
| .step-label { | |
| font-weight: 600; | |
| font-size: 0.9375rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .step-desc { | |
| font-size: 0.875rem; | |
| color: var(--color-text-muted); | |
| line-height: 1.6; | |
| } | |
| .callout { | |
| background: var(--color-primary-light); | |
| border-left: 4px solid var(--color-primary); | |
| padding: 1rem 1.25rem; | |
| border-radius: 0 var(--radius) var(--radius) 0; | |
| margin: 1.5rem 0; | |
| font-size: 0.9375rem; | |
| } | |
| .config-card { | |
| background: var(--color-bg-alt); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius); | |
| padding: 1.25rem 1.5rem; | |
| margin: 1.5rem 0; | |
| } | |
| .config-card h4 { | |
| margin: 0 0 0.75rem; | |
| font-size: 0.9375rem; | |
| } | |
| .config-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 0.5rem; | |
| } | |
| .config-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0.375rem 0; | |
| font-size: 0.875rem; | |
| } | |
| .config-role { color: var(--color-text-muted); } | |
| .config-value { font-weight: 600; font-family: var(--font-mono); font-size: 0.8125rem; } | |
| .config-note { | |
| margin: 0.75rem 0 0; | |
| font-size: 0.8125rem; | |
| color: var(--color-text-muted); | |
| } | |
| /* ===== Formula toggles ===== */ | |
| details.formula-toggle { | |
| margin: 1rem 0; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| } | |
| details.formula-toggle summary { | |
| padding: 0.625rem 1rem; | |
| background: var(--color-bg-alt); | |
| cursor: pointer; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| color: var(--color-primary); | |
| list-style: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| details.formula-toggle summary::-webkit-details-marker { display: none; } | |
| details.formula-toggle summary::before { | |
| content: '\25B6'; | |
| font-size: 0.625rem; | |
| transition: transform 0.2s; | |
| } | |
| details.formula-toggle[open] summary::before { | |
| transform: rotate(90deg); | |
| } | |
| details.formula-toggle .formula-content { | |
| padding: 1.25rem 1.5rem; | |
| font-size: 0.9375rem; | |
| line-height: 1.75; | |
| border-top: 1px solid var(--color-border); | |
| } | |
| details.formula-toggle .formula-content p { | |
| margin-bottom: 0.75rem; | |
| } | |
| details.formula-toggle .formula-content p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .page-nav { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 2.5rem; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid var(--color-border); | |
| } | |
| /* ===== Method / Results figures ===== */ | |
| .figure-row { | |
| display: flex; | |
| gap: 1.5rem; | |
| align-items: flex-start; | |
| margin: 1.5rem 0; | |
| } | |
| .figure-row figure { | |
| flex: 1; | |
| min-width: 0; | |
| margin: 0; | |
| } | |
| figure { | |
| margin: 1.5rem 0; | |
| } | |
| figure img { | |
| max-width: 100%; | |
| border-radius: var(--radius); | |
| border: 1px solid var(--color-border); | |
| } | |
| figcaption { | |
| margin-top: 0.5rem; | |
| font-size: 0.8125rem; | |
| color: var(--color-text-muted); | |
| text-align: center; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.875rem; | |
| margin: 1.5rem 0; | |
| } | |
| th, td { | |
| padding: 0.625rem 0.75rem; | |
| border: 1px solid var(--color-border); | |
| text-align: left; | |
| } | |
| th { background: var(--color-bg-alt); font-weight: 600; } | |
| /* ===== Demo ===== */ | |
| .demo-tabs { | |
| display: flex; | |
| border-bottom: 2px solid var(--color-border); | |
| margin-bottom: 1.5rem; | |
| } | |
| .demo-tab { | |
| padding: 0.75rem 1.5rem; | |
| font-size: 0.9375rem; | |
| font-weight: 500; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| color: var(--color-text-muted); | |
| border-bottom: 2px solid transparent; | |
| margin-bottom: -2px; | |
| transition: 0.15s; | |
| } | |
| .demo-tab:hover { color: var(--color-text); } | |
| .demo-tab.active { | |
| color: var(--color-primary); | |
| border-bottom-color: var(--color-primary); | |
| } | |
| .demo-panel { display: none; } | |
| .demo-panel.active { display: block; } | |
| .demo-description { | |
| margin-bottom: 1.5rem; | |
| padding: 1rem 1.25rem; | |
| background: var(--color-bg-alt); | |
| border-radius: var(--radius); | |
| font-size: 0.9375rem; | |
| } | |
| /* Chat UI */ | |
| .chat-container { | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| background: #fff; | |
| } | |
| .chat-header { | |
| padding: 0.75rem 1rem; | |
| background: var(--color-bg-alt); | |
| border-bottom: 1px solid var(--color-border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .chat-header h4 { margin: 0; font-size: 0.875rem; } | |
| .chat-progress { | |
| font-size: 0.75rem; | |
| color: var(--color-text-muted); | |
| } | |
| .chat-messages { | |
| height: 400px; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .chat-msg { | |
| max-width: 80%; | |
| padding: 0.625rem 0.875rem; | |
| border-radius: 12px; | |
| font-size: 0.875rem; | |
| line-height: 1.5; | |
| word-wrap: break-word; | |
| } | |
| .chat-msg.system { | |
| align-self: flex-start; | |
| background: var(--color-bg-alt); | |
| border: 1px solid var(--color-border); | |
| } | |
| .chat-msg.user { | |
| align-self: flex-end; | |
| background: var(--color-primary); | |
| color: #fff; | |
| } | |
| .chat-msg.info { | |
| align-self: center; | |
| background: var(--color-primary-light); | |
| color: var(--color-primary); | |
| font-size: 0.8125rem; | |
| text-align: center; | |
| } | |
| .chat-typing { | |
| align-self: flex-start; | |
| display: flex; | |
| gap: 4px; | |
| padding: 0.625rem 0.875rem; | |
| } | |
| .chat-typing span { | |
| width: 6px; height: 6px; | |
| background: var(--color-text-muted); | |
| border-radius: 50%; | |
| animation: bounce 1.2s infinite; | |
| } | |
| .chat-typing span:nth-child(2) { animation-delay: 0.15s; } | |
| .chat-typing span:nth-child(3) { animation-delay: 0.3s; } | |
| @keyframes bounce { | |
| 0%, 60%, 100% { transform: translateY(0); } | |
| 30% { transform: translateY(-6px); } | |
| } | |
| /* Agent terminal log viewer */ | |
| .agent-terminal { | |
| border: 1px solid #2d2d2d; | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| background: #1e1e1e; | |
| } | |
| .terminal-header { | |
| padding: 0.5rem 1rem; | |
| background: #2d2d2d; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .terminal-title { | |
| font-family: var(--font-mono); | |
| font-size: 0.8125rem; | |
| color: #a0a0a0; | |
| } | |
| .terminal-header .chat-progress { | |
| color: #7ec699; | |
| } | |
| .agent-terminal .terminal-body { | |
| height: 420px; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| margin: 0; | |
| font-family: var(--font-mono); | |
| font-size: 0.78rem; | |
| line-height: 1.6; | |
| color: #d4d4d4; | |
| background: #1e1e1e; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .chat-input { | |
| display: flex; | |
| border-top: 1px solid var(--color-border); | |
| } | |
| .chat-input input { | |
| flex: 1; | |
| padding: 0.75rem 1rem; | |
| border: none; | |
| font-size: 0.875rem; | |
| font-family: var(--font-sans); | |
| outline: none; | |
| } | |
| .chat-input button { | |
| padding: 0.75rem 1.25rem; | |
| background: var(--color-primary); | |
| color: #fff; | |
| border: none; | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| cursor: pointer; | |
| transition: background 0.15s; | |
| } | |
| .chat-input button:hover { background: #4338ca; } | |
| .chat-input button:disabled { opacity: 0.5; cursor: not-allowed; } | |
| /* Agent submode selector */ | |
| .agent-submode-selector { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .agent-submode-card { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 0.375rem; | |
| padding: 1.25rem; | |
| border: 2px solid var(--color-border); | |
| border-radius: var(--radius); | |
| background: #fff; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: border-color 0.15s, box-shadow 0.15s; | |
| } | |
| .agent-submode-card:hover { | |
| border-color: var(--color-primary); | |
| } | |
| .agent-submode-card.active { | |
| border-color: var(--color-primary); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); | |
| } | |
| .submode-icon { | |
| font-size: 1.5rem; | |
| } | |
| .submode-title { | |
| font-weight: 600; | |
| font-size: 0.9375rem; | |
| } | |
| .submode-desc { | |
| font-size: 0.8125rem; | |
| color: var(--color-text-muted); | |
| line-height: 1.45; | |
| } | |
| /* Agent test form */ | |
| .agent-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| font-size: 0.8125rem; | |
| font-weight: 500; | |
| margin-bottom: 0.25rem; | |
| } | |
| .form-group input, | |
| .form-group textarea, | |
| .form-group select { | |
| width: 100%; | |
| padding: 0.5rem 0.75rem; | |
| border: 1px solid var(--color-border); | |
| border-radius: 6px; | |
| font-size: 0.875rem; | |
| font-family: var(--font-sans); | |
| } | |
| .form-group textarea { | |
| font-family: var(--font-mono); | |
| font-size: 0.8125rem; | |
| min-height: 120px; | |
| resize: vertical; | |
| } | |
| .form-row { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .label-hint { | |
| font-weight: 400; | |
| color: var(--color-text-muted); | |
| } | |
| /* Results card */ | |
| .results-card { | |
| padding: 1.5rem; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius); | |
| background: #fff; | |
| margin-top: 1.5rem; | |
| } | |
| .results-card h3 { margin: 0 0 1rem; font-size: 1.125rem; } | |
| .results-note { | |
| margin: 1rem 0 0; | |
| font-size: 0.8125rem; | |
| color: var(--color-text-muted); | |
| } | |
| .score-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1rem; | |
| } | |
| .score-cell { | |
| text-align: center; | |
| padding: 1rem; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius); | |
| background: var(--color-bg-alt); | |
| } | |
| .score-cell .score-label { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--color-text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .score-cell .score-value { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| color: var(--color-primary); | |
| margin: 0.25rem 0; | |
| } | |
| .score-cell .score-sub { | |
| font-size: 0.75rem; | |
| color: var(--color-text-muted); | |
| } | |
| /* Leaderboard */ | |
| .leaderboard-controls { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .leaderboard-filter label { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--color-text-muted); | |
| display: block; | |
| margin-bottom: 0.25rem; | |
| } | |
| .leaderboard-filter select { | |
| padding: 0.375rem 0.625rem; | |
| border: 1px solid var(--color-border); | |
| border-radius: 6px; | |
| font-size: 0.8125rem; | |
| font-family: var(--font-sans); | |
| background: #fff; | |
| } | |
| .leaderboard-table-wrap { | |
| overflow-x: auto; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius); | |
| } | |
| .leaderboard-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.875rem; | |
| } | |
| .leaderboard-table th, | |
| .leaderboard-table td { | |
| padding: 0.625rem 0.75rem; | |
| border-bottom: 1px solid var(--color-border); | |
| text-align: left; | |
| } | |
| .leaderboard-table th { | |
| background: var(--color-bg-alt); | |
| font-weight: 600; | |
| font-size: 0.8125rem; | |
| position: sticky; | |
| top: 0; | |
| } | |
| .leaderboard-table th.sortable { | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .leaderboard-table th.sortable:hover { | |
| color: var(--color-primary); | |
| } | |
| .leaderboard-table th.active { | |
| color: var(--color-primary); | |
| } | |
| .leaderboard-table th.active::after { | |
| content: ' \25BC'; | |
| font-size: 0.625rem; | |
| } | |
| .leaderboard-table tbody tr:hover { | |
| background: var(--color-primary-light); | |
| } | |
| .leaderboard-table .lb-rank { | |
| width: 2.5rem; | |
| text-align: center; | |
| font-weight: 600; | |
| color: var(--color-text-muted); | |
| } | |
| .leaderboard-table .lb-score { | |
| text-align: right; | |
| font-family: var(--font-mono); | |
| font-size: 0.8125rem; | |
| width: 5rem; | |
| } | |
| .leaderboard-table .lb-type { | |
| width: 7rem; | |
| } | |
| .lb-badge { | |
| display: inline-block; | |
| font-size: 0.6875rem; | |
| font-weight: 600; | |
| padding: 0.125rem 0.5rem; | |
| border-radius: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.03em; | |
| } | |
| .lb-badge.baseline { background: #dbeafe; color: #1e40af; } | |
| .lb-badge.prompting { background: #dcfce7; color: #166534; } | |
| .lb-badge.finetuned { background: #fef3c7; color: #92400e; } | |
| .lb-badge.rag { background: #f3e8ff; color: #6b21a8; } | |
| .lb-badge.commercial { background: #fce7f3; color: #9d174d; } | |
| .lb-badge.community { background: #e0e7ff; color: #3730a3; } | |
| .lb-rank-1 { color: #d97706; font-weight: 700; } | |
| .lb-rank-2 { color: #6b7280; font-weight: 700; } | |
| .lb-rank-3 { color: #92400e; font-weight: 700; } | |
| .lb-human-row { | |
| background: #fffbeb; | |
| } | |
| .leaderboard-footnote { | |
| margin-top: 0.75rem; | |
| font-size: 0.75rem; | |
| color: var(--color-text-muted); | |
| line-height: 1.6; | |
| } | |
| /* Python API section */ | |
| .python-api-section { | |
| padding-bottom: 2rem; | |
| } | |
| .python-api-section h2 { | |
| margin-bottom: 0.5rem; | |
| } | |
| .code-block { | |
| margin: 1rem 0; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| } | |
| .code-block .code-header { | |
| padding: 0.5rem 0.75rem; | |
| background: var(--color-bg-alt); | |
| border-bottom: 1px solid var(--color-border); | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--color-text-muted); | |
| } | |
| .code-block pre { | |
| margin: 0; | |
| border-radius: 0; | |
| background: #1e1e2e; | |
| color: #cdd6f4; | |
| padding: 1rem 1.25rem; | |
| font-size: 0.8125rem; | |
| line-height: 1.6; | |
| } | |
| .code-block pre code { | |
| background: none; | |
| padding: 0; | |
| color: inherit; | |
| font-size: inherit; | |
| } | |
| /* ===== Contact / Cite ===== */ | |
| .bibtex-block { | |
| background: #1e1e2e; | |
| color: #cdd6f4; | |
| padding: 1.25rem; | |
| border-radius: var(--radius); | |
| font-family: var(--font-mono); | |
| font-size: 0.8125rem; | |
| line-height: 1.6; | |
| overflow-x: auto; | |
| position: relative; | |
| } | |
| .bibtex-block pre { | |
| background: transparent; | |
| color: inherit; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .copy-btn { | |
| position: absolute; | |
| top: 0.5rem; | |
| right: 0.5rem; | |
| padding: 0.25rem 0.5rem; | |
| background: rgba(255,255,255,0.1); | |
| border: 1px solid rgba(255,255,255,0.15); | |
| border-radius: 4px; | |
| color: #cdd6f4; | |
| font-size: 0.75rem; | |
| cursor: pointer; | |
| } | |
| .copy-btn:hover { background: rgba(255,255,255,0.2); } | |
| .contact-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| margin: 1.5rem 0; | |
| } | |
| .contact-card { | |
| padding: 1.25rem; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius); | |
| } | |
| .contact-card h4 { margin: 0 0 0.5rem; font-size: 0.9375rem; } | |
| .contact-card p { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); } | |
| /* ===== Footer ===== */ | |
| .site-footer { | |
| border-top: 1px solid var(--color-border); | |
| padding: 1.5rem 2rem; | |
| text-align: center; | |
| font-size: 0.8125rem; | |
| color: var(--color-text-muted); | |
| } | |
| /* ===== Code ===== */ | |
| code { | |
| font-family: var(--font-mono); | |
| font-size: 0.85em; | |
| background: var(--color-bg-alt); | |
| padding: 0.15em 0.35em; | |
| border-radius: 4px; | |
| } | |
| pre { | |
| background: var(--color-bg-alt); | |
| padding: 1rem; | |
| border-radius: var(--radius); | |
| overflow-x: auto; | |
| font-size: 0.8125rem; | |
| } | |
| /* ===== Responsive ===== */ | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| transition: transform 0.25s; | |
| } | |
| .sidebar.open { transform: translateX(0); } | |
| .sidebar-toggle { display: block; } | |
| .page-wrap { margin-left: 0; } | |
| .hero h1 { font-size: 1.75rem; } | |
| .dimensions-grid { grid-template-columns: 1fr; } | |
| .figure-row { flex-direction: column; } | |
| .config-grid { grid-template-columns: 1fr; } | |
| .chat-messages { height: 300px; } | |
| .score-grid { grid-template-columns: 1fr; } | |
| .form-row { flex-direction: column; } | |
| .leaderboard-controls { flex-direction: column; } | |
| } | |