/* --- header ------------------------------------------------------------------------------------------ */
  .dd-mp-head { padding-top: 28px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 18px; }
  .dd-mp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 12px/1.5 var(--dd-font-mono); color: rgba(255,255,255,0.5); margin: 0; padding: 0; list-style: none; }
  .dd-mp-crumbs a { color: rgba(255,255,255,0.5) !important; text-decoration: none; }
  .dd-mp-crumbs a:hover { color: #fff !important; }
  .dd-mp-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
  .dd-mp-crumbs li + li::before { content: "/"; color: rgba(255,255,255,0.3); }
  .dd-mp-crumbs [aria-current] { color: rgba(255,255,255,0.85); word-break: break-all; }
  /* Hero: title, Integrate block, then the facts. ≥ 1024 the Integrate block sits beside the title and the facts
     (first screen at 1280×720 without scrolling); below it follows the title directly. */
  .dd-mp-hero { display: grid; gap: 16px 40px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "int" "meta"; align-items: start; }
  .dd-mp-titlecol { grid-area: title; min-width: 0; }
  .dd-mp-intcol { grid-area: int; min-width: 0; }
  .dd-mp-metacol { grid-area: meta; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
  @media (min-width: 1024px) {
    .dd-mp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); grid-template-rows: auto 1fr; grid-template-areas: "title int" "meta int"; row-gap: 14px; }
  }
  /* --- Integrate block ---------------------------------------------------------------------------------- */
  .dd-mp-int { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--dd-r-panel); background: var(--dd-surface-2); border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 16px 40px rgba(0,0,0,0.4); box-sizing: border-box; min-width: 0; scroll-margin-top: calc(var(--dd-topbar-h) + 16px); }
  .dd-mp-inthead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-width: 0; }
  .dd-mp-inttitle { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1.4 var(--dd-font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dd-coral-text); }
  .dd-mp-inttitle svg { width: 18px; height: 18px; }
  .dd-mp-intid { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; padding: 2px 2px 2px 10px; border-radius: 10px; background: var(--dd-surface-1); border: 1px solid var(--dd-control); box-sizing: border-box; }
  .dd-body .dd-mp-intid code { background: none; border: 0; padding: 0; font: 12px/1.4 var(--dd-font-mono); color: #fff; overflow-wrap: anywhere; min-width: 0; }
  .dd-mp-intidcopy { flex: none; width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: rgba(255,255,255,0.65); cursor: pointer; display: grid; place-items: center; }
  .dd-mp-intidcopy:hover { color: #fff; background: rgba(255,255,255,0.08); }
  .dd-mp-intidcopy svg { width: 16px; height: 16px; }
  .dd-mp-int .dd-cb { margin: 0; }
  .dd-mp-intprice { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; line-height: 1.45; color: var(--dd-text-2); }
  .dd-mp-intprice b { color: #fff; font-family: var(--dd-font-mono); font-weight: 700; }
  .dd-mp-intprice small { font: 12px/1.45 var(--dd-font-body); font-variant-numeric: tabular-nums; color: var(--dd-text-3); }
  .dd-mp-inttry { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: var(--dd-coral-text) !important; text-decoration: none; white-space: nowrap; }
  .dd-mp-inttry:hover { color: var(--dd-coral-soft) !important; text-decoration: underline; }
  .dd-mp-intfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .dd-mp-intfoot .dd-btn svg { width: 16px; height: 16px; }
  .dd-mp-intfoot .dd-btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
  .dd-mp-intstate { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dd-text-2); min-width: 0; }
  .dd-mp-intstate svg { width: 16px; height: 16px; color: var(--dd-success); flex: none; }
  .dd-mp-intmsg { margin: 0; font-size: 13px; line-height: 1.45; color: #FF9A8B; }
  .dd-mp-intmsg a { color: #fff !important; }
  .dd-mp-newkey { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(52,199,89,0.06); border: 1px solid rgba(52,199,89,0.3); }
  .dd-mp-newkeytext { margin: 0; font-size: 12px; line-height: 1.5; color: var(--dd-text-2); }
  .dd-mp-newkeytext b { color: #fff; }
  .dd-mp-secret { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .dd-body .dd-mp-secret code { flex: 1 1 220px; min-width: 0; padding: 8px 10px; border-radius: 8px; background: var(--dd-surface-1); border: 1px solid var(--dd-control); font: 12px/1.4 var(--dd-font-mono); color: #fff; overflow-wrap: anywhere; }
  @media (min-width: 1024px) { .dd-mp-intcol { position: relative; z-index: 2; } }
  /* Every width: the footer has "Copy code", so the head drops its copy button and the five tabs wrap instead of
     scrolling out of sight (owner, 21.10: "Copy for AI" was cut off under the copy button at 1512 px). */
  .dd-mp-int .dd-cb-copy { display: none; }
  .dd-mp-int .dd-cb-tabs { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
  /* Phones: tighter padding; the two buttons share the row. */
  @media (max-width: 599.98px) {
    .dd-mp-int { padding: 12px; }
    .dd-mp-int .dd-cb-head { padding-block: 6px; }
    .dd-mp-int .dd-cb-tab { padding: 0 9px; }
    .dd-mp-intfoot .dd-btn { flex: 1 1 auto; justify-content: center; }
  }
  .dd-mp-h1 { margin: 0; font-family: var(--dd-font-display); font-weight: 800; font-size: clamp(30px, 3.8vw, 52px); letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; overflow-wrap: anywhere; }
  .dd-mp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .dd-mp-lab { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: var(--dd-r-pill); background: rgba(255,255,255,0.08); border: 1px solid var(--dd-control); }
  .dd-mp-lab i { width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #0A080C; display: grid; place-items: center; font: 800 10px/1 var(--dd-font-mono); font-style: normal; }
  .dd-mp-lab span { font: 600 12px/1.4 var(--dd-font-mono); }
  .dd-mp-cat { font: 600 12px/1.4 var(--dd-font-body); padding: 5px 10px; border-radius: var(--dd-r-pill); background: var(--dd-coral-tint); color: #FF9A8B !important; text-decoration: none; }
  .dd-mp-cat:hover { background: rgba(255,111,97,0.2); }
  .dd-mp-fact { font: 11px/1.4 var(--dd-font-mono); padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid var(--dd-hairline); color: var(--dd-text-2); white-space: nowrap; }
  .dd-mp-lede { margin: 0; max-width: 820px; font-size: 16px; line-height: 1.6; color: var(--dd-text-2); text-wrap: pretty; }
  .dd-mp-variants { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
  .dd-mp-seg { display: flex; flex-wrap: wrap; padding: 3px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--dd-hairline); max-width: 100%; box-sizing: border-box; }
  .dd-mp-seg a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 7px; color: rgba(255,255,255,0.6) !important; text-decoration: none;
    font: 600 13px/1 var(--dd-font-body); white-space: nowrap; transition: background var(--dd-t-hover) var(--dd-ease), color var(--dd-t-hover) var(--dd-ease); }
  .dd-mp-seg a:hover { color: #fff !important; background: rgba(255,255,255,0.05); }
  .dd-mp-seg a[aria-current="page"], .dd-mp-seg a.dd-is-on { background: rgba(168,85,247,0.22); color: #fff !important; }
  .dd-mp-seg a.dd-is-approx { font-style: italic; }
  .dd-mp-varlist { display: flex; flex-wrap: wrap; gap: 6px; }
  .dd-mp-varlist summary { list-style: none; cursor: pointer; }
  .dd-mp-varlist summary::-webkit-details-marker { display: none; }
  .dd-mp-actions { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
  .dd-mp-act { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: var(--dd-r-pill); cursor: pointer; background: transparent;
    border: 1px solid var(--dd-control); color: rgba(255,255,255,0.85) !important; font: 12px/1 var(--dd-font-mono); text-decoration: none; white-space: nowrap; box-sizing: border-box; }
  .dd-mp-act:hover { border-color: rgba(255,255,255,0.28); }
  .dd-mp-act svg { width: 16px; height: 16px; }
  .dd-mp-ai { background: rgba(255,255,255,0.06); border-color: var(--dd-control-strong); color: #fff !important; font: 600 13px/1 var(--dd-font-body); padding: 0 12px 0 14px; }
  .dd-mp-ai:hover { background: rgba(255,255,255,0.1); }
  .dd-mp-ai .dd-mp-caret { transition: transform var(--dd-t-hover) var(--dd-ease); transform: rotate(90deg); }
  .dd-mp-ai[aria-expanded="true"] .dd-mp-caret { transform: rotate(-90deg); }
  .dd-mp-menuwrap { position: relative; }
  .dd-mp-menu { position: absolute; top: 44px; inset-inline-end: 0; z-index: 70; width: 260px; padding: 6px; border-radius: 14px; background: var(--dd-surface-2);
    border: 1px solid rgba(255,255,255,0.12); box-shadow: var(--dd-shadow-hover); box-sizing: border-box; }
  .dd-mp-menu [role="menuitem"] { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; border: none; background: transparent; color: #fff !important;
    cursor: pointer; text-align: start; font: 13px/1.3 var(--dd-font-body); text-decoration: none; box-sizing: border-box; }
  .dd-mp-menu [role="menuitem"]:hover, .dd-mp-menu [role="menuitem"]:focus-visible { background: rgba(168,85,247,0.12); outline: none; }
  .dd-mp-menu svg { width: 18px; height: 18px; color: rgba(255,255,255,0.65); flex: none; }
  .dd-mp-menu b { display: block; font-weight: 600; }
  .dd-mp-menu small { display: block; font-size: 11px; color: rgba(255,255,255,0.5); }
  @media (max-width: 599.98px) { .dd-mp-menu { inset-inline-end: auto; inset-inline-start: 0; } }

  /* --- gallery + builder grid (price card sticky only here, only ≥ 1280) ------------------------------- */
  .dd-mp-grid { padding-top: 20px; padding-bottom: 40px; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "aside" "build"; }
  .dd-mp-top { grid-area: top; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
  .dd-mp-aside { grid-area: aside; min-width: 0; position: static; }
  .dd-mp-build { grid-area: build; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding-top: 8px; scroll-margin-top: calc(var(--dd-topbar-h) + 16px); }
  @media (min-width: 1280px) {
    .dd-mp-grid { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "top aside" "build aside"; }
    .dd-mp-aside { position: sticky; top: calc(var(--dd-topbar-h) + 20px); align-self: start; z-index: 1; }
    .dd-mp-price { max-height: calc(100vh - var(--dd-topbar-h) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  }

  /* --- gallery: curated stage ---------------------------------------------------------------------------- */
  .dd-mp-stagecard { border-radius: 24px; background: var(--dd-surface-1); border: 1px solid var(--dd-hairline); overflow: hidden; }
  .dd-mp-stage { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 22px); padding: clamp(16px, 3vw, 32px); min-height: 440px; box-sizing: border-box;
    background: radial-gradient(ellipse at 70% 40%, rgba(255,111,97,0.06), rgba(0,0,0,0) 60%); }
  .dd-mp-in { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
  .dd-mp-eyebrow { font: 700 10px/1.4 var(--dd-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
  .dd-mp-nocase { text-transform: none; letter-spacing: 0.04em; }
  .dd-mp-inmedia { height: 190px; max-width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--dd-control); background: var(--dd-media-empty); }
  .dd-mp-inmedia img, .dd-mp-inmedia video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .dd-mp-arrow { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,111,97,0.14); border: 1px solid rgba(255,111,97,0.35); color: var(--dd-coral-text); }
  .dd-mp-arrow svg { width: 20px; height: 20px; }
  .dd-body [dir="rtl"] .dd-mp-arrow svg { transform: scaleX(-1); }
  .dd-mp-out { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; }
  .dd-mp-out > .dd-mp-eyebrow { align-self: flex-start; }
  .dd-mp-outmedia { position: relative; height: 400px; max-width: 100%; border-radius: 16px; overflow: hidden; background: var(--dd-media-empty); box-shadow: var(--dd-shadow-modal); }
  .dd-mp-outmedia img, .dd-mp-outmedia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .dd-mp-outmedia audio { position: absolute; left: 12px; right: 12px; bottom: 12px; width: calc(100% - 24px); }
  .dd-mp-stagefoot { padding: 16px clamp(16px, 3vw, 24px) 18px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
  .dd-mp-stagetext { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
  .dd-mp-prompt { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.9); text-wrap: pretty; overflow-wrap: anywhere; }
  .dd-mp-prompt b { font: 400 10px/1 var(--dd-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dd-coral-soft); margin-inline-end: 8px; }
  .dd-mp-exchips { display: flex; flex-wrap: wrap; gap: 6px; }
  .dd-mp-credit { margin: 0; font-size: 12px; line-height: 1.4; color: var(--dd-text-3); }
  .dd-mp-credit a { color: var(--dd-text-2) !important; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.25); text-underline-offset: 3px; overflow-wrap: anywhere; }
  .dd-mp-credit a:hover { color: #fff !important; text-decoration-color: currentColor; }
  .dd-mp-exchip { font: 500 11px/1.4 var(--dd-font-mono); padding: 4px 9px; border-radius: var(--dd-r-pill); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #fff; }
  .dd-mp-exchip.dd-is-price { color: #FF9A8B; }
  .dd-mp-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; }
  .dd-mp-thumb { flex: none; position: relative; width: 132px; height: 78px; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--dd-media-empty);
    opacity: 0.62; transition: opacity var(--dd-t-hover) var(--dd-ease), border-color var(--dd-t-hover) var(--dd-ease); }
  .dd-mp-thumb:hover, .dd-mp-thumb[aria-pressed="true"] { opacity: 1; }
  .dd-mp-thumb[aria-pressed="true"] { border-color: var(--dd-violet); }
  .dd-mp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .dd-mp-thumb span { position: absolute; inset-inline-start: 6px; bottom: 5px; font: 600 10px/1.4 var(--dd-font-mono); padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,0.6); color: #fff; }
  @media (max-width: 639.98px) {
    .dd-mp-stage { min-height: 0; flex-wrap: wrap; }
    .dd-mp-inmedia { height: 110px; }
    .dd-mp-outmedia { height: 230px; }
  }

  /* --- gallery: placeholder ------------------------------------------------------------------------------ */
  .dd-mp-ph { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--dd-hairline); min-height: 300px; display: flex; align-items: center; padding: clamp(24px, 4vw, 48px);
    box-sizing: border-box; background: radial-gradient(120% 90% at 15% 10%, rgba(255,176,153,0.18), transparent 55%), radial-gradient(90% 80% at 90% 95%, rgba(168,85,247,0.18), transparent 60%), var(--dd-surface-1); }
  .dd-mp-ph[data-kind="video"] { background: radial-gradient(120% 90% at 15% 10%, rgba(168,85,247,0.24), transparent 55%), radial-gradient(90% 80% at 90% 95%, rgba(255,111,97,0.16), transparent 60%), var(--dd-surface-1); }
  .dd-mp-ph[data-kind="audio"] { background: radial-gradient(120% 90% at 15% 10%, rgba(94,168,255,0.2), transparent 55%), radial-gradient(90% 80% at 90% 95%, rgba(255,111,97,0.14), transparent 60%), var(--dd-surface-1); }
  .dd-mp-ph-orbit { position: absolute; width: 90%; height: 60%; inset-inline-end: -18%; top: 20%; border: 1.5px solid rgba(255,138,102,0.22); border-radius: 50%; transform: rotate(-22deg); pointer-events: none; }
  .dd-mp-ph-orb { position: absolute; inset-inline-end: 12%; top: 34%; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,0.9);
    background: radial-gradient(circle at 35% 30%, #FFB099, #FF6F61 55%, #FF4A2E); box-shadow: 0 20px 60px rgba(255,111,97,0.35); }
  .dd-mp-ph-orb svg { width: 38px; height: 38px; }
  .dd-mp-ph-text { position: relative; max-width: 460px; display: flex; flex-direction: column; gap: 12px; }
  .dd-mp-ph-text h2 { margin: 0; font: 800 clamp(22px, 2.4vw, 30px)/1.15 var(--dd-font-display); letter-spacing: -0.02em; }
  .dd-mp-ph-text p { margin: 0; color: var(--dd-text-2); }
  @media (max-width: 639.98px) { .dd-mp-ph { min-height: 0; padding-bottom: 140px; } .dd-mp-ph-orb { top: auto; bottom: 28px; width: 72px; height: 72px; } .dd-mp-ph-orbit { top: auto; bottom: -10%; } }

  /* --- community masonry ---------------------------------------------------------------------------------- */
  .dd-mp-sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .dd-mp-sectitle { display: flex; flex-direction: column; gap: 8px; }
  .dd-mp-h2 { margin: 0; font: 800 clamp(24px, 2.6vw, 34px)/1.15 var(--dd-font-display); letter-spacing: -0.02em; scroll-margin-top: calc(var(--dd-topbar-h) + 16px); }
  .dd-mp-sublede { margin: 0; font-size: 15px; color: rgba(255,255,255,0.65); }
  .dd-mp-count { font: 12px/1.4 var(--dd-font-mono); color: rgba(255,255,255,0.6); }
  .dd-mp-masonry { columns: 2; column-gap: 12px; }
  @media (min-width: 640px) { .dd-mp-masonry { columns: 3; } }
  @media (min-width: 1024px) { .dd-mp-wide .dd-mp-masonry { columns: 4; } }
  @media (min-width: 1280px) { .dd-mp-wide .dd-mp-masonry { columns: 5; } }
  .dd-mp-work { break-inside: avoid; margin: 0 0 12px; position: relative; border-radius: 14px; overflow: hidden; background: var(--dd-media-empty); border: 1px solid var(--dd-hairline); }
  .dd-mp-work img, .dd-mp-work video { display: block; width: 100%; height: auto; min-height: 80px; object-fit: cover; transition: transform var(--dd-t-reveal) var(--dd-ease); }
  .dd-mp-work:hover img, .dd-mp-work:focus-within img { transform: scale(1.04); }
  .dd-mp-workkind { position: absolute; top: 8px; inset-inline-start: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 4px; border-radius: var(--dd-r-pill); background: rgba(0,0,0,0.55);
    font: 600 10px/1.4 var(--dd-font-mono); color: #fff; }
  .dd-mp-workkind svg { width: 14px; height: 14px; }
  .dd-mp-workcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 10px 10px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.88)); display: flex; flex-direction: column; gap: 8px;
    opacity: 0; transition: opacity var(--dd-t-hover) var(--dd-ease); }
  .dd-mp-work:hover .dd-mp-workcap, .dd-mp-work:focus-within .dd-mp-workcap { opacity: 1; }
  @media (hover: none), (max-width: 899.98px) { .dd-mp-workcap { opacity: 1; } }
  .dd-mp-workcap p { margin: 0; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,0.95); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .dd-mp-workrow { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
  .dd-mp-useprompt { flex: none; height: 28px; padding: 0 10px; border-radius: var(--dd-r-pill); border: none; cursor: pointer; background: #fff; color: #0A080C; font: 700 11px/1 var(--dd-font-body); }
  .dd-mp-more { align-self: center; }

  /* --- price card ---------------------------------------------------------------------------------------- */
  .dd-mp-price { border-radius: var(--dd-r-panel); background: var(--dd-surface-2); border: 1px solid rgba(255,255,255,0.1); padding: 24px; display: flex; flex-direction: column; gap: 18px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45); box-sizing: border-box; }
  /* Two column groups: in the single-column card (sticky aside ≥ 1280, phones) they dissolve (display: contents) and
     .dd-mp-oN restores the reading order; between 760 and 1279 the card spans the page and shows them side by side. */
  .dd-mp-pcol { display: contents; }
  .dd-mp-o1 { order: 1; } .dd-mp-o2 { order: 2; } .dd-mp-o3 { order: 3; } .dd-mp-o4 { order: 4; } .dd-mp-o5 { order: 5; }
  .dd-mp-o6 { order: 6; } .dd-mp-o7 { order: 7; } .dd-mp-o8 { order: 8; } .dd-mp-o9 { order: 9; }
  @media (min-width: 760px) and (max-width: 1279.98px) {
    .dd-mp-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
    .dd-mp-pcol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  }
  .dd-mp-pricehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .dd-mp-eyebrow-accent { font: 700 12px/1.4 var(--dd-font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dd-coral-text); }
  .dd-mp-mode { font: 11px/1.4 var(--dd-font-body); color: rgba(255,255,255,0.5); }
  .dd-mp-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .dd-mp-bignum { font: 800 clamp(40px, 4vw, 56px)/1 var(--dd-font-display); letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
  .dd-mp-bigunit { font-size: 15px; color: rgba(255,255,255,0.65); }
  .dd-mp-bigmetered { font-size: 15px; color: rgba(255,255,255,0.65); }
  /* The headline is a translated phrase ("from 0,0067 $ / second of input video"): body font, tabular figures. */
  .dd-mp-bighead .dd-mp-bignum { font: 800 clamp(22px, 2vw, 28px)/1.15 var(--dd-font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
  .dd-mp-subprice { font: 12px/1.5 var(--dd-font-body); font-variant-numeric: tabular-nums; color: var(--dd-text-3); }
  .dd-mp-tiers { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
  .dd-mp-tiers th, .dd-mp-tiers td { padding: 5px 0; border-top: 1px solid var(--dd-hairline); vertical-align: top; text-align: start; font-weight: 400; color: var(--dd-text-2); }
  .dd-mp-tiers td { text-align: end; color: #fff; padding-inline-start: 12px; }
  .dd-mp-drivers { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
  .dd-mp-total { display: flex; flex-direction: column; gap: 4px; }
  .dd-mp-totalline { font-size: 13px; color: rgba(255,255,255,0.6); font-family: var(--dd-font-body); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .dd-mp-totalnum { font: 700 30px/1.15 var(--dd-font-mono); letter-spacing: -0.02em; color: var(--dd-coral-text); }
  .dd-mp-totalsub { font: 500 12px/1.4 var(--dd-font-body); font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.6); }
  .dd-mp-facts { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 13px; margin: 0; }
  .dd-mp-facts dt { color: rgba(255,255,255,0.6); }
  .dd-mp-facts dd { margin: 0; font-variant-numeric: tabular-nums; color: #fff; text-align: end; }
  .dd-mp-rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
  .dd-mp-rules li { font-size: 12px; line-height: 1.45; padding: 6px 10px; border-radius: 8px; color: var(--dd-text-2); background: rgba(255,255,255,0.03); border: 1px solid transparent;
    transition: border-color var(--dd-t-hover), background var(--dd-t-hover); }
  .dd-mp-rules li.dd-is-hit { border-color: var(--dd-violet-border); background: var(--dd-violet-tint); color: #fff; }
  .dd-mp-runcta { width: 100%; min-height: 50px; font-size: 16px; }
  .dd-mp-note { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.65); margin: 0; }
  .dd-mp-note svg { width: 18px; height: 18px; color: var(--dd-success); flex: none; }
  .dd-mp-billed { margin: 0; font-size: 12px; line-height: 1.5; color: var(--dd-text-3); }
  .dd-mp-mrow { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .dd-mp-mname { font: 12px/1.4 var(--dd-font-mono); color: rgba(255,255,255,0.75); overflow-wrap: anywhere; }
  .dd-mp-mins { display: flex; flex-wrap: wrap; gap: 8px; }
  .dd-mp-mfield { display: flex; flex-direction: column; gap: 4px; flex: 1 1 96px; min-width: 0; font-size: 11px; color: var(--dd-text-3); }
  .dd-mp-mfield .dd-mp-input { font-family: var(--dd-font-mono); }

  /* --- builder ------------------------------------------------------------------------------------------- */
  .dd-mp-buildcols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
  .dd-mp-form { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 22px; border-radius: var(--dd-r-panel); background: rgba(255,255,255,0.025);
    border: 1px solid var(--dd-hairline); box-sizing: border-box; }
  .dd-mp-codecol { flex: 1.15 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: calc(var(--dd-topbar-h) + 16px); }
  .dd-mp-row { display: flex; flex-wrap: wrap; gap: 22px; }
  .dd-mp-ctl { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; margin: 0; padding: 0; }
  .dd-mp-ctl.dd-is-bad .dd-mp-input, .dd-mp-ctl.dd-is-bad .dd-mp-textarea { border-color: rgba(255,59,48,0.7); }
  .dd-mp-lbl { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 13px/1.4 var(--dd-font-body); padding: 0; }
  .dd-mp-lbl > span:first-child { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
  .dd-mp-name { font-family: var(--dd-font-mono); font-size: 12.5px; }
  .dd-mp-req { color: var(--dd-coral); }
  .dd-mp-badge { display: inline-flex; align-items: center; gap: 4px; font: 500 10px/1.4 var(--dd-font-mono); padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); }
  .dd-mp-badge svg { width: 12px; height: 12px; }
  .dd-mp-aux { font: 400 11px/1.4 var(--dd-font-mono); color: rgba(255,255,255,0.45); white-space: nowrap; }
  .dd-mp-help { margin: 0; font-size: 12px; line-height: 1.45; color: var(--dd-text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dd-mp-textarea, .dd-mp-input { width: 100%; min-width: 0; box-sizing: border-box; border-radius: 12px; background: var(--dd-surface-1); border: 1px solid var(--dd-control); color: #fff;
    font: 14px/1.5 var(--dd-font-body); outline: none; transition: border-color var(--dd-t-hover) var(--dd-ease), box-shadow var(--dd-t-hover) var(--dd-ease); }
  .dd-mp-textarea { resize: vertical; min-height: 84px; padding: 12px 14px; }
  .dd-mp-input { height: 38px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
  .dd-mp-mono { font-family: var(--dd-font-mono) !important; font-size: 12px !important; }
  .dd-mp-textarea:focus, .dd-mp-input:focus { border-color: var(--dd-violet); box-shadow: 0 0 0 3px rgba(168,85,247,0.2); }
  .dd-mp-textarea::placeholder, .dd-mp-input::placeholder { color: rgba(255,255,255,0.35); }
  select.dd-mp-input option { background: var(--dd-surface-2); }
  .dd-mp-drop { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; border: 1.5px dashed rgba(255,255,255,0.16); background: rgba(255,255,255,0.02);
    transition: border-color var(--dd-t-hover), background var(--dd-t-hover); }
  .dd-mp-drop.dd-is-drag { border-color: var(--dd-violet); background: rgba(168,85,247,0.08); }
  .dd-mp-dropthumb { flex: none; width: 96px; height: 64px; border-radius: 9px; overflow: hidden; background: var(--dd-media-empty); display: grid; place-items: center; color: rgba(255,255,255,0.5); }
  .dd-mp-dropthumb img, .dd-mp-dropthumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .dd-mp-dropthumb svg { width: 24px; height: 24px; }
  .dd-mp-dropbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .dd-mp-dropline { font-size: 13px; color: rgba(255,255,255,0.85); }
  .dd-mp-link { background: none; border: none; padding: 0; color: var(--dd-coral-text); font: inherit; font-weight: 600; cursor: pointer; }
  .dd-mp-link:hover { color: var(--dd-coral-soft); }
  .dd-mp-filestate { font-size: 12px; color: var(--dd-text-3); }
  .dd-mp-filestate.dd-is-err { color: #FF9A8B; }
  .dd-mp-samples { display: flex; gap: 6px; flex-wrap: wrap; }
  .dd-mp-sample { width: 46px; height: 32px; padding: 0; border-radius: 7px; overflow: hidden; cursor: pointer; border: 1.5px solid rgba(255,255,255,0.1); background: var(--dd-media-empty); }
  .dd-mp-sample[aria-pressed="true"] { border-color: var(--dd-violet); }
  .dd-mp-sample img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .dd-mp-urlrow { display: flex; gap: 6px; align-items: center; }
  .dd-mp-iconbtn { flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--dd-control); background: rgba(255,255,255,0.04); color: #fff; cursor: pointer; display: grid; place-items: center; }
  .dd-mp-iconbtn:hover { background: rgba(255,255,255,0.08); }
  .dd-mp-iconbtn svg { width: 18px; height: 18px; }
  .dd-mp-bars { display: flex; gap: 3px; }
  .dd-mp-bars button { flex: 1; min-width: 0; height: 28px; padding: 0; border: none; cursor: pointer; border-radius: 3px; background: rgba(255,255,255,0.08); color: transparent; font: 0/0 a;
    transition: background 200ms var(--dd-ease); }
  .dd-mp-bars button:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; }
  .dd-mp-bars button:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px; }
  .dd-mp-bars button:hover { filter: brightness(1.25); }
  .dd-mp-bars button.dd-is-fill { background: rgba(168,85,247,0.45); }
  .dd-mp-bars button[aria-checked="true"] { background: var(--dd-violet); }
  .dd-mp-barscale { display: flex; justify-content: space-between; font: 10px/1.4 var(--dd-font-mono); color: rgba(255,255,255,0.4); }
  .dd-mp-segbtns { display: flex; flex-wrap: wrap; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--dd-hairline); align-self: flex-start; max-width: 100%; box-sizing: border-box; }
  .dd-mp-segbtns button { height: 32px; padding: 0 12px; border-radius: 7px; border: none; cursor: pointer; background: transparent; color: rgba(255,255,255,0.6); font: 600 12px/1 var(--dd-font-mono); white-space: nowrap; }
  .dd-mp-segbtns button[aria-checked="true"] { background: rgba(168,85,247,0.22); color: #fff; }
  .dd-mp-frames { display: flex; flex-wrap: wrap; gap: 8px; }
  .dd-mp-frame { width: 64px; height: 64px; border-radius: 12px; cursor: pointer; border: 1.5px solid var(--dd-control); background: rgba(255,255,255,0.03); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px; color: #fff; padding: 0; }
  .dd-mp-frame i { display: block; border-radius: 3px; border: 1.5px solid rgba(255,255,255,0.5); box-sizing: border-box; }
  .dd-mp-frame i.dd-is-free { border-style: dashed; }
  .dd-mp-frame span { font: 10px/1 var(--dd-font-mono); color: rgba(255,255,255,0.6); max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dd-mp-frame[aria-checked="true"] { border-color: var(--dd-violet); background: rgba(168,85,247,0.12); }
  .dd-mp-frame[aria-checked="true"] i { border-color: var(--dd-violet-soft); }
  .dd-mp-frame[aria-checked="true"] span { color: #fff; }
  .dd-mp-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
  .dd-mp-chip { height: 34px; padding: 0 14px; border-radius: var(--dd-r-pill); cursor: pointer; border: 1px solid var(--dd-control); background: transparent; color: rgba(255,255,255,0.65);
    font: 600 12px/1 var(--dd-font-mono); white-space: nowrap; }
  .dd-mp-chip:hover { color: #fff; border-color: var(--dd-control-hover); }
  .dd-mp-chip[aria-checked="true"] { border-color: rgba(168,85,247,0.6); background: rgba(168,85,247,0.14); color: #fff; }
  .dd-mp-switchrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,0.03); border: 1px solid var(--dd-hairline);
    color: #fff; text-align: start; width: 100%; box-sizing: border-box; font: inherit; }
  .dd-mp-switchrow:hover { border-color: var(--dd-control); }
  .dd-mp-switchtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .dd-mp-switchtext b { font: 600 13px/1.4 var(--dd-font-mono); }
  .dd-mp-switchtext small { font-size: 12px; color: rgba(255,255,255,0.55); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dd-mp-switch { flex: none; width: 44px; height: 26px; border-radius: var(--dd-r-pill); padding: 3px; box-sizing: border-box; background: rgba(255,255,255,0.18); display: flex; justify-content: flex-start;
    transition: background var(--dd-t-hover) var(--dd-ease); }
  .dd-mp-switch i { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
  [aria-checked="true"] > .dd-mp-switch { background: var(--dd-violet); justify-content: flex-end; }
  .dd-mp-rangerow { display: flex; align-items: center; gap: 10px; }
  .dd-mp-rangerow input[type=range] { flex: 1; min-width: 0; accent-color: var(--dd-violet); margin: 0; }
  .dd-mp-rangerow .dd-mp-input { width: 92px; flex: none; font-family: var(--dd-font-mono); }
  .dd-mp-adv { border-top: 1px solid var(--dd-hairline); padding-top: 14px; display: flex; flex-direction: column; gap: 16px; }
  .dd-mp-adv > summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; color: rgba(255,255,255,0.8); font: 600 13px/1.4 var(--dd-font-body); }
  .dd-mp-adv > summary::-webkit-details-marker { display: none; }
  .dd-mp-adv > summary svg { width: 20px; height: 20px; transition: transform var(--dd-t-hover) var(--dd-ease); }
  .dd-mp-adv[open] > summary svg { transform: rotate(90deg); }
  .dd-body [dir="rtl"] .dd-mp-adv:not([open]) > summary svg { transform: scaleX(-1); }
  .dd-mp-adv > summary small { font: 400 11px/1.4 var(--dd-font-mono); color: rgba(255,255,255,0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .dd-mp-advbody { display: flex; flex-direction: column; gap: 20px; padding-top: 16px; }
  .dd-mp-reset { background: none; border: none; padding: 0; cursor: pointer; font: 400 11px/1.4 var(--dd-font-mono); color: rgba(255,255,255,0.45); text-decoration: underline dotted; }
  .dd-mp-reset:hover { color: #fff; }

  /* --- code + run ---------------------------------------------------------------------------------------- */
  .dd-mp-endpoint { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 12px/1.4 var(--dd-font-mono); color: rgba(255,255,255,0.6); }
  .dd-mp-endpoint b { color: var(--dd-coral-text); font-weight: 700; }
  .dd-mp-endpoint code { background: none !important; border: 0 !important; padding: 0 !important; color: rgba(255,255,255,0.7) !important; overflow-wrap: anywhere; }
  .dd-mp-endpoint strong { color: #fff; }
  .dd-mp-run { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; background: var(--dd-surface-2); border: 1px solid rgba(255,255,255,0.1); scroll-margin-top: calc(var(--dd-topbar-h) + 16px); }
  .dd-mp-runrow { display: flex; flex-wrap: wrap; gap: 10px; }
  .dd-mp-key { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 14px; border-radius: 12px; background: var(--dd-surface-1); border: 1px solid var(--dd-control); box-sizing: border-box; min-width: 0; }
  .dd-mp-key:focus-within { border-color: var(--dd-violet); }
  .dd-mp-key.dd-is-bad { border-color: rgba(255,111,97,0.7); }
  .dd-mp-key > svg { width: 18px; height: 18px; color: rgba(255,255,255,0.5); flex: none; }
  .dd-mp-key input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font: 12px/1 var(--dd-font-mono); }
  .dd-mp-key input::placeholder { color: rgba(255,255,255,0.4); }
  .dd-mp-key button { width: 34px; height: 34px; border-radius: 8px; border: none; background: transparent; color: rgba(255,255,255,0.6); cursor: pointer; display: grid; place-items: center; }
  .dd-mp-key button svg { width: 18px; height: 18px; }
  .dd-mp-runbtn { flex: 0 0 auto; min-height: 46px; padding: 0 24px; font-size: 15px; }
  .dd-mp-runbtn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
  .dd-mp-keynote { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; line-height: 1.5; color: var(--dd-text-3); }
  .dd-mp-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--dd-text-2); }
  .dd-mp-check input { accent-color: var(--dd-violet); margin: 0; }
  .dd-mp-runmsg { font-size: 13px; color: #FF9A8B; }
  .dd-mp-runmsg a, .dd-mp-runmsg button { color: #fff !important; }
  .dd-mp-state { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); font-size: 14px; }
  .dd-mp-staterow { display: flex; align-items: center; gap: 10px; }
  .dd-mp-staterow > span { flex: 1; min-width: 0; }
  .dd-mp-spin { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); border-top-color: #fff; animation: dd-mp-spin 0.85s linear infinite; box-sizing: border-box; }
  .dd-mp-blink { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--dd-coral); animation: dd-mp-blink 1s ease-in-out infinite; }
  .dd-mp-prog { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
  .dd-mp-prog i { display: block; height: 100%; width: 0; background: var(--dd-coral); transition: width 250ms linear; }
  .dd-mp-logs { margin: 0; padding: 0; list-style: none; font: 11.5px/1.8 var(--dd-font-mono); color: rgba(255,255,255,0.7); max-height: 150px; overflow: auto; }
  .dd-mp-logs time { color: rgba(255,255,255,0.35); margin-inline-end: 8px; }
  .dd-mp-textbtn { background: none; border: none; color: rgba(255,255,255,0.6); font: 600 13px/1 var(--dd-font-body); cursor: pointer; padding: 4px; }
  .dd-mp-textbtn:hover { color: #fff; }
  .dd-mp-state.dd-is-ok { background: rgba(52,199,89,0.05); border-color: rgba(52,199,89,0.3); padding: 12px; }
  .dd-mp-state.dd-is-err { background: rgba(255,59,48,0.06); border-color: rgba(255,59,48,0.35); }
  .dd-mp-state.dd-is-err b { color: #FF9A8B; }
  .dd-mp-result { position: relative; width: 100%; max-height: 420px; border-radius: 10px; overflow: hidden; background: var(--dd-media-empty); display: grid; place-items: center; }
  .dd-mp-result img, .dd-mp-result video { display: block; max-width: 100%; max-height: 420px; object-fit: contain; }
  .dd-mp-result audio { width: calc(100% - 24px); margin: 24px 12px; }
  .dd-mp-okbadge { position: absolute; top: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1.4 var(--dd-font-mono); padding: 4px 9px; border-radius: var(--dd-r-pill);
    background: rgba(0,0,0,0.55); color: #fff; pointer-events: none; }
  .dd-mp-okbadge i { width: 7px; height: 7px; border-radius: 50%; background: var(--dd-success); }
  .dd-mp-resmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .dd-mp-resmeta > span { flex: 1 1 200px; font: 12px/1.5 var(--dd-font-body); font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.75); }
  .dd-mp-resmeta b { color: var(--dd-coral-text); }
  .dd-mp-resurl { font: 11px/1.5 var(--dd-font-mono); color: rgba(255,255,255,0.5); word-break: break-all; }
  @keyframes dd-mp-spin { to { transform: rotate(360deg); } }
  @keyframes dd-mp-blink { 50% { opacity: 0.35; } }

  /* --- after the grid: parameters, output, related -------------------------------------------------------- */
  .dd-mp-after { padding-top: 40px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 64px; }
  .dd-mp-sec { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .dd-mp-sec > p { margin: 0; color: var(--dd-text-3); font-size: 14px; }
  .dd-mp-table { border-radius: var(--dd-r-card); border: 1px solid var(--dd-hairline); overflow-x: auto; }
  .dd-mp-tr { display: grid; grid-template-columns: 220px 110px 120px 220px minmax(0, 1fr); gap: 16px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); align-items: start; min-width: 880px; box-sizing: border-box; }
  .dd-mp-tr:last-child { border-bottom: 0; }
  .dd-mp-th { padding: 12px 18px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--dd-hairline); font: 700 11px/1.4 var(--dd-font-body); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
  .dd-mp-pname { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .dd-mp-pname > span { display: flex; align-items: center; gap: 8px; font: 600 13px/1.4 var(--dd-font-mono); color: #fff; overflow-wrap: anywhere; }
  .dd-mp-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: rgba(255,255,255,0.15); }
  .dd-mp-dot.dd-is-req { background: var(--dd-coral); }
  .dd-mp-pname .dd-mp-badge { align-self: flex-start; }
  .dd-body .dd-mp-pname code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
  .dd-body .dd-mp-rules code, .dd-body .dd-mp-billed code { font-size: 11px; padding: 0 4px; }
  .dd-mp-nested .dd-mp-pname > span { padding-inline-start: 14px; font-weight: 500; color: var(--dd-text-2); }
  .dd-mp-ptype { font: 12px/1.5 var(--dd-font-mono); color: rgba(255,255,255,0.65); overflow-wrap: anywhere; }
  .dd-mp-pdef { font: 12px/1.5 var(--dd-font-mono); color: var(--dd-coral-soft); overflow-wrap: anywhere; }
  .dd-mp-allowed { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
  .dd-mp-allowed > span, .dd-mp-allowed summary { font: 11px/1.5 var(--dd-font-mono); padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); color: rgba(255,255,255,0.8); overflow-wrap: anywhere; }
  .dd-mp-allowed details { display: contents; }
  .dd-mp-allowed summary { cursor: pointer; list-style: none; color: var(--dd-coral-text); }
  .dd-mp-allowed summary::-webkit-details-marker { display: none; }
  .dd-mp-allowed details[open] summary { display: none; }
  .dd-mp-pdesc { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.7); text-wrap: pretty; overflow-wrap: anywhere; }
  .dd-mp-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: rgba(255,255,255,0.55); }
  .dd-mp-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .dd-mp-legend svg { width: 14px; height: 14px; }
  .dd-mp-cell-label { display: none; }
  @media (max-width: 759.98px) {
    .dd-mp-table { overflow-x: visible; }
    .dd-mp-th { display: none; }
    .dd-mp-tr { grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 8px; }
    .dd-mp-cell-label { display: inline; font: 700 10px/1.4 var(--dd-font-body); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-inline-end: 8px; }
    .dd-mp-tr > div:empty, .dd-mp-tr > span:empty { display: none; }
  }
  .dd-mp-outgrid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
  .dd-mp-outcode { flex: 1.4 1 420px; min-width: 0; }
  .dd-mp-outnotes { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  .dd-mp-outnote { display: flex; gap: 12px; padding: 18px; border-radius: var(--dd-r-card); background: rgba(255,255,255,0.03); border: 1px solid var(--dd-hairline); }
  .dd-mp-outnote svg { width: 22px; height: 22px; color: var(--dd-coral); flex: none; }
  .dd-mp-outnote b { display: block; font: 700 16px/1.3 var(--dd-font-display); margin-bottom: 4px; }
  .dd-mp-outnote span { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.65); }
  .dd-mp-outfields { border-top: 1px solid var(--dd-hairline); padding-top: 12px; }
  .dd-mp-outfields > summary { cursor: pointer; font: 600 13px/1.4 var(--dd-font-body); color: var(--dd-text-2); }
  .dd-mp-outfields dl { margin: 12px 0 0; display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 8px 16px; font-size: 13px; }
  .dd-mp-outfields dt { font-family: var(--dd-font-mono); color: #fff; overflow-wrap: anywhere; }
  .dd-mp-outfields dd { margin: 0; color: var(--dd-text-2); }
  .dd-mp-outfields dd small { font-family: var(--dd-font-mono); color: var(--dd-text-4); margin-inline-end: 6px; }
  /* 4 / 2 / 1 columns and a card count that fills whole rows (developer_docs/_model_related): no ragged last row. */
  .dd-mp-related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  @media (max-width: 1099.98px) { .dd-mp-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 559.98px) { .dd-mp-related { grid-template-columns: minmax(0, 1fr); } }
  .dd-mp-agent { padding: 16px 18px; border-radius: var(--dd-r-card); background: rgba(255,111,97,0.06); border: 1px solid rgba(255,111,97,0.22); font-size: 14px; color: var(--dd-text-2); overflow-wrap: anywhere; }

  /* --- toast ---------------------------------------------------------------------------------------------- */
  .dd-mp-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--dd-z-toast); display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--dd-r-pill);
    background: rgba(20,15,22,0.95); border: 1px solid rgba(255,255,255,0.14); box-shadow: var(--dd-shadow-hover); font-size: 14px; max-width: calc(100vw - 32px); box-sizing: border-box; }
  .dd-mp-toast svg { width: 18px; height: 18px; color: #7DD491; flex: none; }

  @media (prefers-reduced-motion: reduce) {
    .dd-mp-spin, .dd-mp-blink { animation: none !important; }
    .dd-mp-work:hover img, .dd-mp-work:focus-within img { transform: none; }
  }