/* Shared by the static boot screen and real WebSocket connection states. */
.lc-startup {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    background: #0a0a0a;
    color: #eee;
    text-align: center;
    isolation: isolate;
}
.lc-startup__content { width: min(100%, 360px); }
.lc-startup__mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 176px;
    height: 176px;
    margin: 0 auto 28px;
}
.lc-startup__mark::before,
.lc-startup__orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid #ffffff1a;
    content: "";
    pointer-events: none;
}
.lc-startup__mark::before {
    inset: 12px;
    box-shadow: 0 0 44px #0052fb14;
    animation: lc-breathe 3s ease-in-out infinite;
}
.lc-startup__orbit {
    border-top-color: #739cdb;
    border-right-color: #ffffff36;
    animation: lc-orbit 4s linear infinite;
}
.lc-startup__mark img { display: block; width: 112px; height: 112px; object-fit: contain; }
.lc-startup__brand { margin: 0 0 20px; font-size: 1.45rem; font-weight: 600; letter-spacing: .02em; }
.lc-startup__status { min-height: 1.6em; margin: 0; font-size: .95rem; line-height: 1.6; }
.lc-startup__detail { min-height: 3.2em; margin: 10px 0 0; color: #aaa; font-size: .8rem; line-height: 1.6; text-wrap: pretty; }
.lc-startup__retry { margin-top: 22px; padding: 11px 24px; border: 1px solid #ffffff40; border-radius: 8px; background: #191919; color: #fff; font: inherit; cursor: pointer; }
.lc-startup__retry[hidden] { display: none; }
.lc-startup__retry:hover { background: #252525; }
.lc-startup__retry:focus-visible { outline: 2px solid #9cc5ff; outline-offset: 4px; }
.lc-startup[data-failed="true"] .lc-startup__orbit,
.lc-startup[data-failed="true"] .lc-startup__mark::before { animation: none; }
.lc-startup[data-failed="true"] .lc-startup__orbit { border-top-color: #d2a77a; }
@keyframes lc-orbit { to { transform: rotate(360deg); } }
@keyframes lc-breathe { 50% { transform: scale(.97); opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .lc-startup *, .lc-startup *::before { animation: none !important; transition: none !important; }
}
@media (max-height: 420px) {
    .lc-startup { padding: 16px; overflow-y: auto; }
    .lc-startup__mark { width: 120px; height: 120px; margin-bottom: 16px; }
    .lc-startup__mark img { width: 80px; height: 80px; }
    .lc-startup__brand { margin-bottom: 12px; }
}