:root {
  color-scheme: light;
  --paper: #f8f4f6;
  --ink: #606062;
  --soft: #f7dde8;
  --line: rgba(96, 96, 98, 0.18);
  --glow-x: 50%;
  --glow-y: 38%;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(247, 221, 232, 0.78), transparent 34rem),
    linear-gradient(135deg, #ffffff 0%, var(--paper) 48%, #eeeeef 100%);
  color: var(--ink);
  transition: background-position 160ms ease-out;
}

.page-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.mark {
  width: min(72vw, 21rem);
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}

.mark img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1.5rem 3rem rgba(96, 96, 98, 0.12));
}

.mark p {
  margin: 0;
  padding-top: 1rem;
  width: 100%;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: clamp(0.78rem, 1.8vw, 0.94rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #1d1d20;
    --ink: #e8e4e6;
    --line: rgba(232, 228, 230, 0.18);
  }

  body {
    background:
      radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(247, 221, 232, 0.18), transparent 32rem),
      linear-gradient(135deg, #121214 0%, #1d1d20 52%, #2b2b2e 100%);
  }

  .mark img {
    filter: drop-shadow(0 1.5rem 3rem rgba(0, 0, 0, 0.28));
  }
}