.model-detail-body,
.model-detail-body * {
  letter-spacing: 0;
}

.model-detail-body [hidden] {
  display: none !important;
}

.model-detail-body {
  min-width: 320px;
  background: #fff;
  color: #0a0a0a;
}

/* Enabled in the head only for a same-origin console iframe. Public details
   retain their navigation even when someone opens an embed URL directly. */
html.model-detail-embedded .site-header,
html.model-detail-embedded .site-footer,
html.model-detail-embedded .detail-breadcrumb,
html.model-detail-embedded .detail-console-link,
html.model-detail-embedded .detail-actions a[href^="/console/"],
html.model-detail-embedded .detail-error a[href="/models/"] { display: none; }
html.model-detail-embedded,
html.model-detail-embedded .model-detail-body { min-width: 0; min-height: 100%; background: #fff; }
html.model-detail-embedded .detail-shell { width: calc(100% - 48px); max-width: none; min-height: 0; padding-block: 24px 40px; }
html.model-detail-embedded .detail-hero-band { margin-top: 0; }
html.model-detail-embedded .detail-loading { min-height: min(460px,70dvh); }
html.model-detail-embedded .detail-error { margin-block: 32px; padding: 32px 20px; }
html.model-detail-embedded .detail-family { cursor: default; text-decoration: none; }
html.model-detail-embedded .detail-layout { gap: 24px; }
html.model-detail-embedded .detail-section { scroll-margin-top: 20px; }
html.model-detail-embedded .detail-aside { min-width: 0; }
html.model-detail-embedded .detail-price-time-tooltip { max-width: calc(100vw - 72px); }
@media (max-width: 800px) {
  html.model-detail-embedded .detail-shell { width: calc(100% - 32px); padding-block: 16px 24px; }
  html.model-detail-embedded .detail-layout { gap: 20px; }
}
@media (max-width: 480px) {
  html.model-detail-embedded .detail-shell { width: calc(100% - 24px); padding-block: 12px 20px; }
  html.model-detail-embedded .detail-hero-band,
  html.model-detail-embedded .detail-section,
  html.model-detail-embedded .detail-aside { padding: 20px 16px; }
  html.model-detail-embedded .detail-title-block h1 { overflow-wrap: anywhere; }
}

.detail-shell {
  min-height: 720px;
  padding-top: 28px;
  padding-bottom: 88px;
}

.detail-loading {
  min-height: 560px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  color: #737373;
}

.detail-loading span {
  width: 28px;
  height: 28px;
  border: 2px solid #e5e5e5;
  border-top-color: #111;
  border-radius: 50%;
  animation: detail-spin .8s linear infinite;
}

@keyframes detail-spin {
  to { transform: rotate(360deg); }
}

.detail-error {
  max-width: 680px;
  margin: 80px auto;
  padding: 56px 0;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  text-align: center;
}

.detail-error #detail-error-title {
  margin: 8px 0 12px;
  font-size: 34px;
  line-height: 42px;
}

.detail-error > p:not(.detail-eyebrow) {
  margin: 0 auto 28px;
  color: #737373;
  line-height: 24px;
}

.detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 24px;
  overflow: hidden;
  color: #737373;
  font-size: 12px;
  white-space: nowrap;
}

.detail-breadcrumb a:hover {
  color: #0a0a0a;
}

.detail-breadcrumb strong {
  min-width: 0;
  overflow: hidden;
  color: #262626;
  font-weight: 500;
  text-overflow: ellipsis;
}

.detail-hero-band {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 36px;
  padding: 40px 0;
  border-bottom: 1px solid #d8d8d8;
}

.detail-identity {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.detail-model-logo {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fafafa;
  color: #262626;
  font-size: 19px;
  font-weight: 700;
}

.detail-model-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  background: #fafafa;
}

.detail-title-block {
  min-width: 0;
}

.detail-family,
.detail-eyebrow {
  margin: 0;
  color: #737373;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-transform: uppercase;
}

a.detail-family {
  display: inline-block;
  transition: color 0.15s ease;
}

a.detail-family:hover {
  color: #0a0a0a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.detail-title-block h1 {
  max-width: 900px;
  margin: 4px 0 8px;
  font-size: 34px;
  font-weight: 600;
  line-height: 42px;
  overflow-wrap: anywhere;
}

.detail-id-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #525252;
}

.detail-id-row code {
  min-width: 0;
  overflow: hidden;
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-icon-button,
.detail-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #737373;
}

.detail-icon-button {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 6px;
}

.detail-icon-button:hover,
.detail-copy-button:hover {
  background: #f1f1f1;
  color: #0a0a0a;
}

.detail-icon-button svg,
.detail-copy-button svg {
  width: 15px;
  height: 15px;
}

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.detail-badges {
  margin-top: 14px;
}

.detail-badge,
.detail-capability {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.detail-badge {
  background: #f1f1f1;
  color: #525252;
}

.detail-badge.new { background: #e8f2ff; color: #1769aa; }
.detail-badge.featured { background: #fff0e6; color: #b74a0c; }
.detail-badge.free { background: #e8f8f0; color: #147456; }

.detail-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
}

.detail-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 15px;
  border: 1px solid #d4d4d4;
  border-radius: 7px;
  font-weight: 600;
}

.detail-button-primary {
  border-color: #111;
  background: #111;
  color: #fff;
}

.detail-button-primary:hover {
  background: #2b2b2b;
}

.detail-button-secondary {
  background: #fff;
}

.detail-button-secondary:hover {
  background: #f8f8f8;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 48px;
}

.detail-main {
  min-width: 0;
}

.detail-section {
  padding: 36px 0;
  border-bottom: 1px solid #e5e5e5;
}

.detail-section-heading {
  margin-bottom: 20px;
}

.detail-section-heading h2,
.detail-aside-section h2 {
  margin: 5px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

.detail-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

/* The description fills its column so it lines up with the metrics row below;
   a narrower measure left a large empty gap on the right of the section. */
.detail-description {
  margin: 0;
  color: #525252;
  font-size: 15px;
  line-height: 26px;
  white-space: pre-line;
}

.detail-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 30px 0 0;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}

.detail-metrics div {
  min-width: 0;
  padding: 18px 20px;
  border-left: 1px solid #e5e5e5;
}

.detail-metrics div:first-child {
  border-left: 0;
}

.detail-metrics dt,
.detail-price-list dt,
.detail-spec-list dt {
  color: #737373;
  font-size: 11px;
  line-height: 16px;
}

.detail-metrics dd {
  margin: 5px 0 0;
  overflow: hidden;
  font-family: "Roboto Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One shared chip shape, one tint per well-known feature, so a reader scans the
   row by colour instead of reading every pill. Unlisted capabilities and admin
   tags keep the neutral chip. Size stays with typography.css, which is linked
   after this file and owns the chip font and height. */
.detail-capability {
  padding: 5px 11px;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  background: #fff;
  color: #262626;
  font-weight: 600;
  letter-spacing: .01em;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.detail-capability:hover {
  border-color: #b8b8b8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}

.detail-capability[data-type="modality"] {
  border-color: #a9ccf7;
  background: #eaf3ff;
  color: #1257a3;
}

.detail-capability[data-type="tag"] {
  border-color: #dcdce0;
  background: #f5f5f6;
  color: #525252;
}

/* Green covers the guarantees about the response shape: structured JSON out. */
.detail-capability[data-name="json-mode"],
.detail-capability[data-name="structured-outputs"] {
  border-color: #a8dcc4;
  background: #eaf8f0;
  color: #0f6b4a;
}

/* Violet deliberation, amber tool use, teal vision and blue streaming keep the
   five features in the screenshot visually distinct from one another. */
.detail-capability[data-name="reasoning"] {
  border-color: #cdb9f5;
  background: #f3edfd;
  color: #5b34b8;
}

.detail-capability[data-name="streaming"] {
  border-color: #a9ccf7;
  background: #eaf3ff;
  color: #1257a3;
}

.detail-capability[data-name="tool-calling"] {
  border-color: #f5cf92;
  background: #fff4e5;
  color: #92500a;
}

.detail-capability[data-name="vision"] {
  border-color: #96d5d8;
  background: #e6f7f8;
  color: #0d6066;
}

.detail-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--availability-color, #147456);
  font-size: 12px;
  font-weight: 600;
}

.detail-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--availability-color, #22a474);
}

.detail-status strong { color: inherit; font: inherit; }

.detail-provider-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.detail-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.detail-related-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.detail-related-card:hover {
  border-color: #d4d4d4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.detail-related-logo {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1px solid #ededed;
  border-radius: 8px;
  background: #fff;
  color: #444;
  font-size: 13px;
  font-weight: 700;
}

.detail-related-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 4px;
  background: #fff;
  object-fit: contain;
}

.detail-related-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.detail-related-body strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-related-body span {
  overflow: hidden;
  color: #737373;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .detail-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .detail-related-grid { grid-template-columns: 1fr; }
}

.detail-provider-heading {
  min-width: 0;
}

.detail-provider-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.detail-provider-sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-provider-sort {
  color: #737373;
  font-size: 12px;
  font-weight: 600;
}

/* The native select only holds state; the custom trigger and listbox below
   render the visible control. */
.detail-provider-sort-select {
  display: none;
}

.detail-provider-sort-ui {
  position: relative;
}

.detail-provider-sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #fff;
  color: #262626;
  font: 500 13px "DM Sans", sans-serif;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.detail-provider-sort-trigger:hover {
  border-color: #a3a3a3;
}

.detail-provider-sort-trigger:focus-visible,
.detail-provider-sort-ui.open .detail-provider-sort-trigger {
  border-color: #0a0a0a;
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

.detail-provider-sort-caret {
  width: 14px;
  height: 14px;
  color: #737373;
  transition: transform 0.15s ease;
}

.detail-provider-sort-ui.open .detail-provider-sort-caret {
  transform: rotate(180deg);
}

.detail-provider-sort-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  padding: 4px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 15, 15, 0.12), 0 2px 6px rgba(15, 15, 15, 0.06);
}

.detail-provider-sort-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #3f3f3f;
  font: 500 13px "DM Sans", sans-serif;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.detail-provider-sort-option:hover {
  background: #f5f5f5;
}

.detail-provider-sort-option.selected {
  background: #f2eefd;
  color: #171717;
}

.detail-provider-sort-check {
  display: inline-flex;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #171717;
}

.detail-provider-sort-check svg {
  width: 14px;
  height: 14px;
}

.detail-provider-sort-name {
  flex: 1;
}

.detail-provider-sort-icon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: 18px;
  color: #a3a3a3;
}

.detail-provider-sort-icon svg {
  width: 13px;
  height: 13px;
}

.detail-table-wrap {
  overflow-x: auto;
  border: 1px solid #dedede;
  border-radius: 8px;
}

.detail-provider-table {
  width: 100%;
  min-width: 990px;
  border-collapse: collapse;
}

.detail-provider-table th,
.detail-provider-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #ededed;
  text-align: center;
}

.detail-provider-table th {
  background: #fafafa;
  color: #737373;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.detail-provider-table tbody tr:last-child td {
  border-bottom: 0;
}

.detail-provider-table td:first-child {
  text-align: left;
}

.detail-provider-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.detail-provider-discount {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid #a7e3ba;
  border-radius: 5px;
  background: #effbf3;
  color: #137333;
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.detail-provider-table .price-stack strong s {
  margin-left: 4px;
  color: #a3a3a3;
  font-size: 11px;
  font-weight: 400;
}

.detail-discount-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  padding: 2px 8px;
  border: 1px solid #a7e3ba;
  border-radius: 5px;
  background: #effbf3;
  color: #137333;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.provider-dialog-discount {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid #137333;
  border-radius: 0 6px 6px 0;
  background: #effbf3;
  color: #137333;
  font-size: 12px;
  font-weight: 600;
}

.provider-dialog-pricing strong s {
  margin-left: 4px;
  color: #a3a3a3;
  font-size: 11px;
  font-weight: 400;
}

.detail-provider-row {
  cursor: pointer;
}

.detail-provider-row:hover td,
.detail-provider-row:focus-visible td {
  background: #fafafa;
}

.detail-provider-row:focus-visible {
  outline: 2px solid rgba(22, 135, 232, .28);
  outline-offset: -2px;
}

.detail-provider-logo {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
}

.detail-provider-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  background: #fff;
}

.detail-provider-table code {
  display: block;
  max-width: 220px;
  overflow: hidden;
  font-family: "Roboto Mono", monospace;
  color: #525252;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-provider-route {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.detail-provider-route code {
  min-width: 0;
  flex: 0 1 auto;
}

.detail-route-copy {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #737373;
}

.detail-route-copy:hover,
.detail-route-copy:focus-visible {
  background: #ededed;
  color: #0a0a0a;
}

.detail-route-copy:focus-visible {
  outline: 2px solid rgba(22, 135, 232, .35);
  outline-offset: 1px;
}

.detail-route-copy svg {
  width: 15px;
  height: 15px;
}

.detail-provider-table .price-cell {
  font-family: "Roboto Mono", monospace;
  font-size: 13px;
  white-space: nowrap;
}

.detail-provider-table .price-summary-cell { min-width: 310px; }
.detail-provider-table .price-stack { display: inline-grid; grid-template-columns: repeat(2, max-content); gap: 6px 28px; text-align: left; }
.detail-provider-table .price-stack span { display: grid; grid-template-columns: repeat(3, max-content); align-items: baseline; gap: 7px; min-width: 0; }
.detail-provider-table .price-stack small { overflow: hidden; color: #737373; font-family: "DM Sans",sans-serif; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.detail-provider-table .price-stack strong { font-size: 13px; font-weight: 600; white-space: nowrap; }
.detail-provider-table .price-stack em { color: #a3a3a3; font-size: 10px; font-style: normal; white-space: nowrap; }

.detail-availability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--availability-color, #147456);
  font-size: 12px;
  font-weight: 600;
}

.detail-availability i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--availability-color, #22a474);
}

.detail-availability strong { color: inherit; font: inherit; }

.detail-api-description {
  margin: 10px 0 0;
  color: #737373;
  font-size: 13px;
  line-height: 22px;
}

.detail-code-panel {
  overflow: hidden;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  background: #17191f;
  color: #dce1e9;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .06);
}

.detail-api-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid #e1e4e8;
  background: #f7f8fa;
}

.detail-api-tabs {
  display: inline-flex;
  min-width: 0;
  gap: 4px;
}

.detail-api-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.detail-api-tabs button:hover { background: #eceef2; color: #272b33; }
.detail-api-tabs button.active {
  border-color: #dce0e6;
  background: #fff;
  color: #17191f;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

.detail-code-language {
  flex: 0 0 auto;
  color: #7c8491;
  font: 11px/1.4 "Roboto Mono", monospace;
}

.detail-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 10px 18px;
  border-bottom: 1px solid #2b2e36;
  background: #1e2128;
}

.detail-code-endpoint {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #c6ccd6;
  font: 11px/1.5 "Roboto Mono", monospace;
}

.detail-code-method {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid #315547;
  border-radius: 5px;
  background: #243d33;
  color: #a3dbba;
  font-size: 10px;
  font-weight: 600;
}

#api-endpoint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-code-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.detail-code-actions .detail-copy-button {
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #b8c0ce;
  font: 11px/1.4 Inter, sans-serif;
  cursor: pointer;
}

.detail-code-actions #copy-api-code { min-width: 104px; border-color: #3a3e49; background: #282c35; }
.detail-code-actions .detail-copy-button:hover,
.detail-code-actions .detail-wrap-button[aria-pressed="true"] { background: #343946; color: #fff; }
.detail-code-actions #copy-api-code.copied { border-color: #315547; background: #243d33; color: #a3dbba; }
#copy-api-code-icon { display: flex; }
.detail-api-tabs button:focus-visible,
.detail-code-actions button:focus-visible,
.detail-code-panel pre:focus-visible { outline: 2px solid #8db5ed; outline-offset: -3px; }

.detail-code-panel pre {
  margin: 0;
  overflow: auto;
  padding: 22px 0;
  scrollbar-width: thin;
  scrollbar-color: #49515f #17191f;
  font: 12px/23px "Roboto Mono", monospace;
  tab-size: 2;
}

.detail-code-panel pre code {
  display: block;
  width: max-content;
  min-width: 100%;
  counter-reset: request-line;
  font: inherit;
  white-space: normal;
}

.detail-code-line {
  position: relative;
  display: block;
  min-height: 23px;
  padding: 0 24px 0 56px;
  counter-increment: request-line;
  white-space: pre;
}

.detail-code-line::before {
  position: absolute;
  left: 14px;
  width: 24px;
  content: counter(request-line);
  color: #788191;
  text-align: right;
  user-select: none;
}

.detail-code-line:hover { background: rgba(255, 255, 255, .025); }
.detail-code-panel pre.wrap-lines code { width: auto; }
.wrap-lines .detail-code-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-code-token-command { color: #d3b8ff; }
.detail-code-token-flag, .detail-code-token-key { color: #93c7f4; }
.detail-code-token-string { color: #b3dba7; }
.detail-code-token-variable, .detail-code-token-number { color: #f4c58b; }
.detail-code-token-keyword { color: #d3b8ff; }

.detail-code-footer {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 13px 18px;
  border-top: 1px solid #e1e4e8;
  background: #fafbfc;
  color: #727985;
}

.detail-code-footer svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; }
.detail-code-footer p { margin: 0; font-size: 11px; line-height: 19px; }

.detail-aside {
  min-width: 0;
  border-left: 1px solid #e5e5e5;
  padding-left: 32px;
}

.detail-aside-section {
  padding: 36px 0;
  border-bottom: 1px solid #e5e5e5;
}

.detail-price-list,
.detail-spec-list {
  margin: 22px 0 0;
}

.detail-agent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

/* One compatible coding agent: its brand mark plus the administrator's name. */
.detail-agent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  background: #fafafa;
  color: #262626;
  font-size: 12px;
  font-weight: 600;
}

.detail-agent-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  overflow: hidden;
  border: 1px solid #e3e3e3;
  border-radius: 50%;
  background: #fff;
  color: #525252;
  font-size: 9px;
  font-weight: 700;
}

.detail-agent-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.detail-price-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-price-time-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  border-radius: 50%;
  color: #a3a3a3;
  cursor: help;
  transition: color 0.15s ease;
}

.detail-price-time-badge:hover,
.detail-price-time-badge:focus-visible {
  color: #0a0a0a;
  outline: none;
}

.detail-price-time-badge svg {
  width: 17px;
  height: 17px;
}

.detail-price-time-tooltip {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  right: -10px;
  width: 250px;
  padding: 12px 14px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 15, 15, 0.12), 0 2px 6px rgba(15, 15, 15, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.detail-price-time-badge:hover .detail-price-time-tooltip,
.detail-price-time-badge:focus-visible .detail-price-time-tooltip,
.detail-price-time-badge:focus-within .detail-price-time-tooltip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.detail-price-time-tooltip p {
  margin: 0 0 4px;
  color: #171717;
  font-size: 12px;
  font-weight: 600;
}

.detail-price-time-provider {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.detail-price-time-provider + .detail-price-time-row {
  border-top: 0;
  padding-top: 4px;
}

.detail-price-time-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0 2px;
  border-top: 1px solid #f0f0f0;
}

.detail-price-time-row span {
  color: #737373;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
}

.detail-price-time-row strong {
  color: #262626;
  font-size: 12px;
  font-weight: 500;
}

.detail-price-list div,
.detail-spec-list div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid #ededed;
}

.detail-price-list dd,
.detail-spec-list dd {
  min-width: 0;
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.detail-price-list dd {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.detail-price-list strong {
  font-family: "Roboto Mono", monospace;
  font-size: 15px;
}

.detail-price-list dd span {
  color: #737373;
  font-size: 10px;
}

.detail-spec-list dd {
  max-width: 170px;
  color: #262626;
  font-size: 12px;
  font-weight: 500;
}

.detail-console-link {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 26px;
  padding: 18px;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  background: #fafafa;
}

.detail-console-link span {
  color: #737373;
  font-size: 11px;
}

.detail-console-link strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

.detail-console-link:hover {
  border-color: #b9b9b9;
  background: #fff;
}

.detail-footer {
  margin-top: 0;
}

.detail-mobile-menu {
  position: absolute;
  z-index: 120;
  top: 56px;
  right: 16px;
  width: 220px;
  padding: 8px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.detail-mobile-menu a {
  display: block;
  padding: 11px 12px;
  border-radius: 6px;
  font-weight: 500;
}

.detail-mobile-menu a:hover {
  background: #f5f5f5;
}

.detail-menu-button {
  width: 36px;
  height: 36px;
  padding: 9px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.detail-menu-button span {
  width: 18px;
  height: 1px;
  background: #111;
}

#detail-toast {
  min-width: 120px;
  text-align: center;
}

@media (max-width: 1000px) {
  .detail-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 30px;
  }

  .detail-aside {
    padding-left: 24px;
  }

  .detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-metrics div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid #e5e5e5;
  }

  .detail-metrics div:nth-child(4) {
    border-top: 1px solid #e5e5e5;
  }
}

@media (max-width: 800px) {
  .detail-hero-band {
    flex-direction: column;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-aside {
    border-left: 0;
    padding-left: 0;
  }

  .detail-aside-section:first-child {
    border-top: 1px solid #e5e5e5;
  }

  .detail-console-link {
    max-width: 360px;
  }
}

@media (max-width: 640px) {
  .model-detail-body .site-header .header-inner {
    width: calc(100% - 32px);
    gap: 8px;
  }

  .model-detail-body .detail-menu-button {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .detail-shell {
    width: min(100% - 32px, var(--shell));
    padding-top: 20px;
    padding-bottom: 56px;
  }

  .detail-hero-band {
    gap: 26px;
    padding: 30px 0;
  }

  .detail-identity {
    width: 100%;
    gap: 14px;
  }

  .detail-model-logo {
    width: 50px;
    height: 50px;
  }

  .detail-title-block h1 {
    font-size: 26px;
    line-height: 33px;
  }

  .detail-actions {
    width: 100%;
  }

  .detail-actions .detail-button {
    flex: 1;
    padding: 0 10px;
  }

  .detail-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .detail-api-tabs {
    max-width: 100%;
    overflow-x: auto;
  }

  .detail-api-toolbar { gap: 8px; padding: 9px 10px; }
  .detail-api-tabs { gap: 2px; }
  .detail-api-tabs button { min-height: 36px; padding: 0 10px; font-size: 11px; }
  .detail-code-header { gap: 8px; padding: 10px 12px; }
  .detail-code-endpoint { gap: 7px; font-size: 10px; }
  .detail-code-actions { gap: 4px; }
  .detail-code-actions .detail-copy-button { min-height: 36px; padding: 0 8px; }
  .detail-code-actions #copy-api-code { min-width: 88px; }
  .detail-wrap-button span { display: none; }
  .detail-code-footer { padding: 12px 14px; }
  .detail-code-line { padding-right: 18px; padding-left: 46px; }
  .detail-code-line::before { left: 8px; width: 22px; }

  .detail-metrics div {
    padding: 15px 12px;
  }

  .detail-metrics dd {
    font-size: 12px;
  }

  .detail-code-panel pre {
    padding: 16px 0;
    font-size: 11px;
  }

  .detail-footer .footer-main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .model-detail-body .site-header .pico-language-button {
    width: 36px;
    padding: 0;
    justify-content: center;
  }

  .model-detail-body .site-header .pico-language-current,
  .model-detail-body .site-header .pico-language-chevron {
    display: none;
  }

  .model-detail-body .site-header .pico-language-menu {
    position: fixed;
    top: 64px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}

@media (max-width: 360px) {
  .model-detail-body .site-header .header-inner {
    gap: 4px;
  }
}

/* Public model observability */
.detail-stats-timing {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.detail-stats-period {
  color: #737373;
  font-size: 12px;
  font-weight: 500;
}

.detail-stats-updated {
  color: #737373;
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .detail-stats-timing { align-items: flex-start; }
}

.detail-spec-list dd a {
  color: #075ea4;
  text-decoration: none;
}

.detail-spec-list dd a:hover {
  text-decoration: underline;
}

.detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}

.detail-stat-grid article {
  min-width: 0;
  padding: 16px 18px;
  border-left: 1px solid #e5e5e5;
}

.detail-stat-grid article:first-child { border-left: 0; }
.detail-stat-grid span,
.detail-stat-grid small {
  display: block;
  color: #737373;
  font-size: 11px;
  line-height: 16px;
}

.detail-stat-grid strong {
  display: block;
  margin: 5px 0 2px;
  overflow: hidden;
  font-family: "Roboto Mono", monospace;
  font-size: 18px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.detail-chart-panel,
.detail-provider-observability {
  min-width: 0;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #fff;
}

.detail-chart-panel { padding: 18px; }
.detail-provider-observability { margin-top: 20px; padding: 18px; }

.detail-chart-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.detail-chart-heading strong { font-size: 13px; font-weight: 600; }
.detail-chart-heading span { color: #737373; font-size: 11px; }

.detail-trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 142px;
  margin-top: 18px;
  padding: 8px 2px 0;
  border-bottom: 1px solid #d8d8d8;
}

.detail-trend-column {
  min-width: 0;
  flex: 1 1 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.detail-trend-bar {
  width: min(100%, 18px);
  min-height: 3px;
  height: var(--bar-height, 3px);
  border-radius: 4px 4px 0 0;
  background: #1687e8;
}

.detail-trend-bar.availability { background: #139e90; }
.detail-trend-bar.cache-hit { background: #d97706; }
.detail-trend-bar.empty { background: #e5e5e5; }
.detail-trend-label {
  color: #a3a3a3;
  font-family: "Roboto Mono", monospace;
  font-size: 9px;
  line-height: 12px;
}

.detail-provider-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.detail-provider-stat {
  min-width: 0;
  padding: 13px;
  border: 1px solid #e5e5e5;
  border-radius: 7px;
  background: #fafafa;
}

.detail-provider-stat-head,
.detail-provider-stat-metrics,
.detail-provider-stat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.detail-provider-stat-head { min-width: 0; }
.detail-provider-stat-name {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-provider-table th:nth-child(1), .detail-provider-table td:nth-child(1) { width: 110px; }
.detail-provider-table th:nth-child(2), .detail-provider-table td:nth-child(2) { width: 220px; }
.detail-provider-table th:nth-child(3), .detail-provider-table td:nth-child(3) { width: 270px; }
.detail-provider-table th:nth-child(4), .detail-provider-table td:nth-child(4) { width: 72px; }
.detail-provider-table th:nth-child(5), .detail-provider-table td:nth-child(5) { width: 80px; }
.detail-provider-table th:nth-child(6), .detail-provider-table td:nth-child(6) { width: 96px; }
.detail-provider-table th:nth-child(7), .detail-provider-table td:nth-child(7) { width: 88px; }

.detail-provider-stat-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.detail-provider-stat-metrics div { min-width: 0; }
.detail-provider-stat-metrics span,
.detail-provider-stat-foot span { display: block; color: #737373; font-size: 10px; }
.detail-provider-stat-metrics strong { display: block; margin-top: 3px; font-family: "Roboto Mono", monospace; font-size: 12px; }
.detail-provider-stat-metrics small { display: block; margin-top: 2px; overflow: hidden; color: #8a8a8a; font: 9px/12px "Roboto Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.detail-provider-stat-foot { margin-top: 12px; }
.detail-provider-stat-foot strong { font-size: 11px; font-weight: 600; }
.detail-provider-stat-availability { height: 4px; margin-top: 11px; overflow: hidden; border-radius: 99px; background: #e5e5e5; }
.detail-provider-stat-availability i { display: block; height: 100%; border-radius: inherit; background: #139e90; }
.detail-provider-stat-availability i.unavailable { background: #d4d4d4; }
.detail-provider-stat-empty { grid-column: 1 / -1; padding: 24px; color: #737373; font-size: 12px; text-align: center; }

@media (max-width: 800px) {
  .detail-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-stat-grid article:nth-child(3) { border-left: 0; border-top: 1px solid #e5e5e5; }
  .detail-stat-grid article:nth-child(4) { border-top: 1px solid #e5e5e5; }
  .detail-stat-grid article:nth-child(5) { border-left: 0; border-top: 1px solid #e5e5e5; }
}

@media (max-width: 640px) {
  .detail-chart-grid,
  .detail-provider-stats { grid-template-columns: 1fr; }
  .detail-stat-grid strong { font-size: 16px; }
  .detail-chart-panel,
  .detail-provider-observability { padding: 14px; }
}
/* The subsection label sits under the endpoints block, so it takes the
   eyebrow treatment plus a trailing rule instead of competing with an h2. */
.detail-supported-parameters { margin-top: 26px; padding-top: 20px; border-top: 1px solid #e5e5e5; }

.detail-supported-parameters h3,
.detail-supported-endpoints h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: #525252;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.detail-supported-parameters h3::after,
.detail-supported-endpoints h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e5e5;
}

.detail-parameter-list { display: flex; flex-wrap: wrap; gap: 7px; }
.detail-parameter-list code { padding: 5px 8px; border: 1px solid #e5e5e5; border-radius: 6px; background: #fafafa; color: #404040; font: 11px/1.2 'Roboto Mono',monospace; }

/* The endpoints share one row, one card each, so the whole API surface is
   readable at a glance instead of three full-width rows. auto-fit keeps a
   third column only while each card still fits its path and badge. */
.detail-endpoint-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }

.detail-endpoint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid #e5e5e5;
  border-radius: 9px;
  background: #fafafa;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.detail-endpoint-row:hover {
  border-color: #d4d4d4;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

/* Name and path stack on the left and the mode badge anchors the right, so a
   wide card fills its width instead of leaving a gap under a short badge.
   min-width:0 lets both lines ellipsize before the badge can be pushed out. */
.detail-endpoint-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.detail-endpoint-name,
.detail-endpoint-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.detail-endpoint-name { color: #1a1a1a; font-size: 13px; font-weight: 600; line-height: 18px; }

.detail-endpoint-path { color: #737373; font: 500 11px/1.4 "Roboto Mono", monospace; }

.detail-endpoint-modes { flex: 0 0 auto; display: flex; gap: 5px; }
.detail-endpoint-mode { padding: 4px 8px; border: 1px solid #d4d4d4; border-radius: 6px; background: #fff; color: #525252; font-size: 10.5px; font-weight: 700; line-height: 14px; white-space: nowrap; }
/* Cards stay neutral so a section of same-mode endpoints reads clean; the
   small mode badge carries the protocol colour. Blue marks a native endpoint
   that forwards the request unchanged, amber a converted one. */
.detail-endpoint-mode.native { border-color: #b8d9f7; background: #f0f7ff; color: #0b5f9e; }
.detail-endpoint-mode.convert { border-color: #ecd3a4; background: #fcf6ea; color: #8a5300; }
.detail-endpoint-empty { grid-column: 1 / -1; margin: 0; padding: 15px 4px; color: #737373; font-size: 12px; }

/* One card per row below 800px so the path and badge never share a squeezed
   line. This block must stay after the auto-fit rule to win the cascade. */
@media (max-width: 800px) {
  .detail-endpoint-list { grid-template-columns: 1fr; }
}