.page {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  min-height: 100svh;
  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto;
  gap: clamp(10px, 2.4vh, 24px);
  padding:
    calc(env(safe-area-inset-top) + clamp(10px, 2.4vh, 22px))
    var(--pad-page-x)
    calc(env(safe-area-inset-bottom) + clamp(10px, 2vh, 18px));
  max-width: 520px;
  margin-inline: auto;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  animation: topbarFadeIn 0.6s var(--ease-out) backwards;
}

@keyframes topbarFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topbar__mark {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(255, 122, 45, 0.4));
  animation: markPulse 4s ease-in-out infinite;
}

@keyframes markPulse {
  0%, 100% { filter: drop-shadow(0 2px 6px rgba(255, 122, 45, 0.4)); }
  50%      { filter: drop-shadow(0 2px 12px rgba(255, 178, 120, 0.7)); }
}

.topbar__name {
  font-weight: 800;
  font-size: var(--text-md);
  letter-spacing: 0.06em;
  color: var(--ink);
}

.footer {
  display: flex;
  justify-content: center;
  padding-top: 4px;
  animation: footerFadeIn 0.6s var(--ease-out) 1.2s backwards;
}

@keyframes footerFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.footer__copy {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
}