.screen-seed { position: absolute; left: 50%; top: 45%; display: grid; place-items: center; width: 24cqw; height: 24cqw; border-radius: 6cqw; color: var(--color-accent); background: #eaf2ff; transform: translate(-50%, -50%); opacity: 0; }
.screen-seed .app-icon { width: 12cqw; height: 12cqw; }
.motion-wireframe { position: absolute; inset: 18cqw 5cqw 20cqw; width: 90cqw; height: calc(100% - 38cqw); fill: none; stroke: #88b4ff; stroke-width: .6; opacity: 0; pointer-events: none; }
.motion-wireframe rect { stroke-dasharray: 1; }
.mobile-story li { transition: color .15s, border-color .15s; }
.mobile-story li:last-child { border-color: #acc9ff; color: #526079; }
.mobile-story li.current { border-color: var(--color-accent); color: var(--color-accent); }
.mobile-story li.done { color: #46546a; }
.mobile-motion-player { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .625rem; margin-top: 1.5rem; min-height: 2.75rem; }
.mobile-motion-player[hidden] { display: none; }
.mobile-motion-player progress { width: 3.75rem; height: 2px; appearance: none; border: none; color: var(--color-accent); background: #e1eafa; }
.mobile-motion-player progress::-webkit-progress-bar { background: #e1eafa; }
.mobile-motion-player progress::-webkit-progress-value { background: var(--color-accent); }
.mobile-motion-player progress::-moz-progress-bar { background: var(--color-accent); }
#mobile-status { margin-right: auto; color: #46546a; font-size: .75rem; line-height: 1.5; }
.mobile-motion-player button { min-height: 2.75rem; max-width: 100%; padding: .5rem .875rem; border: 1px solid var(--color-rule); border-radius: .375rem; background: #fff; color: var(--color-accent); font: inherit; font-size: .8125rem; cursor: pointer; }
.mobile-motion-player button:hover:not(:disabled) { border-color: var(--color-accent); background: #f0f6ff; }
.mobile-motion-player button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.mobile-motion-player button:disabled { color: #6a7890; cursor: default; }
@media (width < 40rem) {
  #mobile-status { width: 100%; }
  .mobile-motion-player { justify-content: flex-start; }
  .mobile-motion-player progress { margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-story li { transition: none; }
}
