.update-journey {
  --journey-gold: #d9b56b;
  position: fixed; inset: 0; z-index: 30000; isolation: isolate; box-sizing: border-box;
  display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain;
  padding: clamp(24px, 4vw, 52px); color: #e7dfce; background: #0c0d0d;
  font: 14px/1.5 'Segoe UI', Arial, sans-serif; cursor: default; outline: none; pointer-events: auto;
  opacity: 1; transition: opacity 450ms ease, visibility 450ms;
}
.update-journey *, .update-journey *::before, .update-journey *::after { box-sizing: border-box; }
.update-journey [hidden] { display: none; }
.update-journey::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 35%, #a887431a 0%, transparent 53%),
    radial-gradient(ellipse at 50% 110%, #3949481d, transparent 60%), linear-gradient(125deg, #14130f 0%, #0b0d0e 55%, #0f1110);
}
.update-journey::after {
  content: ''; position: fixed; inset: 0; z-index: -1; opacity: .2; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, #0003 4px);
}
.update-journey__edge { position: fixed; inset: 13px; border: 1px solid #b08c3b25; pointer-events: none; }
.update-journey__edge::before, .update-journey__edge::after {
  content: ''; position: absolute; width: 24px; height: 24px; border: solid #b8954c8c;
}
.update-journey__edge::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.update-journey__edge::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.update-journey__masthead { display: flex; align-items: center; gap: 20px; width: 100%; color: #9c916d; font-size: 10px; letter-spacing: .21em; text-transform: uppercase; }
.update-journey__masthead b { color: #ddc184; font-weight: 500; }
.update-journey__masthead i { flex: 1; height: 1px; background: linear-gradient(90deg, #b59b544a, #b59b5410); }
.update-journey__masthead > :last-child { letter-spacing: .16em; }
.update-journey__content { width: min(100%, 680px); margin: auto; padding: 22px 0 32px; text-align: center; }
.update-journey__emblem { position: relative; display: grid; place-items: center; width: 282px; height: 282px; margin: 0 auto 18px; }
.update-journey .update-journey__emblem > img {
  position: relative; display: block; width: 200px; height: 200px; min-width: 0; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 0 20px #cba65c20); animation: journey-emblem-breathe 4.4s ease-in-out infinite;
}
.update-journey__halo { position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle, #e5b56017, #bb92490a 37%, transparent 68%); animation: journey-halo 4.4s ease-in-out infinite; }
.update-journey__orbit { position: absolute; inset: 17px; border: 1px solid #c1a3622a; border-radius: 50%; }
.update-journey__orbit::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; background: conic-gradient(from 0deg, transparent 45%, #c9a35308 70%, #ffe0a7cc 98%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); animation: journey-orbit 6s linear infinite;
}
.update-journey__orbit::after { content: ''; position: absolute; width: 3px; height: 3px; top: -2px; left: calc(50% - 1px); background: #eac87c; box-shadow: 0 0 10px #e9bd69b0; }
.update-journey__orbit--inner { inset: 31px; border-style: dashed; border-color: #c1a36219; transform: rotate(25deg); }
.update-journey__orbit--inner::before { animation-duration: 10s; animation-direction: reverse; opacity: .6; }
.update-journey__orbit--inner::after { display: none; }
.update-journey__star { position: absolute; width: 5px; height: 5px; background: #d6b879; transform: rotate(45deg); box-shadow: 0 0 16px #e6c57e55; }
.update-journey__star--north { top: 0; }
.update-journey__star--south { bottom: 0; opacity: .55; }
.update-journey__eyebrow { color: #bda269; margin: 0 0 12px; font-size: 9px; font-weight: 500; letter-spacing: .36em; }
.update-journey h1 { margin: 0; color: #ecdfbf; font: 400 clamp(28px, 3.4vw, 43px)/1.2 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; text-wrap: balance; }
.update-journey__status { margin-top: 27px; min-height: 81px; }
.update-journey__status h2 { margin: 0 0 9px; color: #ceb784; font: 400 14px/1.5 'Segoe UI', Arial, sans-serif; }
.update-journey__status p { margin: 0 auto; max-width: 470px; color: #989b94; font-size: 12px; font-weight: 400; line-height: 1.7; text-wrap: pretty; }
.update-journey__steps { display: flex; justify-content: center; list-style: none; padding: 0; margin: 22px auto 0; width: min(100%, 460px); }
.update-journey__steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 11px; color: #656b68; font-size: 10px; letter-spacing: .045em; }
.update-journey__steps li + li::before { content: ''; position: absolute; height: 1px; left: calc(-50% + 21px); right: calc(50% + 21px); top: 16px; background: #b79d6225; }
.update-journey__step-mark { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid #71716135; border-radius: 50%; background: #0f1212; font: 10px Georgia, serif; }
.update-journey__steps .is-current { color: #e0c895; }
.update-journey__steps .is-current .update-journey__step-mark { border-color: #d7b56b80; background: #b89c4e14; box-shadow: 0 0 22px #d2ae4610; }
.update-journey__steps .is-complete { color: #aba584; }
.update-journey__steps .is-complete .update-journey__step-mark { border-color: #b2a06960; color: #d7c792; }
.update-journey__patience { display: flex; justify-content: center; gap: 7px; height: 34px; padding-top: 28px; }
.update-journey__patience span { width: 3px; height: 3px; background: #dbbc7b; border-radius: 50%; animation: journey-dot 1.8s ease-in-out infinite; }
.update-journey__patience span:nth-child(2) { animation-delay: .2s; }
.update-journey__patience span:nth-child(3) { animation-delay: .4s; }
.update-journey__footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; color: #777b72; font-size: 10px; letter-spacing: .025em; }
.update-journey__context { display: flex; align-items: center; gap: 9px; color: #a49b7e; }
.update-journey__context::before { content: ''; width: 4px; height: 4px; transform: rotate(45deg); background: #c5a461; }
.update-journey__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 29px; }
.update-journey__actions button { display: inline-flex; justify-content: space-between; align-items: center; gap: 22px; min-height: 44px; border: 1px solid #b79a59; padding: 10px 18px; color: #eddbaf; background: linear-gradient(130deg, #62512c55, #302a1c66); font: inherit; font-size: 12px; cursor: pointer; transition: background .2s, border-color .2s; }
.update-journey__actions button:hover { background: #8b6c3540; border-color: #e3c17c; }
.update-journey__actions button:focus-visible { outline: 2px solid #e3c17c; outline-offset: 4px; }
.update-journey__actions .update-journey__secondary { border-color: #8d805b55; color: #bdb69e; background: #a18d4f0b; }
.update-journey--failed .update-journey__orbit::before, .update-journey--failed .update-journey__halo, .update-journey--failed .update-journey__emblem > img { animation-play-state: paused; }
.update-journey--failed .update-journey__steps { opacity: .55; }
.update-journey--failed .update-journey__status { min-height: 91px; }
.update-journey--ready .update-journey__patience { opacity: 0; }
.update-journey--leaving { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes journey-orbit { to { transform: rotate(360deg); } }
@keyframes journey-emblem-breathe { 0%, 100% { transform: scale(.985); filter: drop-shadow(0 0 16px #cba65c20); } 50% { transform: scale(1.015); filter: drop-shadow(0 0 23px #cba65c36); } }
@keyframes journey-halo { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes journey-dot { 0%, 65%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@media (max-width: 600px) {
  .update-journey { padding: 28px 26px; }
  .update-journey__edge { inset: 10px; }
  .update-journey__content { padding: 30px 0; }
  .update-journey__emblem { width: 238px; height: 238px; margin-bottom: 23px; }
  .update-journey .update-journey__emblem > img { width: 166px; height: 166px; }
  .update-journey__status { min-height: 102px; margin-top: 22px; }
  .update-journey__footer { justify-content: center; text-align: center; font-size: 9px; }
  .update-journey__footer > span:first-child { display: none; }
  .update-journey__steps { margin-top: 15px; }
  .update-journey__actions { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
}
@media (max-height: 710px) {
  .update-journey__content { padding: 18px 0; }
  .update-journey__emblem { width: 190px; height: 190px; margin-bottom: 13px; }
  .update-journey .update-journey__emblem > img { width: 133px; height: 133px; }
  .update-journey__eyebrow { margin-bottom: 8px; }
  .update-journey__status { margin-top: 18px; min-height: 76px; }
  .update-journey__steps { margin-top: 10px; }
  .update-journey__patience { padding-top: 19px; height: 22px; }
}
@media (max-height: 460px) and (min-width: 600px) {
  .update-journey { padding: 22px 34px; }
  .update-journey__content { width: min(100%, 760px); display: grid; grid-template-columns: 190px 1fr; gap: 0 38px; text-align: left; padding: 15px 0; }
  .update-journey__emblem { grid-column: 1; grid-row: 1 / 6; align-self: center; margin: 0; }
  .update-journey__eyebrow, .update-journey h1, .update-journey__status, .update-journey__steps, .update-journey__patience, .update-journey__actions { grid-column: 2; }
  .update-journey h1 { font-size: 29px; }
  .update-journey__status { min-height: 60px; margin-top: 15px; }
  .update-journey__status p { margin-left: 0; }
  .update-journey__steps { margin-top: 10px; }
  .update-journey__steps li { gap: 6px; }
  .update-journey__actions { margin-top: 15px; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .update-journey { transition: none; }
  .update-journey .update-journey__emblem > img, .update-journey__halo, .update-journey__orbit::before, .update-journey__patience span { animation: none; }
  .update-journey__patience span { opacity: .65; }
}
