:root {
  --viewer-frame-edge: clamp(0.5rem, 1.25vw, 1.5rem);
  --viewer-frame-gap: clamp(1rem, 2.5vw, 3rem);
  --viewer-frame-backdrop: var(--backdrop-standard);
}

.viewer-frame-dialog {
  width: calc(100vw - var(--viewer-frame-gap));
  max-width: none;
  height: calc(100dvh - var(--viewer-frame-gap));
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--text);
}

.viewer-frame-dialog[data-viewer-size="workspace"] {
  width: min(103rem, calc(100vw - clamp(3rem, 9vw, 9rem)));
  height: min(61rem, calc(100dvh - clamp(2.5rem, 7vh, 5rem)));
}

.viewer-frame-dialog::backdrop {
  background: var(--viewer-frame-backdrop);
  backdrop-filter: var(--effect-blur-viewer-control);
}

.viewer-frame-overlay.viewer-frame-overlay {
  padding: var(--viewer-frame-edge);
  background: var(--viewer-frame-backdrop);
  backdrop-filter: var(--effect-blur-viewer-control);
}

.viewer-frame-dialog > .viewer-frame-surface,
.viewer-frame-overlay > .viewer-frame-surface {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-strong));
  border-radius: var(--radius-viewer-frame);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 97%, var(--viewer-accent-soft)), var(--surface)),
    var(--surface);
  box-shadow: 0 2rem 6rem var(--backdrop-soft);
}

.viewer-frame-header,
.viewer-frame-footer {
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--surface-strong) 92%, var(--viewer-accent-deep)),
    color-mix(in srgb, var(--surface) 95%, transparent));
  backdrop-filter: var(--effect-blur-viewer-header);
}

@media (max-width: 620px) {
  .viewer-frame-dialog,
  .viewer-frame-overlay {
    --viewer-frame-edge: 0.25rem;
    --viewer-frame-gap: 0.5rem;
  }

  .viewer-frame-dialog > .viewer-frame-surface,
  .viewer-frame-overlay > .viewer-frame-surface { border-radius: var(--radius-viewer-frame-mobile); }

  .viewer-frame-dialog {
    width: calc(100vw - max(0.25rem, var(--safe-area-inset-left)) - max(0.25rem, var(--safe-area-inset-right)));
    height: calc(100dvh - max(0.25rem, var(--safe-area-inset-top)) - max(0.25rem, var(--safe-area-inset-bottom)));
  }
  .viewer-frame-overlay.viewer-frame-overlay {
    padding: max(0.25rem, var(--safe-area-inset-top)) max(0.25rem, var(--safe-area-inset-right))
      max(0.25rem, var(--safe-area-inset-bottom)) max(0.25rem, var(--safe-area-inset-left));
  }

  .viewer-frame-dialog[data-viewer-size="workspace"] {
    width: calc(100vw - max(0.25rem, var(--safe-area-inset-left)) - max(0.25rem, var(--safe-area-inset-right)));
    height: calc(100dvh - max(0.25rem, var(--safe-area-inset-top)) - max(0.25rem, var(--safe-area-inset-bottom)));
  }
}