/* Upload first, a single roomy preview on phones, and the existing Hawaf colors. */
main .intro {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(16px, 3vw, 34px);
  align-items: center;
}
.intro .intro-copy { grid-column: 1; }
.intro-copy h1 { font-size: clamp(2.1rem, 5.2vw, 4rem); line-height: 1.15; }
.intro .upload-card { grid-column: 1; grid-row: 2; min-width: 0; }
.intro .hero-demo {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  max-width: 460px;
  min-width: 0;
  margin: 0 auto;
}
.upload-card, .studio { scroll-margin-top: 70px; }
.upload-card .drop-zone {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 12px;
  min-width: 0;
  padding: clamp(16px, 3vw, 30px);
  text-align: center;
}
.upload-copy { min-width: 0; max-width: 100%; text-align: center; }
.upload-copy h2 { font-size: clamp(1.2rem, 2.8vw, 1.55rem); }
.upload-copy p { margin-block-start: 5px; line-height: 1.6; }
.upload-card .upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 310px);
  min-height: 54px;
  font-size: 1rem;
  white-space: normal;
}
.v4-batch-settings {
  width: 100%;
  max-width: 490px;
  padding: 8px 12px;
  border: 1px solid #ffffff38;
  border-radius: 12px;
  text-align: start;
}
.v4-batch-settings summary { cursor: pointer; font-size: .85rem; font-weight: 650; }
.v4-batch-settings[open] summary { margin-block-end: 10px; }
.v4-batch-settings .batch-upload-note { margin: 0 0 8px; line-height: 1.6; }
.v4-batch-settings .batch-resolution { display: flex; flex-wrap: wrap; gap: 8px; }
.v4-batch-settings select { max-width: 100%; }
.upload-formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ultra-entry {
  display: grid;
  width: 100%;
  justify-items: center;
  gap: 6px;
  padding-block-start: 9px;
  border-block-start: 1px solid #ffffff38;
}
.ultra-entry p, .ultra-entry small { color: #f0eaf6; font-size: .8rem; }
.ultra-entry small { min-height: 1.6em; line-height: 1.55; }
.ultra-trigger {
  color: #fff;
  background: transparent;
  border: 1px solid #c9b7df;
  min-height: 44px;
}
.ultra-trigger:hover:not(:disabled) { background: #ffffff1a; }
.ultra-editor { min-height: 44px; }
.ultra-dialog {
  position: fixed;
  inset: 0;
  width: min(calc(100% - 24px), 520px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: clamp(16px, 4vw, 30px);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 19px;
}
.ultra-dialog::backdrop { background: #171123a8; }
.ultra-dialog form { display: grid; gap: 12px; }
.ultra-dialog h2 { font-size: clamp(1.25rem, 4vw, 1.65rem); }
.ultra-dialog p { line-height: 1.6; }
.ultra-dialog a { color: var(--purple); text-decoration: underline; }
.ultra-dialog select { width: 100%; min-height: 44px; }
.ultra-file-row, .ultra-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ultra-file-row bdi { flex: 1 1 130px; min-width: 0; overflow-wrap: anywhere; }
.ultra-dialog-actions { justify-content: flex-end; }
.ultra-dialog .button { min-height: 44px; }
#ultra-file-error:empty { display: none; }
#ultra-file-error { color: var(--ink); font-weight: 700; }
.mobile-preview-switch { display: none; }
.studio-header { flex-wrap: wrap; }
.studio-header .segmented { max-width: 100%; overflow-x: auto; }
.studio .stage { height: clamp(230px, 32vw, 430px); }

@media (max-width: 720px) {
  main .intro { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .intro .intro-copy { grid-row: 1; text-align: center; }
  .intro .hero-demo { grid-column: 1; grid-row: 3; }
  .intro-copy p { max-width: 48ch; margin-inline: auto; }
  .studio-header .segmented { display: flex; width: 100%; }
  .studio-header .segmented button { min-height: 44px; flex: 1 0 auto; }
  .ultra-entry small { min-height: 3.1em; }
  .studio .status-row { flex-wrap: wrap; }
  .mobile-preview-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 5px 9px; }
  .mobile-preview-switch button {
    min-height: 44px;
    padding: 6px 10px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .mobile-preview-switch button[aria-pressed="true"] { border-color: var(--purple); }
  .studio .boards { grid-template-columns: minmax(0, 1fr); }
  .studio .boards:not(.is-single)[data-tone="dark"] #board-light,
  .studio .boards:not(.is-single)[data-tone="light"] #board-dark { display: none; }
  .studio .stage { height: clamp(240px, 67vw, 440px); }
  .studio .controls, .studio .field, .studio select { max-width: 100%; min-width: 0; }
  .studio #edit-tools {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    overflow-x: auto;
    padding: 5px 2px;
    scrollbar-width: thin;
  }
  .studio #edit-tools button, .studio .utility-group button {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
  }
  .studio .utility-group { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-demo *, .upload-card * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}