.lu-page {
  --lu-green: #b1ff69;
  --lu-mint: #6af3cc;
  --lu-text: #effff7;
  --lu-dim: #a9c9c6;
  --lu-line: #6af3cc38;
  max-width: 1160px;
  margin: auto;
  container-type: inline-size;
}
.lu-card {
  overflow: hidden;
  color: var(--lu-text);
  background: #071c23;
  border: 1px solid #66e9c264;
  border-radius: 18px;
  box-shadow: 0 20px 48px #020d16a0, inset 0 0 32px #32e5ab09;
}
.lu-hero {
  position: relative;
  isolation: isolate;
  padding: 20px 26px 26px;
  min-height: 346px;
  display: grid;
  align-content: space-between;
  gap: 24px;
  background:
    linear-gradient(90deg, #061c25ed 0%, #061c25d9 38%, #061c25b5 65%, #061c2515 91%),
    linear-gradient(0deg, #071c23 0%, transparent 29%),
    url("./launcher-update-islands.png") 83% 55% / cover no-repeat,
    #0a2737;
}
.lu-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9px;
  border: 1px solid #95fff12b;
  border-radius: 11px;
  pointer-events: none;
}
.lu-topline, .lu-transfer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lu-source, .lu-verification {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--lu-line);
  background: #071d28d9;
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .095em;
}
.lu-source i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lu-green);
  box-shadow: 0 0 10px #a2ff6c94;
}
.lu-source b, .lu-verification { color: var(--lu-dim); }
.lu-verification.verified {
  color: var(--lu-green);
  border-color: #b1ff695e;
}
.lu-hero-content {
  width: 81%;
  display: grid;
  grid-template-columns: minmax(115px, 1fr) minmax(0, 2.6fr);
  align-items: center;
  gap: clamp(16px, 3cqi, 34px);
  max-width: 795px;
}
.lu-heading { min-width: 0; }
.lu-heading h1 { line-height: 1; margin: 0; }
.lu-heading h1 span {
  display: block;
  color: #edfefc;
  font-weight: 800;
  letter-spacing: .1em;
  font-size: clamp(12px, 1.8cqi, 18px);
}
.lu-heading h1 strong {
  display: block;
  margin: 5px 0 0;
  font-size: clamp(32px, 6cqi, 69px);
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.035em;
  color: var(--lu-green);
  text-shadow: 0 0 26px #99ff5566, 0 2px 12px #020d16;
}
.lu-heading h2 { margin: 12px 0 9px; font-size: clamp(15px, 2cqi, 21px); line-height: 1.3; }
.lu-versions, .lu-release, .lu-metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
}
.lu-versions div, .lu-release div { display: flex; align-items: baseline; gap: 6px; }
.lu-versions span { color: var(--lu-green); }
.lu-card dt { color: var(--lu-dim); font-size: 11px; }
.lu-card dd { margin: 0; font-size: 12px; font-weight: 750; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.lu-versions div:last-child dd { color: var(--lu-green); }
.lu-radar {
  width: 100%;
  max-width: 208px;
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle, #59ffd845 0%, #103d42ca 41%, #092930ce 64%, transparent 75%);
  box-shadow: 0 0 30px #67ff9430;
}
.lu-radar > * { grid-area: 1/1; }
.lu-ticks, .lu-orbit { position: absolute; border-radius: 50%; }
.lu-ticks {
  inset: 0;
  background: repeating-conic-gradient(from 0deg, #80e9c686 0deg 1deg, transparent 1deg 6deg);
  mask: radial-gradient(closest-side, transparent 91%, black 92%, black 98%, transparent 99%);
  opacity: .65;
}
.lu-orbit {
  inset: 7%;
  background: conic-gradient(from 20deg, transparent 0 4%, #86ffeac4 10% 19%, transparent 19.5% 45%, #b3ff6ccf 58% 69%, transparent 69.5% 100%);
  mask: radial-gradient(closest-side, transparent 93%, black 94%, black 98%, transparent 99%);
  filter: drop-shadow(0 0 4px #85ffd4);
  transform: rotate(-35deg);
}
.lu-arc { width: 87%; height: 87%; transform: rotate(-90deg); }
.lu-arc-track { stroke: #7ce6ae30; stroke-width: 3; }
.lu-arc-fill {
  stroke: var(--lu-green);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--lu-percent));
  transition: stroke-dashoffset .42s ease-out;
  filter: drop-shadow(0 0 4px #a5ff65b5);
}
.lu-radar img {
  width: 58%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #b1ff6994;
  box-shadow: 0 0 22px #9dff6d48;
}
.lu-success-mark {
  display: none;
  position: absolute;
  inset: auto 4% 8% auto;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--lu-green);
  color: #12280b;
  box-shadow: 0 0 18px #b1ff69b8;
}
[data-lu-phase="APPLIED"] .lu-success-mark { display: grid; animation: lu-confirm .7s ease-out both; }
.lu-animated .lu-orbit { animation: lu-orbit 12s linear infinite; }
.lu-transfer, .lu-wait {
  padding: 11px 13px;
  margin-top: 13px;
  border: 1px solid #62e8ba62;
  background: #061b22eb;
  border-radius: 9px;
}
.lu-transfer-heading strong { font-size: 13px; }
.lu-transfer-heading b { font-size: 25px; line-height: 1; color: var(--lu-green); font-variant-numeric: tabular-nums; }
.lu-progress {
  height: 12px;
  background: #173b42;
  border: 1px solid #69ffc37a;
  border-radius: 20px;
  overflow: hidden;
  margin: 10px 0;
}
.lu-progress > i {
  position: relative;
  display: block;
  height: 100%;
  width: calc(var(--lu-percent) * 1%);
  background: linear-gradient(90deg, #40b95c, #a4ff64);
  border-radius: inherit;
  transition: width .42s ease-out;
  box-shadow: 0 0 12px #a4ff6499;
  overflow: hidden;
}
.lu-progress > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent, #ffffff99, transparent);
  transform: translateX(-100%);
}
.lu-animated .lu-progress > i::after { animation: lu-shine 2s linear infinite; }
.lu-progress.indeterminate > i { width: 36%; opacity: .65; }
.lu-animated .lu-progress.indeterminate > i { animation: lu-track 1.65s ease-in-out infinite; }
.lu-metrics { display: grid; grid-template-columns: 1.2fr 1fr 1.15fr; gap: 8px; }
.lu-metrics > div + div { padding-left: 8px; border-left: 1px solid var(--lu-line); }
.lu-metrics dd { margin-top: 2px; }
.lu-wait { display: flex; align-items: center; gap: 10px; color: var(--lu-dim); font-size: 12px; }
.lu-wait strong { color: var(--lu-text); }
.lu-wait p { margin: 0; line-height: 1.55; }
.lu-spinner {
  display: inline-block;
  width: 19px;
  height: 19px;
  flex: none;
  border: 2px solid var(--lu-line);
  border-top-color: var(--lu-green);
  border-radius: 50%;
}
.lu-animated .lu-spinner { animation: lu-spin 1s linear infinite; }
.lu-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 13px 26px;
  list-style: none;
  gap: 8px;
  border-block: 1px solid var(--lu-line);
  background: #09252c;
}
.lu-steps li { display: flex; align-items: center; gap: 8px; color: var(--lu-dim); }
.lu-steps li small, .lu-steps li strong { display: block; }
.lu-steps li small { font-size: 9px; letter-spacing: .08em; opacity: .82; }
.lu-steps li strong { font-size: 13px; font-weight: 750; margin-top: 2px; }
.lu-step-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--lu-line); border-radius: 50%; }
.lu-step-icon svg, .lu-change-notes svg, .lu-success-mark svg { width: 18px; height: 18px; flex: none; }
.lu-steps li:is(.done,.current) { color: var(--lu-green); }
.lu-steps li:is(.done,.current) .lu-step-icon { border-color: #b1ff69a0; background: #7fff641a; }
.lu-steps li.current .lu-step-icon { box-shadow: 0 0 12px #b1ff6950; }
.lu-body { padding: 15px 26px 20px; }
.lu-release { margin-bottom: 10px; }
.lu-note, .lu-error {
  padding: 8px 11px;
  margin: 0 0 8px;
  color: var(--lu-dim);
  border-left: 2px solid #6af3cc7f;
  background: #6af3cc0a;
  font-size: 12px;
  line-height: 1.6;
}
.lu-ready { color: var(--lu-green); }
.lu-error { color: #ffda95; border-color: #ffb55f; background: #ffb55f10; }
.lu-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lu-page .lu-actions .button {
  min-height: 36px;
  border-color: #79eac46b;
  background: #10353d;
  color: var(--lu-text);
}
.lu-page .lu-actions .button.primary { background: var(--lu-green); border-color: var(--lu-green); color: #142710; }
.lu-page .lu-actions .button:not(:disabled):hover { filter: brightness(1.13); }
.lu-page .lu-actions .button:focus-visible { outline: 2px solid #ecfff9; outline-offset: 2px; }
.lu-page .lu-actions .button:disabled { opacity: .53; }
.lu-change-notes {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--lu-line);
  background: #0a2b32;
  border-radius: 8px;
}
.lu-change-notes[hidden] { display: none; }
.lu-change-notes h3 { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 0 0 6px; color: var(--lu-mint); }
.lu-notes { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; color: var(--lu-dim); margin: 0; }
@keyframes lu-orbit { to { transform: rotate(325deg); } }
@keyframes lu-spin { to { transform: rotate(360deg); } }
@keyframes lu-shine { to { transform: translateX(100%); } }
@keyframes lu-track { from { transform: translateX(-100%); } to { transform: translateX(278%); } }
@keyframes lu-confirm { from { opacity: .2; transform: scale(.65); } 65% { transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@container (max-width: 750px) {
  .lu-hero { padding-inline: 17px; min-height: 322px; }
  .lu-hero-content { width: 94%; grid-template-columns: minmax(100px, 1fr) minmax(0, 2.8fr); }
  .lu-steps, .lu-body { padding-inline: 17px; }
}
@container (max-width: 520px) {
  .lu-hero { padding-inline: 13px; gap: 16px; }
  .lu-hero-content { width: 100%; grid-template-columns: 1fr; gap: 10px; }
  .lu-radar { width: 98px; justify-self: start; }
  .lu-hero { background-position: 0 0, 0 0, right 0 top 0; }
  .lu-topline { flex-wrap: wrap; }
  .lu-heading h1 strong { font-size: 38px; }
  .lu-steps, .lu-body { padding-inline: 13px; }
  .lu-steps li { flex-direction: column; align-items: start; gap: 3px; }
  .lu-steps li strong { font-size: 11px; }
  .lu-steps li small { display: none; }
}
html[data-xa-motion="off"] .lu-card :is(.lu-orbit,.lu-arc-fill,.lu-progress > i,.lu-spinner,.lu-success-mark),
html[data-xa-motion="off"] .lu-card .lu-progress > i::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .lu-card :is(.lu-orbit,.lu-arc-fill,.lu-progress > i,.lu-spinner,.lu-success-mark),
  .lu-card .lu-progress > i::after { animation: none !important; transition: none !important; }
}