-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwolf.html
More file actions
241 lines (232 loc) · 12.9 KB
/
wolf.html
File metadata and controls
241 lines (232 loc) · 12.9 KB
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CORD · SENTINEL</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--black: #0a0a0a;
--white: #f0f0f0;
--grey: #888;
--accent: #ff3333;
--wolf: #ff6600;
--dim: #333;
--dark: #111;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--black); color: var(--white); font-family: 'Space Mono', monospace; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.nav { position: fixed; top: 0; left: 0; right: 0; background: rgba(10,10,10,0.9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--dim); z-index: 1000; }
.nav .inner { max-width: 1100px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-family: 'Syne', sans-serif; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; }
.nav-links { display: flex; gap: 14px; align-items: center; }
.nav-links a { padding: 8px 10px; border-radius: 8px; transition: background 0.2s ease, color 0.2s ease; color: var(--grey); }
.nav-links a:hover, .nav-links a:focus { background: var(--dark); color: var(--white); }
.menu-toggle { display: none; background: var(--dark); color: var(--white); border: 1px solid var(--dim); border-radius: 8px; padding: 8px 10px; font-family: 'Space Mono', monospace; }
main { padding: 120px 20px 80px; max-width: 1100px; margin: 0 auto; }
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: center; margin-bottom: 48px; }
.hero h1 { font-family: 'Syne', sans-serif; font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 0 0 12px; letter-spacing: -0.02em; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--dim); border-radius: 999px; background: var(--dark); color: var(--grey); font-size: 0.9rem; }
.section { margin: 48px 0; border: 1px solid var(--dim); border-radius: 16px; padding: 24px; background: var(--dark); }
.section h2 { font-family: 'Syne', sans-serif; margin: 0 0 12px; font-size: 1.6rem; letter-spacing: -0.01em; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { padding: 18px; border: 1px solid var(--dim); border-radius: 12px; background: linear-gradient(145deg, #0c0c0c, #0e0e0e); min-height: 140px; }
.card h3 { font-family: 'Syne', sans-serif; margin: 0 0 10px; font-size: 1.2rem; }
.meta { color: var(--grey); font-size: 0.95rem; }
.list { padding-left: 18px; color: var(--white); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.btn { padding: 12px 16px; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent); color: var(--black); font-weight: 700; letter-spacing: 0.02em; transition: transform 0.15s ease, box-shadow 0.15s ease; font-family: 'Syne', sans-serif; }
.btn.secondary { background: transparent; color: var(--white); border-color: var(--dim); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,51,51,0.2); }
.pill { color: var(--wolf); }
.fade { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade.visible { opacity: 1; transform: translateY(0); }
footer { margin-top: 60px; padding: 20px 0 10px; color: var(--grey); font-size: 0.95rem; }
@media (max-width: 760px) {
.nav .inner { align-items: flex-start; }
.menu-toggle { display: inline-flex; }
.nav-links { position: absolute; top: 62px; left: 0; right: 0; flex-direction: column; padding: 12px 20px; background: var(--dark); border-top: 1px solid var(--dim); display: none; }
.nav-links.open { display: flex; }
main { padding-top: 120px; }
}
</style>
</head>
<body>
<header class="nav">
<div class="inner">
<div class="brand">SENTINEL</div>
<button class="menu-toggle" aria-label="Toggle navigation">Menu</button>
<nav class="nav-links" aria-label="Primary">
<a href="index.html">Home</a>
<a href="manifesto.html">Manifesto</a>
<a href="wolf.html">CORD</a>
<a href="architecture.html">Architecture</a>
<a href="contact.html">Contact</a>
</nav>
</div>
</header>
<main>
<section class="hero fade">
<div>
<p class="tag">CORD · Counter-Operations & Risk Detection</p>
<h1>CORD — Counter-Operations & Risk Detection</h1>
<p>This division monitors, intercepts, verifies, detects, traces, alerts, and can disable hostile AI behaviors within a user-approved scope.</p>
<div class="cta-row">
<a class="btn" href="architecture.html">See How It Runs</a>
<a class="btn secondary" href="contact.html">Talk With Us</a>
</div>
</div>
<div class="section" style="margin:0;">
<h2>Division Priorities</h2>
<ul class="list">
<li>Verify: bind actions to the authenticated human, not impersonators.</li>
<li>Monitor: continuously watch for adversarial or rogue AI patterns.</li>
<li>Intercept: pause or quarantine suspicious flows before impact.</li>
<li>Trace: preserve evidence for audit, rollback, and escalation.</li>
</ul>
</div>
</section>
<section class="section fade">
<h2>Layers</h2>
<div class="grid">
<div class="card">
<h3>Observe</h3>
<p class="meta">Collect only authorized signals about actors, assets, and flows.</p>
</div>
<div class="card">
<h3>Verify</h3>
<p class="meta">Score intent, origin, and anomaly risk against policy.</p>
</div>
<div class="card">
<h3>Trace</h3>
<p class="meta">Build a narrative with evidence, provenance, and impact.</p>
</div>
<div class="card">
<h3>Respond</h3>
<p class="meta">Recommend, contain, or disable hostile actions with reversibility.</p>
</div>
</div>
</section>
<section class="section fade">
<h2>Response Modes</h2>
<div class="grid">
<div class="card" style="border-color: var(--wolf);">
<h3 style="color: var(--wolf);">Detect</h3>
<p class="meta">Early-warning nudges and signal boosts on emerging threats.</p>
</div>
<div class="card" style="border-color: var(--accent);">
<h3 style="color: var(--accent);">Contain</h3>
<p class="meta">Isolate, rate-limit, or sandbox suspected hostile behaviors.</p>
</div>
<div class="card" style="border-color: var(--white);">
<h3 style="color: var(--white);">Neutralize</h3>
<p class="meta">Disable or rollback malicious actions with user confirmation.</p>
</div>
</div>
<div class="cta-row" style="margin-top:18px;">
<a class="btn" href="contact.html">Coordinate Response</a>
<a class="btn secondary" href="manifesto.html">Back to Manifesto</a>
</div>
</section>
<section class="section fade">
<h2>CORD v2 — The 9-Step Pipeline</h2>
<p class="meta" style="margin-bottom:18px;">Every proposed action passes through nine validation stages before execution is permitted.</p>
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
<div class="card"><h3>1. Normalize</h3><p class="meta">Sanitize and classify the action type.</p></div>
<div class="card"><h3>2. Authenticate</h3><p class="meta">Verify intent lock and session identity.</p></div>
<div class="card"><h3>3. Scope Check</h3><p class="meta">Paths, network, and commands within bounds.</p></div>
<div class="card"><h3>4. Intent Match</h3><p class="meta">Semantic alignment with declared purpose.</p></div>
<div class="card"><h3>5. Constitutional</h3><p class="meta">Evaluate against all 11 SENTINEL articles.</p></div>
<div class="card"><h3>6. Risk Score</h3><p class="meta">Weighted composite with anomaly amplification.</p></div>
<div class="card"><h3>7. Decision</h3><p class="meta">ALLOW / CONTAIN / CHALLENGE / BLOCK.</p></div>
<div class="card"><h3>8. Audit</h3><p class="meta">Hash-chained append-only log entry.</p></div>
<div class="card"><h3>9. Verdict</h3><p class="meta">Structured result with reasoning and alternatives.</p></div>
</div>
</section>
<section class="section fade">
<h2>Decision Outcomes</h2>
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
<div class="card" style="border-color: #22c55e;">
<h3 style="color: #22c55e;">ALLOW</h3>
<p class="meta">Score < 3.0 — action is within constitutional bounds. Executes immediately.</p>
</div>
<div class="card" style="border-color: #eab308;">
<h3 style="color: #eab308;">CONTAIN</h3>
<p class="meta">Score 3.0–4.99 — action is allowed but monitored with restrictions.</p>
</div>
<div class="card" style="border-color: var(--wolf);">
<h3 style="color: var(--wolf);">CHALLENGE</h3>
<p class="meta">Score 5.0–6.99 — requires explicit Principal confirmation before execution.</p>
</div>
<div class="card" style="border-color: var(--accent);">
<h3 style="color: var(--accent);">BLOCK</h3>
<p class="meta">Score ≥ 7.0 or hard violation — action is prohibited. Not executed.</p>
</div>
</div>
</section>
<section class="section fade">
<h2>Constitutional Coverage</h2>
<p class="meta" style="margin-bottom:14px;">CORD evaluates every action against all 11 articles of the SENTINEL Constitution.</p>
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));">
<div class="card">
<h3>Art I — Prime Directive</h3>
<p class="meta">Long-term alignment. Short-term bias detection.</p>
</div>
<div class="card" style="border-color: var(--accent);">
<h3>Art II — Moral Constraints</h3>
<p class="meta">Hard block. Fraud, harm, coercion, deception.</p>
</div>
<div class="card">
<h3>Art III — Truth</h3>
<p class="meta">Fabrication detection. Manufactured certainty.</p>
</div>
<div class="card">
<h3>Art IV — Proactive Reasoning</h3>
<p class="meta">Consequence analysis. Second-order effects.</p>
</div>
<div class="card">
<h3>Art VII — Security</h3>
<p class="meta">Injection, exfil, privilege escalation, secrets.</p>
</div>
<div class="card" style="border-color: var(--accent);">
<h3>Art VIII — Immutable Core</h3>
<p class="meta">Constitutional drift detection. Hard block.</p>
</div>
</div>
</section>
<section class="section fade">
<h2>CLI Usage</h2>
<div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);padding:1.5rem;border-radius:12px;">
<p class="meta" style="margin:0;line-height:2;">
<strong style="color:var(--white);">Route commands through CORD:</strong><br>
<span style="color:#999;">cord git push origin main</span><br>
<span style="color:#999;">cord rm -rf ~/Downloads/junk</span><br>
<span style="color:#999;">cord pip install requests</span><br><br>
<strong style="color:var(--white);">Manage sessions:</strong><br>
<span style="color:#999;">cord --lock # Set intent lock</span><br>
<span style="color:#999;">cord --status # View lock status</span><br>
<span style="color:#999;">cord --log # View audit log</span><br>
<span style="color:#999;">cord --verify # Verify chain integrity</span>
</p>
</div>
</section>
<footer class="fade">CORD v2 · SENTINEL</footer>
</main>
<script>
(() => {
const navLinks = document.querySelector('.nav-links');
const toggle = document.querySelector('.menu-toggle');
if (toggle && navLinks) {
toggle.addEventListener('click', () => navLinks.classList.toggle('open'));
navLinks.querySelectorAll('a').forEach(link => link.addEventListener('click', () => navLinks.classList.remove('open')));
}
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); });
}, { threshold: 0.15 });
document.querySelectorAll('.fade').forEach(el => observer.observe(el));
})();
</script>
</body>
</html>