:root {
  color-scheme: dark;
  font-family: "Nunito", "M PLUS Rounded 1c", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #11131a;
}

body { user-select: none; }

.loading-composer-root {
  --composer-bg: #11131a;
  --composer-bg-secondary: #1a1d27;
  --composer-ambient: #7180a8;
  --composer-foreground: #f4f6fb;
  --composer-vignette: .35;
  --composer-grid: 0;
  --composer-grain: .02;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  color: var(--composer-foreground);
  background:
    radial-gradient(ellipse at 50% 46%, color-mix(in srgb, var(--composer-ambient) 24%, transparent), transparent 46%),
    radial-gradient(ellipse at 82% 18%, color-mix(in srgb, var(--composer-bg-secondary) 78%, transparent), transparent 52%),
    linear-gradient(145deg, var(--composer-bg), var(--composer-bg-secondary));
}

.loading-composer-root::before {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--composer-grid);
  background-image:
    linear-gradient(color-mix(in srgb, var(--composer-ambient) 28%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--composer-ambient) 28%, transparent) 1px, transparent 1px);
  background-size: clamp(34px, 4vw, 72px) clamp(34px, 4vw, 72px);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 78%);
}

.loading-composer-root::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgb(0 0 0 / calc(var(--composer-vignette) * .88)) 100%),
    repeating-radial-gradient(circle at 31% 47%, rgb(255 255 255 / calc(var(--composer-grain) * .28)) 0 1px, transparent 1px 4px);
  mix-blend-mode: soft-light;
}

.composer-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.composer-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.composer-star {
  position: absolute;
  width: var(--star-size, 2px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--star-opacity, .5);
  background: var(--composer-foreground);
  box-shadow: 0 0 calc(var(--star-size, 2px) * 4) color-mix(in srgb, var(--composer-ambient) 80%, white);
  animation: composer-star-twinkle var(--star-speed, 3s) ease-in-out infinite alternate;
  animation-delay: var(--star-delay, 0s);
}

.composer-layer {
  cursor: default;
  pointer-events: visiblePainted;
  opacity: var(--layer-opacity, 1);
  mix-blend-mode: var(--layer-blend, screen);
  filter: blur(var(--layer-blur, 0px));
  transition: opacity 120ms linear;
}

.is-editor .composer-layer { cursor: grab; }
.is-editor .composer-layer:active { cursor: grabbing; }
.is-editor .composer-layer.is-selected > .composer-layer-motion {
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px var(--layer-colour));
}

.composer-layer-motion {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

.composer-layer-loop {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity, clip-path;
}

.composer-layer-shape,
.composer-layer-detail {
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.composer-layer-shape {
  fill: none;
  stroke: var(--layer-colour);
  stroke-width: var(--layer-thickness, 8);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 calc(5px * var(--layer-glow, .65)) var(--layer-colour)) drop-shadow(0 0 calc(18px * var(--layer-glow, .65)) var(--layer-secondary));
}

.composer-layer-detail {
  fill: var(--layer-secondary);
  stroke: none;
  filter: drop-shadow(0 0 calc(9px * var(--layer-glow, .65)) var(--layer-colour));
}

.composer-layer-track {
  fill: none;
  stroke: color-mix(in srgb, var(--layer-colour) 18%, transparent);
  stroke-width: var(--layer-thickness, 8);
  vector-effect: non-scaling-stroke;
}

.composer-layer-text {
  dominant-baseline: middle;
  text-anchor: middle;
  fill: var(--layer-colour);
  font-weight: 800;
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--layer-secondary) 18%, transparent);
  stroke-width: 1px;
  filter: drop-shadow(0 0 calc(14px * var(--layer-glow, .65)) var(--layer-secondary));
}

.composer-motion-spin { animation: composer-spin calc(7s / var(--layer-speed, 1)) linear infinite; }
.composer-motion-counter_spin { animation: composer-counter-spin calc(8s / var(--layer-speed, 1)) linear infinite; }
.composer-motion-pulse { animation: composer-pulse calc(2s / var(--layer-speed, 1)) ease-in-out infinite; }
.composer-motion-breathe { animation: composer-breathe calc(3.4s / var(--layer-speed, 1)) ease-in-out infinite; }
.composer-motion-float { animation: composer-float calc(4.6s / var(--layer-speed, 1)) ease-in-out infinite; }
.composer-motion-drift { animation: composer-drift calc(5.8s / var(--layer-speed, 1)) ease-in-out infinite alternate; }
.composer-motion-scan { animation: composer-scan calc(2.8s / var(--layer-speed, 1)) ease-in-out infinite; }
.composer-motion-travel { animation: composer-travel calc(4.2s / var(--layer-speed, 1)) cubic-bezier(.45, 0, .2, 1) infinite; }
.composer-motion-sway { animation: composer-sway calc(5.2s / var(--layer-speed, 1)) ease-in-out infinite; }
.composer-motion-rise { animation: composer-rise calc(4.8s / var(--layer-speed, 1)) cubic-bezier(.42, 0, .2, 1) infinite; }

.composer-loop-draw .composer-layer-shape {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: composer-loop-draw var(--layer-loop-duration, 3.6s) cubic-bezier(.55, 0, .25, 1) var(--layer-loop-delay, 0ms) infinite;
}
.composer-loop-fill.has-loop-fill [data-loop-fill] {
  transform-box: fill-box;
  transform-origin: left center;
  animation: composer-loop-fill var(--layer-loop-duration, 3.6s) cubic-bezier(.45, 0, .22, 1) var(--layer-loop-delay, 0ms) infinite;
}
.composer-loop-fill:not(.has-loop-fill),
.composer-loop-reveal {
  animation: composer-loop-reveal var(--layer-loop-duration, 3.6s) cubic-bezier(.45, 0, .22, 1) var(--layer-loop-delay, 0ms) infinite;
}
.composer-loop-chase [data-loop-index] {
  animation: composer-loop-chase var(--layer-loop-duration, 3.6s) ease-in-out var(--loop-node-delay, 0ms) infinite;
}
.composer-loop-sweep {
  animation: composer-loop-sweep var(--layer-loop-duration, 3.6s) linear var(--layer-loop-delay, 0ms) infinite;
}
.composer-loop-pulse {
  animation: composer-loop-pulse var(--layer-loop-duration, 3.6s) ease-in-out var(--layer-loop-delay, 0ms) infinite;
}
.composer-loop-blink {
  animation: composer-loop-blink var(--layer-loop-duration, 3.6s) steps(1, end) var(--layer-loop-delay, 0ms) infinite;
}

@keyframes composer-spin { to { transform: rotate(360deg); } }
@keyframes composer-counter-spin { to { transform: rotate(-360deg); } }
@keyframes composer-pulse { 50% { transform: scale(1.055); opacity: .72; } }
@keyframes composer-breathe { 50% { transform: scale(.965); opacity: .82; } }
@keyframes composer-float { 50% { transform: translateY(-14px); } }
@keyframes composer-drift { to { transform: translate(18px, -8px) rotate(2deg); } }
@keyframes composer-scan { 50% { transform: translateX(16px); opacity: .74; } }
@keyframes composer-travel {
  0%, 100% { transform: translateX(-34px); opacity: .58; }
  46%, 58% { transform: translateX(34px); opacity: 1; }
}
@keyframes composer-sway {
  0%, 100% { transform: translateX(-10px) rotate(-.45deg); }
  50% { transform: translateX(10px) rotate(.45deg); }
}
@keyframes composer-rise {
  0%, 100% { transform: translateY(18px); opacity: .42; }
  52% { transform: translateY(-20px); opacity: 1; }
}
@keyframes composer-star-twinkle { to { opacity: .12; transform: scale(.55); } }
@keyframes composer-loop-draw {
  0%, 8% { stroke-dashoffset: 1; opacity: .16; }
  46%, 68% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: .16; }
}
@keyframes composer-loop-fill {
  0%, 8% { transform: scaleX(0); opacity: .25; }
  52%, 72% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: .25; }
}
@keyframes composer-loop-reveal {
  0%, 8% { clip-path: inset(0 100% 0 0); opacity: .18; }
  48%, 72% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 100%); opacity: .18; }
}
@keyframes composer-loop-chase {
  0%, 58%, 100% { opacity: .12; transform: scale(.68); }
  14%, 32% { opacity: 1; transform: scale(1.12); }
}
@keyframes composer-loop-sweep { to { transform: rotate(360deg); } }
@keyframes composer-loop-pulse {
  0%, 100% { transform: scale(.94); opacity: .48; }
  45%, 62% { transform: scale(1.035); opacity: 1; }
}
@keyframes composer-loop-blink {
  0%, 14%, 22%, 72%, 80%, 100% { opacity: .35; }
  15%, 21%, 73%, 79% { opacity: 1; }
}

.loading-composer-root.is-paused *,
.loading-composer-root.is-paused *::before,
.loading-composer-root.is-paused *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .composer-layer-motion,
  .composer-layer-loop,
  .composer-layer-loop *,
  .composer-star { animation: none !important; }
}