Neon Accent Colors
Neon Blue
--color-neon-blue
#00d4ff
Neon Purple
--color-neon-purple
#b500ff
Neon Green
--color-neon-green
#00ff88
Neon Red
--color-neon-red
#ff003c
Neon Orange
--color-neon-orange
#ff6b35 → #ffb347
Background Colors
BG Base
--color-bg-base
#020408
BG Card
--color-bg-card
rgba(0,212,255,0.03)
BG Glass
--color-bg-glass
rgba(255,255,255,0.04)
BG Warning
--color-bg-warning
rgba(255,0,60,0.04)
Gradient Presets
Hero Gradient
White → Blue → Purple
Timeline Line
Vertical Blue→Purple
Glow & Shadow Tokens
--glow-blue
--glow-card
--glow-red-strong
/* CSS Custom Properties — Mythos Design Tokens */
:root {
--color-neon-blue: #00d4ff;
--color-neon-purple: #b500ff;
--color-neon-green: #00ff88;
--color-neon-red: #ff003c;
--color-bg-base: #020408;
--glow-blue: 0 0 20px #00d4ff;
--glow-card: 0 0 40px rgba(0,212,255,.15), inset 0 0 40px rgba(0,212,255,.03);
}
HERO DISPLAY
Orbitron 900 · clamp(3rem, 10vw, 9rem) · tracking-tight(−2px) · --font-display
Section Title
Orbitron 700 · clamp(1.6rem, 4vw, 2.8rem) · --text-2xl
SECTION LABEL — EYEBROW
Orbitron 400 · 0.65rem · tracking-ultra(6px) · uppercase
93.9
Orbitron 900 · 3rem · Stat Value · neon-blue + glow
역대 최강의 AI 모델. 제로데이 취약점을 자동 발견하는 능력으로 인해 일반 공개가 보류된 전례 없는 프론티어 시스템입니다.
Noto Sans KR 400 · 1.05rem · line-height 1.8 · color-text-secondary
보조 설명 텍스트 · Secondary Label
Noto Sans KR 400 · 0.85rem · tracking-normal · color-text-muted
FOOTER / CAPTION TEXT
Noto Sans KR 400 · 0.78rem · tracking-wide · color dim
/* Font Families */
--font-display: 'Orbitron', monospace; /* Headings, UI Labels, Numbers */
--font-body: 'Noto Sans KR', 'Rajdhani', sans-serif; /* Body Text */
/* Letter Spacing Scale */
--tracking-tight: -2px; /* Hero title */
--tracking-ultra: 6px; /* Section labels */
--tracking-widest: 4px; /* Badges, Logo */
--tracking-hero: 12px; /* Sub-heading above hero */
Badge / Alert Tag
⚠ CLASSIFIED — LIMITED ACCESS
◆ ACTIVE RESEARCH
✓ VERIFIED
/* Badge — border + color + letter-spacing + pulsing glow */
.badge {
border: 1px solid var(--color-neon-red);
color: var(--color-neon-red);
font-size: var(--text-xs);
letter-spacing: var(--tracking-widest);
padding: 6px 20px;
border-radius: var(--radius-sm); /* 2px — sharp edge */
animation: pulse-red 2s ease-in-out infinite;
}
Section Label + Title
Section 01 — Overview
핵심 성능 지표
.section-label { font-family:var(--font-display); font-size:var(--text-xs); letter-spacing:var(--tracking-ultra); color:var(--color-neon-blue); }
.section-title { font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.8rem); font-weight:var(--weight-bold); color:#fff; }
Navigation Bar — Glassmorphism
nav {
backdrop-filter: var(--blur-glass); /* blur(20px) */
background: var(--color-bg-nav); /* rgba(2,4,8,0.7) */
border-bottom: 1px solid var(--color-border-subtle);
}
Stat Card — Hover Shimmer Effect
🔬
93.9%
SWE-BENCH
업계 최고 벤치마크
📐
97.6%
USAMO 수학
+31%p 향상
🧠
1M
Context Window
최대 출력 128K
.stat-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
}
.stat-card::before { /* shimmer line on hover */
content: '';
position: absolute; top:0; left:-100%;
width:100%; height:1px;
background: linear-gradient(90deg, transparent, var(--color-neon-blue), transparent);
transition: left 0.6s ease;
}
.stat-card:hover { border-color:var(--color-neon-blue); box-shadow:var(--glow-card); }
.stat-card:hover::before { left:100%; }
Benchmark Progress Bar
.bench-fill { height:6px; border-radius:3px; transition: width var(--transition-spring); }
.bench-fill::after { /* glowing endpoint dot */
width:10px; height:10px; border-radius:50%;
box-shadow: 0 0 12px currentColor;
}
.fill-blue { background: linear-gradient(90deg, var(--color-neon-purple), var(--color-neon-blue)); }
.fill-green { background: linear-gradient(90deg, var(--color-neon-blue), var(--color-neon-green)); }
.fill-orange { background: linear-gradient(90deg, #ff6b35, #ffb347); }
Warning / Alert Box
중요 경고 메시지. 강조 텍스트는 Neon Red로 표시됩니다.
.warning-box {
border: 1px solid var(--color-neon-red);
background: var(--color-bg-warning);
}
.warning-dot { animation: blink 1s ease-in-out infinite; } /* live status indicator */
Timeline
2026.04.08
Claude Mythos Preview 공식 출시
일반 공개 없이 선별된 기관에만 제한 배포.
2026.05
Google Vertex AI 파트너 접근 허용
Google Cloud Vertex AI를 통해 일부 승인된 파트너에게 제공.
.timeline::before { /* vertical gradient line */
background: linear-gradient(to bottom, transparent, var(--color-neon-blue), var(--color-neon-purple), transparent);
}
.timeline-dot {
border: 2px solid var(--color-neon-blue);
box-shadow: 0 0 12px var(--color-neon-blue);
}
.timeline-item:hover .timeline-dot { background: var(--color-neon-blue); box-shadow: 0 0 25px var(--color-neon-blue); }
Specs Table
| 컨텍스트 | 1,000,000 TOKENS |
| 최대 출력 | 128,000 TOKENS |
| 학습 기준 | DECEMBER 2025 |
Glitch Text
glitch1 + glitch2 · 4s infinite
clip-path polygon 분할 후 translate
Neon Pulse
neonPulse · 2s ease-in-out infinite
text-shadow 강약 반복
Float + Rotate
floatBox · 3s ease-in-out infinite
translateY + rotate 병합
Scan Line
scanAcross · 2s linear infinite
horizontal gradient sweep
Gradient Shift
gradientShift · 4s ease infinite
background-position 300% → 0%
Blink Dot
blink · 1s ease-in-out infinite
opacity 1 → 0 → 1
/* Keyframe 참조 목록 */
@keyframes gradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes glitch1 { 92%{transform:translate(-4px,2px);opacity:.7} 94%{transform:translate(4px,-2px)} }
@keyframes glitch2 { 93%{transform:translate(5px,3px);opacity:.6} 95%{transform:translate(-5px,-3px)} }
@keyframes pulse-red { 50%{box-shadow:0 0 30px rgba(255,0,60,.8)} }
@keyframes blink { 50%{opacity:0} }
@keyframes scanMove { from{background-position:0 0} to{background-position:0 100px} }
@keyframes float { 50%{transform:translateY(8px)} }
@keyframes scanDown { 0%{height:0;opacity:1} 100%{height:50px;opacity:0} }
@keyframes loaderPulse { 0%,100%{opacity:0.3} 50%{opacity:1} }
@keyframes warningShimmer { 0%{background-position:0% 0%} 100%{background-position:400% 400%} }
/* Scroll-triggered reveal pattern */
.element { opacity:0; transform:translateY(40px); transition: opacity 0.6s ease, transform 0.6s ease; }
.element.visible { opacity:1; transform:translateY(0); } /* added via IntersectionObserver */
03 — NEURAL NETWORK PARTICLES
04 — DATA STREAMS (Matrix)
/* Canvas 렌더링 순서 (매 프레임) */
1. ctx.clearRect() // 초기화
2. drawHexGrid() // 육각형 그리드 — rgba(0,212,255,0.04)
3. drawGradientOrbs() // 3개 반투명 구체 (sin/cos로 이동)
4. drawNeuralConnections() // 파티클 간 130px 이내 연결선
5. streams.forEach(s=>s.draw) // 카타카나+숫자 데이터 스트림
6. pts.forEach(p=>p.draw) // 파티클 (blue/purple/green)
7. mouseProximityGlow() // 마우스 100px 이내 파티클 발광
/* 전체 레이어 구조 */
z-index 0: canvas (배경 애니메이션)
z-index 1: ::before noise overlay + ::after scanlines
z-index 2: content-wrap (실제 콘텐츠)
z-index 100: nav
z-index 9000: loader
z-index 9998–9999: cursor ring + dot