/* Preview-card shared styles — dark canvas, 700px-wide design surface,
   minimal chrome (no title bar; the asset name renders outside). */
@import url('../colors_and_type.css?v=1779213422164');

html, body {
  margin: 0; padding: 0;
  background: var(--mlc-bg);
  color: var(--mlc-fg-2);
  font-family: var(--mlc-font-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* Hide native scrollbars completely — preview specimens
     should never show a chrome scrollbar inside the iframe. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
body {
  padding: 24px;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
}
body::before, body::after {
  /* Ambient brand orbs — ensure the dark canvas never looks flat. */
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
body::before {
  width: 320px; height: 320px;
  top: -120px; left: -120px;
  background: rgba(33,88,164,0.30);
}
body::after {
  width: 260px; height: 260px;
  bottom: -120px; right: -120px;
  background: rgba(244,205,99,0.18);
}
.wrap { position: relative; z-index: 1; }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }

.label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mlc-fg-6);
  font-weight: 600;
}
.caption {
  font-size: 11px;
  color: var(--mlc-fg-5);
  font-family: var(--mlc-font-mono);
}

/* ===== Mobile pass — never crop, never overflow horizontally ===== */
@media (max-width: 760px) {
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100vw;
  }
  body {
    padding: 14px 12px;
    min-height: 100vh;
    height: auto;
  }
  body::before, body::after {
    filter: blur(80px);
    transform: scale(0.6);
  }
  .wrap { width: 100%; max-width: 100%; }
  .row { gap: 10px; }
}
@media (max-width: 420px) {
  body { padding: 12px 10px; }
}