<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="referrer" content="no-referrer">
  <title>Loading</title>
  <style>
    :root {
      --bg: #070a10;
      --cyan: #39e7ff;
      --green: #52ffb8;
      --amber: #ffd166;
      --text: #dff8ff;
      --muted: #7e9ab1;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--bg);
      color: var(--text);
      font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
    }

    body::before {
      content: "";
      position: fixed;
      inset: -40px;
      background:
        linear-gradient(rgba(57, 231, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 231, 255, .08) 1px, transparent 1px),
        radial-gradient(circle at 50% 42%, rgba(82, 255, 184, .12), transparent 34%);
      background-size: 42px 42px, 42px 42px, 100% 100%;
      transform: perspective(520px) rotateX(58deg) translateY(80px);
      transform-origin: 50% 60%;
      animation: gridMove 4.8s linear infinite;
      opacity: .72;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px);
      mix-blend-mode: screen;
      opacity: .22;
      pointer-events: none;
    }

    .loading {
      position: fixed;
      inset: 0;
      z-index: 2;
      display: grid;
      place-items: center;
      padding: 24px;
      text-align: center;
    }

    .shell {
      width: min(88vw, 460px);
      display: grid;
      justify-items: center;
      gap: 22px;
    }

    .scanner {
      position: relative;
      width: 196px;
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      filter: drop-shadow(0 0 22px rgba(57, 231, 255, .28));
    }

    .scanner::before,
    .scanner::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
    }

    .scanner::before {
      background: conic-gradient(from 0deg, transparent 0 12%, var(--cyan) 16%, transparent 24%, transparent 46%, var(--green) 52%, transparent 60%, transparent 78%, var(--amber) 84%, transparent 92%);
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
      mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
      animation: spin 1.9s linear infinite;
    }

    .scanner::after {
      inset: 24px;
      border: 1px solid rgba(57, 231, 255, .28);
      box-shadow: inset 0 0 24px rgba(57, 231, 255, .13), 0 0 0 1px rgba(82, 255, 184, .12);
      animation: pulse 1.5s ease-in-out infinite;
    }

    .sweep {
      position: absolute;
      width: 50%;
      height: 2px;
      left: 50%;
      top: 50%;
      transform-origin: left center;
      background: linear-gradient(90deg, var(--green), rgba(82, 255, 184, 0));
      animation: sweep 1.3s linear infinite;
    }

    .core {
      position: relative;
      width: 74px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, var(--cyan) 0 7%, rgba(57, 231, 255, .16) 8% 42%, rgba(14, 23, 38, .86) 43% 100%);
      border: 1px solid rgba(223, 248, 255, .22);
      box-shadow: 0 0 28px rgba(57, 231, 255, .32), inset 0 0 18px rgba(82, 255, 184, .18);
    }

    .core::before,
    .core::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(57, 231, 255, .22);
    }

    .core::before {
      inset: -18px;
      animation: pulse 1.4s ease-in-out infinite;
    }

    .core::after {
      inset: -34px;
      border-color: rgba(255, 209, 102, .18);
      animation: pulse 1.4s ease-in-out infinite .28s;
    }

    .kicker {
      color: var(--green);
      font: 600 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    }

    .title {
      margin: 7px 0 0;
      color: var(--text);
      font-size: 22px;
      line-height: 1.25;
      font-weight: 700;
      letter-spacing: 0;
      text-shadow: 0 0 18px rgba(57, 231, 255, .34);
    }

    .meter {
      width: min(320px, 78vw);
      display: grid;
      grid-template-columns: repeat(18, 1fr);
      gap: 4px;
      padding: 4px;
      border: 1px solid rgba(57, 231, 255, .18);
      background: rgba(9, 16, 28, .62);
    }

    .meter span {
      height: 18px;
      background: rgba(126, 154, 177, .18);
      animation: bar 1.3s ease-in-out infinite;
    }

    .meter span:nth-child(3n) {
      animation-delay: .12s;
    }

    .meter span:nth-child(3n+1) {
      animation-delay: .24s;
    }

    .meter span:nth-child(5n) {
      animation-delay: .36s;
    }

    .status {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
      min-height: 20px;
    }

    .dots {
      display: inline-flex;
      gap: 4px;
    }

    .dots i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 12px rgba(57, 231, 255, .7);
      animation: dot 1s ease-in-out infinite;
    }

    .dots i:nth-child(2) {
      animation-delay: .18s;
      background: var(--green);
    }

    .dots i:nth-child(3) {
      animation-delay: .36s;
      background: var(--amber);
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @keyframes sweep {
      to { transform: rotate(360deg); }
    }

    @keyframes pulse {
      50% { opacity: .46; transform: scale(.96); }
    }

    @keyframes bar {
      0%, 100% { background: rgba(126, 154, 177, .16); }
      45% { background: var(--cyan); box-shadow: 0 0 14px rgba(57, 231, 255, .55); }
      70% { background: var(--green); box-shadow: 0 0 14px rgba(82, 255, 184, .46); }
    }

    @keyframes dot {
      50% { transform: translateY(-5px); opacity: .55; }
    }

    @keyframes gridMove {
      to { background-position: 0 42px, 42px 0, 0 0; }
    }

    @media (max-width: 430px) {
      .scanner { width: 172px; }
      .title { font-size: 20px; }
      .shell { gap: 18px; }
      .meter span { height: 16px; }
    }
  </style>
</head>
<body>
  <main class="loading" aria-live="polite">
    <section class="shell">
      <div class="scanner" aria-hidden="true">
        <span class="sweep"></span>
        <span class="core"></span>
      </div>
      <section>
        <div class="kicker">ROUTE CHECK</div>
        <h1 class="title">&#27491;&#22312;&#36827;&#20837;</h1>
      </section>
      <div class="meter" aria-hidden="true">
        <span></span><span></span><span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span><span></span><span></span>
      </div>
      <div class="status">
        <span>&#27491;&#22312;&#35782;&#21035;&#35774;&#22791;&#24182;&#36873;&#25321;&#20837;&#21475;</span>
        <span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>
      </div>
    </section>
  </main>

  <script>
    (function () {
      var query = new URLSearchParams(window.location.search);
      var channel = query.get("channel");
      var referer = query.get("referer");

      try {
        if (channel) localStorage.setItem("channel", channel);
        if (referer) localStorage.setItem("referer", referer);
      } catch (e) {}

      var isMobile = /Android|iPhone|iPad|iPod|iOS|Mobile|MicroMessenger/i.test(navigator.userAgent);
      var target = new URL(isMobile ? "/m/" : "/pc/", window.location.href);

      query.forEach(function (value, key) {
        if (value && value !== "null" && key !== "ticket") {
          target.searchParams.set(key, value);
        }
      });
      target.searchParams.set("_cv", Date.now().toString(36) + Math.random().toString(36).slice(2, 8));

      window.location.replace(target.pathname + target.search);
    })();
  </script>
</body>
</html>
