:root {
  color-scheme: light;
  --ink: #101828;
  --muted: #526077;
  --line: #dce2eb;
  --blue: #175cff;
  --blue-soft: #edf3ff;
  --violet: #7147e8;
  --page: #ffffff;
  --panel: #f7f9fc;
  --code: #111827;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background-color: var(--page); background-image: linear-gradient(rgba(17,24,39,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(17,24,39,.024) 1px,transparent 1px); background-size: 32px 32px; }
a { color: inherit; }
.site-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 clamp(20px,4vw,64px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); }
.brand { flex: none; font-size: clamp(20px,2vw,26px); font-weight: 760; letter-spacing: -.035em; text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: clamp(16px,2.4vw,32px); color: var(--muted); font-size: 14px; font-weight: 620; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav .github-link { min-height: 42px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid #cfd6e2; border-radius: 9px; color: var(--ink); background: #fff; }
main { overflow: hidden; }
.hero { width: min(1500px,100%); min-height: 650px; margin: 0 auto; display: grid; grid-template-columns: minmax(470px,1fr) minmax(590px,1.34fr); align-items: center; gap: clamp(42px,5vw,88px); padding: 52px clamp(24px,4vw,64px) 48px; }
.hero-copy { max-width: 570px; }
.eyebrow,.card-kicker { margin: 0 0 14px; color: var(--blue); font-size: 13px; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; }
h1 { margin: 0; max-width: 560px; font-size: clamp(52px,4.6vw,72px); line-height: .98; letter-spacing: -.065em; font-weight: 780; }
.promise { margin: 27px 0 32px; max-width: 550px; color: var(--muted); font-size: clamp(21px,2vw,28px); line-height: 1.44; letter-spacing: -.02em; }
.install { width: min(100%,520px); min-height: 70px; display: flex; align-items: center; gap: 15px; padding: 0 12px 0 21px; border-radius: 11px; color: #eef6ff; background: var(--code); box-shadow: 0 16px 32px rgba(17,24,39,.16); }
.prompt { color: #5eea74; font: 700 21px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.install code { flex: 1; font: 500 clamp(16px,1.5vw,20px)/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; }
.copy-button { min-width: 66px; min-height: 42px; border: 0; border-radius: 7px; color: #d7dfeb; background: rgba(255,255,255,.08); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.copy-button:hover { color: #fff; background: rgba(255,255,255,.14); }
.facts { margin: 24px 0 0; color: var(--muted); font-size: 15px; font-weight: 520; }
.product-preview { position: relative; border: 1px solid #cfd7e3; border-radius: 14px; padding: 10px; background: #fff; box-shadow: 0 26px 70px rgba(44,54,78,.17),0 2px 6px rgba(44,54,78,.12); transform: perspective(1400px) rotateY(-1.2deg); }
.product-preview::before { content: ""; display: block; height: 34px; margin: -10px -10px 10px; border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; background: radial-gradient(circle at 18px 17px,#ff6b68 0 4px,transparent 5px),radial-gradient(circle at 34px 17px,#f7c84b 0 4px,transparent 5px),radial-gradient(circle at 50px 17px,#42c866 0 4px,transparent 5px),#fbfcfe; }
.product-preview img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top left; border-radius: 7px; background: var(--panel); }
.two-graphs,.learn { border-top: 1px solid var(--line); background: rgba(255,255,255,.94); }
.two-graphs { padding: 64px clamp(24px,4vw,64px) 70px; }
.learn { padding: 70px clamp(24px,4vw,64px) 82px; background: var(--panel); }
.section-inner { width: min(1180px,100%); margin: 0 auto; }
.section-inner>h2 { margin: 0; max-width: 760px; font-size: clamp(31px,3.5vw,48px); line-height: 1.08; letter-spacing: -.045em; }
.graph-grid,.resource-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin: 34px 0 25px; }
.graph-card,.resource-card { border: 1px solid var(--line); border-radius: 14px; padding: 28px; background: #fff; box-shadow: 0 10px 30px rgba(27,39,66,.05); }
.graph-card.context .card-kicker { color: var(--violet); }
.graph-card h3,.resource-card h3 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.025em; }
.graph-card p:last-child,.resource-card p { margin: 0; color: var(--muted); line-height: 1.65; }
.text-link { color: var(--blue); font-weight: 700; text-decoration: none; }
.resource-grid { grid-template-columns: repeat(3,1fr); }
.resource-card { text-decoration: none; transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.resource-card:hover { transform: translateY(-2px); border-color: #aab6c8; box-shadow: 0 15px 38px rgba(27,39,66,.08); }
.resource-card>span { display: block; margin-bottom: 18px; color: var(--blue); font-size: 13px; font-weight: 740; text-transform: uppercase; letter-spacing: .08em; }
.article-hero { padding: 82px clamp(22px,5vw,70px) 58px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); }
.article-hero-inner,.article-body { width: min(820px,100%); margin: 0 auto; }
.article-hero h1 { max-width: 820px; font-size: clamp(42px,6vw,68px); }
.article-summary { margin: 25px 0 0; max-width: 760px; color: var(--muted); font-size: clamp(20px,2.6vw,26px); line-height: 1.5; }
.article-meta { margin: 20px 0 0; color: #6b7587; font-size: 14px; }
.article-body { padding: 62px 22px 86px; font-size: 18px; line-height: 1.72; }
.article-body h2 { margin: 58px 0 16px; font-size: clamp(28px,4vw,39px); line-height: 1.15; letter-spacing: -.035em; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { margin: 34px 0 10px; font-size: 22px; letter-spacing: -.02em; }
.article-body p { margin: 0 0 20px; color: #263247; }
.article-body ul,.article-body ol { margin: 0 0 24px; padding-left: 24px; color: #263247; }
.article-body li { margin: 8px 0; }
.article-body code { padding: .14em .35em; border-radius: 5px; color: #123ea3; background: var(--blue-soft); font: .9em ui-monospace,SFMono-Regular,Consolas,monospace; }
.article-body pre { overflow-x: auto; margin: 24px 0; padding: 20px; border-radius: 10px; color: #eef6ff; background: var(--code); }
.article-body pre code { padding: 0; color: inherit; background: transparent; }
.article-body table { width: 100%; margin: 26px 0; border-collapse: collapse; font-size: 16px; }
.article-body th,.article-body td { padding: 13px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body th { background: var(--panel); }
.article-body .callout { margin: 30px 0; padding: 22px 24px; border-left: 4px solid var(--blue); border-radius: 0 10px 10px 0; background: var(--blue-soft); }
.article-body .callout p:last-child { margin-bottom: 0; }
.article-body .source-link { display: inline-block; margin-top: 24px; color: var(--blue); font-weight: 700; text-decoration: none; }
.article-body img { display: block; width: 100%; height: auto; margin: 30px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.flow { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 28px 0; }
.flow span { display: grid; min-height: 76px; place-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 9px; text-align: center; background: #fff; font-size: 14px; font-weight: 680; }
.site-footer { display: flex; justify-content: space-between; gap: 28px; padding: 30px clamp(22px,4vw,64px); border-top: 1px solid var(--line); color: var(--muted); background: #fff; font-size: 14px; }
.site-footer p { margin: 0; }
.site-footer div { display: flex; gap: 22px; }
:focus-visible { outline: 3px solid rgba(23,92,255,.34); outline-offset: 3px; }
@media (max-width:1050px) { .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 70px; } .hero-copy { max-width: 760px; } .product-preview { transform: none; } .resource-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:760px) { .site-header { align-items: flex-start; padding-block: 18px; } .site-nav { justify-content: flex-end; flex-wrap: wrap; row-gap: 10px; } .site-nav>a:not(.github-link) { display: none; } .hero { padding: 52px 18px 34px; gap: 40px; } h1 { font-size: clamp(44px,14vw,62px); } .promise { font-size: 20px; } .install { min-height: 64px; padding-left: 16px; } .install code { font-size: 15px; } .copy-button { min-width: 58px; } .product-preview { padding: 6px; border-radius: 10px; } .product-preview::before { height: 26px; margin: -6px -6px 6px; } .two-graphs,.learn { padding: 48px 18px 56px; } .graph-grid,.resource-grid { grid-template-columns: 1fr; } .article-hero { padding: 62px 20px 44px; } .article-body { padding: 46px 20px 68px; font-size: 17px; } .flow { grid-template-columns: 1fr; } .flow span { min-height: 54px; } .site-footer { flex-direction: column; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto!important; transition: none!important; } }