:root {
  color-scheme: light;
  --stage-width: 100%;
  --poster-ratio: 853 / 1844;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  max-width: 100%;
  background:
    radial-gradient(circle at 50% 16%, rgba(220, 255, 140, 0.18), transparent 30%),
    linear-gradient(180deg, #f8fff4 0%, #ecf7ff 100%);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.official-home {
  height: 100dvh;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: hidden;
  background:
    radial-gradient(circle at 50% 10%, rgba(229, 255, 157, 0.2), transparent 33%),
    linear-gradient(180deg, #fbfff7 0%, #eff9ff 58%, #ffffff 100%);
}

.official-site {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
}

.official-carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  background: #f9fff6;
}

.official-track {
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.official-track::-webkit-scrollbar {
  display: none;
}

.official-track:focus-visible {
  outline: 2px solid rgba(111, 212, 30, 0.75);
  outline-offset: -2px;
}

.official-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #f9fff6;
}

.official-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  background: #f9fff6;
}

.official-download-zone,
.official-dots {
  position: absolute;
}

.official-download-zone {
  z-index: 6;
  display: block;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}

.official-download-page1 {
  top: 3.2%;
  right: 6%;
  width: 18%;
  height: 3.9%;
}

.official-download-page3,
.official-download-page4,
.official-download-page5 {
  left: 6.4%;
  width: 32%;
  height: 4.4%;
}

.official-download-page3 {
  top: 28.4%;
}

.official-download-page4 {
  top: 26.7%;
}

.official-download-page5 {
  top: 27%;
}

.official-dots {
  z-index: 5;
  left: 50%;
  bottom: max(132px, calc(17.4dvh + env(safe-area-inset-bottom)));
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: translateX(-50%);
  padding: 0;
  border: 0;
  background: transparent;
}

.official-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(198, 207, 193, 0.9);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8),
    0 3px 9px rgba(58, 89, 42, 0.14);
  transition:
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.official-dot.is-active {
  background: #69d41e;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(105, 212, 30, 0.62);
}

.icp-footer {
  position: fixed;
  z-index: 7;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 16px;
  padding: 0 12px calc(1px + env(safe-area-inset-bottom));
  background: transparent;
  text-align: center;
}

.icp-footer a {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  color: rgba(67, 76, 62, 0.82);
  font-size: 10px;
  line-height: 1.25;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
}

.icp-footer a:active,
.icp-footer a:focus-visible {
  color: #48b800;
  outline: none;
}

.phone-stage {
  width: var(--stage-width);
  max-width: 100%;
  height: 100svh;
  min-height: 100svh;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #f9fff6;
  isolation: isolate;
}

.phone-stage::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.poster-shell {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  min-height: 100svh;
  aspect-ratio: var(--poster-ratio);
  overflow: hidden;
  background: #f9fff6;
}

.poster-shell-page5 {
  aspect-ratio: 850 / 1850;
}

.poster-image,
.light-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.poster-image {
  z-index: 1;
  display: block;
  object-fit: fill;
  object-position: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.light-flow {
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.9;
}

.download-hit {
  position: absolute;
  z-index: 3;
  top: 3.2%;
  right: 6%;
  width: 18%;
  height: 3.9%;
  border-radius: 20px;
  -webkit-tap-highlight-color: transparent;
}

.download-hit-page3,
.download-hit-page4,
.download-hit-page5 {
  left: 6.4%;
  right: auto;
  width: 32%;
  height: 4.4%;
}

.download-hit-page3 {
  top: 28.4%;
}

.download-hit-page4 {
  top: 26.7%;
}

.download-hit-page5 {
  top: 27%;
}

.route-halo path {
  fill: none;
  stroke: url("#routeTint");
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.15;
  filter: url("#wideGlow");
  transform-origin: center;
  animation: route-breathe 3.6s ease-in-out infinite;
}

.route-halo path:nth-child(2) {
  stroke-width: 12;
  opacity: 0.12;
  animation-delay: -1.2s;
}

.route-halo path:nth-child(3) {
  stroke-width: 10;
  opacity: 0.1;
  animation-delay: -2s;
}

.route-halo path:nth-child(4) {
  stroke-width: 9;
  opacity: 0.11;
  animation-delay: -2.6s;
}

.portal-aura {
  filter: url("#portalGlow");
  pointer-events: none;
}

.portal-bloom {
  fill: url("#portalBloom");
  opacity: 0.4;
  transform-origin: 710px 711px;
  animation: portal-breathe 3.4s ease-in-out infinite;
}

.portal-arch {
  fill: none;
  stroke: url("#portalTint");
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
  animation: portal-breathe 3.1s ease-in-out infinite;
}

.portal-arch-wide {
  stroke-width: 5.8;
}

.portal-arch-mid {
  stroke-width: 4.2;
  animation-delay: -1s;
}

.portal-arch-inner {
  stroke-width: 3;
  opacity: 0.34;
  animation-delay: -1.8s;
}

.portal-sweep {
  fill: none;
  stroke: #fff6c9;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 58 360;
  opacity: 0.82;
  filter: url("#softGlow");
  animation: portal-trace 2.2s linear infinite, stream-pulse 2.8s ease-in-out infinite;
}

.portal-dot {
  fill: #fff8cc;
  filter: url("#dotGlow");
  opacity: 0.72;
  animation: portal-drift 2.7s ease-in-out infinite;
}

.portal-dot-b {
  fill: #d7ff57;
  animation-delay: -0.9s;
}

.portal-dot-c {
  animation-delay: -1.7s;
}

.flow-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url("#softGlow");
  animation-name: stream-forward, stream-pulse;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

.flow-line-a {
  stroke: #fbffe8;
  stroke-width: 4.8;
  stroke-dasharray: 88 520;
  animation-duration: 2.7s, 2.7s;
}

.flow-line-b {
  stroke: #c9ff33;
  stroke-width: 3.5;
  stroke-dasharray: 54 390;
  animation-duration: 2.15s, 3.1s;
  animation-delay: -0.65s, -1.2s;
  opacity: 0.85;
}

.flow-line-c {
  stroke: #ffffff;
  stroke-width: 3;
  stroke-dasharray: 42 330;
  animation-duration: 1.85s, 2.4s;
  animation-delay: -1.05s, -0.25s;
  opacity: 0.72;
}

.flow-line-d {
  stroke: #a8ff1d;
  stroke-width: 2.4;
  stroke-dasharray: 26 260;
  animation-duration: 1.55s, 2.2s;
  animation-delay: -0.2s, -1.6s;
  opacity: 0.7;
}

.flow-line-e {
  stroke: #ffffff;
  stroke-width: 2.6;
  stroke-dasharray: 34 300;
  animation-duration: 1.75s, 2.6s;
  animation-delay: -0.85s, -0.7s;
  opacity: 0.7;
}

.flow-line-f {
  stroke: #d7ff4b;
  stroke-width: 2.9;
  stroke-dasharray: 46 420;
  animation-duration: 2.35s, 3s;
  animation-delay: -1.45s, -1.1s;
  opacity: 0.78;
}

.flow-line-g {
  stroke: #fff8c7;
  stroke-width: 4.2;
  stroke-dasharray: 30 190;
  animation-duration: 1.3s, 2s;
  animation-delay: -0.35s, -0.9s;
  opacity: 0.86;
}

.spark-trails circle {
  transform-box: fill-box;
  transform-origin: center;
}

.route-twinkles circle {
  fill: #f8ffe1;
  filter: url("#dotGlow");
  opacity: 0;
  transform-origin: center;
  animation: twinkle 2.8s ease-in-out infinite;
}

.route-twinkles circle:nth-child(2) {
  animation-delay: -0.45s;
}

.route-twinkles circle:nth-child(3) {
  animation-delay: -1s;
}

.route-twinkles circle:nth-child(4) {
  animation-delay: -1.55s;
}

.route-twinkles circle:nth-child(5) {
  animation-delay: -2.15s;
}

.route-twinkles circle:nth-child(6) {
  animation-delay: -2.6s;
}

.route-twinkles circle:nth-child(7) {
  animation-delay: -3.05s;
}

.route-twinkles circle:nth-child(8) {
  animation-delay: -3.45s;
}

.route-twinkles circle:nth-child(9) {
  animation-delay: -3.9s;
}

.page3-flow {
  opacity: 0.92;
}

.p3-center-bloom {
  fill: url("#p3CenterBloom");
  opacity: 0.48;
  transform-origin: 454px 1122px;
  filter: url("#p3WideGlow");
  animation: p3-opacity-pulse 3.5s ease-in-out infinite;
}

.p3-center-ring {
  fill: none;
  stroke: url("#p3RouteTint");
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url("#p3SoftGlow");
  transform-origin: 454px 1194px;
}

.p3-ring-a {
  stroke-width: 5.5;
  stroke-dasharray: 95 440;
  opacity: 0.56;
  animation: p3-orbit 3.2s linear infinite;
}

.p3-ring-b {
  stroke-width: 3.8;
  stroke-dasharray: 62 330;
  opacity: 0.44;
  animation: p3-orbit-reverse 2.55s linear infinite;
}

.p3-coin-ring {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url("#p3SoftGlow");
}

.p3-coin-ring-a {
  stroke: #fff2a8;
  stroke-width: 5.2;
  stroke-dasharray: 42 150;
  opacity: 0.76;
  animation: p3-orbit 1.8s linear infinite;
}

.p3-coin-ring-b {
  stroke: #d7ff4b;
  stroke-width: 3.4;
  stroke-dasharray: 28 112;
  opacity: 0.62;
  animation: p3-orbit-reverse 1.35s linear infinite;
}

.p3-coin-sweep {
  fill: none;
  stroke: #fff3a6;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36 210;
  opacity: 0.75;
  filter: url("#p3SoftGlow");
  animation: p3-stream-forward 1.7s linear infinite, stream-pulse 2.4s ease-in-out infinite;
}

.p3-route-halo path {
  fill: none;
  stroke: url("#p3RouteTint");
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.14;
  filter: url("#p3WideGlow");
  animation: p3-opacity-pulse 4s ease-in-out infinite;
}

.p3-route-halo path:nth-child(2),
.p3-route-halo path:nth-child(4) {
  stroke-width: 10;
  opacity: 0.13;
  animation-delay: -1.2s;
}

.p3-route-halo path:nth-child(5),
.p3-route-halo path:nth-child(6) {
  stroke-width: 8;
  opacity: 0.1;
  animation-delay: -2.1s;
}

.p3-flow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url("#p3SoftGlow");
  animation-name: p3-stream-forward, stream-pulse;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

.p3-flow-a {
  stroke: #fff8bd;
  stroke-width: 5.4;
  stroke-dasharray: 66 380;
  animation-duration: 2.1s, 2.8s;
}

.p3-flow-b {
  stroke: #c8ff35;
  stroke-width: 4.6;
  stroke-dasharray: 50 340;
  animation-duration: 1.9s, 2.7s;
  animation-delay: -0.6s, -1.2s;
}

.p3-flow-c {
  stroke: #ffffff;
  stroke-width: 4.2;
  stroke-dasharray: 42 300;
  animation-duration: 1.65s, 2.3s;
  animation-delay: -1.1s, -0.4s;
}

.p3-flow-d {
  stroke: #ffe17a;
  stroke-width: 4;
  stroke-dasharray: 58 360;
  animation-duration: 2.35s, 3.1s;
  animation-delay: -1.6s, -0.8s;
}

.p3-flow-e {
  stroke: #fffdf0;
  stroke-width: 3.5;
  stroke-dasharray: 40 330;
  animation-duration: 2.55s, 3.3s;
  animation-delay: -0.9s, -1.6s;
}

.p3-flow-f {
  stroke: #b9ff24;
  stroke-width: 3.4;
  stroke-dasharray: 36 300;
  animation-duration: 2.15s, 2.9s;
  animation-delay: -1.4s, -0.9s;
}

.p3-flow-g {
  stroke: #e7ff7a;
  stroke-width: 4.2;
  stroke-dasharray: 52 390;
  animation-duration: 2.85s, 3.4s;
  animation-delay: -1.7s, -1.1s;
}

.p3-flow-h {
  stroke: #fff2a1;
  stroke-width: 3.8;
  stroke-dasharray: 32 220;
  animation-duration: 1.55s, 2.4s;
  animation-delay: -0.35s, -1.3s;
}

.p3-flow-i {
  stroke: #d9ff4d;
  stroke-width: 5;
  stroke-dasharray: 44 280;
  animation-duration: 1.75s, 2.45s;
  animation-delay: -0.95s, -0.25s;
  opacity: 0.88;
}

.p3-spark-trails circle {
  transform-box: fill-box;
  transform-origin: center;
}

.p3-twinkles circle {
  fill: #fff8cf;
  filter: url("#p3DotGlow");
  opacity: 0;
  transform-origin: center;
  animation: p3-static-twinkle 2.9s ease-in-out infinite;
}

.p3-twinkles circle:nth-child(2) {
  animation-delay: -0.35s;
}

.p3-twinkles circle:nth-child(3) {
  animation-delay: -0.7s;
}

.p3-twinkles circle:nth-child(4) {
  animation-delay: -1.05s;
}

.p3-twinkles circle:nth-child(5) {
  animation-delay: -1.4s;
}

.p3-twinkles circle:nth-child(6) {
  animation-delay: -1.75s;
}

.p3-twinkles circle:nth-child(7) {
  animation-delay: -2.1s;
}

.p3-twinkles circle:nth-child(8) {
  animation-delay: -2.45s;
}

.p3-twinkles circle:nth-child(9) {
  animation-delay: -2.8s;
}

.p3-twinkles circle:nth-child(10) {
  animation-delay: -3.15s;
}

.p3-twinkles circle:nth-child(11) {
  animation-delay: -3.5s;
}

.page4-flow {
  opacity: 0.9;
}

.p4-center-bloom {
  fill: url("#p4CenterBloom");
  filter: url("#p4WideGlow");
  animation: p4-opacity-pulse 3.6s ease-in-out infinite;
}

.p4-center-ring {
  fill: none;
  stroke: url("#p4RouteTint");
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url("#p4SoftGlow");
}

.p4-ring-a {
  stroke-width: 4.2;
  stroke-dasharray: 68 420;
  opacity: 0.5;
  animation: p4-orbit 3.8s linear infinite;
}

.p4-ring-b {
  stroke-width: 3.4;
  stroke-dasharray: 48 330;
  opacity: 0.42;
  animation: p4-orbit-reverse 3s linear infinite;
}

.p4-ring-c {
  stroke-width: 3;
  stroke-dasharray: 34 230;
  opacity: 0.4;
  animation: p4-orbit 2.25s linear infinite;
}

.p4-route-halo path {
  fill: none;
  stroke: url("#p4RouteTint");
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.12;
  filter: url("#p4WideGlow");
  animation: p4-opacity-pulse 4s ease-in-out infinite;
}

.p4-route-halo path:nth-child(5),
.p4-route-halo path:nth-child(6),
.p4-route-halo path:nth-child(7),
.p4-route-halo path:nth-child(8) {
  stroke-width: 6;
  opacity: 0.1;
}

.p4-route-halo path:nth-child(9) {
  stroke-width: 7;
  opacity: 0.09;
}

.p4-flow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url("#p4SoftGlow");
  animation-name: p4-stream-forward, stream-pulse;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

.p4-flow-a {
  stroke: #fffdf0;
  stroke-width: 3.8;
  stroke-dasharray: 42 320;
  animation-duration: 2.3s, 3s;
}

.p4-flow-b {
  stroke: #cfff43;
  stroke-width: 4;
  stroke-dasharray: 46 340;
  animation-duration: 2.1s, 2.8s;
  animation-delay: -0.8s, -1.2s;
}

.p4-flow-c {
  stroke: #f7ffd0;
  stroke-width: 3.4;
  stroke-dasharray: 38 300;
  animation-duration: 2.45s, 3.2s;
  animation-delay: -1.4s, -0.8s;
}

.p4-flow-d {
  stroke: #ffffff;
  stroke-width: 3.5;
  stroke-dasharray: 38 310;
  animation-duration: 2.5s, 3.1s;
  animation-delay: -1.8s, -1.1s;
}

.p4-flow-e,
.p4-flow-f,
.p4-flow-g,
.p4-flow-h {
  stroke: #d8ff5c;
  stroke-width: 2.8;
  stroke-dasharray: 26 230;
  animation-duration: 1.9s, 2.7s;
  opacity: 0.82;
}

.p4-flow-f {
  animation-delay: -0.7s, -1s;
}

.p4-flow-g {
  animation-delay: -1.1s, -0.4s;
}

.p4-flow-h {
  animation-delay: -1.5s, -1.3s;
}

.p4-flow-i {
  stroke: #fffbd2;
  stroke-width: 3.2;
  stroke-dasharray: 52 420;
  animation-duration: 3.6s, 3.8s;
  animation-delay: -1.9s, -0.6s;
  opacity: 0.7;
}

.p4-spark-trails circle {
  transform-box: fill-box;
  transform-origin: center;
}

.p4-node-twinkles circle {
  fill: #fffbd0;
  filter: url("#p4DotGlow");
  opacity: 0;
  transform-origin: center;
  animation: p4-node-glow 2.8s ease-in-out infinite;
}

.p4-node-twinkles circle:nth-child(2) {
  animation-delay: -0.25s;
}

.p4-node-twinkles circle:nth-child(3) {
  animation-delay: -0.5s;
}

.p4-node-twinkles circle:nth-child(4) {
  animation-delay: -0.75s;
}

.p4-node-twinkles circle:nth-child(5) {
  animation-delay: -1s;
}

.p4-node-twinkles circle:nth-child(6) {
  animation-delay: -1.25s;
}

.p4-node-twinkles circle:nth-child(7) {
  animation-delay: -1.5s;
}

.p4-node-twinkles circle:nth-child(8) {
  animation-delay: -1.75s;
}

.p4-node-twinkles circle:nth-child(9) {
  animation-delay: -2s;
}

.p4-node-twinkles circle:nth-child(10) {
  animation-delay: -2.25s;
}

.p4-node-twinkles circle:nth-child(11) {
  animation-delay: -2.5s;
}

.page5-flow {
  opacity: 0.9;
}

.p5-center-bloom {
  fill: url("#p5CenterBloom");
  filter: url("#p5WideGlow");
  animation: p5-opacity-pulse 3.6s ease-in-out infinite;
}

.p5-center-ring,
.p5-pin-ring {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url("#p5SoftGlow");
}

.p5-center-ring {
  stroke: url("#p5RouteTint");
}

.p5-ring-a {
  stroke-width: 4.8;
  stroke-dasharray: 72 430;
  opacity: 0.52;
  animation: p5-orbit 3.4s linear infinite;
}

.p5-ring-b {
  stroke-width: 3.8;
  stroke-dasharray: 52 320;
  opacity: 0.44;
  animation: p5-orbit-reverse 2.65s linear infinite;
}

.p5-ring-c {
  stroke-width: 3;
  stroke-dasharray: 34 220;
  opacity: 0.4;
  animation: p5-orbit 1.9s linear infinite;
}

.p5-pin-ring-a {
  stroke: #fff8bf;
  stroke-width: 5;
  stroke-dasharray: 44 180;
  opacity: 0.72;
  animation: p5-orbit 1.85s linear infinite;
}

.p5-pin-ring-b {
  stroke: #9cff24;
  stroke-width: 3.4;
  stroke-dasharray: 28 120;
  opacity: 0.62;
  animation: p5-orbit-reverse 1.35s linear infinite;
}

.p5-route-halo path {
  fill: none;
  stroke: url("#p5RouteTint");
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.12;
  filter: url("#p5WideGlow");
  animation: p5-opacity-pulse 4s ease-in-out infinite;
}

.p5-route-halo path:nth-child(9) {
  stroke-width: 7;
  opacity: 0.09;
}

.p5-flow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url("#p5SoftGlow");
  animation-name: p5-stream-forward, stream-pulse;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

.p5-flow-a,
.p5-flow-c,
.p5-flow-d {
  stroke: #fffdf0;
  stroke-width: 3.6;
  stroke-dasharray: 38 330;
  animation-duration: 2.35s, 3s;
}

.p5-flow-b,
.p5-flow-j {
  stroke: #ffc94f;
  stroke-width: 4.2;
  stroke-dasharray: 44 330;
  animation-duration: 2.1s, 2.8s;
  animation-delay: -0.75s, -1.1s;
}

.p5-flow-e,
.p5-flow-f,
.p5-flow-g,
.p5-flow-h {
  stroke: #d8ff54;
  stroke-width: 3.5;
  stroke-dasharray: 40 340;
  animation-duration: 2.45s, 3.2s;
  animation-delay: -1.2s, -0.6s;
}

.p5-flow-i,
.p5-flow-k,
.p5-flow-l {
  stroke: #fff8c4;
  stroke-width: 3.2;
  stroke-dasharray: 30 250;
  animation-duration: 1.75s, 2.4s;
  opacity: 0.78;
}

.p5-flow-l {
  stroke: #c3a6ff;
}

.p5-flow-m {
  stroke: #ffffff;
  stroke-width: 3.2;
  stroke-dasharray: 54 440;
  animation-duration: 3.6s, 3.6s;
  animation-delay: -1.7s, -0.7s;
  opacity: 0.66;
}

.p5-spark-trails circle {
  transform-box: fill-box;
  transform-origin: center;
}

.p5-node-twinkles circle {
  fill: #fffbd0;
  filter: url("#p5DotGlow");
  opacity: 0;
  transform-origin: center;
  animation: p5-node-glow 2.8s ease-in-out infinite;
}

.p5-node-twinkles circle:nth-child(2) {
  animation-delay: -0.2s;
}

.p5-node-twinkles circle:nth-child(3) {
  animation-delay: -0.4s;
}

.p5-node-twinkles circle:nth-child(4) {
  animation-delay: -0.6s;
}

.p5-node-twinkles circle:nth-child(5) {
  animation-delay: -0.8s;
}

.p5-node-twinkles circle:nth-child(6) {
  animation-delay: -1s;
}

.p5-node-twinkles circle:nth-child(7) {
  animation-delay: -1.2s;
}

.p5-node-twinkles circle:nth-child(8) {
  animation-delay: -1.4s;
}

.p5-node-twinkles circle:nth-child(9) {
  animation-delay: -1.6s;
}

.p5-node-twinkles circle:nth-child(10) {
  animation-delay: -1.8s;
}

.p5-node-twinkles circle:nth-child(11) {
  animation-delay: -2s;
}

.p5-node-twinkles circle:nth-child(12) {
  animation-delay: -2.2s;
}

.p5-node-twinkles circle:nth-child(13) {
  animation-delay: -2.4s;
}

@keyframes stream-forward {
  from {
    stroke-dashoffset: 680;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes p3-stream-forward {
  from {
    stroke-dashoffset: 460;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes p3-opacity-pulse {
  0%,
  100% {
    opacity: 0.24;
  }

  48% {
    opacity: 0.72;
  }
}

@keyframes p3-static-twinkle {
  0%,
  100% {
    opacity: 0;
  }

  45% {
    opacity: 0.95;
  }

  70% {
    opacity: 0.4;
  }
}

@keyframes p3-orbit {
  from {
    stroke-dashoffset: 480;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes p3-orbit-reverse {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 390;
  }
}

@keyframes p4-stream-forward {
  from {
    stroke-dashoffset: 420;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes p4-orbit {
  from {
    stroke-dashoffset: 460;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes p4-orbit-reverse {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 430;
  }
}

@keyframes p4-opacity-pulse {
  0%,
  100% {
    opacity: 0.22;
  }

  48% {
    opacity: 0.62;
  }
}

@keyframes p4-node-glow {
  0%,
  100% {
    opacity: 0;
  }

  44% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.35;
  }
}

@keyframes p5-stream-forward {
  from {
    stroke-dashoffset: 430;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes p5-orbit {
  from {
    stroke-dashoffset: 460;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes p5-orbit-reverse {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 430;
  }
}

@keyframes p5-opacity-pulse {
  0%,
  100% {
    opacity: 0.22;
  }

  48% {
    opacity: 0.64;
  }
}

@keyframes p5-node-glow {
  0%,
  100% {
    opacity: 0;
  }

  44% {
    opacity: 0.92;
  }

  72% {
    opacity: 0.36;
  }
}

@keyframes stream-pulse {
  0%,
  100% {
    opacity: 0.36;
  }

  42% {
    opacity: 1;
  }

  72% {
    opacity: 0.62;
  }
}

@keyframes route-breathe {
  0%,
  100% {
    opacity: 0.13;
  }

  45% {
    opacity: 0.3;
  }
}

@keyframes portal-breathe {
  0%,
  100% {
    opacity: 0.24;
    transform: scale(0.985);
  }

  48% {
    opacity: 0.72;
    transform: scale(1.025);
  }
}

@keyframes portal-trace {
  from {
    stroke-dashoffset: 360;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes portal-drift {
  0%,
  100% {
    opacity: 0.24;
    transform: translateY(8px) scale(0.8);
  }

  46% {
    opacity: 0.95;
    transform: translateY(-7px) scale(1.2);
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.55);
  }

  45% {
    opacity: 0.95;
    transform: scale(1.45);
  }

  70% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-halo path,
  .portal-bloom,
  .portal-arch,
  .portal-sweep,
  .portal-dot,
  .flow-line,
  .route-twinkles circle,
  .p3-center-bloom,
  .p3-center-ring,
  .p3-coin-ring,
  .p3-coin-sweep,
  .p3-route-halo path,
  .p3-flow,
  .p3-twinkles circle,
  .p4-center-bloom,
  .p4-center-ring,
  .p4-route-halo path,
  .p4-flow,
  .p4-node-twinkles circle,
  .p5-center-bloom,
  .p5-center-ring,
  .p5-pin-ring,
  .p5-route-halo path,
  .p5-flow,
  .p5-node-twinkles circle {
    animation: none;
  }

  .spark-trails,
  .p3-spark-trails,
  .p4-spark-trails,
  .p5-spark-trails {
    display: none;
  }
}