:root {
  --page: #eff3f3;
  --ink: #061d22;
  --ink-muted: #3f5559;
  --heavy-slate: #061d22;
  --light-slate: #082c32;
  --steel: #9bacad;
  --steel-dark: #556f73;
  --steel-light: #c9d4d4;
  --orange: #ff7500;
  --hairline: rgba(6,29,34,0.1);
  --planar: "Inter Tight", sans-serif;
  --sans: "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); }
a { color: var(--ink); }
a:hover { color: var(--orange); }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.muted { color: var(--ink-muted); }
.mono { font-family: var(--mono); font-size: 12px; }

.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-dark); margin-bottom: 12px; }
.eyebrow-tight { margin: 22px 0 6px; }
.h1 { margin: 0 0 24px; font-family: var(--planar); font-weight: 500; font-size: 60px; line-height: 1.06; letter-spacing: -0.02em; }
.h1-skill { font-size: 52px; }
.h2 { margin: 0 0 30px; font-family: var(--planar); font-weight: 500; font-size: 36px; line-height: 1.15; }
.h3 { margin: 0; font-family: var(--planar); font-weight: 500; font-size: 30px; line-height: 1.2; }
.h4 { margin: 0 0 14px; font-family: var(--planar); font-weight: 500; font-size: 24px; }
.lede { margin: 0 0 28px; font-size: 18px; line-height: 1.55; color: var(--ink-muted); }
.lede-narrow { max-width: 720px; }

.site-header { border-bottom: 1px solid var(--hairline); }
.nav { padding-top: 22px; padding-bottom: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { text-decoration: none; font-family: var(--planar); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.wordmark span { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--steel-dark); margin-left: 12px; text-transform: uppercase; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.nav-link { text-decoration: none; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }

.pill { display: inline-flex; align-items: center; gap: 10px; border-radius: 20px; padding: 9px 15px; min-height: 36px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: all .15s; }
.pill-lg { padding: 14px 22px; min-height: 44px; }
.pill-solid { background: var(--ink); color: #fff; }
.pill-solid .arrow { stroke: var(--orange); }
.pill-solid:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pill-outline { border: 1px solid var(--steel-dark); color: var(--ink); }
.pill-glass { background: rgba(255,255,255,0.22); color: #fff; }
.pill-tint { background: rgba(6,29,34,0.14); color: var(--ink); }

.hero { padding-top: 88px; padding-bottom: 96px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 56px; }
.hero-skill { padding-top: 56px; align-items: flex-start; }
.hero-copy { flex: 1 1 520px; min-width: 0; max-width: 640px; }
.hero-art { position: relative; flex: 0 1 396px; min-width: 0; }
.dots { position: absolute; left: -30px; bottom: -30px; width: 100%; height: 100%; pointer-events: none; background-image: radial-gradient(rgba(6,29,34,0.18) 3px, transparent 3.5px); background-size: 18px 18px; }
.hero-square { position: relative; aspect-ratio: 1 / 1; max-width: 396px; border-radius: 10px; color: var(--ink); padding: 30px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: 0 6px 16px rgba(6,29,34,0.12); }
.hero-square-end { justify-content: flex-end; }
.hero-square.on-dark { color: #fff; }
.hero-square > * { position: relative; }
.hero-square-title { font-family: var(--planar); font-size: 32px; font-weight: 500; line-height: 1.1; }
.hero-square-meta { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-top: 14px; opacity: .78; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; background: rgba(6,29,34,0.12); border-radius: 20px; padding: 6px 11px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

.fgrid { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); background-size: 12px 12px; opacity: .06; }

.explainer { display: flex; flex-wrap: wrap; gap: 48px 64px; background: #fff; border-radius: 20px; padding: 40px 32px; }
.explainer > div { flex: 1 1 380px; min-width: 0; }
.explainer .lede { margin: 0; }
.steps, .uses { margin: 0 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 18px; line-height: 1.5; color: var(--ink-muted); }
.endpoint { font-family: var(--mono); font-size: 18px; text-decoration: none; word-break: break-all; }
.prompt-intro { margin: 0 0 14px; font-size: 16px; line-height: 1.5; }
.prompt { background: var(--page); border-radius: 10px; padding: 16px 18px; font-family: var(--mono); font-size: 15px; line-height: 1.55; color: var(--ink); margin-bottom: 12px; }

.section { padding-top: 72px; padding-bottom: 24px; }
.section-tight { padding-bottom: 24px; }
.section-last { padding-top: 72px; padding-bottom: 96px; }
.cards { display: flex; flex-wrap: wrap; gap: 24px; }
.card { position: relative; overflow: hidden; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 230px; text-decoration: none; color: var(--ink); box-shadow: 0 6px 16px rgba(6,29,34,0.12); flex: 1 1 300px; min-width: 0; }
.card:hover { color: var(--ink); }
.card:hover .pill { background: #fff; color: var(--orange); }
.card-dark, .card-dark:hover, .card-cta, .card-cta:hover { color: #fff; }
.card-body, .card-foot { position: relative; }
.card-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.card-title { margin: 0 0 10px; font-family: var(--planar); font-weight: 500; font-size: 22px; }
.card-text { margin: 0; font-size: 16px; line-height: 1.4; opacity: .8; }
.card-dark .card-text, .card-dark .card-people { color: var(--steel-light); opacity: 1; }
.card-people { font-size: 12px; line-height: 1.4; opacity: .75; }
.card-cta { background: var(--light-slate); min-height: 260px; }
.card-cta .muted { color: var(--steel); }
.card-cta-title { margin: 0 0 8px; font-family: var(--planar); font-weight: 500; font-size: 26px; }
.card-cta p { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.5; }

.split { display: flex; flex-wrap: wrap; gap: 48px 72px; padding-top: 88px; }
.split-copy { flex: 1 1 360px; min-width: 0; }
.src-list { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.src-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.src-grid .src { flex: 1 1 300px; flex-direction: column; align-items: stretch; }
.src-grid .src-btn { align-self: flex-end; }
.src { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 0; background: #fff; border-radius: 10px; padding: 20px 22px; text-decoration: none; color: var(--ink); box-shadow: 0 0 0 1px var(--hairline); }
.src:hover { color: var(--ink); }
.src:hover .src-title { color: var(--orange); }
.src:hover .src-btn { background: var(--ink); color: #fff; }
.src-meta { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-dark); margin-bottom: 6px; }
.src-title { font-family: var(--planar); font-size: 19px; font-weight: 500; line-height: 1.25; }
.src-btn { flex-shrink: 0; border: 1px solid var(--ink); border-radius: 20px; padding: 9px 16px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: all .15s; }
.src-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border: 1px dashed var(--steel); border-radius: 10px; padding: 18px 22px; font-size: 16px; color: var(--ink-muted); }
.mono-link { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

.origin { display: flex; flex-wrap: wrap; gap: 40px 72px; border-top: 1px solid var(--hairline); padding-top: 56px; }
.origin-head { flex: 1 1 300px; min-width: 0; }
.origin-body { flex: 2 1 520px; min-width: 0; }
.link-row { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 16px; }

.crumbs { padding-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs [aria-current] { color: var(--ink); }
.people { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 34px; font-size: 16px; color: var(--ink-muted); }
.avatars { display: flex; padding-left: 10px; }
.av { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink); }

.site-footer { border-top: 1px solid var(--hairline); }
.footer { padding-top: 32px; padding-bottom: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink-muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-links a { text-decoration: none; color: var(--ink-muted); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 720px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .h1, .h1-skill { font-size: 40px; }
  .h2 { font-size: 30px; }
  .hero { padding-top: 48px; padding-bottom: 64px; }
  .nav-links { gap: 16px; }
  .nav-link { display: none; }
  .explainer { padding: 28px 20px; }
}