<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>404 — 页面走丢了</title>

  <style>
    :root {
      --bg: #f5f3ee;
      --paper: #eeece6;
      --accent: #c0392b;
      --dim: #c8c4b8;
      --text: #1a1a1a;
      --muted: #8a8880;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Georgia', 'Songti SC', 'SimSun', serif;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }

    /* 背景噪点纹理 */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(192,57,43,0.04) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 0;
    }

    /* 扫描线 */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0,0,0,0.03) 3px,
        rgba(0,0,0,0.03) 4px
      );
      pointer-events: none;
      z-index: 0;
    }

    .scene {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 2rem;
      max-width: 680px;
    }

    /* 大号 404 */
    .four-oh-four {
      font-family: 'Impact', 'Arial Narrow', 'Haettenschweiler', sans-serif;
      font-size: clamp(9rem, 28vw, 18rem);
      line-height: 0.85;
      letter-spacing: -0.02em;
      color: transparent;
      -webkit-text-stroke: 2px var(--dim);
      position: relative;
      user-select: none;
      animation: glitch 6s infinite;
    }

    .four-oh-four::before,
    .four-oh-four::after {
      content: '404';
      position: absolute;
      inset: 0;
      font-family: 'Impact', 'Arial Narrow', 'Haettenschweiler', sans-serif;
      font-size: inherit;
      line-height: inherit;
      letter-spacing: inherit;
    }
    .four-oh-four::before {
      color: transparent;
      -webkit-text-stroke: 2px rgba(192,57,43,0.5);
      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
      animation: shift-up 6s infinite;
    }
    .four-oh-four::after {
      color: transparent;
      -webkit-text-stroke: 2px rgba(30,100,200,0.3);
      clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
      animation: shift-down 6s infinite;
    }

    @keyframes shift-up {
      0%, 90%, 100% { transform: translate(0); }
      92%           { transform: translate(-4px, -2px); }
      94%           { transform: translate(4px,  2px); }
      96%           { transform: translate(-3px, 0); }
    }
    @keyframes shift-down {
      0%, 90%, 100% { transform: translate(0); }
      92%           { transform: translate(4px,  2px); }
      94%           { transform: translate(-4px, -2px); }
      96%           { transform: translate(3px, 0); }
    }
    @keyframes glitch {
      0%, 89%, 100% { opacity: 1; }
      90%           { opacity: 0.85; }
    }

    /* 分隔线 */
    .rule {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 2rem 0 1.6rem;
    }
    .rule::before, .rule::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--dim));
    }
    .rule::after {
      background: linear-gradient(to left, transparent, var(--dim));
    }
    .rule-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 10px var(--accent);
      animation: pulse 2.4s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.5; transform: scale(0.7); }
    }

    /* 副标题 */
    .subtitle {
      font-size: 1rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 300;
      margin-bottom: 0.8rem;
      animation: fadeIn 1s ease 0.3s both;
    }

    .desc {
      font-size: 1rem;
      color: var(--muted);
      line-height: 1.8;
      max-width: 420px;
      margin: 0 auto 2.8rem;
      animation: fadeIn 1s ease 0.6s both;
    }

    /* 按钮 */
    .btn {
      display: inline-block;
      text-decoration: none;
      font-family: 'Impact', 'Arial Narrow', 'Haettenschweiler', sans-serif;
      font-size: 1.1rem;
      letter-spacing: 0.15em;
      color: #f5f3ee;
      background: var(--accent);
      padding: 0.8em 2.4em;
      position: relative;
      transition: transform 0.15s, box-shadow 0.15s;
      animation: fadeIn 1s ease 0.9s both;
      cursor: pointer;
    }
    .btn::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 2px solid var(--accent);
      transform: translate(5px, 5px);
      transition: transform 0.15s;
    }
    .btn:hover {
      transform: translate(-2px, -2px);
      box-shadow: 8px 8px 0 rgba(232,193,74,0.2);
    }
    .btn:hover::before {
      transform: translate(7px, 7px);
    }
    .btn:active {
      transform: translate(0);
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* 角落装饰 */
    .corner {
      position: fixed;
      width: 60px; height: 60px;
      opacity: 0.15;
    }
    .corner--tl { top: 1.5rem; left: 1.5rem;
      border-top: 1px solid var(--accent);
      border-left: 1px solid var(--accent); }
    .corner--br { bottom: 1.5rem; right: 1.5rem;
      border-bottom: 1px solid var(--accent);
      border-right: 1px solid var(--accent); }

    /* 底部坐标 */
    .coords {
      position: fixed;
      bottom: 1.4rem;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      color: var(--muted);
      font-family: 'Impact', 'Arial Narrow', 'Haettenschweiler', sans-serif;
    }
  </style>
</head>
<body>
  <div class="corner corner--tl"></div>
  <div class="corner corner--br"></div>

  <div class="scene">
    <p class="subtitle">错误代码</p>
    <div class="four-oh-four">404</div>

    <div class="rule"><span class="rule-dot"></span></div>

    <p class="desc">
      你要找的页面已经消失在虚空之中。<br/>
      也许它从未存在过，也许它已悄然离去。
    </p>

    <a class="btn" href="javascript:history.back()">← 返回上一页</a>
  </div>

  <div class="coords">ERR · 404 · PAGE NOT FOUND</div>
</body>
</html>
