:root {
  color-scheme: light dark;
  font-family: MiSans, "Microsoft YaHei", system-ui, sans-serif;
  color: light-dark(#2b271c, #fff6df);
  background: light-dark(#fdfaf3, #17130d);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --muted: light-dark(#777165, #b7b2a5);
  --gold: #ffd526;
  --blue: light-dark(#1353b7, #8fc0ff);
  --orbit-line: light-dark(#b8840070, #f5cc3d85);
  --focus: light-dark(#b8860b, #f8c820);
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
[hidden] {
  display: none !important;
}
svg {
  display: block;
  flex-shrink: 0;
}
a {
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  touch-action: manipulation;
  cursor: pointer;
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 5px;
}

.scene {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.ambient,
.grain,
.orbits {
  position: absolute;
  pointer-events: none;
}
.ambient {
  inset: -15%;
  z-index: -3;
  background:
    radial-gradient(
      ellipse at 64% 36%,
      light-dark(#ffcf2670, #ffd52655),
      transparent 46%
    ),
    radial-gradient(
      ellipse at 30% 65%,
      light-dark(#4987e142, #579bff3d),
      transparent 40%
    );
  transform: translate(var(--pointer-x, 0px), var(--pointer-y, 0px));
  transition: transform 700ms ease;
  animation: ambient-drift 22s ease-in-out infinite;
}
.grain {
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  background-image: radial-gradient(
    light-dark(#aa93613b, #d9c6962b) 0.6px,
    transparent 0.6px
  );
  background-size: 5px 5px;
  mask-image: radial-gradient(ellipse, black, transparent 72%);
}
.orbits {
  z-index: -2;
  top: 46%;
  left: 50%;
  width: 760px;
  height: 600px;
  transform: translate(-50%, -50%) rotate(-22deg);
}
.orbit {
  position: absolute;
  border: 1px solid var(--orbit-line);
  border-radius: 50%;
}
.orbit-a {
  inset: 36px -4px 66px;
  border-top-color: light-dark(#b88400b0, #ffe478cc);
}
.orbit-b {
  inset: 12px -48px 18px 31px;
  transform: rotate(23deg);
  border-color: light-dark(#326dd070, #82b5ff8c);
  opacity: 0.95;
}
.orbit-c {
  inset: 83px 15px 85px -18px;
  transform: rotate(-15deg);
  opacity: 0.9;
}
.satellite {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: var(--gold);
  offset-path: ellipse(50% 50% at 50% 50%);
  offset-rotate: 0deg;
  animation: orbit-travel 32s linear infinite;
}
.satellite-gold {
  width: 14px;
  height: 14px;
  box-shadow:
    0 0 0 6px #ffd52624,
    0 0 26px #ffd526b0;
  animation-delay: -5s;
}
.satellite-blue {
  width: 10px;
  height: 10px;
  background: var(--blue);
  box-shadow: 0 0 18px light-dark(#1353b74d, #8fc0ffb0);
  animation-duration: 43s;
  animation-direction: reverse;
  animation-delay: -17s;
}
.satellite-small {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 14px #ffd52690;
  animation-duration: 43s;
  animation-direction: reverse;
  animation-delay: -35s;
}
.satellite-star {
  width: 26px;
  height: 26px;
  color: var(--blue);
  background: transparent;
  animation-duration: 55s;
  animation-delay: -29s;
}
.satellite-star svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px light-dark(#1353b74d, #8fc0ff99));
}

main {
  flex: 1;
  min-height: 620px;
  display: grid;
  place-items: center;
  padding: max(88px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right)) 100px
    max(24px, env(safe-area-inset-left));
}
.entry {
  position: relative;
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.logo-wrap {
  width: 144px;
  height: 144px;
  margin-bottom: 34px;
}
.logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px light-dark(#3c528a18, #00000030));
  transform: rotate(-5deg);
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: seal-float 8s ease-in-out infinite;
}
h1 {
  margin: 0 0 42px;
  font-size: 44px;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.4;
}
.title-dot {
  color: light-dark(#a87900, #f8c820);
}
.go {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 304px;
  min-height: 116px;
  padding: 16px 32px;
  border: 1px solid light-dark(#e9b900, #ffe88bb3);
  border-radius: 32px;
  background: linear-gradient(145deg, #fff07a 0%, #ffda2b 45%, #ffc800 100%);
  color: #261b00;
  font-size: 64px;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1;
  box-shadow:
    0 18px 44px light-dark(#d4a7194d, #ffd52638),
    0 0 50px light-dark(#ffd5261a, #ffd52624),
    inset 0 2px 0 #ffffff99;
  transform: rotate(-3deg);
  transition:
    transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 400ms;
}
.go::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    var(--sheen-angle, 115deg),
    transparent 25%,
    #ffffff55 45%,
    transparent 65%
  );
  background-size: 300% 300%;
  background-position: var(--sheen-start, 120% 0);
  opacity: 0;
  pointer-events: none;
  animation: button-sheen 12s ease-in-out 3s infinite;
  transition:
    opacity 300ms,
    background-position 900ms;
}
.go-arrow {
  width: 62px;
  height: 62px;
  transition: transform 400ms;
}
.go:focus-visible {
  transform: translate(var(--hover-x, 0px), var(--hover-y, -8px))
    rotate(var(--hover-rotation, 0deg));
}
.sticker-wrap {
  position: absolute;
  top: 94px;
  left: calc(50% + 134px);
}
.sticker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  white-space: nowrap;
  border-radius: 6px;
  background: var(--blue);
  color: light-dark(#fff, #101e38);
  box-shadow: 3px 4px 0 light-dark(#16499c18, #6d9fea19);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  transform: rotate(12deg);
  animation: sticker-float 9s ease-in-out infinite;
}
.sticker::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 10px;
  top: -6px;
  left: 33px;
  background: light-dark(#e2d2ad99, #b8a57570);
  transform: rotate(-13deg);
}
.star {
  position: absolute;
  color: var(--blue);
}
.star svg {
  filter: drop-shadow(0 0 6px light-dark(#1353b733, #8fc0ff80));
  animation: star-turn 12s ease-in-out infinite;
}
.star-a {
  top: 24px;
  left: calc(50% - 182px);
  transform: rotate(13deg);
}
.star-a svg {
  width: 34px;
  height: 34px;
}
.star-b {
  bottom: -38px;
  left: calc(50% + 174px);
  transform: rotate(-10deg);
  color: light-dark(#a87900, #ffe478);
}
.star-b svg {
  width: 26px;
  height: 26px;
}
.scribble {
  position: absolute;
  bottom: -46px;
  left: calc(50% - 205px);
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blue);
  transform: rotate(-13deg);
  white-space: nowrap;
}
.scribble::after {
  content: "";
  position: absolute;
  height: 5px;
  width: 70%;
  bottom: -7px;
  right: 0;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  transform: rotate(-5deg);
  opacity: 0.55;
}

footer {
  position: relative;
  padding: 19px max(20px, env(safe-area-inset-right))
    max(23px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  text-align: center;
  color: var(--muted);
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 180px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--orbit-line),
    transparent
  );
}
footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: inherit;
  font-size: 12px;
  line-height: 1.8;
  text-underline-offset: 4px;
}
footer a:hover {
  color: light-dark(#2b271c, #ece9e3);
  text-decoration: underline;
}
.footer-links,
.footer-source {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 8px;
}
.footer-links {
  flex-wrap: wrap;
}
.footer-source {
  white-space: nowrap;
}
.version {
  font-variant-numeric: tabular-nums;
}
.footer-divider {
  opacity: 0.4;
  font-size: 12px;
}
.traffic-stats,
.traffic-group,
.traffic-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.traffic-stats {
  display: flex;
  gap: 0 10px;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
}
.traffic-group {
  gap: 0 6px;
}
.traffic-group > span {
  white-space: nowrap;
}
.traffic-divider {
  opacity: 0.6;
}
.traffic-refresh {
  min-height: 44px;
  gap: 4px;
  padding: 0 4px;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-size: inherit;
}
.traffic-refresh:hover {
  color: var(--blue);
  text-decoration: underline;
}
.traffic-refresh:disabled {
  cursor: wait;
  opacity: 0.65;
}
.traffic-stats[aria-busy="true"] .traffic-refresh svg {
  animation: refresh-spin 1s linear infinite;
}
.traffic-status {
  font-size: 11px;
}
@keyframes refresh-spin {
  to {
    transform: rotate(360deg);
  }
}
.exit-wipe {
  position: absolute;
  z-index: 10;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
}

.is-entering .ambient {
  animation:
    glow-in 2200ms ease-out both,
    ambient-drift 22s ease-in-out infinite;
}
.is-entering .orbits {
  animation: orbit-in 2400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.is-entering .logo-wrap {
  animation: arrive 1600ms cubic-bezier(0.18, 0.85, 0.3, 1.12) 100ms both;
}
.is-entering h1 {
  animation: rise 1500ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}
.is-entering .go-wrap {
  animation: arrive 1700ms cubic-bezier(0.18, 0.85, 0.3, 1.12) 480ms both;
}
.is-entering .sticker-wrap {
  animation: sticker-in 1600ms cubic-bezier(0.18, 0.85, 0.3, 1.12) 700ms both;
}
.is-entering .star,
.is-entering .scribble {
  animation: rise 1300ms ease-out 800ms both;
}
.is-entering footer {
  animation: rise 1200ms ease-out 900ms both;
}
.is-leaving .go {
  animation: press 900ms ease both;
}
.is-leaving .go-arrow {
  animation: arrow-out 550ms ease-in both;
}
.is-leaving .exit-wipe {
  animation: wipe-out 1050ms cubic-bezier(0.65, 0, 0.25, 1) 200ms both;
}
.is-hidden .satellite,
.is-hidden .logo,
.is-hidden .ambient,
.is-hidden .sticker,
.is-hidden .star svg,
.is-hidden .go::after {
  animation-play-state: paused;
}
.scene:not(.is-entering) .satellite,
.scene:not(.is-entering) .logo,
.scene:not(.is-entering) .ambient,
.scene:not(.is-entering) .sticker,
.scene:not(.is-entering) .star svg,
.scene:not(.is-entering) .go::after {
  animation: none;
}

@keyframes orbit-travel {
  to {
    offset-distance: 100%;
  }
}
@keyframes seal-float {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -8px;
    rotate: 3deg;
  }
}
@keyframes sticker-float {
  0%,
  100% {
    transform: rotate(12deg) translateY(0);
  }
  50% {
    transform: rotate(9deg) translateY(-6px);
  }
}
@keyframes star-turn {
  0%,
  100% {
    rotate: 0deg;
    scale: 1;
  }
  50% {
    rotate: 28deg;
    scale: 1.12;
  }
}
@keyframes ambient-drift {
  0%,
  100% {
    translate: -12px 8px;
  }
  50% {
    translate: 24px -16px;
  }
}
@keyframes button-sheen {
  0%,
  75% {
    opacity: 0;
    background-position: var(--sheen-start, 120% 0);
  }
  80% {
    opacity: 0.65;
  }
  96%,
  100% {
    opacity: 0;
    background-position: var(--sheen-end, -20% 0);
  }
}
@keyframes hover-sheen {
  from {
    background-position: var(--sheen-start, 120% 0);
  }
  to {
    background-position: var(--sheen-end, -20% 0);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    translate: 0 15px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes arrive {
  from {
    opacity: 0;
    translate: 0 26px;
    scale: 0.87;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
  }
}
@keyframes sticker-in {
  from {
    opacity: 0;
    translate: 32px -18px;
    rotate: 12deg;
  }
  to {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
  }
}
@keyframes orbit-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-42deg) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-22deg) scale(1);
  }
}
@keyframes glow-in {
  from {
    opacity: 0;
    scale: 0.82;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes press {
  0% {
    transform: translate(var(--hover-x, 0px), var(--hover-y, -8px))
      rotate(var(--hover-rotation, 0deg)) scale(1);
  }
  25% {
    transform: translate(
        calc(var(--hover-x, 0px) * 0.25),
        calc(var(--hover-y, -8px) * 0.25)
      )
      rotate(var(--hover-rotation, 0deg)) scale(0.93);
  }
  100% {
    transform: translate(var(--hover-x, 0px), var(--hover-y, -8px))
      rotate(var(--hover-rotation, 0deg)) scale(1.04);
  }
}
@keyframes arrow-out {
  from {
    transform: translate(var(--arrow-x, 4px), var(--arrow-y, -4px))
      rotate(var(--arrow-rotation, 0deg));
    opacity: 1;
  }
  to {
    transform: translate(var(--arrow-exit-x, 40px), var(--arrow-exit-y, -40px))
      rotate(var(--arrow-rotation, 0deg));
    opacity: 0;
  }
}
@keyframes wipe-out {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--wipe-scale, 150));
  }
}

@media (hover: hover) and (pointer: fine) {
  .logo-wrap:hover .logo {
    transform: translate(var(--hover-x, 0px), var(--hover-y, -10px))
      rotate(var(--hover-rotation, 0deg));
  }
  .go:hover {
    transform: translate(var(--hover-x, 0px), var(--hover-y, -8px))
      rotate(var(--hover-rotation, 0deg));
    box-shadow:
      0 24px 56px light-dark(#c3982066, #ffd52655),
      0 0 64px light-dark(#ffd52626, #ffd52638),
      inset 0 2px 0 #ffffffbb;
  }
  .go:hover .go-arrow {
    transform: translate(var(--arrow-x, 4px), var(--arrow-y, -4px))
      rotate(var(--arrow-rotation, 0deg));
  }
  .go:hover::after {
    animation: hover-sheen 1000ms ease-out both;
    opacity: 1;
  }
}
.go:focus-visible::after {
  animation: hover-sheen 1000ms ease-out both;
  opacity: 1;
}
.go:focus-visible .go-arrow {
  transform: translate(var(--arrow-x, 4px), var(--arrow-y, -4px))
    rotate(var(--arrow-rotation, 0deg));
}
.go:active {
  transform: translate(
      calc(var(--hover-x, 0px) * 0.25),
      calc(var(--hover-y, -8px) * 0.25)
    )
    rotate(var(--hover-rotation, 0deg)) scale(0.96);
}
@media (max-width: 600px) {
  .traffic-stats {
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
  }
  .traffic-divider {
    display: none;
  }
  footer {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 480px) {
  main {
    min-height: 590px;
    padding-top: max(72px, env(safe-area-inset-top));
    padding-bottom: 88px;
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }
  h1 {
    font-size: 32px;
    margin-bottom: 36px;
  }
  .logo-wrap {
    width: 128px;
    height: 128px;
  }
  .go {
    width: 268px;
    min-height: 104px;
    font-size: 58px;
    gap: 20px;
  }
  .go-arrow {
    width: 56px;
    height: 56px;
  }
  .sticker-wrap {
    top: 108px;
    left: calc(50% + 48px);
  }
  .sticker {
    font-size: 12px;
    padding: 9px 10px;
  }
  .scribble {
    left: calc(50% - 134px);
    font-size: 13px;
    bottom: -48px;
  }
  .star-b {
    left: calc(50% + 130px);
  }
  .star-a {
    left: calc(50% - 140px);
  }
  .orbits {
    scale: 0.76;
  }
  .footer-links {
    max-width: 290px;
    margin-inline: auto;
    gap: 0 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}