/* Model detail (design v9 board ModelDetail, FE9-2): the breadcrumb, a
   header card (name, ID, one sentence, the price and two actions beside the
   model's own sample loop and its prompt), sticky tabs 介绍 · 体验 · API ·
   价格 kept in the address, and the same family below. Public cards pad 24.
   Components marked "shared later" repeat on the home and model list pages
   until they move to base.css. */
.model-page-body { background: var(--gray-50); }
/* The shared sheet draws main as a column and every main > section as a
   card; this page sets its own container. */
.model-main { display: block; max-width: none; margin: 0; padding: 24px 0 96px; }
.model-main > section { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.model-main .card { --table-edge: 24px; margin: 0; }
.model-main .card-head { padding: 24px 24px 16px; }
.model-main h1, .model-main h2, .model-main h3 { margin: 0; letter-spacing: 0; }

/* Page glyphs (shared later). */
.glyph.model-glyph-arrow { width: 16px; height: 16px; clip-path: path("M3.33 7.25H10.86L7.47 3.86L8.53 2.8L13.73 8L8.53 13.2L7.47 12.14L10.86 8.75H3.33Z"); }
.glyph.model-glyph-video { width: 14px; height: 14px; clip-path: path(evenodd, "M1.17 3.5H9.33V10.5H1.17ZM2.4 4.7V9.3H8.1V4.7ZM12.83 4.67L9.33 7L12.83 9.33Z"); }
.glyph.model-glyph-pause { width: 18px; height: 18px; clip-path: path("M4.5 3H7.5V15H4.5ZM10.5 3H13.5V15H10.5Z"); }
.glyph.model-glyph-play { width: 18px; height: 18px; clip-path: path("M5.25 2.25L15.75 9L5.25 15.75Z"); }

/* Not found: one empty state with one action. */
.model-missing { padding-top: 48px; }
.card.model-missing-card { max-width: 560px; margin: 0 auto; padding: 48px 24px; }
.model-missing-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 24px 0 0; font-size: 14px; line-height: 20px; }

/* Header card: the 16:9 loop sets the height. */
.model-crumbs { margin: 0; }
.card.model-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: center; gap: 48px; margin-top: 16px; padding: 24px; }
.model-head:not(:has(> .model-media:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.model-info { display: flex; flex-direction: column; min-width: 0; }
.model-name { color: var(--text-1); font: 600 30px/38px var(--font-sans); letter-spacing: -.01em; }
.model-idrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; margin-top: 8px; min-width: 0; }
.model-head-id { min-width: 0; overflow: hidden; color: var(--text-2); font: 400 13px/20px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.model-idrow .btn-icon { margin-left: -4px; }
/* The ID's copy button: a copy turns its glyph into a check, a refused one
   into a cross (model.js names either in the label and tooltip). The mark
   holds about 1.6s: the hold is an animation delay, which the shared
   reduced-motion rule keeps (it only shortens durations), and model.js
   restores the copy glyph when it ends. Shared later as the v9 copy
   button. */
.model-copy-id > :is(.glyph-pub-check, .glyph-pub-close), .model-copy-id:is(.is-copied, .is-failed) > .glyph-pub-copy { display: none; }
.model-copy-id.is-copied > .glyph-pub-check, .model-copy-id.is-failed > .glyph-pub-close { display: inline-block; }
.btn.model-copy-id.is-copied, .btn.model-copy-id.is-copied:hover { color: var(--success-fg); }
.btn.model-copy-id.is-failed, .btn.model-copy-id.is-failed:hover { color: var(--danger-fg); }
.model-copy-id:is(.is-copied, .is-failed) { animation: model-copy-hold 1ms 1.6s both; }
@keyframes model-copy-hold { from, to { opacity: 1; } }
.model-desc { max-width: 520px; margin: 16px 0 0; color: var(--text-2); font-size: 14px; line-height: 22px; text-wrap: pretty; }
.model-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-height: 32px; margin-top: 24px; }
.model-price :is(.catalog-lead, .catalog-value) { color: var(--text-1); font: 600 24px/32px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.model-price .catalog-unit { color: var(--text-3); font-size: 13px; line-height: 20px; }
.model-price .catalog-note { color: var(--text-2); font-size: 14px; line-height: 22px; }
.skel.model-skel-price { width: 200px; height: 20px; margin: 6px 0; }
.model-price-note { min-height: 20px; margin: 2px 0 0; color: var(--text-2); font-size: 13px; line-height: 20px; }
.model-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

/* The model's own loop (shared later as the v9 stage) and its prompt. */
.model-media { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; }
.model-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-16); background: var(--ink-950); }
.model-stage-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.model-chip { position: absolute; bottom: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r-6); background: rgba(16, 22, 31, .64); color: #fff; font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.model-stage-btn { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-full); background: rgba(16, 22, 31, .64); box-shadow: none; color: #fff; cursor: pointer; transition: background-color var(--t-hover) var(--ease), transform var(--t-press) var(--ease); }
.model-stage-btn:hover { border: 0; background: rgba(16, 22, 31, .8); color: #fff; }
.model-stage-btn:active { transform: scale(.98); }
.model-stage-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.model-stage-btn .model-glyph-play, .model-stage-btn.is-paused .model-glyph-pause { display: none; }
.model-stage-btn.is-paused .model-glyph-play { display: inline-block; }
.model-media-cap { display: flex; gap: 8px; min-width: 0; color: var(--text-2); font-size: 13px; line-height: 20px; }
.model-media-lbl { flex: none; color: var(--text-3); }

/* Tabs stick under the header; each panel holds cards 16px apart. A panel's
   scroll margin is the header, the 41px bar and the 24px between them, so a
   tab chosen from the stuck bar brings its panel back under the bar
   (model.js). */
.model-tabs { position: sticky; top: var(--site-head); z-index: 20; margin-top: 32px; background: var(--gray-50); }
.model-panel { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; scroll-margin-top: calc(var(--site-head) + 65px); }
.model-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.model-panel[hidden] { display: none; }

/* 介绍: capabilities and the first-frame examples (inputs, never outputs). */
.model-caps { padding: 0 24px 24px; }
.model-caps dd { line-height: 22px; }
.model-foot { justify-content: flex-start; padding: 8px 24px; }
.model-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0 24px 24px; list-style: none; }
.model-frame { display: flex; flex-direction: column; min-width: 0; }
.model-frame-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-8); background: var(--gray-100); }
.model-frame-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.model-frame-tag { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-6); background: rgba(16, 22, 31, .64); color: #fff; font: 500 12px/16px var(--font-sans); }
.model-frame-lbl { margin-top: 12px; color: var(--text-3); font-size: 12px; line-height: 16px; }
.model-frame-text { margin-top: 4px; color: var(--text-1); font-size: 14px; line-height: 22px; }

/* 体验: the form beside the output, as the board 体验台 lays it out: the
   modes and resolutions as full-width segmented controls, the length as a
   slider beside its number field (shared/controls.js) within the model's
   range; signed out, the action reads 登录后生成. */
.card.model-try { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); padding: 0; overflow: hidden; }
.model-try-form p { margin: 0; }
.model-try-form { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-right: 1px solid var(--line-soft); }
.model-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* The mode's inputs: a dashed slot that names them; signed out it is inert
   and says they are uploaded after sign-in. */
.model-try-form .model-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; padding: 12px; border: 1px dashed var(--gray-300); border-radius: var(--r-8); color: var(--text-2); font-size: 13px; line-height: 20px; }
.model-slot[hidden] { display: none; }
.model-slot > .glyph { color: var(--gray-500); }
.model-slot-note { color: var(--text-3); }
.glyph.model-glyph-upload { width: 16px; height: 16px; clip-path: path("M8 1.94L12.03 5.97L10.97 7.03L8.75 4.81L8.75 10.5L7.25 10.5L7.25 4.81L5.03 7.03L3.97 5.97ZM1.75 10L3.25 10L3.25 12.75L12.75 12.75L12.75 10L14.25 10L14.25 14.25L1.75 14.25Z"); }
.model-try-form :is(.model-modes, .model-seg) { display: flex; width: 100%; height: 36px; }
.model-try-form :is(.model-modes, .model-seg) > .seg-item { flex: 1 1 0; height: 32px; padding: 0 8px; }
.model-duration-field { gap: 4px; }
.model-ratios { display: flex; justify-content: space-between; gap: 4px; }
.model-ratio { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--text-2); font: 500 12px/16px var(--font-sans); cursor: pointer; }
.model-ratio:hover { border: 0; background: none; color: var(--text-1); }
.model-ratio-box { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--gray-200); border-radius: var(--r-8); background: var(--gray-0); color: var(--gray-500); transition: border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease); }
.model-ratio-box > span { display: block; border: 1.5px solid currentColor; border-radius: 2px; }
.model-ratio:hover .model-ratio-box { border-color: var(--gray-300); }
.model-ratio[aria-checked="true"] { color: var(--text-1); }
.model-ratio[aria-checked="true"] .model-ratio-box { border-color: var(--violet-600); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--violet-600); color: var(--violet-600); }
.model-ratio:focus-visible { outline: none; }
.model-ratio:focus-visible .model-ratio-box { outline: 2px solid var(--focus); outline-offset: 2px; }
/* A ratio the model does not take stays focusable, marked disabled
   (model.js): grey as the disabled fields of the shared sheet, with no
   hover; the help under the tiles says why. */
.model-ratio[aria-disabled=true], .model-ratio[aria-disabled=true]:hover { color: var(--gray-400); cursor: not-allowed; }
.model-ratio[aria-disabled=true] .model-ratio-box, .model-ratio[aria-disabled=true]:hover .model-ratio-box { border-color: var(--gray-150); background: var(--gray-25); color: var(--gray-400); }
.r169 { width: 22px; height: 13px; } .r916 { width: 13px; height: 22px; } .r11 { width: 17px; height: 17px; } .r43 { width: 20px; height: 15px; }
.r34 { width: 15px; height: 20px; } .r219 { width: 24px; height: 10px; } .rauto { width: 18px; height: 18px; border-style: dashed !important; }
/* The whole 生成声音 row is the switch's label, so the row is the tap
   target (44px tall on phones). */
.model-audio { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding-top: 4px; border-top: 1px solid var(--line-soft); color: var(--text-1); font-size: 14px; line-height: 20px; }
.model-try-out { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--gray-25); }
.model-idle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 16 / 9; padding: 24px; border-radius: var(--r-12); background: var(--gray-100); text-align: center; }
.model-idle-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: var(--r-8); background: var(--gray-0); box-shadow: var(--e1); color: var(--gray-700); }
.model-idle-title { margin: 0; color: var(--text-1); font: 600 16px/24px var(--font-sans); }
.model-idle-text { max-width: 360px; margin: 0; color: var(--text-2); font-size: 13px; line-height: 20px; }
.model-try-run { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.model-est { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.model-est-lbl { color: var(--text-2); font-size: 13px; line-height: 20px; }
.model-est-amt { color: var(--text-1); font: 600 16px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
.model-est-note { color: var(--text-3); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; }

/* API: the steps beside the request and the response, which stick from
   1024 up. */
.model-api { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 32px 48px; }
.model-api-steps { display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }
.model-api-code { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.model-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; }
.model-step-n { display: grid; grid-row: span 2; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full); background: var(--gray-100); color: var(--text-1); font: 500 13px/20px var(--font-sans); }
.model-step h3 { padding-top: 2px; color: var(--text-1); font: 600 16px/24px var(--font-sans); }
.model-step p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 22px; }
.model-base { margin: 0; padding-left: 40px; color: var(--text-3); font-size: 13px; line-height: 20px; }
/* The API address (FE9-ADDR) under the first step, once published: its
   label over the board's 40px snippet, whose copy button marks its copy
   as the model ID's does. */
.model-address { display: flex; flex-direction: column; gap: 6px; grid-column: 2; margin-top: 14px; }
.model-address-label { margin: 0; color: var(--text-1); font: 500 13px/20px var(--font-sans); }
.model-snippet { padding-right: 4px; background: var(--surface); }
.model-snippet .model-copy-address { flex: none; color: var(--text-3); }
.model-snippet .model-copy-address:hover { color: var(--text-1); }
.model-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.model-code-head { gap: 8px; padding: 0 8px 0 4px; }
/* The tab rows are role=tablist, which the shared sheet gives a bottom rule
   and wrapping: here each fills its head's height in one row that scrolls
   sideways, and the selected tab's bar sits inside the row, where the scroll
   box cannot clip it. */
.model-code-tabs { display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; align-self: stretch; gap: 2px; min-width: 0; height: auto; overflow-x: auto; overflow-y: hidden; border-bottom: 0; scrollbar-width: none; }
.model-code-tabs > .code-tab { flex: none; height: auto; margin: 0; padding: 0 12px; }
.model-code-tabs > .code-tab[aria-selected=true]::after { bottom: 0; }
.model-code-head > .model-copy { flex: none; gap: 6px; padding: 0 12px; }
.code pre.model-code { white-space: pre; }
.model-code .cl { display: inline; min-height: 0; }
.model-code-numbered { counter-reset: model-line; }
.model-code-numbered .cl::before { content: counter(model-line); counter-increment: model-line; display: inline-block; width: 20px; margin-right: 16px; color: var(--code-dark-ln); text-align: right; user-select: none; }
.model-response-note { margin: 0; padding: 8px 16px 12px; border-top: 1px solid var(--line-soft); color: var(--text-3); font-size: 12px; line-height: 16px; }
.model-code-note { margin: 0; padding: 16px; color: #c9d0da; font-size: 13px; line-height: 20px; }
.model-response .model-code-note { color: var(--text-2); }
@media (min-width: 1024px) {
  .model-api-code { position: sticky; top: calc(var(--site-head) + 56px); }
}

/* 价格: the rates beside the common prices, then how a price is worked out. */
.model-price-status { margin: 0; color: var(--text-2); font-size: 14px; line-height: 20px; }
.model-price-status:empty { display: none; }
.model-price-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 16px; }
.model-price-grid[hidden] { display: none; }
.model-table th:not(:first-child), .model-table td:not(:first-child) { text-align: right; }
.model-table td { font-variant-numeric: tabular-nums; }
.model-table .model-none { color: var(--text-3); }
.card.model-math[hidden] { display: none; }
.model-calc { display: flex; flex-direction: column; gap: 20px; padding: 0 24px 24px; }
.model-formula { margin: 0; padding: 16px 20px; border-radius: var(--r-8); background: var(--gray-25); color: var(--text-1); font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums; }
.model-worked { display: flex; flex-direction: column; }
.model-worked > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.model-worked > div:last-child { border-bottom: 0; }
.model-worked .model-what { color: var(--text-1); font-size: 14px; line-height: 20px; }
.model-worked .model-how { grid-column: 1; color: var(--text-3); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.model-worked .model-amt { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--text-1); font: 600 16px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
.model-rules { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.model-rules li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; color: var(--text-2); font-size: 14px; line-height: 22px; }
.model-rules .glyph { margin-top: 5px; color: var(--success-fg); }

/* Same family (shared later as the v9 compact model card). */
.model-related { margin-top: 64px; }
.model-sec-title { color: var(--text-1); font: 600 20px/28px var(--font-sans); }
.model-rel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.model-rel-grid > li { display: flex; min-width: 0; }
.model-rel-grid > li[hidden] { display: none; }
.card.model-rel { display: grid; flex: 1 1 auto; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 20px; padding: 24px; }
.model-rel-cover { display: block; aspect-ratio: 16 / 9; border-radius: var(--r-8); }
.model-rel-body { display: flex; flex-direction: column; min-width: 0; }
.model-rel-name { color: var(--text-1); font: 600 16px/24px var(--font-sans); }
.model-rel-line { margin-top: 2px; color: var(--text-2); font-size: 13px; line-height: 20px; }
.model-rel-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-top: 8px; }
.model-rel-price :is(.catalog-lead, .catalog-value) { color: var(--text-1); font: 600 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; }
.model-rel-price .catalog-unit { color: var(--text-3); font-size: 12px; line-height: 16px; }
.model-rel-price .catalog-note { color: var(--text-2); font-size: 13px; line-height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .model-stage-btn:active { transform: none; }
}
@media (max-width: 1199px) {
  .card.model-head { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 32px; }
  .card.model-try { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .card.model-head { grid-template-columns: minmax(0, 1fr); }
  .model-media { order: -1; }
  .model-frames { gap: 16px; }
  .model-api, .model-price-grid { grid-template-columns: minmax(0, 1fr); }
  .card.model-try { grid-template-columns: minmax(0, 1fr); }
  .model-try-form { border-right: 0; border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 767px) {
  .model-main { padding: 16px 0 48px; }
  .model-main .card-head { padding: 20px 20px 12px; }
  .model-main .card { --table-edge: 20px; }
  .card.model-head { gap: 20px; padding: 20px; }
  .model-name { font-size: 24px; line-height: 32px; }
  .model-actions .btn { flex: 1 1 auto; }
  .model-stage { border-radius: var(--r-12); }
  .model-stage-btn { right: 4px; bottom: 4px; width: 44px; height: 44px; }
  .model-caps.dl { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 20px 8px; }
  .model-caps.dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
  .model-caps.dl dt { font-size: 13px; line-height: 22px; }
  .model-caps.dl dd { margin-top: 0; line-height: 22px; }
  .model-foot { padding: 8px 20px; }
  .model-frames { grid-template-columns: minmax(0, 1fr); padding: 0 20px 20px; }
  .model-frame { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; column-gap: 12px; }
  .model-frame-img { grid-row: span 2; }
  .model-frame-tag { top: 4px; left: 4px; height: 20px; padding: 0 6px; }
  .model-frame-lbl { margin-top: 0; }
  .model-frame-text { margin-top: 2px; }
  .model-try-form, .model-try-out { padding: 20px; }
  .model-try-form :is(.model-modes, .model-seg) { height: 40px; }
  .model-try-form :is(.model-modes, .model-seg) > .seg-item { height: 36px; }
  /* The four modes in two rows of two: in English they need more than the
     field's width at 390px, and a row that scrolled would cut the last. */
  .model-try-form .model-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .model-ratios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 4px; }
  .model-ratio-box { width: 44px; height: 44px; }
  .model-audio { min-height: 44px; }
  .model-try-run .btn { flex: 1 1 auto; }
  .model-base { padding-left: 0; }
  .model-code-head { gap: 0; padding: 0 4px; }
  .model-code-tabs > .code-tab { padding: 0 5px; }
  .model-code-tabs > .code-tab[aria-selected=true]::after { right: 5px; left: 5px; }
  .model-code-head > .model-copy { padding: 0 8px; }
  .model-calc { padding: 0 20px 20px; }
  .model-related { margin-top: 48px; }
  .model-rel-grid { grid-template-columns: minmax(0, 1fr); }
  .card.model-rel { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 16px; }
}