:root { color: #e6edf3; background: #0d1117; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(circle at 82% -10%, #132c44 0, transparent 32rem), #0d1117; } a { color: inherit; } .topbar { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: auto; padding: 22px 28px; } .brand { display: inline-flex; align-items: center; gap: 9px; color: #effbff; font-size: 14px; font-weight: 750; letter-spacing: -.2px; text-decoration: none; } .brand img { width: 30px; height: 30px; border-radius: 8px; } nav { display: flex; align-items: center; gap: 22px; color: #9eb2bf; font-size: 12px; } nav a { text-decoration: none; } nav a:hover { color: #e9f8fc; } .nav-button { padding: 7px 10px; color: #d9f6ff; background: #122a39; border: 1px solid #347b9a; border-radius: 6px; }
main { max-width: 1180px; margin: auto; padding: 0 28px 64px; } .hero { display: grid; grid-template-columns: 1.25fr .75fr; min-height: 460px; align-items: center; gap: 56px; padding: 54px 0 68px; } .eyebrow { margin: 0 0 11px; color: #64d9f6; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 22px; font-size: clamp(42px, 6.1vw, 76px); line-height: .98; letter-spacing: -3.5px; } h1 em { color: #ffac97; font-style: normal; } .hero-copy { max-width: 620px; color: #aebfca; font-size: 16px; line-height: 1.7; } .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; } .primary, .secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 15px; border-radius: 6px; font-size: 12px; font-weight: 700; text-decoration: none; } .primary { color: #061017; background: #66d9f5; box-shadow: 0 8px 30px rgba(65, 206, 241, .19); } .primary:hover { background: #a7eefa; } .secondary { color: #c5e8f2; border: 1px solid #355669; } .secondary:hover { background: #132433; } .platform-note { margin: 13px 0 0; color: #6c8290; font-size: 10px; }
.hero-mark { position: relative; display: grid; min-height: 320px; place-items: center; } .hero-mark img { position: relative; z-index: 1; width: min(260px, 100%); filter: drop-shadow(0 30px 52px rgba(0, 0, 0, .5)); } .glow { position: absolute; width: 220px; height: 220px; border-radius: 50%; filter: blur(54px); opacity: .42; } .glow-cyan { background: #39c6f2; top: 48px; left: 18px; } .glow-coral { background: #ff655e; right: 8px; bottom: 32px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #263744; border-bottom: 1px solid #263744; } .metrics div { padding: 24px; border-right: 1px solid #263744; }.metrics div:last-child { border-right: 0; }.metrics strong { display: block; color: #e9f7fc; font-size: 24px; letter-spacing: -1px; }.metrics span { color: #8196a4; font-size: 10px; }
.feature-grid, .data-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.feature-grid { padding: 75px 0; }.feature-grid article, .data-cards article { padding: 21px; background: #101b25; border: 1px solid #273f4e; border-radius: 9px; }.feature-index { color: #f7ac90; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }.feature-grid h2 { margin: 18px 0 8px; font-size: 17px; }.feature-grid p, .data-cards p { margin: 0; color: #9cafba; font-size: 12px; line-height: 1.65; }
.preview-section { padding: 34px; background: #0e171f; border: 1px solid #2b4b5d; border-radius: 12px; }.preview-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.preview-section h2, .release-section h2, .data-section h2 { margin-bottom: 8px; color: #eaf5f8; font-size: 26px; letter-spacing: -.8px; }.preview-section header p:not(.eyebrow), .release-section p:not(.eyebrow) { max-width: 600px; margin-bottom: 0; color: #91a6b2; font-size: 12px; line-height: 1.6; }.preview-section header > span { padding: 5px 7px; color: #94e5f7; background: #123244; border: 1px solid #347a99; border-radius: 4px; font-size: 10px; white-space: nowrap; }.search { display: flex; align-items: center; gap: 10px; height: 43px; margin: 25px 0 13px; padding: 0 11px; color: #72d7f2; background: #0b1219; border: 1px solid #315365; border-radius: 6px; font-size: 11px; font-weight: 700; }.search input { min-width: 0; flex: 1; color: #e5f0f4; background: transparent; border: 0; outline: 0; font-size: 12px; font-weight: 400; }.search kbd { color: #879daa; border: 1px solid #365363; border-radius: 3px; padding: 2px 5px; font-size: 9px; }.preview-layout { display: grid; grid-template-columns: minmax(270px, .75fr) minmax(350px, 1.25fr); min-height: 410px; border: 1px solid #263e4d; border-radius: 7px; overflow: hidden; }.result-list { overflow-y: auto; background: #0d151d; border-right: 1px solid #263e4d; }.result { display: grid; width: 100%; gap: 5px; padding: 12px; color: #d7e6eb; background: transparent; border: 0; border-bottom: 1px solid #203544; text-align: left; }.result:hover, .result.selected { background: #123044; }.result code { color: #ffc778; font-size: 10px; }.result strong { font-size: 12px; }.result span { overflow: hidden; color: #8298a6; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.detail { padding: 25px; }.detail > p { color: #8195a1; font-size: 12px; }.detail .meta { color: #70d6f0; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.detail h3 { margin: 10px 0 3px; color: #ffc778; font-family: ui-monospace, Consolas, monospace; font-size: 24px; }.detail h4 { margin: 0; color: #e7f1f3; font-size: 15px; }.detail .description { margin: 19px 0; color: #aebfc7; font-size: 13px; line-height: 1.65; }.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.code-block { overflow: auto; padding: 11px; color: #cbd9df; background: #0b1218; border: 1px solid #294252; border-radius: 5px; font-family: ui-monospace, Consolas, monospace; font-size: 10px; line-height: 1.5; white-space: pre-wrap; }.code-label { display: block; margin-bottom: 6px; color: #9acbf0; font-family: inherit; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.code-label.bad { color: #ff9e97; }.code-label.good { color: #a7e6a3; }.detail a { display: inline-block; margin-top: 16px; color: #6bdff8; font-size: 11px; }
.release-section { display: flex; align-items: center; justify-content: space-between; gap: 34px; margin: 78px 0; padding: 40px; background: linear-gradient(120deg, #172736, #101820); border: 1px solid #315669; border-radius: 11px; }.release-section h2 { max-width: 590px; }.release-section .primary { min-width: 164px; }.data-section { padding-bottom: 74px; }.data-section > div:first-child { margin-bottom: 20px; }.data-cards h3 { margin-bottom: 8px; color: #e2f1f5; font-size: 14px; } footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1180px; margin: auto; padding: 27px 28px; color: #728793; border-top: 1px solid #263744; font-size: 10px; } footer > a:last-child { color: #75dbf5; text-decoration: none; }
@media (max-width: 800px) { body { min-width: 0; }.topbar { padding: 18px; } nav a:not(.nav-button) { display: none; } main { padding: 0 18px 42px; }.hero { grid-template-columns: 1fr; padding: 45px 0; gap: 0; }.hero-mark { display: none; }.metrics, .feature-grid, .data-cards { grid-template-columns: 1fr 1fr; }.metrics div:nth-child(2) { border-right: 0; }.preview-section { padding: 20px; }.preview-layout { grid-template-columns: 1fr; }.result-list { max-height: 250px; border-right: 0; border-bottom: 1px solid #263e4d; }.release-section { display: grid; margin: 48px 0; padding: 25px; }.codes { grid-template-columns: 1fr; } footer { align-items: flex-start; flex-direction: column; } }