.setup-pending {
  overflow: hidden;
}
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background: #17120d;
  color: #f3eadb;
  text-align: center;
  overflow: hidden;
}
.loading-screen[hidden] {
  display: none;
}
.loading-screen::before,
.loading-screen::after {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid #3a2f24;
  pointer-events: none;
}
.loading-screen::after {
  inset: 29px;
  border-color: #2a2118;
}
.splash-content {
  width: min(100%, 380px);
  animation: word-reveal 280ms var(--ease-out) both;
}
.splash-book {
  width: 180px;
  margin: 0 auto 34px;
}
.splash-eyebrow {
  color: #cdbfab;
  font:
    11px ui-monospace,
    monospace;
  letter-spacing: 0.28em;
  margin: 0 0 15px;
}
.splash-content h1 {
  font: 500 clamp(42px, 8vw, 60px)/1.1 var(--display);
  letter-spacing: -2px;
  margin: 0;
}
.splash-rule {
  width: 72px;
  height: 2px;
  margin: 32px auto 20px;
  overflow: hidden;
  background: #3a2f24;
}
.splash-rule span {
  display: block;
  width: 100%;
  height: 100%;
  background: #ddb265;
  animation: word-loading 1.8s linear infinite;
}
.splash-status {
  min-height: 22px;
  color: #cdbfab;
  font-size: 12px;
  margin: 0;
}
.splash-footer {
  position: absolute;
  bottom: 52px;
  color: #a5957f;
  font:
    10px ui-monospace,
    monospace;
  letter-spacing: 0.07em;
  margin: 0;
}
.word-book {
  position: relative;
  width: 100%;
  aspect-ratio: 1.6;
  perspective: 600px;
  transform: rotate(-7deg);
}
.word-book-cover {
  position: absolute;
  inset: 17% 1% 6%;
  border: 1px solid #b9874c;
  border-bottom: 4px solid #b9874c;
  border-radius: 5px 5px 10px 10px;
  transform: rotateX(22deg);
}
.word-book-page {
  position: absolute;
  top: 10%;
  width: 47%;
  height: 76%;
  border: 1px solid #d7bf91;
  border-radius: 4px 8px 5px 4px;
  background: #ecdfc6;
  transform-origin: left center;
  backface-visibility: hidden;
}
.word-book-page::after {
  content: "";
  position: absolute;
  inset: 22% 17%;
  background: repeating-linear-gradient(
    to bottom,
    #b5a385 0 1px,
    transparent 1px 9px
  );
  opacity: 0.7;
}
.word-book-left {
  right: 50%;
  transform-origin: right center;
  transform: rotateY(18deg) skewY(6deg);
  border-radius: 8px 4px 4px 5px;
}
.word-book-right {
  left: 50%;
  transform: rotateY(-18deg) skewY(-6deg);
}
.word-book-turn {
  left: 50%;
  animation: word-page 2.8s var(--ease-out) infinite;
}
.word-book-spine {
  position: absolute;
  width: 1px;
  height: 76%;
  left: 50%;
  top: 13%;
  background: #a38c66;
}
.setup-pending #onboarding::backdrop {
  background: transparent;
}
.startup-reveal #onboarding[open]::backdrop {
  animation: word-paper 200ms var(--ease-out) both;
}
.startup-reveal #onboarding[open] .onboarding-brand,
.startup-reveal #onboarding[open] .onboarding-intro,
.startup-reveal #onboarding[open] .setup-panel,
.startup-reveal #onboarding[open] .onboarding-footer {
  animation: word-reveal 240ms var(--ease-out) both;
}
.startup-reveal #onboarding[open] .onboarding-intro {
  animation-delay: 40ms;
}
.startup-reveal #onboarding[open] .setup-panel {
  animation-delay: 80ms;
}
.startup-reveal #onboarding[open] .onboarding-footer {
  animation-delay: 120ms;
}
.startup-reveal:not(:has(#onboarding[open])) .desk-header,
.startup-reveal:not(:has(#onboarding[open])) .desk-grid {
  animation: word-reveal 240ms var(--ease-out) both;
}
.startup-reveal:not(:has(#onboarding[open])) .desk-grid {
  animation-delay: 50ms;
}
.setup-download-art {
  position: relative;
  width: 112px;
  margin: 0 0 28px;
}
.setup-complete-mark {
  position: absolute;
  right: -8px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--sage);
  color: #fffdfb;
  opacity: 0;
  transform: translateY(5px) scale(0.95);
  transition:
    opacity 200ms var(--ease-out),
    transform 240ms var(--ease-out);
}
#onboarding[data-phase="ready"] .setup-complete-mark {
  opacity: 1;
  transform: none;
}
#onboarding[data-phase="ready"] .word-book-turn,
#onboarding[data-phase="error"] .word-book-turn {
  animation: none;
  transform: rotateY(-18deg) skewY(-6deg);
}
#onboarding[data-phase="downloading"] #setup-downloads,
#onboarding[data-phase="ready"] #setup-open {
  animation: word-reveal 240ms var(--ease-out) both;
}
.setup-primary {
  transition:
    background 160ms ease,
    transform 120ms var(--ease-out);
}
.setup-primary:active:not(:disabled) {
  transform: scale(0.985);
}
.setup-primary > span {
  transition: transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .setup-primary:hover:not(:disabled) > span {
    transform: translateX(4px);
  }
}
@keyframes word-page {
  0%,
  12% {
    transform: rotateY(-18deg) skewY(-6deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  72%,
  100% {
    transform: rotateY(-162deg) skewY(6deg);
    opacity: 0;
  }
}
@keyframes word-loading {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes word-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes word-paper {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 600px) {
  .loading-screen::before {
    inset: 14px;
  }
  .loading-screen::after {
    inset: 19px;
  }
  .splash-footer {
    bottom: 36px;
  }
  .splash-book {
    width: 150px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .loading-screen .word-book,
  .setup-download-art .word-book {
    transform: none;
  }
  .word-book-turn {
    display: none;
  }
  .splash-rule span {
    animation: none;
  }
  .splash-content,
  .startup-reveal #onboarding[open] .onboarding-brand,
  .startup-reveal #onboarding[open] .onboarding-intro,
  .startup-reveal #onboarding[open] .setup-panel,
  .startup-reveal #onboarding[open] .onboarding-footer,
  .startup-reveal:not(:has(#onboarding[open])) .desk-header,
  .startup-reveal:not(:has(#onboarding[open])) .desk-grid,
  #onboarding[data-phase="downloading"] #setup-downloads,
  #onboarding[data-phase="ready"] #setup-open {
    animation: word-paper 120ms var(--ease-out) both;
  }
  .setup-complete-mark,
  .setup-primary,
  .setup-primary > span,
  .setup-download-art .word-book,
  .setup-progress-track > span {
    transition: none;
  }
  .setup-complete-mark {
    transform: none;
  }
  .setup-primary:hover:not(:disabled) > span,
  .setup-primary:active:not(:disabled) {
    transform: none;
  }
}