* { box-sizing: border-box; }
html, body { min-width: 280px; margin: 0; overflow-x: hidden; }
body { overflow-x: hidden; background: var(--sc-bg-body); color: var(--sc-text-main); font-family: var(--sc-font-main, system-ui, sans-serif); }
/* A prévia encaixa a própria altura: o pai (site.js) mede e ajusta o iframe,
   então nada de min-height:100vh (era isso que criava a "caixa vazia"). */
.su-isolated-preview { width: 100%; display: grid; align-content: start; gap: var(--sc-space-4, 1rem); padding: clamp(16px, 4vw, 42px); }
.su-isolated-preview > * { min-width: 0; max-width: 100%; }
.su-mode-full_bleed, .su-mode-viewport { padding: 0; }
.su-mode-wide { align-content: start; }
img, svg, video, canvas { max-width: 100%; }
pre, table { max-width: 100%; }
.su-isolated-preview .sc-coverflow,
.su-isolated-preview .sc-coverflow-track,
.su-isolated-preview .sc-slidewheel { max-width: 100%; }
.su-isolated-preview:has(.sc-slidewheel-wrap) { align-content: start; overflow: visible; }
body:has(.sc-slidewheel-wrap) { overflow-y: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}