:root { --ink: #14243d; --ink-soft: #263852; --navy-deep: #071a33; --paper: #e4e9ef; --paper-deep: #edf1f5; --card: #f5f7fa; --white: #ffffff; --muted: #65748b; --annotation: #8a97a9; --line: #dce3ea; --blue: #7fa8ff; --highlight: #5574c7; --mint: #72e1be; --mint-deep: #2d8b72; --orange: #ff775c; --shadow: 0 18px 46px rgba(20, 36, 61, 0.08); --display: "Inter", sans-serif; --mono: "Inter", sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--display); font-size: 15px; line-height: 1.6; } button, a { font: inherit; } a { color: inherit; text-decoration: none; } button { color: inherit; } button, a { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; } .page-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } .site-header { position: sticky; z-index: 50; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 82px; padding: 10px 28px; border-bottom: 1px solid var(--line); background: rgba(245, 247, 250, 0.96); backdrop-filter: blur(16px); } .brand, .footer-brand { display: inline-flex; align-items: center; gap: 16px; width: max-content; } .brand img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--white); } .brand span, .footer-brand span { display: grid; line-height: 1.1; } .brand strong, .footer-brand strong { font-size: 13px; font-weight: 700; } .brand small, .footer-brand small { margin-top: 4px; color: var(--annotation); font: 500 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; } .primary-nav { align-self: stretch; display: flex; align-items: stretch; gap: 30px; } .nav-link { position: relative; padding: 0; border: 0; background: transparent; cursor: pointer; font: 600 11px/1 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; } .nav-link::after { position: absolute; right: 0; bottom: -10px; left: 0; height: 3px; background: linear-gradient(90deg, var(--mint), var(--blue)); content: ""; opacity: 0; transform: scaleX(0.4); transition: 180ms ease; } .nav-link.is-active::after { opacity: 1; transform: scaleX(1); } .header-links { display: flex; justify-content: flex-end; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 600; } .header-links > a:hover { color: var(--ink); } .rules-link { margin-right: 8px; } .header-github { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: rgba(255, 255, 255, 0.7); } .header-github svg, .repo-lockup svg { width: 17px; height: 17px; fill: currentColor; } .header-github:hover { border-color: var(--ink); background: var(--white); } .header-cta { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--ink); border-radius: 6px; color: var(--ink); background: var(--white); box-shadow: 3px 3px 0 rgba(20, 36, 61, 0.18); } .view[hidden] { display: none !important; } .view.is-active { animation: view-in 300ms ease both; } @keyframes view-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } .hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(380px, 0.82fr); gap: clamp(40px, 7vw, 92px); align-items: center; min-height: 660px; margin-block: 24px; padding: 76px clamp(28px, 4vw, 58px) 84px; border: 1px solid rgba(20, 36, 61, 0.09); border-radius: 12px; background: var(--card); } .hero::before { position: absolute; z-index: -2; inset: 0; background: url("assets/aml-textile-light.png") center / cover no-repeat; content: ""; opacity: 0.5; } .hero::after { position: absolute; z-index: -1; top: 9%; bottom: 9%; left: 0; width: 3px; background: var(--mint); content: ""; } .eyebrow, .section-index, .challenge-topline, .benchmark-tag, .release-pill, .result-panel-head > div > span, .category-panel > span { font: 600 11px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; } .eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 24px; color: var(--highlight); } .eyebrow > span { width: 30px; height: 2px; background: currentColor; } .hero h1, .leaderboard-hero h1 { margin: 0; line-height: 0.98; letter-spacing: -0.055em; } .hero h1 { font-size: clamp(44px, 4.8vw, 68px); } .hero h1 > span { white-space: nowrap; } .hero h1 em, .leaderboard-hero h1 em { color: var(--ink); font-style: normal; box-shadow: inset 0 -0.16em rgba(127, 168, 255, 0.34); } .hero-lede { max-width: 680px; margin: 28px 0 0; color: #3f4d60; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.7; } .hero-actions, .closing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .button { display: inline-flex; justify-content: center; align-items: center; gap: 14px; min-height: 48px; padding: 12px 18px; border: 1px solid var(--ink); border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; } .button:hover { transform: translate(-2px, -2px); } .button-primary { color: var(--white); background: var(--ink); box-shadow: 4px 4px 0 rgba(114, 225, 190, 0.72); } .button-primary:hover { box-shadow: 7px 7px 0 rgba(114, 225, 190, 0.72); } .button-secondary { background: transparent; } .button-secondary:hover { background: var(--white); box-shadow: 4px 4px 0 var(--ink); } .hero-note { margin: 18px 0 0; color: var(--muted); font: 500 11px/1.5 var(--mono); } .challenge-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 466px; padding: 27px; border: 1px solid var(--ink); border-radius: 10px; color: var(--white); background: linear-gradient(rgba(114, 225, 190, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(114, 225, 190, 0.07) 1px, transparent 1px), var(--navy-deep); background-size: 36px 36px; box-shadow: 10px 10px 0 rgba(114, 225, 190, 0.62); transition: transform 180ms ease, box-shadow 180ms ease; } .challenge-card::before, .challenge-card::after { position: absolute; border: 1px solid rgba(114, 225, 190, 0.32); border-radius: 50%; content: ""; } .challenge-card::before { top: 46px; right: -84px; width: 250px; height: 250px; } .challenge-card::after { top: 77px; right: -53px; width: 186px; height: 186px; } .challenge-card:hover { transform: translate(-3px, -3px); box-shadow: 14px 14px 0 rgba(114, 225, 190, 0.62); } .challenge-topline, .challenge-footer, .challenge-title, .countdown { position: relative; z-index: 1; } .challenge-topline, .challenge-footer { display: flex; justify-content: space-between; align-items: center; } .challenge-topline { color: #b6c4d8; } .challenge-topline > span:first-child { display: flex; align-items: center; gap: 8px; } .challenge-brand { display: flex; align-items: center; gap: 14px; } .challenge-brand > img { width: 52px; height: 52px; object-fit: contain; border-radius: 7px; background: var(--white); } .challenge-brand > span { display: flex; align-items: center; gap: 8px; } .challenge-topline i, .release-pill i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(114, 225, 190, 0.14); } .challenge-title { margin-top: 56px; } .challenge-title p { margin: 0 0 10px; color: var(--mint); font: 600 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; } .challenge-title h2 { margin: 0; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.12; letter-spacing: -0.04em; } .countdown { display: flex; align-items: flex-start; gap: 9px; margin-top: 36px; } .countdown > span { display: grid; gap: 7px; min-width: 54px; } .countdown strong { font: 600 clamp(27px, 3vw, 40px)/1 var(--mono); letter-spacing: -0.05em; } .countdown small, .challenge-footer small { color: #9cacbf; font: 500 9px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; } .countdown b { padding-top: 2px; color: var(--orange); font: 500 28px/1 var(--mono); } .challenge-footer { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.16); } .challenge-footer > span:first-child { display: grid; gap: 8px; } .challenge-footer strong { font: 600 14px/1 var(--mono); } .challenge-arrow { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--mint); color: var(--mint); font-size: 19px; } .signal-strip { border-block: 1px solid var(--line); background: var(--card); } .signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .signal-grid > span { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 24px 20px; border-right: 1px solid var(--line); } .signal-grid > span::before { position: absolute; top: 18px; bottom: 18px; left: 0; width: 3px; background: var(--mint); content: ""; } .signal-grid > span:first-child { border-left: 1px solid var(--line); } .signal-grid strong { font-size: 25px; line-height: 1; letter-spacing: -0.05em; } .signal-grid small { font: 500 10px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } .section { padding-block: 116px; } .section-heading { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 46px; align-items: start; } .section-index { margin: 8px 0 0; color: var(--highlight); } .section-heading h2, .protocol-grid h2, .capability-heading h2, .closing-grid h2 { margin: 0; font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -0.045em; } .section-heading > div > p { max-width: 760px; margin: 28px 0 0; color: var(--muted); font-size: 17px; line-height: 1.78; } .principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 70px; } .principle-grid article { position: relative; min-height: 250px; padding: 30px; border: 1px solid var(--line); border-left: 3px solid var(--mint); border-radius: 8px; background: var(--card); } .principle-grid article > span, .benchmark-number { color: var(--highlight); font: 600 12px/1 var(--mono); } .principle-grid h3 { margin: 58px 0 12px; font-size: 21px; } .principle-grid p { margin: 0; color: var(--muted); font-size: 14px; } .protocol-section { position: relative; overflow: hidden; padding-block: 112px; color: var(--white); background: var(--navy-deep); } .protocol-section::before { position: absolute; inset: 0; background: linear-gradient(rgba(114, 225, 190, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(114, 225, 190, 0.045) 1px, transparent 1px); background-size: 44px 44px; content: ""; } .protocol-grid { position: relative; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 76px; align-items: center; } .section-index-light { color: var(--mint); } .protocol-grid h2 { margin-top: 24px; } .protocol-grid h2 em { color: var(--mint); font-style: normal; } .protocol-grid > div > p:not(.section-index) { margin: 26px 0 0; color: #b9c6d6; font-size: 16px; } .protocol-grid > div > a { display: inline-flex; gap: 10px; margin-top: 30px; padding-bottom: 4px; border-bottom: 1px solid var(--mint); color: var(--mint); font: 600 12px/1.5 var(--mono); } .protocol-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; } .protocol-flow li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 255px; padding: 22px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.04); } .protocol-flow li:not(:last-child)::after { position: absolute; z-index: 1; top: 50%; right: -15px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--ink); background: var(--white); content: "→"; font-size: 11px; } .protocol-flow li > span, .protocol-flow li > small { font: 500 9px/1.35 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; } .protocol-flow li > span { margin-bottom: auto; color: #8fa2b9; } .protocol-flow li > strong { margin-bottom: 11px; font-size: 24px; } .candidate-step { border-top-color: var(--mint) !important; } .platform-step { border-top-color: var(--orange) !important; } .compact-heading { margin-bottom: 64px; } .benchmark-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .benchmark-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 610px; padding: 34px; border: 1px solid var(--ink); border-left: 3px solid var(--mint); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); } .benchmark-card::after { position: absolute; top: -70px; right: -70px; width: 220px; height: 220px; border: 34px solid rgba(49, 94, 251, 0.08); border-radius: 50%; content: ""; } .coding-card::after { border-color: rgba(255, 107, 66, 0.1); } .benchmark-card-head { display: flex; justify-content: space-between; align-items: center; } .benchmark-tag { padding: 7px 10px; border: 1px solid currentColor; color: var(--highlight); } .coding-card .benchmark-tag, .coding-card .benchmark-number { color: var(--orange); } .benchmark-card h3 { margin: 76px 0 12px; font-size: clamp(30px, 3.2vw, 45px); letter-spacing: -0.045em; } .benchmark-card > p { max-width: 530px; margin: 0; color: var(--muted); font-size: 15px; } .benchmark-metrics { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 34px; border-block: 1px solid var(--line); } .benchmark-metrics > span { display: grid; gap: 5px; padding: 21px 0; } .benchmark-metrics > span + span { padding-left: 23px; border-left: 1px solid var(--line); } .benchmark-metrics strong { font-size: 22px; } .benchmark-metrics small, .coding-types small { color: var(--muted); font: 500 10px/1.4 var(--mono); text-transform: uppercase; } .dataset-list, .coding-types { margin: 29px 0 0; padding: 0; list-style: none; } .dataset-list { display: flex; flex-wrap: wrap; gap: 8px; } .dataset-list li { padding: 7px 9px; border: 1px solid var(--line); background: var(--paper); font: 500 10px/1 var(--mono); } .coding-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .coding-types li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 16px; border: 1px solid var(--line); background: var(--paper); } .coding-types li > span { grid-row: 1 / 3; color: var(--orange); font: 600 10px/1.4 var(--mono); } .coding-types strong { font-size: 12px; } .coding-types small { font-size: 8px; } .benchmark-card > button { align-self: flex-start; margin-top: auto; padding: 10px 0 5px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; cursor: pointer; font: 600 11px/1 var(--mono); } .capability-section { padding-block: 110px 118px; border-block: 1px solid var(--line); background: var(--paper-deep); } .capability-heading { display: grid; grid-template-columns: 1fr 0.72fr; gap: 80px; align-items: end; } .capability-heading h2 { margin-top: 25px; } .capability-heading > p { margin: 0; color: var(--muted); font-size: 16px; } .capability-groups { display: grid; grid-template-columns: 1.18fr 0.91fr 0.91fr; gap: 12px; margin-top: 60px; } .capability-groups > section { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); } .capability-groups header { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 18px; border-bottom: 1px solid var(--line); background: var(--navy-deep); color: var(--white); } .capability-groups header span, .capability-groups header small, .capability-groups article b { font: 600 10px/1 var(--mono); } .capability-groups header span { color: var(--mint); } .capability-groups header small { color: #8fa2b9; text-transform: uppercase; } .capability-groups article { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 17px; } .capability-groups article + article { border-top: 1px solid var(--line); } .capability-groups article b { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--ink); color: var(--blue); background: var(--paper); } .capability-groups article > span { display: grid; gap: 3px; } .capability-groups article strong { font-size: 12px; } .capability-groups article small { color: var(--muted); font-size: 10px; } .open-contract-section { position: relative; overflow: hidden; padding-block: 112px; color: var(--white); background: var(--navy-deep); } .open-contract-section::before { position: absolute; inset: 0; background: linear-gradient(rgba(114, 225, 190, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(114, 225, 190, 0.045) 1px, transparent 1px); background-size: 48px 48px; content: ""; } .open-contract-section::after { position: absolute; right: -120px; bottom: -210px; width: 520px; height: 520px; border: 72px solid rgba(127, 168, 255, 0.09); border-radius: 50%; content: ""; } .open-contract-section > .page-shell { position: relative; z-index: 1; } .open-contract-heading { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 46px; align-items: start; } .open-contract-heading > div { max-width: 850px; } .repo-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--mint); font: 600 11px/1.4 var(--mono); letter-spacing: 0.08em; } .open-contract-heading h2 { max-width: 760px; margin: 24px 0 0; font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -0.045em; } .open-contract-heading > div > p { max-width: 790px; margin: 28px 0 0; color: #b9c6d6; font-size: 16px; line-height: 1.75; } .repo-button { display: inline-flex; align-items: center; gap: 16px; min-height: 48px; margin-top: 30px; padding: 12px 18px; border: 1px solid var(--mint); border-radius: 6px; color: var(--ink); background: var(--mint); font-size: 12px; font-weight: 700; transition: transform 160ms ease, box-shadow 160ms ease; } .repo-button:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(127, 168, 255, 0.65); } .open-contract-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 64px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.18); } .open-contract-grid article { min-height: 205px; padding: 25px; background: rgba(7, 26, 51, 0.94); } .open-contract-grid article > span { color: var(--mint); font: 600 10px/1 var(--mono); } .open-contract-grid strong { display: block; margin-top: 54px; font-size: 17px; } .open-contract-grid p { margin: 8px 0 0; color: #aebdce; font-size: 12px; line-height: 1.65; } .divisions-section { padding-bottom: 126px; } .division-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .division-grid article { min-height: 260px; padding: 30px; border: 1px solid var(--ink); border-radius: 8px; background: var(--card); } .division-grid article:first-child { box-shadow: inset 3px 0 0 var(--mint); } .division-grid article:last-child { box-shadow: inset 3px 0 0 var(--blue); } .division-grid article > span { color: var(--highlight); font: 600 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; } .division-grid article:last-child > span { color: var(--highlight); } .division-grid h3 { margin: 80px 0 10px; font-size: 25px; } .division-grid p { max-width: 510px; margin: 0; color: var(--muted); font-size: 14px; } .closing-cta { padding-block: 75px; border-top: 1px solid var(--ink); color: var(--white); background: var(--navy-deep); } .closing-grid { display: flex; justify-content: space-between; align-items: center; gap: 40px; } .closing-grid > div:first-child > p, .closing-grid > div:first-child > span { font: 500 10px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; } .closing-grid > div:first-child > p { margin: 0 0 13px; color: var(--mint); } .closing-grid > div:first-child > span { display: block; margin-top: 12px; color: #d5defd; } .closing-actions { margin-top: 0; } .button-mint { border-color: var(--mint); color: var(--ink); background: var(--mint); } .button-ghost { border-color: rgba(255, 255, 255, 0.7); color: var(--white); background: transparent; } .leaderboard-hero { position: relative; display: grid; grid-template-columns: 1fr 0.78fr; gap: 90px; align-items: end; padding-block: 90px 65px; } .leaderboard-hero::before { position: absolute; top: 90px; bottom: 65px; left: -18px; width: 3px; background: var(--mint); content: ""; } .leaderboard-hero h1 { font-size: clamp(48px, 6vw, 76px); } .leaderboard-intro { padding-bottom: 6px; } .release-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); } .leaderboard-intro p { margin: 22px 0 0; color: var(--muted); font-size: 16px; } .leaderboard-workspace { width: min(1760px, calc(100% - 48px)); padding-bottom: 110px; } .control-row { display: flex; justify-content: space-between; gap: 20px; padding: 14px; border: 1px solid var(--ink); border-left: 3px solid var(--mint); border-radius: 8px; background: var(--card); box-shadow: var(--shadow); } .segmented-control, .division-control { display: flex; gap: 7px; } .segmented-control button, .division-control button, .category-tabs button { border: 1px solid transparent; background: transparent; cursor: pointer; } .segmented-control button { display: inline-flex; align-items: center; gap: 12px; min-height: 45px; padding: 9px 15px; font-size: 12px; font-weight: 700; } .segmented-control button span { color: var(--blue); font: 600 10px/1 var(--mono); } .segmented-control button.is-active { color: var(--white); background: var(--ink); } .segmented-control button.is-active span { color: var(--mint); } .division-control button { padding: 10px 13px; color: var(--muted); font: 600 10px/1 var(--mono); } .division-control button.is-active { border-color: var(--ink); color: var(--ink); background: var(--paper); } .result-note { margin: 10px 0 0; max-width: 58ch; color: var(--muted); font-size: 12px; line-height: 1.6; } .category-panel { display: grid; grid-template-columns: 130px 1fr; gap: 20px; align-items: start; padding: 32px 0 25px; } .category-panel > span { padding-top: 10px; color: var(--muted); } .category-tabs { display: flex; flex-wrap: wrap; gap: 7px; } .category-tabs button { padding: 8px 10px; border-color: var(--line); border-radius: 4px; color: var(--muted); background: rgba(255, 254, 249, 0.66); font: 500 10px/1.2 var(--mono); } .category-tabs button:hover, .category-tabs button.is-active { border-color: var(--highlight); color: var(--highlight); background: #edf2ff; } .result-panel { border: 1px solid rgba(20, 36, 61, 0.18); border-top-color: rgba(20, 36, 61, 0.34); border-bottom-color: rgba(20, 36, 61, 0.34); border-radius: 8px; overflow: hidden; background: var(--card); } .result-panel-head { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; padding: 28px 30px; border-bottom: 1px solid var(--line); } .result-panel-head > div > span { color: var(--highlight); } .result-panel-head h2 { margin: 10px 0 5px; font-size: 29px; letter-spacing: -0.035em; } .result-panel-head p { margin: 0; color: var(--muted); font-size: 13px; } .medal-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 390px; color: var(--muted); font: 700 10px/1.2 var(--mono); letter-spacing: 0.055em; text-transform: uppercase; } .medal-legend span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid rgba(220, 227, 234, 0.82); border-radius: 999px; background: rgba(255, 255, 255, 0.48); } .medal-legend b { font-size: 13px; line-height: 1; } .table-shell { overflow-x: auto; } .table-scroll-hint { display: none; padding: 9px 18px 0; color: var(--muted); font: 700 10px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } .table-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 70px 220px repeat(var(--metric-count), minmax(132px, 1fr)); min-width: calc(290px + var(--metric-count) * 168px); border-bottom: 1px solid rgba(220, 227, 234, 0.78); background: rgba(237, 241, 245, 0.82); } .table-header button.header-link { appearance: none; border: 0; color: inherit; font: 800 10.5px/1.28 var(--mono); letter-spacing: 0.025em; text-transform: uppercase; cursor: pointer; padding: 0; text-align: center; } .table-header button.header-link:not(:nth-child(-n + 3)) { background: transparent; } .table-header button.header-link:hover, .table-header button.header-link:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; } .table-header > span, .table-header > button { display: grid; align-items: center; justify-items: center; min-height: 74px; padding: 14px 14px; border-right: 1px solid rgba(220, 227, 234, 0.62); text-align: center; white-space: normal; overflow-wrap: anywhere; word-break: normal; font: 800 10.5px/1.28 var(--mono); letter-spacing: 0.025em; text-transform: uppercase; } .leaderboard-table { display: grid; min-width: calc(290px + var(--metric-count) * 168px); } .leaderboard-row { display: grid; grid-template-columns: 70px 220px repeat(var(--metric-count), minmax(132px, 1fr)); align-items: stretch; min-height: 74px; position: relative; border-bottom: 1px solid rgba(220, 227, 234, 0.56); background: transparent; transition: background 160ms ease, box-shadow 160ms ease; } .leaderboard-row::before { position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 999px; background: var(--blue); content: ""; opacity: 0; transform: scaleY(0.55); transition: opacity 160ms ease, transform 160ms ease; } .leaderboard-row:hover { background: rgba(127, 168, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(127, 168, 255, 0.12); } .leaderboard-row:hover::before { opacity: 1; transform: scaleY(1); } .leaderboard-row:nth-child(even) { background: transparent; } .leaderboard-row:nth-child(even):hover { background: rgba(127, 168, 255, 0.07); } .leaderboard-row > span { display: grid; align-content: center; padding: 15px 16px; border-right: 1px solid rgba(220, 227, 234, 0.62); } .table-header > :nth-child(-n + 2), .leaderboard-row > span:nth-child(-n + 2) { position: sticky; z-index: 6; background: #fff; } .table-header > :nth-child(-n + 2) { z-index: 24; background: #eef3f7 !important; } .table-header > :nth-child(1), .leaderboard-row > span:nth-child(1) { left: 0; } .table-header > :nth-child(2), .leaderboard-row > span:nth-child(2) { left: 70px; } .leaderboard-row:hover > span:nth-child(-n + 2), .leaderboard-row:nth-child(even):hover > span:nth-child(-n + 2) { background: rgb(246, 249, 255); } .rank-cell { justify-items: center; color: var(--highlight); font: 800 15px/1 var(--mono); letter-spacing: 0.08em; } .rank-medal { place-items: center; font-size: 25px; letter-spacing: 0; filter: saturate(0.96); } .rank-medal-1 { font-size: 27px; filter: saturate(1.18) brightness(1.05); text-shadow: 0 5px 14px rgba(176, 124, 20, 0.28); } .rank-medal-2, .rank-medal-3 { transform: translateY(1px); } .leaderboard-row > .system-cell { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; } .system-meta { display: flex; min-width: 0; max-width: 100%; align-items: center; justify-content: flex-start; gap: 6px; } .system-meta > small { min-width: 0; } .leaderboard-row > .system-cell strong { display: block; min-width: 0; overflow: hidden; color: var(--ink); font-weight: 500; font-size: 15px; line-height: 1.25; text-align: left; text-decoration: none; text-overflow: ellipsis; } .github-icon-link { display: inline-flex; flex: 0 0 auto; width: 18px; height: 18px; align-items: center; justify-content: center; color: rgba(31, 42, 55, 0.58); transition: color 140ms ease, transform 140ms ease; } .github-icon-link svg { display: block; width: 14px; height: 14px; fill: currentColor; } .github-icon-link:hover, .github-icon-link:focus-visible { color: var(--ink); transform: translateY(-1px); } .is-podium-row > .system-cell strong { color: var(--navy-deep); font-weight: 800; } .leaderboard-row > .system-cell small { overflow: hidden; color: var(--muted); font: 600 10px/1.3 var(--mono); letter-spacing: 0.02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .system-cate { max-width: 100%; overflow: hidden; border: 1px solid rgba(31, 42, 55, 0.12); border-radius: 999px; background: rgba(245, 247, 250, 0.92); padding: 3px 7px; cursor: help; outline: none; } .system-version { max-width: clamp(64px, 8.5vw, 132px); overflow: hidden; border: 1px solid rgba(38, 97, 156, 0.15); border-radius: 999px; background: linear-gradient(135deg, rgba(237, 246, 255, 0.98), rgba(248, 251, 255, 0.96)); color: #315a80 !important; padding: 3px 7px; cursor: help; outline: none; text-overflow: ellipsis; text-transform: none !important; } .badge-floating-tooltip { position: fixed; z-index: 1000; max-width: min(320px, 72vw); padding: 8px 10px; border: 1px solid rgba(38, 97, 156, 0.16); border-radius: 10px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 14px 30px rgba(20, 39, 77, 0.16); color: var(--ink); font: 600 12px/1.35 var(--sans); pointer-events: none; white-space: normal; } .score-cell { justify-items: center; text-align: center; color: var(--ink-soft); font: 650 15px/1 var(--mono); } .text-cell { justify-items: center; text-align: center; color: var(--ink); font: 650 12px/1.25 var(--mono); letter-spacing: 0.01em; } .score-value { display: inline-grid; place-items: center; min-width: 52px; min-height: 30px; border-radius: 999px; font-weight: 650; } .score-rank-1 { color: #4f3100; background: linear-gradient(135deg, rgba(255, 210, 64, 0.9), rgba(255, 246, 184, 0.58)); box-shadow: 0 0 0 1px rgba(176, 124, 20, 0.34), 0 9px 20px rgba(176, 124, 20, 0.18); font-weight: 900; } .score-rank-2 { color: #263852; background: linear-gradient(135deg, rgba(194, 207, 226, 0.92), rgba(241, 245, 249, 0.62)); box-shadow: 0 0 0 1px rgba(92, 108, 132, 0.32), 0 7px 16px rgba(92, 108, 132, 0.12); font-weight: 900; } .score-rank-3 { color: var(--ink-soft); background: linear-gradient(135deg, rgba(190, 126, 78, 0.22), rgba(246, 214, 188, 0.14)); box-shadow: 0 0 0 1px rgba(150, 84, 39, 0.08); font-weight: 800; } .speed-cell { font-size: 13px; } .speed-inline { display: inline-flex; align-items: center; gap: 8px; min-height: 26px; padding: 0; color: #111827; font-weight: 720; letter-spacing: 0.01em; } .speed-inline span:last-child { color: #111827; } .speed-divider { display: inline-block; width: 4px; height: 19px; overflow: hidden; flex: 0 0 4px; border-radius: 3px; background: var(--speed-accent); color: transparent; opacity: 0.92; font-size: 0; line-height: 0; } .speed-value { --speed-accent: var(--muted); --speed-bg: rgba(101, 116, 139, 0.08); --speed-border: rgba(101, 116, 139, 0.18); --speed-gap: 5px; --speed-pad: 11px; display: inline-flex; align-items: center; justify-content: center; gap: var(--speed-gap); min-width: 82px; min-height: 26px; padding: 0 var(--speed-pad); border: 1px solid var(--speed-border); border-radius: 999px; color: var(--speed-accent); background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), var(--speed-bg)); box-shadow: inset 0 -1px 0 rgba(20, 36, 61, 0.04); font-weight: 760; letter-spacing: 0.01em; } .speed-value::before { display: none; } .volume-cell .speed-value { min-width: 92px; } .volume-value { min-width: 92px; } .speed-fast { --speed-accent: #237a47; --speed-bg: rgba(53, 164, 96, 0.13); --speed-border: rgba(42, 135, 78, 0.22); } .speed-medium { --speed-accent: #9a6a00; --speed-bg: rgba(232, 178, 56, 0.16); --speed-border: rgba(180, 126, 17, 0.22); } .speed-slow { --speed-accent: #a34242; --speed-bg: rgba(203, 88, 88, 0.12); --speed-border: rgba(165, 67, 67, 0.2); } .volume-compact { --speed-accent: #237a47; --speed-bg: rgba(53, 164, 96, 0.12); --speed-border: rgba(42, 135, 78, 0.2); } .volume-balanced { --speed-accent: #8a650d; --speed-bg: rgba(232, 178, 56, 0.14); --speed-border: rgba(180, 126, 17, 0.2); } .volume-verbose { --speed-accent: #9b3f3f; --speed-bg: rgba(203, 88, 88, 0.11); --speed-border: rgba(165, 67, 67, 0.19); } .speed-unknown { --speed-accent: var(--muted); --speed-bg: rgba(101, 116, 139, 0.06); --speed-border: rgba(101, 116, 139, 0.14); } .empty-state { display: grid; justify-items: center; min-width: 820px; min-height: 450px; padding: 70px 24px; text-align: center; } .coding-coming-soon { min-width: 0; width: 100%; } .empty-orbit { position: relative; display: grid; place-items: center; width: 100px; height: 100px; margin-bottom: 28px; border: 1px solid var(--line); border-radius: 50%; } .empty-orbit::before, .empty-orbit::after { position: absolute; border: 1px solid var(--line); border-radius: 50%; content: ""; } .empty-orbit::before { width: 68px; height: 68px; } .empty-orbit::after { width: 36px; height: 36px; background: var(--ink); } .empty-orbit span { position: absolute; top: 11px; right: 9px; z-index: 2; width: 11px; height: 11px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--white); } .empty-orbit i { position: absolute; z-index: 3; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); } .empty-state > span { color: var(--highlight); font: 600 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; } .empty-state h3 { margin: 13px 0 8px; font-size: clamp(31px, 4vw, 48px); letter-spacing: -0.04em; } .empty-state p { margin: 0; color: var(--muted); } .empty-state a { margin-top: 24px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); font: 600 11px/1.4 var(--mono); } .commercial-ack { display: grid; grid-template-columns: minmax(250px, 0.58fr) 1.42fr; gap: 28px; align-items: center; margin: 22px 0 0; padding: 24px; border: 1px solid rgba(20, 36, 61, 0.14); border-radius: 14px; background: radial-gradient(circle at 8% 18%, rgba(69, 121, 184, 0.10), transparent 32%), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 252, 0.94)); box-shadow: 0 18px 38px rgba(20, 39, 77, 0.07); } .commercial-ack[hidden] { display: none; } .commercial-ack-copy > span { color: var(--highlight); font: 850 18px/1.15 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; } .commercial-ack-copy h3 { margin: 9px 0 0; max-width: 42ch; color: var(--navy-deep); font-size: 12px; line-height: 1.55; letter-spacing: 0; } .commercial-logo-marquee { position: relative; overflow: hidden; padding: 4px 0; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .commercial-logo-track { display: flex; width: max-content; gap: 12px; animation: logoMarquee 28s linear infinite; } .commercial-logo-marquee:hover .commercial-logo-track { animation-play-state: paused; } .logo-tile { display: grid; width: 178px; height: 70px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid rgba(20, 36, 61, 0.10); border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(20, 39, 77, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.86); } .logo-tile img { display: block; width: auto; height: auto; max-width: 82%; max-height: 46px; object-fit: contain; } .logo-tile-memorax img { max-width: 70%; max-height: 42px; } .logo-tile-mempalace img { max-width: 92%; max-height: 49px; } .logo-tile-dongjian img { max-width: 66%; max-height: 38px; } .logo-tile-memtensor img { max-width: 108%; max-height: 56px; } .logo-tile-supermemory img { max-width: 108%; max-height: 54px; } .logo-tile-text { color: #c81e1e; font: 850 19px/1 var(--sans); letter-spacing: -0.03em; } @keyframes logoMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } } @media (prefers-reduced-motion: reduce) { .commercial-logo-track { animation: none; flex-wrap: wrap; width: auto; } .commercial-logo-track [aria-hidden="true"] { display: none; } } .ranking-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 28px; border: 1px solid var(--line); background: var(--line); } .ranking-notes article { padding: 22px; background: var(--card); } .ranking-notes article > span { color: var(--highlight); font: 600 10px/1 var(--mono); } .ranking-notes strong { display: block; margin-top: 29px; font-size: 13px; } .ranking-notes p { margin: 7px 0 0; color: var(--muted); font-size: 11px; } .leaderboard-footer-cta { padding-block: 32px; border-block: 1px solid var(--line); border-top: 3px solid var(--mint); background: var(--card); } .leaderboard-footer-cta > div { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-weight: 700; } .leaderboard-footer-cta > div > div { display: flex; gap: 22px; font: 600 10px/1 var(--mono); text-transform: uppercase; } .site-footer { padding-block: 35px; color: var(--white); background: var(--navy-deep); } .footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 30px; } .footer-brand img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--white); } .footer-brand small { color: #8fa2b9; } .footer-links { display: flex; flex-wrap: wrap; gap: 24px; color: #b9c6d6; font: 500 10px/1 var(--mono); text-transform: uppercase; } .footer-links a:hover { color: var(--mint); } .reveal { animation: reveal-in 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } .reveal-delay-1 { animation-delay: 100ms; } @keyframes reveal-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 980px) { .site-header { grid-template-columns: 1fr auto; } .primary-nav { order: 3; grid-column: 1 / -1; justify-content: center; min-height: 43px; margin: 8px -28px -10px; border-top: 1px solid var(--line); } .nav-link::after { bottom: -9px; } .rules-link { display: none; } .hero, .leaderboard-hero, .protocol-grid, .capability-heading, .open-contract-heading { grid-template-columns: 1fr; } .hero { gap: 56px; padding-top: 68px; } .challenge-card { max-width: 660px; } .protocol-grid { gap: 55px; } .capability-heading { gap: 26px; } .capability-groups { grid-template-columns: 1fr; } .open-contract-heading { gap: 28px; } .open-contract-grid { grid-template-columns: repeat(2, 1fr); } .leaderboard-hero { gap: 36px; } } @media (max-width: 760px) { .page-shell { width: min(100% - 30px, 1180px); } .site-header { padding-inline: 15px; } .primary-nav { margin-inline: -15px; } .header-cta { padding: 9px 10px; font-size: 0; } .header-cta span { font-size: 14px; } .header-github { justify-content: center; width: 42px; min-height: 42px; padding: 0; } .header-github span { display: none; } .hero { min-height: auto; padding-block: 58px 68px; } .hero h1 { font-size: clamp(34px, 9vw, 46px); } .leaderboard-hero h1 { font-size: clamp(40px, 12vw, 62px); } .hero-lede { font-size: 15px; } .hero-actions { display: grid; } .button { width: 100%; } .challenge-card { min-height: 430px; padding: 22px; box-shadow: 7px 7px 0 var(--mint); } .challenge-title { margin-top: 64px; } .countdown { gap: 5px; } .countdown > span { min-width: 48px; } .countdown b { font-size: 23px; } .signal-grid { grid-template-columns: repeat(2, 1fr); } .signal-grid > span { border-bottom: 1px solid var(--line); } .signal-grid > span:nth-child(odd) { border-left: 1px solid var(--line); } .section { padding-block: 82px; } .section-heading { grid-template-columns: 1fr; gap: 25px; } .section-heading h2, .protocol-grid h2, .capability-heading h2, .closing-grid h2 { font-size: clamp(31px, 9vw, 46px); } .section-heading > div > p { font-size: 15px; } .principle-grid, .benchmark-grid, .division-grid, .ranking-notes { grid-template-columns: 1fr; } .principle-grid article { min-height: 220px; } .protocol-section { padding-block: 84px; } .protocol-flow { grid-template-columns: repeat(2, 1fr); } .protocol-flow li { min-height: 190px; } .protocol-flow li:nth-child(2)::after { display: none; } .benchmark-card { min-height: 580px; padding: 26px; } .benchmark-card h3 { margin-top: 62px; } .coding-types { grid-template-columns: 1fr; } .capability-section { padding-block: 80px; } .capability-groups { margin-top: 40px; } .open-contract-section { padding-block: 82px; } .open-contract-heading h2 { font-size: clamp(31px, 9vw, 46px); } .open-contract-heading > div > p { font-size: 15px; } .open-contract-grid { grid-template-columns: 1fr; margin-top: 46px; } .open-contract-grid article { min-height: 170px; } .open-contract-grid strong { margin-top: 40px; } .compact-heading { margin-bottom: 44px; } .closing-grid, .footer-grid, .leaderboard-footer-cta > div { flex-direction: column; align-items: flex-start; } .closing-actions { width: 100%; } .leaderboard-hero { padding-block: 65px 46px; } .control-row { flex-direction: column; } .segmented-control, .division-control { display: grid; grid-template-columns: repeat(2, 1fr); } .commercial-ack { grid-template-columns: 1fr; padding: 18px; } .logo-tile { width: 150px; height: 62px; } .category-panel { grid-template-columns: 1fr; gap: 10px; } .category-panel > span { padding-top: 0; } .result-panel-head { flex-direction: column; } .table-scroll-hint { display: block; } .ranking-notes { gap: 0; } .leaderboard-footer-cta > div > div { flex-wrap: wrap; } .footer-links { gap: 17px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }