.frame-preview-dialog {
  width: min(760px, calc(100vw - 28px));
  max-width: none;
  max-height: min(94dvh, 900px);
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--line, #dfe3e9);
  border-radius: 24px;
  background: var(--surface, #fff);
  color: var(--ink, #202126);
  box-shadow: 0 24px 75px #10182750;
  overflow: auto;
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.frame-preview-dialog:not([open]) { display: none; }
.frame-preview-dialog::backdrop { background: #101827ae; backdrop-filter: blur(4px); }
.frame-preview-dialog * { box-sizing: border-box; }
.frame-preview-header { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.frame-preview-header h2 { margin: 3px 0; font-size: clamp(21px, 3vw, 28px); line-height: 1.2; }
.frame-preview-header p { margin: 0; }
.frame-preview-eyebrow { color: var(--muted, #656873); font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
#frame-preview-subtitle, .frame-preview-help { color: var(--muted, #656873); font-size: 13px; }
.frame-preview-close, .frame-preview-arrow, .frame-preview-count, .frame-preview-cancel, .frame-preview-use { font: inherit; cursor: pointer; }
.frame-preview-close { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line, #dfe3e9); border-radius: 11px; background: var(--canvas, #f4f5f8); color: var(--ink, #202126); font-size: 25px; line-height: 1; }
.frame-preview-help { margin: 12px 0; }
.frame-preview-message { margin:0 0 12px; padding:10px 12px; border:1px solid #edb8b8; border-radius:12px; background:color-mix(in srgb,#e84a4a 8%,var(--surface,#fff)); color:var(--ink,#202126); white-space:pre-line; }
.frame-preview-feedback { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:0 0 12px; padding:10px 12px; border:1px solid var(--line,#dfe3e9); border-radius:14px; background:var(--canvas,#f4f5f8); }
.frame-preview-feedback[hidden] { display:none; }
.frame-preview-feedback > strong { font-size:13px; white-space:nowrap; }
.frame-preview-feedback-tags { display:flex; flex-wrap:wrap; gap:6px; }
.frame-preview-feedback-tags span { padding:4px 9px; border:1px solid var(--line,#dfe3e9); border-radius:999px; background:var(--surface,#fff); color:var(--ink,#202126); font-size:12px; font-weight:600; }
.frame-preview-feedback p { flex-basis:100%; margin:0; color:var(--muted,#656873); font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; }
.frame-preview-carousel { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 7px; }
.frame-preview-arrow { width: 42px; height: 52px; padding: 0; border: 1px solid var(--line, #dfe3e9); border-radius: 13px; background: var(--canvas, #f4f5f8); color: var(--ink, #202126); font-size: 32px; line-height: 1; }
.frame-preview-arrow:disabled { opacity: .35; cursor: default; }
.frame-preview-track { display: flex; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.frame-preview-track::-webkit-scrollbar { display: none; }
.frame-preview-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.frame-preview-stage { display: grid; place-items: center; width: 100%; height: min(58dvh, 520px); min-height: 280px; padding: 18px; border: 1px solid var(--line, #dfe3e9); border-radius: 17px; background: var(--canvas, #f4f5f8); container-type: inline-size; overflow: hidden; }
.frame-preview-slide-caption { margin: 9px 0 0; color: var(--ink, #202126); font-size: 13px; font-weight: 700; text-align: center; }
.frame-preview-counts { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.frame-preview-count { position: relative; width: 38px; height: 38px; border: 1px solid var(--line, #dfe3e9); border-radius: 11px; background: var(--canvas, #f4f5f8); color: var(--ink, #202126); font-weight: 700; }
.frame-preview-count[aria-current="true"] { border-color: var(--blue, #0874e7); background: color-mix(in srgb, var(--blue, #0874e7) 12%, var(--surface, #fff)); color: var(--blue, #0874e7); }
.frame-preview-count.matches-photos::after { content: "✓"; position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid var(--surface, #fff); border-radius: 50%; background: #21834a; color: #fff; font-size: 11px; line-height: 1; }
.frame-preview-footer { display: flex; justify-content: end; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line, #dfe3e9); }
.frame-preview-cancel, .frame-preview-use { min-height: 42px; padding: 9px 16px; border: 1px solid var(--line, #dfe3e9); border-radius: 12px; background: var(--canvas, #f4f5f8); color: var(--ink, #202126); font-weight: 700; }
.frame-preview-use { border-color: var(--blue, #0874e7); background: var(--blue, #0874e7); color: #fff; }
.frame-preview-dialog button:focus-visible { outline: 3px solid #7bb9ff; outline-offset: 2px; }
.frame-preview-dialog[open].has-feedback { display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto auto; width:min(1080px,calc(100vw - 24px)); height:min(96dvh,900px); max-height:none; overflow:hidden; }
.has-feedback .frame-preview-help { margin:8px 0; }
.has-feedback .frame-preview-carousel, .has-feedback .frame-preview-track, .has-feedback .frame-preview-slide { min-height:0; height:100%; }
.has-feedback .frame-preview-slide { display:grid; grid-template-rows:minmax(0,1fr) auto; }
.has-feedback .frame-preview-stage { height:100%; min-height:0; padding:12px; container-type:size; }
.has-feedback .frame-preview-stage .frame-preview-studio-art { width:min(68cqi,58cqb,310px); height:auto; aspect-ratio:2 / 3; }
.has-feedback .frame-preview-stage .frame-preview-studio-art[data-shape=wide] { width:min(78cqi,125cqb,440px); max-width:none; aspect-ratio:4 / 3; }
.has-feedback .frame-preview-counts { margin:8px 0; }
.has-feedback .frame-preview-footer { padding-top:9px; }
@media (max-width: 600px) {
  .frame-preview-carousel { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 3px; }
  .frame-preview-arrow { width: 30px; height: 45px; font-size: 24px; }
  .frame-preview-stage { height: min(53dvh, 430px); min-height: 250px; padding: 10px; }
  .has-feedback .frame-preview-feedback { align-items:flex-start; }
  .has-feedback .frame-preview-feedback > strong { flex-basis:100%; }
}