@font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('resources/fonts/montserrat/montserrat-500.ttf') format('truetype');
        font-weight: 400;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('resources/fonts/montserrat/montserrat-100.ttf') format('truetype');
        font-weight: 100;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('resources/fonts/montserrat/montserrat-200.ttf') format('truetype');
        font-weight: 100;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('resources/fonts/montserrat/montserrat-regular.ttf') format('truetype');
        font-weight: 300;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('resources/fonts/montserrat/montserrat-700.ttf') format('truetype');
        font-weight: 600;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('resources/fonts/montserrat/montserrat-300.ttf') format('truetype');
        font-weight: 200;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('resources/fonts/montserrat/montserrat-900.ttf') format('truetype');
        font-weight: 800;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('resources/fonts/montserrat/montserrat-800.ttf') format('truetype');
        font-weight: 700;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-C05572EE-56E1-409D-B16E-FC892E2EF126';
        src: url('resources/fonts/montserrat/montserrat-600.ttf') format('truetype');
        font-weight: 500;
        font-style: regular;
        font-stretch: normal;
    }
    @font-face {
        font-family: 'font-EDCFB6DA-8E13-40AA-9D76-3BA469AD3264';
        src: url('resources/fonts/capsule/capsule-gxmr6.ttf') format('truetype');
        font-weight: 300;
        font-style: regular;
        font-stretch: normal;
    }
    @font-face {
        font-family: 'font-38964905-1AA7-4FA7-8B25-AA8628B0F45C';
        src: url('resources/fonts/kasih/kasih.ttf') format('truetype');
        font-weight: 300;
        font-style: regular;
        font-stretch: normal;
    }
    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('resources/fonts/cera/cera-pro-bold-italic.otf') format('truetype');
        font-weight: 600;
        font-style: oblique;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('resources/fonts/cera/cera-pro-regular.otf') format('truetype');
        font-weight: 300;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('resources/fonts/cera/cera-pro-black-italic.otf') format('truetype');
        font-weight: 800;
        font-style: oblique;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('resources/fonts/cera/cera-pro-medium-italic.otf') format('truetype');
        font-weight: 400;
        font-style: oblique;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('resources/fonts/cera/cera-pro-light.otf') format('truetype');
        font-weight: 200;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('resources/fonts/cera/cera-pro-light-italic.otf') format('truetype');
        font-weight: 200;
        font-style: oblique;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('resources/fonts/cera/cera-pro-black.otf') format('truetype');
        font-weight: 800;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('resources/fonts/cera/cera-pro-medium.otf') format('truetype');
        font-weight: 400;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('resources/fonts/cera/cera-pro-regular-italic.otf') format('truetype');
        font-weight: 300;
        font-style: oblique;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('resources/fonts/cera/cera-pro-thin-italic.otf') format('truetype');
        font-weight: 100;
        font-style: oblique;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('resources/fonts/cera/cera-pro-bold.otf') format('truetype');
        font-weight: 600;
        font-style: regular;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'font-EBD1CBA6-140B-4558-9BA8-2187AC86246C';
        src: url('resources/fonts/cera/cera-pro-thin.otf') format('truetype');
        font-weight: 100;
        font-style: regular;
        font-stretch: normal;
    }
    @font-face {
        font-family: 'font-C16A83C6-AEE6-41CE-AF5B-AEBD6D0AA91A';
        src: url('resources/fonts/ronda/rondaitcbybt-roman.otf') format('truetype');
        font-weight: 400;
        font-style: regular;
        font-stretch: normal;
    }/* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}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,samp,pre{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[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,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder, textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0px;padding-top:0.5rem;padding-right:0.75rem;padding-bottom:0.5rem;padding-left:0.75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000;}[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder, textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:0.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type='checkbox'],[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}[type='checkbox']{border-radius:0px}[type='radio']{border-radius:100%}[type='checkbox']:focus,[type='radio']:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--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)}[type='checkbox']:checked,[type='radio']:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type='checkbox']:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");}@media (forced-colors: active) {[type='checkbox']:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type='radio']:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");}@media (forced-colors: active) {[type='radio']:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{border-color:transparent;background-color:currentColor}[type='checkbox']:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat;}@media (forced-colors: active) {[type='checkbox']:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{border-color:transparent;background-color:currentColor}[type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type='file']:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*, ::before, ::after{--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:rgb(59 130 246 / 0.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: }::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:rgb(59 130 246 / 0.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: }
    .mb-0{margin-bottom:0.0rem}
    .ml-auto{margin-left:auto}
    .mr-auto{margin-right:auto}
    .mt-0{margin-top:0.0rem}
    .grid{display:grid}
    .h-auto{height:auto}
    .max-h-\[100svh\]{max-height:100svh}
    .min-h-\[100svh\]{min-height:100svh}
    .w-\[100vw\]{width:100vw}
    .min-w-\[100\%\]{min-width:100%}
    .max-w-\[100\%\]{max-width:100%}
    .grid-flow-col{grid-auto-flow:column}
    .grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}
    .content-center{align-content:center}
    .items-center{align-items:center}
    .justify-center{justify-content:center}
    .justify-items-center{justify-items:center}
    .scroll-smooth{scroll-behavior:smooth}
    .bg-black-600{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}
    .pb-0{padding-bottom:0.0rem}
    .pl-0{padding-left:0.0rem}
    .pr-0{padding-right:0.0rem}
    .pt-0{padding-top:0.0rem}
.container{max-width:100%;}
@media (min-width: 640px){.container{max-width:640px}}
@media (min-width: 768px){.container{max-width:768px}}
@media (min-width: 1024px){.container{max-width:1024px}}
@media (min-width: 1280px){.container{max-width:1280px}}
@media (min-width: 1536px){.container{max-width:1536px}}/* [data-rwx-droparea] {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
} */
/* ============================================================
   CHAOS SYSTEM HOMEPAGE NAVIGATION
   Complete standalone system

   Includes:
   - Responsive homepage SVG
   - FIRST VISIT:
       full construction intro
   - RETURNING VISIT:
       short center / tendril / node fade intro
   - Whole-interface scale / upward settle
   - Existing route / center / node interaction behavior
   - Native route glow controls
   - Reduced-motion handling
   ============================================================ */


/* ============================================================
   1. MASTER CONTROLS
   ============================================================ */

.chaos-navigation {

  /* ==========================================================
     LAYOUT
     ========================================================== */

  display: grid;
  place-items: center;

  width: min(88vw, 88svh);
  max-width: 100%;

  margin-inline: auto;

  line-height: 0;

  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;



  /* ==========================================================
     FIRST VISIT — WHOLE INTERFACE SETTLE
     ========================================================== */

  --chaos-intro-start-scale: .84;
  --chaos-intro-start-y: 23px;

  --chaos-intro-settle-duration: 7200ms;

  --chaos-intro-settle-easing:
    cubic-bezier(.18, .72, .18, 1);



  /* ==========================================================
     FIRST VISIT — CENTER SYMBOL
     ========================================================== */

  /* ---------- CONSTRUCTION STROKE ---------- */

  --chaos-intro-center-stroke-color:
    rgb(255, 255, 255);

  --chaos-intro-center-stroke-width:
    3px;


  /* ---------- DRAW ---------- */

  --chaos-intro-center-draw-delay:
    100ms;

  --chaos-intro-center-draw-duration:
    10000ms;

  --chaos-intro-center-draw-easing:
    cubic-bezier(.4, 0, .2, 1);


  /* ---------- FILL ---------- */

  --chaos-intro-center-fill-delay:
    1800ms;

  --chaos-intro-center-fill-duration:
    2300ms;

  --chaos-intro-center-fill-easing:
    cubic-bezier(.64,.09,.29,.46);


  /* ---------- STROKE REMOVAL ---------- */

  --chaos-intro-center-stroke-out-delay:
    2500ms;

  --chaos-intro-center-stroke-out-duration:
    1000ms;

  --chaos-intro-center-stroke-out-easing:
    ease;



  /* ==========================================================
     FIRST VISIT — TENDRIL / CIRCUIT PORTION
     ========================================================== */

  --chaos-intro-tendrils-stroke-color:
    rgb(255, 255, 255);

  --chaos-intro-tendrils-stroke-width:
    3px;


  /* ---------- DRAW ---------- */

  --chaos-intro-tendrils-draw-delay:
    2700ms;

  --chaos-intro-tendrils-draw-duration:
    8000ms;

  --chaos-intro-tendrils-draw-easing:
    cubic-bezier(.4, 0, .2, 1);


  /* ---------- FILL ---------- */

  --chaos-intro-tendrils-fill-delay:
    6300ms;

  --chaos-intro-tendrils-fill-duration:
    2300ms;

  --chaos-intro-tendrils-fill-easing:
    cubic-bezier(.64,.09,.29,.46);


  /* ---------- STROKE REMOVAL ---------- */

  --chaos-intro-tendrils-stroke-out-delay:
    8500ms;

  --chaos-intro-tendrils-stroke-out-duration:
    1000ms;

  --chaos-intro-tendrils-stroke-out-easing:
    ease;



  /* ==========================================================
     FIRST VISIT — SIX LINK NODES
     ========================================================== */

  --chaos-intro-node-duration:
    1600ms;

  --chaos-intro-node-easing:
    cubic-bezier(.64,.09,.29,.46);


  --chaos-intro-video-delay:
    7500ms;

  --chaos-intro-design-delay:
    8000ms;

  --chaos-intro-audio-delay:
    8500ms;

  --chaos-intro-ai-delay:
    9000ms;

  --chaos-intro-resume-delay:
    9500ms;

  --chaos-intro-context-delay:
    10000ms;



  /* ==========================================================
     RETURNING VISITOR — WHOLE INTERFACE SETTLE
     ========================================================== */

  /*
     Completely independent from the full intro.
     This sequence contains NO stroke drawing.
     Lower = starts moving immediately. Higher = hangs around near the starting position longer.

① .12 — How quickly the animation gets moving.
Lower = starts moving immediately. Higher = hangs around near the starting position longer.

② .85 — How strongly it moves during the beginning.
Higher = covers more of the movement early. Lower = more gradual/gentle beginning.

③ .22 — How early it starts transitioning into the ending/settling behavior.
Lower = starts shaping the landing earlier. Higher = carries the main movement farther before settling.

④ 1.06 — How it arrives at the final position.
1.00 = lands directly. Above 1 = overshoots and comes back. 
The farther above 1, the more noticeable the overshoot.
  */

  --chaos-return-start-scale:
    .70;

  --chaos-return-start-y:
    100px;

  --chaos-return-settle-duration:
    2500ms;

  --chaos-return-settle-easing:
    cubic-bezier(.3,.6,.5,1.3);



  /* ==========================================================
     RETURNING VISITOR — CENTER FADE
     ========================================================== */

  --chaos-return-center-delay:
    400;

  --chaos-return-center-duration:
    1500ms;

  --chaos-return-center-easing:
    cubic-bezier(.67,0,.83,.34);



  /* ==========================================================
     RETURNING VISITOR — TENDRIL / CIRCUIT FADE
     ========================================================== */

  --chaos-return-tendrils-delay:
    1200ms;

  --chaos-return-tendrils-duration:
    1500ms;

  --chaos-return-tendrils-easing:
    cubic-bezier(.67,0,.83,.34);



  /* ==========================================================
     RETURNING VISITOR — ALL SIX NODES TOGETHER
     ========================================================== */

  --chaos-return-nodes-delay:
    2100ms;

  --chaos-return-nodes-duration:
    600ms;

  --chaos-return-nodes-easing:
    cubic-bezier(.67,0,.83,.8);



  /* ==========================================================
     BACKGROUND DIMMING
     ========================================================== */

  --chaos-background-opacity:
    0.16;



  /* ==========================================================
     ACTIVE ROUTE GLOW
     ========================================================== */

  --chaos-glow-color:
    rgb(16, 216, 2);

  --chaos-glow-near:
    5px;

  --chaos-glow-mid:
    15px;

  --chaos-glow-far:
    34px;



  /* ==========================================================
     SOFT DARK EDGE SEPARATION
     ========================================================== */

  --chaos-edge-color:
    rgb(0 0 0 / 1);

  --chaos-edge-near:
    10px;

  --chaos-edge-far:
    16px;



  /* ==========================================================
     EXISTING INTERACTION TIMING
     ========================================================== */

  --chaos-icon-out-duration:
    560ms;

  --chaos-icon-in-duration:
    440ms;

  --chaos-icon-in-delay:
    30ms;

  --chaos-center-duration:
    580ms;

  --chaos-route-duration:
    800ms;

  --chaos-background-duration:
    620ms;



  /* ==========================================================
     EXISTING INTERACTION EASING
     ========================================================== */

  --chaos-icon-ease:
    cubic-bezier(.22, .7, .2, 1);

  --chaos-center-ease:
    cubic-bezier(.2, .72, .2, 1);

  --chaos-route-ease:
    cubic-bezier(.08, .25, .5, 1);

  --chaos-background-ease:
    ease-in-out;
}



/* ============================================================
   2. SAFE PRE-INITIALIZATION STATE
   ============================================================ */

/*
   Applied before the SVG fetch begins.

   Nothing becomes visible until JavaScript has put
   every relevant element into the correct starting state.
*/

.chaos-navigation.chaos-intro-preparing {
  visibility: hidden;
}



/* ============================================================
   3. SVG BASE
   ============================================================ */

.chaos-navigation svg {

  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;

  overflow: visible;

  transform-origin:
    center center;
}



/* ============================================================
   4. TEMPORARILY DISABLE NORMAL INTERACTION TRANSITIONS
   ============================================================ */

/*
   Both entrance modes temporarily own opacity.

   Normal hover/focus transitions remain disabled until
   the entrance has completely handed control back.
*/

.chaos-navigation:is(
  .chaos-intro-active,
  .chaos-return-active
)
.chaos-node-normal,

.chaos-navigation:is(
  .chaos-intro-active,
  .chaos-return-active
)
.chaos-node-normal-background,

.chaos-navigation:is(
  .chaos-intro-active,
  .chaos-return-active
)
.chaos-node-inverted,

.chaos-navigation:is(
  .chaos-intro-active,
  .chaos-return-active
)
.chaos-node-inverted-background,

.chaos-navigation:is(
  .chaos-intro-active,
  .chaos-return-active
)
.chaos-center,

.chaos-navigation:is(
  .chaos-intro-active,
  .chaos-return-active
)
#chaos-eye,

.chaos-navigation:is(
  .chaos-intro-active,
  .chaos-return-active
)
#chaos-tendrils {

  transition:
    none !important;
}



/* ============================================================
   5. FIRST VISIT — WHOLE SVG SETTLE
   ============================================================ */

.chaos-navigation.chaos-intro-active svg {

  transform:
    translateY(
      var(--chaos-intro-start-y)
    )
    scale(
      var(--chaos-intro-start-scale)
    );
}


.chaos-navigation.chaos-intro-active.chaos-intro-running svg {

  transform:
    translateY(0)
    scale(1);

  transition:
    transform
    var(--chaos-intro-settle-duration)
    var(--chaos-intro-settle-easing);
}



/* ============================================================
   6. RETURNING VISITOR — WHOLE SVG SETTLE
   ============================================================ */

.chaos-navigation.chaos-return-active svg {

  transform:
    translateY(
      var(--chaos-return-start-y)
    )
    scale(
      var(--chaos-return-start-scale)
    );
}


.chaos-navigation.chaos-return-active.chaos-return-running svg {

  transform:
    translateY(0)
    scale(1);

  transition:
    transform
    var(--chaos-return-settle-duration)
    var(--chaos-return-settle-easing);
}



/* ============================================================
   7. EXISTING HIDDEN INTERACTION ARTWORK
   ============================================================ */

.chaos-navigation .chaos-route,
.chaos-navigation .chaos-center,
.chaos-navigation .chaos-node-inverted,
.chaos-navigation .chaos-node-inverted-background {

  opacity: 0;

  pointer-events: none;
}



/* ============================================================
   8. NORMAL OUTER NODE ARTWORK
   ============================================================ */

.chaos-navigation .chaos-node-normal,
.chaos-navigation .chaos-node-normal-background {

  opacity: 1;

  pointer-events: none;
}



/* ============================================================
   9. DEFAULT CENTER SYMBOL
   ============================================================ */

.chaos-navigation #chaos-eye {

  opacity: 1;

  pointer-events: none;
}



/* ============================================================
   10. TENDRIL / CIRCUIT PORTION
   ============================================================ */

.chaos-navigation #chaos-tendrils {

  opacity: 1;

  pointer-events: none;

  transition:
    opacity
    var(--chaos-background-duration)
    var(--chaos-background-ease);
}


.chaos-navigation.is-engaged #chaos-tendrils {

  opacity:
    var(--chaos-background-opacity);
}



/* ============================================================
   11. ACTIVE ROUTE
   ============================================================ */

.chaos-navigation .chaos-route {

  transition:
    opacity
    var(--chaos-route-duration)
    var(--chaos-route-ease);
}


.chaos-navigation .chaos-route.is-active {
  opacity: 1;
}



/* ============================================================
   12. CENTER TRANSITION
   ============================================================ */

.chaos-navigation #chaos-eye,
.chaos-navigation .chaos-center {

  transition:
    opacity
    var(--chaos-center-duration)
    var(--chaos-center-ease);
}


.chaos-navigation.is-engaged #chaos-eye {
  opacity: 0;
}


.chaos-navigation .chaos-center.is-active {
  opacity: 1;
}



/* ============================================================
   13. OUTER ICON INVERSION
   ============================================================ */

.chaos-navigation .chaos-node-normal,
.chaos-navigation .chaos-node-normal-background {

  transition:
    opacity
    var(--chaos-icon-out-duration)
    var(--chaos-icon-ease);
}


.chaos-navigation .chaos-node-inverted,
.chaos-navigation .chaos-node-inverted-background {

  transition:
    opacity
    var(--chaos-icon-in-duration)
    var(--chaos-icon-ease)
    var(--chaos-icon-in-delay);
}


.chaos-navigation .chaos-node-normal.is-selected,
.chaos-navigation .chaos-node-normal-background.is-selected {

  opacity: 0;
}


.chaos-navigation .chaos-node-inverted.is-selected,
.chaos-navigation .chaos-node-inverted-background.is-selected {

  opacity: 1;
}



/* ============================================================
   14. INTERACTION GEOMETRY
   ============================================================ */

.chaos-navigation .chaos-hit-target {

  fill: transparent;

  stroke: none;

  cursor: pointer;

  pointer-events: all;

  outline: none;
}


.chaos-navigation .chaos-center-hit-target {
  cursor: pointer;
}


/*
   Neither entrance mode is interactive.
*/

.chaos-navigation:is(
  .chaos-intro-active,
  .chaos-return-active
)
.chaos-hit-target {

  pointer-events:
    none !important;
}


.chaos-navigation
.chaos-hit-target:focus-visible {

  stroke:
    currentColor;

  stroke-width:
    8;

  stroke-opacity:
    0.72;

  vector-effect:
    non-scaling-stroke;
}



/* ============================================================
   15. MOBILE ROUTE GLOW
   ============================================================ */

@media (max-width: 767px) {

  .chaos-navigation {

    --chaos-glow-color:
      rgb(16, 216, 2);

    --chaos-glow-mid:
      20px;

    --chaos-glow-far:
      38px;


    --chaos-edge-color:
      rgb(0 0 0 / 1);

    --chaos-edge-near:
      16px;

    --chaos-edge-far:
      23px;
  }
}



/* ============================================================
   16. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .chaos-navigation,
  .chaos-navigation * {

    transition-duration:
      1ms !important;

    transition-delay:
      0ms !important;
  }
}