.studio {
  min-height: 100svh;
  max-height: 100svh;
  background: #0f172a;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
}
.modal {
  width: min(860px, 100%);
  height: min(820px, calc(100svh - 32px));
  max-height: calc(100svh - 32px);
  background: #fff;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  flex: 0 0 auto;
}
.modal-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.modal-brand:hover .brand-word {
  color: var(--primary);
}
.modal-brand .brand-word {
  font-size: 15px;
}
.modal-head a, .modal-head button { color: var(--text-secondary); }
.studio-body {
  flex: 1;
  min-height: 0;
  padding: 12px 32px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.studio-hero { text-align: center; margin: 8px 0 16px; flex: 0 0 auto; }
.studio-hero h1 { font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.03em; margin: 0 0 6px; }
.panel-kicker { margin: 0 0 6px; color: var(--blue-600); font-size: 12px; font-weight: 600; }
.product-context {
  width: min(560px, 100%);
  margin: 0 auto 12px;
  padding: 10px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--gray-50);
}
.product-context img { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; background: #fff; }
.product-context.no-image { grid-template-columns: 1fr; padding: 14px 16px; }
.product-context.no-image img { display: none; }
.product-context span { display: block; color: var(--text-muted); font-size: 11px; }
.product-context strong { display: block; margin-top: 2px; overflow: hidden; color: var(--text-primary); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.photo-guide { width: min(560px, 100%); margin: 0 auto 18px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.photo-guide span { padding: 5px 9px; border-radius: 999px; background: var(--blue-100); color: var(--blue-800); font-size: 11px; }
.photo-guide.compact { margin-top: 12px; margin-bottom: 0; }
.photo-guide.compact span { background: var(--gray-100); color: var(--text-secondary); }
.privacy-note,
.result-note { max-width: 600px; margin: 18px auto 0; color: var(--text-muted); font-size: 11px; line-height: 1.9; text-align: center; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 560px; margin: 0 auto; }
.choice[hidden],
#startChoice[hidden],
#glassChoice[hidden] {
  display: none !important;
}
#glassChoice {
  grid-template-columns: 1fr;
  max-width: 420px;
  margin-top: 8px;
}
.choice a, .choice button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #fff; color: inherit; text-align: start; cursor: pointer; min-height: 120px;
}
.choice a:hover, .choice button:hover { border-color: var(--blue-600); }
/* Optical step-1: one obvious primary CTA so the user knows to tap it. */
#startGlassScanBtn.glass-scan-cta {
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 88px;
  padding: 20px 28px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--primary), #0ea5e9);
  color: #fff;
  text-align: center;
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--primary) 32%, transparent),
    0 0 0 0 color-mix(in srgb, var(--primary) 40%, transparent);
  animation: glass-cta-pulse 2.2s ease-in-out infinite;
}
#startGlassScanBtn.glass-scan-cta strong {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
#startGlassScanBtn.glass-scan-cta > span {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.92;
}
#startGlassScanBtn.glass-scan-cta:hover {
  border-color: transparent;
  filter: brightness(1.04);
}
#startGlassScanBtn.glass-scan-cta:active {
  transform: scale(0.98);
  animation: none;
}
@keyframes glass-cta-pulse {
  0%, 100% {
    box-shadow:
      0 10px 28px color-mix(in srgb, var(--primary) 32%, transparent),
      0 0 0 0 color-mix(in srgb, var(--primary) 35%, transparent);
  }
  50% {
    box-shadow:
      0 12px 32px color-mix(in srgb, var(--primary) 40%, transparent),
      0 0 0 8px color-mix(in srgb, var(--primary) 12%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  #startGlassScanBtn.glass-scan-cta {
    animation: none;
  }
}
.visually-hidden-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.drop {
  position: relative;
  border: 1px dashed var(--border); border-radius: var(--radius-md);
  min-height: min(200px, 28svh); flex: 1; min-width: 0;
  display: grid; place-items: center; text-align: center; padding: 24px;
  cursor: pointer; transition: border-color 160ms ease, background 160ms ease;
  overflow: hidden;
  box-sizing: border-box;
}
.drop:hover, .drop.dragover { border-color: var(--blue-600); background: var(--blue-100); }
.drop.has-file {
  padding: 10px;
  cursor: default;
  background: var(--gray-50);
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
}
.drop.has-file:hover { background: var(--gray-50); }
.file-btn { margin-top: 16px; }
.preview-img {
  display: none;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: min(280px, 36svh);
  object-fit: contain;
  object-position: center;
  background: var(--gray-50);
  border-radius: var(--radius-md);
}
.drop.has-file .preview-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: min(280px, 36svh);
  margin: 0 auto;
  object-fit: contain;
}
.drop.has-file .drop-hint { display: none; }
.drop-loading {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  gap: 10px;
  flex-direction: column;
  background: color-mix(in srgb, #fff 82%, var(--blue-100));
  border-radius: inherit;
  z-index: 2;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}
.drop.is-preparing {
  position: relative;
  pointer-events: none;
}
.drop.is-preparing .drop-loading {
  display: grid;
}
.drop.is-preparing .drop-hint { opacity: 0.25; }
.drop-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-top-color: var(--primary);
  animation: drop-spin 0.75s linear infinite;
}
@keyframes drop-spin {
  to { transform: rotate(360deg); }
}
.camera {
  position: relative; background: #0b1220; border-radius: var(--radius-md);
  min-height: 0; flex: 1 1 auto; display: grid; place-items: center; overflow: hidden; color: #fff;
  /* Always vertical 9:16 capture frame for try-on photos. */
  width: min(100%, 360px);
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  height: auto;
  max-height: min(70svh, 100%);
  align-self: center;
}
.camera-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #0b1220;
}
.camera.is-face-scan {
  flex: 1 1 auto;
  width: min(100%, 320px);
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  min-height: 0;
  height: auto;
  max-height: min(64svh, 100%);
  align-self: center;
}
/* Full 1× FOV (contain) — matches exact capture, no digital zoom. */
.camera.is-face-scan .camera-video {
  object-fit: contain;
  object-position: center;
  background: #0b1220;
}
#camera.panel.on {
  gap: 0;
}
#camera .studio-hero,
#camera .status-msg,
#camera .face-measure,
#camera .camera-actions {
  flex: 0 0 auto;
}
#camera .camera-actions--live-ar {
  flex-wrap: wrap;
  gap: 8px;
}
.glasses-ar-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
.face-guide.is-live-ar .face-track-canvas {
  visibility: hidden;
}
.face-guide.is-live-ar .face-guide-caption {
  opacity: 0.7;
}
#liveArStatus:not([hidden]) {
  margin-top: 8px;
  text-align: center;
}
#camera .camera-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 4px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.guide {
  position: absolute; inset: 40px 80px; border: 1px dashed rgba(255,255,255,.35); border-radius: 40% / 48%;
  pointer-events: none;
}
.camera.is-face-scan .guide { display: none; }

.face-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.face-guide[hidden] {
  display: none !important;
}
.face-track-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 3;
  pointer-events: none;
}
.face-guide-caption {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
  z-index: 4;
}
.face-guide.is-aligned .face-guide-caption {
  color: #bbf7d0;
}
.face-measure {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.face-debug-panel {
  margin: 8px auto 0;
  max-width: 420px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.88);
  color: #e2e8f0;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: left;
  direction: ltr;
  white-space: pre-wrap;
}
.face-debug-panel[hidden] {
  display: none !important;
}
.camera-perm {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(11, 18, 32, 0.78);
  backdrop-filter: blur(2px);
}
.camera-perm[hidden] {
  display: none !important;
}
.camera-perm-card {
  width: min(100%, 320px);
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.camera-perm-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #64748b;
}
.camera-perm-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  color: #0f172a;
}
.camera-perm-steps {
  margin: 0 0 12px;
  padding: 0 0 0 18px;
  text-align: right;
  font-size: 12.5px;
  line-height: 1.55;
  color: #334155;
}
.camera-perm-steps li + li {
  margin-top: 4px;
}
.camera-perm-btn {
  width: 100%;
  min-height: 44px;
}
.camera-perm-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.camera-perm-hint {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #64748b;
}
.camera-perm.is-denied .camera-perm-title {
  color: #b91c1c;
}
.face-scan-result {
  margin: 6px auto 0;
  max-width: 420px;
  padding: 6px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f0fdf4 0%, #f8fafc 100%);
  border: 1px solid #bbf7d0;
  text-align: center;
  line-height: 1.35;
}
.face-scan-result[hidden] {
  display: none !important;
}
.face-scan-result-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #166534;
}
.face-scan-result-line {
  margin: 2px 0 0;
  font-size: 12px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.face-scan-result-line--soft {
  color: #64748b;
  font-size: 11px;
}
#useCamBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.camera video.is-front {
  transform: scaleX(-1);
}
.camera-snap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  display: block;
  background: #0b1220;
}
.camera-snap[hidden] {
  display: none !important;
}
.camera.is-review .face-guide,
.camera.is-review .guide,
.camera.is-review .camera-flip {
  display: none !important;
}
.camera.is-review video {
  visibility: hidden;
}
.camera-flip {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 4;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.camera-flip:active {
  transform: scale(0.98);
}
/* —— AI forge (process stage) —— */
.ai-forge {
  --forge-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: min(100%, 440px);
  height: min(300px, 40svh);
  margin: 0 auto 16px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(26, 86, 214, 0.1), transparent 70%),
    linear-gradient(180deg, #f7f9fc 0%, #eef3fb 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  flex: 0 0 auto;
}
.ai-forge-glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 40%, rgba(26, 86, 214, 0.16), transparent 42%),
    radial-gradient(circle at 70% 55%, rgba(14, 165, 233, 0.12), transparent 45%);
  animation: forge-glow 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.ai-forge-ring {
  position: absolute;
  inset: 18% 22%;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, transparent);
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}
.ai-forge-ring-a { animation: forge-spin 18s linear infinite; }
.ai-forge-ring-b {
  inset: 28% 30%;
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary) 18%, transparent);
  animation: forge-spin 12s linear infinite reverse;
}
.ai-forge-nodes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ai-forge-nodes span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.35;
  box-shadow: 0 0 12px rgba(26, 86, 214, 0.45);
  animation: forge-node 3.2s ease-in-out infinite;
}
.ai-forge-nodes span:nth-child(1) { top: 18%; inset-inline-start: 22%; animation-delay: 0s; }
.ai-forge-nodes span:nth-child(2) { top: 24%; inset-inline-end: 18%; animation-delay: 0.4s; }
.ai-forge-nodes span:nth-child(3) { top: 58%; inset-inline-start: 14%; animation-delay: 0.8s; }
.ai-forge-nodes span:nth-child(4) { top: 62%; inset-inline-end: 16%; animation-delay: 1.2s; }
.ai-forge-nodes span:nth-child(5) { top: 42%; inset-inline-start: 48%; animation-delay: 0.2s; }
.ai-forge-nodes span:nth-child(6) { bottom: 16%; inset-inline-start: 46%; animation-delay: 1s; }

.ai-cards {
  position: absolute;
  inset: 18px 18px 42px;
  z-index: 2;
  display: grid;
  place-items: center;
}
.ai-card {
  position: absolute;
  width: min(42%, 150px);
  display: grid;
  gap: 6px;
  justify-items: center;
  will-change: transform, opacity;
}
.ai-card-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.14),
    0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
}
.ai-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
#userPhotoProc { object-fit: contain; background: #f8fafc; }
.ai-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  backdrop-filter: blur(6px);
}
.ai-card-scan,
.ai-card-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.ai-card-scan {
  height: 36%;
  background: linear-gradient(180deg, transparent, rgba(26, 86, 214, 0.28), transparent);
}
.ai-card-mesh {
  background-image:
    linear-gradient(rgba(26, 86, 214, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 86, 214, 0.14) 1px, transparent 1px);
  background-size: 18px 18px;
  mix-blend-mode: multiply;
}

.ai-core {
  position: absolute;
  z-index: 4;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 400ms ease, transform 500ms var(--forge-ease);
}
.ai-core-orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--primary), #0ea5e9);
  box-shadow: 0 0 0 6px rgba(26, 86, 214, 0.12), 0 8px 20px rgba(26, 86, 214, 0.35);
  animation: forge-orb 1.6s ease-in-out infinite;
}
.ai-core-spark {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--primary) 45%, transparent);
  animation: pulse-ring 1.6s ease-out infinite;
}

.ai-forge-caption {
  position: absolute;
  inset-inline: 12px;
  bottom: 10px;
  z-index: 3;
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: opacity 280ms ease, transform 280ms ease;
}

/* Phase layouts + soft opacity / overlay motion (no jumps) */
.ai-forge[data-phase="0"] .ai-card-user {
  animation: phase0-user 5.2s ease-in-out infinite;
}
.ai-forge[data-phase="0"] .ai-card-garment {
  animation: phase0-garment 5.2s ease-in-out infinite;
}
.ai-forge[data-phase="0"] .ai-card-scan {
  opacity: 1;
  animation: scan-move 3.2s ease-in-out infinite;
}
.ai-forge[data-phase="0"] .ai-card-mesh { opacity: 0.45; animation: grid-shift 5s linear infinite; }

.ai-forge[data-phase="1"] .ai-card-user {
  animation: phase1-user 6s ease-in-out infinite;
}
.ai-forge[data-phase="1"] .ai-card-garment {
  animation: phase1-garment 6s ease-in-out infinite;
}
.ai-forge[data-phase="1"] .ai-core {
  opacity: 1;
  transform: scale(1);
}
.ai-forge[data-phase="1"] .ai-card-scan {
  opacity: 1;
  animation: scan-move 2.8s ease-in-out infinite;
}

.ai-forge[data-phase="2"] .ai-card-user {
  animation: phase2-user 7s ease-in-out infinite;
}
.ai-forge[data-phase="2"] .ai-card-garment {
  animation: phase2-garment 7s ease-in-out infinite;
}
.ai-forge[data-phase="2"] .ai-core {
  opacity: 1;
  transform: scale(1.06);
}
.ai-forge[data-phase="2"] .ai-card-mesh {
  opacity: 0.55;
  animation: grid-shift 3.6s linear infinite;
}
.ai-forge[data-phase="2"] .ai-card-scan {
  opacity: 1;
  animation: scan-move 2.6s ease-in-out infinite;
}
.ai-forge[data-phase="2"] .ai-forge-ring-a { animation-duration: 14s; opacity: 0.85; }
.ai-forge[data-phase="2"] .ai-forge-ring-b { animation-duration: 10s; }

.ai-forge[data-phase="3"] .ai-card-user {
  animation: phase3-user 5s ease-in-out infinite;
}
.ai-forge[data-phase="3"] .ai-card-garment {
  animation: phase3-garment 5s ease-in-out infinite;
}
.ai-forge[data-phase="3"] .ai-core {
  opacity: 1;
  transform: scale(1.12);
}
.ai-forge[data-phase="3"] .ai-card-frame {
  box-shadow: 0 16px 36px rgba(26, 86, 214, 0.22);
}

.ai-forge[data-phase="4"] .ai-card-user,
.ai-forge[data-phase="4"] .ai-card-garment {
  animation: none;
  transform: translate(0, 0) scale(0.94);
  opacity: 0.4;
  filter: blur(0.6px);
}
.ai-forge[data-phase="4"] .ai-core {
  opacity: 1;
  transform: scale(1.3);
}
.ai-forge[data-phase="4"] .ai-forge-caption { color: var(--status-success); }

@keyframes forge-glow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  50% { transform: translate3d(2%, -2%, 0) scale(1.05); opacity: 1; }
}
@keyframes forge-spin { to { transform: rotate(360deg); } }
@keyframes forge-node {
  0%, 100% { transform: scale(0.8); opacity: 0.2; }
  50% { transform: scale(1.35); opacity: 0.7; }
}
@keyframes forge-orb {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes scan-move {
  0% { top: -40%; }
  100% { top: 100%; }
}
@keyframes grid-shift {
  from { background-position: 0 0; }
  to { background-position: 18px 18px; }
}
@keyframes pulse-ring {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.55); opacity: 0; }
}

.ai-forge.phase-flash {
  animation: forge-phase-in 0.55s var(--forge-ease);
}
@keyframes forge-phase-in {
  0% { filter: brightness(1.04); }
  100% { filter: none; }
}

/*
  Soft stack: cards stay near place.
  Lower card gently rises onto the upper one with opacity blend — no hard jump/swap.
*/
@keyframes phase0-user {
  0%, 100% {
    transform: translate(-42%, 6%) rotate(-5deg) scale(1);
    opacity: 1;
    z-index: 2;
  }
  50% {
    transform: translate(-40%, 4%) rotate(-4deg) scale(1.02);
    opacity: 0.92;
    z-index: 2;
  }
}
@keyframes phase0-garment {
  0%, 35% {
    transform: translate(42%, 10%) rotate(5deg) scale(0.96);
    opacity: 0.55;
    z-index: 1;
  }
  55% {
    transform: translate(8%, 2%) rotate(1deg) scale(1.02);
    opacity: 0.95;
    z-index: 4;
  }
  75%, 100% {
    transform: translate(42%, 10%) rotate(5deg) scale(0.96);
    opacity: 0.55;
    z-index: 1;
  }
}
@keyframes phase1-user {
  0%, 100% {
    transform: translate(-38%, 4%) rotate(-4deg) scale(1);
    opacity: 1;
    z-index: 2;
  }
  45% {
    transform: translate(-30%, 2%) rotate(-2deg) scale(1.01);
    opacity: 0.75;
    z-index: 2;
  }
}
@keyframes phase1-garment {
  0%, 25% {
    transform: translate(40%, 12%) rotate(5deg) scale(0.95);
    opacity: 0.45;
    z-index: 1;
  }
  50% {
    transform: translate(4%, 0%) rotate(0deg) scale(1.04);
    opacity: 1;
    z-index: 4;
  }
  75%, 100% {
    transform: translate(40%, 12%) rotate(5deg) scale(0.95);
    opacity: 0.45;
    z-index: 1;
  }
}
@keyframes phase2-user {
  0%, 20% {
    transform: translate(-20%, 2%) rotate(-2deg) scale(1);
    opacity: 1;
    z-index: 2;
  }
  45% {
    transform: translate(-8%, 0%) rotate(0deg) scale(1.02);
    opacity: 0.55;
    z-index: 2;
  }
  70%, 100% {
    transform: translate(-20%, 2%) rotate(-2deg) scale(1);
    opacity: 1;
    z-index: 2;
  }
}
@keyframes phase2-garment {
  0%, 20% {
    transform: translate(28%, 14%) rotate(4deg) scale(0.94);
    opacity: 0.4;
    z-index: 1;
  }
  45% {
    transform: translate(4%, -2%) rotate(0deg) scale(1.05);
    opacity: 1;
    z-index: 5;
  }
  70%, 100% {
    transform: translate(28%, 14%) rotate(4deg) scale(0.94);
    opacity: 0.4;
    z-index: 1;
  }
}
@keyframes phase3-user {
  0%, 100% {
    transform: translate(-16%, 2%) rotate(-2deg) scale(1.02);
    opacity: 0.85;
    z-index: 2;
  }
  50% {
    transform: translate(-10%, 0%) rotate(-1deg) scale(1.04);
    opacity: 1;
    z-index: 2;
  }
}
@keyframes phase3-garment {
  0%, 100% {
    transform: translate(14%, 4%) rotate(2deg) scale(1.02);
    opacity: 0.7;
    z-index: 3;
  }
  50% {
    transform: translate(6%, 0%) rotate(0deg) scale(1.05);
    opacity: 1;
    z-index: 4;
  }
}

/* —— Process panel: centered stages —— */
#process.process-panel.on {
  align-items: center;
  text-align: center;
}
#process .ai-forge {
  margin-inline: auto;
}
.process-hero {
  width: min(100%, 520px);
  margin-inline: auto;
  text-align: center;
}
.process-hero .panel-kicker,
.process-hero .h2,
.process-hero .muted {
  text-align: center;
}
.process-hero .muted {
  max-width: 36ch;
  margin-inline: auto;
}

/* Step cards — clean, centered, equal boxes */
.ai-steps {
  list-style: none;
  margin: 4px auto 0;
  padding: 0;
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  flex: 0 0 auto;
}
.ai-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, #cbd5e1);
  background:
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--gray-50, #f8fafc) 70%, #fff) 100%);
  color: var(--text-muted);
  min-height: 92px;
  text-align: center;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
  transition:
    border-color 280ms ease,
    background 280ms ease,
    color 280ms ease,
    box-shadow 280ms ease,
    transform 280ms var(--forge-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.ai-steps li + li::before {
  content: "";
  position: absolute;
  inset-inline-end: calc(100% + 1px);
  top: 50%;
  width: 10px;
  height: 2px;
  margin-top: -1px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 2px;
  pointer-events: none;
}
.ai-step-index,
.ai-step-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid color-mix(in srgb, var(--border) 90%, #94a3b8);
  background: #fff;
  color: var(--text-secondary);
  flex: 0 0 auto;
}
.ai-step-check { display: none; }
.ai-step-title {
  display: block;
  width: 100%;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: inherit;
  text-align: center;
}
.ai-step-body {
  display: contents;
}
.ai-step-body strong {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  color: inherit;
  text-align: center;
}
.ai-step-body small {
  display: none;
}
.ai-steps li.active {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary-light, #e8f0fe) 55%, #fff) 0%,
      #fff 100%
    );
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--primary) 12%, transparent),
    0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
  transform: translateY(-2px);
}
.ai-steps li.active .ai-step-index {
  border-color: var(--primary);
  color: #fff;
  background: linear-gradient(145deg, var(--primary), #0ea5e9);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
  animation: step-pulse 1.6s ease-in-out infinite;
}
.ai-steps li.done {
  color: var(--status-success);
  border-color: color-mix(in srgb, var(--status-success) 38%, var(--border));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--status-success) 10%, #fff) 0%,
      #fff 100%
    );
}
.ai-steps li.done + li::before,
.ai-steps li.active + li::before {
  background: color-mix(in srgb, var(--primary) 55%, var(--border));
}
.ai-steps li.done .ai-step-index { display: none; }
.ai-steps li.done .ai-step-check {
  display: grid;
  border-color: transparent;
  background: var(--status-success);
  color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  animation: pop 0.4s cubic-bezier(0.2, 1.4, 0.3, 1);
}
.ai-steps li.just-done {
  animation: step-pop 0.55s var(--forge-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
@keyframes step-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary) 20%, transparent); }
}
@keyframes step-pop {
  0% { transform: scale(0.96); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-forge-glow,
  .ai-forge-ring,
  .ai-forge-nodes span,
  .ai-core-orb,
  .ai-core-spark,
  .ai-card,
  .ai-card-scan,
  .ai-card-mesh,
  .ai-forge.phase-flash,
  .ai-steps li.active .ai-step-index,
  .ai-steps li.just-done,
  .ai-steps li.done .ai-step-check {
    animation: none !important;
  }
  .ai-forge[data-phase] .ai-card-user {
    transform: translate(-36%, 4%) rotate(-4deg) !important;
    opacity: 1 !important;
  }
  .ai-forge[data-phase] .ai-card-garment {
    transform: translate(36%, 8%) rotate(4deg) !important;
    opacity: 0.85 !important;
  }
  .ai-forge[data-phase="1"] .ai-core,
  .ai-forge[data-phase="2"] .ai-core,
  .ai-forge[data-phase="3"] .ai-core,
  .ai-forge[data-phase="4"] .ai-core {
    opacity: 1;
    transform: scale(1);
  }
}
.result-frame { position: relative; max-width: 520px; margin: 0 auto; flex: 1; min-height: 0; }
.result-frame img {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  display: block;
  aspect-ratio: 9 / 16;
  height: auto;
  max-height: min(70svh, 640px);
  object-fit: contain;
  object-position: center top;
  border-radius: var(--radius-md);
  background: var(--gray-50);
}
.ba {
  position: relative; max-width: 520px; margin: 0 auto; overflow: hidden; border-radius: var(--radius-md);
  height: min(420px, 46svh); user-select: none; flex: 1; min-height: 0;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .after { clip-path: inset(0 50% 0 0); }
.ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.ba .line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #fff; }
.sticky-cta {
  position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: center;
  padding: 16px 0 0; background: linear-gradient(transparent, #fff 30%);
}
.powered { text-align: center; margin-top: 16px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet-600); }
.powered a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.powered a:hover { text-decoration: underline; }
.panel { display: none; }
.panel.on {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#quota.panel.on {
  justify-content: center;
  text-align: center;
  padding: 12px;
}
.status-msg { text-align: center; color: var(--text-secondary); min-height: 20px; margin: 8px 0 0; font-weight: 500; font-size: 13px; }
.status-msg.err { color: var(--status-error); }
.stage {
  position: relative;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gray-50);
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}
.stage img, .stage video {
  width: 100%;
  height: min(420px, 46svh);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--gray-50);
}
.result-badge {
  position: absolute; top: 14px; right: 14px;
  background: var(--violet-600); color: #fff; font-weight: 600;
  padding: 6px 12px; border-radius: 8px; font-size: 12px;
  z-index: 2;
}
.result-zoom-btn {
  position: absolute;
  inset-inline-start: 12px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.result-zoom-btn:hover,
.result-zoom-btn:focus-visible {
  background: rgba(15, 23, 42, 0.92);
  outline: none;
}
.result-zoom-btn svg {
  flex: 0 0 auto;
}
#resultImg {
  cursor: zoom-in;
}
.result-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
}
.result-lightbox[hidden] {
  display: none !important;
}
.result-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.result-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 920px);
  max-height: min(92svh, 920px);
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 12px;
}
.result-lightbox-panel img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(78svh, 780px);
  object-fit: contain;
  border-radius: 12px;
  background: #0b1220;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.result-lightbox-close {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.result-lightbox-download {
  position: static;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  border: 0;
  border-radius: 999px;
  background: #1a56d6;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(26, 86, 214, 0.4);
}
.result-lightbox-download:hover {
  background: #1547b5;
  color: #fff;
}
body.lightbox-open {
  overflow: hidden;
}
.busy-veil {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .28);
  backdrop-filter: blur(3px);
}
.busy-veil span {
  background: #fff; color: var(--text-primary); font-weight: 600;
  padding: 10px 16px; border-radius: 999px; font-size: 14px;
}
.hidden { display: none !important; }
.progress-box {
  width: min(100%, 520px);
  max-width: 520px;
  margin: 16px auto 0;
  padding: 14px 16px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, #cbd5e1);
  background:
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--gray-50, #f8fafc) 65%, #fff) 100%);
  text-align: center;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
.progress-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  margin-bottom: 12px;
  text-align: center;
}
.progress-top > span:first-child {
  width: 100%;
  min-width: 0;
  line-height: 1.55;
  color: var(--text-secondary);
  text-align: center;
}
.progress-live {
  color: var(--primary);
  font-size: 18px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  text-align: center;
  direction: ltr;
  letter-spacing: 0.02em;
}
.track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gray-200, #e2e8f0) 90%, #fff);
  overflow: hidden;
}
.fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #0ea5e9);
  transition: width 420ms ease;
}
#process .powered {
  width: min(100%, 520px);
  margin-inline: auto;
  text-align: center;
}
.fill.working {
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
  animation: progress-pulse 1.6s ease-in-out infinite;
}
.fill.done {
  width: 100% !important;
  background: var(--status-success);
  animation: none;
}
@keyframes progress-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
@media (max-width: 720px) {
  .studio {
    padding: 0;
    height: 100svh;
    max-height: 100svh;
  }
  .modal {
    width: 100%;
    height: 100svh;
    max-height: 100svh;
    min-height: 0;
    border-radius: 0;
  }
  .modal-head { padding: 10px 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
  .studio-body {
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
    overflow: hidden;
  }
  .studio-hero { margin: 4px 0 10px; flex: 0 0 auto; }
  .studio-hero h1,
  .studio-hero .h2 { font-size: clamp(18px, 5vw, 22px); line-height: 1.35; }
  .studio-hero .muted { font-size: 12px; }
  .product-context,
  .photo-guide,
  .privacy-note,
  .result-note,
  .progress-box {
    width: 100%;
    max-width: none;
  }
  .product-context { margin-bottom: 8px; padding: 8px; }
  .product-context img { width: 44px; height: 44px; }
  .photo-guide { margin-bottom: 8px; gap: 6px; }
  .photo-guide span { font-size: 10px; padding: 4px 8px; }
  .privacy-note,
  .result-note { margin-top: 8px; font-size: 10px; line-height: 1.5; }
  .choice { grid-template-columns: 1fr 1fr; gap: 8px; max-width: none; }
  .choice a, .choice button { min-height: 72px; padding: 10px; gap: 4px; }
  #startGlassScanBtn.glass-scan-cta {
    min-height: 84px;
    padding: 18px 22px;
    gap: 6px;
  }
  .drop { min-height: 0; flex: 1; padding: 8px; }
  .drop.has-file { padding: 8px; }
  .preview-img,
  .drop.has-file .preview-img {
    max-height: min(240px, 34svh);
    height: auto;
    width: 100%;
  }
  .camera {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }
  .camera.is-face-scan {
    width: min(100%, 58vw);
    max-width: 320px;
    max-height: min(62svh, calc(100dvh - 220px));
    aspect-ratio: 9 / 16;
    height: auto;
  }
  .camera-video,
  .face-track-canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  .camera.is-face-scan .camera-video {
    object-fit: contain;
    object-position: center;
  }
  .camera-snap {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  #camera .camera-actions {
    margin-top: 8px;
    gap: 6px;
  }
  #camera .camera-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
  }
  .guide { inset: 16px 28px; }
  .ai-forge {
    width: 100%;
    height: min(32svh, 210px);
    margin-bottom: 10px;
    border-radius: 18px;
  }
  .ai-cards { inset: 12px 10px 36px; }
  .ai-card { width: min(44%, 118px); }
  .ai-card-label { font-size: 10px; padding: 1px 8px; }
  .ai-forge-caption { font-size: 11px; bottom: 8px; }
  .ai-core { width: 38px; height: 38px; }
  .ai-core-orb { width: 18px; height: 18px; }
  .process-hero { margin-bottom: 8px; }
  .process-hero .h2 { font-size: clamp(17px, 4.8vw, 21px); }
  .ai-steps {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .ai-steps li {
    min-height: 78px;
    padding: 12px 8px;
    border-radius: 14px;
    gap: 7px;
  }
  .ai-steps li + li::before { display: none; }
  .ai-step-index,
  .ai-step-check {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .ai-step-title,
  .ai-step-body strong {
    font-size: 12px;
  }
  .ai-step-body small { display: none; }
  .progress-box {
    width: 100%;
    margin: 12px auto 0;
    padding: 12px 14px 14px;
  }
  .progress-live { font-size: 16px; }
  .powered { margin-top: 8px; }
  .stage,
  .result-frame,
  .ba {
    flex: 1;
    min-height: 0;
    max-width: 100%;
    height: auto;
  }
  .stage img,
  .stage video,
  .result-frame img,
  .ba {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: min(42svh, 320px);
    object-fit: contain;
    object-position: center;
  }
  .result-zoom-btn {
    inset-inline-start: 10px;
    bottom: 10px;
    min-height: 34px;
    padding: 5px 10px;
    font-size: 11px;
  }
  .result-lightbox {
    padding: 10px;
  }
  .result-lightbox-panel {
    width: 100%;
    max-height: 94svh;
    padding: 8px;
  }
  .result-lightbox-panel img {
    max-height: min(86svh, 860px);
    border-radius: 10px;
  }
  .studio-body .row .btn { min-height: 40px; }
  .sticky-cta {
    position: static;
    flex-shrink: 0;
    margin-inline: 0;
    padding: 10px 0 0;
    flex-wrap: wrap;
    background: none;
    border-top: 0;
  }
  .sticky-cta .btn-primary { width: 100%; }
  .sticky-cta .btn-secondary,
  .sticky-cta .btn-ghost { flex: 1 1 calc(50% - 4px); min-width: 0; }
}

/* Short viewports: keep actions visible; shrink preview, not buttons */
@media (max-height: 740px) {
  .modal-head { padding: 8px 12px; }
  .studio-body { padding-top: 6px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .studio-hero { margin: 2px 0 6px; }
  .studio-hero h1,
  .studio-hero .h2 { font-size: clamp(16px, 4.5vw, 20px); margin-bottom: 2px; }
  .studio-hero .muted { font-size: 11px; line-height: 1.4; }
  .camera.is-face-scan {
    max-height: min(46svh, calc(100dvh - 220px));
  }
  .status-msg { margin-top: 4px; min-height: 0; font-size: 12px; }
  .face-measure { font-size: 12px; }
  .face-guide-caption { font-size: 11px; bottom: 6px; }
  #camera .camera-actions { margin-top: 6px; }
  .ai-forge { height: min(28svh, 180px); margin-bottom: 8px; }
}

@media (max-height: 600px) {
  .studio-hero .muted { display: none; }
  .panel-kicker { display: none; }
  .camera.is-face-scan {
    max-height: min(40svh, calc(100dvh - 180px));
    width: min(100%, calc(40svh * 0.75));
  }
  .face-guide-caption { display: none; }
  .product-context { display: none; }
  .photo-guide { display: none; }
  #camera .camera-actions .btn { min-height: 38px; font-size: 13px; }
}

@media (max-width: 720px) and (max-height: 700px) {
  .choice a, .choice button { min-height: 56px; padding: 8px; }
  #startGlassScanBtn.glass-scan-cta {
    min-height: 76px;
    padding: 16px 20px;
  }
  .privacy-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-beam,
  .scan-grid,
  .scan.working img,
  .plus-ring,
  .fill.working,
  #startGlassScanBtn.glass-scan-cta { animation: none !important; }
}

html.embed, html.embed body {
  height: 100%;
  max-height: 100dvh;
  margin: 0;
  overflow: hidden;
}
html.embed .studio {
  min-height: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  background: #fff;
  display: block;
}
html.embed .modal {
  width: 100%;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
}
html.embed .modal-head {
  padding: 0;
}
html.embed .modal-head-top {
  min-height: 52px;
  padding: 8px 10px;
  gap: 8px;
}
html.embed .modal-back-bar {
  padding: 8px 10px 8px;
}
html.embed .modal-brand .brand-word {
  font-size: 13px;
}
html.embed .modal-tool-btn {
  min-height: 34px;
  min-width: 34px;
}
html.embed .modal-minimize-btn,
html.embed .modal-close-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex-basis: 34px;
}
html.embed .studio-body {
  overflow: hidden;
  min-height: 0;
  padding: 0;
}
html.embed .studio-hero {
  margin: 6px 0 10px;
  padding: 0 12px;
}
html.embed .studio-hero h1 {
  font-size: 18px;
}
html.embed #start .studio-body,
html.embed #upload .studio-body,
html.embed #camera .studio-body,
html.embed #processing .studio-body {
  padding: 8px 14px 14px;
}