The clean IDE layout — file tree, line numbers, syntax highlighting, status bar — represents Console Launch's structured developer environment. Everything has its place.
Corrupted hex dumps, glitched tabs, RGB-split text, infected files, and breach warnings shatter the order. Half the system is compromised — and it shows.
깔끔한 IDE 레이아웃 — 파일 트리, 줄 번호, 구문 강조, 상태 표시줄 — 은 Console Launch의 구조화된 개발자 환경을 표현합니다. 모든 것이 제자리에.
손상된 헥스 덤프, 글리치된 탭, RGB 분리 텍스트, 감염된 파일, 침입 경고가 질서를 파괴합니다. 시스템의 절반이 침해당했고 — 그것이 보입니다.
整然としたIDEレイアウト — ファイルツリー、行番号、シンタックスハイライト、ステータスバー — はConsole Launchの構造化された開発者環境を表現します。すべてが定位置に。
破損したヘックスダンプ、グリッチしたタブ、RGBスプリットテキスト、感染ファイル、侵入警告が秩序を破壊します。システムの半分が侵害され — それが見えます。
Design a landing page in Cyber Console fusion style — combining Cyberpunk Glitch neon energy with Console Launch terminal interaction.
COLOR TOKENS:
--bg: #030508
--terminal-bg: #090e17
--neon-green: #00ff41
--neon-magenta: #ff00ff
--neon-blue: #00f0ff
--line: rgba(0,255,65,0.2)
--text: #fff
--panel-bg: rgba(0,240,255,0.05)
No other colors.
TYPOGRAPHY:
Headings: 'Syncopate', sans-serif, weights 400/700, font-size: clamp(2rem, 5vw, 4rem), color: #fff, text-shadow: 2px 2px 0 #ff00ff, -2px -2px 0 #00f0ff (anaglyph 3D effect).
Body/terminal: 'Share Tech Mono', monospace, font-size: 1.1rem, color: #00ff41.
Buttons: 'Share Tech Mono', monospace, font-size: 1.2rem, text-transform: uppercase.
UI:
System log: background #090e17, border: 1px solid rgba(0,255,65,0.2), border-left: 4px solid #ff00ff, padding: 20px, box-shadow: 0 0 20px rgba(255,0,255,0.1).
Panels: border: 1px solid #00f0ff, background: rgba(0,240,255,0.05), padding: 30px.
Panel corner brackets: 10x10px pseudo-elements with 2px solid #00f0ff borders at top-left and bottom-right corners.
Buttons: background: transparent, border: 1px solid #ff00ff, color: #ff00ff, padding: 15px 30px. Hover: background #ff00ff, color #000, box-shadow: 0 0 15px #ff00ff.
Blinking cursor: 10px wide, background #00ff41, animation: blink 1s step-end infinite.
LAYOUT:
Page container: max-width: 900px, margin: 0 auto, padding: 50px 20px.
Header: display: flex, justify-content: space-between, border-bottom: 1px solid #00ff41, padding-bottom: 10px, margin-bottom: 50px.
Matrix grid: display: grid, grid-template-columns: repeat(2, 1fr), gap: 20px.
CRT SCANLINE OVERLAY (critical — defines the retro-digital atmosphere):
body::after fixed overlay covering entire viewport, z-index: 2, pointer-events: none.
Horizontal scanlines: background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%), background-size: 100% 2px.
RGB sub-pixels: linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06)), background-size: 3px 100%.
MOTION:
Cursor blink: @keyframes blink { 0%,100% { opacity:1 } 50% { opacity:0 } }, animation: blink 1s step-end infinite.
Button hover: transition: 0.2s, background fill + neon glow box-shadow.
No smooth scroll or page transitions.
RESPONSIVE:
≤768px: matrix grid collapses to 1 column, anaglyph text-shadow reduced to 1px offsets, scanline overlay simplified.
≥900px: page max-width 900px, 2-column matrix grid, full scanline + anaglyph effects.
FORBIDDEN:
- Light or white backgrounds (maintain #030508 dark base)
- border-radius exceeding 0px (all corners must be sharp, industrial edges)
- Serif, handwritten, or rounded fonts (geometric and monospace only)
- Pastel or muted colors (neon-only palette)
- Soft box-shadows or blur-based depth (hard neon glows only)
OUTPUT:
1) CSS custom properties for all neon colors + CRT scanline overlay implementation
2) System log component + crosshair bracket panel grid + anaglyph heading
3) Single-file HTML/CSS with responsive support
Cyber Console 퓨전 스타일의 랜딩 페이지를 디자인해줘 — Cyberpunk Glitch의 네온 에너지와 Console Launch의 터미널 인터랙션을 결합.
색상 토큰:
--bg: #030508
--terminal-bg: #090e17
--neon-green: #00ff41
--neon-magenta: #ff00ff
--neon-blue: #00f0ff
--line: rgba(0,255,65,0.2)
--text: #fff
--panel-bg: rgba(0,240,255,0.05)
다른 색상 사용 금지.
타이포그래피:
제목: 'Syncopate', sans-serif, 웨이트 400/700, font-size: clamp(2rem, 5vw, 4rem), color: #fff, text-shadow: 2px 2px 0 #ff00ff, -2px -2px 0 #00f0ff (아나글리프 3D 효과).
본문/터미널: 'Share Tech Mono', monospace, font-size: 1.1rem, color: #00ff41.
버튼: 'Share Tech Mono', monospace, font-size: 1.2rem, text-transform: uppercase.
UI:
시스템 로그: background #090e17, border: 1px solid rgba(0,255,65,0.2), border-left: 4px solid #ff00ff, padding: 20px, box-shadow: 0 0 20px rgba(255,0,255,0.1).
패널: border: 1px solid #00f0ff, background: rgba(0,240,255,0.05), padding: 30px.
패널 코너 브래킷: 10x10px 의사 요소에 2px solid #00f0ff 보더를 좌상단과 우하단에 배치.
버튼: background: transparent, border: 1px solid #ff00ff, color: #ff00ff, padding: 15px 30px. Hover: background #ff00ff, color #000, box-shadow: 0 0 15px #ff00ff.
깜빡이는 커서: 너비 10px, background #00ff41, animation: blink 1s step-end infinite.
레이아웃:
페이지 컨테이너: max-width: 900px, margin: 0 auto, padding: 50px 20px.
헤더: display: flex, justify-content: space-between, border-bottom: 1px solid #00ff41, padding-bottom: 10px, margin-bottom: 50px.
매트릭스 그리드: display: grid, grid-template-columns: repeat(2, 1fr), gap: 20px.
CRT 스캔라인 오버레이 (핵심 — 레트로 디지털 분위기를 정의):
body::after 고정 오버레이로 전체 뷰포트를 덮음, z-index: 2, pointer-events: none.
수평 스캔라인: background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%), background-size: 100% 2px.
RGB 서브픽셀: linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06)), background-size: 3px 100%.
모션:
커서 깜빡임: @keyframes blink { 0%,100% { opacity:1 } 50% { opacity:0 } }, animation: blink 1s step-end infinite.
버튼 hover: transition: 0.2s, 배경 채움 + 네온 글로우 box-shadow.
부드러운 스크롤이나 페이지 전환 없음.
반응형:
≤768px: 매트릭스 그리드 1열로 전환, 아나글리프 text-shadow 1px 오프셋으로 축소, 스캔라인 오버레이 단순화.
≥900px: 페이지 max-width 900px, 2열 매트릭스 그리드, 스캔라인 + 아나글리프 효과 완전 적용.
금지사항:
- 밝거나 흰 배경 (#030508 다크 베이스 유지)
- 0px 초과 border-radius (모든 코너는 날카로운 산업적 엣지)
- 세리프, 손글씨, 둥근 폰트 (기하학적 폰트와 모노스페이스만)
- 파스텔이나 뮤트 컬러 (네온 전용 팔레트)
- 소프트 box-shadow나 블러 기반 깊이감 (하드 네온 글로우만)
출력:
1) 모든 네온 색상 + CRT 스캔라인 오버레이 구현을 위한 CSS 커스텀 속성
2) 시스템 로그 컴포넌트 + 크로스헤어 브래킷 패널 그리드 + 아나글리프 제목
3) 반응형 대응이 포함된 단일 HTML/CSS 파일
Cyber Consoleフュージョンスタイルのランディングページをデザインしてください — Cyberpunk GlitchのネオンエネルギーとConsole Launchのターミナルインタラクションを融合。
カラートークン:
--bg: #030508
--terminal-bg: #090e17
--neon-green: #00ff41
--neon-magenta: #ff00ff
--neon-blue: #00f0ff
--line: rgba(0,255,65,0.2)
--text: #fff
--panel-bg: rgba(0,240,255,0.05)
他の色は使用禁止。
タイポグラフィ:
見出し: 'Syncopate', sans-serif, ウェイト400/700, font-size: clamp(2rem, 5vw, 4rem), color: #fff, text-shadow: 2px 2px 0 #ff00ff, -2px -2px 0 #00f0ff(アナグリフ3D効果)。
本文/ターミナル: 'Share Tech Mono', monospace, font-size: 1.1rem, color: #00ff41。
ボタン: 'Share Tech Mono', monospace, font-size: 1.2rem, text-transform: uppercase。
UI:
システムログ: background #090e17, border: 1px solid rgba(0,255,65,0.2), border-left: 4px solid #ff00ff, padding: 20px, box-shadow: 0 0 20px rgba(255,0,255,0.1)。
パネル: border: 1px solid #00f0ff, background: rgba(0,240,255,0.05), padding: 30px。
パネルコーナーブラケット: 10x10px疑似要素に2px solid #00f0ffボーダーを左上と右下に配置。
ボタン: background: transparent, border: 1px solid #ff00ff, color: #ff00ff, padding: 15px 30px。Hover: background #ff00ff, color #000, box-shadow: 0 0 15px #ff00ff。
点滅カーソル: 幅10px, background #00ff41, animation: blink 1s step-end infinite。
レイアウト:
ページコンテナ: max-width: 900px, margin: 0 auto, padding: 50px 20px。
ヘッダー: display: flex, justify-content: space-between, border-bottom: 1px solid #00ff41, padding-bottom: 10px, margin-bottom: 50px。
マトリクスグリッド: display: grid, grid-template-columns: repeat(2, 1fr), gap: 20px。
CRTスキャンラインオーバーレイ(重要 — レトロデジタルの雰囲気を定義):
body::after固定オーバーレイでビューポート全体をカバー、z-index: 2, pointer-events: none。
水平スキャンライン: background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%), background-size: 100% 2px。
RGBサブピクセル: linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06)), background-size: 3px 100%。
モーション:
カーソル点滅: @keyframes blink { 0%,100% { opacity:1 } 50% { opacity:0 } }, animation: blink 1s step-end infinite。
ボタンhover: transition: 0.2s, 背景塗りつぶし + ネオングロウbox-shadow。
スムーズスクロールやページトランジションなし。
レスポンシブ:
≤768px: マトリクスグリッド1列に変更、アナグリフtext-shadow 1pxオフセットに縮小、スキャンラインオーバーレイ簡略化。
≥900px: ページmax-width 900px、2列マトリクスグリッド、スキャンライン+アナグリフ効果完全適用。
禁止事項:
- 明るい・白い背景(#030508ダークベース維持)
- 0px超のborder-radius(すべてのコーナーはシャープで工業的なエッジ)
- セリフ、手書き、丸みのあるフォント(幾何学的フォントとモノスペースのみ)
- パステルやミュートカラー(ネオン専用パレット)
- ソフトなbox-shadowやブラーベースの深度(ハードネオングロウのみ)
出力:
1) すべてのネオンカラー+CRTスキャンラインオーバーレイ実装のCSSカスタムプロパティ
2) システムログコンポーネント+クロスヘアブラケットパネルグリッド+アナグリフ見出し
3) レスポンシブ対応を含む単一HTML/CSSファイル