body:has(> df-root > .itp-boot-shell) {
  margin: var(--space-0);
  background: var(--colour-surface-neutral-subtle-default);
  color: var(--colour-text-primary);
  font-family: var(--typography-body-regular-font-family);
}

.itp-boot-shell {
  display: grid;
  box-sizing: border-box;
  min-block-size: 100dvh;
  place-items: center;
  padding: clamp(var(--space-300), 5vw, var(--space-800));
  background: var(--colour-surface-neutral-subtle-default);
}

.itp-boot-shell__card {
  box-sizing: border-box;
  inline-size: fit-content;
  max-inline-size: 100%;
  padding: clamp(var(--space-300), 5vw, var(--space-500));
  border: var(--border-width-hairline) solid var(--colour-border-tertiary);
  border-radius: var(--border-radius-150);
  background: var(--colour-surface-base);
  box-shadow: var(--elevation-level-2);
  text-align: center;
}

.itp-boot-shell__brand,
.itp-boot-shell__heading,
.itp-boot-shell__description {
  margin: 0;
}

.itp-boot-shell__brand {
  color: var(--colour-text-accent-default);
  font-family: var(--typography-label-small-font-family);
  font-size: var(--typography-label-small-font-size);
  font-weight: var(--typography-label-small-font-weight);
  text-transform: var(--typography-label-small-text-case);
}

.itp-boot-shell__heading {
  margin-block-start: var(--space-200);
  font-family: var(--typography-title-regular-font-family);
  font-size: var(--typography-title-regular-font-size);
  font-weight: var(--typography-title-regular-font-weight);
  line-height: var(--typography-title-regular-line-height);
}

.itp-boot-shell__description {
  margin-block-start: var(--space-150);
  color: var(--colour-text-secondary);
  font-family: var(--typography-body-regular-font-family);
  font-size: var(--typography-body-regular-font-size);
  font-weight: var(--typography-body-regular-font-weight);
  line-height: var(--typography-body-regular-line-height);
}

.itp-boot-shell__progress {
  display: block;
  block-size: var(--border-width-thick);
  margin-block-start: var(--space-300);
  overflow: hidden;
  border-radius: var(--border-radius-full);
  background: var(--colour-surface-neutral-default);
}

.itp-boot-shell__progress::before {
  display: block;
  inline-size: 40%;
  block-size: 100%;
  background: var(--colour-surface-accent-default);
  content: "";
  transform: translateX(-125%);
  animation: itp-boot-shell-progress 1.2s ease-in-out infinite;
}

@keyframes itp-boot-shell-progress {
  to {
    transform: translateX(310%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .itp-boot-shell__progress::before {
    inline-size: 100%;
    transform: none;
    animation: none;
  }
}

@media (forced-colors: active) {
  body:has(> df-root > .itp-boot-shell),
  .itp-boot-shell {
    background: var(--itp-forced-colour-canvas, Canvas);
    color: var(--itp-forced-colour-text, CanvasText);
  }

  .itp-boot-shell__card {
    border-color: var(--itp-forced-colour-text, CanvasText);
    background: var(--itp-forced-colour-canvas, Canvas);
    box-shadow: none;
  }

  .itp-boot-shell__brand,
  .itp-boot-shell__description {
    color: var(--itp-forced-colour-text, CanvasText);
  }

  .itp-boot-shell__progress {
    background: var(--itp-forced-colour-text, CanvasText);
  }

  .itp-boot-shell__progress::before {
    background: var(--itp-forced-colour-highlight, Highlight);
  }
}