@keyframes fade-in { 0% { opacity: 0; } to { opacity: 1; } } .teleprompter { position: relative; overflow: visible; } .teleprompter-inner { flex-wrap: wrap; align-content: flex-start; display: flex; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .teleprompter-word { opacity: 0; white-space: pre; animation: fade-in var(--fade, 0.5s) cubic-bezier(0.37, 0.55, 0.86, 0.88) forwards; } @keyframes dot-fade { 0%, to { opacity: 0.5; } 50% { opacity: 1; } } .animate-dot-fade { animation: 1s ease-in-out infinite dot-fade; } .gxcrJW_frostedContainer { width: 100%; position: relative; overflow: hidden; } .gxcrJW_blurStack { pointer-events: none; z-index: 5; height: 5rem; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .gxcrJW_blur { --frost: color-mix(in srgb, var(--bg-tertiary) 60%, transparent); background: linear-gradient(to bottom, var(--frost) 0%, transparent var(--gradient-end, 60%)); height: 100%; -webkit-backdrop-filter: blur(var(--blur, 0px)); opacity: var(--alpha, 0.4); will-change: backdrop-filter, opacity; border-top-left-radius: 8px; border-top-right-radius: 8px; position: absolute; top: 0; bottom: auto; left: 0; right: 0; transform: translateZ(0); -webkit-mask-image: linear-gradient(#000 60%, #0000 100%); mask-image: linear-gradient(#000 60%, #0000 100%); } .gxcrJW_layer0 { --blur: 0.5px; --alpha: 0.65; --gradient-end: 25%; } .gxcrJW_layer1 { --blur: 2px; --alpha: 0.5; --gradient-end: 35%; } .gxcrJW_layer2 { --blur: 6px; --alpha: 0.38; --gradient-end: 50%; } .gxcrJW_layer3 { --blur: 16px; --alpha: 0.28; --gradient-end: 65%; } .gxcrJW_layer4 { --blur: 32px; --alpha: 0.18; --gradient-end: 80%; } .gxcrJW_layer5 { --blur: 64px; --alpha: 0.1; --gradient-end: 95%; }