.boot-screen {
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 35%,#2e1114 0,#090b0d 38%,#020303 78%);
  z-index:20000;
  color:#f1f4f5;
  font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
  overflow-y:auto;
  padding:24px 0
}
.boot-card {
  width:min(560px,88vw);
  padding:34px 38px;
  border-left:4px solid #f12632;
  background:#090c0ee8;
  box-shadow:0 30px 80px #000b
}
.brand-mark {
  display:flex;
  align-items:center;
  gap:14px
}
.brand-mark strong {
  font-size:58px;
  letter-spacing:-4px;
  font-style:italic
}
.brand-slash {
  display:inline-block;
  background:#f12632;
  transform:skewX(-28deg);
  width:76px;
  height:22px;
  box-shadow:34px 0 0 #f12632
}
.boot-card>p {
  margin:0 0 28px 3px;
  color:#b9c0c4;
  letter-spacing:6px;
  font-size:11px
}
.boot-status {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 20px;
  font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#9aa3a8
}
.boot-status b {
  color:#e9eeee
}
.boot-progress {
  height:4px;
  background:#22282c;
  margin:28px 0 20px;
  overflow:hidden
}
.boot-progress i {
  display:block;
  width:0;
  height:100%;
  background:#f12632;
  animation:bootload 1.6s ease forwards
}
@keyframes bootload {
  to {
    width:100%
  }
}
#enterSession {
  border:1px solid #ff4750;
  background:#761016;
  padding:12px 22px;
  font-weight:800;
  letter-spacing:1px;
  cursor:pointer
}
#enterSession:hover {
  background:#f12632
}
@media(prefers-reduced-motion:reduce) {
  .boot-progress i {
    animation:none;
    width:100%
  }
}
@media(max-width:400px) {
  .boot-card {
    padding:28px 22px
  }
  .brand-mark strong {
    font-size:48px
  }
  .brand-slash {
    width:56px;
    box-shadow:24px 0 0 #f12632
  }
  .boot-card>p {
    letter-spacing:3px;
    font-size:10px
  }
}