@font-face {
  font-family: BadtasteDisplay;
  src: url("./fonts/Anton-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: BadtasteMono;
  src: url("./fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-display: swap;
}

.bt-loader {
  --bt-background: #07080c;
  --bt-cream: #efe4c1;
  --bt-copper: #b37341;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 20px;
  background: var(--bt-background);
  color: var(--bt-cream);
  isolation: isolate;
}
.bt-loader[hidden] { display: none; }
.bt-loader *, .bt-loader *::before { box-sizing: border-box; }
.bt-loader__panel { width: min(920px, 48vw); max-width: 100%; }
.bt-loader__title {
  margin: 0 0 clamp(16px, 1.56vw, 30px);
  font: 400 clamp(24px, 3.125vw, 60px)/1.05 BadtasteDisplay, Impact, sans-serif;
  text-align: center;
  white-space: nowrap;
}
.bt-loader__title span { color: var(--bt-copper); }
.bt-loader__track {
  height: clamp(15px, 1.77vw, 34px);
  border: 2px solid var(--bt-cream);
  padding: 3px;
}
.bt-loader__fill {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bt-copper);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms linear;
}
.bt-loader__fill::before {
  position: absolute;
  inset: 0 0 0 auto;
  width: 7px;
  background: var(--bt-cream);
  content: "";
}
.bt-loader__status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(20px, 2.29vw, 44px) clamp(8px, 1.46vw, 28px) 0;
  font: 400 clamp(10px, 1.40625vw, 27px)/1.3 BadtasteMono, monospace;
  letter-spacing: 0;
}
.bt-loader__message { min-width: 0; overflow-wrap: anywhere; }
.bt-loader__percent { flex: none; font-variant-numeric: tabular-nums; }
.bt-loader[data-state="error"] .bt-loader__track { border-color: var(--bt-copper); }
.bt-loader[data-state="error"] .bt-loader__message { color: var(--bt-copper); }
@media (max-width: 760px) {
  .bt-loader__panel { width: 100%; }
  .bt-loader__title { font-size: clamp(24px, 5vw, 38px); }
  .bt-loader__status { font-size: clamp(10px, 2.3vw, 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .bt-loader__fill { transition: none; }
}
.bt-loader__logo{display:block;margin:0 auto;height:clamp(110px,34vh,320px);width:auto;max-width:100%}