Creation Details
Prompt: “<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>C.O.G: THE VEIL — Vael</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #000008;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
font-family: ‘Space Mono’, monospace;
padding: 32px 16px;
}
.page {
width: 100%;
max-width: 820px;
background: #f0ebe0;
position: relative;
overflow: hidden;
box-shadow: 0 0 80px rgba(0,0,0,0.98), 0 0 200px rgba(40,40,120,0.18);
animation: fadeIn 0.6s ease both;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.page::before {
content: ‘’;
position: absolute;
inset: 0;
background-image: radial-gradient(circle, #0a0a0a 0.8px, transparent 0.8px);
background-size: 7px 7px;
opacity: 0.03;
pointer-events: none;
z-index: 0;
}
.header {
background: #04040e;
padding: 14px 28px 12px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 3px solid #3a3a8a;
position: relative;
z-index: 2;
}
.series-tag {
font-size: 9px;
letter-spacing: 0.35em;
color: #2a2a5a;
margin-bottom: 3px;
}
.char-title {
font-family: ‘Bebas Neue’, sans-serif;
font-size: 52px;
color: #f0ebe0;
letter-spacing: 0.14em;
line-height: 1;
}
.char-title span { color: #6a6acc; }
.header-right {
text-align: right;
font-size: 8px;
color: #2a2a5a;
letter-spacing: 0.25em;
line-height: 2;
}
.main {
display: grid;
grid-template-columns: 1fr 300px;
position: relative;
z-index: 1;
}
.figure-col {
border-right: 2px solid #0a0a0a;
background: #e6e0d2;
overflow: hidden;
}
.figure-col svg {
display: block;
width: 100%;
animation: figIn 0.8s ease both 0.2s;
}
@keyframes figIn {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
.info-col { display: flex; flex-direction: column; background: #f0ebe0; }
.info-panel {
padding: 16px 18px;
border-bottom: 1.5px solid #d8d0c0;
animation: infoIn 0.5s ease both;
}
.info-panel:nth-child(1) { animation-delay: 0.3s; }
.info-panel:nth-child(2) { animation-delay: 0.4s; }
.info-panel:nth-child(3) { animation-delay: 0.5s; }
.info-panel:nth-child(4) { animation-delay: 0.6s; }
.info-panel:nth-child(5) { animation-delay: 0.7s; }
@keyframes infoIn {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); }
}
.panel-label {
font-size: 8px;
letter-spacing: 0.4em;
color: #999;
text-transform: uppercase;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.panel-label::after { content: ‘’; flex: 1; height: 1px; background: #d8d0c0; }
.panel-text {
font-family: ‘Cormorant Garamond’, serif;
font-size: 13.5px;
line-height: 1.7;
color: #1a1a1a;
}
.panel-text em { font-style: italic; color: #5a5aaa; }
.badge {
display: inline-block;
padding: 4px 12px;
border: 1.5px solid currentColor;
font-size: 8px;
letter-spacing: 0.3em;
text-transform: uppercase;
margin-top: 10px;
}
.stat-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 7px;
}
.stat-label { font-size: 8px; letter-spacing: 0.12em; width: 86px; flex-shrink: 0; color: #666; }
.stat-bar-bg { flex: 1; height: 4px; background: #d8d0be; position: relative; }
.stat-bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: #3a3a8a; }
.stat-val { font-size: 8px; color: #999; width: 18px; text-align: right; }
.schematic-box {
margin-top: 12px;
background: #04040e;
padding: 12px;
border-left: 3px solid #3a3a8a;
}
.schematic-box label {
font-size: 7px;
letter-spacing: 0.3em;
color: #3a3a8a;
display: block;
margin-bottom: 6px;
}
.schematic-box p {
font-family: ‘Cormorant Garamond’, serif;
font-size: 12px;
font-style: italic;
color: #8888cc;
line-height: 1.6;
}
.bottom-strip {
background: #04040e;
padding: 12px 24px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 3px solid #3a3a8a;
position: relative;
z-index: 2;
}
.bottom-strip .quote {
font-family: ‘Cormorant Garamond’, serif;
font-size: 12px;
font-style: italic;
color: #8888cc;
max-width: 480px;
}
.bottom-strip .index {
font-size: 8px;
color: #2a2a5a;
letter-spacing: 0.3em;
text-align: right;
}
.corner-mark {
position: absolute;
top: 0; right: 0;
width: 0; height: 0;
border-style: solid;
border-width: 0 48px 48px 0;
border-color: transparent #3a3a8a transparent transparent;
z-index: 5;
}
@media (max-width: 700px) {
.main { grid-template-columns: 1fr; }
.figure-col { border-right: none; border-bottom: 2px solid #0a0a0a; }
.char-title { font-size: 36px; }
}
</style>
</head>
<body>
<div class="page">
<div class="corner-mark"></div>
<div class="header">
<div>
<div class="series-tag">C.O.G: THE VEIL — Book One — Character Sheet 04/09</div>
<div class="char-title">VA<span>EL</span></div>
</div>
<div class="header-right">
CLASSIFICATION: BAD<br>
GODKILLER ARCHITECT<br>
————————<br>
SECTION 02
</div>
</div>
<div class="main">
```
<!-- FIGURE -->
<div class="figure-col">
<svg viewBox="0 0 480 720" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="dots" x="0" y="0" width="7" height="7" patternUnits="userSpaceOnUse">
<circle cx="3.5" cy="3.5" r="0.8" fill="#0a0a0a" opacity="0.16"/>
</pattern>
<pattern id="hatch" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse">
<line x1="0" y1="5" x2="5" y2="0" stroke="#0a0a0a" stroke-width="0.7" opacity="0.36"/>
</pattern>
<pattern id="xhatch" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse">
<line x1="0" y1="5" x2="5" y2="0" stroke="#0a0a0a" stroke-width="0.7" opacity="0.36"/>
<line x1="0" y1="0" x2="5" y2="5" stroke="#0a0a0a" stroke-width="0.7" opacity="0.2"/>
</pattern>
<!-- Godkiller fracture pattern — on coat lining -->
<pattern id="fracture" x="0" y="0" width="32" height="32" patternUnits="userSpaceOnUse">
<rect width="32" height="32" fill="none"/>
<path d="M0 16 L8 8 L16 16 L24 4 L32 16" stroke="#3a3a8a" stroke-width="0.9" fill="none" opacity="0.45"/>
<path d="M16 0 L16 32" stroke="#2a2a6a" stroke-width="0.5" fill="none" opacity="0.2"/>
<circle cx="16" cy="16" r="1.2" fill="#4a4aaa" opacity="0.3"/>
</pattern>
<!-- Coat fabric — deep indigo -->
<pattern id="coatFab" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
<rect width="8" height="8" fill="#0d0d2a"/>
<line x1="0" y1="4" x2="8" y2="4" stroke="#1a1a3a" stroke-width="0.6" opacity="0.4"/>
</pattern>
<!-- Void atmosphere — Chorus-backed -->
<radialGradient id="voidAtm" cx="50%" cy="30%" r="55%">
<stop offset="0%" stop-color="#3a3a8a" stop-opacity="0.1"/>
<stop offset="100%" stop-color="#3a3a8a" stop-opacity="0"/>
</radialGradient>
<!-- Space-tear effect behind him — Godkiller active -->
<radialGradient id="tearGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#6a6aff" stop-opacity="0.25"/>
<stop offset="60%" stop-color="#2a2a8a" stop-opacity="0.12"/>
<stop offset="100%" stop-color="#2a2a8a" stop-opacity="0"/>
</radialGradient>
<!-- Precision lines speed — vertical, downward. Cold. -->
<pattern id="speed" x="0" y="0" width="30" height="720" patternUnits="userSpaceOnUse">
<line x1="15" y1="0" x2="15" y2="720" stroke="#0a0a0a" stroke-width="0.3" opacity="0.04"/>
</pattern>
</defs>
<!-- BG -->
<rect width="480" height="720" fill="#e6e0d2"/>
<rect width="480" height="720" fill="url(#dots)"/>
<rect width="480" height="720" fill="url(#speed)"/>
<rect width="480" height="720" fill="url(#voidAtm)"/>
<!-- Space-tear behind figure — Godkiller aura -->
<ellipse cx="240" cy="340" rx="140" ry="280" fill="url(#tearGlow)"/>
<!-- Fracture crack lines radiating from chest -->
<path d="M240 300 L200 240 L180 200" stroke="#4a4aff" stroke-width="1" fill="none" opacity="0.18" stroke-dasharray="6 4"/>
<path d="M240 300 L260 230 L290 190" stroke="#4a4aff" stroke-width="0.8" fill="none" opacity="0.14" stroke-dasharray="5 5"/>
<path d="M240 300 L160 310 L120 320" stroke="#4a4aff" stroke-width="0.8" fill="none" opacity="0.12" stroke-dasharray="4 6"/>
<path d="M240 300 L320 315 L370 322" stroke="#4a4aff" stroke-width="0.8" fill="none" opacity="0.12" stroke-dasharray="4 6"/>
<!-- Ground shadow -->
<ellipse cx="240" cy="706" rx="72" ry="9" fill="#0a0a0a" opacity="0.14"/>
<!-- ═══════════════ FIGURE: VAEL ═══════════════ -->
<!-- Stance: precise. Feet together. Weight balanced. Arms at sides, one hand holding schematic roll. -->
<!-- He looks ordinary. That is the point. -->
<!-- ── SHOES — dark pointed leather, architect shoes ── -->
<!-- Left shoe -->
<path d="M196 684 L232 684 L236 698 L192 700 Z" fill="#1a1a2a" stroke="#0a0a0a" stroke-width="2"/>
<path d="M192 694 L236 694" stroke="#2a2a4a" stroke-width="1" opacity="0.5"/>
<!-- Toe point -->
<path d="M232 684 L240 690 L236 698" fill="#1a1a2a" stroke="#0a0a0a" stroke-width="1.5"/>
<!-- Right shoe -->
<path d="M248 684 L284 684 L288 700 L244 698 Z" fill="#1a1a2a" stroke="#0a0a0a" stroke-width="2"/>
<path d="M244 694 L288 694" stroke="#2a2a4a" stroke-width="1" opacity="0.5"/>
<path d="M284 684 L292 690 L288 698" fill="#1a1a2a" stroke="#0a0a0a" stroke-width="1.5"/>
<!-- ── LEGS — matching indigo trousers, clean press line ── -->
<!-- Left leg -->
<path d="M206 360 L196 684 L232 684 L236 430 Z" fill="#0d0d2a" stroke="#0a0a0a" stroke-width="2"/>
<!-- Press crease — single centre line, precise -->
<path d="M218 368 Q214 526 196 682" stroke="#1a1a4a" stroke-width="1.2" fill="none" opacity="0.6"/>
<!-- Right leg -->
<path d="M274 360 L244 684 L280 684 L284 430 Z" fill="#0d0d2a" stroke="#0a0a0a" stroke-width="2"/>
<path d="M262 368 Q266 526 284 682" stroke="#1a1a4a" stroke-width="1.2" fill="none" opacity="0.6"/>
<!-- ── COAT — long, floor-length, deep indigo ── -->
<!-- Coat back / body -->
<path d="M155 168 L325 168 L330 690 L150 690 Z" fill="url(#coatFab)" stroke="#0a0a0a" stroke-width="2.5"/>
<!-- Coat interior — fracture pattern visible at opening -->
<path d="M216 168 L272 168 L268 690 L220 690 Z" fill="#080818" stroke="#0a0a0a" stroke-width="1"/>
<rect x="216" y="168" width="56" height="522" fill="url(#fracture)" opacity="0.8"/>
<!-- Coat lapels — sharp, structured -->
<path d="M240 168 L216 210 L228 214 L240 186 L252 214 L264 210 Z"
fill="#181828" stroke="#0a0a0a" stroke-width="2"/>
<!-- Coat collar — high, structured band -->
<path d="M216 168 Q240 158 264 168" fill="none" stroke="#2a2a5a" stroke-width="3"/>
<!-- Coat button line — single row, minimal -->
<circle cx="240" cy="260" r="3.5" fill="none" stroke="#3a3a6a" stroke-width="1.5"/>
<circle cx="240" cy="310" r="3.5" fill="none" stroke="#3a3a6a" stroke-width="1.5"/>
<circle cx="240" cy="360" r="3.5" fill="none" stroke="#3a3a6a" stroke-width="1.5"/>
<!-- Button line — invisible thread -->
<line x1="240" y1="215" x2="240" y2="375" stroke="#2a2a4a" stroke-width="0.8" stroke-dasharray="4 8" opacity="0.4"/>
<!-- Coat fold lines — minimal, barely there. He irons this. -->
<path d="M162 178 Q158 420 152 688" stroke="#0a0a0a" stroke-width="0.7" fill="none" opacity="0.38"/>
<path d="M318 178 Q322 420 328 688" stroke="#0a0a0a" stroke-width="0.7" fill="none" opacity="0.38"/>
<!-- Shadow hatch coat sides — deep -->
<path d="M155 172 L178 690 L155 690 Z" fill="url(#xhatch)"/>
<path d="M325 172 L302 690 L325 690 Z" fill="url(#xhatch)"/>
<!-- Coat hem — precise, no fraying -->
<path d="M150 688 L330 688" stroke="#0a0a0a" stroke-width="1.5" fill="none"/>
<!-- ── LEFT ARM — at side, relaxed but precise ── -->
<path d="M155 172 L118 270 L130 278 L162 188" fill="url(#coatFab)" stroke="#0a0a0a" stroke-width="2"/>
<!-- Sleeve crease — single -->
<path d="M148 180 Q134 224 122 272" stroke="#0a0a0a" stroke-width="0.7" fill="none" opacity="0.4"/>
<!-- Cuff — clean white shirt visible -->
<rect x="114" y="270" width="22" height="10" rx="1" fill="#f0ebe0" stroke="#0a0a0a" stroke-width="1.5"/>
<!-- Watch — precision mechanical, left wrist -->
<rect x="110" y="280" width="28" height="14" rx="2" fill="#1a1a2a" stroke="#0a0a0a" stroke-width="1.5"/>
<circle cx="124" cy="287" r="5" fill="none" stroke="#6a6acc" stroke-width="1"/>
<line x1="124" y1="283" x2="124" y2="287" stroke="#6a6acc" stroke-width="1.2"/>
<line x1="124" y1="287" x2="127" y2="287" stroke="#6a6acc" stroke-width="1"/>
<!-- Hand left — fingers relaxed, precisely -->
<ellipse cx="122" cy="302" rx="11" ry="14" fill="#c8a890" stroke="#0a0a0a" stroke-width="1.8"/>
<path d="M112 296 L110 316" stroke="#c8a890" stroke-width="5.5" stroke-linecap="round"/>
<path d="M118 293 L116 315" stroke="#c8a890" stroke-width="5.5" stroke-linecap="round"/>
<path d="M124 292 L122 314" stroke="#c8a890" stroke-width="5.5" stroke-linecap="round"/>
<path d="M130 294 L129 313" stroke="#c8a890" stroke-width="5.5" stroke-linecap="round"/>
<path d="M112 296 L110 316" stroke="#0a0a0a" stroke-width="1.4" stroke-linecap="round" fill="none"/>
<path d="M118 293 L116 315" stroke="#0a0a0a" stroke-width="1.4" stroke-linecap="round" fill="none"/>
<path d="M124 292 L122 314" stroke="#0a0a0a" stroke-width="1.4" stroke-linecap="round" fill="none"/>
<path d="M130 294 L129 313" stroke="#0a0a0a" stroke-width="1.4" stroke-linecap="round" fill="none"/>
<!-- ── RIGHT ARM — holding schematic roll ── -->
<path d="M325 172 L362 270 L350 278 L318 188" fill="url(#coatFab)" stroke="#0a0a0a" stroke-width="2"/>
<path d="M332 180 Q346 224 358 272" stroke="#0a0a0a" stroke-width="0.7" fill="none" opacity="0.4"/>
<!-- Cuff right -->
<rect x="344" y="270" width="22" height="10" rx="1" fill="#f0ebe0" stroke="#0a0a0a" stroke-width="1.5"/>
<!-- Hand right — holding rolled schematic -->
<ellipse cx="358" cy="300" rx="11" ry="14" fill="#c8a890" stroke="#0a0a0a" stroke-width="1.8"/>
<!-- Schematic roll — cylindrical -->
<rect x="350" y="308" width="16" height="60" rx="4" fill="#e8dcc8" stroke="#0a0a0a" stroke-width="1.8"/>
<!-- Roll ends -->
<ellipse cx="358" cy="308" rx="8" ry="3" fill="#d8c8b0" stroke="#0a0a0a" stroke-width="1.5"/>
<ellipse cx="358" cy="368" rx="8" ry="3" fill="#d8c8b0" stroke="#0a0a0a" stroke-width="1.5"/>
<!-- Schematic lines visible on roll -->
<line x1="352" y1="320" x2="366" y2="320" stroke="#3a3a8a" stroke-width="0.8" opacity="0.7"/>
<line x1="352" y1="328" x2="366" y2="328" stroke="#3a3a8a" stroke-width="0.8" opacity="0.7"/>
<path d="M354 338 L362 344 L354 344 Z" stroke="#3a3a8a" stroke-width="0.8" fill="none" opacity="0.7"/>
<circle cx="360" cy="356" r="4" fill="none" stroke="#3a3a8a" stroke-width="0.8" opacity="0.7"/>
<!-- Schematic annotation -->
<line x1="370" y1="338" x2="410" y2="330" stroke="#3a3a8a" stroke-width="1" stroke-dasharray="3 3" opacity="0.7"/>
<text x="414" y="324" font-family="'Space Mono'" font-size="7.5" fill="#5a5aaa" opacity="0.85">GODKILLER</text>
<text x="414" y="335" font-family="'Space Mono'" font-size="7.5" fill="#5a5aaa" opacity="0.85">SCHEMATIC.</text>
<text x="414" y="346" font-family="'Space Mono'" font-size="7.5" fill="#5a5aaa" opacity="0.85">ALWAYS ON</text>
<text x="414" y="357" font-family="'Space Mono'" font-size="7.5" fill="#5a5aaa" opacity="0.85">HIS PERSON.</text>
<!-- ── NECK ── -->
<rect x="226" y="148" width="28" height="24" rx="3" fill="#c8a890" stroke="#0a0a0a" stroke-width="2"/>
<!-- Shirt collar — white, precise, visible above coat -->
<path d="M222 168 L240 180 L258 168" fill="#f0ebe0" stroke="#0a0a0a" stroke-width="1.5"/>
<path d="M222 168 L218 160 L240 155 L262 160 L258 168" fill="#f0ebe0" stroke="#0a0a0a" stroke-width="1.5"/>
<!-- ── HEAD ── -->
<!-- Head shape — lean, angular, precise bone structure -->
<path d="M202 108 Q202 64 240 58 Q278 64 278 108
Q278 148 261 158 L240 163 L219 158 Q202 148 202 108 Z"
fill="#c8a890" stroke="#0a0a0a" stroke-width="2.5"/>
<!-- Angular jaw — sharp, defined -->
<path d="M204 120 Q202 140 208 158" stroke="#0a0a0a" stroke-width="0.8" fill="none" opacity="0.3"/>
<path d="M276 120 Q278 140 272 158" stroke="#0a0a0a" stroke-width="0.8" fill="none" opacity="0.3"/>
<!-- Jaw shadow — geometric, not rounded -->
<path d="M202 128 L222 163 L208 163 Z" fill="url(#hatch)" opacity="0.5"/>
<path d="M278 128 L258 163 L272 163 Z" fill="url(#hatch)" opacity="0.5"/>
<!-- Hair — sharp parted, structured, not a strand out of place -->
<path d="M202 108 Q202 72 240 64 Q278 72 278 108
Q272 78 240 70 Q208 78 202 108 Z"
fill="#1a1a2e" stroke="#0a0a0a" stroke-width="2"/>
<!-- Hard side part — left -->
<path d="M218 68 L214 108" stroke="#e6e0d2" stroke-width="1.5" opacity="0.4"/>
<!-- Hair texture — precise lines -->
<path d="M220 72 Q234 68 250 70" stroke="#0a0a0a" stroke-width="0.7" fill="none" opacity="0.45"/>
<path d="M218 80 Q234 76 254 78" stroke="#0a0a0a" stroke-width="0.7" fill="none" opacity="0.4"/>
<path d="M216 90 Q234 86 258 88" stroke="#0a0a0a" stroke-width="0.6" fill="none" opacity="0.35"/>
<!-- Taper at sides — clean -->
<path d="M204 104 Q206 88 212 78" stroke="#0a0a0a" stroke-width="0.7" fill="none" opacity="0.45"/>
<path d="M276 104 Q274 88 268 78" stroke="#0a0a0a" stroke-width="0.7" fill="none" opacity="0.45"/>
<!-- GLASSES — thin geometric frame, the one tell -->
<!-- Left lens -->
<rect x="208" y="102" width="22" height="14" rx="2" fill="none" stroke="#3a3a8a" stroke-width="1.8"/>
<!-- Right lens -->
<rect x="250" y="102" width="22" height="14" rx="2" fill="none" stroke="#3a3a8a" stroke-width="1.8"/>
<!-- Bridge -->
<line x1="230" y1="109" x2="250" y2="109" stroke="#3a3a8a" stroke-width="1.5"/>
<!-- Arms -->
<line x1="208" y1="109" x2="200" y2="107" stroke="#3a3a8a" stroke-width="1.5"/>
<line x1="272" y1="109" x2="280" y2="107" stroke="#3a3a8a" stroke-width="1.5"/>
<!-- Lens subtle tint — void blue -->
<rect x="208" y="102" width="22" height="14" rx="2" fill="#3a3a8a" opacity="0.08"/>
<rect x="250" y="102" width="22" height="14" rx="2" fill="#3a3a8a" opacity="0.08"/>
<!-- Glasses annotation -->
<line x1="200" y1="107" x2="165" y2="98" stroke="#3a3a8a" stroke-width="1" stroke-dasharray="3 3" opacity="0.65"/>
<text x="80" y="90" font-family="'Space Mono'" font-size="7.5" fill="#5a5aaa" opacity="0.8" text-anchor="middle">THIN FRAME.</text>
<text x="80" y="101" font-family="'Space Mono'" font-size="7.5" fill="#5a5aaa" opacity="0.8" text-anchor="middle">GEOMETRIC.</text>
<text x="80" y="112" font-family="'Space Mono'" font-size="7.5" fill="#5a5aaa" opacity="0.8" text-anchor="middle">THE ONLY</text>
<text x="80" y="123" font-family="'Space Mono'" font-size="7.5" fill="#5a5aaa" opacity="0.8" text-anchor="middle">DECORATION</text>
<text x="80" y="134" font-family="'Space Mono'" font-size="7.5" fill="#5a5aaa" opacity="0.8" text-anchor="middle">HE ALLOWS.</text>
<!-- EYEBROWS — precise, thin, controlled. No expression escapes him. -->
<path d="M210 100 Q219 96 229 98" stroke="#0a0a0a" stroke-width="2" fill="none" stroke-linecap="round"/>
<path d="M251 98 Q261 96 270 100" stroke="#0a0a0a" stroke-width="2" fill="none" stroke-linecap="round"/>
<!-- EYES — through the glasses. Calm. Calculating. Completely certain he is right. -->
<!-- Left eye — narrow, analytical -->
<path d="M210 110 Q219 104 229 110 Q219 117 210 110 Z" fill="#0a0a0a"/>
<circle cx="216" cy="108" r="2.2" fill="white"/>
<circle cx="215" cy="110" r="1.4" fill="#3a3a8a" opacity="0.7"/>
<!-- Right eye -->
<path d="M251 110 Q260 104 270 110 Q260 117 251 110 Z" fill="#0a0a0a"/>
<circle cx="257" cy="108" r="2.2" fill="white"/>
<circle cx="256" cy="110" r="1.4" fill="#3a3a8a" opacity="0.7"/>
<!-- Lower lid — barely there, controlled -->
<path d="M211 113 Q219 118 228 113" stroke="#8a6a50" stroke-width="0.7" fill="none"/>
<path d="M252 113 Q260 118 269 113" stroke="#8a6a50" stroke-width="0.7" fill="none"/>
<!-- Nose — straight, sharp bridge -->
<path d="M238 124 Q240 132 242 124" stroke="#8a6850" stroke-width="1.2" fill="none"/>
<path d="M235 132 L238 135 L242 135 L245 132" stroke="#0a0a0a" stroke-width="1.1" fill="none"/>
<!-- Mouth — thin line. Not smiling. Not frowning. Neutral to a degree that unsettles. -->
<path d="M228 150 L252 150" stroke="#0a0a0a" stroke-width="2" fill="none" stroke-linecap="round"/>
<!-- Perfect horizontal. No give. -->
<!-- GODKILLER FRACTURE — subtle crack in the air beside him -->
<!-- Space-time tear — left side, small, controlled -->
<path d="M96 280 L104 268 L108 280 L102 288 L96 280 Z"
fill="#4a4aff" opacity="0.15" stroke="#6a6aff" stroke-width="0.8"/>
<path d="M96 280 L82 274" stroke="#4a4aff" stroke-width="1" fill="none" opacity="0.3" stroke-dasharray="3 3"/>
<path d="M104 268 L112 256" stroke="#4a4aff" stroke-width="0.8" fill="none" opacity="0.25" stroke-dasharray="2 4"/>
<path d="M108 280 L118 284" stroke="#4a4aff" stroke-width="0.8" fill="none" opacity="0.25" stroke-dasharray="2 4"/>
<!-- Tear glow -->
<ellipse cx="102" cy="278" rx="12" ry="16" fill="#4a4aff" opacity="0.06"/>
<!-- Tear annotation -->
<line x1="84" y1="274" x2="56" y2="264" stroke="#4a4aff" stroke-width="1" stroke-dasharray="2 3" opacity="0.6"/>
<text x="8" y="258" font-family="'Space Mono'" font-size="7.5" fill="#5a5aaa" opacity="0.8">RELAY PULSE.</text>
<text x="8" y="269" font-family="'Space Mono'" font-size="7.5" fill="#5a5aaa" opacity="0.8">GODKILLER</text>
<text x="8" y="280" font-family="'Space Mono'" font-size="7.5" fill="#5a5aaa" opacity="0.8">ALREADY</text>
<text x="8" y="291" font-family="'Space Mono'" font-size="7.5" fill="#5a5aaa" opacity="0.8">OPERATIONAL.</text>
<!-- Name plate -->
<rect x="0" y="0" width="115" height="24" fill="#04040e"/>
<text x="10" y="17" font-family="'Bebas Neue'" font-size="16" fill="#6a6acc" letter-spacing="3">THE ARCHITECT</text>
<!-- Bottom watermark -->
<text x="240" y="714" font-family="'Space Mono'" font-size="7" fill="#2a2a5a" opacity="0.4"
text-anchor="middle" letter-spacing="3">NO CULTURAL ANCHOR · BEYOND REGION · CHORUS-BACKED</text>
</svg>
</div>
<!-- INFO COLUMN -->
<div class="info-col">
<div class="info-panel">
<div class="panel-label">Classification</div>
<div class="panel-text">
<em>The Architect. Bad alignment.</em><br><br>
He believed he was building a Veil restructuring instrument. The fallen Chorus funded it specifically for cross-realm access. He still believes he is correcting something broken.
</div>
<div class="badge" style="color:#3a3a8a; border-color:#3a3a8a;">BAD · SELF-DECEIVED</div>
</div>
<div class="info-panel">
<div class="panel-label">Outfit</div>
<div class="panel-text">
Long deep indigo overcoat, floor-length, sharp lapels. White shirt collar visible above. Matching indigo trousers — same cut, same press. Dark pointed leather shoes. Polished.<br><br>
Godkiller schematic roll in his right hand. <em>Always.</em> Precision mechanical watch on the left wrist.<br><br>
Thin-frame geometric glasses — the only decoration he allows himself.
</div>
</div>
<div class="info-panel">
<div class="panel-label">The Godkiller</div>
<div class="panel-text">
Space-time fabric tearing. Portal function. Cross-realm access.<br><br>
<em>In Chapter 23, the pain Kairo experiences during the bonding is Vael's relay pulse — not the bond itself.</em><br><br>
The weapon is already operational enough to interfere with primordial-level events. Vael considers this a calibration success.
</div>
<div class="schematic-box">
<label>INTERNAL NOTE — VAEL'S PERSPECTIVE</label>
<p>"The Veil is broken. I am the only one with the precision to fix it."</p>
</div>
</div>
<div class="info-panel">
<div class="panel-label">Power Profile</div>
<div style="margin-top:4px;">
<div class="stat-row">
<div class="stat-label">VEIL ARCHITECTURE</div>
<div class="stat-bar-bg"><div class="stat-bar-fill" style="width:100%;"></div></div>
<div class="stat-val">—</div>
</div>
<div class="stat-row">
<div class="stat-label">WEAPON DESIGN</div>
<div class="stat-bar-bg"><div class="stat-bar-fill" style="width:100%;"></div></div>
<div class="stat-val">—</div>
</div>
<div class="stat-row">
<div class="stat-label">SELF-AWARENESS</div>
<div class="stat-bar-bg"><div class="stat-bar-fill" style="width:12%; background:#c8001a;"></div></div>
<div class="stat-val">1</div>
</div>
<div class="stat-row">
<div class="stat-label">CHORUS BACKING</div>
<div class="stat-bar-bg"><div class="stat-bar-fill" style="width:92%;"></div></div>
<div class="stat-val">9</div>
</div>
<div class="stat-row">
<div class="stat-label">DIRECT COMBAT</div>
<div class="stat-bar-bg"><div class="stat-bar-fill" style="width:50%;"></div></div>
<div class="stat-val">?</div>
</div>
</div>
</div>
<div class="info-panel" style="flex:1; border-bottom:none;">
<div class="panel-label">Aura</div>
<div class="panel-text">
He looks harmless. That is not an accident.<br><br>
The coat is not armour — it is precision. Everything about him says <em>scholar, not threat.</em> Until you understand what is drawn on the roll in his hand.<br><br>
He is the most dangerous kind of antagonist: one who has never doubted himself for a single day.
</div>
</div>
</div>
```
</div>
<div class="bottom-strip">
<div class="quote">"He didn't build a weapon. He built a correction. The Chorus simply funded it."</div>
<div class="index">04 / 09<br>NEXT: HAWA</div>
</div>
</div>
</body>
</html>”
Art Style: Noir Comics
Color Mode: Full Color
Panels: 2
Created: