{
  "id": "cyberpunk",
  "type": "styles",
  "status": "published",
  "name": {
    "zh": "赛博朋克",
    "en": "Cyberpunk"
  },
  "aliases": [
    "赛博朋克",
    "赛博风格",
    "霓虹故障风",
    "黑底荧光紫青",
    "数字废土风",
    "黑客终端风",
    "Cyberpunk UI",
    "Neon Glitch"
  ],
  "category": [
    "Style",
    "Visual Language"
  ],
  "description": {
    "zh": "\"High tech, low life\" 的视觉语言：近黑的深底上，霓虹青与品红发光描边切割 界面，等宽字体与终端符号贯穿，扫描线 故障位移 毛刺纹理营造信息系统过载 的压抑未来感。光是从黑暗里切出来的，界面像一台被劫持的显示器。",
    "en": "\"High tech, low life\" as a visual language: neon cyan and magenta edges cut through a near-black ground, monospace type and terminal glyphs run throughout, and scanlines plus glitch offsets suggest overloaded systems. Light is sliced out of darkness — the screen feels hijacked."
  },
  "use_when": [
    {
      "zh": "游戏 科幻项目 黑客主题社区，风格即世界观",
      "en": "Games, sci-fi projects and hacker communities where style is worldbuilding"
    },
    {
      "zh": "音乐 夜店 电竞品牌，需要强烈的亚文化信号",
      "en": "Music, club and esports brands signaling subculture"
    },
    {
      "zh": "深色为主的产品，可低成本叠加霓虹点缀",
      "en": "Already-dark products that can layer neon accents cheaply"
    }
  ],
  "avoid_when": [
    {
      "zh": "无障碍要求高的正文阅读，荧光色对比闪烁伤眼",
      "en": "Accessibility-critical reading — neon flicker and contrast hurt"
    },
    {
      "zh": "企业级正式场景，亚文化气质会削弱信任",
      "en": "Enterprise contexts where subculture erodes trust"
    },
    {
      "zh": "浅色底为主的现有体系，硬切赛博朋克成本高",
      "en": "Existing light-theme systems — a hard pivot is costly"
    }
  ],
  "tags": [
    "cyberpunk",
    "neon",
    "glitch",
    "terminal",
    "dystopia"
  ],
  "variants": [
    {
      "id": "neon-city",
      "name": {
        "zh": "霓虹都市",
        "en": "Neon City"
      },
      "note": {
        "zh": "青品红双色霓虹，攻壳机动队式夜景",
        "en": "Cyan-magenta duo like a Ghost in the Shell nightscape"
      }
    },
    {
      "id": "terminal",
      "name": {
        "zh": "终端黑客",
        "en": "Terminal Hacker"
      },
      "note": {
        "zh": "单色荧光绿或琥珀，CRT 磷光屏",
        "en": "Monochrome phosphor green or amber on CRT"
      }
    },
    {
      "id": "glitch",
      "name": {
        "zh": "故障艺术",
        "en": "Glitch Art"
      },
      "note": {
        "zh": "RGB 错位位移与撕裂条纹为主角",
        "en": "RGB channel offsets and datamosh strips take over"
      }
    }
  ],
  "applicable_components": [
    "input",
    "button",
    "card",
    "command-palette"
  ],
  "related": [
    {
      "id": "y2k",
      "relation": "similar_to"
    },
    {
      "id": "retro-futurism",
      "relation": "similar_to"
    },
    {
      "id": "neobrutalism",
      "relation": "similar_to"
    },
    {
      "id": "input",
      "relation": "affects"
    },
    {
      "id": "card",
      "relation": "affects"
    }
  ],
  "demo": {
    "component": "cyberpunk",
    "modes": [
      "default",
      "dark",
      "variants"
    ]
  },
  "sources": [
    {
      "name": "Wikipedia — Cyberpunk derivatives",
      "url": "https://en.wikipedia.org/wiki/Cyberpunk_derivatives"
    },
    {
      "name": "MDN — CSS animations",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations"
    }
  ],
  "implementation": {
    "css": [
      "box-shadow: 0 0 8px #0ff",
      "text-shadow",
      "clip-path",
      "@keyframes glitch",
      "repeating-linear-gradient"
    ],
    "notes": {
      "zh": "深底用 #0a0a12～#12101f；霓虹色必须同时给发光（box-shadow/text-shadow 0 0 8px 同色）与实体描边，只有光晕会糊。面板用 clip-path 切角（单角或 对角切 8～12px）代替圆角。扫描线用 repeating-linear-gradient 叠加层， opacity 控制在 0.06 以下。故障动画是文本双层 RGB 错位，播放频率低、 时长短，并尊重 prefers-reduced-motion。",
      "en": "Ground runs #0a0a12–#12101f. Neon needs both glow (box-shadow/text-shadow 0 0 8px in the same hue) and a solid border — glow alone smears. Replace radii with clip-path corner cuts (8–12px, one or opposite corners). Scanlines are a repeating-linear-gradient overlay kept under 0.06 opacity. Glitch is two-layer RGB offset text — short bursts, rare, respecting prefers-reduced-motion."
    }
  },
  "prompts": {
    "basic": {
      "zh": "用赛博朋克风格（Cyberpunk）设计界面：近黑深底、霓虹青与品红发光描边、 切角面板、等宽终端字体，辅以扫描线与故障效果。",
      "en": "\"Design an interface in Cyberpunk style: near-black ground, glowing neon cyan and magenta edges, corner-cut panels, monospace terminal type, scanlines and glitch accents.\""
    },
    "design": {
      "zh": "赛博朋克设计规范：底色 #0d0b14；主霓虹青 #00E5FF、辅品红 #FF2E88，发光 半径 8px 内；面板用 clip-path 切角代替圆角，1px 霓虹描边 + 同色微光； 文字用等宽字体（JetBrains Mono/系统 mono），标题可双层 RGB 错位；扫描线 叠层 opacity 0.05；交互元素 hover 时描边加亮；深浅模式仅做深色（浅色 底违背风格本体）。",
      "en": "\"Cyberpunk spec: ground #0d0b14; neon cyan #00E5FF primary, magenta #FF2E88 secondary, glow radius under 8px; corner-cut panels via clip-path with 1px neon borders and faint glow; monospace type (JetBrains Mono/system mono); headings with two-layer RGB offset; scanline overlay at 0.05 opacity; hover brightens borders. Dark only — a light ground contradicts the style.\""
    },
    "implementation": {
      "zh": "用 CSS 实现赛博朋克面板：.cyber-panel { background: #12101f; color: #d8f6ff; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); border: 1px solid rgba(0,229,255, 0.7); box-shadow: 0 0 10px rgba(0,229,255,0.25); } 扫描线伪元素 repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px)。故障动画时长乘 var(--demo-speed, 1)。",
      "en": "\"Implement a Cyberpunk panel in CSS: .cyber-panel { background: #12101f; color: #d8f6ff; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); border: 1px solid rgba(0,229,255,0.7); box-shadow: 0 0 10px rgba(0,229,255,0.25); } Scanline pseudo-element: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px). Multiply glitch animation duration by var(--demo-speed, 1).\""
    },
    "agent": {
      "zh": "在当前项目中用赛博朋克风格（Cyberpunk）实现一个终端式输入与面板区块。\n\n先检查现有主题体系，深色霓虹主题以独立 class 作用域隔离，不污染默认主题。\n要求：\n- 近黑深底 + 霓虹青/品红描边与发光，切角面板用 clip-path\n- 等宽字体与终端符号（> _）贯穿\n- 扫描线叠层 opacity ≤ 0.06，故障动画低频短促且尊重 prefers-reduced-motion\n- 关键正文对比度达标，霓虹只做点缀不做正文色\n- 不新增任何依赖\n完成后运行项目现有检查，并列出修改的文件。",
      "en": "Implement a terminal-style Cyberpunk input and panel section in the current project.\n\nInspect the existing theme system first; scope the neon-dark theme behind an isolated class so the default theme stays untouched.\nRequirements:\n- Near-black ground with neon cyan/magenta borders and glow; corner-cut panels via clip-path\n- Monospace type and terminal glyphs (\"> _\") throughout\n- Scanline overlay at opacity ≤ 0.06; glitch animations rare, brief, respecting prefers-reduced-motion\n- Body text keeps compliant contrast; neon is accent-only, never body color\n- No new dependencies\nRun existing project checks when done and list the modified files."
    }
  },
  "style_spec": {
    "typography": {
      "zh": "等宽字体 + 霓虹发光标题",
      "en": "Monospace type with neon glow titles"
    },
    "color": {
      "zh": "深夜蓝黑 #0B0F1A × 青色 #00E5FF",
      "en": "Night navy #0B0F1A with cyan #00E5FF"
    },
    "border": {
      "zh": "1px 霓虹青色边框，小圆角",
      "en": "1px neon cyan borders, tiny radius"
    },
    "shadow": {
      "zh": "青色霓虹光晕 box-shadow",
      "en": "Cyan neon glow shadows"
    },
    "spacing": {
      "zh": "终端式紧凑排布",
      "en": "Terminal-dense layout"
    },
    "motion": {
      "zh": "120ms 的霓虹瞬时点亮过渡，尊重 prefers-reduced-motion",
      "en": "120ms neon ignition transitions; honour prefers-reduced-motion"
    },
    "states": {
      "zh": "hover 增亮青色霓虹；focus 用 2px 青色可见描边；active 反向闪烁一次；disabled 降为暗灰去光；error 用洋红霓虹",
      "en": "Hover brightens the cyan neon; focus shows a visible 2px cyan outline; active flickers inverted once; disabled fades to dim grey without glow; error uses magenta neon"
    }
  },
  "preview": {
    "order": 14,
    "keywords": {
      "en": "NEON NIGHTS",
      "zh": "霓虹 · 夜色 · 终端"
    },
    "url": "https://neon.city:2077",
    "scene": "generic",
    "brand": "NEON://CITY",
    "nav": [
      {
        "zh": "街区",
        "en": "Districts"
      },
      {
        "zh": "装备",
        "en": "Gear"
      },
      {
        "zh": "黑市",
        "en": "Black market"
      }
    ],
    "navExt": [
      {
        "zh": "[SYS:OK]",
        "en": "[SYS:OK]"
      }
    ],
    "heroTitle": {
      "zh": "WAKE UP,",
      "en": "WAKE UP,"
    },
    "heroTitle2": {
      "zh": "SAMURAI",
      "en": "SAMURAI"
    },
    "heroSub": {
      "zh": "霓虹永不熄灭。",
      "en": "The neon never sleeps."
    },
    "cta": {
      "zh": "接入网络",
      "en": "Connect to the network"
    },
    "heroCaption": {
      "zh": "高对比 · 霓虹边框 · 全息投影",
      "en": "High contrast · Neon borders · Holograms"
    },
    "features": [
      {
        "t": {
          "zh": "义体改造",
          "en": "Cybernetic upgrades"
        },
        "s": {
          "zh": "+15% 神经速率",
          "en": "+15% neural speed"
        }
      },
      {
        "t": {
          "zh": "黑客接口",
          "en": "Hacking interface"
        },
        "s": {
          "zh": "破防只要 3 秒",
          "en": "A breach in just 3 seconds"
        }
      },
      {
        "t": {
          "zh": "黑市信用",
          "en": "Black-market credits"
        },
        "s": {
          "zh": "匿名交易",
          "en": "Anonymous trading"
        }
      }
    ],
    "panel": "chart",
    "tokens": {
      "bg": "#0B0F1A",
      "fg": "#EAF6FF",
      "sub": "#5B7A94",
      "accent": "#00E5FF",
      "accentFg": "#050810",
      "card": "rgba(0,229,255,.06)",
      "cardBorder": "rgba(0,229,255,.35)",
      "radius": "4px",
      "shadow": "0 0 14px rgba(0,229,255,.25)",
      "font": "'SF Mono', Menlo, monospace",
      "upper": true,
      "heroSize": "22px"
    }
  }
}