:root {
  --bootstrap-bg: #f3f7ee;
  --bootstrap-card-bg: #ffffff;
  --bootstrap-text: #1c2b20;
  --bootstrap-muted: #53605a;
  --bootstrap-accent: #315d3a;
  --bootstrap-accent-strong: #25462c;
  --bootstrap-border: #d6dfd3;
  --bootstrap-error: #8b1e1e;
  --bootstrap-shadow: 0 1rem 3rem rgb(29 52 36 / 18%);
}

#bootstrap-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  color: var(--bootstrap-text);
  background:
    radial-gradient(circle at 20% 10%, rgb(135 185 112 / 32%), transparent 34rem),
    radial-gradient(circle at 85% 90%, rgb(230 198 116 / 25%), transparent 28rem),
    var(--bootstrap-bg);
}

#bootstrap-screen[hidden] {
  display: none;
}

#bootstrap-screen > section {
  width: min(100%, 34rem);
  padding: clamp(1.25rem, 5vw, 2rem);
  border: 1px solid var(--bootstrap-border);
  border-radius: 1.5rem;
  box-shadow: var(--bootstrap-shadow);
  background: var(--bootstrap-card-bg);
}

#bootstrap-screen [aria-hidden="true"] {
  display: inline-block;
  margin-bottom: .25rem;
  font-size: 2rem;
}

#bootstrap-screen h1 {
  margin: 0 0 .5rem;
  font-size: clamp(1.8rem, 8vw, 2.5rem);
  line-height: 1.05;
}

#bootstrap-screen p {
  margin: .65rem 0;
  color: var(--bootstrap-muted);
}

#bootstrap-screen .privacy-summary {
  display: grid;
  gap: .75rem;
  margin: 1rem 0;
  padding: .85rem;
  border: 1px solid var(--bootstrap-border);
  border-radius: 1rem;
  background: #f9fbf6;
}

#bootstrap-screen .privacy-summary > p {
  margin: 0;
}

#bootstrap-screen .privacy-summary > .switch-row.switch-disabled {
  display: none;
}

#bootstrap-screen progress {
  width: 100%;
  height: .9rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #dce7d8;
}

#bootstrap-screen progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #dce7d8;
}

#bootstrap-screen progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--bootstrap-accent);
}

#bootstrap-screen progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--bootstrap-accent);
}

#bootstrap-steps {
  display: grid;
  gap: .35rem;
  margin: 1rem 0;
  padding-left: 1.4rem;
  color: var(--bootstrap-muted);
}

#bootstrap-steps li[data-state="done"] {
  color: var(--bootstrap-accent-strong);
}

#bootstrap-steps li[data-state="active"] {
  font-weight: 700;
  color: var(--bootstrap-text);
}

#bootstrap-error {
  color: var(--bootstrap-error);
  font-weight: 700;
}

#bootstrap-retry,
#bootstrap-enter {
  width: 100%;
  min-height: 3rem;
  margin-top: .75rem;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: var(--bootstrap-accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

#bootstrap-retry:hover,
#bootstrap-enter:hover,
#bootstrap-retry:focus-visible,
#bootstrap-enter:focus-visible {
  background: var(--bootstrap-accent-strong);
}

.bootstrap-ready {
  font-weight: 700;
  color: var(--bootstrap-accent-strong);
}

.storage-cleanup-status {
  min-height: 1.25rem;
  font-size: .95rem;
}