:root {
  color-scheme: light;
  font: 15px/20px var(--fontFamilyBase, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif);
  color: var(--color-anthracite);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
.backdrop {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1;
  background: linear-gradient(115deg, color-mix(in srgb, var(--color-blue) 7%, var(--color-white)), var(--color-paper) 48%, var(--color-white));
}
.backdrop span {
  position: absolute; width: 78vw; height: 80vh; border-radius: 96px;
  border: 2px solid color-mix(in srgb, var(--color-white) 80%, transparent);
  transform: rotate(-36deg);
}
.backdrop span:nth-child(1) {
  left: -38vw; top: -34vh;
  background: linear-gradient(150deg, color-mix(in srgb, var(--color-blue) 8%, var(--color-white)), transparent);
}
.backdrop span:nth-child(2) {
  right: -38vw; top: -51vh;
  background: linear-gradient(170deg, color-mix(in srgb, var(--color-blue) 10%, var(--color-white)), color-mix(in srgb, var(--color-red) 3%, var(--color-white)));
}
.backdrop span:nth-child(3) {
  left: -38vw; bottom: -69vh;
  background: linear-gradient(150deg, color-mix(in srgb, var(--color-blue) 11%, var(--color-white)), color-mix(in srgb, var(--color-green) 4%, var(--color-white)));
}
.backdrop span:nth-child(4) {
  right: -14vw; bottom: -77vh;
  background: linear-gradient(140deg, color-mix(in srgb, var(--color-yellow) 5%, var(--color-white)), var(--color-white));
}
.page { flex: 1; display: grid; place-items: center; padding: 64px 24px; }
main {
  width: min(100%, 440px); padding: 44px; background: var(--color-white);
  border-radius: 0; box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
  animation: arrive 180ms var(--curveDecelerateMid, ease-out) both;
}
.brand { display: block; width: auto; height: 30px; margin-bottom: 24px; }
h1 { color: var(--color-anthracite); font-size: 24px; font-weight: 600; line-height: 28px; margin: 0 0 12px; }
.status { display: flex; align-items: flex-start; gap: 12px; min-height: 40px; }
#status { margin: 0; overflow-wrap: anywhere; }
fluent-spinner { flex: none; margin-top: 3px; }
.actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.actions:has(> [hidden]):not(:has(> :not([hidden]))) { display: none; }
fluent-button { min-width: 108px; min-height: 32px; font-size: 15px; font-weight: 400; }
fluent-button:not(:defined) { visibility: hidden; }
a:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 4px; }
.downloads { padding: 0; list-style: none; }
.downloads li { margin-top: 24px; }
.downloads a { color: var(--color-navy); }
.downloads p { margin: 8px 0; }
.checksum { font-size: 13px; overflow-wrap: anywhere; }
footer { display: flex; justify-content: flex-end; padding: 16px 32px; gap: 20px; color: var(--color-darkgray); font-size: 13px; }
footer a { color: inherit; text-decoration: none; }
footer a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  :root { background: var(--color-white); }
  .backdrop { display: none; }
  .page { display: block; padding: 0; }
  main { width: 100%; padding: 24px; border-radius: 0; box-shadow: none; }
  footer { padding: 16px 24px; justify-content: center; flex-wrap: wrap; gap: 8px 16px; }
}
@media (max-width: 360px) {
  .actions fluent-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { main { animation: none; } fluent-spinner { display: none; } }
@media (forced-colors: active) {
  .backdrop { display: none; }
  main { border: 1px solid CanvasText; }
}