/* The editor is a true miniature of a live canvas: media flows behind the
   floating navigation and controls, while the project opens as a full page. */
.preview-frame > .canvas-head {
  position:absolute; top:16px; left:16px; right:16px; z-index:5;
  min-height:58px; padding:8px 12px 8px 18px; gap:12px;
  border:1px solid #54534d; border-radius:999px;
  background:rgba(34,34,31,.96); color:#f1f0ea;
  box-shadow:0 8px 28px #0003; backdrop-filter:blur(16px);
}
.preview-frame .canvas-brand { min-width:0; max-width:65%; color:#f1f0ea; }
.preview-frame .canvas-cta {
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; max-width:45%; padding:0 18px; overflow:hidden;
  border:1px solid #686862; border-radius:999px; background:#111; color:#fff;
  white-space:nowrap; text-overflow:ellipsis;
}
.preview-frame .canvas-cta[hidden] { display:none; }
.preview-frame > .creator-canvas-board { inset:0; }
.preview-frame > .preview-empty { z-index:1; }
.preview-frame > .preview-footer {
  z-index:5; left:16px; right:16px; bottom:16px;
  padding:0; background:transparent; color:#f1f0ea; pointer-events:none;
}
.preview-footer span { padding:12px 15px; border:1px solid #54534d; border-radius:999px; background:rgba(34,34,31,.96); }

.preview-dialog {
  width:100vw; max-width:none; height:100dvh; max-height:none;
  margin:0; padding:0; overflow:auto; background:#1d1d1b; color:#f1f0ea;
}
.preview-detail { min-height:100%; display:grid; grid-template-columns:minmax(0,7fr) minmax(320px,3fr); }
.dialog-visual { position:relative; min-width:0; min-height:100dvh; background:#181817; }
.dialog-media { display:flex; flex-direction:column; align-items:center; gap:3rem; min-height:100dvh; padding:5.5rem; background:transparent; }
.dialog-media img,.dialog-media video { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 11rem); object-fit:contain; background:transparent; }
.dialog-close { position:fixed; float:none; top:2rem; left:2rem; width:50px; height:50px; margin:0; border:1px solid #65635b; border-radius:50%; background:#292925; color:#f1f0ea; }
.dialog-copy { position:sticky; top:0; align-self:start; height:100dvh; overflow:auto; display:flex; flex-direction:column; padding:2rem 2.5rem; border-left:1px solid #494841; }
.dialog-copy .eyebrow { color:#b8b6ad; }
.dialog-body { padding:7rem 0 3rem; }
.dialog-body h2 { margin:0 0 1.8rem; font-size:clamp(2.6rem,4vw,4.6rem); font-weight:400; letter-spacing:-.05em; line-height:1; }
.dialog-body p { max-width:30rem; color:#c3c1b7; font-size:.95rem; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.dialog-body a { display:inline-block; margin-top:2rem; padding-bottom:.45rem; border-bottom:1px solid currentColor; font-size:.8rem; }
.dialog-links { display:block; margin-top:auto; padding-top:1.5rem; border-top:1px solid #494841; }
.dialog-links:has(a[hidden]) { border-top:0; }
.dialog-links a { display:flex; justify-content:space-between; padding:1.15rem 1.3rem; border:0; border-radius:999px; background:#111; color:#fff; font-size:.72rem; }
.dialog-links a[hidden] { display:none; }
@media(max-width:1100px) { .dialog-media { padding:5rem 3rem; } .dialog-copy { padding:2rem; } }
@media(max-width:700px) {
  .preview-frame > .canvas-head { top:10px; left:10px; right:10px; min-height:54px; padding:7px 10px 7px 14px; }
  .preview-frame .canvas-brand { max-width:60%; font-size:1rem; }
  .preview-frame .canvas-cta { max-width:50%; min-height:38px; padding:0 14px; }
  .preview-frame > .preview-footer { left:10px; right:10px; bottom:10px; }
  .preview-footer span { padding:10px 12px; font-size:8px; }
  .preview-detail { display:block; }
  .dialog-visual { min-height:55dvh; }
  .dialog-media { min-height:55dvh; padding:5rem 1.3rem 2rem; }
  .dialog-media img,.dialog-media video { max-height:70dvh; }
  .dialog-close { top:1rem; left:1rem; }
  .dialog-copy { position:static; height:auto; overflow:visible; border:0; padding:1.5rem; }
  .dialog-body { padding:3rem 0; }
  .dialog-links { margin-top:2rem; }
}