Spaces:
Running
Running
Download index.html from tomyimkc/memorystand: direct link, hf CLI and curl.
- Browser
- Download file 51.4 kB
-
https://huggingface.co/spaces/tomyimkc/memorystand/resolve/main/index.html
- Command line
-
hf download hf://spaces/tomyimkc/memorystand/index.html
-
curl -L -o index.html https://huggingface.co/spaces/tomyimkc/memorystand/resolve/main/index.html
51.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%230a121a'/%3E%3Cpath d='M17 47V17h8l7 14 7-14h8v30h-8V31l-7 13-7-13v16z' fill='%236de0a6'/%3E%3C/svg%3E">
<title>MemoryStand — memory that must prove it worked</title>
<style>
:root {
--bg: #0a0e14;
--panel: #111923;
--panel-2: #0b121a;
--panel-3: #172231;
--border: #263345;
--border-light: #34445a;
--text: #f4f7fb;
--text-dim: #aab5c4;
--text-faint: #748196;
--accent: #64b5ff;
--accent-dim: #173b59;
--green: #35d488;
--green-dim: #123322;
--amber: #f5b93d;
--amber-dim: #3a2e0f;
--red: #ff5d6a;
--red-dim: #3a1420;
--purple: #b28dff;
--purple-dim: #241a3a;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--radius: 16px;
--shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: 16px;
line-height: 1.45;
}
body {
min-height: 100vh;
background:
radial-gradient(circle at 12% -8%, rgba(77, 163, 255, 0.18), transparent 34rem),
radial-gradient(circle at 88% 6%, rgba(53, 212, 136, 0.10), transparent 28rem),
var(--bg);
}
a { color: var(--accent); text-underline-offset: 3px; }
code, .mono { font-family: var(--mono); }
/* ---------- topbar ---------- */
header.topbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 74px;
padding: 14px clamp(20px, 4vw, 64px);
border-bottom: 1px solid var(--border);
background: rgba(8, 13, 20, 0.88);
backdrop-filter: blur(18px);
position: sticky;
top: 0;
z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand-mark {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: linear-gradient(145deg, var(--accent), #2a78ff);
color: #03111e;
font-weight: 900;
letter-spacing: -1px;
box-shadow: 0 10px 26px rgba(77, 163, 255, 0.25);
}
.brand-copy { display: flex; flex-direction: column; gap: 1px; }
.brand h1 { margin: 0; font-size: 20px; letter-spacing: -0.2px; }
.brand p { margin: 0; font-size: 11px; color: var(--text-faint); }
nav.topnav {
display: flex;
align-items: center;
gap: 18px;
}
nav.topnav a {
color: var(--text-dim);
font-size: 13px;
font-weight: 650;
text-decoration: none;
}
nav.topnav a:hover { color: var(--text); }
.topbar-actions {
display: flex;
align-items: center;
gap: 10px;
}
.field-inline { display: flex; flex-direction: column; gap: 3px; min-width: 220px; }
.field-inline label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.field-inline input {
font-family: var(--mono);
font-size: 13px;
}
.status-pill {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--border-light);
background: var(--panel);
font-size: 13px;
white-space: nowrap;
}
.status-dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--text-faint);
box-shadow: 0 0 0 3px rgba(255,255,255,0.03);
flex: none;
}
.status-dot.ok { background: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.status-dot.down { background: var(--red); box-shadow: 0 0 0 3px var(--red-dim); }
.status-pill .api-base { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }
.eyebrow {
margin: 0;
color: var(--accent);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.hero {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
gap: clamp(30px, 6vw, 86px);
align-items: center;
max-width: 1420px;
min-height: 620px;
margin: 0 auto;
padding: clamp(64px, 8vw, 118px) clamp(22px, 4vw, 60px) 76px;
}
.hero::before {
content: "";
position: absolute;
inset: auto -12% -35% 35%;
height: 520px;
background: radial-gradient(circle, rgba(77, 163, 255, 0.15), transparent 66%);
pointer-events: none;
}
.hero-copy { position: relative; z-index: 1; }
.hero h2 {
max-width: 850px;
margin: 20px 0 24px;
font-size: clamp(50px, 6.6vw, 88px);
line-height: 0.98;
letter-spacing: -0.055em;
}
.hero-lede {
max-width: 670px;
margin: 0;
color: var(--text-dim);
font-size: clamp(18px, 2vw, 23px);
line-height: 1.55;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 34px;
}
.hero-note {
display: flex;
align-items: center;
gap: 9px;
margin-top: 20px;
color: var(--text-faint);
font-size: 13px;
}
.hero-note .status-dot { width: 8px; height: 8px; }
.hero-note.degraded { color: var(--red); }
.causal-card {
position: relative;
z-index: 1;
padding: 28px;
border: 1px solid var(--border-light);
border-radius: 24px;
background:
linear-gradient(145deg, rgba(23, 34, 49, 0.96), rgba(9, 15, 23, 0.96));
box-shadow: var(--shadow);
}
.causal-card h3 { margin: 10px 0 7px; font-size: 25px; letter-spacing: -0.02em; }
.causal-card > p { margin: 0; color: var(--text-dim); }
.causal-flow {
display: grid;
grid-template-columns: 1fr 28px 1fr 28px 1fr;
align-items: stretch;
gap: 8px;
margin-top: 24px;
}
.causal-node {
min-width: 0;
padding: 18px 12px;
border: 1px solid var(--border-light);
border-radius: 12px;
background: rgba(5, 10, 16, 0.68);
text-align: center;
}
.causal-node strong { display: block; font-size: 14px; }
.causal-node span { display: block; margin-top: 6px; color: var(--text-faint); font-size: 11px; }
.causal-node.alert { border-color: rgba(245, 185, 61, 0.58); }
.causal-node.fail { border-color: rgba(255, 93, 106, 0.66); }
.causal-arrow { display: grid; place-items: center; color: var(--text-faint); font-size: 18px; }
.causal-verdict {
margin-top: 22px;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid rgba(255, 93, 106, 0.48);
background: rgba(58, 20, 32, 0.42);
color: #ffdce0;
font-weight: 750;
text-align: center;
}
.causal-disclosure {
margin-top: 12px !important;
color: var(--text-faint) !important;
font-size: 11px;
text-align: center;
}
.section-shell {
max-width: 1420px;
margin: 0 auto;
padding: 88px clamp(22px, 4vw, 60px);
}
.section-shell.compact { padding-top: 58px; padding-bottom: 58px; }
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 30px;
}
.section-head h2 {
max-width: 820px;
margin: 10px 0 0;
font-size: clamp(34px, 4vw, 54px);
line-height: 1.05;
letter-spacing: -0.04em;
}
.section-head p {
max-width: 520px;
margin: 0;
color: var(--text-dim);
font-size: 16px;
}
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.step-card {
position: relative;
padding: 26px;
border: 1px solid var(--border);
border-radius: 18px;
background: linear-gradient(180deg, rgba(19, 28, 40, 0.95), rgba(13, 19, 27, 0.95));
}
.step-card.active { border-color: rgba(77, 163, 255, 0.6); }
.step-index {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--accent-dim);
color: var(--accent);
font-family: var(--mono);
font-weight: 850;
}
.step-card h3 { margin: 18px 0 8px; font-size: 21px; }
.step-card p { margin: 0; color: var(--text-dim); font-size: 14px; }
.step-result {
margin-top: 18px;
color: var(--green);
font-size: 13px;
font-weight: 750;
}
.judge-stage {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
gap: 20px;
align-items: start;
}
.guided-card {
overflow: hidden;
border: 1px solid var(--border-light);
border-radius: 22px;
background: var(--panel);
box-shadow: var(--shadow);
}
.guided-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 24px 26px;
border-bottom: 1px solid var(--border);
background: var(--panel-2);
}
.guided-head h3 { margin: 0; font-size: 22px; }
.guided-head p { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; }
.guided-body { padding: 26px; }
.guided-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 22px;
}
.summary-stat {
min-width: 0;
padding: 16px;
border: 1px solid var(--border);
border-radius: 13px;
background: var(--panel-2);
}
.summary-stat span {
display: block;
color: var(--text-faint);
font-size: 10px;
font-weight: 750;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.summary-stat strong {
display: block;
margin-top: 6px;
color: var(--text);
font-size: 17px;
}
.guided-controls {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.guided-controls p { flex: 1 1 320px; margin: 0; color: var(--text-dim); font-size: 13px; }
.guide-aside {
display: flex;
flex-direction: column;
gap: 16px;
}
.guide-note {
padding: 22px;
border: 1px solid var(--border);
border-radius: 18px;
background: var(--panel);
}
.guide-note h3 { margin: 0 0 8px; font-size: 17px; }
.guide-note p { margin: 0; color: var(--text-dim); font-size: 13px; }
.guide-note ul { margin: 12px 0 0; padding-left: 18px; color: var(--text-dim); font-size: 13px; }
.guide-note li + li { margin-top: 7px; }
.trust-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.trust-card {
padding: 20px;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--panel);
}
.trust-card h3 { margin: 12px 0 7px; font-size: 17px; }
.trust-card p { margin: 0; color: var(--text-dim); font-size: 13px; }
.architecture-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.architecture-card {
padding: 24px;
border: 1px solid var(--border);
border-radius: 18px;
background: var(--panel);
}
.architecture-card .icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--accent-dim);
color: var(--accent);
font-family: var(--mono);
font-weight: 900;
}
.architecture-card h3 { margin: 18px 0 8px; font-size: 20px; }
.architecture-card p { margin: 0; color: var(--text-dim); font-size: 14px; }
details.advanced {
max-width: 1420px;
margin: 0 auto 90px;
border: 1px solid var(--border);
border-radius: 18px;
background: rgba(13, 19, 27, 0.78);
}
details.advanced > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 26px;
cursor: pointer;
color: var(--text);
font-weight: 750;
list-style: none;
}
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary span { color: var(--text-faint); font-size: 12px; font-weight: 500; }
.advanced-inner { border-top: 1px solid var(--border); }
.connection-settings {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 22px 26px 0;
}
/* ---------- seeded-demo preview strip ---------- */
section.preview-strip {
margin: 22px 26px 0;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 22px;
display: flex;
flex-direction: column;
gap: 12px;
}
.preview-strip-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.preview-strip-head h2 { margin: 0 0 4px; font-size: 15px; }
.preview-strip-head p { margin: 0; font-size: 13px; color: var(--text-dim); max-width: 70ch; }
.preview-strip-result { font-size: 13px; }
.preview-strip-result .memory-row { margin-bottom: 6px; }
.preview-strip-result .preview-summary { margin: 0 0 8px; color: var(--text-dim); }
/* ---------- layout ---------- */
main.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 22px 26px 32px;
margin: 0 auto;
}
@media (max-width: 1100px) {
main.grid { grid-template-columns: 1fr; }
}
section.panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 0;
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.panel-num {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 6px;
background: var(--accent-dim); color: var(--accent);
font-size: 12px; font-weight: 700;
}
.panel-sub { margin: 0; font-size: 13px; color: var(--text-dim); max-width: 60ch; }
form.panel-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 12px;
}
form.panel-form .span2 { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; color: var(--text-dim); }
.field .hint { font-size: 11px; color: var(--text-faint); }
input[type="text"], input[type="number"], select, textarea {
background: var(--panel-2);
border: 1px solid var(--border-light);
border-radius: 6px;
color: var(--text);
padding: 8px 10px;
font-size: 14px;
font-family: var(--sans);
width: 100%;
}
textarea { resize: vertical; min-height: 46px; font-family: var(--sans); }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-dim);
}
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }
.checkbox-row label { font-size: 13px; color: var(--text); }
button.primary,
a.primary {
background: var(--accent);
color: #061019;
border: none;
border-radius: 9px;
padding: 12px 18px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.01em;
}
button.primary:hover,
a.primary:hover { filter: brightness(1.08); }
button.primary:focus-visible,
button.ghost:focus-visible,
a:focus-visible,
summary:focus-visible {
outline: 3px solid rgba(77, 163, 255, 0.45);
outline-offset: 3px;
}
button.primary:disabled { opacity: 0.55; cursor: default; }
button.ghost,
a.ghost {
background: transparent;
color: var(--accent);
border: 1px solid var(--border-light);
border-radius: 9px;
padding: 10px 14px;
font-size: 13px;
cursor: pointer;
}
button.ghost:hover,
a.ghost:hover { border-color: var(--accent); }
a.button-link {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
a.button-link.primary { color: #061019; }
a.button-link.ghost { color: var(--accent); }
.result-area {
border-top: 1px solid var(--border);
padding-top: 14px;
margin-top: 2px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 40px;
}
#guidedResult.result-area {
min-height: 180px;
border-top: 0;
padding-top: 0;
}
.guided-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.guided-memory {
padding: 18px;
border: 1px solid var(--border-light);
border-radius: 14px;
background: var(--panel-2);
}
.guided-memory.stronger { border-color: rgba(53, 212, 136, 0.62); }
.guided-memory .guided-memory-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.guided-memory h4 { margin: 14px 0 7px; font-size: 20px; }
.guided-memory p { margin: 0; color: var(--text-dim); font-size: 13px; }
.guided-memory .distance {
color: var(--text-faint);
font-family: var(--mono);
font-size: 11px;
}
.guided-verdict {
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: center;
padding: 20px;
border: 1px solid rgba(53, 212, 136, 0.58);
border-radius: 14px;
background: linear-gradient(135deg, rgba(18, 51, 34, 0.66), rgba(10, 18, 26, 0.96));
}
.guided-verdict.unexpected {
border-color: rgba(245, 185, 61, 0.66);
background: linear-gradient(135deg, rgba(58, 46, 15, 0.58), rgba(10, 18, 26, 0.96));
}
.guided-verdict h4 { margin: 0; font-size: 24px; }
.guided-verdict p { margin: 7px 0 0; color: var(--text-dim); font-size: 13px; }
.guided-metric {
min-width: 122px;
padding: 12px 15px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
background: rgba(3, 7, 12, 0.5);
text-align: center;
}
.guided-metric span { display: block; color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.guided-metric strong { display: block; margin-top: 5px; color: var(--green); font-family: var(--mono); font-size: 28px; }
.guided-receipt {
display: grid;
gap: 12px;
}
.receipt-line {
display: grid;
grid-template-columns: 150px 1fr;
gap: 16px;
align-items: start;
padding: 13px 0;
border-bottom: 1px solid var(--border);
}
.receipt-line:last-child { border-bottom: 0; }
.receipt-line span { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; }
.receipt-line strong { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.placeholder { color: var(--text-faint); font-size: 13px; }
.error-banner {
background: var(--red-dim);
border: 1px solid var(--red);
color: #ffd7db;
border-radius: 6px;
padding: 10px 12px;
font-size: 13px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.badge.green { background: var(--green-dim); color: var(--green); }
.badge.amber { background: var(--amber-dim); color: var(--amber); }
.badge.red { background: var(--red-dim); color: var(--red); }
.badge.purple { background: var(--purple-dim); color: var(--purple); }
.badge.gray { background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--border-light); }
.verdict-hero {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
border-radius: 8px;
border: 1px solid var(--border-light);
background: var(--panel-2);
}
.verdict-hero .badge { font-size: 15px; padding: 8px 16px; }
.verdict-hero .verdict-id { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
ul.reason-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text); }
ul.reason-list li { margin-bottom: 4px; }
.memory-row {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
border: 1px solid var(--border-light);
border-radius: 8px;
background: var(--panel-2);
}
.memory-row .memory-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
}
.memory-row .memory-id { font-family: var(--mono); color: var(--text-dim); }
.memory-row .memory-content { font-size: 13px; color: var(--text); }
.memory-row .memory-attr { font-size: 12px; color: var(--text-faint); font-family: var(--mono); }
.memory-row .memory-rank { font-family: var(--mono); font-size: 11px; color: var(--text-faint); min-width: 20px; }
.memory-row.chosen { border-color: var(--green); }
.kv-line { font-size: 13px; color: var(--text-dim); }
.kv-line b { color: var(--text); font-weight: 600; }
/* ---------- panel 3: MemoryStand / model-calls hero ---------- */
.model-calls-hero {
text-align: center;
padding: 22px 10px;
border-radius: 10px;
border: 1px solid var(--border-light);
background: var(--panel-2);
}
.model-calls-hero .mc-label {
font-size: 13px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 6px;
}
.model-calls-hero .mc-number {
font-size: 56px;
font-weight: 800;
line-height: 1;
font-family: var(--mono);
}
.model-calls-hero .mc-number.zero { color: var(--green); }
.model-calls-hero .mc-number.nonzero { color: var(--red); }
.model-calls-hero .mc-note {
margin: 8px 0 0;
font-size: 12px;
color: var(--text-dim);
max-width: 48ch;
margin-left: auto;
margin-right: auto;
}
/* ---------- panel 3: trust ladder explainer ---------- */
.trust-ladder {
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 14px 16px;
background: var(--panel-2);
display: flex;
flex-direction: column;
gap: 10px;
}
.trust-ladder h3 {
margin: 0;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
}
.trust-ladder-rungs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.trust-ladder-rungs .rung { display: flex; flex-direction: column; gap: 6px; }
.trust-ladder-rungs .rung p { margin: 0; font-size: 12px; color: var(--text-dim); }
.trust-ladder-note {
margin: 4px 0 0;
font-size: 12px;
color: var(--text-faint);
border-top: 1px solid var(--border);
padding-top: 8px;
}
@media (max-width: 720px) {
.trust-ladder-rungs { grid-template-columns: 1fr 1fr; }
}
/* ---------- panel 3: resulting trust tier + verification ---------- */
.verification-block {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
border-radius: 8px;
border: 1px solid var(--border-light);
background: var(--panel-2);
}
.verification-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.verification-row .verification-explain {
margin: 0;
font-size: 13px;
color: var(--text-dim);
flex: 1 1 260px;
}
.verification-status-line { margin: 0; font-size: 13px; color: var(--text-dim); }
.verification-status-line b { color: var(--text); font-weight: 600; }
.observed-claimed {
display: flex;
gap: 14px;
}
.observed-claimed .oc-item {
flex: 1;
background: var(--panel);
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 10px 14px;
text-align: center;
}
.observed-claimed.mismatch .oc-item { border-color: var(--red); }
.observed-claimed.match .oc-item { border-color: var(--green); }
.observed-claimed .oc-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-faint);
margin-bottom: 4px;
}
.observed-claimed .oc-value {
font-family: var(--mono);
font-size: 18px;
font-weight: 700;
color: var(--text);
}
/* ---------- panel 3: deliberate refusal (HTTP 400, gate working as designed) ---------- */
/* Deliberately NOT .error-banner styling -- a refusal here is the feature succeeding, not a
broken request, so it gets its own green-bordered treatment instead of a flat red banner. */
.refusal-banner {
border: 1px solid var(--green);
background: var(--panel-2);
border-radius: 8px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.refusal-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.refusal-explain { margin: 0; font-size: 13px; color: var(--text-dim); }
.refusal-detail {
margin: 0;
font-size: 13px;
color: var(--text);
font-family: var(--mono);
background: var(--panel);
border: 1px solid var(--border-light);
border-radius: 6px;
padding: 8px 10px;
}
/* ---------- panel 1: closer-memory-overruled-by-trust callout ---------- */
/* Same visual language as .refusal-banner below (a green border marks the feature
proving itself, not an error) -- this is the single most persuasive moment this
dashboard can show: a nearer memory losing to a more trusted one, zero model calls. */
.overrule-banner {
border: 1px solid var(--green);
background: var(--panel-2);
border-radius: 8px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.overrule-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.overrule-explain { margin: 0; font-size: 13px; color: var(--text-dim); }
.tier-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.tier-col h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.tier-col.promoted h3 { color: var(--green); }
.tier-col.demoted h3 { color: var(--red); }
.tier-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tier-col li { font-family: var(--mono); font-size: 12px; background: var(--panel-2); border: 1px solid var(--border-light); border-radius: 6px; padding: 6px 8px; }
.tier-empty { font-size: 12px; color: var(--text-faint); }
/* ---------- panel 4: cross-examine ---------- */
.diff-columns {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.diff-row {
display: grid;
grid-template-columns: 90px 1fr;
gap: 10px;
align-items: start;
padding: 8px 10px;
border-radius: 6px;
border: 1px solid var(--border-light);
background: var(--panel-2);
}
.diff-row.added { border-color: rgba(53,212,136,0.35); }
.diff-row.removed { border-color: rgba(255,93,106,0.35); }
.diff-row.changed { border-color: rgba(245,185,61,0.35); }
.diff-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 0; }
.diff-tag.added { color: var(--green); }
.diff-tag.removed { color: var(--red); }
.diff-tag.changed { color: var(--amber); }
.diff-body { font-size: 13px; }
.diff-body .memory-id { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
details.raw-json { font-size: 12px; }
details.raw-json summary { cursor: pointer; color: var(--text-dim); }
details.raw-json pre {
background: var(--panel-2);
border: 1px solid var(--border-light);
border-radius: 6px;
padding: 10px;
overflow: auto;
max-height: 260px;
font-size: 11.5px;
margin: 8px 0 0;
}
footer {
padding: 32px 28px 54px;
color: var(--text-faint);
font-size: 12px;
text-align: center;
border-top: 1px solid var(--border);
background: rgba(7, 11, 17, 0.76);
}
.spinner {
display: inline-block;
width: 13px; height: 13px;
border: 2px solid var(--border-light);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.7s linear infinite;
vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1080px) {
.hero { grid-template-columns: 1fr; min-height: 0; }
.hero-copy { max-width: 880px; }
.causal-card { max-width: 760px; }
.judge-stage { grid-template-columns: 1fr; }
.guide-aside { display: grid; grid-template-columns: 1fr 1fr; }
.trust-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
header.topbar { position: relative; padding: 13px 18px; }
.brand p, nav.topnav { display: none; }
.status-pill .api-base { display: none; }
.hero { padding-top: 60px; padding-bottom: 54px; }
.hero h2 { font-size: clamp(48px, 15vw, 66px); }
.causal-card { padding: 22px 18px; }
.causal-flow { grid-template-columns: 1fr; }
.causal-arrow { transform: rotate(90deg); }
.section-shell { padding-top: 64px; padding-bottom: 64px; }
.section-head { align-items: start; flex-direction: column; }
.steps, .architecture-grid, .trust-cards, .guide-aside { grid-template-columns: 1fr; }
.guided-summary { grid-template-columns: 1fr; }
.guided-compare { grid-template-columns: 1fr; }
.guided-verdict { grid-template-columns: 1fr; }
.receipt-line { grid-template-columns: 1fr; gap: 5px; }
.connection-settings { grid-template-columns: 1fr; }
main.grid { grid-template-columns: 1fr; padding: 18px; }
section.preview-strip { margin: 18px; }
form.panel-form { grid-template-columns: 1fr; }
form.panel-form .span2 { grid-column: auto; }
.tier-columns { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<header class="topbar">
<a class="brand" href="#top" aria-label="MemoryStand home">
<span class="brand-mark" aria-hidden="true">M</span>
<span class="brand-copy">
<h1>MemoryStand</h1>
<p>Evidence-gated memory for AI agents</p>
</span>
</a>
<nav class="topnav" aria-label="Primary navigation">
<a href="#guided-demo">Guided demo</a>
<a href="#trust">Trust ladder</a>
<a href="#architecture">How it works</a>
<a href="https://github.com/tomyimkc/memorystand" target="_blank" rel="noreferrer">GitHub</a>
</nav>
<div class="topbar-actions">
<div class="status-pill" id="statusPill" title="Checked on page load and after every request">
<span class="status-dot" id="statusDot"></span>
<span id="statusText">checking…</span>
<span class="api-base" id="apiBaseLabel"></span>
</div>
</div>
</header>
<main id="top">
<section class="hero" aria-labelledby="hero-title">
<div class="hero-copy">
<p class="eyebrow">CockroachDB AI Hackathon candidate</p>
<h2 id="hero-title">Memory that must prove it worked.</h2>
<p class="hero-lede">
MemoryStand stops an AI agent from turning a lucky coincidence into permanent authority.
A past fix can guide action only after outside evidence supports it.
</p>
<div class="hero-actions">
<a class="primary button-link" href="#guided-demo">Try the guided demo</a>
<a class="ghost button-link" href="https://github.com/tomyimkc/memorystand" target="_blank" rel="noreferrer">Read the source</a>
</div>
<p class="hero-note" id="heroStatus" aria-live="polite">
<span class="status-dot" id="heroStatusDot" aria-hidden="true"></span>
<span id="heroStatusText">Checking the live CockroachDB-backed demo…</span>
</p>
</div>
<aside class="causal-card" aria-label="Why a service restart is not proof">
<p class="eyebrow">The failure MemoryStand prevents</p>
<h3>Alert stopped ≠ restart worked</h3>
<p>Timing is correlation. The outcome metric still has to move.</p>
<div class="causal-flow" aria-label="Restart, alert quiet, but latency stayed flat">
<div class="causal-node"><strong>Restart</strong><span>service restarted</span></div>
<div class="causal-arrow" aria-hidden="true">→</div>
<div class="causal-node alert"><strong>Alert quiet</strong><span>symptom disappeared</span></div>
<div class="causal-arrow" aria-hidden="true">→</div>
<div class="causal-node fail"><strong>Latency flat</strong><span>223 ms → 220 ms</span></div>
</div>
<div class="causal-verdict">No outside receipt. No causal claim.</div>
<p class="causal-disclosure">Seeded decision-rule example · not production CloudWatch data</p>
</aside>
</section>
<section class="section-shell compact" aria-labelledby="tour-title">
<div class="section-head">
<div>
<p class="eyebrow">A two-minute judge path</p>
<h2 id="tour-title">See the thesis in three clicks.</h2>
</div>
<p>The default path hides setup and raw JSON. Each click tells you what happened and why it matters.</p>
</div>
<div class="steps">
<article class="step-card active">
<span class="step-index">1</span>
<h3>Load the incident</h3>
<p>Read two competing memories: a closer restart story and a farther scale-up row whose service and receipt still need checking.</p>
<div class="step-result">Expected: both remain inspectable.</div>
</article>
<article class="step-card">
<span class="step-index">2</span>
<h3>Ask MemoryStand</h3>
<p>Run the real <code>/decide</code> path. Only matching, receipt-backed evidence may steer; otherwise the fixed fallback is disclosed.</p>
<div class="step-result">Expected policy: wrong-service proof refused.</div>
</article>
<article class="step-card">
<span class="step-index">3</span>
<h3>Inspect the receipt</h3>
<p>Open CockroachDB time travel for the recorded decision and preserve the exact ranked context.</p>
<div class="step-result">Expected: auditable history · no overwrite.</div>
</article>
</div>
</section>
<section class="section-shell" id="guided-demo" aria-labelledby="guided-title">
<div class="section-head">
<div>
<p class="eyebrow">Live product</p>
<h2 id="guided-title">Proof must match the service.</h2>
</div>
<p>The seeded incident is designed to make dangerous evidence look relevant. Run it and verify what was eligible, excluded, and cited.</p>
</div>
<div class="judge-stage">
<section class="guided-card" aria-live="polite">
<div class="guided-head">
<div>
<h3>Payments latency incident</h3>
<p>Read-only comparison first. One live decision only when you click.</p>
</div>
<span class="badge green">live API</span>
</div>
<div class="guided-body">
<div class="guided-summary" aria-label="Guided demo facts">
<div class="summary-stat"><span>Expected closer memory</span><strong>Restart · unconfirmed</strong></div>
<div class="summary-stat"><span>Expected wrong-service row</span><strong>Visible · excluded</strong></div>
<div class="summary-stat"><span>Expected policy</span><strong>Fallback disclosed</strong></div>
</div>
<div id="guidedResult" class="result-area">
<p class="placeholder">Loading the two decisive memories from the live deployment…</p>
</div>
<div class="guided-controls">
<button class="primary" type="button" id="runGuidedDemo">Run the live decision</button>
<button class="ghost" type="button" id="inspectGuidedReceipt" disabled>Inspect CockroachDB receipt</button>
<p id="guidedInstruction">First, compare what is close with what is trusted. Then run the decision.</p>
</div>
</div>
</section>
<aside class="guide-aside">
<section class="guide-note">
<h3>What to look for</h3>
<ul>
<li>The restart is the closest word match.</li>
<li>It is still <strong>unconfirmed</strong>.</li>
<li>The <strong>checkout-api</strong> scale-up row stays visible but cannot justify payments-service.</li>
<li>The response reports the model-call count.</li>
</ul>
</section>
<section class="guide-note">
<h3>Why this is safer</h3>
<p>Storage and authority are separate. A memory may remain searchable without receiving permission to steer an autonomous action.</p>
</section>
<section class="guide-note">
<h3>Honest limit</h3>
<p>This deployment matches words, not meaning. The decision route can fall back to a fixed policy; trust promotion itself uses zero model calls.</p>
</section>
</aside>
</div>
</section>
<section class="section-shell compact" id="trust" aria-labelledby="trust-title">
<div class="section-head">
<div>
<p class="eyebrow">The trust ladder</p>
<h2 id="trust-title">Keep the memory. Limit its authority.</h2>
</div>
<p>Disagreement is recorded instead of erased. A stronger receipt changes what may act, not what remains auditable.</p>
</div>
<div class="trust-cards">
<article class="trust-card"><span class="badge gray">unconfirmed</span><h3>Stored, not trusted</h3><p>No outcome receipt has been independently checked.</p></article>
<article class="trust-card"><span class="badge amber">attested</span><h3>Reported</h3><p>An outcome was reported, but no system of record was re-queried.</p></article>
<article class="trust-card"><span class="badge green">verified</span><h3>Externally checked</h3><p>CloudWatch agreed on metric, direction, amount, and entity.</p></article>
<article class="trust-card"><span class="badge red">disputed</span><h3>Contradicted</h3><p>A rollback, false positive, or outside mismatch blocks authority.</p></article>
</div>
</section>
<section class="section-shell" id="architecture" aria-labelledby="architecture-title">
<div class="section-head">
<div>
<p class="eyebrow">How it works</p>
<h2 id="architecture-title">One ledger. Three independent jobs.</h2>
</div>
<p>The public demo uses the deployed API and CockroachDB Cloud. Detailed implementation notes stay available without crowding the judge path.</p>
</div>
<div class="architecture-grid">
<article class="architecture-card"><span class="icon">CR</span><h3>CockroachDB ledger</h3><p>Stores facts, sources, trust tiers, ranked retrieval receipts, and later decisions together. Time travel reconstructs what the agent knew.</p></article>
<article class="architecture-card"><span class="icon">CW</span><h3>CloudWatch check</h3><p>Metric-based promotion requires the external system of record to agree. A direction, amount, metric, or entity mismatch refuses the claim; non-metric reports cannot reach verified.</p></article>
<article class="architecture-card"><span class="icon">0</span><h3>Model-free authority</h3><p>A model may propose an action, but it does not promote its own memory. The authority path reports zero model calls.</p></article>
</div>
</section>
<details class="advanced">
<summary>
<strong>Advanced workspace</strong>
<span>Manual ingest, outcome confirmation, time travel, raw JSON, and connection settings</span>
</summary>
<div class="advanced-inner">
<div class="connection-settings">
<div class="field-inline">
<label for="tenantId">Tenant ID</label>
<input type="text" id="tenantId" value="9c8f6e5a-9d1a-4a1c-8f2e-3b6d1c7a4e10">
</div>
<div class="field-inline">
<label for="agentId">Agent ID</label>
<input type="text" id="agentId" value="1a2b3c4d-5e6f-4708-9a0b-1c2d3e4f5061">
</div>
<div class="field-inline">
<label for="sharedSecret">Demo credential <span class="hint">(auto-filled; tenant-scoped)</span></label>
<input type="password" id="sharedSecret" placeholder="loaded from /health" autocomplete="off">
</div>
</div>
<section class="preview-strip" id="previewStrip">
<div class="preview-strip-head">
<div>
<h2>Seeded demo tenant</h2>
<p>
Read a small live sample from the isolated public tenant. This route does not mutate data.
</p>
</div>
<button class="ghost" type="button" id="loadSeededDemo">Reload sample</button>
</div>
<div class="preview-strip-result" id="previewResult">
<p class="placeholder">Checking for existing memories…</p>
</div>
</section>
<div class="grid">
<!-- Panel 1: Incident feed -->
<section class="panel" id="panel-decide">
<div class="panel-head">
<h2><span class="panel-num">1</span>Incident feed</h2>
</div>
<p class="panel-sub">
Post a synthetic alert. The agent recalls what it knows, then records the action it
took and why — every consulted memory is shown ranked by distance with its trust
tier. Leave "Proposed action" blank. The seeded default alert is built so a closer
<em>unconfirmed</em> restart cannot steer. A farther row also needs the same target
service and a complete outcome receipt before it may enter decision context.
</p>
<form class="panel-form" id="form-decide">
<div class="field span2">
<label for="decideQuery">Alert / recall query</label>
<textarea id="decideQuery" required placeholder="payments-service p99 latency above 2s, error rate climbing">payments-service p99 latency above 2s, error rate climbing</textarea>
</div>
<div class="field">
<label for="decideTargetEntity">Target service <span class="hint">(required when the agent decides)</span></label>
<input type="text" id="decideTargetEntity" value="payments-service" placeholder="payments-service">
</div>
<div class="field">
<label for="decideAction">Proposed action <span class="hint">(optional — blank lets the agent decide)</span></label>
<input type="text" id="decideAction" value="" placeholder="leave blank to let the agent decide">
</div>
<div class="field">
<label for="decideK">Memories to consult (k)</label>
<input type="number" id="decideK" value="5" min="1" max="20">
</div>
<div class="field span2">
<label for="decideRationale">Rationale</label>
<textarea id="decideRationale" required placeholder="Recent memory says restarting payments-service clears the stuck connection pool.">Recent memory says restarting payments-service clears the stuck connection pool.</textarea>
</div>
<div class="field">
<label for="decideTaskId">Task / incident UUID <span class="hint">(optional)</span></label>
<input type="text" id="decideTaskId" inputmode="text" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">
</div>
<div class="field">
<label for="decideProduced">Produced memory IDs <span class="hint">(comma-separated, optional)</span></label>
<input type="text" id="decideProduced" placeholder="from panel 2 → ingest">
</div>
<div class="field span2 checkbox-row">
<input type="checkbox" id="decideApproval">
<label for="decideApproval">Requires human approval before it runs</label>
</div>
<div class="field span2">
<button class="primary" type="submit" id="decideSubmit">Post alert to /decide</button>
</div>
</form>
<div class="result-area" id="decideResult">
<p class="placeholder">No decision posted yet.</p>
</div>
</section>
<!-- Panel 2: Memory / admission -->
<section class="panel" id="panel-ingest">
<div class="panel-head">
<h2><span class="panel-num">2</span>Memory admission</h2>
</div>
<p class="panel-sub">
Submit a memory. Admission control checks it against what the agent already
believes before it becomes recallable at all — the verdict, and why, is shown here.
</p>
<form class="panel-form" id="form-ingest">
<div class="field span2">
<label for="ingestContent">Content</label>
<textarea id="ingestContent" required placeholder="payments-service reads from orders_v2">payments-service reads from orders_v2</textarea>
</div>
<div class="field">
<label for="ingestEntity">Entity <span class="hint">(optional)</span></label>
<input type="text" id="ingestEntity" placeholder="payments-service">
</div>
<div class="field">
<label for="ingestType">Memory type</label>
<select id="ingestType">
<option value="semantic" selected>semantic</option>
<option value="episodic">episodic</option>
<option value="task_state">task_state</option>
<option value="tool_call">tool_call</option>
</select>
</div>
<div class="field">
<label for="ingestKey">Attribute key <span class="hint">(optional)</span></label>
<input type="text" id="ingestKey" placeholder="reads_from_table">
</div>
<div class="field">
<label for="ingestValue">Attribute value <span class="hint">(optional)</span></label>
<input type="text" id="ingestValue" placeholder="orders_v2">
</div>
<div class="field">
<label for="ingestSource">Source <span class="hint">(optional)</span></label>
<input type="text" id="ingestSource" placeholder="runbook:db-failover">
</div>
<div class="field">
<label for="ingestTaskId">Task / incident UUID <span class="hint">(optional)</span></label>
<input type="text" id="ingestTaskId" inputmode="text" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">
</div>
<div class="field span2">
<button class="primary" type="submit" id="ingestSubmit">Submit to /ingest</button>
</div>
</form>
<div class="result-area" id="ingestResult">
<p class="placeholder">No memory submitted yet.</p>
</div>
</section>
<!-- Panel 3: MemoryStand -->
<section class="panel" id="panel-memorystand">
<div class="panel-head">
<h2><span class="panel-num">3</span>MemoryStand (outcome gate)</h2>
</div>
<p class="panel-sub">
Report what actually happened. Memories that decision <em>produced</em> are promoted
or demoted based on that outcome — never on a model's opinion of itself.
</p>
<div class="trust-ladder" id="trustLadder">
<h3>The trust ladder</h3>
<div class="trust-ladder-rungs">
<div class="rung">
<span class="badge gray">unconfirmed</span>
<p>No outcome has been reported for this decision yet.</p>
</div>
<div class="rung">
<span class="badge amber">attested</span>
<p>An outcome was reported, but this deployment could not independently re-check it
(no PagerDuty token; a human sign-off has no system of record to re-query).</p>
</div>
<div class="rung">
<span class="badge green">verified</span>
<p>Re-queried against the external system of record (CloudWatch), which agreed.</p>
</div>
<div class="rung">
<span class="badge red">disputed</span>
<p>The reported outcome was a rollback, a false positive, or the external system of
record disagreed with the claim.</p>
</div>
</div>
<p class="trust-ladder-note">
Verification is delayed by design: confirming an outcome moments after a decision often
lands on <b>unavailable</b> because the "after" metric window is still in the future —
that is expected behaviour, not a broken feature.
</p>
</div>
<div class="model-calls-hero" id="modelCallsHero">
<div class="mc-label">model calls on this path</div>
<div class="mc-number zero" id="modelCallsNumber">0</div>
<p class="mc-note" id="modelCallsNote">
By design, before any outcome is confirmed: this promotion path never asks a
model anything. Confirm an outcome below and this updates from the real response.
</p>
</div>
<form class="panel-form" id="form-confirm">
<div class="field span2">
<label for="confirmDecisionId">Decision ID</label>
<input type="text" id="confirmDecisionId" required placeholder="paste a decision id from panel 1">
</div>
<div class="field">
<label for="confirmOutcome">Outcome</label>
<select id="confirmOutcome">
<option value="success">success</option>
<option value="rollback">rolled back</option>
<option value="false_positive">false positive</option>
</select>
</div>
<div class="field">
<label for="confirmSource">Source</label>
<select id="confirmSource">
<option value="pagerduty">PagerDuty</option>
<option value="metric">metric</option>
<option value="human">human</option>
</select>
</div>
<div class="field">
<label for="confirmRef">External reference</label>
<input type="text" id="confirmRef" required placeholder="incident id, metric query, or approver name">
</div>
<div class="field" id="confirmDeltaField">
<label for="confirmDelta">Metric delta <span class="hint">(required if source=metric)</span></label>
<input type="number" step="any" id="confirmDelta" placeholder="-42.5">
</div>
<div class="field span2">
<button class="primary" type="submit" id="confirmSubmit">Confirm outcome</button>
</div>
</form>
<div class="result-area" id="confirmResult">
<p class="placeholder">No outcome confirmed yet.</p>
</div>
</section>
<!-- Panel 4: Cross-examine -->
<section class="panel" id="panel-timemachine">
<div class="panel-head">
<h2><span class="panel-num">4</span>Cross-examine</h2>
</div>
<p class="panel-sub">
Pick a decision. See exactly what the agent believed the moment it acted, next to
what is true now — additions, removals, and changed trust tiers marked.
</p>
<form class="panel-form" id="form-timemachine">
<div class="field span2">
<label for="timemachineDecisionId">Decision ID</label>
<input type="text" id="timemachineDecisionId" required placeholder="paste a decision id from panel 1">
</div>
<div class="field span2">
<button class="primary" type="submit" id="timemachineSubmit">Call /timemachine</button>
</div>
</form>
<div class="result-area" id="timemachineResult">
<p class="placeholder">No decision cross-examined yet.</p>
</div>
</section>
</div>
</div>
</details>
</main>
<footer>
<strong>MemoryStand</strong> · Apache-2.0 ·
<a href="https://github.com/tomyimkc/memorystand" target="_blank" rel="noreferrer">public source</a> ·
candidate-only demonstration, not an AGI or production-validation claim.
Override the API for local development with <code>?api=http://host:port</code>.
</footer>
<script src="app.js"></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%230a121a'/%3E%3Cpath d='M17 47V17h8l7 14 7-14h8v30h-8V31l-7 13-7-13v16z' fill='%236de0a6'/%3E%3C/svg%3E">
<title>MemoryStand — memory that must prove it worked</title>
<style>
:root {
--bg: #0a0e14;
--panel: #111923;
--panel-2: #0b121a;
--panel-3: #172231;
--border: #263345;
--border-light: #34445a;
--text: #f4f7fb;
--text-dim: #aab5c4;
--text-faint: #748196;
--accent: #64b5ff;
--accent-dim: #173b59;
--green: #35d488;
--green-dim: #123322;
--amber: #f5b93d;
--amber-dim: #3a2e0f;
--red: #ff5d6a;
--red-dim: #3a1420;
--purple: #b28dff;
--purple-dim: #241a3a;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--radius: 16px;
--shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: 16px;
line-height: 1.45;
}
body {
min-height: 100vh;
background:
radial-gradient(circle at 12% -8%, rgba(77, 163, 255, 0.18), transparent 34rem),
radial-gradient(circle at 88% 6%, rgba(53, 212, 136, 0.10), transparent 28rem),
var(--bg);
}
a { color: var(--accent); text-underline-offset: 3px; }
code, .mono { font-family: var(--mono); }
/* ---------- topbar ---------- */
header.topbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 74px;
padding: 14px clamp(20px, 4vw, 64px);
border-bottom: 1px solid var(--border);
background: rgba(8, 13, 20, 0.88);
backdrop-filter: blur(18px);
position: sticky;
top: 0;
z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand-mark {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: linear-gradient(145deg, var(--accent), #2a78ff);
color: #03111e;
font-weight: 900;
letter-spacing: -1px;
box-shadow: 0 10px 26px rgba(77, 163, 255, 0.25);
}
.brand-copy { display: flex; flex-direction: column; gap: 1px; }
.brand h1 { margin: 0; font-size: 20px; letter-spacing: -0.2px; }
.brand p { margin: 0; font-size: 11px; color: var(--text-faint); }
nav.topnav {
display: flex;
align-items: center;
gap: 18px;
}
nav.topnav a {
color: var(--text-dim);
font-size: 13px;