/* ==========================================================================
   dulus.ai — developers.css
   The developers page (/developers/), loaded right after dulus.css: the
   hero and its "three gold lines", the sticky "On this page" rail, the
   reference sections (quickstart, endpoints, headers, errors & limits,
   models, scripting the agent) and the closing call to action.

   Shared pieces come first: inline code, code windows (.dev-win), code
   blocks (.dev-pre) with hand-written syntax spans (.t-*), copy buttons
   (.dev-copy) and the language tabs (.dev-tabs, driven by main.js).
   Every value is a dulus.css token unless it is a syntax colour; those
   were checked for AA contrast on the code background.
   ========================================================================== */

/* ---------------------------------------------------------- inline code -- */

.dev :is(p, dd, td, figcaption, li) > code,
.dev .dev-recipe__warn span > code {
  padding: 0.1em 0.4em;
  border-radius: 6px;
  font-size: 0.86em;
  color: var(--gold);
  background: rgba(250, 211, 139, 0.07);
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.14) inset;
  white-space: nowrap;
}

/* --------------------------------------------------------- code windows -- */
/* A dark sheet with a title bar: the hero's app.py, the tabs, the samples. */

.dev-win {
  position: relative;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.03), rgba(255, 245, 230, 0) 140px), #0b0a0a;
  box-shadow:
    0 0 0 1px var(--line-2) inset,
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 40px 90px -40px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.dev-win__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 245, 230, 0.02);
}
.dev-win__bar--mid {
  border-top: 1px solid var(--line);
}
.dev-win__dots {
  display: inline-flex;
  gap: 7px;
  margin-right: 4px;
}
.dev-win__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 245, 230, 0.12);
}
.dev-win__name {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.dev-win__meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dev-win__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--live);
}
.dev-win__bar .dev-win__status {
  margin-left: auto;
}
.dev-win__status .dot {
  width: 6px;
  height: 6px;
}
.dev-win__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: rgba(255, 245, 230, 0.02);
}
.dev-win__hdr {
  font-size: 0.72rem;
  color: var(--ink-3);
}
.dev-win__hdr--gold {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--gold-1);
  background: rgba(245, 152, 42, 0.1);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.32) inset, 0 0 24px -6px rgba(245, 152, 42, 0.5);
}

/* ---------------------------------------------------------- code blocks -- */

.dev-pre {
  margin: 0;
  padding: 18px 22px 20px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: #d6d1c9;
  white-space: pre;
  tab-size: 2;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 236, 210, 0.16) transparent;
  overscroll-behavior-x: contain;
}
.dev-pre code {
  display: inline-block;
  min-width: 100%;
  font-size: inherit;
}
.dev-pre::-webkit-scrollbar {
  height: 8px;
}
.dev-pre::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(255, 236, 210, 0.14);
}
.dev-pre:focus-visible {
  outline-offset: -3px;
  border-radius: 0;
}

/* Syntax, by hand. Warm on purpose: gold and orange carry the meaning,
   the rest is cream and sand, so code sits inside the brand palette. */
.t-k { color: #ff9a4a; }                      /* keyword */
.t-s { color: #ffd27a; }                      /* string */
.t-p { color: #f1c9a0; }                      /* key, parameter, property */
.t-f { color: #fff4e0; }                      /* function, command, class */
.t-n { color: #ffb98a; }                      /* number, boolean */
.t-v { color: #ffe7be; text-decoration: underline dotted rgba(255, 231, 190, 0.45); text-underline-offset: 3px; } /* yours to fill */
.t-o { color: #8f8a83; }                      /* punctuation */
.t-c { color: #8a857d; font-style: italic; }  /* comment, elision */
.t-x { color: #f7b45a; }                      /* flag */
.t-u { color: #f5f5f7; }                      /* url */
.t-h { color: #f1c9a0; }                      /* header name */
.t-g { color: var(--ink-4); user-select: none; }   /* prompt */

/* Numbered lines with added-line markers (the hero's app.py). Each line is
   a .ln span; numbers are CSS counters, so they never reach the clipboard. */
.dev-pre--lines {
  padding-left: 0;
  padding-right: 0;
  counter-reset: ln;
}
.dev-pre--lines .ln {
  counter-increment: ln;
  display: inline-block;
  min-width: 100%;
  padding-right: 22px;
  vertical-align: top;
}
.dev-pre--lines .ln::before {
  content: counter(ln);
  display: inline-block;
  width: 52px;
  padding-right: 20px;
  text-align: right;
  color: #57544f;
  user-select: none;
}
.dev-pre--lines .ln--add {
  background: linear-gradient(90deg, rgba(245, 152, 42, 0.16), rgba(245, 152, 42, 0.05) 70%, rgba(245, 152, 42, 0.02));
  box-shadow: 3px 0 0 0 var(--orange) inset;
}
.dev-pre--lines .ln--add::before {
  content: "+";
  color: var(--gold-1);
}
/* Once, after the window rises: a light runs along each gold line. */
.dev-pre--lines .ln--add {
  position: relative;
  overflow: hidden;
}
.dev-pre--lines .ln--add::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(255, 210, 122, 0.22) 42%, rgba(255, 236, 200, 0.42) 50%, rgba(255, 210, 122, 0.22) 58%, transparent 80%);
  transform: translateX(-100%);
  animation: dev-sweep 1.2s var(--ease-in-out) both;
  animation-delay: calc(1300ms + var(--k, 0) * 200ms);
  pointer-events: none;
}
@keyframes dev-sweep {
  to {
    transform: translateX(100%);
  }
}
/* One emphasised line in an otherwise plain block. */
.ln--hit {
  display: inline-block;
  min-width: calc(100% + 44px);
  margin: 0 -22px;
  padding: 0 22px;
  background: linear-gradient(90deg, rgba(245, 152, 42, 0.16), rgba(245, 152, 42, 0.04));
  box-shadow: 3px 0 0 0 var(--orange) inset;
}

/* ----------------------------------------------------------------- copy -- */

.dev-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-3);
  background: rgba(10, 10, 11, 0.6);
  box-shadow: 0 0 0 1px var(--line-2) inset;
  transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.dev-copy:hover {
  color: var(--ink);
  background: rgba(255, 245, 230, 0.06);
  box-shadow: 0 0 0 1px var(--line-3) inset;
}
.dev-copy .ico {
  width: 14px;
  height: 14px;
}
.dev-copy .i-check,
.dev-copy__done {
  display: none;
}
.dev-copy[data-copied="true"] {
  color: var(--live);
}
.dev-copy[data-copied="true"] .i-copy,
.dev-copy[data-copied="true"] .dev-copy__idle {
  display: none;
}
.dev-copy[data-copied="true"] .i-check {
  display: block;
}
.dev-copy[data-copied="true"] .dev-copy__done {
  display: inline;
}
.dev-copy--icon {
  flex: none;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}
.dev-copy--icon .ico {
  width: 17px;
  height: 17px;
}
/* Copying needs a script; without one the code is still selectable. */
html:not(.js) .dev-copy {
  display: none;
}

/* ----------------------------------------------------------------- tabs -- */

.dev-win__bar--tabs {
  min-height: 48px;
  padding: 0 8px;
}
.dev-tabs__list {
  display: flex;
  align-self: stretch;
  gap: 2px;
}
.dev-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  transition: color var(--t-fast);
}
.dev-tabs__tab::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--plumage-x);
  box-shadow: 0 0 12px rgba(245, 152, 42, 0.55);
  transform: scaleX(0);
  transition: transform var(--t) var(--ease);
}
.dev-tabs__tab:hover {
  color: var(--ink);
}
.dev-tabs__tab[aria-selected="true"] {
  color: var(--ink);
}
.dev-tabs__tab[aria-selected="true"]::after {
  transform: none;
}
.dev-tabs__tab:focus-visible {
  outline-offset: -6px;
  border-radius: 10px;
}
.dev-tabs__panel > .dev-copy {
  position: absolute;
  top: 9px;
  right: 10px;
  z-index: 2;
}
.dev-tabs__label {
  display: none;
}
/* Without a script every panel shows, each with its own label. */
html:not(.js) .dev-win__bar--tabs {
  display: none;
}
html:not(.js) .dev-tabs__panel[hidden] {
  display: block !important;
}
html:not(.js) .dev-tabs__panel + .dev-tabs__panel {
  border-top: 1px solid var(--line);
}
html:not(.js) .dev-tabs__label {
  display: block;
  padding: 16px 22px 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* ----------------------------------------------------------------- hero -- */

.dev-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(44px, 5vw, 76px)) 0 clamp(68px, 6.6vw, 100px);
  overflow: clip;
  isolation: isolate;
}
.dev-hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 76% 66%, rgba(245, 152, 42, 0.14), transparent 70%),
    radial-gradient(26% 30% at 72% 60%, rgba(255, 210, 122, 0.07), transparent 70%),
    radial-gradient(60% 46% at 4% 0%, rgba(200, 92, 35, 0.08), transparent 70%);
}
/* A faint drafting grid that fades out around the code window. */
.dev-hero__lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 236, 210, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 236, 210, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center -1px;
  -webkit-mask-image: radial-gradient(55% 62% at 70% 62%, #000, transparent 78%);
  mask-image: radial-gradient(55% 62% at 70% 62%, #000, transparent 78%);
}
.dev-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
}
.dev-hero__title {
  margin-top: 22px;
  font-size: clamp(2.6rem, 0.85rem + 5.5vw, 6.1rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.dev-hero__title > span,
.dev-hero__title > .serif {
  display: block;
}
.dev-hero__title > span {
  animation: rise 1.1s var(--ease-out) 60ms both;
}
.dev-hero__title > .serif {
  width: fit-content;
  animation: rise 1.2s var(--ease-out) 180ms both;
}
.dev-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 88px);
  margin-top: clamp(32px, 3.4vw, 50px);
}
.dev-hero__copy {
  display: grid;
  justify-items: start;
  gap: 28px;
  padding-top: 4px;
  container-type: inline-size;
}
.dev-hero__lede {
  max-width: 33rem;
}
.dev-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.dev-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dev-hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dev-hero__facts li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--orange);
  transform: rotate(45deg);
}

/* The base URL is the one value everybody needs: copyable, in a well. */
.dev-base {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 31rem;
  min-height: 58px;
  padding: 0 9px 0 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.04), rgba(255, 245, 230, 0.012)), var(--sunk);
  box-shadow:
    0 0 0 1px var(--line-2) inset,
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 40px -24px rgba(0, 0, 0, 0.9);
}
.dev-base__label {
  flex: none;
  padding-right: 12px;
  border-right: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 0.64rem;
  line-height: 24px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dev-base__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 0.95rem;
  color: var(--gold-1);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dev-base .dev-copy--icon {
  color: var(--ink-3);
}
.dev-base .dev-copy--icon:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}
/* In a narrow column the label moves above the URL, so the URL itself is
   never cut short. */
@container (max-width: 470px) {
  .dev-base {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 9px 6px 10px 16px;
  }
  .dev-base__label {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    border: 0;
    line-height: 1.6;
  }
  .dev-base__url {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.9rem;
  }
  .dev-base .dev-copy--icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

.dev-hero__visual {
  position: relative;
  margin: 0;
}
.dev-hero__visual::before {
  content: "";
  position: absolute;
  inset: 12% -4% -6% 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 152, 42, 0.2), transparent);
  filter: blur(26px);
  pointer-events: none;
}
.dev-win--hero {
  box-shadow:
    0 0 0 1px var(--line-2) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 60px 120px -50px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 90px -40px rgba(245, 152, 42, 0.35);
}
/* Where columns are at their narrowest, code steps down a size so the
   samples keep fitting without scrolling. */
@media (min-width: 981px) and (max-width: 1240px) {
  .dev-win--hero .dev-pre {
    font-size: 0.78rem;
  }
}
.dev-hero__cap {
  margin-top: 16px;
  padding-left: 4px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* ---------------------------------------------------------- docs layout -- */
/* Grid children may shrink below their content: wide code scrolls inside
   its own block instead of widening the page. */
.dev-hero__grid > *,
.dev-docs > *,
.dev-qs > *,
.dev-ep > *,
.dev-hd > *,
.dev-recipe > *,
.dev-rate > * {
  min-width: 0;
}

.dev-docs {
  --sec-gap: clamp(56px, 6vw, 96px);
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 4.6vw, 80px);
  padding-top: clamp(64px, 6.8vw, 100px);
}

/* "On this page": a sticky rail on desktop, a strip of chips on phones. */
.dev-toc {
  position: sticky;
  top: calc(var(--nav-h) + 44px);
}
/* Sections lay themselves out by the width of this column (container
   queries below), so the rail appearing never squeezes a code sample. */
.dev-docs__main {
  container: docs / inline-size;
}
.dev-toc__label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dev-toc__list {
  display: grid;
  gap: 2px;
  margin-top: 16px;
  border-left: 1px solid var(--line-2);
}
.dev-toc__list a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0 8px 18px;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink-3);
  transition: color var(--t-fast);
}
.dev-toc__list a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: var(--plumage);
  box-shadow: 0 0 12px rgba(245, 152, 42, 0.6);
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.dev-toc__list a:hover {
  color: var(--ink);
}
.dev-toc__list a[aria-current="true"] {
  color: var(--ink);
}
.dev-toc__list a[aria-current="true"]::before {
  opacity: 1;
  transform: none;
}
.dev-toc__no {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  transition: color var(--t-fast);
}
.dev-toc__list a[aria-current="true"] .dev-toc__no {
  color: var(--gold-ink);
}
.dev-toc__end {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.dev-toc__hint {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-3);
}
.dev-toc__end .link {
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------- sections -- */
/* The spacing between sections belongs to the one above, so a jump to
   #headers lands on its heading rather than on empty padding. */

.dev-sec {
  position: relative;
}
.dev-sec:not(:last-child) {
  padding-bottom: calc(var(--sec-gap) * 2);
}
.dev-sec:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sec-gap);
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), var(--line) 55%, transparent);
}
.dev-sec__head {
  display: grid;
  gap: 18px;
  max-width: 46rem;
  margin-bottom: clamp(32px, 3.6vw, 52px);
}
.dev-sec__head .lede {
  max-width: 40rem;
  text-wrap: balance;
}
.dev-sec__no {
  color: var(--ink-3);
  letter-spacing: 0.08em;
}
.dev-h2 {
  font-size: clamp(2.05rem, 1.2rem + 2.6vw, 3.55rem);
  line-height: 1;
  letter-spacing: -0.045em;
}
/* The serif accent travels as one piece, so a phone breaks the line
   before it ("When it says no, / it says why.") instead of inside it. */
.dev-h2 {
  text-wrap: wrap;
}
.dev-h2 .serif {
  display: inline-block;
}

/* Fine print that must sit next to token copy. */
.dev-legal {
  margin-top: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.dev-legal--block {
  margin-top: 18px;
}

/* ----------------------------------------------------------- quickstart -- */

.dev-qs {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  align-items: start;
  gap: clamp(28px, 3.6vw, 60px);
}
.dev-qs__code {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}

.dev-steps {
  display: grid;
  gap: 34px;
  counter-reset: step;
}
.dev-step {
  position: relative;
  padding-left: 58px;
  counter-increment: step;
}
.dev-step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -3px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-1);
  background: radial-gradient(circle at 50% 30%, rgba(250, 211, 139, 0.2), rgba(245, 152, 42, 0.05)), var(--bg);
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.32) inset, 0 6px 18px -8px rgba(245, 152, 42, 0.7);
}
.dev-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17.5px;
  top: 42px;
  bottom: -28px;
  width: 1px;
  background: linear-gradient(180deg, rgba(250, 211, 139, 0.4), var(--line-2));
}
.dev-step__title {
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.dev-step > p {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--ink-3);
}
.dev-step > p strong {
  font-weight: 560;
  color: var(--ink);
}
.dev-step > .dev-legal {
  margin-top: 14px;
  font-size: 0.75rem;
}
.dev-step__link {
  margin-top: 12px;
  font-size: var(--fs-sm);
}

/* The key as the app shows it once: prefix, then a secret you never see again. */
.dev-key {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 10px 10px 12px;
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 0.8rem;
  background: var(--sunk);
  box-shadow: 0 0 0 1px var(--line-2) inset;
  overflow: hidden;
}
.dev-key .ico {
  width: 16px;
  height: 16px;
  color: var(--gold-ink);
}
.dev-key code {
  flex: none;
  font-size: inherit;
  color: var(--gold-1);
}
/* The hidden part of the secret, drawn as dots so it adds no width. */
.dev-key__mask {
  flex: 1 1 0;
  min-width: 24px;
  height: 10px;
  margin-left: -8px;
  background: radial-gradient(circle, var(--ink-4) 0 2px, transparent 2.5px) 0 50% / 9px 9px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
  mask-image: linear-gradient(90deg, #000 70%, transparent);
}
.dev-key__tag {
  flex: none;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--gold);
  background: rgba(245, 152, 42, 0.1);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.28) inset;
}
.dev-step__facts {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-3);
}
.dev-step__facts li {
  position: relative;
  padding-left: 16px;
}
.dev-step__facts li > code {
  white-space: nowrap;
  overflow-wrap: normal;
}
.dev-step__facts li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--orange);
  transform: rotate(45deg);
}

/* ------------------------------------------------------------ endpoints -- */

.dev-ep {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(22px, 2.8vw, 36px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.03), rgba(255, 245, 230, 0.008)), var(--bg-1);
  box-shadow: 0 0 0 1px var(--line) inset, var(--shadow-2);
}
.dev-ep + .dev-ep {
  margin-top: 20px;
}
.dev-ep__route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  font-family: var(--mono);
  font-size: clamp(1.02rem, 0.92rem + 0.5vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.dev-ep__route code {
  font-size: inherit;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.dev-verb {
  display: inline-grid;
  place-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  box-shadow: 0 0 0 1px var(--line-3) inset;
}
.dev-verb--post {
  color: #1d1003;
  background: var(--plumage);
  box-shadow: var(--glow);
}
.dev-ep__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.dev-ep__tag .ico {
  width: 15px;
  height: 15px;
  color: var(--gold-ink);
}
.dev-ep__desc {
  margin-top: 14px;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--ink-2);
}
.dev-ep__cmd {
  margin-top: 22px;
}
.dev-fields {
  display: grid;
  margin-top: 22px;
  border-top: 1px solid var(--line);
}
.dev-fields > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.dev-fields dt {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-3);
}
.dev-fields dt code {
  font-size: inherit;
  color: var(--gold-1);
}
.dev-fields dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-3);
}

/* What every call goes through: a track with four nodes and a pulse that
   runs down it once, when the card scrolls in. */
.dev-life {
  height: 100%;
  padding: 22px 24px 24px;
  border-radius: var(--r);
  background: var(--sunk);
  box-shadow: 0 0 0 1px var(--line) inset;
}
.dev-life__title {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dev-life__list {
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: 20px;
}
.dev-life__list::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-1), rgba(250, 211, 139, 0.14));
}
.dev-life__list::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  width: 11px;
  height: 100%;
  background: radial-gradient(circle at 50% 11px, #fff1d1 0 2px, rgba(255, 210, 122, 0.7) 3px, rgba(245, 152, 42, 0) 8px) no-repeat;
  opacity: 0;
  pointer-events: none;
}
.dev-ep.is-in .dev-life__list::after {
  animation: dev-pulse 2.6s var(--ease-in-out) 0.5s both;
}
.dev-life__list li {
  position: relative;
  padding-left: 30px;
}
.dev-life__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--sunk);
  box-shadow: 0 0 0 1.5px var(--gold) inset, 0 0 12px rgba(245, 152, 42, 0.4);
}
.dev-life__step {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-1);
}
.dev-life__list p {
  margin-top: 4px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-3);
}

@keyframes dev-pulse {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  12%,
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(100% - 22px));
  }
}

/* -------------------------------------------------------------- headers -- */

.dev-hd {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: start;
  gap: clamp(28px, 3.6vw, 60px);
}
.dev-hd__group {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dev-ref {
  display: grid;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.dev-ref + .dev-hd__group {
  margin-top: 40px;
}
.dev-ref > div {
  position: relative;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.dev-ref dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.dev-ref dt code {
  font-size: 0.86rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.dev-ref__opt {
  padding: 2px 7px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  box-shadow: 0 0 0 1px var(--line-2) inset;
}
.dev-ref dd {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.58;
  color: var(--ink-3);
}
.dev-ref__key::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: var(--plumage);
  box-shadow: 0 0 12px rgba(245, 152, 42, 0.55);
}
.dev-ref__key dt code {
  color: var(--gold-1);
}
.dev-hd__sample {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}
.dev-note {
  margin-top: 12px;
  padding-left: 4px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* --------------------------------------------------------------- errors -- */

.dev-err-sample {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 10px 16px 10px 10px;
  border-radius: 14px;
  font-family: var(--mono);
  font-size: 0.82rem;
  white-space: nowrap;
  background: var(--sunk);
  box-shadow: 0 0 0 1px var(--line) inset;
  overflow-x: auto;
  scrollbar-width: none;
}
.dev-err-sample code {
  font-size: inherit;
  color: #d6d1c9;
}
.dev-err-sample__code,
.dev-code-pill {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 46px;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-1);
  background: rgba(245, 152, 42, 0.09);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.26) inset;
}
.dev-code-pill--dim {
  color: var(--ink-2);
  background: rgba(255, 245, 230, 0.04);
  box-shadow: 0 0 0 1px var(--line-2) inset;
}

.dev-table {
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.025), rgba(255, 245, 230, 0.008)), var(--bg-1);
  box-shadow: 0 0 0 1px var(--line) inset;
  overflow: hidden;
}
.dev-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.dev-table th,
.dev-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.dev-table thead th {
  padding-block: 13px;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(255, 245, 230, 0.02);
}
.dev-table tbody tr:last-child > * {
  border-bottom: 0;
}
.dev-table tbody th {
  width: 8.5rem;
  font-weight: 400;
  white-space: nowrap;
}
.dev-table tbody td {
  width: 45%;
  color: var(--ink-3);
}
.dev-table tbody td:first-of-type {
  color: var(--ink-2);
}
.dev-table tbody tr {
  transition: background-color var(--t-fast);
}
.dev-table tbody tr:hover {
  background: rgba(255, 245, 230, 0.018);
}

.dev-limits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.dev-limit {
  padding: 20px 20px 22px;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.03), rgba(255, 245, 230, 0.008)), var(--bg-1);
  box-shadow: 0 0 0 1px var(--line) inset;
}
.dev-limit__value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 40px;
  font-family: var(--display);
  font-size: 2.15rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}
.dev-limit__value span {
  padding-right: 0.04em;
  background: var(--plumage);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dev-limit__value small {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.dev-limit__value--icon {
  align-items: center;
}
.dev-limit__value--icon .ico {
  width: 30px;
  height: 30px;
  color: var(--gold-1);
}
.dev-limit__text {
  margin-top: 12px;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- models -- */

.dev-rates {
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.025), rgba(255, 245, 230, 0.008)), var(--bg-1);
  box-shadow: 0 0 0 1px var(--line) inset, var(--shadow-2);
  overflow: hidden;
}
.dev-rate {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.dev-rate:last-child {
  border-bottom: 0;
}
.dev-rate__x {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
/* Four pips, the first --rate of them lit: a mask cuts the strip. */
.dev-rate__pips {
  --pip: 6px;
  --gap: 4px;
  width: calc(var(--pip) * 4 + var(--gap) * 3);
  height: 18px;
  background:
    linear-gradient(180deg, var(--gold-1), var(--orange)) 0 0 / calc(var(--rate, 0) * (var(--pip) + var(--gap))) 100% no-repeat,
    rgba(255, 245, 230, 0.1);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 var(--pip), transparent var(--pip) calc(var(--pip) + var(--gap)));
  mask: repeating-linear-gradient(90deg, #000 0 var(--pip), transparent var(--pip) calc(var(--pip) + var(--gap)));
  filter: drop-shadow(0 0 6px rgba(245, 152, 42, 0.35));
}
.dev-rate__ids {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dev-id {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  text-align: left;
  background: rgba(255, 245, 230, 0.03);
  box-shadow: 0 0 0 1px var(--line-2) inset;
  transition: background-color var(--t-fast), box-shadow var(--t-fast);
}
.dev-id code {
  font-size: 0.8rem;
  color: var(--ink);
  transition: color var(--t-fast);
}
.dev-id__note {
  font-size: 0.72rem;
  color: var(--gold-ink);
  white-space: nowrap;
}
.dev-id:hover {
  background: rgba(245, 152, 42, 0.07);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.38) inset;
}
.dev-id[data-copied="true"] {
  box-shadow: 0 0 0 1px rgba(62, 230, 160, 0.55) inset;
}
.dev-id[data-copied="true"] code {
  color: var(--live);
}
html:not(.js) .dev-id {
  cursor: text;
  user-select: text;
}
.dev-rate--free {
  background: linear-gradient(90deg, rgba(62, 230, 160, 0.045), transparent 55%);
}
.dev-rate--free .dev-rate__x > span:first-child {
  color: var(--live);
}
.dev-rate__free {
  max-width: 46rem;
  margin-top: 12px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-3);
}
.dev-rate__free strong {
  color: var(--ink);
  font-weight: 560;
}
.dev-models__hint {
  margin-top: 12px;
  padding-left: 4px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
html:not(.js) .dev-models__hint {
  display: none;
}
.dev-models__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 28px;
}
.dev-models__foot .dev-legal {
  flex: 1 1 22rem;
  margin: 0;
  max-width: 34rem;
}

/* ---------------------------------------------------------------- agent -- */

.dev-recipes {
  display: grid;
  gap: 14px;
}
.dev-recipe {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.03), rgba(255, 245, 230, 0.008)), var(--bg-1);
  box-shadow: 0 0 0 1px var(--line) inset;
}
.dev-recipe__title {
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.dev-recipe__info > p {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-3);
}
.dev-recipe__info > .dev-recipe__warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  background: rgba(245, 152, 42, 0.06);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.2) inset;
}
.dev-recipe__warn .ico {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--gold-ink);
}
.dev-term {
  min-width: 0;
  border-radius: var(--r);
  background: #0b0a0a;
  box-shadow: 0 0 0 1px var(--line-2) inset, 0 24px 60px -36px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
.dev-term .dev-pre {
  padding: 16px 20px;
}

.dev-sub {
  margin-top: clamp(48px, 5vw, 72px);
  font-size: var(--fs-4);
  letter-spacing: -0.02em;
}
.dev-ext {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.dev-ext__card .ico-tile {
  margin-bottom: 20px;
}
.dev-ext__card .ico-tile .ico {
  width: 21px;
  height: 21px;
}
.dev-ext__title {
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.dev-ext__card p {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-3);
}
.dev-agent__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 30px;
}
.dev-agent__foot .link {
  font-size: var(--fs-sm);
}
.dev-agent__foot .link svg {
  width: 17px;
  height: 17px;
}
.dev-agent__foot .link:hover svg {
  transform: none;
}

/* ------------------------------------------------------------------ cta -- */

.dev-cta {
  position: relative;
  margin-top: clamp(72px, 8vw, 120px);
  padding: clamp(96px, 10vw, 168px) 0 clamp(104px, 10vw, 168px);
  border-top: 1px solid var(--line);
  text-align: center;
  overflow: clip;
  isolation: isolate;
}
.dev-cta__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 50% 40%, rgba(245, 152, 42, 0.13), transparent 70%),
    radial-gradient(22% 24% at 50% 26%, rgba(255, 210, 122, 0.08), transparent 70%);
}
.dev-cta__inner {
  display: grid;
  justify-items: center;
  gap: 26px;
}
.dev-cta__bird {
  width: 92px;
  filter: drop-shadow(0 14px 36px rgba(245, 152, 42, 0.45));
}
.dev-cta h2 {
  max-width: 13ch;
}
.dev-cta .lede {
  margin-inline: auto;
  max-width: 36rem;
}
.dev-cta__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 1099px) {
  .dev-docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 40px;
  }
  .dev-toc {
    position: relative;
    top: auto;
    margin: 0 calc(var(--gutter) * -1) clamp(48px, 7vw, 72px);
  }
  .dev-toc__label,
  .dev-toc__end {
    display: none;
  }
  .dev-toc__list {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 2px var(--gutter) 6px;
    border: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
  .dev-toc__list::-webkit-scrollbar {
    display: none;
  }
  .dev-toc__list li {
    flex: none;
  }
  .dev-toc__list a {
    gap: 8px;
    padding: 9px 15px;
    border-radius: var(--pill);
    white-space: nowrap;
    box-shadow: 0 0 0 1px var(--line-2) inset;
    transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
  }
  .dev-toc__list a::before {
    display: none;
  }
  .dev-toc__list a[aria-current="true"] {
    background: rgba(245, 152, 42, 0.08);
    box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.4) inset;
  }
}

@media (max-width: 980px) {
  .dev-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .dev-hero__lede {
    max-width: 38rem;
  }
  .dev-hero__lines {
    -webkit-mask-image: radial-gradient(80% 50% at 50% 74%, #000, transparent 78%);
    mask-image: radial-gradient(80% 50% at 50% 74%, #000, transparent 78%);
  }
  .dev-hero__glow {
    background:
      radial-gradient(70% 36% at 50% 76%, rgba(245, 152, 42, 0.14), transparent 70%),
      radial-gradient(70% 40% at 0% 0%, rgba(200, 92, 35, 0.08), transparent 70%);
  }
}

@container docs (min-width: 901px) and (max-width: 1000px) {
  .dev-pre {
    font-size: 0.78rem;
  }
}

@container docs (max-width: 900px) {
  .dev-qs,
  .dev-ep,
  .dev-hd,
  .dev-recipe {
    grid-template-columns: minmax(0, 1fr);
  }
  .dev-qs__code,
  .dev-hd__sample {
    position: static;
  }
  .dev-limits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dev-ref__key::before {
    left: -12px;
  }
}

@container docs (max-width: 700px) {
  .dev-ext {
    grid-template-columns: minmax(0, 1fr);
  }
  .dev-rate {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }
}

/* The table becomes a stack of cards; roles keep it a table for readers. */
@container docs (max-width: 640px) {
  .dev-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .dev-table table,
  .dev-table tbody,
  .dev-table tr,
  .dev-table th,
  .dev-table td {
    display: block;
    width: auto;
  }
  .dev-table tbody tr {
    padding: 18px 18px 20px;
    border-bottom: 1px solid var(--line);
  }
  .dev-table tbody tr:last-child {
    border-bottom: 0;
  }
  .dev-table tbody th,
  .dev-table tbody td {
    width: auto;
    padding: 0;
    border: 0;
  }
  .dev-table tbody td:first-of-type {
    margin-top: 12px;
  }
  .dev-table tbody td:last-of-type {
    margin-top: 8px;
    padding-left: 14px;
    border-left: 1px solid var(--line-gold);
  }
}

@media (max-width: 560px) {
  .dev-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .dev-hero__ctas .btn {
    width: 100%;
  }
  .dev-pre {
    padding: 16px 16px 18px;
    font-size: 0.75rem;
  }
  .dev-pre--lines {
    padding-inline: 0;
  }
  .dev-pre--lines .ln::before {
    width: 40px;
    padding-right: 14px;
  }
  .ln--hit {
    min-width: calc(100% + 32px);
    margin: 0 -16px;
    padding: 0 16px;
  }
  .dev-win__foot .dev-win__hdr:not(.dev-win__hdr--gold) {
    display: none;
  }
  .dev-step {
    padding-left: 50px;
  }
  .dev-ep {
    padding: 20px 18px 22px;
    border-radius: var(--r);
  }
  .dev-life {
    padding: 20px 18px;
  }
  .dev-fields > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .dev-limits {
    grid-template-columns: minmax(0, 1fr);
  }
  .dev-recipe {
    padding: 20px 18px;
    border-radius: var(--r);
  }
  .dev-term .dev-pre {
    padding: 14px 16px;
  }
  .dev-cta__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .dev-cta__ctas .btn {
    width: 100%;
  }
  .dev-agent__foot .cmd {
    width: 100%;
    justify-content: space-between;
  }
  .dev-err-sample {
    align-items: flex-start;
    white-space: normal;
  }
  .dev-err-sample code {
    padding-top: 3px;
  }
  .dev-ep__cmd {
    width: 100%;
    height: auto;
    min-height: 48px;
    padding-block: 8px;
    border-radius: 18px;
    justify-content: space-between;
  }
  .dev-ep__cmd .cmd__text {
    white-space: normal;
  }
}

/* -------------------------------------------------------- accessibility -- */

@media (prefers-reduced-motion: reduce) {
  .dev-hero .rise,
  .dev-hero__title > span,
  .dev-hero__title > .serif {
    animation: none;
  }
  .dev-life__list::after,
  .dev-pre--lines .ln--add::after {
    display: none;
  }
}

@media (forced-colors: active) {
  .dev-limit__value span {
    color: CanvasText;
    background: none;
  }
  .dev-rate__pips,
  .dev-hero__lines,
  .dev-life__list::after {
    display: none;
  }
  .dev-pre--lines .ln--add,
  .ln--hit {
    border-left: 3px solid Highlight;
  }
}