:root {
  --blog-content-width: 880px;
  --blog-gutter: 24px;
  --blog-paper: #fbfbf8;
  --blog-ink: #171717;
  --blog-muted: #686862;
  --blog-blue: #199bf2;
  --blog-blue-deep: #0784de;
  --blog-orange: #ff4f0a;
  --blog-line: #d8d8d1;
}

html { scroll-behavior: smooth; height: 100%; }
body { min-height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; background: var(--blog-paper); color: var(--blog-ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; }

.blog-nav { position: relative; z-index: 5; height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding: 0 34px; border-bottom: 1px solid var(--blog-ink); background: var(--blog-paper); }
.blog-wordmark { display: inline-flex; align-items: center; gap: 10px; justify-self: start; color: inherit; text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: .025em; }
.blog-mark { width: 24px; height: 24px; flex: none; background: linear-gradient(180deg, #ffc900 0 25%, #ff9d00 25% 50%, #ff5c00 50% 75%, #e63b13 75%); clip-path: polygon(0 0, 25% 0, 25% 25%, 37.5% 25%, 37.5% 50%, 62.5% 50%, 62.5% 25%, 75% 25%, 75% 0, 100% 0, 100% 100%, 75% 100%, 75% 62.5%, 62.5% 62.5%, 62.5% 87.5%, 37.5% 87.5%, 37.5% 62.5%, 25% 62.5%, 25% 100%, 0 100%); }
.blog-nav-links { display: flex; align-items: center; gap: 30px; }
.blog-nav-links a, .blog-nav-cta { text-decoration: none; font-size: 14px; font-weight: 600; }
.blog-nav-links a:hover, .blog-nav-cta:hover { text-decoration: underline; text-underline-offset: 4px; }
.blog-nav-cta { justify-self: end; padding: 11px 14px; border: 1px solid var(--blog-ink); background: #fff; }

.blog-article { width: 100%; padding: 24px 0; }
.blog-article-head, .blog-copy, .blog-demo, .blog-footer { width: min(var(--blog-content-width), calc(100% - (var(--blog-gutter) * 2))); margin-inline: auto; }
.blog-article-head { padding: 86px 0 70px; }
.blog-meta { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; margin-bottom: 36px; border-bottom: 1px solid var(--blog-ink); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.blog-meta span { color: var(--blog-orange); }
.blog-article-head h1 { max-width: 1050px; margin: 0; font-size: clamp(60px, 8.1vw, 122px); font-weight: 500; line-height: .92; letter-spacing: -.067em; }
.blog-deck { max-width: 820px; margin: 38px 0 0 auto; font-size: clamp(21px, 2vw, 31px); line-height: 1.18; letter-spacing: -.025em; }

.blog-hero-art { position: relative; width: min(var(--blog-content-width), calc(100% - (var(--blog-gutter) * 2))); aspect-ratio: 1.68 / 1; margin: 0 auto 58px; overflow: hidden; background-color: var(--blog-blue); background-image: linear-gradient(rgba(0, 95, 190, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 95, 190, .22) 1px, transparent 1px), linear-gradient(135deg, rgba(255,255,255,.2), transparent 62%); background-size: 145px 145px, 145px 145px, 100% 100%; }
.blog-paper { position: absolute; width: 36%; height: 78%; left: 27%; top: 10%; background: #fbfbf8; box-shadow: 0 8px 20px rgba(0, 73, 139, .12); }
.paper-lines { position: absolute; left: 7%; right: 7%; top: 7%; height: 19%; background: repeating-linear-gradient(to bottom, transparent 0 10px, #d7d7d1 10px 12px); }
.paper-image { position: absolute; left: 7%; top: 35%; width: 58%; height: 27%; border: 2px solid #d8d8d2; }
.paper-image i { position: absolute; width: 38px; height: 38px; left: 48%; top: 48%; transform: translate(-50%, -50%); background: #d5d5ce; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 72%, 26% 44%, 46% 65%, 66% 31%, 100% 70%, 100% 100%, 0 100%); }
.paper-table { position: absolute; left: 7%; right: 7%; bottom: 6%; height: 21%; background: repeating-linear-gradient(to bottom, #d7d7d1 0 2px, transparent 2px 18px), repeating-linear-gradient(to right, #d7d7d1 0 2px, transparent 2px 58px); }
.paper-target { position: absolute; border: 2px solid var(--blog-orange); border-radius: 5px; }
.paper-target b { position: absolute; left: -20px; top: -24px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: var(--blog-orange); color: #fff; font-size: 20px; font-weight: 500; }
.target-a { left: 11%; top: 9%; width: 52%; height: 13%; }
.target-b { left: 7%; top: 35%; width: 58%; height: 27%; border-color: transparent; }
.target-c { left: 13%; bottom: 17%; width: 72%; height: 8%; }
.blog-search-card { position: absolute; display: grid; place-items: center; width: 24%; aspect-ratio: 1; right: 20%; top: 30%; background: var(--blog-blue-deep); box-shadow: 0 8px 18px rgba(0, 73, 139, .12); }
.pixel-lens { position: relative; width: 90px; height: 90px; border: 14px solid #063e8c; border-radius: 50%; box-shadow: inset 0 0 0 11px #65c6ff; image-rendering: pixelated; }
.pixel-lens::before { content: ""; position: absolute; width: 25px; height: 25px; right: 2px; top: 3px; background: #fff; }
.pixel-lens::after { content: ""; position: absolute; width: 22px; height: 45px; left: 50%; top: 82px; transform: translateX(-50%); background: linear-gradient(90deg, #f04b0c 0 25%, #ffbd00 25% 75%, #f04b0c 75%); }

.blog-copy { font-size: 20px; line-height: 1.34; letter-spacing: -.018em; }
.blog-copy p { margin: 0 0 1.15em; }
.blog-copy a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.blog-copy-intro { padding-top: 80px; margin-bottom: 104px; }

.blog-demo { padding: 0; margin-bottom: 0; }
.blog-section-kicker { display: flex; justify-content: space-between; margin-bottom: 32px; color: var(--blog-muted); font: 700 12px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.blog-section-kicker span:first-child { color: var(--blog-orange); }
.blog-demo > h2 { max-width: 880px; margin: 0 0 46px; font-size: clamp(44px, 5.6vw, 82px); font-weight: 500; line-height: .94; letter-spacing: -.06em; }
.blog-demo .sc { width: 100%; max-width: 100%; height: 448px; margin-inline: auto; padding: 0; overflow: hidden; border: 1px solid #e4e3de; border-radius: calc(12px + 8px); background: #f5f4ef; }
/* Beat html.embed .sc { padding }, which otherwise drops the in-flow gallery below the absolutely positioned title. */
html.embed .blog-demo .sc { padding: 0; }
.blog-demo .sc-gallery-wrap,
.blog-demo .sc-gallery { height: 100%; }
/* Keep section labels on the title line. The picture row takes the leftover height and centers inside it, so label alignment does not follow the card height. */
.blog-demo .sc:not(.is-overview) .sc-gallery { align-items: stretch; }
.blog-demo .sc:not(.is-overview) .sc-gallery-row { flex: 1 1 auto; min-height: 0; }
.blog-demo .sc-gallery { margin-bottom: 0; }

.blog-copy-after ul { margin: 1.4em 0 2.2em; padding-left: 1.35em; }
.blog-copy-after li { margin-bottom: .75em; padding-left: .25em; }
.blog-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 110px; padding: 28px 0; border-top: 1px solid var(--blog-ink); border-bottom: 1px solid var(--blog-ink); font-size: 18px; font-weight: 700; }
.blog-footer a { text-decoration: none; }

@media (max-width: 680px) {
  .blog-demo .sc { height: auto; }
  .blog-demo .sc-gallery-wrap { height: auto; }
  .blog-demo .sc:not(.is-overview) .sc-gallery { height: auto; }
  .blog-demo .sc.is-overview { height: 448px; }
  .blog-demo .sc.is-overview .sc-gallery-wrap,
  .blog-demo .sc.is-overview .sc-gallery { height: 100%; }
}

@media (max-width: 820px) {
  :root { --blog-gutter: 14px; }
  .blog-nav { grid-template-columns: 1fr auto; height: 66px; padding-inline: 18px; }
  .blog-nav-links { display: none; }
  .blog-article-head { padding: 56px 0 48px; }
  .blog-deck { margin-left: 0; }
  .blog-hero-art { background-size: 82px 82px, 82px 82px, 100% 100%; }
  .blog-paper { left: 16%; width: 55%; }
  .blog-search-card { width: 34%; right: 8%; top: 34%; }
  .pixel-lens { transform: scale(.62); }
  .blog-copy-intro { margin-bottom: 68px; }
  .blog-demo { margin-bottom: 64px; padding-bottom: 52px; }
}

@media (max-width: 540px) {
  .blog-nav-cta { padding: 9px; font-size: 12px; }
  .blog-article-head h1 { font-size: 54px; }
  .blog-hero-art { aspect-ratio: 1.05; }
  .blog-paper { left: 8%; top: 9%; width: 68%; height: 80%; }
  .blog-search-card { width: 40%; right: 4%; top: 38%; }
  .blog-copy { font-size: 18px; }
  .blog-demo > h2 { font-size: 34px; }
  .blog-footer { align-items: flex-start; gap: 18px; flex-direction: column; }
}