/* Shared by the pre-Angular startup screen and routed status pages. */
.mh-status {
  --status-blue: #326aff; --status-ink: #1d1d1f; --status-muted: #606775;
  box-sizing: border-box; min-height: 100svh; width: 100%; color-scheme: light;
  background: radial-gradient(ellipse at 50% 32%, #edf2ff 0, #f8faff 42%, #fff 72%);
  color: var(--status-ink); font: 400 15px/1.6 Inter, system-ui, sans-serif;
  display: flex; flex-direction: column; position: relative; isolation: isolate;
}
.mh-status *, .mh-status *::before, .mh-status *::after { box-sizing: border-box; }
.mh-status [hidden] { display: none !important; }
.mh-status a { text-decoration: none; }
.mh-status-header { width: min(100%, 1200px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 20px max(24px, env(safe-area-inset-left)); }
.mh-status-wordmark { display: block; width: 140px; max-width: 100%; height: auto; }
.mh-status-stage { flex: 1; display: grid; place-items: center; padding: 28px 24px 48px; }
.mh-status-card { position: relative; width: min(100%, 580px); padding: clamp(28px, 5vw, 52px); text-align: center; border: 1px solid #dce4f4; border-radius: 28px; background: #ffffffed; box-shadow: 0 28px 80px -50px #3766c970, 0 2px 4px #1d1d1f04; }
.mh-status-eyebrow { margin: 28px 0 12px; color: #2b4ed9; font: 600 11px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.mh-status-eyebrow::before { content: '[ '; color: #6176b8; }
.mh-status-eyebrow::after { content: ' ]'; color: #6176b8; }
.mh-status h1 { font-family: 'Space Grotesk', Inter, system-ui, sans-serif; font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -.045em; line-height: 1.15; margin: 0; text-wrap: balance; }
.mh-status-copy { max-width: 390px; margin: 18px auto 0; color: var(--status-muted); line-height: 1.7; text-wrap: pretty; }
.mh-status-art { display: flex; align-items: center; justify-content: center; gap: 14px; height: 136px; color: #326aff; }
.mh-status-emblem { flex: none; position: relative; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 26px; background: linear-gradient(145deg, #7098ff, #326aff); box-shadow: 0 15px 32px -12px #326aff70; }
.mh-status-emblem::before { content: ''; position: absolute; inset: -12px; border: 1px dashed #b9ccff; border-radius: 36px; }
.mh-status-emblem img { width: 48px; height: 48px; object-fit: contain; }
.mh-status-symbol { width: 45px; height: 45px; color: white; }
.mh-status-loading .mh-status-emblem::before { border: 2px solid #e2eaff; border-top-color: #326aff; animation: mh-status-spin 1.8s linear infinite; }
.mh-status-track { height: 4px; width: 100px; margin: 28px auto 0; overflow: hidden; background: #e9efff; border-radius: 8px; }
.mh-status-track::after { content: ''; display: block; height: 100%; width: 42%; background: #326aff; border-radius: inherit; animation: mh-status-slide 1.7s ease-in-out infinite alternate; }
.mh-status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.mh-status-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 20px; border: 1px solid transparent; border-radius: 12px; background: var(--status-blue); color: #fff; font: 600 14px/1.4 Inter, system-ui, sans-serif; cursor: pointer; transition: background .15s, border-color .15s; }
.mh-status-button:hover { background: #2759de; }
.mh-status-button--secondary { border-color: #d4dbe7; background: #fff; color: #343d4e; }
.mh-status-button--secondary:hover { background: #f3f6fc; border-color: #9fb5e6; }
.mh-status-button svg { width: 17px; height: 17px; }
.mh-status a:focus-visible, .mh-status button:focus-visible { outline: 3px solid #326aff; outline-offset: 4px; }
.mh-status h1:focus { outline: none; }
.mh-status-footer { padding: 16px 24px max(24px, env(safe-area-inset-bottom)); display: flex; gap: 12px 24px; flex-wrap: wrap; justify-content: center; align-items: center; color: #606775; font-size: 12px; }
.mh-status-footer a { color: #46577a; text-decoration: underline; text-underline-offset: 3px; }
.mh-status-languages { display: flex; border: 1px solid #dce4f4; border-radius: 20px; padding: 3px; gap: 2px; }
.mh-status-languages button { font: 600 11px/1 system-ui, sans-serif; min-width: 32px; min-height: 32px; border: 0; border-radius: 16px; background: transparent; color: #606775; cursor: pointer; }
.mh-status-languages [aria-pressed="true"] { background: #326aff; color: #fff; }
.mh-status--not-found { background: #fff; }
.mh-status--not-found .mh-status-card { width: min(100%, 560px); padding: 24px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.mh-status--not-found .mh-status-art { height: auto; margin-bottom: 24px; }
.mh-status-code { color: #b5c9ff; font: 500 clamp(100px, 14vw, 156px)/1 'Space Grotesk', Inter, system-ui, sans-serif; letter-spacing: -.065em; padding-right: .065em; }
.mh-status--not-found h1 { font-size: clamp(25px, 4vw, 32px); font-weight: 600; letter-spacing: -.035em; }
.mh-status--not-found .mh-status-copy { max-width: 330px; font-size: 14px; margin-top: 14px; }
.mh-status--not-found .mh-status-actions { margin-top: 28px; gap: 8px; }
.mh-status--not-found .mh-status-button { border-radius: 9px; }
.mh-status--not-found .mh-status-button--secondary { border-color: transparent; background: transparent; }
.mh-status--not-found .mh-status-button--secondary:hover { color: #2b4ed9; text-decoration: underline; text-underline-offset: 4px; }
.mh-status--not-found .mh-status-languages { border-color: transparent; }
.mh-status--not-found .mh-status-languages [aria-pressed="true"] { background: #eef3ff; color: #2b4ed9; }
.mh-start { position: fixed; inset: 0; z-index: 10000; overflow-y: auto; background: #fff; }
.mh-start .mh-status-stage { padding: 32px 24px; }
.mh-start .mh-status-card { max-width: 380px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.mh-start .mh-status-art { height: auto; }
.mh-start .mh-status-emblem { width: 168px; height: auto; border-radius: 0; background: none; box-shadow: none; }
.mh-start .mh-status-emblem::before { display: none; animation: none; }
.mh-start .mh-status-emblem img { width: 100%; height: auto; }
.mh-start .mh-status-track { width: 64px; height: 2px; margin-top: 28px; }
.mh-start:not(.mh-start-attention) [role="status"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mh-start h1 { margin-top: 32px; font-size: 24px; letter-spacing: -.025em; }
.mh-start .mh-status-copy { margin-top: 12px; font-size: 14px; }
.mh-route-error { border: 0; padding: 0; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; background: #fff; }
.mh-route-error::backdrop { background: #fff; }
.mh-navigation-progress { position: fixed; z-index: 9999; inset: 0 0 auto; height: 3px; overflow: hidden; background: #e9efff; pointer-events: none; }
.mh-navigation-progress::after { content: ''; display: block; width: 32%; height: 100%; background: #326aff; animation: mh-status-slide 1.3s ease-in-out infinite alternate; }
@keyframes mh-status-spin { to { transform: rotate(360deg); } }
@keyframes mh-status-slide { from { transform: translateX(-30%); } to { transform: translateX(240%); } }
@media (max-width: 480px) {
  .mh-status-header { padding-inline: 18px; }.mh-status-wordmark { width: 124px; }
  .mh-status-stage { padding: 18px 16px 28px; }.mh-status-card { border-radius: 22px; padding: 30px 20px; }
  .mh-status-actions { flex-direction: column; }.mh-status-button { width: 100%; }
  .mh-status-art { height: 116px; gap: 12px; }.mh-status-emblem { width: 72px; height: 72px; border-radius: 22px; }
  .mh-status-emblem::before { inset: -8px; border-radius: 30px; }.mh-status-emblem img { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-status-loading .mh-status-emblem::before, .mh-status-track::after, .mh-navigation-progress::after { animation: none; }
  .mh-status-track::after, .mh-navigation-progress::after { width: 100%; opacity: .6; }
  .mh-status-button { transition: none; }
}