|
|
|
|
|
|
|
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:root { |
|
|
|
|
|
--color-text: #1d1d1f; |
|
|
--color-text-secondary: #424245; |
|
|
--color-text-muted: #6e6e73; |
|
|
--color-background: #f5f5f7; |
|
|
|
|
|
--color-surface: #ffffff; |
|
|
|
|
|
--color-border: #d2d2d7; |
|
|
|
|
|
|
|
|
|
|
|
--color-primary: #0071e3; |
|
|
--color-primary-hover: #0077ed; |
|
|
|
|
|
|
|
|
--color-proprietary: #7c3aed; |
|
|
--color-proprietary-bg: rgba(124, 58, 237, 0.08); |
|
|
--color-opensource: #059669; |
|
|
--color-opensource-bg: rgba(5, 150, 105, 0.08); |
|
|
|
|
|
|
|
|
|
|
|
--shadow-sm: none; |
|
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.02); |
|
|
|
|
|
--shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.05); |
|
|
|
|
|
|
|
|
|
|
|
--space-xs: 0.5rem; |
|
|
--space-sm: 1rem; |
|
|
--space-md: 1.5rem; |
|
|
--space-lg: 2rem; |
|
|
--space-xl: 3rem; |
|
|
--space-2xl: 4rem; |
|
|
|
|
|
|
|
|
--radius-sm: 8px; |
|
|
--radius-md: 12px; |
|
|
--radius-lg: 16px; |
|
|
--radius-pill: 980px; |
|
|
|
|
|
|
|
|
--font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif; |
|
|
--font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
html { |
|
|
font-size: 17px; |
|
|
-webkit-font-smoothing: antialiased; |
|
|
-moz-osx-font-smoothing: grayscale; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: var(--font-system); |
|
|
background: var(--color-background); |
|
|
color: var(--color-text); |
|
|
line-height: 1.47059; |
|
|
letter-spacing: -0.022em; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
|
|
|
img { |
|
|
image-rendering: auto; |
|
|
image-rendering: high-quality; |
|
|
transform: translateZ(0); |
|
|
backface-visibility: hidden; |
|
|
-webkit-backface-visibility: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.hero { |
|
|
background: linear-gradient(180deg, #ffffff 0%, var(--color-background) 100%); |
|
|
padding: var(--space-2xl) var(--space-lg); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.hero-preview-img { |
|
|
max-width: 600px; |
|
|
width: 80%; |
|
|
height: auto; |
|
|
margin: var(--space-lg) auto; |
|
|
display: block; |
|
|
border-radius: var(--radius-md); |
|
|
} |
|
|
|
|
|
.hero-content { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
font-size: 12px; |
|
|
font-weight: 600; |
|
|
letter-spacing: 0.02em; |
|
|
text-transform: uppercase; |
|
|
color: var(--color-primary); |
|
|
margin-bottom: var(--space-md); |
|
|
} |
|
|
|
|
|
.badge svg { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
font-size: 72px; |
|
|
font-weight: 700; |
|
|
letter-spacing: -0.035em; |
|
|
line-height: 1.05; |
|
|
margin-bottom: var(--space-sm); |
|
|
color: var(--color-text); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: var(--space-md); |
|
|
} |
|
|
|
|
|
.title-logo { |
|
|
height: 1em; |
|
|
width: auto; |
|
|
vertical-align: middle; |
|
|
} |
|
|
|
|
|
.hero h2 { |
|
|
font-size: 32px; |
|
|
font-weight: 500; |
|
|
color: var(--color-text-secondary); |
|
|
letter-spacing: -0.02em; |
|
|
margin-bottom: var(--space-md); |
|
|
} |
|
|
|
|
|
.hero .description { |
|
|
font-size: 21px; |
|
|
line-height: 1.7; |
|
|
color: var(--color-text-muted); |
|
|
max-width: 1200px; |
|
|
margin: 0 auto var(--space-lg); |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.meta-info { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
|
|
|
align-items: center; |
|
|
gap: var(--space-sm); |
|
|
margin-top: var(--space-md); |
|
|
padding-top: var(--space-md); |
|
|
border-top: 1px solid var(--color-border); |
|
|
} |
|
|
|
|
|
.meta-row { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
gap: var(--space-md); |
|
|
} |
|
|
|
|
|
.meta-row.authors { |
|
|
font-size: 22px; |
|
|
font-weight: 500; |
|
|
color: var(--color-text); |
|
|
margin-bottom: var(--space-xs); |
|
|
} |
|
|
|
|
|
.meta-row.authors a { |
|
|
color: var(--color-text); |
|
|
text-decoration: none; |
|
|
position: relative; |
|
|
padding: 2px 6px; |
|
|
margin: 0 -2px; |
|
|
border-radius: 6px; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
|
|
|
border-bottom: 1.5px solid rgba(0, 113, 227, 0.1); |
|
|
} |
|
|
|
|
|
.meta-row.authors a:hover { |
|
|
color: var(--color-primary); |
|
|
background-color: rgba(0, 113, 227, 0.05); |
|
|
border-bottom-color: var(--color-primary); |
|
|
transform: translateY(-1px); |
|
|
} |
|
|
|
|
|
.meta-row.affiliations { |
|
|
font-size: 17px; |
|
|
color: var(--color-text-secondary); |
|
|
} |
|
|
|
|
|
.affiliation-logo { |
|
|
height: 48px; |
|
|
width: auto; |
|
|
object-fit: contain; |
|
|
transition: transform 0.2s ease, opacity 0.2s ease; |
|
|
opacity: 0.85; |
|
|
} |
|
|
|
|
|
.affiliation-logo:hover { |
|
|
transform: scale(1.1); |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.kcl-logo { |
|
|
height: 60px; |
|
|
} |
|
|
|
|
|
.meta-row.links { |
|
|
margin-top: var(--space-md); |
|
|
padding-top: var(--space-md); |
|
|
border-top: 1px solid var(--color-border); |
|
|
gap: var(--space-md); |
|
|
} |
|
|
|
|
|
.meta-item { |
|
|
font-size: inherit; |
|
|
|
|
|
color: inherit; |
|
|
} |
|
|
|
|
|
|
|
|
.platform-btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
padding: 12px 24px; |
|
|
font-size: 18px; |
|
|
font-weight: 600; |
|
|
border-radius: var(--radius-pill); |
|
|
text-decoration: none; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.platform-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
|
|
|
.platform-btn svg { |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.huggingface-btn { |
|
|
background: linear-gradient(135deg, #FFD21E 0%, #FFA500 100%); |
|
|
color: #000000; |
|
|
} |
|
|
|
|
|
.huggingface-btn:hover { |
|
|
background: linear-gradient(135deg, #FFA500 0%, #FFD21E 100%); |
|
|
} |
|
|
|
|
|
.dataset-btn { |
|
|
background: linear-gradient(135deg, #06B6D4 0%, #0EA5E9 100%); |
|
|
color: #ffffff; |
|
|
} |
|
|
|
|
|
.dataset-btn:hover { |
|
|
background: linear-gradient(135deg, #0EA5E9 0%, #06B6D4 100%); |
|
|
} |
|
|
|
|
|
.github-btn { |
|
|
background: linear-gradient(135deg, #24292e 0%, #000000 100%); |
|
|
color: #ffffff; |
|
|
} |
|
|
|
|
|
.github-btn:hover { |
|
|
background: linear-gradient(135deg, #000000 0%, #24292e 100%); |
|
|
} |
|
|
|
|
|
.arxiv-btn { |
|
|
background: linear-gradient(135deg, #B31B1B 0%, #8B0000 100%); |
|
|
color: #ffffff; |
|
|
} |
|
|
|
|
|
.arxiv-btn:hover { |
|
|
background: linear-gradient(135deg, #8B0000 0%, #B31B1B 100%); |
|
|
} |
|
|
|
|
|
.alphaxiv-btn { |
|
|
background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%); |
|
|
color: #1d1d1f; |
|
|
} |
|
|
|
|
|
.alphaxiv-btn:hover { |
|
|
background: linear-gradient(135deg, #D1D5DB 0%, #E5E7EB 100%); |
|
|
} |
|
|
|
|
|
.notion-btn { |
|
|
background: linear-gradient(135deg, #37352f 0%, #1a1a1a 100%); |
|
|
color: #ffffff; |
|
|
} |
|
|
|
|
|
.notion-btn:hover { |
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #37352f 100%); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.content { |
|
|
max-width: 1800px; |
|
|
width: 98%; |
|
|
margin: 0 auto; |
|
|
padding: 0 var(--space-md) var(--space-2xl); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.section { |
|
|
margin-bottom: var(--space-2xl); |
|
|
padding-top: var(--space-lg); |
|
|
} |
|
|
|
|
|
.section-header { |
|
|
text-align: center; |
|
|
margin-bottom: var(--space-md); |
|
|
} |
|
|
|
|
|
.section-header h2 { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 0.75rem; |
|
|
font-size: 36px; |
|
|
font-weight: 600; |
|
|
letter-spacing: -0.025em; |
|
|
line-height: 1.1; |
|
|
margin-bottom: var(--space-xs); |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
.section-header h2 svg { |
|
|
width: 36px; |
|
|
height: 36px; |
|
|
color: var(--color-text-secondary); |
|
|
} |
|
|
|
|
|
.section-header p { |
|
|
font-size: 19px; |
|
|
color: var(--color-text-muted); |
|
|
max-width: 900px; |
|
|
margin: 0 auto; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
|
|
|
.section-header .model-badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
padding: 2px 10px; |
|
|
border-radius: var(--radius-pill); |
|
|
font-size: 14px; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.section-header .model-badge.proprietary { |
|
|
background: var(--color-proprietary-bg); |
|
|
color: var(--color-proprietary); |
|
|
} |
|
|
|
|
|
.section-header .model-badge.opensource { |
|
|
background: var(--color-opensource-bg); |
|
|
color: var(--color-opensource); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.dimension-toggle { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 10px; |
|
|
margin-bottom: var(--space-md); |
|
|
} |
|
|
|
|
|
.dim-btn, |
|
|
.toggle-btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: 10px 20px; |
|
|
background: var(--color-surface); |
|
|
border: 1px solid var(--color-border); |
|
|
border-radius: var(--radius-pill); |
|
|
color: var(--color-text); |
|
|
font-size: 14px; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
font-family: var(--font-system); |
|
|
} |
|
|
|
|
|
.dim-btn:hover, |
|
|
.toggle-btn:hover { |
|
|
background: var(--color-background); |
|
|
border-color: var(--color-text-muted); |
|
|
} |
|
|
|
|
|
.dim-btn.active, |
|
|
.toggle-btn.active { |
|
|
background: var(--color-text); |
|
|
border-color: var(--color-text); |
|
|
color: #ffffff; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.shared-legend { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: var(--space-md); |
|
|
margin-bottom: var(--space-sm); |
|
|
padding: var(--space-xs) var(--space-md); |
|
|
background: var(--color-surface); |
|
|
border-radius: var(--radius-md); |
|
|
} |
|
|
|
|
|
.legend-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
font-size: 13px; |
|
|
color: var(--color-text-secondary); |
|
|
} |
|
|
|
|
|
.legend-color { |
|
|
width: 12px; |
|
|
height: 3px; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.charts-grid { |
|
|
display: grid; |
|
|
gap: var(--space-md); |
|
|
} |
|
|
|
|
|
.charts-grid.three-col { |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
} |
|
|
|
|
|
.charts-grid.two-col { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
|
|
|
.charts-grid.single { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.chart-card { |
|
|
background: var(--color-surface); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 1rem; |
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.03); |
|
|
|
|
|
box-shadow: var(--shadow-card); |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.chart-card:hover { |
|
|
box-shadow: var(--shadow-card-hover); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.chart-card h3 { |
|
|
font-family: var(--font-mono); |
|
|
font-size: 12px; |
|
|
font-weight: 600; |
|
|
color: var(--color-text-secondary); |
|
|
text-align: center; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.08em; |
|
|
margin-bottom: var(--space-xs); |
|
|
} |
|
|
|
|
|
.chart-card.wide { |
|
|
padding: var(--space-md); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.chart-container { |
|
|
height: 280px; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.chart-container-tall { |
|
|
height: 380px; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.chart-container-double { |
|
|
height: 450px; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.chart-container-benchmarking { |
|
|
height: 850px; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.framework-section { |
|
|
margin-bottom: var(--space-2xl); |
|
|
} |
|
|
|
|
|
.framework-grid { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr; |
|
|
gap: var(--space-xl); |
|
|
justify-items: center; |
|
|
} |
|
|
|
|
|
.framework-card { |
|
|
background: var(--color-surface); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: var(--space-md); |
|
|
box-shadow: var(--shadow-card); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
width: 100%; |
|
|
max-width: 1400px; |
|
|
} |
|
|
|
|
|
.framework-card .placeholder { |
|
|
width: 100%; |
|
|
height: 800px; |
|
|
background: linear-gradient(135deg, #f0f0f2 0%, #e8e8ed 100%); |
|
|
border-radius: var(--radius-md); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: var(--color-text-muted); |
|
|
font-size: 14px; |
|
|
font-weight: 500; |
|
|
border: 2px dashed var(--color-border); |
|
|
} |
|
|
|
|
|
.framework-card h3 { |
|
|
font-size: 20px; |
|
|
font-weight: 600; |
|
|
color: var(--color-text); |
|
|
margin-top: var(--space-sm); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.framework-card img, |
|
|
.framework-card object { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
object-fit: contain; |
|
|
border-radius: var(--radius-md); |
|
|
background: var(--color-background); |
|
|
mix-blend-mode: multiply; |
|
|
|
|
|
image-rendering: auto; |
|
|
image-rendering: high-quality; |
|
|
transform: translateZ(0); |
|
|
backface-visibility: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
.framework-img-wrapper { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
min-height: 400px; |
|
|
border-radius: var(--radius-md); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.framework-img { |
|
|
opacity: 0; |
|
|
transition: opacity 0.6s ease-in-out; |
|
|
} |
|
|
|
|
|
.framework-img.loaded { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.skeleton-loader { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: linear-gradient(90deg, |
|
|
#f0f0f2 0%, |
|
|
#e8e8ed 20%, |
|
|
#f0f0f2 40%, |
|
|
#f0f0f2 100%); |
|
|
background-size: 200% 100%; |
|
|
animation: skeleton-shimmer 1.5s ease-in-out infinite; |
|
|
border-radius: var(--radius-md); |
|
|
} |
|
|
|
|
|
@keyframes skeleton-shimmer { |
|
|
0% { |
|
|
background-position: 200% 0; |
|
|
} |
|
|
|
|
|
100% { |
|
|
background-position: -200% 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.framework-description { |
|
|
font-size: 16px; |
|
|
line-height: 1.6; |
|
|
color: var(--color-text-muted); |
|
|
text-align: center; |
|
|
margin-top: var(--space-sm); |
|
|
padding: 0 var(--space-sm); |
|
|
} |
|
|
|
|
|
.trajectory-description { |
|
|
font-size: 16px; |
|
|
line-height: 1.6; |
|
|
color: var(--color-text-muted); |
|
|
text-align: center; |
|
|
margin-top: 0; |
|
|
margin-bottom: var(--space-md); |
|
|
max-width: 1400px; |
|
|
margin-left: auto; |
|
|
margin-right: auto; |
|
|
padding: 0 var(--space-md); |
|
|
} |
|
|
|
|
|
.section-description { |
|
|
font-size: 16px; |
|
|
line-height: 1.6; |
|
|
color: var(--color-text-muted); |
|
|
text-align: center; |
|
|
margin-top: var(--space-md); |
|
|
max-width: 1200px; |
|
|
margin-left: auto; |
|
|
margin-right: auto; |
|
|
padding: 0 var(--space-md); |
|
|
} |
|
|
|
|
|
.platform-icon { |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.github-btn .platform-icon, |
|
|
.arxiv-btn .platform-icon { |
|
|
filter: brightness(0) invert(1); |
|
|
} |
|
|
|
|
|
.huggingface-btn .platform-icon { |
|
|
filter: none; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.carousel-wrapper { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
.carousel-wrapper::before, |
|
|
.carousel-wrapper::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
bottom: 0; |
|
|
width: 120px; |
|
|
z-index: 2; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.carousel-wrapper::before { |
|
|
left: 0; |
|
|
background: linear-gradient(to right, var(--color-background) 0%, transparent 100%); |
|
|
} |
|
|
|
|
|
.carousel-wrapper::after { |
|
|
right: 0; |
|
|
background: linear-gradient(to left, var(--color-background) 0%, transparent 100%); |
|
|
} |
|
|
|
|
|
.carousel-track { |
|
|
display: flex; |
|
|
gap: var(--space-lg); |
|
|
padding: var(--space-sm) 0; |
|
|
transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); |
|
|
will-change: transform; |
|
|
} |
|
|
|
|
|
.carousel-card { |
|
|
flex: 0 0 66.666%; |
|
|
min-width: 0; |
|
|
background: var(--color-surface); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: var(--space-md); |
|
|
box-shadow: var(--shadow-card); |
|
|
transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease; |
|
|
} |
|
|
|
|
|
.carousel-card.active { |
|
|
transform: scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.carousel-card.side { |
|
|
transform: scale(0.92); |
|
|
opacity: 0.6; |
|
|
} |
|
|
|
|
|
.carousel-card .placeholder { |
|
|
width: 100%; |
|
|
height: 420px; |
|
|
background: linear-gradient(135deg, #f0f0f2 0%, #e8e8ed 100%); |
|
|
border-radius: var(--radius-md); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: var(--color-text-muted); |
|
|
font-size: 16px; |
|
|
font-weight: 500; |
|
|
border: 2px dashed var(--color-border); |
|
|
} |
|
|
|
|
|
.carousel-card h4 { |
|
|
font-size: 18px; |
|
|
font-weight: 600; |
|
|
color: var(--color-text); |
|
|
margin-top: var(--space-sm); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.carousel-card img { |
|
|
width: 100%; |
|
|
height: 420px; |
|
|
object-fit: contain; |
|
|
border-radius: var(--radius-md); |
|
|
image-rendering: auto; |
|
|
image-rendering: high-quality; |
|
|
transform: translateZ(0); |
|
|
backface-visibility: hidden; |
|
|
} |
|
|
|
|
|
.card-caption { |
|
|
font-size: 17px; |
|
|
line-height: 1.6; |
|
|
color: var(--color-text-muted); |
|
|
margin-top: var(--space-md); |
|
|
padding: var(--space-sm); |
|
|
background: rgba(0, 0, 0, 0.02); |
|
|
border-radius: var(--radius-sm); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
|
|
|
.carousel-btn { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
z-index: 3; |
|
|
width: 48px; |
|
|
height: 48px; |
|
|
border-radius: 50%; |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid var(--color-border); |
|
|
color: var(--color-text); |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all 0.2s ease; |
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.carousel-prev { |
|
|
left: 20px; |
|
|
} |
|
|
|
|
|
.carousel-next { |
|
|
right: 20px; |
|
|
} |
|
|
|
|
|
.carousel-btn:hover { |
|
|
background: var(--color-text); |
|
|
color: #ffffff; |
|
|
border-color: var(--color-text); |
|
|
} |
|
|
|
|
|
.carousel-btn svg { |
|
|
width: 22px; |
|
|
height: 22px; |
|
|
} |
|
|
|
|
|
|
|
|
.carousel-dots { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 8px; |
|
|
margin-top: var(--space-md); |
|
|
} |
|
|
|
|
|
.carousel-dot { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background: var(--color-border); |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
.carousel-dot:hover { |
|
|
background: var(--color-text-muted); |
|
|
} |
|
|
|
|
|
.carousel-dot.active { |
|
|
background: var(--color-text); |
|
|
width: 24px; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
footer { |
|
|
text-align: center; |
|
|
padding: var(--space-xl) var(--space-lg); |
|
|
background: var(--color-background); |
|
|
border-top: 1px solid var(--color-border); |
|
|
} |
|
|
|
|
|
footer p { |
|
|
font-size: 13px; |
|
|
color: var(--color-text-muted); |
|
|
} |
|
|
|
|
|
footer a { |
|
|
color: var(--color-primary); |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
footer a:hover { |
|
|
text-decoration: underline; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 1200px) { |
|
|
.charts-grid.three-col { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 900px) { |
|
|
|
|
|
.charts-grid.three-col, |
|
|
.charts-grid.two-col { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.framework-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
font-size: 44px; |
|
|
} |
|
|
|
|
|
.section-header h2 { |
|
|
font-size: 28px; |
|
|
} |
|
|
|
|
|
.content { |
|
|
width: 100%; |
|
|
padding: 0 var(--space-sm) var(--space-2xl); |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 600px) { |
|
|
html { |
|
|
font-size: 16px; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
font-size: 36px; |
|
|
} |
|
|
|
|
|
.hero .subtitle { |
|
|
font-size: 20px; |
|
|
} |
|
|
|
|
|
.section-header h2 { |
|
|
font-size: 24px; |
|
|
} |
|
|
|
|
|
.dimension-toggle { |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.dim-btn, |
|
|
.toggle-btn { |
|
|
padding: 8px 16px; |
|
|
font-size: 13px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.trajectory-container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
background: var(--color-surface); |
|
|
border-radius: var(--radius-lg); |
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); |
|
|
border: 1px solid rgba(0, 0, 0, 0.08); |
|
|
overflow: hidden; |
|
|
|
|
|
position: relative; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.scroll-hint { |
|
|
position: absolute; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
padding: 10px 16px; |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: var(--radius-pill); |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
|
font-size: 13px; |
|
|
font-weight: 500; |
|
|
color: var(--color-text); |
|
|
pointer-events: none; |
|
|
z-index: 10; |
|
|
transition: opacity 0.3s ease, transform 0.3s ease; |
|
|
border: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.scroll-hint.hidden { |
|
|
opacity: 0; |
|
|
transform: translateY(10px); |
|
|
} |
|
|
|
|
|
.scroll-hint svg { |
|
|
animation: bounce 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
|
|
|
0%, |
|
|
100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
50% { |
|
|
transform: translateY(4px); |
|
|
} |
|
|
} |
|
|
|
|
|
.chat-window { |
|
|
height: 750px; |
|
|
|
|
|
overflow-y: auto; |
|
|
|
|
|
padding: var(--space-md); |
|
|
background: #f4f9f4; |
|
|
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.02); |
|
|
|
|
|
font-size: 16px; |
|
|
} |
|
|
|
|
|
.chat-message { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
margin-bottom: var(--space-md); |
|
|
max-width: 85%; |
|
|
|
|
|
animation: fadeIn 0.3s ease; |
|
|
} |
|
|
|
|
|
.chat-message.role-agent { |
|
|
align-self: flex-end; |
|
|
|
|
|
align-items: flex-end; |
|
|
|
|
|
margin-left: auto; |
|
|
} |
|
|
|
|
|
.chat-message.role-environment { |
|
|
align-self: flex-start; |
|
|
|
|
|
align-items: flex-start; |
|
|
margin-right: auto; |
|
|
} |
|
|
|
|
|
.message-role-label { |
|
|
font-size: 13px; |
|
|
color: var(--color-text-muted); |
|
|
margin-bottom: 4px; |
|
|
font-weight: 500; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.05em; |
|
|
padding: 0 4px; |
|
|
} |
|
|
|
|
|
.message-bubble { |
|
|
padding: 14px 18px; |
|
|
border-radius: 12px; |
|
|
line-height: 1.5; |
|
|
position: relative; |
|
|
word-wrap: break-word; |
|
|
overflow-wrap: break-word; |
|
|
max-width: 100%; |
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); |
|
|
font-size: 15px; |
|
|
} |
|
|
|
|
|
.role-agent .message-bubble { |
|
|
background: #0071e3; |
|
|
|
|
|
color: white; |
|
|
border-bottom-right-radius: 2px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.role-agent .message-bubble a { |
|
|
color: white; |
|
|
text-decoration: underline; |
|
|
} |
|
|
|
|
|
.role-agent .message-bubble code { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.role-agent .message-bubble pre { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
.role-agent .message-bubble pre code { |
|
|
background: transparent; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.role-environment .message-bubble { |
|
|
background: white; |
|
|
color: var(--color-text); |
|
|
border: 1px solid var(--color-border); |
|
|
border-bottom-left-radius: 2px; |
|
|
|
|
|
font-family: var(--font-mono); |
|
|
|
|
|
font-size: 13px; |
|
|
} |
|
|
|
|
|
.role-environment .message-bubble pre { |
|
|
margin: 0; |
|
|
white-space: pre-wrap; |
|
|
|
|
|
background: transparent; |
|
|
border: none; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.tool-call-block { |
|
|
margin-top: 10px; |
|
|
padding-top: 10px; |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
|
|
|
|
|
|
.message-bubble pre, |
|
|
.message-bubble code { |
|
|
white-space: pre !important; |
|
|
|
|
|
word-break: normal !important; |
|
|
overflow-x: auto; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.message-bubble table { |
|
|
display: block; |
|
|
|
|
|
overflow-x: auto; |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
margin: 12px 0; |
|
|
font-size: 13px; |
|
|
font-family: var(--font-sans); |
|
|
white-space: nowrap; |
|
|
|
|
|
} |
|
|
|
|
|
.message-bubble th, |
|
|
.message-bubble td { |
|
|
padding: 8px 12px; |
|
|
border: 1px solid rgba(0, 0, 0, 0.1); |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.message-bubble th { |
|
|
background: rgba(0, 0, 0, 0.03); |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.message-bubble tr:nth-child(even) { |
|
|
background: rgba(0, 0, 0, 0.01); |
|
|
} |
|
|
|
|
|
.message-bubble p { |
|
|
margin-bottom: 0.5em; |
|
|
} |
|
|
|
|
|
.message-bubble p:last-child { |
|
|
margin-bottom: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.message-bubble pre { |
|
|
background: #282c34 !important; |
|
|
|
|
|
border-radius: 8px; |
|
|
margin: 12px 0; |
|
|
position: relative; |
|
|
padding-top: 32px; |
|
|
|
|
|
overflow: hidden; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.message-bubble pre::before { |
|
|
content: ""; |
|
|
|
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 30px; |
|
|
background: #21252b; |
|
|
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.5); |
|
|
z-index: 10; |
|
|
|
|
|
} |
|
|
|
|
|
.message-bubble pre code { |
|
|
display: block; |
|
|
padding: 12px 16px; |
|
|
|
|
|
font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; |
|
|
font-size: 13px; |
|
|
line-height: 1.6; |
|
|
background: transparent !important; |
|
|
} |
|
|
|
|
|
|
|
|
.chat-window::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
.chat-window::-webkit-scrollbar-track { |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
.chat-window::-webkit-scrollbar-thumb { |
|
|
background-color: rgba(0, 0, 0, 0.1); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.chat-window::-webkit-scrollbar-thumb:hover { |
|
|
background-color: rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(10px); |
|
|
} |
|
|
|
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
