/* The startup component uses the same Foundation shell and local assets. */
.loading {
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
  position: relative;
  overflow: hidden;
  background: #111214;
  letter-spacing: normal;
}
.boot-screen {
  --boot-accent: #a84a50;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 28px;
  background: radial-gradient(ellipse at 50% 42%, #282025 0%, #111214 70%);
  transition: opacity 280ms ease;
}
.boot-isolated { --boot-accent: #6fddd6; }
.boot-splash { background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--boot-accent) 7%, #111214), #111214 70%); }
.splash-frame { width: min(660px, 100%); position: relative; text-align: center; }
.splash-channel { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid #ffffff12; color: #79767e; font: 7px/1.8 var(--mono); letter-spacing: 1.2px; }
.splash-channel > span:first-child { color: var(--boot-accent); }
.splash-identity { padding: 56px 0 39px; animation: splash-reveal 650ms ease-out both; }
.splash-seal { display: grid; place-items: center; width: 166px; height: 166px; margin: 0 auto 30px; position: relative; }
.splash-seal::before, .splash-seal::after { content: ""; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--boot-accent) 28%, transparent); border-radius: 50%; }
.splash-seal::after { inset: -8px; border-color: #ffffff08; }
.splash-seal img { width: 116px; height: 116px; filter: invert(.9); opacity: .92; }
.splash-mark { color: var(--boot-accent); font: 124px/1 Georgia, serif; padding-bottom: 10px; }
.splash-identity h1 { color: #e8e6e1; font: 500 27px/1.3 var(--sans); letter-spacing: 4.8px; margin: 0 0 14px; }
.splash-motto { color: #b2acb3; font: 9px/1.9 var(--mono); letter-spacing: 2.1px; margin: 0; }
.splash-divider { width: 108px; height: 1px; margin: 29px auto 22px; background: var(--boot-accent); opacity: .7; transform-origin: center; animation: splash-line 650ms 180ms ease-out both; }
.splash-network { color: #8e8993; font: 8px/1.9 var(--mono); letter-spacing: 1.3px; margin: 0; }
.splash-status { display: flex; justify-content: center; align-items: center; gap: 11px; color: var(--boot-accent); font: 8px/1.8 var(--mono); letter-spacing: 1.5px; }
.splash-signal { display: flex; align-items: end; gap: 3px; height: 11px; }
.splash-signal i { display: block; width: 2px; height: 5px; background: var(--boot-accent); animation: splash-link 900ms ease-in-out infinite alternate; }
.splash-signal i:nth-child(2) { height: 8px; animation-delay: 150ms; }.splash-signal i:nth-child(3) { height: 11px; animation-delay: 300ms; }
.splash-detail { color: #79767e; font: 9px/1.8 var(--mono); margin: 12px 0 0; }
.splash-initialise { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 42px; margin-top: 22px; padding: 11px 18px; border-color: color-mix(in srgb, var(--boot-accent) 75%, #414348); background: color-mix(in srgb, var(--boot-accent) 10%, #18191c); color: #e8e6e1; font: 11px/1.6 var(--mono); letter-spacing: .2px; }
.splash-initialise:hover { border-color: var(--boot-accent); background: color-mix(in srgb, var(--boot-accent) 20%, #18191c); color: #fff; }
.splash-initialise:focus-visible { outline: 2px solid #e8e6e1; outline-offset: 4px; }
.splash-initialise > span { color: var(--boot-accent); }
.splash-footer { border-top: 1px solid #ffffff12; margin-top: 39px; padding-top: 19px; color: #716a73; font: 7px/1.8 var(--mono); letter-spacing: 1.6px; }
.splash-handover .splash-frame { opacity: 0; transform: translateY(-5px); transition: opacity 220ms ease, transform 220ms ease; }
.boot-screen:not(.boot-shutdown) .boot-frame { animation: splash-reveal 280ms ease-out; }
.boot-still .splash-identity, .boot-still .splash-divider, .boot-still .splash-signal i, .boot-still .boot-frame { animation: none; }
@keyframes splash-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes splash-line { from { transform: scaleX(.2); opacity: 0; } to { transform: scaleX(1); opacity: .7; } }
@keyframes splash-link { from { opacity: .35; } to { opacity: .95; } }
.boot-screen.boot-exit { opacity: 0; }
.boot-shutdown .boot-scan::after { animation-direction: reverse; }
.boot-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 4px, #00000010 4px 5px);
  opacity: .55;
}
.boot-scan::after {
  content: "";
  position: absolute;
  inset: -20% 0 auto;
  height: 16%;
  background: linear-gradient(transparent, #a84a5008, transparent);
  animation: boot-scan 3.4s linear infinite;
}
.boot-frame { width: min(660px, 100%); position: relative; }
.boot-brand { display: flex; align-items: center; gap: 17px; padding-bottom: 25px; border-bottom: 1px solid #423239; }
.boot-brand img { width: 52px; height: 52px; filter: invert(.88); opacity: .9; }
.boot-brand > div { color: #e8e6e1; font: 13px var(--sans); letter-spacing: 2.2px; }
.boot-brand small { display: block; margin-top: 7px; color: #9b959b; font: 8px var(--mono); letter-spacing: 1.5px; }
.boot-node { margin-left: auto; color: #79767e; text-align: right; font: 8px/1.9 var(--mono); letter-spacing: 1px; }
.boot-heading { padding: 35px 0 28px; }
.boot-heading .eyebrow { color: #b17a80; font-size: 8px; letter-spacing: 1.6px; }
.boot-heading h1 { color: #e8e6e1; font: 500 32px/1.25 var(--sans); letter-spacing: -.9px; margin: 13px 0 10px; }
.boot-heading p { margin: 0; color: #939098; font: 11px/1.8 var(--mono); }
.boot-console { min-height: 238px; background: #101113bf; border: 1px solid #3a2d33; border-left: 2px solid #8b333b; padding: 17px 20px; }
.boot-console-label { display: flex; justify-content: space-between; gap: 12px; color: #77747e; font: 7px/1.6 var(--mono); letter-spacing: 1.4px; border-bottom: 1px solid #2c272d; padding-bottom: 11px; margin-bottom: 13px; }
.boot-console-label > span { color: #9f6970; }
.boot-line { display: grid; grid-template-columns: 53px minmax(0, 1fr) 22px; gap: 7px; padding: 4px 0; color: #a2a0a8; font: 10px/1.65 var(--mono); min-height: 25px; }
.boot-line > span:nth-child(2) { overflow-wrap: anywhere; }
.boot-line-active { color: #dfd6d9; }
.boot-line-code { color: #9c626c; }
.boot-line-result { color: #737b76; text-align: right; font-size: 8px; }
.boot-line-active .boot-line-result { color: #b4858b; }
.boot-cursor { margin-left: 4px; color: #bf7a83; animation: boot-cursor 1s steps(2, jump-none) infinite; }
.boot-progress-label { display: flex; justify-content: space-between; margin: 24px 0 10px; color: #949099; font: 8px var(--mono); letter-spacing: 1px; }
.boot-progress-label > span:last-child { color: #c38b94; }
.boot-progress { display: block; width: 100%; height: 3px; border: 0; appearance: none; accent-color: #a84a50; background: #35282e; }
.boot-progress::-webkit-progress-bar { background: #35282e; }
.boot-progress::-webkit-progress-value { background: #a84a50; transition: width 80ms linear; }
.boot-progress::-moz-progress-bar { background: #a84a50; }
.boot-phases { display: flex; justify-content: space-between; padding-top: 15px; color: #5e5b65; font: 7px var(--mono); letter-spacing: 1.4px; }
.boot-phases > span { display: flex; align-items: center; gap: 8px; }
.boot-phases i { width: 4px; height: 4px; background: #514650; border-radius: 50%; }
.boot-phases .boot-phase-active { color: #b6a4ac; }
.boot-phase-active i { background: #b3747f; box-shadow: 0 0 7px #a84a5050; }
.boot-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 34px; padding-top: 17px; border-top: 1px solid #2e262c; color: #716a73; font: 7px/1.8 var(--mono); letter-spacing: .7px; }
.boot-error { padding-top: 15px; color: #d2949b; font: 11px/1.8 var(--mono); }
.boot-error .button { margin-top: 8px; }
.boot-still, .boot-still .boot-progress::-webkit-progress-value { transition: none; }
.boot-still .boot-scan::after, .boot-still .boot-cursor { animation: none; }
@keyframes boot-scan { from { transform: translateY(0); } to { transform: translateY(780%); } }
@keyframes boot-cursor { 50% { opacity: 0; } }
@media (max-width: 600px) {
  .boot-screen { padding: 30px 20px; }
  .boot-brand { gap: 13px; padding-bottom: 21px; }
  .boot-brand img { width: 43px; height: 43px; }
  .boot-brand > div { font-size: 11px; letter-spacing: 1.5px; }
  .boot-brand small { font-size: 6px; }
  .boot-node { font-size: 6px; }
  .boot-heading { padding: 28px 0 22px; }
  .boot-heading h1 { font-size: 27px; }
  .boot-heading .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .boot-heading p { font-size: 9px; }
  .boot-console { padding: 14px; min-height: 255px; }
  .boot-console-label { font-size: 6px; letter-spacing: .8px; }
  .boot-line { grid-template-columns: 45px minmax(0, 1fr) 17px; font-size: 9px; gap: 4px; }
  .boot-footer { flex-direction: column; gap: 6px; margin-top: 26px; font-size: 6px; }
  .splash-channel { font-size: 6px; letter-spacing: .5px; gap: 10px; text-align: left; }.splash-channel > span:last-child { text-align: right; }
  .splash-identity { padding: 42px 0 29px; }
  .splash-seal { width: 132px; height: 132px; margin-bottom: 27px; }.splash-seal img { width: 91px; height: 91px; }.splash-mark { font-size: 101px; }
  .splash-identity h1 { font-size: 21px; letter-spacing: 2.6px; }.splash-motto { font-size: 7px; letter-spacing: 1.2px; }
  .splash-network { font-size: 7px; letter-spacing: .7px; }.splash-detail { font-size: 8px; }.splash-footer { font-size: 6px; margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .boot-screen, .boot-progress::-webkit-progress-value { transition: none; }
  .boot-scan::after, .boot-cursor { animation: none; }
  .splash-identity, .splash-divider, .splash-signal i, .boot-screen .boot-frame { animation: none; }
  .splash-handover .splash-frame { transition: none; }
}