body.public-presentation {
  --public-presentation-background: var(--color-bg, var(--color-paper, #fafafa));
  --public-presentation-mark-size: 4rem;
}

:root[data-initial-presentation="loading"] body.public-presentation {
  overflow: hidden;
}

:root[data-initial-presentation="loading"] body.public-presentation
  > :not(script):not(.font-load-error) {
  visibility: hidden;
}

body.public-presentation::before,
body.public-presentation::after {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
}

body.public-presentation::before {
  content: "";
  inset: 0;
  background: var(--public-presentation-background);
}

body.public-presentation::after {
  content: "";
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--public-presentation-mark-size);
  block-size: var(--public-presentation-mark-size);
  background: url("/assets/app-icon-64.png") center / contain no-repeat;
  translate: -50% -50%;
  animation: public-presentation-pulse 900ms ease-in-out infinite alternate;
}

:root[data-initial-presentation="ready"] body.public-presentation::before,
:root[data-initial-presentation="ready"] body.public-presentation::after,
:root[data-font-status="error"] body.public-presentation::before,
:root[data-font-status="error"] body.public-presentation::after {
  display: none;
}

body.public-presentation > .font-load-error {
  display: none;
}

:root[data-initial-presentation="loading"] body.public-presentation.has-screen-loading > #billing-page {
  visibility: visible;
}

body.public-presentation.has-screen-loading::before,
body.public-presentation.has-screen-loading::after {
  display: none;
}

:root[data-font-status="error"] body.public-presentation
  > :not(script):not(.font-load-error) {
  display: none !important;
}

:root[data-font-status="error"] body.public-presentation > .font-load-error {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 2rem;
  color: var(--color-text, var(--color-ink, #171717));
  background: var(--public-presentation-background);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
}

body.public-presentation.app-loading--error-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 2rem;
  color: var(--color-ink, #171717);
  background: var(--public-presentation-background);
  font-family: var(--font-body);
}

body.public-presentation.app-loading--error-screen .app-error-screen {
  width: min(100%, 26.25rem);
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding: 2rem;
  border: 0.0625rem solid var(--color-rule, #e5e5e5);
  border-radius: var(--radius-surface, 1.25rem);
  background: var(--color-paper, #fafafa);
  box-shadow: var(--shadow-surface, 0 1.5rem 4rem rgba(23, 23, 23, 0.08));
}

body.public-presentation.app-loading--error-screen :is(
  .app-error-screen__title,
  .app-error-screen__message,
  .app-error-screen__reference
) { margin: 0; }

body.public-presentation.app-loading--error-screen .app-error-screen__title {
  color: var(--color-ink, #171717);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 800;
  text-wrap: balance;
}

body.public-presentation.app-loading--error-screen .app-error-screen__message {
  color: var(--color-ink-2, #666);
  font-size: 0.875rem;
  line-height: 1.6;
}

body.public-presentation.app-loading--error-screen .app-error-screen__reference {
  color: var(--color-muted, #777);
  font-size: 0.75rem;
  line-height: 1.2;
}

body.public-presentation.app-loading--error-screen .app-error-screen__retry {
  min-width: 7rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  border: 0.0625rem solid var(--color-accent, #0067ff);
  border-radius: var(--radius-control, 0.75rem);
  color: var(--color-accent-ink, #fff);
  background: var(--color-accent, #0067ff);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

body.public-presentation.app-loading--error-screen .app-error-screen__retry:focus-visible {
  outline: 0.125rem solid var(--color-focus, #0067ff);
  outline-offset: 0.125rem;
}

@keyframes public-presentation-pulse {
  from { opacity: 0.42; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.public-presentation::after { animation: none; }
}