academe-kit 0.9.3 → 0.9.5

package/dist/index.esm.js

@@ -1,5 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React2, { forwardRef, createElement, createContext, useContext, useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import React2, { forwardRef, createElement, createContext, useContext, useState, useRef, useMemo, useEffect, useCallback, useId } from 'react';
+import { useReducedMotion, motion } from 'framer-motion';
+import { animated, useSpring } from '@react-spring/web';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -4558,8 +4560,9 @@ function createUserService(apiClient) {
             });
         },
         updateMe(body) {
+            // openapi-fetch narrows deviceId to string (drops null) — cast to bypass
             return apiClient.PUT("/users/me", {
-                body,
+                body: body,
             });
         },
         /**
@@ -5551,6 +5554,7 @@ function createCertificateService(apiClient) {
          * List all certificates
          */
         getAll(query) {
+            // spec declares query?: never on this route — cast until spec is updated
             return apiClient.GET("/certificates", {
                 params: { query },
             });
@@ -5567,6 +5571,7 @@ function createCertificateService(apiClient) {
          * Download all certificates of a given user as a single merged PDF
          */
         downloadAll(userId) {
+            // path not yet in the API spec
             return apiClient.GET("/certificates/{userId}/download-all", {
                 params: { path: { userId } },
                 parseAs: 'blob',
@@ -5576,6 +5581,7 @@ function createCertificateService(apiClient) {
          * Download certificate PDF
          */
         download(id) {
+            // path not yet in the API spec
             return apiClient.GET("/certificates/{id}/download", {
                 params: { path: { id } },
                 parseAs: 'blob',
@@ -5593,6 +5599,7 @@ function createCertificateService(apiClient) {
          * Generate a certificate PDF server-side
          */
         generate(data) {
+            // path not yet in the API spec
             return apiClient.POST("/certificates/generate", {
                 body: data,
             });
@@ -5999,6 +6006,217 @@ function createStorageFileService(apiClient) {
     };
 }
 
+function createChallengeService(apiClient) {
+    return {
+        // ============================================================================
+        // Challenges (Jornadas)
+        // ============================================================================
+        /**
+         * List challenges with filters and pagination
+         */
+        getAll(params) {
+            return apiClient.GET("/challenges", {
+                params: { query: params },
+            });
+        },
+        /**
+         * Get challenge by ID with full details (steps, media, deliverySteps, evaluationCriteria)
+         */
+        getById(id) {
+            return apiClient.GET("/challenges/{id}", {
+                params: { path: { id } },
+            });
+        },
+        /**
+         * Create a new challenge
+         */
+        create(data) {
+            return apiClient.POST("/challenges", {
+                body: data,
+            });
+        },
+        /**
+         * Update a challenge
+         */
+        update(id, data) {
+            return apiClient.PATCH("/challenges/{id}", {
+                params: { path: { id } },
+                body: data,
+            });
+        },
+        /**
+         * Soft-delete a challenge (sets is_active=false)
+         */
+        delete(id) {
+            return apiClient.DELETE("/challenges/{id}", {
+                params: { path: { id } },
+            });
+        },
+        /**
+         * Clone a global template into an institution
+         */
+        clone(id, data) {
+            return apiClient.POST("/challenges/{id}/clone", {
+                params: { path: { id } },
+                body: data,
+            });
+        },
+        // ============================================================================
+        // Steps
+        // ============================================================================
+        /**
+         * Add a step to the challenge
+         */
+        addStep(challengeId, data) {
+            return apiClient.POST("/challenges/{id}/steps", {
+                params: { path: { id: challengeId } },
+                body: data,
+            });
+        },
+        /**
+         * Update a challenge step
+         */
+        updateStep(challengeId, stepId, data) {
+            return apiClient.PATCH("/challenges/{id}/steps/{subId}", {
+                params: { path: { id: challengeId, subId: stepId } },
+                body: data,
+            });
+        },
+        /**
+         * Remove a challenge step
+         */
+        removeStep(challengeId, stepId) {
+            return apiClient.DELETE("/challenges/{id}/steps/{subId}", {
+                params: { path: { id: challengeId, subId: stepId } },
+            });
+        },
+        // ============================================================================
+        // Media
+        // ============================================================================
+        /**
+         * Attach a media file to the challenge
+         */
+        addMedia(challengeId, data) {
+            return apiClient.POST("/challenges/{id}/media", {
+                params: { path: { id: challengeId } },
+                body: data,
+            });
+        },
+        /**
+         * Remove a media item
+         */
+        removeMedia(challengeId, mediaId) {
+            return apiClient.DELETE("/challenges/{id}/media/{subId}", {
+                params: { path: { id: challengeId, subId: mediaId } },
+            });
+        },
+        // ============================================================================
+        // Delivery Steps (checklist)
+        // ============================================================================
+        /**
+         * Add a delivery checklist item
+         */
+        addDeliveryStep(challengeId, data) {
+            return apiClient.POST("/challenges/{id}/delivery-steps", {
+                params: { path: { id: challengeId } },
+                body: data,
+            });
+        },
+        /**
+         * Update a delivery checklist item
+         */
+        updateDeliveryStep(challengeId, deliveryStepId, data) {
+            return apiClient.PATCH("/challenges/{id}/delivery-steps/{subId}", {
+                params: { path: { id: challengeId, subId: deliveryStepId } },
+                body: data,
+            });
+        },
+        /**
+         * Remove a delivery checklist item
+         */
+        removeDeliveryStep(challengeId, deliveryStepId) {
+            return apiClient.DELETE("/challenges/{id}/delivery-steps/{subId}", {
+                params: { path: { id: challengeId, subId: deliveryStepId } },
+            });
+        },
+        // ============================================================================
+        // Evaluation Criteria (rubric)
+        // ============================================================================
+        /**
+         * Add an evaluation criterion
+         */
+        addCriterion(challengeId, data) {
+            return apiClient.POST("/challenges/{id}/evaluation-criteria", {
+                params: { path: { id: challengeId } },
+                body: data,
+            });
+        },
+        /**
+         * Update an evaluation criterion
+         */
+        updateCriterion(challengeId, criterionId, data) {
+            return apiClient.PATCH("/challenges/{id}/evaluation-criteria/{subId}", {
+                params: { path: { id: challengeId, subId: criterionId } },
+                body: data,
+            });
+        },
+        /**
+         * Remove an evaluation criterion
+         */
+        removeCriterion(challengeId, criterionId) {
+            return apiClient.DELETE("/challenges/{id}/evaluation-criteria/{subId}", {
+                params: { path: { id: challengeId, subId: criterionId } },
+            });
+        },
+    };
+}
+
+function createStepService(apiClient) {
+    return {
+        /**
+         * List the step catalog (filterable by type / isActive)
+         */
+        getAll(params) {
+            return apiClient.GET("/steps", {
+                params: { query: params },
+            });
+        },
+        /**
+         * Get a step by ID
+         */
+        getById(id) {
+            return apiClient.GET("/steps/{id}", {
+                params: { path: { id } },
+            });
+        },
+        /**
+         * Create a new step in the catalog
+         */
+        create(data) {
+            return apiClient.POST("/steps", {
+                body: data,
+            });
+        },
+        /**
+         * Update a step
+         */
+        update(id, data) {
+            return apiClient.PATCH("/steps/{id}", {
+                params: { path: { id } },
+                body: data,
+            });
+        },
+        /**
+         * Delete a step
+         */
+        delete(id) {
+            return apiClient.DELETE("/steps/{id}", {
+                params: { path: { id } },
+            });
+        },
+    };
+}
+
 function createAcademeApiClient(baseUrl) {
     return createClient({ baseUrl });
 }
@@ -6022,6 +6240,8 @@ function createAcademeServices(apiClient) {
         seatCode: createSeatCodeService(apiClient),
         product: createProductService(apiClient),
         storageFile: createStorageFileService(apiClient),
+        challenge: createChallengeService(apiClient),
+        step: createStepService(apiClient),
     };
 }
 
@@ -6119,7 +6339,6 @@ const SecurityProvider = ({ apiBaseUrl = "https://stg-api.academe.com.br", skipA
     const isAuthenticated = auth.isAuthenticated || !!accessToken;
     const isLoading = auth.isLoading;
     const activeNavigator = auth.activeNavigator;
-    auth.user?.profile;
     const currentTokenRef = useRef(undefined);
     // Efeito para sincronizar o token do auth com o state
     // e também verificar cookies periodicamente
@@ -9453,10 +9672,903 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1 = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:root{--background:0 0% 100%;--foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%;--popover:0 0% 100%;--popover-foreground:222.2 84% 4.9%;--primary:222.2 47.4% 11.2%;--primary-foreground:210 40% 98%;--secondary:210 40% 96.1%;--secondary-foreground:222.2 47.4% 11.2%;--muted:210 40% 96.1%;--muted-foreground:215.4 16.3% 46.9%;--accent:210 40% 96.1%;--accent-foreground:222.2 47.4% 11.2%;--destructive:0 84.2% 60.2%;--destructive-foreground:210 40% 98%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--ring:222.2 84% 4.9%;--radius:0.5rem}.dark{--background:222.2 84% 4.9%;--foreground:210 40% 98%;--card:222.2 84% 4.9%;--card-foreground:210 40% 98%;--popover:222.2 84% 4.9%;--popover-foreground:210 40% 98%;--primary:210 40% 98%;--primary-foreground:222.2 47.4% 11.2%;--secondary:217.2 32.6% 17.5%;--secondary-foreground:210 40% 98%;--muted:217.2 32.6% 17.5%;--muted-foreground:215 20.2% 65.1%;--accent:217.2 32.6% 17.5%;--accent-foreground:210 40% 98%;--destructive:0 62.8% 30.6%;--destructive-foreground:210 40% 98%;--border:217.2 32.6% 17.5%;--input:217.2 32.6% 17.5%;--ring:212.7 26.8% 83.9%}*{border-color:hsl(var(--border))}body{background-color:hsl(var(--background));color:hsl(var(--foreground))}.mt-4{margin-top:1rem}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.size-10{height:2.5rem;width:2.5rem}.h-screen{height:100vh}.w-screen{width:100vw}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-3{gap:.75rem}.rounded-lg{border-radius:var(--radius)}.border-2{border-width:2px}.border-\\[\\#892CDD\\]{--tw-border-opacity:1;border-color:rgb(137 44 221/var(--tw-border-opacity,1))}.bg-\\[\\#111111\\]{--tw-bg-opacity:1;background-color:rgb(17 17 17/var(--tw-bg-opacity,1))}.bg-\\[\\#892CDD\\]{--tw-bg-opacity:1;background-color:rgb(137 44 221/var(--tw-bg-opacity,1))}.bg-\\[\\#ffffff\\]{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-\\[\\#892CDD\\]{--tw-text-opacity:1;color:rgb(137 44 221/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-violet-500{--tw-text-opacity:1;color:rgb(139 92 246/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.duration-200{animation-duration:.2s}.hover\\:bg-\\[\\#892CDD\\]\\/10:hover{background-color:rgba(137,44,221,.1)}.hover\\:bg-\\[\\#892CDD\\]\\/80:hover{background-color:rgba(137,44,221,.8)}.hover\\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-\\[\\#892CDD\\]:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(137 44 221/var(--tw-ring-opacity,1))}.focus\\:ring-gray-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity,1))}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px}";
+var css_248z$3 = ".cosmic-decor{inset:0;-webkit-mask-image:radial-gradient(ellipse 82% 78% at 50% 46%,transparent 0,transparent 34%,rgba(0,0,0,.55) 58%,#000 100%);mask-image:radial-gradient(ellipse 82% 78% at 50% 46%,transparent 0,transparent 34%,rgba(0,0,0,.55) 58%,#000 100%);pointer-events:none;position:absolute;z-index:2}.cosmic-decor--session{inset:0 auto 0 50%;-webkit-mask-image:none;mask-image:none;right:auto;transform:translateX(-50%);width:100vw;z-index:0}.cosmic-decor__planet{display:block;height:auto;position:absolute;will-change:transform}.cosmic-decor__planet--saturn{animation:cosmicFloat 7s ease-in-out infinite;aspect-ratio:120/80;filter:drop-shadow(0 0 14px rgba(139,92,246,.28));left:max(-18px,2vw);opacity:.94;overflow:visible;right:auto;top:44px;width:180px}.cosmic-decor__planet--giant{animation:cosmicFloat 8.5s ease-in-out infinite;animation-delay:-2s;aspect-ratio:1;filter:drop-shadow(0 0 22px rgba(59,130,246,.3));left:auto;opacity:.9;right:max(-20px,2vw);top:72px;width:148px}.cosmic-decor__planet--earth{animation:cosmicFloat 9.8s ease-in-out infinite;animation-delay:-1.2s;aspect-ratio:1;filter:drop-shadow(0 0 18px rgba(147,197,253,.28));left:max(10px,8vw);opacity:.88;right:auto;top:208px;width:116px}.cosmic-decor__planet--neptune{animation:cosmicFloat 11.2s ease-in-out infinite;animation-delay:-3.1s;aspect-ratio:1;filter:drop-shadow(0 0 28px rgba(37,99,235,.26));left:auto;opacity:.82;right:100px;top:132px;width:180px}.cosmic-decor__planet--black-hole{animation:cosmicBlackHolePulse 5.4s ease-in-out infinite;aspect-ratio:1;bottom:72px;filter:drop-shadow(0 0 34px rgba(167,139,250,.22));left:max(22px,10vw);opacity:.88;right:auto;width:124px}.cosmic-decor__planet--sun{animation:cosmicFloat 8s ease-in-out infinite;animation-delay:-.8s;aspect-ratio:1;filter:drop-shadow(0 0 32px rgba(250,204,21,.4)) drop-shadow(0 0 18px rgba(249,115,22,.25));left:auto;opacity:.95;overflow:visible;right:max(-12px,2vw);top:28px;width:160px}.cosmic-decor__planet--moon{animation:cosmicFloat 12s ease-in-out infinite;animation-delay:-4.4s;aspect-ratio:1;filter:drop-shadow(0 0 14px rgba(226,232,240,.32));left:auto;opacity:.9;right:max(20px,6vw);top:268px;width:92px}.cosmic-decor__planet--satellite{animation:cosmicFloat 7.6s ease-in-out infinite;animation-delay:-1.6s;aspect-ratio:160/100;filter:drop-shadow(0 0 16px rgba(56,189,248,.28));left:max(40px,14vw);opacity:.9;overflow:visible;right:auto;top:152px;width:150px}.cosmic-decor__planet--astronaut{animation:cosmicAstronautDrift 10s ease-in-out infinite;aspect-ratio:110/140;bottom:96px;filter:drop-shadow(0 0 18px rgba(167,139,250,.32)) drop-shadow(0 0 8px rgba(56,189,248,.2));left:auto;opacity:.92;overflow:visible;right:max(8px,4vw);width:100px}.cosmic-decor__sparkle{animation:cosmicSparkle 2.6s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(253,224,71,.65));height:12px;opacity:.88;position:absolute;width:12px}.cosmic-decor__sparkle--1{left:4%;top:5%}.cosmic-decor__sparkle--2{animation-delay:.5s;height:10px;right:5%;top:22%;width:10px}.cosmic-decor__sparkle--3{animation-delay:1.1s;left:5%;top:48%}.cosmic-decor__sparkle--4{animation-delay:1.6s;height:10px;right:5%;top:78%;width:10px}@keyframes cosmicFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes cosmicBlackHolePulse{0%,to{opacity:.82;transform:scale(1)}50%{opacity:.98;transform:scale(1.06)}}@keyframes cosmicAstronautDrift{0%,to{transform:translate(0)}25%{transform:translate(4px,-8px)}50%{transform:translate(-2px,-14px)}75%{transform:translate(-5px,-4px)}}@keyframes cosmicSparkle{0%,to{opacity:.92;transform:scale(1)}50%{opacity:.55;transform:scale(1.2)}}@media (min-width:1024px){.cosmic-decor.cosmic-decor--page{-webkit-mask-image:radial-gradient(ellipse min(96%,1400px) min(88%,900px) at 50% 42%,transparent 0,transparent 38%,rgba(0,0,0,.5) 62%,#000 100%);mask-image:radial-gradient(ellipse min(96%,1400px) min(88%,900px) at 50% 42%,transparent 0,transparent 38%,rgba(0,0,0,.5) 62%,#000 100%)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--saturn{filter:drop-shadow(0 0 28px rgba(139,92,246,.35));left:clamp(12px,3vw,40px);right:auto;top:clamp(48px,10vh,140px);width:clamp(190px,14vw,270px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--giant{filter:drop-shadow(0 0 36px rgba(59,130,246,.38));left:auto;right:clamp(-100px,-4vw,-24px);top:clamp(80px,14vh,200px);width:clamp(200px,17vw,300px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--earth{filter:drop-shadow(0 0 30px rgba(147,197,253,.28));left:clamp(40px,7vw,140px);right:auto;top:clamp(170px,24vh,320px);width:clamp(170px,12vw,260px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--neptune{filter:drop-shadow(0 0 42px rgba(37,99,235,.26));left:auto;right:clamp(-110px,-5.5vw,-45px);top:clamp(52px,12vh,160px);width:clamp(200px,14vw,310px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--black-hole{bottom:clamp(34px,9vh,160px);left:clamp(50px,9vw,170px);right:auto;width:clamp(210px,17vw,360px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--sun{filter:drop-shadow(0 0 44px rgba(250,204,21,.42)) drop-shadow(0 0 22px rgba(249,115,22,.3));left:auto;right:clamp(40px,7vw,160px);top:clamp(36px,8vh,120px);width:clamp(180px,13vw,260px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--moon{filter:drop-shadow(0 0 22px rgba(226,232,240,.36));left:auto;right:clamp(140px,14vw,280px);top:clamp(220px,28vh,360px);width:clamp(110px,8vw,170px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--satellite{filter:drop-shadow(0 0 24px rgba(56,189,248,.32));left:clamp(160px,18vw,320px);right:auto;top:clamp(140px,18vh,240px);width:clamp(170px,12vw,250px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--astronaut{bottom:clamp(60px,12vh,200px);filter:drop-shadow(0 0 28px rgba(167,139,250,.36)) drop-shadow(0 0 12px rgba(56,189,248,.22));left:auto;right:clamp(120px,13vw,260px);width:clamp(120px,9vw,180px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__sparkle{opacity:.92}.cosmic-decor.cosmic-decor--page .cosmic-decor__sparkle--1{height:14px;left:max(16px,3vw);top:10%;width:14px}.cosmic-decor.cosmic-decor--page .cosmic-decor__sparkle--2{height:12px;right:max(20px,4vw);top:18%;width:12px}.cosmic-decor.cosmic-decor--page .cosmic-decor__sparkle--3{height:13px;left:max(12px,2.5vw);top:46%;width:13px}.cosmic-decor.cosmic-decor--page .cosmic-decor__sparkle--4{height:12px;right:max(18px,3.5vw);top:72%;width:12px}}@media (min-width:1440px){.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--saturn{width:clamp(220px,12vw,290px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--giant{left:auto;right:clamp(-120px,-5vw,-32px);width:clamp(240px,14vw,320px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--earth{width:clamp(240px,13vw,300px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--neptune{width:clamp(260px,15vw,340px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--black-hole{width:clamp(280px,18vw,420px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--sun{width:clamp(210px,12vw,290px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--moon{width:clamp(130px,7vw,200px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--satellite{width:clamp(200px,11vw,290px)}.cosmic-decor.cosmic-decor--page .cosmic-decor__planet--astronaut{width:clamp(140px,8vw,210px)}}@media (prefers-reduced-motion:reduce){.cosmic-decor__planet--astronaut,.cosmic-decor__planet--black-hole,.cosmic-decor__planet--earth,.cosmic-decor__planet--giant,.cosmic-decor__planet--moon,.cosmic-decor__planet--neptune,.cosmic-decor__planet--satellite,.cosmic-decor__planet--saturn,.cosmic-decor__planet--sun{animation:none}.cosmic-decor__sparkle{animation:none;opacity:.9;transform:none}}";
+styleInject(css_248z$3,{"insertAt":"top"});
+
+const SATURN_ORIGIN = {
+    transformOrigin: '50% 50%',
+    transformBox: 'fill-box',
+};
+function PlanetSaturn({ id }) {
+    const reduceMotion = useReducedMotion();
+    const saturnBodyId = `cosmic-saturn-body-${id}`;
+    const saturnRingId = `cosmic-saturn-ring-${id}`;
+    const ringAnimate = reduceMotion ? { rotate: 0 } : { rotate: 360 };
+    const ringTransition = reduceMotion
+        ? { duration: 0 }
+        : { duration: 105, repeat: Infinity, ease: 'linear' };
+    return (jsxs("svg", { className: "cosmic-decor__planet cosmic-decor__planet--saturn", viewBox: "0 0 120 80", children: [jsxs("defs", { children: [jsxs("radialGradient", { id: saturnBodyId, cx: "30%", cy: "30%", children: [jsx("stop", { offset: "0%", stopColor: "#c4b5fd" }), jsx("stop", { offset: "55%", stopColor: "#7c3aed" }), jsx("stop", { offset: "100%", stopColor: "#1e1b4b" })] }), jsxs("linearGradient", { id: saturnRingId, x1: "0", y1: "0", x2: "1", y2: "0", children: [jsx("stop", { offset: "0%", stopColor: "#c4b5fd", stopOpacity: "0" }), jsx("stop", { offset: "20%", stopColor: "#c4b5fd", stopOpacity: "0.7" }), jsx("stop", { offset: "80%", stopColor: "#c4b5fd", stopOpacity: "0.7" }), jsx("stop", { offset: "100%", stopColor: "#c4b5fd", stopOpacity: "0" })] })] }), jsx(motion.g, { style: SATURN_ORIGIN, animate: ringAnimate, transition: ringTransition, children: jsx("ellipse", { cx: "60", cy: "40", rx: "56", ry: "11", fill: "none", stroke: `url(#${saturnRingId})`, strokeWidth: "2.5" }) }), jsx("circle", { cx: "60", cy: "40", r: "24", fill: `url(#${saturnBodyId})` }), jsx(motion.g, { style: SATURN_ORIGIN, animate: ringAnimate, transition: ringTransition, children: jsx("path", { d: "M 4 42 Q 60 56 116 42", stroke: `url(#${saturnRingId})`, strokeWidth: "2.5", fill: "none" }) })] }));
+}
+
+const AnimatedGroup = animated('g');
+function PlanetGiant({ id }) {
+    const reduceMotion = useReducedMotion();
+    const giantBodyId = `cosmic-giant-body-${id}`;
+    const giantClipId = `cosmic-giant-clip-${id}`;
+    const bandsSpring = useSpring(reduceMotion
+        ? { from: { x: 0 }, to: { x: 0 }, immediate: true }
+        : {
+            from: { x: -5 },
+            to: { x: 5 },
+            loop: { reverse: true },
+            config: { duration: 6500 },
+        });
+    return (jsxs("svg", { className: "cosmic-decor__planet cosmic-decor__planet--giant", viewBox: "0 0 120 120", children: [jsxs("defs", { children: [jsxs("radialGradient", { id: giantBodyId, cx: "32%", cy: "30%", children: [jsx("stop", { offset: "0%", stopColor: "#bae6fd" }), jsx("stop", { offset: "55%", stopColor: "#3b82f6" }), jsx("stop", { offset: "100%", stopColor: "#1e3a8a" })] }), jsx("clipPath", { id: giantClipId, children: jsx("circle", { cx: "60", cy: "60", r: "55" }) })] }), jsx("circle", { cx: "60", cy: "60", r: "55", fill: `url(#${giantBodyId})` }), jsxs(AnimatedGroup, { clipPath: `url(#${giantClipId})`, fill: "none", stroke: "#1e3a8a", strokeWidth: "1.4", strokeOpacity: "0.55", style: { transform: bandsSpring.x.to((x) => `translate(${x}px, 0px)`) }, children: [jsx("path", { d: "M -5 35 Q 30 30 60 35 T 125 35" }), jsx("path", { d: "M -5 55 Q 30 60 60 55 T 125 55" }), jsx("path", { d: "M -5 75 Q 30 70 60 75 T 125 75" }), jsx("path", { d: "M -5 92 Q 30 96 60 92 T 125 92" })] })] }));
+}
+
+function PlanetEarth({ id }) {
+    const earthBodyId = `cosmic-earth-body-${id}`;
+    const earthAtmosId = `cosmic-earth-atmos-${id}`;
+    return (jsxs("svg", { className: "cosmic-decor__planet cosmic-decor__planet--earth", viewBox: "0 0 120 120", children: [jsxs("defs", { children: [jsxs("radialGradient", { id: earthBodyId, cx: "30%", cy: "30%", children: [jsx("stop", { offset: "0%", stopColor: "#93c5fd" }), jsx("stop", { offset: "55%", stopColor: "#3b82f6" }), jsx("stop", { offset: "100%", stopColor: "#052e3a" })] }), jsxs("linearGradient", { id: earthAtmosId, x1: "0", y1: "0", x2: "1", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: "#60a5fa", stopOpacity: "0" }), jsx("stop", { offset: "25%", stopColor: "#60a5fa", stopOpacity: "0.6" }), jsx("stop", { offset: "70%", stopColor: "#a78bfa", stopOpacity: "0.45" }), jsx("stop", { offset: "100%", stopColor: "#a78bfa", stopOpacity: "0" })] })] }), jsx("circle", { cx: "60", cy: "60", r: "48", fill: `url(#${earthBodyId})` }), jsx("path", { d: "M 38 63 C 40 54 54 50 60 56 C 63 59 65 66 61 70 C 56 75 45 74 41 68 C 39 66 37 65 38 63 Z", fill: "#22c55e", opacity: "0.82" }), jsx("path", { d: "M 56 44 C 60 42 68 43 71 49 C 73 53 69 57 64 58 C 58 59 53 55 52 51 C 51 48 53 45 56 44 Z", fill: "#16a34a", opacity: "0.6" }), jsx("path", { d: "M 28 52 C 33 46 44 44 49 47 C 53 49 53 55 49 58 C 43 63 30 59 27 55 C 26 54 26 53 28 52 Z", fill: "#15803d", opacity: "0.45" }), jsx("ellipse", { cx: "60", cy: "60", rx: "52", ry: "12", fill: "none", stroke: `url(#${earthAtmosId})`, strokeWidth: "2.2", opacity: "0.9" })] }));
+}
+
+function PlanetNeptune({ id }) {
+    const neptuneBodyId = `cosmic-neptune-body-${id}`;
+    const neptuneBandId = `cosmic-neptune-band-${id}`;
+    return (jsxs("svg", { className: "cosmic-decor__planet cosmic-decor__planet--neptune", viewBox: "0 0 120 120", children: [jsxs("defs", { children: [jsxs("radialGradient", { id: neptuneBodyId, cx: "32%", cy: "28%", children: [jsx("stop", { offset: "0%", stopColor: "#93c5fd" }), jsx("stop", { offset: "50%", stopColor: "#2563eb" }), jsx("stop", { offset: "100%", stopColor: "#0b1226" })] }), jsxs("linearGradient", { id: neptuneBandId, x1: "0", y1: "0", x2: "1", y2: "0", children: [jsx("stop", { offset: "0%", stopColor: "#60a5fa", stopOpacity: "0" }), jsx("stop", { offset: "20%", stopColor: "#60a5fa", stopOpacity: "0.7" }), jsx("stop", { offset: "70%", stopColor: "#a78bfa", stopOpacity: "0.55" }), jsx("stop", { offset: "100%", stopColor: "#a78bfa", stopOpacity: "0" })] })] }), jsx("circle", { cx: "60", cy: "60", r: "50", fill: `url(#${neptuneBodyId})` }), jsxs("g", { fill: "none", stroke: `url(#${neptuneBandId})`, strokeWidth: "2.2", opacity: "0.65", children: [jsx("path", { d: "M 22 54 Q 60 44 98 54" }), jsx("path", { d: "M 18 70 Q 60 60 102 70" }), jsx("path", { d: "M 26 86 Q 60 80 94 86" })] }), jsx("ellipse", { cx: "60", cy: "60", rx: "56", ry: "10", fill: "none", stroke: "#a5b4fc", strokeWidth: "1.6", opacity: "0.35" })] }));
+}
+
+function PlanetBlackHole({ id }) {
+    const blackHoleCoreId = `cosmic-black-hole-core-${id}`;
+    const blackHoleRingId = `cosmic-black-hole-ring-${id}`;
+    return (jsxs("svg", { className: "cosmic-decor__planet cosmic-decor__planet--black-hole", viewBox: "0 0 120 120", children: [jsxs("defs", { children: [jsxs("radialGradient", { id: blackHoleCoreId, cx: "50%", cy: "50%", children: [jsx("stop", { offset: "0%", stopColor: "#05050a" }), jsx("stop", { offset: "35%", stopColor: "#000000" }), jsx("stop", { offset: "70%", stopColor: "#09091f" }), jsx("stop", { offset: "100%", stopColor: "#000000" })] }), jsxs("linearGradient", { id: blackHoleRingId, x1: "0", y1: "0", x2: "1", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: "#a78bfa", stopOpacity: "0.0" }), jsx("stop", { offset: "25%", stopColor: "#a78bfa", stopOpacity: "0.55" }), jsx("stop", { offset: "60%", stopColor: "#22d3ee", stopOpacity: "0.42" }), jsx("stop", { offset: "100%", stopColor: "#22d3ee", stopOpacity: "0.0" })] })] }), jsx("circle", { cx: "60", cy: "60", r: "38", fill: `url(#${blackHoleCoreId})` }), jsx("circle", { cx: "60", cy: "60", r: "52", fill: "none", stroke: `url(#${blackHoleRingId})`, strokeWidth: "3", opacity: "0.48" }), jsx("circle", { cx: "60", cy: "60", r: "60", fill: "none", stroke: "#22d3ee", strokeWidth: "1.6", opacity: "0.18" }), jsx("path", { d: "M 30 62 Q 60 40 90 62 Q 60 84 30 62 Z", fill: "none", stroke: "#a78bfa", strokeWidth: "2", opacity: "0.22" }), jsx("circle", { cx: "60", cy: "60", r: "6", fill: "#ffffff", opacity: "0.55" })] }));
+}
+
+const ORIGIN$2 = {
+    transformOrigin: '50% 50%',
+    transformBox: 'fill-box',
+};
+function PlanetSun({ id }) {
+    const reduceMotion = useReducedMotion();
+    const sunBodyId = `cosmic-sun-body-${id}`;
+    const sunCoronaId = `cosmic-sun-corona-${id}`;
+    return (jsxs("svg", { className: "cosmic-decor__planet cosmic-decor__planet--sun", viewBox: "0 0 140 140", children: [jsxs("defs", { children: [jsxs("radialGradient", { id: sunBodyId, cx: "42%", cy: "38%", children: [jsx("stop", { offset: "0%", stopColor: "#fffbeb" }), jsx("stop", { offset: "30%", stopColor: "#fde68a" }), jsx("stop", { offset: "60%", stopColor: "#f59e0b" }), jsx("stop", { offset: "90%", stopColor: "#ea580c" }), jsx("stop", { offset: "100%", stopColor: "#7c2d12" })] }), jsxs("radialGradient", { id: sunCoronaId, cx: "50%", cy: "50%", children: [jsx("stop", { offset: "0%", stopColor: "#fde68a", stopOpacity: "0.55" }), jsx("stop", { offset: "55%", stopColor: "#fbbf24", stopOpacity: "0.18" }), jsx("stop", { offset: "100%", stopColor: "#fbbf24", stopOpacity: "0" })] })] }), jsx("circle", { cx: "70", cy: "70", r: "62", fill: `url(#${sunCoronaId})` }), jsx(motion.g, { style: ORIGIN$2, animate: reduceMotion ? { rotate: 0 } : { rotate: 360 }, transition: reduceMotion
+                    ? { duration: 0 }
+                    : { duration: 130, repeat: Infinity, ease: 'linear' }, stroke: "#fcd34d", strokeWidth: "2.4", strokeLinecap: "round", opacity: "0.7", children: Array.from({ length: 12 }).map((_, i) => {
+                    const angle = (i / 12) * Math.PI * 2;
+                    const x1 = 70 + Math.cos(angle) * 46;
+                    const y1 = 70 + Math.sin(angle) * 46;
+                    const x2 = 70 + Math.cos(angle) * 58;
+                    const y2 = 70 + Math.sin(angle) * 58;
+                    return jsx("line", { x1: x1, y1: y1, x2: x2, y2: y2 }, i);
+                }) }), jsx("circle", { cx: "70", cy: "70", r: "36", fill: `url(#${sunBodyId})` }), jsx("ellipse", { cx: "58", cy: "58", rx: "13", ry: "8", fill: "#fef3c7", opacity: "0.5" })] }));
+}
+
+function PlanetMoon({ id }) {
+    const moonBodyId = `cosmic-moon-body-${id}`;
+    const moonShadowId = `cosmic-moon-shadow-${id}`;
+    return (jsxs("svg", { className: "cosmic-decor__planet cosmic-decor__planet--moon", viewBox: "0 0 120 120", children: [jsxs("defs", { children: [jsxs("radialGradient", { id: moonBodyId, cx: "34%", cy: "30%", children: [jsx("stop", { offset: "0%", stopColor: "#f8fafc" }), jsx("stop", { offset: "35%", stopColor: "#e2e8f0" }), jsx("stop", { offset: "75%", stopColor: "#94a3b8" }), jsx("stop", { offset: "100%", stopColor: "#1e293b" })] }), jsxs("radialGradient", { id: moonShadowId, cx: "78%", cy: "58%", children: [jsx("stop", { offset: "0%", stopColor: "#0f172a", stopOpacity: "0" }), jsx("stop", { offset: "60%", stopColor: "#0f172a", stopOpacity: "0.32" }), jsx("stop", { offset: "100%", stopColor: "#020617", stopOpacity: "0.55" })] })] }), jsx("circle", { cx: "60", cy: "60", r: "48", fill: `url(#${moonBodyId})` }), jsxs("g", { fill: "#475569", opacity: "0.55", children: [jsx("ellipse", { cx: "44", cy: "48", rx: "6", ry: "4.5" }), jsx("ellipse", { cx: "72", cy: "44", rx: "4", ry: "3" }), jsx("ellipse", { cx: "56", cy: "76", rx: "7.5", ry: "5" }), jsx("ellipse", { cx: "80", cy: "72", rx: "3.5", ry: "3" }), jsx("ellipse", { cx: "38", cy: "70", rx: "3", ry: "2.5" }), jsx("ellipse", { cx: "66", cy: "62", rx: "2.2", ry: "1.6" })] }), jsxs("g", { fill: "#cbd5e1", opacity: "0.32", children: [jsx("ellipse", { cx: "44", cy: "46", rx: "6", ry: "1.2" }), jsx("ellipse", { cx: "56", cy: "74", rx: "7.5", ry: "1.4" }), jsx("ellipse", { cx: "72", cy: "43", rx: "4", ry: "0.9" })] }), jsx("circle", { cx: "60", cy: "60", r: "48", fill: `url(#${moonShadowId})` }), jsx("ellipse", { cx: "44", cy: "42", rx: "14", ry: "8", fill: "#ffffff", opacity: "0.16" })] }));
+}
+
+const ORIGIN$1 = {
+    transformOrigin: '50% 50%',
+    transformBox: 'fill-box',
+};
+function PlanetSatellite({ id }) {
+    const reduceMotion = useReducedMotion();
+    const satelliteBodyId = `cosmic-satellite-body-${id}`;
+    const satellitePanelId = `cosmic-satellite-panel-${id}`;
+    return (jsxs("svg", { className: "cosmic-decor__planet cosmic-decor__planet--satellite", viewBox: "0 0 160 100", children: [jsxs("defs", { children: [jsxs("linearGradient", { id: satelliteBodyId, x1: "0", y1: "0", x2: "1", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: "#e2e8f0" }), jsx("stop", { offset: "50%", stopColor: "#94a3b8" }), jsx("stop", { offset: "100%", stopColor: "#334155" })] }), jsxs("linearGradient", { id: satellitePanelId, x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: "#1d4ed8" }), jsx("stop", { offset: "55%", stopColor: "#1e3a8a" }), jsx("stop", { offset: "100%", stopColor: "#0b1226" })] })] }), jsxs(motion.g, { style: ORIGIN$1, animate: reduceMotion ? { rotate: 0 } : { rotate: [-4, 4, -4] }, transition: reduceMotion
+                    ? { duration: 0 }
+                    : { duration: 9, repeat: Infinity, ease: 'easeInOut' }, children: [jsx("g", { fill: `url(#${satellitePanelId})`, stroke: "#0f172a", strokeWidth: "0.8", children: jsx("rect", { x: "6", y: "40", width: "46", height: "20", rx: "1.5" }) }), jsxs("g", { stroke: "#38bdf8", strokeWidth: "0.5", opacity: "0.55", children: [jsx("line", { x1: "18", y1: "40", x2: "18", y2: "60" }), jsx("line", { x1: "30", y1: "40", x2: "30", y2: "60" }), jsx("line", { x1: "42", y1: "40", x2: "42", y2: "60" }), jsx("line", { x1: "6", y1: "50", x2: "52", y2: "50" })] }), jsx("rect", { x: "52", y: "48", width: "10", height: "4", fill: "#475569" }), jsx("g", { fill: `url(#${satellitePanelId})`, stroke: "#0f172a", strokeWidth: "0.8", children: jsx("rect", { x: "108", y: "40", width: "46", height: "20", rx: "1.5" }) }), jsxs("g", { stroke: "#38bdf8", strokeWidth: "0.5", opacity: "0.55", children: [jsx("line", { x1: "120", y1: "40", x2: "120", y2: "60" }), jsx("line", { x1: "132", y1: "40", x2: "132", y2: "60" }), jsx("line", { x1: "144", y1: "40", x2: "144", y2: "60" }), jsx("line", { x1: "108", y1: "50", x2: "154", y2: "50" })] }), jsx("rect", { x: "98", y: "48", width: "10", height: "4", fill: "#475569" }), jsx("rect", { x: "62", y: "36", width: "36", height: "28", rx: "3", fill: `url(#${satelliteBodyId})`, stroke: "#1e293b", strokeWidth: "1" }), jsx("rect", { x: "68", y: "42", width: "10", height: "6", rx: "1", fill: "#22d3ee", opacity: "0.9" }), jsx("rect", { x: "82", y: "42", width: "10", height: "6", rx: "1", fill: "#0ea5e9", opacity: "0.65" }), jsx("line", { x1: "80", y1: "36", x2: "80", y2: "18", stroke: "#475569", strokeWidth: "1.5" }), jsx("path", { d: "M 70 22 Q 80 8 90 22 Z", fill: "#cbd5e1", stroke: "#1e293b", strokeWidth: "0.8" }), jsx("ellipse", { cx: "80", cy: "22", rx: "10", ry: "2.5", fill: "#475569" }), jsx("circle", { cx: "80", cy: "15", r: "1.6", fill: "#fb923c" }), jsx("line", { x1: "92", y1: "38", x2: "100", y2: "30", stroke: "#475569", strokeWidth: "1.2" }), jsx("circle", { cx: "100", cy: "30", r: "1.6", fill: "#22d3ee" }), jsx("circle", { cx: "92", cy: "56", r: "1.6", fill: "#22c55e" })] })] }));
+}
+
+const ORIGIN = {
+    transformOrigin: '50% 50%',
+    transformBox: 'fill-box',
+};
+function PlanetAstronaut({ id }) {
+    const reduceMotion = useReducedMotion();
+    const astronautSuitId = `cosmic-astronaut-suit-${id}`;
+    const astronautVisorId = `cosmic-astronaut-visor-${id}`;
+    return (jsxs("svg", { className: "cosmic-decor__planet cosmic-decor__planet--astronaut", viewBox: "0 0 110 140", children: [jsxs("defs", { children: [jsxs("radialGradient", { id: astronautSuitId, cx: "40%", cy: "35%", children: [jsx("stop", { offset: "0%", stopColor: "#ffffff" }), jsx("stop", { offset: "55%", stopColor: "#e2e8f0" }), jsx("stop", { offset: "100%", stopColor: "#475569" })] }), jsxs("radialGradient", { id: astronautVisorId, cx: "32%", cy: "28%", children: [jsx("stop", { offset: "0%", stopColor: "#bae6fd" }), jsx("stop", { offset: "40%", stopColor: "#1e3a8a" }), jsx("stop", { offset: "100%", stopColor: "#0b1226" })] })] }), jsxs(motion.g, { style: ORIGIN, animate: reduceMotion ? { rotate: 0 } : { rotate: [-5, 5, -5] }, transition: reduceMotion
+                    ? { duration: 0 }
+                    : { duration: 8, repeat: Infinity, ease: 'easeInOut' }, children: [jsx("rect", { x: "34", y: "56", width: "42", height: "42", rx: "6", fill: "#475569", stroke: "#0f172a", strokeWidth: "0.8" }), jsx("rect", { x: "40", y: "62", width: "30", height: "3", rx: "1", fill: "#1e293b" }), jsx("rect", { x: "40", y: "70", width: "30", height: "3", rx: "1", fill: "#1e293b" }), jsx("rect", { x: "40", y: "78", width: "30", height: "3", rx: "1", fill: "#1e293b" }), jsx("path", { d: "M 32 56 Q 32 50 40 48 H 70 Q 78 50 78 56 V 100 Q 78 108 72 108 H 38 Q 32 108 32 100 Z", fill: `url(#${astronautSuitId})`, stroke: "#0f172a", strokeWidth: "0.8" }), jsx("path", { d: "M 32 60 Q 18 64 14 82 Q 14 90 22 92 L 30 86 V 70 Z", fill: `url(#${astronautSuitId})`, stroke: "#0f172a", strokeWidth: "0.8" }), jsx("path", { d: "M 78 60 Q 92 64 96 82 Q 96 90 88 92 L 80 86 V 70 Z", fill: `url(#${astronautSuitId})`, stroke: "#0f172a", strokeWidth: "0.8" }), jsx("ellipse", { cx: "20", cy: "92", rx: "6", ry: "3", fill: "#1e293b" }), jsx("ellipse", { cx: "90", cy: "92", rx: "6", ry: "3", fill: "#1e293b" }), jsx("path", { d: "M 38 106 Q 36 124 44 132 Q 52 132 52 124 V 106 Z", fill: `url(#${astronautSuitId})`, stroke: "#0f172a", strokeWidth: "0.8" }), jsx("path", { d: "M 58 106 V 124 Q 58 132 66 132 Q 74 124 72 106 Z", fill: `url(#${astronautSuitId})`, stroke: "#0f172a", strokeWidth: "0.8" }), jsx("ellipse", { cx: "48", cy: "132", rx: "7", ry: "3", fill: "#1e293b" }), jsx("ellipse", { cx: "66", cy: "132", rx: "7", ry: "3", fill: "#1e293b" }), jsx("rect", { x: "44", y: "68", width: "22", height: "14", rx: "2", fill: "#cbd5e1", stroke: "#0f172a", strokeWidth: "0.6" }), jsx("circle", { cx: "50", cy: "75", r: "1.6", fill: "#22c55e" }), jsx("circle", { cx: "55", cy: "75", r: "1.6", fill: "#fb923c" }), jsx("circle", { cx: "60", cy: "75", r: "1.6", fill: "#22d3ee" }), jsx("circle", { cx: "55", cy: "36", r: "22", fill: "#f8fafc", stroke: "#1e293b", strokeWidth: "1" }), jsx("circle", { cx: "55", cy: "36", r: "17", fill: `url(#${astronautVisorId})` }), jsx("path", { d: "M 44 26 Q 50 22 60 24", stroke: "#ffffff", strokeWidth: "2", strokeLinecap: "round", opacity: "0.7", fill: "none" }), jsx("ellipse", { cx: "48", cy: "30", rx: "3", ry: "1.5", fill: "#ffffff", opacity: "0.55" })] })] }));
+}
+
+const ALL_PLANETS = [
+    'saturn',
+    'giant',
+    'earth',
+    'neptune',
+    'black-hole',
+    'sun',
+    'moon',
+    'satellite',
+    'astronaut',
+];
+const SPARKLE_PATH = 'M 6 0 L 7 5 L 12 6 L 7 7 L 6 12 L 5 7 L 0 6 L 5 5 Z';
+function CosmicDecor({ planets, showSparkles = true, decorVariant = 'page', }) {
+    const rawId = useId();
+    const id = rawId.replace(/:/g, '');
+    const effectivePlanets = planets ?? ALL_PLANETS;
+    const planetSet = new Set(effectivePlanets);
+    const rootClassName = decorVariant === 'page'
+        ? 'cosmic-decor cosmic-decor--page'
+        : 'cosmic-decor cosmic-decor--session';
+    return (jsxs("div", { className: rootClassName, "aria-hidden": true, children: [planetSet.has('saturn') && jsx(PlanetSaturn, { id: id }), planetSet.has('giant') && jsx(PlanetGiant, { id: id }), planetSet.has('earth') && jsx(PlanetEarth, { id: id }), planetSet.has('neptune') && jsx(PlanetNeptune, { id: id }), planetSet.has('black-hole') && jsx(PlanetBlackHole, { id: id }), planetSet.has('sun') && jsx(PlanetSun, { id: id }), planetSet.has('moon') && jsx(PlanetMoon, { id: id }), planetSet.has('satellite') && jsx(PlanetSatellite, { id: id }), planetSet.has('astronaut') && jsx(PlanetAstronaut, { id: id }), showSparkles && (jsxs(Fragment, { children: [jsx("svg", { className: "cosmic-decor__sparkle cosmic-decor__sparkle--1", viewBox: "0 0 12 12", children: jsx("path", { d: SPARKLE_PATH, fill: "#fcd34d" }) }), jsx("svg", { className: "cosmic-decor__sparkle cosmic-decor__sparkle--2", viewBox: "0 0 12 12", children: jsx("path", { d: SPARKLE_PATH, fill: "#ffffff" }) }), jsx("svg", { className: "cosmic-decor__sparkle cosmic-decor__sparkle--3", viewBox: "0 0 12 12", children: jsx("path", { d: SPARKLE_PATH, fill: "#fcd34d" }) }), jsx("svg", { className: "cosmic-decor__sparkle cosmic-decor__sparkle--4", viewBox: "0 0 12 12", children: jsx("path", { d: SPARKLE_PATH, fill: "#ffffff" }) })] }))] }));
+}
+
+function randomStar(w, h) {
+    const roll = Math.random();
+    let hue;
+    let sat;
+    let light;
+    if (roll > 0.85) {
+        hue = Math.random() * 60 + 200;
+        sat = 80;
+        light = 80;
+    }
+    else if (Math.random() > 0.9) {
+        hue = Math.random() * 40 + 10;
+        sat = 70;
+        light = 80;
+    }
+    else {
+        hue = 0;
+        sat = 0;
+        light = 100;
+    }
+    return {
+        x: Math.random() * w,
+        y: Math.random() * h,
+        r: Math.random() * 1.5 + 0.3,
+        alpha: Math.random() * 0.7 + 0.1,
+        twinkleSpeed: Math.random() * 0.02 + 0.005,
+        twinklePhase: Math.random() * Math.PI * 2,
+        hue,
+        sat,
+        light,
+    };
+}
+function generateStars(w, h) {
+    const count = Math.max(40, Math.floor((w * h) / 2500));
+    return Array.from({ length: count }, () => randomStar(w, h));
+}
+const CANVAS_STYLE = {
+    position: 'absolute',
+    inset: 0,
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    zIndex: 0,
+};
+function CosmicStarsCanvas({ containerRef }) {
+    const canvasRef = useRef(null);
+    const starsRef = useRef([]);
+    const shootingRef = useRef([]);
+    const timeRef = useRef(0);
+    const rafRef = useRef(0);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const container = containerRef.current;
+        if (!canvas || !container)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        const drawStars = (w, h, t, staticFlicker) => {
+            ctx.clearRect(0, 0, w, h);
+            const stars = starsRef.current;
+            for (const s of stars) {
+                const flicker = staticFlicker
+                    ? 0.85
+                    : Math.sin(t * s.twinkleSpeed * 60 + s.twinklePhase) * 0.3 + 0.7;
+                const a = s.alpha * flicker;
+                ctx.beginPath();
+                ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+                ctx.fillStyle = `hsla(${s.hue}, ${s.sat}%, ${s.light}%, ${a.toFixed(3)})`;
+                ctx.fill();
+                if (s.r > 1 && !staticFlicker) {
+                    ctx.beginPath();
+                    ctx.arc(s.x, s.y, s.r * 3, 0, Math.PI * 2);
+                    ctx.fillStyle = `hsla(${s.hue}, ${s.sat}%, ${s.light}%, ${(a * 0.1).toFixed(3)})`;
+                    ctx.fill();
+                }
+            }
+        };
+        const resize = () => {
+            const w = container.clientWidth;
+            const h = container.clientHeight;
+            const dpr = Math.min(window.devicePixelRatio ?? 1, 2);
+            canvas.width = Math.floor(w * dpr);
+            canvas.height = Math.floor(h * dpr);
+            canvas.style.width = `${w}px`;
+            canvas.style.height = `${h}px`;
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            starsRef.current = generateStars(w, h);
+            if (reduced) {
+                drawStars(w, h, 0, true);
+            }
+        };
+        resize();
+        const ro = new ResizeObserver(resize);
+        ro.observe(container);
+        if (reduced) {
+            return () => {
+                ro.disconnect();
+            };
+        }
+        const spawnShooting = () => {
+            if (shootingRef.current.length > 2)
+                return;
+            const w = container.clientWidth;
+            const h = container.clientHeight;
+            shootingRef.current.push({
+                x: Math.random() * w,
+                y: Math.random() * h * 0.5,
+                vx: (Math.random() * 4 + 3) * (Math.random() > 0.5 ? 1 : -1),
+                vy: Math.random() * 2 + 1.5,
+                life: 1,
+                decay: Math.random() * 0.015 + 0.008,
+                len: Math.random() * 40 + 20,
+            });
+        };
+        let last = performance.now();
+        const tick = (now) => {
+            const w = container.clientWidth;
+            const h = container.clientHeight;
+            const dt = Math.min(0.05, (now - last) / 1000);
+            last = now;
+            timeRef.current += dt;
+            drawStars(w, h, timeRef.current, false);
+            const ssList = shootingRef.current;
+            for (let i = ssList.length - 1; i >= 0; i--) {
+                const ss = ssList[i];
+                ss.x += ss.vx;
+                ss.y += ss.vy;
+                ss.life -= ss.decay;
+                if (ss.life <= 0) {
+                    ssList.splice(i, 1);
+                    continue;
+                }
+                const gradient = ctx.createLinearGradient(ss.x, ss.y, ss.x - (ss.vx * ss.len) / 4, ss.y - (ss.vy * ss.len) / 4);
+                gradient.addColorStop(0, `rgba(255,255,255,${ss.life})`);
+                gradient.addColorStop(1, 'rgba(255,255,255,0)');
+                ctx.strokeStyle = gradient;
+                ctx.lineWidth = 1.5;
+                ctx.beginPath();
+                ctx.moveTo(ss.x, ss.y);
+                ctx.lineTo(ss.x - (ss.vx * ss.len) / 4, ss.y - (ss.vy * ss.len) / 4);
+                ctx.stroke();
+                ctx.beginPath();
+                ctx.arc(ss.x, ss.y, 2, 0, Math.PI * 2);
+                ctx.fillStyle = `rgba(255,255,255,${ss.life})`;
+                ctx.fill();
+            }
+            if (Math.random() < 0.003)
+                spawnShooting();
+            rafRef.current = requestAnimationFrame(tick);
+        };
+        rafRef.current = requestAnimationFrame(tick);
+        return () => {
+            ro.disconnect();
+            cancelAnimationFrame(rafRef.current);
+        };
+    }, [containerRef]);
+    return jsx("canvas", { ref: canvasRef, style: CANVAS_STYLE, "aria-hidden": true });
+}
+
+var css_248z$2 = ".journey-step,.journey-step__badge{align-items:center;display:inline-flex;justify-content:center;position:relative}.journey-step__svg{display:block;overflow:visible}.journey-step__interactive{align-items:center;background:transparent;border:0;cursor:pointer;display:inline-flex;height:100%;justify-content:center;padding:0;position:relative;transition:transform .18s ease;width:100%}.journey-step__interactive:hover:not([aria-disabled=true]):not(:disabled){transform:translateY(-2px)}.journey-step__interactive:disabled,.journey-step__interactive[aria-disabled=true]{cursor:not-allowed;pointer-events:none}.journey-step__icon{align-items:center;color:#fff;display:inline-flex;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.3));justify-content:center;left:50%;pointer-events:none;position:absolute;transform:translate(-50%,-50%);z-index:2}.journey-step__icon>.anticon,.journey-step__icon>.anticon>svg,.journey-step__icon>svg{font-size:inherit;height:100%;width:100%}.journey-step__icon.is-locked{color:#cbd5e1;filter:none}.journey-step.is-locked{opacity:.65}.journey-step.is-inactive-state .journey-step__svg{filter:saturate(.35) brightness(.85)}.journey-step.is-active .journey-step__interactive:hover:not(:disabled) .journey-step__svg{filter:brightness(1.06) drop-shadow(0 0 8px rgba(255,255,255,.18))}";
+styleInject(css_248z$2,{"insertAt":"top"});
+
+function buildWavyCirclePath(cx, cy, radius, amplitude, waves) {
+    const steps = waves * 8;
+    let d = '';
+    for (let i = 0; i <= steps; i += 1) {
+        const t = (i / steps) * Math.PI * 2;
+        const r = radius + Math.sin(t * waves) * amplitude;
+        const x = cx + Math.cos(t) * r;
+        const y = cy + Math.sin(t) * r;
+        d += i === 0 ? `M ${x.toFixed(2)} ${y.toFixed(2)} ` : `L ${x.toFixed(2)} ${y.toFixed(2)} `;
+    }
+    return `${d}Z`;
+}
+const circleLaurelFrame = {
+    kind: 'circleLaurel',
+    layout(scale) {
+        const bodyPx = 110 * scale;
+        const ornamentPadX = 18 * scale;
+        const ornamentPadY = 12 * scale;
+        const width = bodyPx + ornamentPadX * 2;
+        const height = bodyPx * 1.073 + ornamentPadY * 2;
+        const cardW = bodyPx * 0.58;
+        const cardH = bodyPx * 0.58;
+        return {
+            width,
+            height,
+            bodyCenterX: width / 2,
+            bodyCenterY: height / 2,
+            iconCenterX: width / 2,
+            iconCenterY: height / 2,
+            iconWidth: cardW * 0.7,
+            iconHeight: cardH * 0.7,
+        };
+    },
+    render({ theme, scale, layout, progress }) {
+        const bodyPx = 110 * scale;
+        const cx = layout.width / 2;
+        const cy = layout.height / 2;
+        const outerR = bodyPx * 0.44;
+        const midR = outerR * 0.88;
+        const innerR = outerR * 0.77;
+        const cardR = outerR * 0.56;
+        const shineR = cardR * 0.74;
+        const outerWavyPath = buildWavyCirclePath(cx, cy, outerR, 1.8 * scale, 14);
+        const midWavyPath = buildWavyCirclePath(cx, cy, midR, 1.4 * scale, 14);
+        const innerWavyPath = buildWavyCirclePath(cx, cy, innerR, 1.0 * scale, 14);
+        return (jsxs("svg", { className: "journey-step__svg", width: layout.width, height: layout.height, viewBox: `0 0 ${layout.width} ${layout.height}`, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", overflow: "visible", children: [jsx("ellipse", { cx: cx, cy: cy + 4 * scale, rx: outerR, ry: outerR, fill: theme.shadow, opacity: 0.5 }), jsx("path", { d: outerWavyPath, fill: theme.outer }), jsx("path", { d: outerWavyPath, fill: "none", stroke: theme.outerStroke, strokeWidth: 2.5 * scale, opacity: 0.65 }), jsx("circle", { cx: cx, cy: cy, r: midR, fill: theme.mid }), jsx("circle", { cx: cx, cy: cy, r: innerR, fill: theme.inner }), jsx("circle", { cx: cx, cy: cy, r: innerR * 0.88, fill: "none", stroke: theme.innerStroke, strokeWidth: scale, opacity: 0.55 }), progress !== undefined && (jsxs(Fragment, { children: [jsx("path", { d: midWavyPath, fill: "none", stroke: theme.shadow, strokeWidth: 4.5 * scale, strokeLinecap: "round", strokeLinejoin: "round", opacity: 0.55, pathLength: 1000 }), jsx("path", { d: innerWavyPath, fill: "none", stroke: theme.outerStroke, strokeWidth: 4.5 * scale, strokeLinecap: "round", strokeLinejoin: "round", pathLength: 1000, strokeDasharray: 1000, strokeDashoffset: 1000 * (1 - progress / 100) })] })), jsx("circle", { cx: cx, cy: cy, r: cardR, fill: theme.card }), jsx("path", { d: [
+                        `M ${cx - shineR * 0.75} ${cy - shineR * 0.7}`,
+                        `A ${shineR} ${shineR * 0.8} 0 0 1 ${cx + shineR * 0.75} ${cy - shineR * 0.7}`,
+                        `L ${cx + shineR * 0.55} ${cy - shineR * 0.2}`,
+                        `A ${shineR * 0.72} ${shineR * 0.58} 0 0 0 ${cx - shineR * 0.55} ${cy - shineR * 0.2}`,
+                        'Z',
+                    ].join(' '), fill: theme.cardShine, opacity: 0.55 })] }));
+    },
+};
+
+const THEMES = {
+    blue: {
+        shadow: '#0A1F4A',
+        outer: '#1A3A8A',
+        outerStroke: '#4A80D8',
+        mid: '#1E3F94',
+        inner: '#1A3680',
+        innerStroke: '#3A6AC8',
+        card: '#D63EA0',
+        cardShine: '#F07EC0',
+        bookmark: '#A02878',
+    },
+    green: {
+        shadow: '#062810',
+        outer: '#0B4A1E',
+        outerStroke: '#2AAA50',
+        mid: '#0E5422',
+        inner: '#0C4A1C',
+        innerStroke: '#40C868',
+        card: '#1AC84A',
+        cardShine: '#70EE90',
+        bookmark: '#0A8830',
+    },
+    purple: {
+        shadow: '#1A0840',
+        outer: '#2E1060',
+        outerStroke: '#7A40E0',
+        mid: '#341268',
+        inner: '#2C1060',
+        innerStroke: '#9A60F0',
+        card: '#8030D8',
+        cardShine: '#C080FF',
+        bookmark: '#5010A0',
+    },
+    orange: {
+        shadow: '#3A1400',
+        outer: '#6A2800',
+        outerStroke: '#E86010',
+        mid: '#7A3000',
+        inner: '#6A2800',
+        innerStroke: '#F09040',
+        card: '#E86010',
+        cardShine: '#FFAA60',
+        bookmark: '#A03800',
+    },
+    red: {
+        shadow: '#3A0A0A',
+        outer: '#7A1010',
+        outerStroke: '#E03030',
+        mid: '#8A1818',
+        inner: '#701010',
+        innerStroke: '#F06060',
+        card: '#CC2020',
+        cardShine: '#FF8080',
+        bookmark: '#901010',
+    },
+    gold: {
+        shadow: '#3A2800',
+        outer: '#7A5000',
+        outerStroke: '#E8C020',
+        mid: '#8A5C00',
+        inner: '#704800',
+        innerStroke: '#F0D840',
+        card: '#C89000',
+        cardShine: '#FFE060',
+        bookmark: '#906800',
+    },
+};
+const STEP_TYPE_TO_THEME = {
+    challenge: 'green',
+    course: 'purple',
+    tutorial: 'blue',
+    publication: 'orange',
+    evaluation: 'gold',
+    certificate: 'green',
+};
+const STEP_TYPE_TO_FRAME = {
+    challenge: 'pentagon',
+    course: 'hexagonWings',
+    tutorial: 'circleLaurel',
+    publication: 'hexagonRibbon',
+    evaluation: 'shieldWings',
+    certificate: 'pentagonCrown',
+};
+const INACTIVE_THEME = {
+    shadow: '#0a0a0a',
+    outer: '#2a2f3a',
+    outerStroke: '#4a5160',
+    mid: '#2f3441',
+    inner: '#262b36',
+    innerStroke: '#535a6c',
+    card: '#3f4a5e',
+    cardShine: '#5b6577',
+    bookmark: '#2a3142',
+};
+function hexToRgb(hex) {
+    if (!hex)
+        return null;
+    const normalized = hex.replace('#', '').trim();
+    const expanded = normalized.length === 3
+        ? normalized
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        : normalized;
+    if (!/^[0-9a-fA-F]{6}$/.test(expanded))
+        return null;
+    const int = Number.parseInt(expanded, 16);
+    return { r: (int >> 16) & 255, g: (int >> 8) & 255, b: int & 255 };
+}
+function rgbToHsl(r, g, b) {
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const l = (max + min) / 2;
+    let h = 0;
+    let s = 0;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case rn:
+                h = (gn - bn) / d + (gn < bn ? 6 : 0);
+                break;
+            case gn:
+                h = (bn - rn) / d + 2;
+                break;
+            default:
+                h = (rn - gn) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return { h: h * 360, s: s * 100, l: l * 100 };
+}
+function hsl(h, s, l) {
+    const clamp = (v) => Math.max(0, Math.min(100, v));
+    return `hsl(${h.toFixed(2)} ${clamp(s).toFixed(2)}% ${clamp(l).toFixed(2)}%)`;
+}
+function buildThemeFromColor(color) {
+    const rgb = hexToRgb(color);
+    if (!rgb)
+        return THEMES.blue;
+    const { h, s, l } = rgbToHsl(rgb.r, rgb.g, rgb.b);
+    return {
+        shadow: hsl(h, s, Math.max(8, l - 40)),
+        outer: hsl(h, s, Math.max(14, l - 28)),
+        outerStroke: hsl(h, s, Math.min(72, l + 8)),
+        mid: hsl(h, s, Math.max(18, l - 22)),
+        inner: hsl(h, s, Math.max(14, l - 28)),
+        innerStroke: hsl(h, s, Math.min(80, l + 18)),
+        card: hsl(h, s, l),
+        cardShine: hsl(h, s, Math.min(88, l + 24)),
+        bookmark: hsl(h, s, Math.max(20, l - 16)),
+    };
+}
+function polygonPoints(cx, cy, radius, sides, rotationDeg = 0) {
+    const rotationRad = (rotationDeg * Math.PI) / 180;
+    const points = [];
+    for (let i = 0; i < sides; i += 1) {
+        const angle = rotationRad + (Math.PI * 2 * i) / sides;
+        points.push([cx + Math.cos(angle) * radius, cy + Math.sin(angle) * radius]);
+    }
+    return points;
+}
+function norm([x, y]) {
+    const len = Math.sqrt(x * x + y * y) || 1;
+    return [x / len, y / len];
+}
+function scalePts(pts, cx, cy, factor) {
+    return pts.map(([x, y]) => [cx + (x - cx) * factor, cy + (y - cy) * factor]);
+}
+function roundedPolygonPath(pts, radius) {
+    const n = pts.length;
+    let d = '';
+    for (let i = 0; i < n; i += 1) {
+        const prev = pts[(i - 1 + n) % n];
+        const curr = pts[i];
+        const next = pts[(i + 1) % n];
+        const v1 = norm([prev[0] - curr[0], prev[1] - curr[1]]);
+        const v2 = norm([next[0] - curr[0], next[1] - curr[1]]);
+        const p1 = [curr[0] + v1[0] * radius, curr[1] + v1[1] * radius];
+        const p2 = [curr[0] + v2[0] * radius, curr[1] + v2[1] * radius];
+        d +=
+            i === 0
+                ? `M ${p1[0].toFixed(2)},${p1[1].toFixed(2)} `
+                : `L ${p1[0].toFixed(2)},${p1[1].toFixed(2)} `;
+        d += `Q ${curr[0].toFixed(2)},${curr[1].toFixed(2)} ${p2[0].toFixed(2)},${p2[1].toFixed(2)} `;
+    }
+    return `${d}Z`;
+}
+function crownPath(cx, baseY, width, height) {
+    const half = width / 2;
+    const topY = baseY - height;
+    return [
+        `M ${cx - half} ${baseY}`,
+        `L ${cx - half * 0.55} ${topY + height * 0.55}`,
+        `L ${cx - half * 0.2} ${topY + height * 0.05}`,
+        `L ${cx} ${topY + height * 0.48}`,
+        `L ${cx + half * 0.2} ${topY}`,
+        `L ${cx + half * 0.55} ${topY + height * 0.56}`,
+        `L ${cx + half} ${baseY}`,
+        'Z',
+    ].join(' ');
+}
+
+const hexagonRibbonFrame = {
+    kind: 'hexagonRibbon',
+    layout(scale) {
+        const bodyPx = 110 * scale;
+        const ornamentPad = 14 * scale;
+        const width = bodyPx;
+        const height = bodyPx * 1.073 + ornamentPad * 2;
+        const cardW = bodyPx * 0.6;
+        const cardH = bodyPx * 0.46;
+        return {
+            width,
+            height,
+            bodyCenterX: width / 2,
+            bodyCenterY: height / 2,
+            iconCenterX: width / 2,
+            iconCenterY: height / 2 - 3.8 * scale,
+            iconWidth: cardW * 0.8,
+            iconHeight: cardH * 0.8,
+        };
+    },
+    render({ theme, scale, layout, progress }) {
+        const bodyPx = 110 * scale;
+        const cx = layout.width / 2;
+        const cy = layout.height / 2 - 4 * scale;
+        const radius = bodyPx * 0.44;
+        const pts = polygonPoints(cx, cy, radius, 6, -90);
+        const r = 7 * scale;
+        const pathOuter = roundedPolygonPath(pts, r);
+        const pathMid = roundedPolygonPath(scalePts(pts, cx, cy, 0.9), r * 0.9);
+        const pathInner = roundedPolygonPath(scalePts(pts, cx, cy, 0.8), r * 0.8);
+        const pathShadow = roundedPolygonPath(pts.map(([x, y]) => [x, y + 4 * scale]), r);
+        const cardRadius = radius * 0.65;
+        const cardCy = cy + scale * 0.2;
+        const cardPts = polygonPoints(cx, cardCy, cardRadius, 6, -90);
+        const cardPath = roundedPolygonPath(cardPts, 4 * scale);
+        const [top, upperRight, , , , upperLeft] = cardPts;
+        const lerp = (a, b, t) => a + (b - a) * t;
+        const shineTopY = top[1] + scale * 1.4;
+        const shineRightOuter = [
+            lerp(top[0], upperRight[0], 0.9),
+            lerp(top[1], upperRight[1], 0.9),
+        ];
+        const shineRightInner = [
+            lerp(top[0], upperRight[0], 0.56),
+            lerp(shineTopY, upperRight[1], 0.58),
+        ];
+        const shineLeftInner = [
+            lerp(top[0], upperLeft[0], 0.56),
+            lerp(shineTopY, upperLeft[1], 0.58),
+        ];
+        const shineLeftOuter = [
+            lerp(top[0], upperLeft[0], 0.9),
+            lerp(top[1], upperLeft[1], 0.9),
+        ];
+        const shinePath = [
+            `M ${cx} ${shineTopY}`,
+            `L ${shineRightOuter[0]} ${shineRightOuter[1]}`,
+            `L ${shineRightInner[0]} ${shineRightInner[1]}`,
+            `L ${shineLeftInner[0]} ${shineLeftInner[1]}`,
+            `L ${shineLeftOuter[0]} ${shineLeftOuter[1]}`,
+            'Z',
+        ].join(' ');
+        return (jsxs("svg", { className: "journey-step__svg", width: layout.width, height: layout.height, viewBox: `0 0 ${layout.width} ${layout.height}`, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", overflow: "visible", children: [jsx("path", { d: pathShadow, fill: theme.shadow, opacity: 0.55 }), jsx("path", { d: pathOuter, fill: theme.outer }), jsx("path", { d: pathOuter, fill: "none", stroke: theme.outerStroke, strokeWidth: 2.5 * scale, opacity: 0.65 }), jsx("path", { d: pathMid, fill: theme.mid }), jsx("path", { d: pathInner, fill: theme.inner }), jsx("path", { d: roundedPolygonPath(scalePts(pts, cx, cy, 0.72), r * 0.72), fill: "none", stroke: theme.innerStroke, strokeWidth: scale, opacity: 0.55 }), progress !== undefined && (jsxs(Fragment, { children: [jsx("path", { d: pathMid, fill: "none", stroke: theme.shadow, strokeWidth: 4.5 * scale, strokeLinecap: "round", strokeLinejoin: "round", opacity: 0.55, pathLength: 1000 }), jsx("path", { d: pathInner, fill: "none", stroke: theme.outerStroke, strokeWidth: 4.5 * scale, strokeLinecap: "round", strokeLinejoin: "round", pathLength: 1000, strokeDasharray: 1000, strokeDashoffset: 1000 * (1 - progress / 100) })] })), jsx("path", { d: cardPath, fill: theme.card }), jsx("path", { d: shinePath, fill: theme.cardShine, opacity: 0.55 })] }));
+    },
+};
+
+const hexagonWingsFrame = {
+    kind: 'hexagonWings',
+    layout(scale) {
+        const bodyPx = 110 * scale;
+        const ornamentPad = 24 * scale;
+        const width = bodyPx + ornamentPad * 2;
+        const height = bodyPx * 1.073;
+        const cardW = bodyPx * 0.6;
+        const cardH = bodyPx * 0.46;
+        return {
+            width,
+            height,
+            bodyCenterX: width / 2,
+            bodyCenterY: height / 2,
+            iconCenterX: width / 2,
+            iconCenterY: bodyPx * 0.55 + scale * 0.2,
+            iconWidth: cardW * 0.7,
+            iconHeight: cardH * 0.7,
+        };
+    },
+    render({ theme, scale, layout, progress }) {
+        const bodyPx = 110 * scale;
+        const cx = layout.width / 2;
+        const cy = bodyPx * 0.55;
+        const radius = bodyPx * 0.45;
+        const pts = polygonPoints(cx, cy, radius, 6, -30);
+        const r = 7 * scale;
+        const pathOuter = roundedPolygonPath(pts, r);
+        const pathMid = roundedPolygonPath(scalePts(pts, cx, cy, 0.9), r * 0.9);
+        const pathInner = roundedPolygonPath(scalePts(pts, cx, cy, 0.8), r * 0.8);
+        const pathShadow = roundedPolygonPath(pts.map(([x, y]) => [x, y + 4 * scale]), r);
+        const cardPts = polygonPoints(cx, cy + scale * 0.2, radius * 0.56, 6, -30);
+        const cardPath = roundedPolygonPath(cardPts, 3.5 * scale);
+        const top = cardPts[5];
+        const upperRight = cardPts[0];
+        const upperLeft = cardPts[4];
+        const lerp = (a, b, t) => a + (b - a) * t;
+        const shinePath = [
+            `M ${top[0]} ${top[1] + 1.6 * scale}`,
+            `L ${lerp(top[0], upperRight[0], 0.9)} ${lerp(top[1], upperRight[1], 0.9)}`,
+            `L ${lerp(top[0], upperRight[0], 0.62)} ${lerp(top[1], upperRight[1], 0.62) + 1.4 * scale}`,
+            `L ${lerp(top[0], upperLeft[0], 0.62)} ${lerp(top[1], upperLeft[1], 0.62) + 1.4 * scale}`,
+            `L ${lerp(top[0], upperLeft[0], 0.9)} ${lerp(top[1], upperLeft[1], 0.9)}`,
+            'Z',
+        ].join(' ');
+        return (jsxs("svg", { className: "journey-step__svg", width: layout.width, height: layout.height, viewBox: `0 0 ${layout.width} ${layout.height}`, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", overflow: "visible", children: [jsx("path", { d: pathShadow, fill: theme.shadow, opacity: 0.55 }), jsx("path", { d: pathOuter, fill: theme.outer }), jsx("path", { d: pathOuter, fill: "none", stroke: theme.outerStroke, strokeWidth: 2.5 * scale, opacity: 0.65 }), jsx("path", { d: pathMid, fill: theme.mid }), jsx("path", { d: pathInner, fill: theme.inner }), jsx("path", { d: roundedPolygonPath(scalePts(pts, cx, cy, 0.72), r * 0.72), fill: "none", stroke: theme.innerStroke, strokeWidth: scale, opacity: 0.55 }), progress !== undefined && (jsxs(Fragment, { children: [jsx("path", { d: pathMid, fill: "none", stroke: theme.shadow, strokeWidth: 4.5 * scale, strokeLinecap: "round", strokeLinejoin: "round", opacity: 0.55, pathLength: 1000 }), jsx("path", { d: pathInner, fill: "none", stroke: theme.outerStroke, strokeWidth: 4.5 * scale, strokeLinecap: "round", strokeLinejoin: "round", pathLength: 1000, strokeDasharray: 1000, strokeDashoffset: 1000 * (1 - progress / 100) })] })), jsx("path", { d: cardPath, fill: theme.card }), jsx("path", { d: shinePath, fill: theme.cardShine, opacity: 0.55 })] }));
+    },
+};
+
+const pentagonCrownFrame = {
+    kind: 'pentagonCrown',
+    layout(scale) {
+        const bodyPx = 110 * scale;
+        const ornamentPad = 14 * scale;
+        const width = bodyPx;
+        const height = bodyPx * 1.073 + ornamentPad * 2;
+        const cardW = bodyPx * 0.56;
+        const cardH = bodyPx * 0.43;
+        return {
+            width,
+            height,
+            bodyCenterX: width / 2,
+            bodyCenterY: height / 2,
+            iconCenterX: width / 2,
+            iconCenterY: height / 2 + 2 * scale,
+            iconWidth: cardW * 0.7,
+            iconHeight: cardH * 0.7,
+        };
+    },
+    render({ theme, scale, layout, progress }) {
+        const bodyPx = 110 * scale;
+        const cx = layout.width / 2;
+        const cy = layout.height / 2 + 4 * scale;
+        const pts = polygonPoints(cx, cy, bodyPx * 0.44, 5, -90);
+        const r = 7 * scale;
+        const pathOuter = roundedPolygonPath(pts, r);
+        const pathMid = roundedPolygonPath(scalePts(pts, cx, cy, 0.9), r * 0.9);
+        const pathInner = roundedPolygonPath(scalePts(pts, cx, cy, 0.8), r * 0.8);
+        const pathShadow = roundedPolygonPath(pts.map(([x, y]) => [x, y + 4 * scale]), r);
+        const crown = crownPath(cx, cy - bodyPx * 0.38, 34 * scale, 18 * scale);
+        const cardPts = polygonPoints(cx, cy + scale * 0.4, bodyPx * 0.23, 5, -90);
+        const cardPath = roundedPolygonPath(cardPts, 4 * scale);
+        const [top, rightTop, , , leftTop] = cardPts;
+        const shinePath = [
+            `M ${top[0]} ${top[1] + 1.3 * scale}`,
+            `L ${rightTop[0] - 1.2 * scale} ${rightTop[1] + 2 * scale}`,
+            `L ${cx} ${cy - 1 * scale}`,
+            `L ${leftTop[0] + 1.2 * scale} ${leftTop[1] + 2 * scale}`,
+            'Z',
+        ].join(' ');
+        return (jsxs("svg", { className: "journey-step__svg", width: layout.width, height: layout.height, viewBox: `0 0 ${layout.width} ${layout.height}`, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", overflow: "visible", children: [jsx("path", { d: crown, fill: theme.outer }), jsx("path", { d: crown, fill: "none", stroke: theme.outerStroke, strokeWidth: 1.4 * scale }), jsx("circle", { cx: cx, cy: cy - bodyPx * 0.46, r: 3.8 * scale, fill: theme.cardShine }), jsx("path", { d: pathShadow, fill: theme.shadow, opacity: 0.55 }), jsx("path", { d: pathOuter, fill: theme.outer }), jsx("path", { d: pathOuter, fill: "none", stroke: theme.outerStroke, strokeWidth: 2.5 * scale, opacity: 0.65 }), jsx("path", { d: pathMid, fill: theme.mid }), jsx("path", { d: pathInner, fill: theme.inner }), jsx("path", { d: roundedPolygonPath(scalePts(pts, cx, cy, 0.72), r * 0.72), fill: "none", stroke: theme.innerStroke, strokeWidth: scale, opacity: 0.55 }), progress !== undefined && (jsxs(Fragment, { children: [jsx("path", { d: pathMid, fill: "none", stroke: theme.shadow, strokeWidth: 4.5 * scale, strokeLinecap: "round", strokeLinejoin: "round", opacity: 0.55, pathLength: 1000 }), jsx("path", { d: pathInner, fill: "none", stroke: theme.outerStroke, strokeWidth: 4.5 * scale, strokeLinecap: "round", strokeLinejoin: "round", pathLength: 1000, strokeDasharray: 1000, strokeDashoffset: 1000 * (1 - progress / 100) })] })), jsx("path", { d: cardPath, fill: theme.card }), jsx("path", { d: shinePath, fill: theme.cardShine, opacity: 0.55 })] }));
+    },
+};
+
+const BASE_PTS = [
+    [27, 16],
+    [83, 16],
+    [101, 70],
+    [55, 103],
+    [9, 70],
+];
+const CX = 55;
+const CY = 60;
+const CORNER_RADIUS = 8;
+const SVG_HEIGHT_RATIO = 1.073;
+const pentagonFrame = {
+    kind: 'pentagon',
+    layout(scale) {
+        const bodyPx = 110 * scale;
+        const height = bodyPx * SVG_HEIGHT_RATIO;
+        const cardW = bodyPx * 0.58;
+        const cardH = bodyPx * 0.45;
+        return {
+            width: bodyPx,
+            height,
+            bodyCenterX: bodyPx / 2,
+            bodyCenterY: height / 2,
+            iconCenterX: bodyPx / 2,
+            iconCenterY: bodyPx * 0.5,
+            iconWidth: cardW * 0.7,
+            iconHeight: cardH * 0.7,
+        };
+    },
+    render({ theme, scale, layout, progress }) {
+        const pts = BASE_PTS.map(([x, y]) => [x * scale, y * scale]);
+        const cx = CX * scale;
+        const cy = CY * scale;
+        const r = CORNER_RADIUS * scale;
+        const shadowPts = pts.map(([x, y]) => [x, y + 4 * scale]);
+        const pathShadow = roundedPolygonPath(shadowPts, r);
+        const pathOuter = roundedPolygonPath(pts, r);
+        const pathMid = roundedPolygonPath(scalePts(pts, cx, cy, 0.92), r * 0.92);
+        const pathInner = roundedPolygonPath(scalePts(pts, cx, cy, 0.84), r * 0.84);
+        const pathFace = roundedPolygonPath(scalePts(pts, cx, cy, 0.76), r * 0.76);
+        const cardPts = scalePts(pts, cx, cy, 0.58);
+        const cardPath = roundedPolygonPath(cardPts, r * 0.58);
+        const shinePts = scalePts(cardPts, cx, cy - 3 * scale, 0.85)
+            .map(([x, y]) => [x, y - 2 * scale])
+            .slice(0, 3);
+        const shinePath = [
+            `M ${shinePts[0][0]} ${shinePts[0][1]}`,
+            `L ${shinePts[1][0]} ${shinePts[1][1]}`,
+            `L ${shinePts[2][0]} ${shinePts[2][1]}`,
+            `L ${cx} ${cy - 2 * scale}`,
+            'Z',
+        ].join(' ');
+        return (jsxs("svg", { className: "journey-step__svg", width: layout.width, height: layout.height, viewBox: `0 0 ${layout.width} ${layout.height}`, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", overflow: "visible", children: [jsx("path", { d: pathShadow, fill: theme.shadow, opacity: 0.55 }), jsx("path", { d: pathOuter, fill: theme.outer }), jsx("path", { d: pathOuter, fill: "none", stroke: theme.outerStroke, strokeWidth: 2.5 * scale, opacity: 0.65 }), jsx("path", { d: pathMid, fill: theme.mid }), jsx("path", { d: pathInner, fill: theme.inner }), jsx("path", { d: pathFace, fill: "none", stroke: theme.innerStroke, strokeWidth: scale, opacity: 0.5 }), progress !== undefined && (jsxs(Fragment, { children: [jsx("path", { d: pathMid, fill: "none", stroke: theme.shadow, strokeWidth: 4.5 * scale, strokeLinecap: "round", strokeLinejoin: "round", opacity: 0.55, pathLength: 1000 }), jsx("path", { d: pathInner, fill: "none", stroke: theme.outerStroke, strokeWidth: 4.5 * scale, strokeLinecap: "round", strokeLinejoin: "round", pathLength: 1000, strokeDasharray: 1000, strokeDashoffset: 1000 * (1 - progress / 100) })] })), jsx("path", { d: cardPath, fill: theme.card }), jsx("path", { d: shinePath, fill: theme.cardShine, opacity: 0.55 })] }));
+    },
+};
+
+function classicShieldPath(cx, cy, w, h) {
+    const l = cx - w / 2;
+    const r = cx + w / 2;
+    const t = cy - h * 0.48;
+    const m = cy + h * 0.08;
+    const b = cy + h * 0.52;
+    return [
+        `M ${(l + w * 0.06).toFixed(2)} ${t.toFixed(2)}`,
+        `L ${(r - w * 0.06).toFixed(2)} ${t.toFixed(2)}`,
+        `Q ${r.toFixed(2)} ${t.toFixed(2)} ${r.toFixed(2)} ${(t + h * 0.06).toFixed(2)}`,
+        `L ${r.toFixed(2)} ${m.toFixed(2)}`,
+        `C ${r.toFixed(2)} ${(b - h * 0.08).toFixed(2)} ${(cx + w * 0.18).toFixed(2)} ${b.toFixed(2)} ${cx.toFixed(2)} ${b.toFixed(2)}`,
+        `C ${(cx - w * 0.18).toFixed(2)} ${b.toFixed(2)} ${l.toFixed(2)} ${(b - h * 0.08).toFixed(2)} ${l.toFixed(2)} ${m.toFixed(2)}`,
+        `L ${l.toFixed(2)} ${(t + h * 0.06).toFixed(2)}`,
+        `Q ${l.toFixed(2)} ${t.toFixed(2)} ${(l + w * 0.06).toFixed(2)} ${t.toFixed(2)}`,
+        'Z',
+    ].join(' ');
+}
+const shieldWingsFrame = {
+    kind: 'shieldWings',
+    layout(scale) {
+        const bodyPx = 110 * scale;
+        const width = bodyPx;
+        const height = bodyPx * 1.15;
+        const shieldW = bodyPx * 0.82;
+        const shieldH = bodyPx * 0.9;
+        const cardW = shieldW * 0.58;
+        const cardH = shieldH * 0.58;
+        return {
+            width,
+            height,
+            bodyCenterX: width / 2,
+            bodyCenterY: height * 0.46,
+            iconCenterX: width / 2,
+            iconCenterY: height * 0.44,
+            iconWidth: cardW * 0.72,
+            iconHeight: cardH * 0.72,
+        };
+    },
+    render({ theme, scale, layout, progress }) {
+        const bodyPx = 110 * scale;
+        const cx = layout.width / 2;
+        const cy = layout.height * 0.46;
+        const sw = bodyPx * 0.82;
+        const sh = bodyPx * 0.9;
+        const pathShadow = classicShieldPath(cx, cy + 4 * scale, sw, sh);
+        const pathOuter = classicShieldPath(cx, cy, sw, sh);
+        const pathMid = classicShieldPath(cx, cy, sw * 0.9, sh * 0.9);
+        const pathInner = classicShieldPath(cx, cy, sw * 0.8, sh * 0.8);
+        const pathFace = classicShieldPath(cx, cy, sw * 0.72, sh * 0.72);
+        const pathCard = classicShieldPath(cx, cy + 2 * scale, sw * 0.58, sh * 0.58);
+        const cw = sw * 0.58;
+        const ch = sh * 0.58;
+        const cardTop = cy + 2 * scale - ch * 0.48;
+        const shineW1 = cw * 0.78;
+        const shineW2 = cw * 0.5;
+        const shineH = ch * 0.18;
+        const shinePath = [
+            `M ${(cx - shineW1 / 2).toFixed(2)} ${(cardTop + scale).toFixed(2)}`,
+            `L ${(cx + shineW1 / 2).toFixed(2)} ${(cardTop + scale).toFixed(2)}`,
+            `L ${(cx + shineW2 / 2).toFixed(2)} ${(cardTop + shineH).toFixed(2)}`,
+            `L ${(cx - shineW2 / 2).toFixed(2)} ${(cardTop + shineH).toFixed(2)}`,
+            'Z',
+        ].join(' ');
+        return (jsxs("svg", { className: "journey-step__svg", width: layout.width, height: layout.height, viewBox: `0 0 ${layout.width} ${layout.height}`, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", overflow: "visible", children: [jsx("path", { d: pathShadow, fill: theme.shadow, opacity: 0.55 }), jsx("path", { d: pathOuter, fill: theme.outer }), jsx("path", { d: pathOuter, fill: "none", stroke: theme.outerStroke, strokeWidth: 2.5 * scale, opacity: 0.65 }), jsx("path", { d: pathMid, fill: theme.mid }), jsx("path", { d: pathInner, fill: theme.inner }), jsx("path", { d: pathFace, fill: "none", stroke: theme.innerStroke, strokeWidth: scale, opacity: 0.55 }), progress !== undefined && (jsxs(Fragment, { children: [jsx("path", { d: pathMid, fill: "none", stroke: theme.shadow, strokeWidth: 4.5 * scale, strokeLinecap: "round", strokeLinejoin: "round", opacity: 0.55, pathLength: 1000 }), jsx("path", { d: pathInner, fill: "none", stroke: theme.outerStroke, strokeWidth: 4.5 * scale, strokeLinecap: "round", strokeLinejoin: "round", pathLength: 1000, strokeDasharray: 1000, strokeDashoffset: 1000 * (1 - progress / 100) })] })), jsx("path", { d: pathCard, fill: theme.card }), jsx("path", { d: shinePath, fill: theme.cardShine, opacity: 0.55 })] }));
+    },
+};
+
+const FRAMES_BY_KIND = {
+    pentagon: pentagonFrame,
+    hexagonWings: hexagonWingsFrame,
+    circleLaurel: circleLaurelFrame,
+    hexagonRibbon: hexagonRibbonFrame,
+    shieldWings: shieldWingsFrame,
+    pentagonCrown: pentagonCrownFrame,
+};
+const FRAME_BY_TYPE = {
+    challenge: pentagonFrame};
+
+const SIZE_PX = {
+    md: 110,
+    sm: 60,
+};
+function JourneyStep({ color, stepType = 'challenge', frame, icon, isActive = true, isLocked = false, progress, size = 'md', ariaLabel, className, onClick, }) {
+    const inactive = !isActive || isLocked;
+    const interactive = typeof onClick === 'function';
+    const theme = useMemo(() => {
+        if (inactive)
+            return INACTIVE_THEME;
+        if (color)
+            return buildThemeFromColor(color);
+        return THEMES[STEP_TYPE_TO_THEME[stepType]] ?? THEMES.blue;
+    }, [color, stepType, inactive]);
+    const bodyPx = SIZE_PX[size];
+    const scale = bodyPx / 110;
+    const defaultFrame = STEP_TYPE_TO_FRAME[stepType] ?? 'pentagon';
+    const selectedFrame = frame
+        ? FRAMES_BY_KIND[frame]
+        : (FRAMES_BY_KIND[defaultFrame] ?? FRAME_BY_TYPE.challenge);
+    const layout = useMemo(() => selectedFrame.layout(scale), [scale, selectedFrame]);
+    const rootClassName = [
+        'journey-step',
+        `is-size-${size}`,
+        isActive ? 'is-active' : 'is-inactive-state',
+        isLocked ? 'is-locked' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const wrapperStyle = {
+        width: layout.width,
+        height: layout.height,
+    };
+    const iconStyle = {
+        left: `${(layout.iconCenterX / layout.width) * 100}%`,
+        top: `${(layout.iconCenterY / layout.height) * 100}%`,
+        width: layout.iconWidth,
+        height: layout.iconHeight,
+    };
+    const badge = (jsxs("div", { className: "journey-step__badge", style: wrapperStyle, children: [selectedFrame.render({ theme, scale, layout, progress }), jsx("div", { className: `journey-step__icon${isLocked ? ' is-locked' : ''}`, style: iconStyle, "aria-hidden": "true", children: icon })] }));
+    return (jsx("div", { className: rootClassName, style: wrapperStyle, children: interactive ? (jsx("button", { type: "button", className: "journey-step__interactive", "aria-label": ariaLabel, "aria-disabled": isLocked, disabled: isLocked, onClick: onClick, children: badge })) : (badge) }));
+}
+
+var css_248z$1 = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:root{--background:0 0% 100%;--foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%;--popover:0 0% 100%;--popover-foreground:222.2 84% 4.9%;--primary:222.2 47.4% 11.2%;--primary-foreground:210 40% 98%;--secondary:210 40% 96.1%;--secondary-foreground:222.2 47.4% 11.2%;--muted:210 40% 96.1%;--muted-foreground:215.4 16.3% 46.9%;--accent:210 40% 96.1%;--accent-foreground:222.2 47.4% 11.2%;--destructive:0 84.2% 60.2%;--destructive-foreground:210 40% 98%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--ring:222.2 84% 4.9%;--radius:0.5rem}.dark{--background:222.2 84% 4.9%;--foreground:210 40% 98%;--card:222.2 84% 4.9%;--card-foreground:210 40% 98%;--popover:222.2 84% 4.9%;--popover-foreground:210 40% 98%;--primary:210 40% 98%;--primary-foreground:222.2 47.4% 11.2%;--secondary:217.2 32.6% 17.5%;--secondary-foreground:210 40% 98%;--muted:217.2 32.6% 17.5%;--muted-foreground:215 20.2% 65.1%;--accent:217.2 32.6% 17.5%;--accent-foreground:210 40% 98%;--destructive:0 62.8% 30.6%;--destructive-foreground:210 40% 98%;--border:217.2 32.6% 17.5%;--input:217.2 32.6% 17.5%;--ring:212.7 26.8% 83.9%}*{border-color:hsl(var(--border))}body{background-color:hsl(var(--background));color:hsl(var(--foreground))}.\\!container{margin-left:auto!important;margin-right:auto!important;padding-left:2rem!important;padding-right:2rem!important;width:100%!important}.container{margin-left:auto;margin-right:auto;padding-left:2rem;padding-right:2rem;width:100%}@media (min-width:1400px){.\\!container{max-width:1400px!important}.container{max-width:1400px}}.visible{visibility:visible}.absolute{position:absolute}.mt-4{margin-top:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.size-10{height:2.5rem;width:2.5rem}.h-screen{height:100vh}.w-screen{width:100vw}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-3{gap:.75rem}.rounded-lg{border-radius:var(--radius)}.border-2{border-width:2px}.border-\\[\\#892CDD\\]{--tw-border-opacity:1;border-color:rgb(137 44 221/var(--tw-border-opacity,1))}.bg-\\[\\#111111\\]{--tw-bg-opacity:1;background-color:rgb(17 17 17/var(--tw-bg-opacity,1))}.bg-\\[\\#892CDD\\]{--tw-bg-opacity:1;background-color:rgb(137 44 221/var(--tw-bg-opacity,1))}.bg-\\[\\#ffffff\\]{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-\\[\\#892CDD\\]{--tw-text-opacity:1;color:rgb(137 44 221/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-violet-500{--tw-text-opacity:1;color:rgb(139 92 246/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.duration-200{animation-duration:.2s}.hover\\:bg-\\[\\#892CDD\\]\\/10:hover{background-color:rgba(137,44,221,.1)}.hover\\:bg-\\[\\#892CDD\\]\\/80:hover{background-color:rgba(137,44,221,.8)}.hover\\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-\\[\\#892CDD\\]:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(137 44 221/var(--tw-ring-opacity,1))}.focus\\:ring-gray-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity,1))}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px}";
 styleInject(css_248z$1,{"insertAt":"top"});
 
-var css_248z = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.mt-4{margin-top:1rem}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.size-10{height:2.5rem;width:2.5rem}.h-screen{height:100vh}.w-screen{width:100vw}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-3{gap:.75rem}.rounded-lg{border-radius:var(--radius)}.border-2{border-width:2px}.border-\\[\\#892CDD\\]{--tw-border-opacity:1;border-color:rgb(137 44 221/var(--tw-border-opacity,1))}.bg-\\[\\#111111\\]{--tw-bg-opacity:1;background-color:rgb(17 17 17/var(--tw-bg-opacity,1))}.bg-\\[\\#892CDD\\]{--tw-bg-opacity:1;background-color:rgb(137 44 221/var(--tw-bg-opacity,1))}.bg-\\[\\#ffffff\\]{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-\\[\\#892CDD\\]{--tw-text-opacity:1;color:rgb(137 44 221/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-violet-500{--tw-text-opacity:1;color:rgb(139 92 246/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.duration-200{animation-duration:.2s}.hover\\:bg-\\[\\#892CDD\\]\\/10:hover{background-color:rgba(137,44,221,.1)}.hover\\:bg-\\[\\#892CDD\\]\\/80:hover{background-color:rgba(137,44,221,.8)}.hover\\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-\\[\\#892CDD\\]:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(137 44 221/var(--tw-ring-opacity,1))}.focus\\:ring-gray-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity,1))}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px}";
+var css_248z = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.\\!container{margin-left:auto!important;margin-right:auto!important;padding-left:2rem!important;padding-right:2rem!important;width:100%!important}.container{margin-left:auto;margin-right:auto;padding-left:2rem;padding-right:2rem;width:100%}@media (min-width:1400px){.\\!container{max-width:1400px!important}.container{max-width:1400px}}.visible{visibility:visible}.absolute{position:absolute}.mt-4{margin-top:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.size-10{height:2.5rem;width:2.5rem}.h-screen{height:100vh}.w-screen{width:100vw}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-3{gap:.75rem}.rounded-lg{border-radius:var(--radius)}.border-2{border-width:2px}.border-\\[\\#892CDD\\]{--tw-border-opacity:1;border-color:rgb(137 44 221/var(--tw-border-opacity,1))}.bg-\\[\\#111111\\]{--tw-bg-opacity:1;background-color:rgb(17 17 17/var(--tw-bg-opacity,1))}.bg-\\[\\#892CDD\\]{--tw-bg-opacity:1;background-color:rgb(137 44 221/var(--tw-bg-opacity,1))}.bg-\\[\\#ffffff\\]{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-\\[\\#892CDD\\]{--tw-text-opacity:1;color:rgb(137 44 221/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-violet-500{--tw-text-opacity:1;color:rgb(139 92 246/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.duration-200{animation-duration:.2s}.hover\\:bg-\\[\\#892CDD\\]\\/10:hover{background-color:rgba(137,44,221,.1)}.hover\\:bg-\\[\\#892CDD\\]\\/80:hover{background-color:rgba(137,44,221,.8)}.hover\\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-\\[\\#892CDD\\]:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(137 44 221/var(--tw-ring-opacity,1))}.focus\\:ring-gray-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity,1))}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px}";
 styleInject(css_248z,{"insertAt":"top"});
 
 var BACKOFFICE_ROLES;
@@ -9507,5 +10619,5 @@ var academeApi = /*#__PURE__*/Object.freeze({
     __proto__: null
 });
 
-export { AcademeAuthProvider, BACKOFFICE_ROLES, Button, DASHBOARD_ROLES, GLOBAL_ROLES, MIKE_ROLES, NINA_ROLES, ProtectedApp, ProtectedComponent, ProtectedRouter, STREAMING_ROLES, Spinner, WIDGET_ROLES, academeApi as apiTypes, cn, createAcademeApiClient, index as types, useAcademeAuth, useProtectedAppColors };
+export { AcademeAuthProvider, BACKOFFICE_ROLES, Button, CosmicDecor, CosmicStarsCanvas, DASHBOARD_ROLES, GLOBAL_ROLES, JourneyStep, MIKE_ROLES, NINA_ROLES, ProtectedApp, ProtectedComponent, ProtectedRouter, STREAMING_ROLES, Spinner, WIDGET_ROLES, academeApi as apiTypes, cn, createAcademeApiClient, index as types, useAcademeAuth, useProtectedAppColors };
 //# sourceMappingURL=index.esm.js.map