1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Realm — cytrogen.icu</title>
<meta name="description" content="Realm — the visual exploration territory of cytrogen.icu">
<meta name="theme-color" content="#1a1a2e">
<link rel="stylesheet" href="/css/realm.css">
</head>
<body>
<!-- ============================================================
SVG Sprite Definitions (hidden from rendering and AT)
All reusable symbols defined here, referenced via <use href>
============================================================ -->
<svg aria-hidden="true" focusable="false" style="position:absolute;width:0;height:0;overflow:hidden">
<defs>
<!-- Realm Sigil: geometric castle tower silhouette -->
<symbol id="sigil-tower" viewBox="0 0 120 160">
<path class="svg-icon" d="
M60 0 L70 20 H80 V40 H90 V60 H100 V160 H20 V60 H30 V40 H40 V20 H50 Z
"/>
<rect class="svg-icon" x="50" y="100" width="20" height="60"/>
<rect class="svg-icon--accent" x="45" y="70" width="10" height="15"/>
<rect class="svg-icon--accent" x="65" y="70" width="10" height="15"/>
<rect class="svg-icon--accent" x="55" y="50" width="10" height="10"/>
</symbol>
<!-- Navigation arrow: right-pointing chevron -->
<symbol id="icon-arrow" viewBox="0 0 24 24">
<path class="svg-icon" d="M8 4 L18 12 L8 20 Z"/>
</symbol>
<!-- Decorative divider: geometric battlement pattern -->
<symbol id="divider-battlement" viewBox="0 0 200 12">
<path class="svg-icon" d="
M0 12 V6 H10 V0 H20 V6 H30 V0 H40 V6 H50 V0 H60 V6
H70 V0 H80 V6 H90 V0 H100 V6 H110 V0 H120 V6
H130 V0 H140 V6 H150 V0 H160 V6 H170 V0 H180 V6
H190 V0 H200 V6 V12 Z
"/>
</symbol>
<!-- Side door icon: arched doorway -->
<symbol id="icon-door" viewBox="0 0 40 60">
<path class="svg-icon" d="
M0 60 V15 Q0 0 20 0 Q40 0 40 15 V60 Z
"/>
<circle class="svg-icon--accent" cx="28" cy="35" r="2.5"/>
</symbol>
</defs>
</svg>
<main class="realm">
<!-- Sigil and title -->
<header class="realm-sigil">
<svg role="img" aria-labelledby="sigil-title" width="120" height="160">
<title id="sigil-title">Realm sigil — a castle tower</title>
<use href="#sigil-tower"/>
</svg>
<h1 class="realm-sigil__title">Realm</h1>
<p class="realm-sigil__subtitle">cytrogen.icu</p>
</header>
<!-- Divider -->
<svg class="realm-divider" aria-hidden="true" focusable="false">
<use href="#divider-battlement"/>
</svg>
<!-- Navigation: realm destinations -->
<nav class="realm-nav" aria-label="Realm navigation">
<a href="https://blog.cytrogen.icu">
<svg aria-hidden="true" focusable="false" width="20" height="20">
<use href="#icon-door"/>
</svg>
城堡入口 — Blog
</a>
<a href="/pages/contact.html">
<svg aria-hidden="true" focusable="false" width="16" height="16">
<use href="#icon-arrow"/>
</svg>
侧门 — Contact
</a>
</nav>
<!-- Divider -->
<svg class="realm-divider" aria-hidden="true" focusable="false" style="margin-top:var(--space-xl)">
<use href="#divider-battlement"/>
</svg>
</main>
</body>
</html>