/* Shared wait state: the UIless diamond, then the page fades in. */
.ready{
  position:fixed;
  inset:0;
  z-index:30;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:0;
  background:var(--paper, var(--bg));
  color:var(--muted);
  font:500 14px/1.4 var(--f-body, var(--font, "Space Grotesk", sans-serif));
}
.ready i{
  width:14px;
  height:14px;
  border-radius:2px;
  background:var(--filament, var(--accent));
  display:block;
  animation:uiless-ready 1.6s ease-in-out infinite;
}
.ready p{margin:0}
.ready-inline{
  position:static;
  inset:auto;
  z-index:auto;
  min-height:180px;
  background:transparent;
}
html[data-gate="open"] .ready-page,
html[data-gate="block"] .ready-page{display:none !important}
@keyframes uiless-ready{
  0%{transform:rotate(45deg) scale(1); opacity:1}
  50%{transform:rotate(90deg) scale(1.12); opacity:.62}
  100%{transform:rotate(135deg) scale(1); opacity:1}
}
@keyframes uiless-in{from{opacity:0} to{opacity:1}}
html[data-gate="open"] .page,
html[data-gate="open"] .tlp,
.shell.is-ready{animation:uiless-in .4s ease}
@media (prefers-reduced-motion:reduce){
  .ready i{animation:none; transform:rotate(45deg)}
  html[data-gate="open"] .page,
  html[data-gate="open"] .tlp,
  .shell.is-ready{animation:none}
}