+
+
+
How to Read --stats
+
+
- Exploit Spray Triage
- Cluster evasive probe families before parser development and identify repeated payload mutations quickly.
+
Input
+
+ Track payload volume and size distribution so performance regressions or capture shifts are obvious.
- Sigma-to-Stream Validation
- Reuse Sigma keyword intent directly against shell/log streams to validate or tune detections.
+ Match
+
+ See which tags dominate and whether new patterns add precision or just noise.
+
- Firmware + DNS Hunt Pivoting
- Tag binary fragments and suspicious DNS query families in one JSON-first workflow.
+ Compare + Environment
+
+ Validate similarity mode, distance behavior, and runtime context when sharing findings or benchmarking.
+
+
+
+
+
Install and Run in Under 60 Seconds
+
+
+
+ Quick Start
+ Copy
+
+
cargo install precursor
+cat samples/scenarios/pre-protocol-packet-triage/payloads.b64 \
+ | precursor -p samples/scenarios/pre-protocol-packet-triage/patterns.pcre \
+ -m base64 -t -d --similarity-mode lzjd -P --protocol-hints --stats
+
+
+
+ Background inspiration and historical context:
+ blog post 1
+ and
+ blog post 2 .
+
+
+
+
diff --git a/site/precursor-mark.svg b/site/precursor-mark.svg
new file mode 100644
index 0000000..2df05ad
--- /dev/null
+++ b/site/precursor-mark.svg
@@ -0,0 +1,30 @@
+
+ Precursor mark
+ Rounded square with packet flow lines and similarity nodes.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/site/styles.css b/site/styles.css
index ed52b58..b0a3d15 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -1,539 +1,639 @@
:root {
- --paper: #f9f7ef;
- --ink: #0f1f2f;
- --muted: #4f5f6f;
- --accent: #ff5f2e;
- --accent-soft: #ffd67c;
- --teal: #0f8f8f;
- --card: rgba(255, 255, 255, 0.84);
- --line: rgba(15, 31, 47, 0.14);
+ --bg-0: #070b12;
+ --bg-1: #0d1724;
+ --bg-2: #16283c;
+ --surface-0: rgba(13, 23, 36, 0.82);
+ --surface-1: rgba(18, 31, 48, 0.9);
+ --surface-2: rgba(25, 42, 64, 0.94);
+ --line: rgba(159, 195, 232, 0.24);
+ --line-strong: rgba(159, 195, 232, 0.4);
+ --text: #f1f6ff;
+ --muted: #acc0d8;
+ --accent: #3de0c1;
+ --accent-2: #ff8b3d;
+ --danger: #ff6f6f;
+ --shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
* {
box-sizing: border-box;
}
+html,
body {
margin: 0;
- font-family: "Space Grotesk", sans-serif;
- color: var(--ink);
- background: var(--paper);
+ min-height: 100%;
}
-.bg-layer {
+body {
+ font-family: "Sora", sans-serif;
+ color: var(--text);
+ background: radial-gradient(circle at 12% 5%, #173b57 0, transparent 36%),
+ radial-gradient(circle at 86% 0, #2e223d 0, transparent 42%),
+ linear-gradient(160deg, var(--bg-0), var(--bg-1) 45%, #0a111d 100%);
+ line-height: 1.55;
+}
+
+.ambient {
+ pointer-events: none;
position: fixed;
inset: 0;
z-index: -1;
background:
- radial-gradient(circle at 12% 12%, rgba(255, 214, 124, 0.45) 0, transparent 42%),
- radial-gradient(circle at 86% 0%, rgba(15, 143, 143, 0.24) 0, transparent 38%),
- linear-gradient(130deg, #fff9e9 0%, #f1f8f7 52%, #fdf1e6 100%);
+ radial-gradient(circle at 25% 72%, rgba(61, 224, 193, 0.12) 0, transparent 38%),
+ radial-gradient(circle at 86% 34%, rgba(255, 139, 61, 0.14) 0, transparent 30%),
+ radial-gradient(circle at 52% 12%, rgba(80, 156, 255, 0.08) 0, transparent 42%);
}
-main {
- width: min(1080px, 92vw);
- margin: 0 auto;
- padding: 2.8rem 0 4.2rem;
+.topbar {
+ width: min(1160px, 92vw);
+ margin: 1.2rem auto 0;
+ padding: 0.7rem 0.9rem;
+ border: 1px solid var(--line);
+ background: rgba(11, 19, 32, 0.75);
+ backdrop-filter: blur(8px);
+ border-radius: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.8rem;
}
-.hero {
- display: grid;
- gap: 1rem;
- padding: 2rem;
- border: 1px solid var(--line);
- border-radius: 28px;
- background: var(--card);
- backdrop-filter: blur(5px);
- animation: rise-in 0.7s ease-out both;
+.brand {
+ text-decoration: none;
+ color: var(--text);
+ display: inline-flex;
+ align-items: center;
+ gap: 0.7rem;
}
-.kicker {
- margin: 0;
- font-family: "IBM Plex Mono", monospace;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--teal);
+.brand span {
+ display: grid;
}
-h1 {
- margin: 0;
- font-size: clamp(1.9rem, 4.6vw, 3.15rem);
- line-height: 1.07;
+.brand strong {
+ font-size: 0.98rem;
+ line-height: 1;
}
-.hero-copy {
- margin: 0;
- max-width: 72ch;
+.brand small {
+ font-size: 0.7rem;
color: var(--muted);
- font-size: 1.05rem;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
}
-.hero-cta {
+.topbar nav {
display: flex;
flex-wrap: wrap;
- gap: 0.75rem;
+ gap: 0.7rem;
}
-.hero-cta a {
+.topbar nav a {
+ color: var(--muted);
text-decoration: none;
- color: var(--ink);
- border: 1px solid var(--line);
+ font-size: 0.82rem;
+ border: 1px solid transparent;
+ padding: 0.34rem 0.62rem;
border-radius: 999px;
- padding: 0.54rem 1rem;
- background: #fff;
- transition: transform 0.2s ease, border-color 0.2s ease;
+ transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
-.hero-cta a:hover {
+.topbar nav a:hover {
+ color: var(--text);
+ border-color: var(--line-strong);
transform: translateY(-1px);
- border-color: var(--accent);
}
-.stats {
- margin-top: 1.3rem;
- display: grid;
- gap: 0.9rem;
- grid-template-columns: repeat(3, minmax(0, 1fr));
+main {
+ width: min(1160px, 92vw);
+ margin: 1.1rem auto 0;
+ padding-bottom: 3.3rem;
}
-.stats article {
+section {
+ margin-top: 1.15rem;
border: 1px solid var(--line);
- border-radius: 20px;
- background: rgba(255, 255, 255, 0.72);
- padding: 1rem;
- animation: rise-in 0.7s ease-out both;
+ background: var(--surface-0);
+ border-radius: 22px;
+ padding: 1.3rem;
+ box-shadow: var(--shadow);
}
-.stats h2 {
+.section-head h2 {
margin: 0;
- font-size: 1rem;
+ font-size: clamp(1.2rem, 3vw, 1.85rem);
+ letter-spacing: -0.02em;
}
-.stats p {
- margin: 0.4rem 0 0;
+.section-head p {
+ margin: 0.46rem 0 0;
color: var(--muted);
- font-size: 0.95rem;
+ max-width: 74ch;
}
-.teaser {
- border: 1px solid var(--line);
- border-radius: 24px;
- padding: 1rem;
- background: rgba(255, 255, 255, 0.8);
+.hero {
+ display: grid;
+ grid-template-columns: 1.2fr 1fr;
+ gap: 1rem;
+ align-items: stretch;
}
-.teaser-head h2 {
+.eyebrow {
margin: 0;
- font-size: 1.4rem;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ font-size: 0.74rem;
+ color: var(--accent);
}
-.teaser-head p {
- margin: 0.4rem 0 0;
+.hero h1 {
+ margin: 0.35rem 0 0;
+ font-size: clamp(1.75rem, 5vw, 3.2rem);
+ line-height: 1.06;
+ letter-spacing: -0.04em;
+}
+
+.hero-copy > p {
+ margin: 0.7rem 0 0;
color: var(--muted);
+ max-width: 64ch;
}
-.teaser-stage {
- margin-top: 0.9rem;
- display: grid;
- grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
- gap: 0.6rem;
- align-items: stretch;
+.hero-actions {
+ margin-top: 1rem;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.62rem;
}
-.teaser-lane {
- border: 1px solid var(--line);
- border-radius: 16px;
- background: rgba(255, 255, 255, 0.95);
- padding: 0.75rem;
+.button {
+ border: 1px solid var(--line-strong);
+ border-radius: 999px;
+ padding: 0.56rem 0.96rem;
+ text-decoration: none;
+ color: var(--text);
+ font-size: 0.82rem;
+ background: rgba(255, 255, 255, 0.04);
+ transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
-.teaser-lane h3 {
- margin: 0;
- font-size: 0.95rem;
+.button.primary {
+ background: linear-gradient(120deg, rgba(61, 224, 193, 0.25), rgba(255, 139, 61, 0.24));
+ border-color: rgba(61, 224, 193, 0.55);
}
-.teaser-arrow {
- align-self: center;
- font-family: "IBM Plex Mono", monospace;
- color: var(--teal);
- font-size: 1.1rem;
+.button:hover {
+ transform: translateY(-1px);
+ border-color: var(--accent);
}
-.chip-stack {
- margin-top: 0.55rem;
+.hero-metrics {
+ margin-top: 1rem;
display: grid;
- gap: 0.42rem;
+ gap: 0.62rem;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
}
-.chip {
- display: inline-flex;
- width: fit-content;
- max-width: 100%;
- font-family: "IBM Plex Mono", monospace;
- font-size: 0.72rem;
- padding: 0.28rem 0.44rem;
- border-radius: 9px;
- border: 1px solid rgba(15, 31, 47, 0.15);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- animation: chip-drift 2.8s ease-in-out infinite;
+.metric {
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ background: var(--surface-1);
+ padding: 0.7rem;
}
-.chip-http {
- background: rgba(255, 95, 46, 0.14);
- animation-delay: 0s;
+.metric strong {
+ display: block;
+ font-size: 0.9rem;
}
-.chip-tls {
- background: rgba(15, 143, 143, 0.14);
- animation-delay: 0.4s;
+.metric small {
+ display: block;
+ margin-top: 0.22rem;
+ color: var(--muted);
+ font-size: 0.72rem;
}
-.chip-ics {
- background: rgba(255, 214, 124, 0.35);
- animation-delay: 0.8s;
+.hero-terminal,
+.terminal {
+ border: 1px solid var(--line-strong);
+ border-radius: 14px;
+ background: #050a12;
+ overflow: hidden;
}
-.teaser-list {
- margin: 0.58rem 0 0;
- padding-left: 1rem;
- display: grid;
- gap: 0.28rem;
+.terminal-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.8rem;
+ padding: 0.5rem 0.72rem;
+ border-bottom: 1px solid rgba(173, 202, 233, 0.17);
+ background: #0b1421;
+ color: #d6e8ff;
+ font-family: "JetBrains Mono", monospace;
+ font-size: 0.72rem;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
}
-.teaser-list li {
- color: var(--muted);
- font-size: 0.85rem;
+.terminal-head button {
+ border: 1px solid rgba(173, 202, 233, 0.36);
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.04);
+ color: #d6e8ff;
+ font-family: "JetBrains Mono", monospace;
+ font-size: 0.69rem;
+ padding: 0.26rem 0.5rem;
+ cursor: pointer;
}
-.teaser-list code {
- color: #1f2a35;
- font-size: 0.76rem;
+pre {
+ margin: 0;
+ max-height: 25rem;
+ overflow: auto;
+ padding: 0.9rem;
}
-.cluster-view {
- margin-top: 0.58rem;
+code {
+ font-family: "JetBrains Mono", monospace;
+ font-size: 0.78rem;
+ line-height: 1.5;
+ color: #cde7ff;
+ white-space: pre;
+}
+
+.position-grid {
+ margin-top: 0.9rem;
display: grid;
- gap: 0.3rem;
+ gap: 0.75rem;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
}
-.cluster-row {
- display: flex;
- justify-content: space-between;
- align-items: center;
+.position-grid article {
border: 1px solid var(--line);
- border-radius: 10px;
- padding: 0.34rem 0.5rem;
- font-family: "IBM Plex Mono", monospace;
- font-size: 0.78rem;
- background: linear-gradient(90deg, rgba(15, 143, 143, 0.11), rgba(255, 214, 124, 0.14));
+ border-radius: 16px;
+ background: var(--surface-1);
+ padding: 0.85rem;
}
-.teaser-terminal {
- margin-top: 0.75rem;
- border: 1px solid var(--line);
- border-radius: 12px;
- overflow: hidden;
+.position-grid h3 {
+ margin: 0;
+ font-size: 1rem;
}
-.teaser-terminal pre {
- background: #131b24;
+.position-grid p {
+ margin: 0.5rem 0 0;
+ color: var(--muted);
+ font-size: 0.9rem;
}
-section {
- margin-top: 1.9rem;
+.flow-steps {
+ margin: 0.9rem 0 0;
+ padding: 0;
+ list-style: none;
+ display: grid;
+ gap: 0.6rem;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
}
-.demo-head h2,
-.use-cases h2,
-.deploy h2 {
- margin: 0;
- font-size: 1.4rem;
+.flow-steps li {
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ background: linear-gradient(150deg, rgba(61, 224, 193, 0.08), rgba(255, 139, 61, 0.08));
+ padding: 0.72rem;
}
-.demo-head p {
- margin: 0.45rem 0 0;
+.flow-steps strong {
+ display: block;
+ font-size: 0.93rem;
+}
+
+.flow-steps span {
+ margin-top: 0.3rem;
+ display: block;
color: var(--muted);
+ font-size: 0.82rem;
}
-.scenario-tabs {
- margin-top: 0.95rem;
- display: flex;
- flex-wrap: wrap;
- gap: 0.65rem;
+.scenario-layout {
+ margin-top: 0.9rem;
+ display: grid;
+ grid-template-columns: 320px minmax(0, 1fr);
+ gap: 0.8rem;
}
-.scenario-tabs button {
+.scenario-list {
+ display: grid;
+ gap: 0.55rem;
+ align-content: start;
+}
+
+.scenario-button {
+ text-align: left;
border: 1px solid var(--line);
- border-radius: 999px;
- background: #fff;
- font-family: "IBM Plex Mono", monospace;
- font-size: 0.78rem;
- padding: 0.42rem 0.78rem;
- color: var(--ink);
+ background: var(--surface-1);
+ color: var(--text);
+ border-radius: 12px;
+ padding: 0.64rem;
cursor: pointer;
+ transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
-.scenario-tabs button[aria-selected="true"] {
- border-color: var(--accent);
- background: var(--accent-soft);
+.scenario-button strong {
+ display: block;
+ font-size: 0.86rem;
}
-.scenario-panel {
- margin-top: 0.9rem;
+.scenario-button small {
+ display: block;
+ margin-top: 0.24rem;
+ color: var(--muted);
+ font-size: 0.72rem;
+}
+
+.scenario-button[aria-selected="true"] {
+ border-color: rgba(61, 224, 193, 0.64);
+ background: linear-gradient(140deg, rgba(61, 224, 193, 0.15), rgba(255, 139, 61, 0.1));
+}
+
+.scenario-button:hover {
+ transform: translateY(-1px);
+ border-color: var(--line-strong);
+}
+
+.scenario-view {
border: 1px solid var(--line);
- border-radius: 22px;
- background: rgba(255, 255, 255, 0.82);
- padding: 1rem;
+ border-radius: 18px;
+ background: var(--surface-1);
+ padding: 0.95rem;
}
-.scenario-panel h3 {
+.scenario-view h3 {
margin: 0;
+ font-size: 1.22rem;
}
-.scenario-panel p {
- margin: 0.52rem 0 0.8rem;
+.scenario-view p {
+ margin: 0.42rem 0 0;
color: var(--muted);
}
-.reel-tabs {
- margin-top: 0.95rem;
+.meta {
+ margin-top: 0.65rem;
display: flex;
flex-wrap: wrap;
- gap: 0.65rem;
+ gap: 0.42rem;
}
-.reel-tabs button {
+.chip {
border: 1px solid var(--line);
border-radius: 999px;
- background: #fff;
- font-family: "IBM Plex Mono", monospace;
- font-size: 0.78rem;
- padding: 0.42rem 0.78rem;
- color: var(--ink);
- cursor: pointer;
+ padding: 0.22rem 0.52rem;
+ font-family: "JetBrains Mono", monospace;
+ font-size: 0.68rem;
+ color: #cbddf3;
+ background: rgba(255, 255, 255, 0.03);
}
-.reel-tabs button[aria-selected="true"] {
- border-color: var(--teal);
- background: rgba(15, 143, 143, 0.15);
+.tabs {
+ margin-top: 0.72rem;
+ display: flex;
+ gap: 0.45rem;
+ flex-wrap: wrap;
}
-.reel-player {
- margin-top: 0.9rem;
+.tab {
border: 1px solid var(--line);
- border-radius: 22px;
- background: rgba(255, 255, 255, 0.82);
- padding: 1rem;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.03);
+ color: var(--text);
+ padding: 0.28rem 0.64rem;
+ font-family: "JetBrains Mono", monospace;
+ font-size: 0.72rem;
+ cursor: pointer;
+}
+
+.tab[aria-selected="true"] {
+ border-color: rgba(61, 224, 193, 0.62);
+ background: rgba(61, 224, 193, 0.14);
+}
+
+.data-links {
+ margin-top: 0.62rem;
+ font-size: 0.76rem;
}
-.reel-player pre {
- min-height: 14rem;
- max-height: 24rem;
- background: #131b24;
+.data-links a {
+ color: #7dd3ff;
+ text-decoration: none;
}
-.stats-mode-grid {
- margin-top: 0.95rem;
+.loop-layout {
+ margin-top: 0.9rem;
display: grid;
- gap: 0.9rem;
- grid-template-columns: 1fr 1.3fr;
+ grid-template-columns: 320px minmax(0, 1fr);
+ gap: 0.8rem;
}
-.stats-legend,
-.stats-viz {
+.loop-steps {
+ display: grid;
+ gap: 0.52rem;
+}
+
+.loop-step {
border: 1px solid var(--line);
- border-radius: 16px;
- background: rgba(255, 255, 255, 0.84);
- padding: 0.85rem;
+ background: var(--surface-1);
+ border-radius: 12px;
+ padding: 0.62rem;
+ cursor: pointer;
}
-.stats-legend h3,
-.stats-viz h3 {
- margin: 0;
- font-size: 1rem;
+.loop-step[aria-selected="true"] {
+ border-color: rgba(255, 139, 61, 0.7);
+ background: linear-gradient(140deg, rgba(255, 139, 61, 0.17), rgba(61, 224, 193, 0.08));
}
-.stats-legend ul {
- margin: 0.6rem 0 0;
- padding-left: 1rem;
- display: grid;
- gap: 0.4rem;
+.loop-step strong {
+ display: block;
+ font-size: 0.88rem;
+}
+
+.loop-step small {
+ display: block;
+ margin-top: 0.24rem;
color: var(--muted);
+ font-family: "JetBrains Mono", monospace;
+ font-size: 0.7rem;
}
-.stats-legend li {
- font-size: 0.9rem;
+.loop-detail {
+ border: 1px solid var(--line);
+ border-radius: 18px;
+ background: var(--surface-1);
+ padding: 0.95rem;
}
-.stats-legend code {
- color: #1f2a35;
- font-size: 0.78rem;
+.loop-detail h3 {
+ margin: 0;
}
-.stats-note {
- margin: 0.75rem 0 0;
+.loop-detail p {
+ margin: 0.5rem 0 0;
color: var(--muted);
- font-size: 0.9rem;
}
-.stats-bars {
- margin-top: 0.7rem;
+.loop-bars {
+ margin-top: 0.75rem;
display: grid;
- gap: 0.5rem;
+ gap: 0.46rem;
}
-.stats-bar {
+.bar-row {
display: grid;
- gap: 0.28rem;
+ gap: 0.26rem;
}
-.stats-bar-head {
+.bar-head {
display: flex;
justify-content: space-between;
- font-family: "IBM Plex Mono", monospace;
- font-size: 0.74rem;
- color: var(--ink);
+ font-family: "JetBrains Mono", monospace;
+ font-size: 0.72rem;
}
-.stats-bar-track {
- width: 100%;
- height: 8px;
- border-radius: 999px;
+.bar-track {
border: 1px solid var(--line);
- background: rgba(15, 31, 47, 0.06);
+ border-radius: 999px;
+ height: 8px;
overflow: hidden;
+ background: rgba(255, 255, 255, 0.05);
}
-.stats-bar-fill {
+.bar-fill {
height: 100%;
- border-radius: 999px;
- background: linear-gradient(90deg, var(--teal), var(--accent));
+ border-radius: inherit;
+ background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
-.code-wrap {
- margin-top: 0.8rem;
- border: 1px solid var(--line);
- border-radius: 14px;
- background: #131b24;
- overflow: hidden;
+.terminal.compact pre {
+ max-height: 17rem;
}
-.code-head {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 0.5rem 0.7rem;
- background: #1f2a35;
- color: #d9e5f2;
- font-family: "IBM Plex Mono", monospace;
- font-size: 0.72rem;
- letter-spacing: 0.08em;
- text-transform: uppercase;
+.llm-grid {
+ margin-top: 0.9rem;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 0.8rem;
}
-.code-head button {
- border: 1px solid #395167;
- border-radius: 8px;
- background: #111821;
- color: #d9e5f2;
- font-family: "IBM Plex Mono", monospace;
- font-size: 0.72rem;
- padding: 0.3rem 0.52rem;
- cursor: pointer;
+.llm-card {
+ border: 1px solid var(--line);
+ border-radius: 16px;
+ background: var(--surface-1);
+ padding: 0.85rem;
}
-pre {
+.llm-card h3 {
margin: 0;
- padding: 0.88rem 0.95rem;
- overflow: auto;
}
-code {
- font-family: "IBM Plex Mono", monospace;
- color: #d9e5f2;
- font-size: 0.84rem;
- line-height: 1.45;
+.llm-card p,
+.llm-card li {
+ color: var(--muted);
+ font-size: 0.88rem;
+}
+
+.llm-card ul {
+ margin: 0.55rem 0 0;
+ padding-left: 1rem;
}
-.cards {
- margin-top: 0.95rem;
+.delta-grid {
+ margin-top: 0.52rem;
display: grid;
- gap: 0.9rem;
- grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 0.5rem;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
}
-.cards article {
+.delta {
border: 1px solid var(--line);
- border-radius: 16px;
- background: rgba(255, 255, 255, 0.84);
- padding: 0.85rem;
+ border-radius: 12px;
+ background: rgba(255, 255, 255, 0.03);
+ padding: 0.55rem;
}
-.cards h3 {
- margin: 0;
- font-size: 1rem;
+.delta strong {
+ display: block;
+ font-size: 0.84rem;
}
-.cards p {
- margin: 0.4rem 0 0;
+.delta span {
color: var(--muted);
- font-size: 0.95rem;
+ font-family: "JetBrains Mono", monospace;
+ font-size: 0.72rem;
}
-.deploy ol {
- margin: 0.85rem 0 0;
- padding-left: 1.2rem;
+.risk {
+ margin-top: 0.7rem;
+}
+
+.install .terminal {
+ margin-top: 0.8rem;
+}
+
+.sources {
+ margin-top: 0.8rem;
+ font-size: 0.84rem;
color: var(--muted);
- display: grid;
- gap: 0.35rem;
}
-.deploy code {
- color: #f5bd7d;
+.sources a {
+ color: #7dd3ff;
+ text-decoration: none;
}
-@keyframes rise-in {
- from {
- transform: translateY(10px);
- opacity: 0;
- }
- to {
- transform: translateY(0);
- opacity: 1;
- }
+footer {
+ width: min(1160px, 92vw);
+ margin: 0 auto 1.7rem;
+ color: var(--muted);
+ font-size: 0.78rem;
+ text-align: center;
}
-@keyframes chip-drift {
- 0% {
- transform: translateX(0);
- }
- 50% {
- transform: translateX(5px);
+@media (max-width: 1050px) {
+ .hero,
+ .scenario-layout,
+ .loop-layout,
+ .llm-grid {
+ grid-template-columns: 1fr;
}
- 100% {
- transform: translateX(0);
+
+ .scenario-list,
+ .loop-steps {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
-@media (max-width: 900px) {
- .stats,
- .cards,
- .stats-mode-grid {
- grid-template-columns: 1fr;
+@media (max-width: 760px) {
+ .topbar {
+ flex-direction: column;
+ align-items: flex-start;
}
- .teaser-stage {
+ .hero-metrics,
+ .position-grid,
+ .flow-steps,
+ .delta-grid,
+ .scenario-list,
+ .loop-steps {
grid-template-columns: 1fr;
}
- .teaser-arrow {
- transform: rotate(90deg);
- justify-self: center;
+ section {
+ padding: 1rem;
}
- main {
- padding-top: 1.3rem;
+ .topbar nav {
+ width: 100%;
}
}