:root { color-scheme: light; --ink: #07101d; --muted: #44536a; --paper: #f7f8fa; --surface: #ffffff; --line: rgba(7, 16, 29, 0.14); --accent: #2b67df; --accent-dark: #07101d; --accent-light: #9fc0ff; --code: #eef2f8; --max: 1200px; --radius: 4px; --focus: 0 0 0 3px #2b67df; font-family: Arial, sans-serif; } * { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.55; } a { color: var(--accent-dark); text-underline-offset: .18em; } code, pre, select { font-family: "SFMono-Regular", Consolas, monospace; } h1, h2, h3, p { margin-top: 0; } nav, .actions, .metadata, .preview-heading { display: flex; flex-wrap: wrap; } .button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; } .stats div, .metadata div { display: grid; gap: .1rem; } dt { color: var(--muted); text-transform: uppercase; } dd { margin: 0; } .section { border-top: 1px solid var(--line); } .section-heading { display: flex; align-items: end; justify-content: space-between; } .format-grid, .examples { display: grid; } .format-card, .examples section, .explorer-controls, .preview-panel { border: 1px solid var(--line); } .quiet, .preview-heading p { color: var(--muted); } .format-card code, .media-type code { overflow-wrap: anywhere; } pre { margin: 0; overflow: auto; background: var(--code); } .table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); } table { width: 100%; border-collapse: collapse; } th, td { border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } th { text-transform: uppercase; } tbody tr:last-child td { border-bottom: 0; } .explorer { display: grid; } .explorer-controls label { display: block; } select { width: 100%; border: 1px solid var(--line); background: #fff; } .preview-panel { min-width: 0; } .preview-panel pre { max-height: 60vh; white-space: pre-wrap; } .license-note { max-width: 720px; } html { background: var(--paper); scroll-behavior: smooth; } body { min-width: 320px; } a:focus-visible, button:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus); } button, select { font: inherit; } h1, h2, h3, .brand, .header-nav, .header-cta, .button, .eyebrow, dt, dd { font-family: "Avenir Next", "Segoe UI", Arial, sans-serif; } .site-header, main, .site-footer { width: 100%; margin: 0; } .site-header { position: sticky; top: 0; z-index: 30; display: block; min-height: 78px; padding: 0; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(18px); } .header-inner { width: min(var(--max), calc(100% - 48px)); min-height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin: 0 auto; } .brand, .footer-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .brand { justify-self: start; } .brand-mark { width: 32px; height: 32px; display: inline-flex; flex: 0 0 auto; color: #fff; box-shadow: 0 12px 28px rgba(7,16,29,.18); } .brand-mark svg { width: 100%; height: 100%; display: block; } .brand-mark path { fill: currentColor; } .brand-mark .brand-accent { fill: var(--accent); } .brand-lockup { display: flex; align-items: baseline; gap: 8px; transform: translateY(2px); } .brand-name { color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: .01em; } .product-name { padding-left: 8px; border-left: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 600; } .header-nav { display: flex; flex-wrap: nowrap; gap: clamp(20px,3vw,34px); } .header-nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: color 160ms ease; } .header-nav a:hover { color: var(--accent); } .header-cta { min-height: 44px; display: inline-flex; align-items: center; justify-self: end; gap: 8px; padding: 0 18px; border: 1px solid rgba(7,16,29,.18); border-radius: var(--radius); background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; } .header-cta span { color: var(--accent); } .header-cta:hover { border-color: var(--accent); background: #f2f6ff; } main { min-height: 64vh; } .hero, .section, .explorer { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; } .hero { max-width: var(--max); padding: clamp(88px,10vw,132px) 0 clamp(64px,8vw,96px); } .hero.compact { padding-bottom: clamp(48px,6vw,72px); } .eyebrow { margin: 0 0 20px; color: var(--accent); font-size: 14px; font-weight: 700; letter-spacing: .035em; text-transform: none; } h1 { max-width: 14ch; margin-bottom: 28px; font-size: clamp(48px,6vw,84px); font-weight: 700; line-height: 1; letter-spacing: -.04em; text-wrap: balance; } .compact h1 { max-width: 18ch; font-size: clamp(44px,5vw,68px); } h2 { margin-bottom: 24px; font-size: clamp(34px,4vw,58px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; } h3 { margin-bottom: 12px; font-size: 20px; line-height: 1.25; letter-spacing: -.015em; } .hero > p:not(.eyebrow), .hero-inner > p:not(.eyebrow) { max-width: 68ch; color: var(--muted); font-size: clamp(18px,1.45vw,22px); line-height: 1.58; } .home-hero { position: relative; width: 100%; max-width: none; overflow: hidden; padding: 0; background: radial-gradient(circle at 80% 30%,rgba(43,103,223,.28),transparent 31%),linear-gradient(112deg,#07101d 0%,#0d1a2c 62%,#132746 100%); color: #fff; } .hero-inner { position: relative; z-index: 1; width: min(var(--max), calc(100% - 56px)); margin: 0 auto; padding: clamp(92px,11vw,144px) 0 clamp(72px,8vw,104px); } .home-hero h1 { color: #fff; } .home-hero .eyebrow { color: var(--accent-light); } .home-hero .hero-inner > p:not(.eyebrow) { color: rgba(255,255,255,.76); } .actions { gap: 12px; margin: 34px 0; } .button { min-height: 48px; padding: 13px 24px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; transition: background 160ms ease,border-color 160ms ease,color 160ms ease,transform 160ms ease; } .button:hover { border-color: var(--accent); background: var(--accent); transform: translateY(-1px); } .button.secondary { border-color: rgba(7,16,29,.2); background: transparent; color: var(--ink); } .button.secondary:hover { border-color: var(--accent); background: transparent; color: var(--accent); } .home-hero .button { border-color: #fff; background: #fff; color: var(--ink); } .home-hero .button:hover { border-color: var(--accent); background: var(--accent); color: #fff; } .home-hero .button.secondary { border-color: rgba(255,255,255,.48); background: transparent; color: #fff; } .home-hero .button.secondary:hover { border-color: #fff; background: rgba(255,255,255,.1); } .stats { max-width: 760px; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 52px 0 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18); } .stats div + div { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.18); } dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; } dd { font-size: 22px; font-weight: 700; } .home-hero dt { color: var(--accent-light); } .home-hero dd { color: #fff; } .section { padding: clamp(72px,9vw,112px) 0; } .section-heading { gap: 28px; } .section-heading > a:not(.button), .license-note > a, .quiet a { color: var(--ink); font-weight: 700; } .section-heading > a:hover, .license-note > a:hover, .quiet a:hover { color: var(--accent); } .format-grid { grid-template-columns: repeat(auto-fit,minmax(245px,1fr)); gap: 16px; } .format-card, .examples section, .explorer-controls, .preview-panel { min-width: 0; padding: 24px; border-radius: var(--radius); background: var(--surface); } .format-card { display: block; color: var(--ink); text-decoration: none; } .format-card:hover { border-color: rgba(43,103,223,.5); box-shadow: 0 18px 44px rgba(7,16,29,.08); transform: translateY(-2px); } .format-card:focus-visible { border-color: var(--accent); box-shadow: var(--focus); } .format-card .format-count { display: block; color: var(--accent); font-size: 13px; font-weight: 700; } .format-card code, .media-type code { color: var(--muted); font-size: 13px; } .format-action { display: block; margin-top: 18px; font-size: 14px; font-weight: 700; } .media-type { margin-top: 24px; } .media-type code { display: inline-block; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); } .examples { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; } .examples h3 { color: var(--accent); font-size: 14px; } .examples summary { cursor: pointer; font-weight: 700; } pre { padding: 18px; border-radius: var(--radius); font-size: 14px; line-height: 1.6; } .table-wrap { border-radius: var(--radius); } th, td { padding: 14px 16px; } th { color: var(--muted); font-size: 12px; letter-spacing: .06em; } tbody tr { transition: background 140ms ease; } tbody tr:hover { background: #f7f9fd; } td a { color: var(--ink); } .quiet { margin-top: 18px; } .explorer { grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: 16px; padding-bottom: clamp(72px,9vw,112px); } .explorer-controls label { margin-bottom: 10px; font-weight: 700; } select { min-height: 50px; padding: 10px 12px; border-radius: var(--radius); color: var(--ink); } .metadata { gap: 32px; margin: 30px 0 0; } .preview-heading { justify-content: space-between; gap: 16px; } .preview-panel pre { min-height: 384px; } .site-footer { display: block; padding: 0; border: 0; background: var(--ink); color: rgba(255,255,255,.7); } .footer-inner, .footer-base { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; } .footer-inner { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.35fr); gap: clamp(40px,6vw,96px); padding: clamp(64px,8vw,96px) 0 clamp(40px,5vw,60px); } .footer-brand { color: #fff; } .footer-brand > span:last-child { display: grid; gap: 1px; } .footer-brand strong { font-size: 18px; line-height: 1; } .footer-brand small { color: var(--accent-light); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .footer-lead p { max-width: 380px; margin: 26px 0 0; color: rgba(255,255,255,.8); font-size: clamp(20px,2vw,27px); line-height: 1.25; letter-spacing: -.02em; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: start; gap: 14px 28px; } .footer-nav a { min-height: 28px; display: inline-flex; align-items: center; color: rgba(255,255,255,.72); font-weight: 400; text-decoration: none; transition: color 150ms ease; } .footer-nav a:hover { color: #fff; } .footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 24px 0 36px; border-top: 1px solid rgba(255,255,255,.12); } .footer-base p { margin: 0; color: rgba(255,255,255,.5); font-size: 13px; } @media (max-width: 900px) { .header-inner { grid-template-columns: 1fr auto; gap: 0 16px; padding-top: 8px; } .header-nav { grid-column: 1/-1; justify-content: space-between; border-top: 1px solid var(--line); } .header-nav a { min-height: 40px; } .footer-inner { grid-template-columns: 1fr; } .footer-nav { justify-content: flex-start; } } @media (max-width: 760px) { .site-header { padding: 0; } .header-inner, .hero, .section, .explorer, .footer-inner, .footer-base { width: min(100% - 32px,var(--max)); } .header-inner { gap: 0 12px; } .header-cta { min-height: 40px; padding: 0 12px; } .header-cta span { display: none; } .brand-lockup { gap: 6px; } .product-name { padding-left: 6px; } .home-hero { width: 100%; } .hero-inner { width: min(100% - 32px,var(--max)); } .section-heading, .preview-heading { align-items: flex-start; flex-direction: column; } .section-heading .button { width: auto; } .explorer { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; gap: 18px; } .stats div + div { padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.18); border-left: 0; } .button { width: 100%; } .table-wrap table { min-width: 680px; } h1 { font-size: clamp(42px,13vw,64px); } } @media (max-width: 480px) { .product-name { display: none; } .header-cta { font-size: 12px; } .footer-nav { display: grid; grid-template-columns: 1fr 1fr; } }