@charset "UTF-8";

@property --stranger-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

:root {
  color-scheme: dark;
  --orange: #f47d30;
  --orbit: rgba(237, 240, 238, .36);
  --system-size: min(115vmin, 115vw);
  --system-scale: .8;
  --clock-size: 52px;
  --background-color: #030405;
  --orbit-opacity: .36;
  --trail-color: rgba(237, 240, 238, var(--orbit-opacity));
}

@font-face {
  font-family: 'ITC Serif Gothic';
  src: url('./assets/fonts/ITCSerifGothic-ExtraBold.otf') format('opentype');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--background-color); }
img { display: block; user-select: none; -webkit-user-drag: none; }

.wallpaper {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden; isolation: isolate;
  background: var(--background-color);
}
.loop-blackout .wallpaper::after,
.loop-restarting .wallpaper::after {
  content: ""; position: absolute; z-index: 20; inset: 0;
  pointer-events: none; background: #000;
  opacity: var(--loop-cover-opacity, 0);
}
.starfield { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.explosion-particles {
  position: absolute; z-index: 6; inset: 0;
  width: 100%; height: 100%; pointer-events: none;
}
.loop-finale .sun-glow {
  z-index: 9;
  opacity: var(--loop-sun-opacity, 1);
}
.loop-finale .clock,
.loop-finale .orbit,
.loop-finale .interloper-orbit,
.loop-finale .interloper:not(.interloper--swallowed),
.loop-finale .interloper-beam,
.loop-finale .white-hole { opacity: var(--loop-world-opacity, 1); }
.loop-finale .stranger-wrap { opacity: var(--loop-stranger-opacity, 1); }
.loop-finale .meteorite-layer { opacity: var(--loop-world-opacity, 1); }

.clock {
  position: absolute; z-index: 5;
  top: var(--clock-top, 2.5%); left: var(--clock-left, 50%);
  transform: translateX(-50%);
  color: var(--orange); text-align: center;
  text-shadow: 0 0 20px rgba(244, 125, 48, .2);
  user-select: none;
}
.loop-finale .clock { z-index: 1; }
.clock__time {
  display: block;
  font: 800 var(--clock-size)/1.2 'ITC Serif Gothic', Georgia, serif;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.loop-countdown {
  display: none; position: absolute; z-index: 5;
  right: clamp(16px, 2.5vw, 36px);
  bottom: clamp(56px, 7vh, 84px);
  color: var(--orange);
  font: 800 clamp(14px, calc(var(--clock-size) * .55), 28px)/1.2 'ITC Serif Gothic', Georgia, serif;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(244, 125, 48, .2);
  user-select: none; pointer-events: none;
}
.loop-countdown-enabled:not(.loop-disabled) .loop-countdown { display: block; }
.loop-finale .loop-countdown {
  z-index: 1;
  opacity: 0;
}

.solar-system {
  position: absolute; z-index: 2; top: 52%; left: 50%;
  width: var(--system-size); height: var(--system-size);
  transform: translate(-50%, -50%) scale(var(--system-scale));
  pointer-events: none;
  /* The wide ellipse crosses a chord of the Sun near its closest point. */
  --stranger-radius-x: calc(var(--system-size) * var(--stranger-radius-x-factor, .72));
  --stranger-radius-y: calc(var(--system-size) * var(--stranger-radius-y-factor, 1.08));
  --stranger-impact: calc(var(--system-size) * var(--stranger-impact-factor, .03));
  --stranger-cos: 1;
  --stranger-sin: 0;
  --stranger-orbit-x: calc(var(--stranger-impact) + var(--stranger-radius-x) * (1 - cos(var(--stranger-angle))));
  --stranger-orbit-y: calc(var(--stranger-radius-y) * sin(var(--stranger-angle)));
  --stranger-x: calc(var(--stranger-orbit-x) * var(--stranger-cos) - var(--stranger-orbit-y) * var(--stranger-sin));
  --stranger-y: calc(var(--stranger-orbit-x) * var(--stranger-sin) + var(--stranger-orbit-y) * var(--stranger-cos));
  animation: stranger-orbit 60s linear -25.2s infinite;
}
.orbit-paths {
  position: absolute; z-index: 0; top: -50%; left: -50%;
  width: 200%; height: 200%; pointer-events: none;
}
.loop-finale .orbit-paths { opacity: var(--loop-world-opacity, 1); }
.orbit {
  position: absolute; top: 50%; left: 50%;
  width: var(--diameter); height: var(--diameter);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.orbit--twins { --diameter: 25%; --start: -4deg; --period: 75s; }
.orbit--timber { --diameter: 40%; --start: 132deg; --period: 115s; }
.orbit--brittle { --diameter: 60%; --start: 26deg; --period: 155s; }
.orbit--giants { --diameter: 78%; --start: -42deg; --period: 205s; }
.orbit--bramble { --diameter: 96%; --start: 48deg; --period: 265s; }
.orbit--beacon { --diameter: 118%; --start: 154deg; --period: 330s; }
.outer-beacon {
  position: absolute; z-index: 3; top: 50%; left: 100%;
  width: 22px; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: auto;
  cursor: default;
}
.outer-beacon::before,
.outer-beacon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); border-radius: 50%;
  pointer-events: none;
}
.outer-beacon::before {
  z-index: 1; width: 4px; height: 4px;
  background: #fff;
  box-shadow: 0 0 3px .5px #fff, 0 0 10px 4px rgba(255, 92, 92, .95);
}
.outer-beacon::after {
  width: 32px; height: 32px;
  background: radial-gradient(circle, rgba(255, 68, 68, .78) 0%, rgba(224, 22, 37, .42) 33%, transparent 72%);
  filter: blur(3px);
  animation: beacon-glow 5s ease-in-out infinite;
}

.sun-glow {
  position: absolute; z-index: 1; top: 50%; left: 50%;
  width: 18%; height: 18%; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 72, 24, calc(.55 * var(--loop-sun-red, 0))),
    rgba(255, 56, 20, calc(.19 * var(--loop-sun-red, 0))) 48%, transparent 74%);
  filter: blur(14px);
}
.sun-glow::before,
.sun-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
}
.sun-glow::before {
  background: radial-gradient(circle, rgba(255, 125, 24, .45), rgba(255, 125, 24, .15) 48%, transparent 74%);
  opacity: calc(1 - var(--loop-sun-red, 0) - var(--loop-sun-blue, 0));
}
.sun-glow::after {
  background: radial-gradient(circle, rgba(80, 205, 255, .65), rgba(50, 150, 255, .25) 48%, transparent 78%);
  opacity: var(--loop-sun-blue, 0);
}
.sun {
  position: absolute; z-index: 3; top: 50%; left: 50%;
  width: 14%; height: 14%;
  isolation: isolate;
  transform: translate(-50%, -50%) scale(calc(var(--object-scale, 1) * var(--loop-sun-scale, 1)));
  -webkit-mask-image: radial-gradient(
    circle calc(var(--system-size) * .0768 * var(--loop-sun-inverse-scale, 1)) at
    calc(50% + var(--stranger-x) * var(--loop-sun-inverse-scale, 1))
    calc(50% + var(--stranger-y) * var(--loop-sun-inverse-scale, 1)),
    rgba(255, 255, 255, var(--loop-sun-mask-alpha, 0)) 0%,
    rgba(255, 255, 255, var(--loop-sun-mask-alpha, 0)) 75%, #fff 100%);
  mask-image: radial-gradient(
    circle calc(var(--system-size) * .0768 * var(--loop-sun-inverse-scale, 1)) at
    calc(50% + var(--stranger-x) * var(--loop-sun-inverse-scale, 1))
    calc(50% + var(--stranger-y) * var(--loop-sun-inverse-scale, 1)),
    rgba(255, 255, 255, var(--loop-sun-mask-alpha, 0)) 0%,
    rgba(255, 255, 255, var(--loop-sun-mask-alpha, 0)) 75%, #fff 100%);
}
.loop-finale .sun {
  z-index: 10;
  opacity: var(--loop-sun-opacity, 1);
}
.loop-finale .sun__image {
  animation: sun-spin 180s linear infinite;
  filter: brightness(var(--loop-sun-brightness, 1));
}
.sun::before {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: #32bfff; opacity: var(--loop-sun-blue, 0);
  mix-blend-mode: color;
  -webkit-mask-image: url('./assets/Sun.png');
  mask-image: url('./assets/Sun.png');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.loop-finale .sun::before { animation: sun-spin 180s linear infinite; }
.sun::after {
  content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none;
  background: #ff2020; opacity: var(--loop-sun-red, 0);
  mix-blend-mode: multiply;
  -webkit-mask-image: url('./assets/Sun.png');
  mask-image: url('./assets/Sun.png');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.loop-active .sun-glow { transform: translate(-50%, -50%) scale(var(--loop-sun-scale, 1)); }
.sun__image {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain;
  animation: sun-pulse 8s ease-in-out infinite alternate, sun-spin 180s linear infinite;
}
.stranger-wrap {
  position: absolute;
  z-index: 2;
  top: 50%; left: 50%;
  width: 28%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Sun.png is opaque only to about 46.5% of its 14%-wide box. Keep the
     shadow inside that visible disk, including while the red Sun grows. */
  -webkit-mask-image: radial-gradient(circle calc(var(--system-size) * .065 * var(--object-scale, 1) * var(--loop-sun-scale, 1)) at center,
    #000 0%, #000 67%, rgba(0, 0, 0, .7) 82%, transparent 100%);
  mask-image: radial-gradient(circle calc(var(--system-size) * .065 * var(--object-scale, 1) * var(--loop-sun-scale, 1)) at center,
    #000 0%, #000 67%, rgba(0, 0, 0, .7) 82%, transparent 100%);
}
.stranger-motion {
  position: absolute;
  top: calc(50% + var(--stranger-y));
  left: calc(50% + var(--stranger-x));
  width: calc(var(--system-size) * .15);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.stranger-shadow {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  background: var(--background-color);
  -webkit-mask-image: radial-gradient(circle at center,
    #000 0%, #000 74%, rgba(0, 0, 0, .55) 90%, transparent 100%);
  mask-image: radial-gradient(circle at center,
    #000 0%, #000 74%, rgba(0, 0, 0, .55) 90%, transparent 100%);
}
.stranger {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 70%;
  height: auto;
  aspect-ratio: 954 / 882;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: brightness(1.15);
}
.stranger-disabled .stranger-wrap { display: none; }
.stranger-disabled .sun { -webkit-mask-image: none; mask-image: none; }
.stranger-shadow-only .stranger { display: none; }
.sun-station-orbit {
  position: absolute; z-index: 1; top: 50%; left: 50%;
  width: calc(19% * var(--orbit-scale, 1)); height: calc(19% * var(--orbit-scale, 1));
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  animation: station-orbit var(--period, 32s) linear infinite;
}
.sun-station {
  position: absolute; top: 50%; left: var(--loop-station-left, 90%);
  width: 17%; height: 13%; object-fit: contain;
  transform: translate(-50%, -50%) rotate(90deg) scale(var(--object-scale, 1));
  opacity: var(--loop-station-opacity, 1);
}
.traveller {
  position: absolute; inset: 0; border-radius: 50%;
  animation: orbit var(--period) linear infinite;
}
.binary-system {
  position: absolute; z-index: 3; top: 50%; left: 100%;
  --period: 18s;
  width: calc(17% * var(--binary-scale, 1)); height: 0;
  transform: translate(-50%, -50%);
  animation: binary-spin var(--period, 18s) linear infinite;
}
.planet, .moon {
  position: absolute; top: 50%; left: 100%;
  width: var(--size); height: var(--size); object-fit: contain;
  transform: translate(-50%, -50%) scale(var(--object-scale, 1));
}
.planet--ember, .planet--ash { width: 70%; height: auto; top: 0; }
.planet--ember { left: 0; }
.planet--ash { left: 100%; }
.planet--ember:not(.planet--twins-final),
.planet--ash:not(.planet--twins-final) { opacity: calc(1 - var(--loop-twins-progress, 0)); }
.planet--twins-final { opacity: var(--loop-twins-progress, 0); }
/* Ash_Twin_Empty.png has less padding than the original, so its artwork
   needs a smaller box to stay aligned during the crossfade. */
.planet--ash.planet--twins-final {
  width: 54%;
  transform: translate(-48.5%, -51.2%) scale(var(--object-scale, 1));
}
.sand-pillar {
  position: absolute; top: 0; left: 50%;
  width: 100%; height: auto;
  object-fit: contain; transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--loop-sand-fade-duration, 1.5s) ease-in-out;
}
.loop-disabled .sand-pillar { opacity: 1; }
.loop-active.loop-sand-flowing .sand-pillar { opacity: 1; }
.loop-sails-open .stranger { filter: brightness(1.25); }
.loop-dam-broken .stranger { filter: brightness(1.3); }
.loop-active .stranger { transition: transform 1.2s ease; }
.loop-tower-fallen .stranger { transform: translate(-50%, -50%) rotate(9deg); }
.planet--timber { --size: clamp(32px, 5.2vmin, 55px); }
.planet--brittle { --size: clamp(33px, 5.3vmin, 61px); }
.brittle-image {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%; object-fit: contain;
  transform: translate(-50%, -50%);
  transition: opacity .65s ease-in-out;
}
.brittle-image--hole { width: 96%; height: 96%; opacity: 0; }
.planet--brittle-holed .brittle-image--intact { opacity: 0; }
.planet--brittle-holed .brittle-image--hole { opacity: 1; }
.planet--giants { --size: clamp(42px, 7vmin, 80px); }
.planet--timber { --spin-period: 210s; }
.planet--brittle { --spin-period: 240s; }
.planet--giants { --spin-period: 270s; }
.planet--bramble { --spin-period: 300s; }
.planet--timber, .planet--brittle, .planet--giants, .planet--bramble {
  animation: planet-spin var(--spin-period) linear infinite;
}
.giants-lightning {
  position: absolute; z-index: 1; top: 50%; left: 100%;
  width: clamp(42px, 7vmin, 75px); height: clamp(42px, 7vmin, 75px);
  transform: translate(-50%, -50%) scale(var(--object-scale, 1));
  clip-path: circle(42% at 50% 50%);
  background: radial-gradient(circle 60% at var(--storm-x, 50%) var(--storm-y, 50%),
    rgba(255, 48, 37, .96), rgba(236, 9, 30, .62) 52%, transparent 100%);
  opacity: 0;
  pointer-events: none;
}
.giants-lightning svg {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 0 3px #ff3039) drop-shadow(0 0 6px #ef1625);
}
.giants-lightning path {
  fill: none; stroke: #ff8a7c; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.giants-lightning .giants-lightning__core { stroke: #fff0dd; stroke-width: 1; }
.giants-lightning .giants-lightning__branch { stroke: #ff4d4a; stroke-width: 1.2; }
.moon-orbit--giants { z-index: 2; }
.planet--bramble { --size: clamp(42px, 7.5vmin, 85px); }
.moon-orbit {
  position: absolute; top: 50%; left: 100%;
  --period: 18s;
  width: calc(clamp(66px, 10vmin, 116px) * var(--orbit-scale, 1));
  height: calc(clamp(66px, 10vmin, 116px) * var(--orbit-scale, 1));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: moon-orbit var(--period, 18s) linear infinite;
}
.moon { --size: clamp(24px, 3.4vmin, 39px); }
.moon-orbit--brittle { --period: 11s; animation-delay: -3s; }
.moon--hollow-lantern { --size: clamp(22px, 3.5vmin, 35px); }
.moon-orbit--giants {
  width: calc(clamp(88px, 13vmin, 119px) * var(--orbit-scale, 1));
  height: calc(clamp(88px, 13vmin, 119px) * var(--orbit-scale, 1));
  --period: 28s;
}
.moon--orbital-probe,
.moon--orbital-probe-full {
  --size: clamp(29px, 4.2vmin, 38px);
  transform: translate(-50%, -50%) rotate(var(--probe-aim-angle, 0rad)) scale(var(--object-scale, 1));
}
.moon--orbital-probe { opacity: 0; }
.loop-probe-broken .moon--orbital-probe { opacity: 1; }
.loop-probe-broken .moon--orbital-probe-full { opacity: 0; }
.probe-burst {
  position: absolute; z-index: 7; top: 50%; left: 100%;
  width: clamp(27px, 3.9vmin, 40px); aspect-ratio: 1;
  transform: translate(-50%, -50%); opacity: 0;
  pointer-events: none;
}
.probe-burst__core,
.probe-burst__lobe {
  position: absolute; display: block; left: 50%; top: 50%;
  border-radius: 48% 52% 55% 45% / 52% 43% 57% 48%;
  opacity: 0; pointer-events: none;
}
.probe-burst__core {
  z-index: 2; width: 78%; aspect-ratio: 1;
  border-radius: 57% 43% 48% 52% / 44% 58% 42% 56%;
  background:
    radial-gradient(circle at 40% 38%, #ffe6a0 0 10%, #ffc34e 25%, #f07a24 52%, rgba(126, 35, 17, .72) 70%, transparent 78%);
  filter: drop-shadow(0 0 5px rgba(255, 135, 34, .62));
}
.probe-burst__lobe {
  width: var(--lobe-size); aspect-ratio: 1;
  left: calc(50% + var(--burst-x));
  top: calc(50% + var(--burst-y));
  background: radial-gradient(circle at 38% 35%,
    rgba(255, 211, 103, .96) 0 9%, #ffae39 27%, rgba(228, 82, 24, .9) 53%, rgba(103, 30, 19, .58) 69%, transparent 79%);
  filter: blur(.35px) drop-shadow(0 0 3px rgba(242, 96, 25, .42));
}
.probe-burst__lobe:nth-of-type(2) { --lobe-size: 68%; --burst-x: -8px; --burst-y: -3px; --burst-rotate: -26deg; --burst-delay: .01s; }
.probe-burst__lobe:nth-of-type(3) { --lobe-size: 64%; --burst-x: 8px; --burst-y: -5px; --burst-rotate: 31deg; --burst-delay: .04s; }
.probe-burst__lobe:nth-of-type(4) { --lobe-size: 66%; --burst-x: 8px; --burst-y: 6px; --burst-rotate: 12deg; --burst-delay: .07s; }
.probe-burst__lobe:nth-of-type(5) { --lobe-size: 60%; --burst-x: -6px; --burst-y: 7px; --burst-rotate: -9deg; --burst-delay: .09s; }
.probe-burst__lobe:nth-of-type(6) { --lobe-size: 56%; --burst-x: 0px; --burst-y: -9px; --burst-rotate: 43deg; --burst-delay: .12s; }
.probe-burst__lobe:nth-of-type(7) { --lobe-size: 54%; --burst-x: 1px; --burst-y: 9px; --burst-rotate: -38deg; --burst-delay: .15s; }
.probe-burst__lobe:nth-of-type(3),
.probe-burst__lobe:nth-of-type(6) { filter: blur(.55px) brightness(1.12) drop-shadow(0 0 3px rgba(242, 96, 25, .38)); }
.probe-burst__lobe:nth-of-type(4),
.probe-burst__lobe:nth-of-type(5) { filter: blur(.5px) brightness(.88) drop-shadow(0 0 3px rgba(190, 62, 24, .4)); }
.probe-shot {
  position: absolute; z-index: 4; top: 0; left: 0;
  width: 11px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #f2f3ff 0%, #4759fc 42%, #4759fc 67%, transparent 80%);
  box-shadow: 0 0 10px 3px rgba(71, 89, 252, .85), 0 0 25px 7px rgba(71, 89, 252, .4);
  transform: translate3d(-100px, -100px, 0); opacity: 0;
  pointer-events: none;
}
.loop-probe-firing .probe-burst { animation: probe-fire 1.2s ease-out both; }
.loop-probe-firing .probe-burst__core { animation: probe-fire-core 1.05s cubic-bezier(.16, .72, .3, 1) both; }
.loop-probe-firing .probe-burst__lobe {
  animation: probe-fire-lobe 1.05s cubic-bezier(.16, .72, .3, 1) var(--burst-delay) both;
}
.quantum-orbit {
  position: absolute; z-index: 6; top: 50%; left: 100%;
  --period: 16s;
  width: calc(clamp(86px, 12vmin, 138px) * var(--orbit-scale, 1));
  height: calc(clamp(86px, 12vmin, 138px) * var(--orbit-scale, 1));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  animation: moon-orbit var(--period, 16s) linear infinite;
  transition: opacity .35s ease;
  pointer-events: none;
}
.traveller--giants .quantum-orbit,
.traveller--bramble .quantum-orbit {
  width: calc(clamp(104px, 15vmin, 172px) * var(--orbit-scale, 1));
  height: calc(clamp(104px, 15vmin, 172px) * var(--orbit-scale, 1));
}
.quantum-orbit--shifting { opacity: 0; }
.quantum-orbit--absent { display: none; }
.quantum-orbit--instant { transition: none; }
.quantum-hover-target {
  position: absolute; top: 50%; left: 100%;
  width: clamp(44px, 6vmin, 70px); height: clamp(44px, 6vmin, 70px);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
}
.quantum-moon {
  position: absolute; top: 50%; left: 50%;
  z-index: 7;
  width: clamp(24px, 3.5vmin, 40px); height: auto;
  transform: translate(-50%, -50%) scale(var(--object-scale, 1));
}

/* The comet's low ellipse grazes the Sun and extends past White Hole. */
.interloper-orbit {
  position: absolute; z-index: 0;
  top: var(--orbit-top, 33.5%); left: var(--orbit-left, 41%);
  width: var(--orbit-width, 72%); height: var(--orbit-height, 33%);
  border-radius: 50%;
  transition: opacity .5s ease;
}
.interloper-orbit--swallowed,
.loop-finale .interloper-orbit--swallowed { opacity: 0; }
.interloper {
  position: absolute; z-index: 2;
  left: 0;
  top: 0;
  width: clamp(12px, 2.8vmin, 32px); height: auto;
  transform: translate(-50%, -50%) scale(var(--object-scale, 1));
  filter: drop-shadow(0 0 5px rgba(83, 192, 215, .4));
  opacity: 0;
  transition: opacity .5s ease;
  will-change: left, top, transform;
}
.interloper-beam {
  position: absolute; z-index: 1;
  left: 0; top: 0;
  width: clamp(65px, 10vmin, 135px); height: clamp(10px, 2vmin, 24px);
  transform: translate3d(-100px, -100px, 0);
  transform-origin: 0 50%;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background: radial-gradient(ellipse at 0 50%, rgba(244, 255, 255, .98) 0%, rgba(117, 223, 255, .7) 23%, rgba(69, 187, 255, .25) 67%, transparent 100%), repeating-linear-gradient(100deg, transparent 0 13px, rgba(220, 250, 255, .22) 15px 18px, transparent 21px 31px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, rgba(0, 0, 0, .75) 42%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, rgba(0, 0, 0, .75) 42%, transparent 100%);
  filter: blur(6px);
  opacity: 0;
  transition: opacity .5s ease;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
  animation: interloper-beam-flow 1.4s linear infinite;
}
.interloper-beam::after {
  content: ""; position: absolute; inset: 20% 0;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background: radial-gradient(ellipse at 0 50%, rgba(255, 255, 255, .8), rgba(130, 224, 255, .28) 42%, transparent 100%);
  filter: blur(5px);
  mix-blend-mode: screen;
  animation: interloper-beam-flicker 1.1s ease-in-out infinite alternate;
}
.interloper-beam::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background:
    radial-gradient(circle at 8% 48%, #fff 0 3px, transparent 4.5px),
    radial-gradient(circle at 29% 34%, rgba(180, 243, 255, .98) 0 2.5px, transparent 4px),
    radial-gradient(circle at 52% 67%, rgba(132, 226, 255, .95) 0 3px, transparent 4.5px),
    radial-gradient(circle at 76% 42%, rgba(205, 249, 255, 1) 0 2.5px, transparent 4px),
    radial-gradient(circle at 93% 58%, #fff 0 2px, transparent 3.5px),
    radial-gradient(circle at 41% 22%, rgba(111, 212, 255, 1) 0 2px, transparent 3.5px);
  background-size: 70px 100%;
  filter: blur(.1px) drop-shadow(0 0 3px rgba(126, 226, 255, .9));
  mix-blend-mode: screen;
  animation: interloper-beam-particles .42s linear infinite;
}
.loop-active .interloper { transition: opacity .5s ease; }
.loop-active .interloper-beam { transition: opacity .5s ease; }
.interloper--ready { opacity: 1; }
.interloper-beam--ready { opacity: .78; }
.interloper--swallowed { opacity: 0; }
.meteorite-layer {
  position: absolute; z-index: 6; inset: 0;
  pointer-events: none;
}
.meteorite {
  position: absolute; left: 0; top: 0;
  width: clamp(3px, .55vmin, 5px); height: clamp(3px, .55vmin, 5px);
  border-radius: 50%;
  background: #ffad42;
  box-shadow:
    0 0 3px 1px rgba(255, 216, 137, .9),
    0 0 8px 3px rgba(255, 113, 27, .6);
  will-change: transform, opacity;
}
.meteorite::before {
  content: ""; position: absolute; right: 65%; top: 50%;
  width: clamp(8px, 1.25vmin, 12px); height: clamp(3px, .45vmin, 5px);
  transform: translateY(-50%);
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 75, 21, .55) 40%, rgba(255, 175, 58, .95) 85%, #ffe6a1);
  filter: blur(1px);
}
.meteorite::after {
  content: ""; position: absolute; right: 165%; top: 50%;
  width: clamp(9px, 1.6vmin, 15px); height: clamp(5px, .85vmin, 8px);
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 30% 35%, rgba(136, 130, 121, .32), transparent 54%),
    radial-gradient(circle at 75% 60%, rgba(89, 87, 83, .4), transparent 66%);
  filter: blur(2px);
}
.meteor-impact {
  position: absolute; left: 0; top: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ffebbb;
  box-shadow: 0 0 4px 2px rgba(255, 185, 80, .9),
              0 0 9px 3px rgba(255, 103, 28, .55);
  pointer-events: none;
  will-change: transform, opacity;
}
.meteor-impact::before {
  content: ""; position: absolute; inset: -3px;
  border: 1px solid rgba(255, 190, 91, .7);
  border-radius: 50%;
}
.white-hole {
  position: absolute; z-index: 3;
  top: 50%; left: 105%;
  width: clamp(66px, 9vmin, 103px); height: auto;
  transform: translate(-50%, -50%) scale(var(--object-scale, 1));
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .35));
}

/* Fading arcs follow the planets, moons, binary pair, and comet. */
.trail-mode .orbit,
.trail-mode .moon-orbit,
.trail-mode .interloper-orbit,
.trail-mode .binary-system::before {
  border-color: transparent;
  box-shadow: none;
}
.trail-mode .orbit:not(.orbit--beacon) > .traveller::before,
.trail-mode .moon-orbit::before,
.trail-mode .interloper-orbit::before,
.trail-mode .binary-system::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 90deg,
    var(--trail-color) 0deg, transparent .1deg,
    transparent 270deg, var(--trail-color) 360deg);
  -webkit-mask: radial-gradient(ellipse farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(ellipse farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
.trail-mode .binary-system::before {
  inset: auto;
  top: 0;
  left: 50%;
  width: 100%;
  height: 0;
  padding-top: 100%;
  transform: translate(-50%, -50%);
}
.trail-mode .interloper-orbit::before {
  background: conic-gradient(from calc(var(--trail-angle, 0deg) + 90deg),
    var(--trail-color) 0deg, transparent .1deg,
    transparent 270deg, var(--trail-color) 360deg);
}
.orbit-hidden .orbit,
.orbit-hidden .moon-orbit,
.orbit-hidden .sun-station-orbit,
.orbit-hidden .interloper-orbit,
.orbit-hidden .binary-system::before {
  border-color: transparent;
  box-shadow: none;
}

@keyframes orbit { from { transform: rotate(var(--start)); } to { transform: rotate(calc(var(--start) + 360deg)); } }
@keyframes stranger-orbit {
  0% { --stranger-angle: -180deg; }
  40% { --stranger-angle: -9deg; }
  60% { --stranger-angle: 9deg; }
  100% { --stranger-angle: 180deg; }
}
@keyframes binary-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes station-orbit { from { transform: translate(-50%, -50%) rotate(-90deg); } to { transform: translate(-50%, -50%) rotate(270deg); } }
@keyframes moon-orbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes planet-spin { from { transform: translate(-50%, -50%) rotate(0deg) scale(var(--object-scale, 1)); } to { transform: translate(-50%, -50%) rotate(360deg) scale(var(--object-scale, 1)); } }
@keyframes sun-pulse { from { filter: brightness(.95); } to { filter: brightness(1.14); } }
@keyframes sun-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes beacon-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes interloper-beam-flow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, 80px 0; }
}
@keyframes interloper-beam-flicker {
  from { opacity: .35; transform: scaleY(.82); }
  to { opacity: .8; transform: scaleY(1.08); }
}
@keyframes interloper-beam-particles {
  from { background-position: 0 0; opacity: .25; transform: scaleY(.82); }
  35% { opacity: 1; transform: scaleY(1.12); }
  to { background-position: 100px 0; opacity: .2; transform: scaleY(.9); }
}
@keyframes probe-fire {
  0%, 4% { opacity: 0; }
  12%, 76% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes probe-fire-core {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-8deg); }
  15% { opacity: .96; transform: translate(-50%, -50%) scale(.78) rotate(-3deg); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.16) rotate(4deg); }
  72% { opacity: .64; transform: translate(-50%, -50%) scale(1.45) rotate(10deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.68) rotate(16deg); }
}
@keyframes probe-fire-lobe {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.16) rotate(var(--burst-rotate));
  }
  18% {
    opacity: .92;
    transform: translate(-50%, -50%) scale(.72) rotate(var(--burst-rotate));
  }
  48% {
    opacity: .92;
    transform: translate(-50%, -50%) scale(1.05) rotate(calc(var(--burst-rotate) + 8deg));
  }
  76% {
    opacity: .5;
    transform: translate(-50%, -50%) scale(1.28) rotate(calc(var(--burst-rotate) + 15deg));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.48) rotate(calc(var(--burst-rotate) + 22deg));
  }
}
@media (max-aspect-ratio: 4/5) {
  :root { --system-size: 96vw; }
  .solar-system { top: 52%; }
}