/* the boot announcement: one line at the top, typed in, held, gone */
#osboot { position: fixed; left: 50%; top: 12px; transform: translate(-50%, -8px); z-index: 60; display: inline-flex; align-items: center; gap: 10px; max-width: min(92vw, 1100px); padding: 9px 14px; border: 1px solid rgba(255, 250, 248, .16); border-radius: 4px; background: rgba(14, 15, 18, .78); backdrop-filter: blur(8px); font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); opacity: 0; transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#osboot.on { opacity: 1; transform: translate(-50%, 0); }
#osboot .dot { width: 5px; height: 5px; flex: none; background: var(--g); box-shadow: 0 0 10px var(--g); animation: osboot-blink 1.2s steps(1) infinite; }
@keyframes osboot-blink { 50% { opacity: .35; } }
#osboot .t::after { content: '▮'; margin-left: 2px; color: var(--bone-45); animation: osboot-blink .8s steps(1) infinite; }
#osboot:not(.on) .t::after { display: none; }
body.chart-open #osboot { display: none; }
@media (prefers-reduced-motion: reduce) { #osboot { transition: none; } #osboot .dot, #osboot .t::after { animation: none; } }
#osboot .kagi-slot { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }