body {font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; margin: 0; color: #222; background: #f7f7fb;}
header.hero {background: linear-gradient(135deg, #0b6ce3, #66c4ff); color: white; padding: 3rem 1.5rem; text-align: center;}
header.hero h1 {margin-bottom: 0.5rem; font-size: 2.5rem;}
header.hero .tagline {margin: 0 auto 1rem; max-width: 50rem; font-size: 1.1rem;}
header.hero .timestamp {margin: 0; font-style: italic; opacity: 0.85;}
section {padding: 2rem 1.5rem; max-width: 70rem; margin: 0 auto;}
.metrics {display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;}
.metric {background: white; border-radius: 0.75rem; padding: 1.5rem; flex: 1 1 12rem; text-align: center; box-shadow: 0 12px 30px rgba(11, 108, 227, 0.1);}
.metric .value {display: block; font-size: 2rem; font-weight: 700; color: #0b6ce3;}
.metric .label {font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; color: #555;}
.leaderboard-section {background: white; border-radius: 1rem; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);}
.leaderboard-section .leaderboard-text {padding-bottom: 1rem;}
.leaderboard-table {overflow-x: auto; padding: 0 1rem 2rem;}
table.leaderboard {border-collapse: collapse; width: 100%; background: white;}
table.leaderboard th, table.leaderboard td {padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; text-align: left;}
table.leaderboard thead {background: #f1f5f9;}
table.leaderboard tbody tr:nth-child(even) {background: #f8fafc;}
.leaderboard-bottom {padding: 0 1rem 2.5rem;}
.leaderboard-bottom h3 {margin: 0 0 0.5rem; font-size: 1.35rem;}
.leaderboard-bottom p {margin: 0 0 1rem; color: #475569;}
.leaderboard-bottom-table tbody tr:nth-child(even) {background: #f1f5f9;}
.chart {text-align: center; padding: 0 1rem 2rem;}
.chart img {max-width: 100%; height: auto; border-radius: 0.75rem; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);}
.synset-progress {background: white; border-radius: 1rem; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); margin-top: 2rem; padding-bottom: 2rem;}
.synset-progress .synset-header {padding: 2rem 1.5rem 0;}
.synset-progress .synset-header p {margin: 0.5rem 0 0; color: #475569;}
.synset-progress .synset-top {padding: 0 1.5rem 1.5rem;}
.synset-progress .synset-top h3 {margin-bottom: 0.5rem;}
.synset-progress .synset-top a {color: #0b6ce3; font-weight: 600; text-decoration: none;}
.synset-progress .synset-top a:hover {text-decoration: underline;}
.synset-eta {padding: 1rem 1.5rem 0; text-align: center; font-style: italic; color: #475569;}
.synset-not-found {padding: 0 1.5rem 1.5rem;}
.synset-not-found h4 {margin-bottom: 0.5rem;}
.synset-not-found ul {margin: 0; padding-left: 1.25rem; color: #475569;}
.synset-table {width: 100%; border-collapse: collapse; background: white;}
.synset-table th, .synset-table td {padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; text-align: left;}
.synset-table thead {background: #f8fafc;}
.synset-table tbody tr:nth-child(even) {background: #f8fafc;}
.methodology {background: #eef2ff; border-radius: 1rem;}
.methodology ol {line-height: 1.7;}
.experiments {background: white; border-radius: 1rem; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); margin-top: 2rem; padding-bottom: 2rem;}
.experiments h2 {margin-top: 0; padding: 2rem 1.5rem 0;}
.experiments p {padding: 0 1.5rem;}
.experiments-metrics {display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.5rem;}
.experiments-accuracy {font-style: italic; color: #334155;}
.experiments-table {width: calc(100% - 3rem); margin: 1rem 1.5rem; border-collapse: collapse;}
.experiments-table th, .experiments-table td {border-bottom: 1px solid #e5e7eb; padding: 0.75rem 1rem; text-align: left;}
.experiments-table thead {background: #f1f5f9;}
.downloads ul {list-style: none; padding: 0;}
.downloads li {margin: 0.5rem 0;}
.downloads a {color: #0b6ce3; text-decoration: none; font-weight: 600;}
.downloads a:hover {text-decoration: underline;}
footer {text-align: center; padding: 2rem 1.5rem 3rem; color: #6b7280;}
body.synset-page {font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; margin: 0; color: #1f2937; background: #f7f7fb;}
.synset-hero {background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; padding: 2.5rem 1.5rem; text-align: center;}
.synset-hero a {color: white; opacity: 0.85; text-decoration: none;}
.synset-hero a:hover {opacity: 1; text-decoration: underline;}
.synset-hero h1 {margin: 0.5rem 0 0; font-size: 2.25rem;}
.synset-hero .synset-id {font-family: 'Fira Code', 'SFMono-Regular', Consolas, monospace; margin: 0.5rem 0; opacity: 0.85;}
.synset-hero .synset-count {margin-top: 0.5rem; font-weight: 600;}
.synset-content {max-width: 70rem; margin: 0 auto; padding: 2rem 1.5rem 3rem;}
table.synset-products {width: 100%; border-collapse: collapse; background: white; border-radius: 1rem; overflow: hidden; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);}
table.synset-products th, table.synset-products td {padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top;}
table.synset-products thead {background: #f1f5f9;}
table.synset-products tbody tr:nth-child(even) {background: #f8fafc;}
.synset-products details {color: #334155;}
@media (max-width: 700px) {.metrics {flex-direction: column;} header.hero {padding: 2.5rem 1rem;} header.hero h1 {font-size: 2rem;} .synset-content {padding: 1.5rem 1rem 2rem;}}