/* BLANK AREA 404 —— 故障效果动画 */
    .blank-404 {
      display: flex; align-items: center; justify-content: center;
      min-height: 200px; margin: var(--space-xl) 0;
      font-family: var(--font-display); font-size: var(--text-5xl);
      font-weight: 700; letter-spacing: 0.2em;
      color: var(--cyber-void-200);
      text-shadow: 0 0 30px var(--cyber-void-100);
      user-select: none;
      border: 1px dashed var(--cyber-void-200);
      position: relative;
      animation: blank-404-jitter 0.5s steps(2) infinite;
    }
    .blank-404::before,
    .blank-404::after {
      content: "404";
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit;
      pointer-events: none;
    }
    .blank-404::before {
      color: var(--cyber-magenta-500);
      text-shadow: 0 0 12px var(--cyber-magenta-500);
      animation: blank-404-glitch-a 3.8s infinite linear alternate-reverse;
    }
    .blank-404::after {
      color: var(--cyber-cyan-300);
      text-shadow: 0 0 12px var(--cyber-cyan-300);
      animation: blank-404-glitch-b 3.1s infinite linear alternate;
    }
    @keyframes blank-404-jitter {
      0%, 100% { transform: translate(0, 0); }
      25% { transform: translate(-1px, 1px); }
      50% { transform: translate(1px, -1px); }
      75% { transform: translate(-1px, -1px); }
    }
    @keyframes blank-404-glitch-a {
      0%,100%{transform:translate(-4px,0);clip-path:inset(0 0 95% 0)}
      10%{transform:translate(4px,0);clip-path:inset(30% 0 40% 0)}
      20%{transform:translate(-3px,0);clip-path:inset(70% 0 10% 0)}
      30%{transform:translate(3px,0);clip-path:inset(10% 0 60% 0)}
      40%{transform:translate(-4px,0);clip-path:inset(80% 0 5% 0)}
      50%{transform:translate(4px,0);clip-path:inset(20% 0 55% 0)}
      60%{transform:translate(-3px,0);clip-path:inset(50% 0 30% 0)}
      70%{transform:translate(3px,0);clip-path:inset(5% 0 85% 0)}
      80%{transform:translate(-4px,0);clip-path:inset(45% 0 35% 0)}
      90%{transform:translate(4px,0);clip-path:inset(85% 0 5% 0)}
    }
    @keyframes blank-404-glitch-b {
      0%,100%{transform:translate(4px,0);clip-path:inset(95% 0 0 0)}
      10%{transform:translate(-4px,0);clip-path:inset(40% 0 30% 0)}
      20%{transform:translate(3px,0);clip-path:inset(10% 0 70% 0)}
      30%{transform:translate(-3px,0);clip-path:inset(60% 0 10% 0)}
      40%{transform:translate(4px,0);clip-path:inset(5% 0 80% 0)}
      50%{transform:translate(-4px,0);clip-path:inset(55% 0 20% 0)}
      60%{transform:translate(3px,0);clip-path:inset(30% 0 50% 0)}
      70%{transform:translate(-3px,0);clip-path:inset(85% 0 5% 0)}
      80%{transform:translate(4px,0);clip-path:inset(35% 0 45% 0)}
      90%{transform:translate(-3px,0);clip-path:inset(5% 0 85% 0)}
    }

    /* ==================== 移动端适配（手机浏览器不得出现横向溢出 / 内容被裁到屏幕外） ==================== */
    @media (max-width: 768px) {
      /* 容器：收窄左右留白，把宽度还给内容 */
      .cyber-container { padding: var(--space-md) var(--space-sm); }

      /* Hero：字号与字距同步收敛，标题允许换行，不再被挤出屏幕 */
      .hero { padding: var(--space-xl) var(--space-sm); min-height: 70vh; min-height: 70svh; }
      .hero__name { font-size: clamp(1.6rem, 8vw, 3rem); letter-spacing: 0.06em; }
      .hero__tagline { letter-spacing: 0.02em; }
      .hero__nav { gap: var(--space-2xs); }
      .cyber-btn { padding: var(--space-2xs) var(--space-sm); letter-spacing: 0.06em; }

      .section-title { font-size: var(--text-xl); }
      .cyber-grid { gap: var(--space-sm); }
      .cyber-grid--2 { grid-template-columns: minmax(0, 1fr); }

      /* 区块内滚动：手机端同样保留滚动条，一屏最多约 5 个内容 */
      .audio-track-list { max-height: 410px; }
      .gallery-grid {
        max-height: 400px;
        grid-template-columns: repeat(auto-fill, minmax(min(45%, 180px), 1fr));
        gap: var(--space-sm);
      }

      .blank-404 { font-size: var(--text-4xl); min-height: 140px; margin: var(--space-lg) 0; }
      .cyber-separator { margin: var(--space-lg) 0; }
      .md-content ul, .md-content ol { padding-left: var(--space-md); }

      .cyber-player__play { width: 34px; height: 34px; }
      .cyber-player__info { width: 28px; height: 28px; }
      .cyber-modal { padding: var(--space-2xs); }
      .cyber-modal__panel { max-height: 92vh; max-height: 92svh; }
      .cyber-modal__body { padding: var(--space-sm); }

      /* 底部安全区：iPhone 小黑条不遮住页脚 */
      .footer {
        padding: var(--space-lg) var(--space-sm) calc(var(--space-lg) + env(safe-area-inset-bottom));
        margin-top: var(--space-xl);
      }
    }

    @media (max-width: 400px) {
      .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .cyber-card__icon { width: 32px; height: 32px; font-size: var(--text-base); }
      .hero__nav { width: 100%; }
      .hero__nav .cyber-btn { flex: 1 1 auto; }
    }

    /* REDUCED MOTION */
    @media (prefers-reduced-motion: reduce) {
      .cyber-heading::before, .cyber-heading::after, .cyber-neon-border::before {
        animation: none; opacity: 0;
      }
      .blank-404, .blank-404::before, .blank-404::after { animation: none; }
      .cursor-glitch, .cursor-glitch::before, .cursor-glitch::after { animation: none; }
      .cursor-glitch { display: none; }
      .cyber-card--interactive:hover { transform: none; }
      .track-name.is-scrolling .track-name__inner { animation: none; }
      .cyber-modal, .cyber-modal__panel { transition: none; }
      .page-wipe { display: none !important; }
    }

    /* CUSTOM SCROLLBAR */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--cyber-void-500); }
    ::-webkit-scrollbar-thumb { background: var(--cyber-red-700); border-radius: 0; }
    ::-webkit-scrollbar-thumb:hover { background: var(--cyber-red-500); }

    /* BLINK CURSOR */
    @keyframes blink { 0%,100%{opacity:1}50%{opacity:0} }

    /* ==================== MATRIX DIGITAL RAIN (CANVAS) ==================== */
    .matrix-rain {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }
    .matrix-rain canvas {
      display: block;
      width: 100%;
      height: 100%;
    }