.mq-quality pre { white-space:pre-wrap; overflow-wrap:anywhere; font:11px/1.5 system-ui; color:inherit; }
.mq-quality button,.mq-quality select { font:inherit; margin-top:6px; }
.mq-detail { color:#f5ead5; background:#101010; border:1px solid #a98544; padding:16px; width:min(92vw,1400px); }
.mq-detail::backdrop { background:#000c; }
.mq-detail header { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.mq-detail .mq-view { height:72vh; min-height:240px; margin-top:12px; background:#080808; }
.mq-detail button { color:inherit; background:#242018; border:1px solid #a98544; padding:8px 14px; cursor:pointer; }
.mq-detail button:focus-visible { outline:2px solid #fff; }

/* Reserve the same desktop plane before DOMContentLoaded. Runtime inline values
   and saved Builder state keep precedence; no waiting/hidden first paint. */
[data-cim-layout-mode="desktop"] .page-canvas { width:1440px; zoom:var(--mq-initial-page-scale,1); --content-viewport-width:1440px; }
[data-cim-layout-mode="desktop"] .hero-artboard { width:2501px; height:calc(var(--hero-height) + var(--hero-extension-height)); transform:scale(calc(1440 / 2501)); }
[data-cim-layout-mode="desktop"] .hero-stage { height:calc((var(--hero-height) + var(--hero-extension-height)) * 1440 / 2501); }

/* Reserve dynamic card rows before their existing renderer runs. */
[data-cim-layout-mode="desktop"] #main-content .stories-grid:empty { min-height:var(--stories-height); }
[data-cim-layout-mode="desktop"] #main-content .video-grid:empty { min-height:var(--video-height); }
[data-cim-layout-mode="desktop"] #main-content .lower-grid:empty { min-height:var(--lower-height); }

/* Integer-rounded derivative heights must never resize artwork on decode.
   Owner uploads keep their own intrinsic ratio and existing slot controls. */
img[data-mq-source]:not([src^="blob:"]):not([src^="data:"]):not([data-preview-upload-id]) { aspect-ratio:var(--mq-source-ratio); }