index.html
file-level
1
files
1
commits
0
hotspots
0
🧊 dead
0
💥 blast risk
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 | <meta name="description" content="Knowtation — Markdown vault you own, semantic search, MCP/CLI for agents; proposals need human approval; memory consolidation; hosted Hub or self-host."> |
| 7 | <meta name="theme-color" content="#0a192f"> |
| 8 | <link rel="icon" href="/assets/favicon.png" type="image/png" sizes="32x32"> |
| 9 | <title>Knowtation — Know and own your data</title> |
| 10 | <script> |
| 11 | (function () { |
| 12 | try { |
| 13 | var t = localStorage.getItem('knowtation-theme'); |
| 14 | if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t); |
| 15 | } catch (e) {} |
| 16 | })(); |
| 17 | </script> |
| 18 | <style> |
| 19 | :root { |
| 20 | --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; |
| 21 | --bg: #0a192f; |
| 22 | --surface: #0d2138; |
| 23 | --surface-elevated: #152a45; |
| 24 | --text: #fafafa; |
| 25 | --text-muted: #a1a1a1; |
| 26 | --accent: #89cff0; |
| 27 | --accent-dim: rgba(137, 207, 240, 0.18); |
| 28 | --accent-soft: rgba(137, 207, 240, 0.1); |
| 29 | --accent-glow: color-mix(in srgb, var(--accent) 32%, transparent); |
| 30 | --cta-on-accent: #0a1628; |
| 31 | --border: #2a3f5c; |
| 32 | --success: #34d399; |
| 33 | --radius: 12px; |
| 34 | --radius-lg: 20px; |
| 35 | --hero-grey-lines: #e4e4e4; |
| 36 | } |
| 37 | html[data-theme="light"] { |
| 38 | --bg: #f5f7fb; |
| 39 | --surface: #ffffff; |
| 40 | --surface-elevated: #eef2f8; |
| 41 | --text: #0f172a; |
| 42 | --text-muted: #556070; |
| 43 | --border: #d8dee9; |
| 44 | --accent: #5eb8e8; |
| 45 | --accent-dim: rgba(94, 184, 232, 0.2); |
| 46 | --accent-soft: rgba(94, 184, 232, 0.12); |
| 47 | --accent-glow: color-mix(in srgb, var(--accent) 28%, transparent); |
| 48 | --cta-on-accent: #0a1628; |
| 49 | --hero-grey-lines: #4a5a6a; |
| 50 | } |
| 51 | * { box-sizing: border-box; } |
| 52 | html { scroll-behavior: smooth; } |
| 53 | body { |
| 54 | margin: 0; |
| 55 | font-family: var(--font-sans); |
| 56 | background: var(--bg); |
| 57 | color: var(--text); |
| 58 | line-height: 1.65; |
| 59 | font-size: 1rem; |
| 60 | -webkit-font-smoothing: antialiased; |
| 61 | } |
| 62 | .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } |
| 63 | .wide { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } |
| 64 | |
| 65 | .landing-header { |
| 66 | display: flex; |
| 67 | justify-content: flex-end; |
| 68 | align-items: center; |
| 69 | padding: 0.75rem 1.5rem; |
| 70 | gap: 0.75rem; |
| 71 | flex-wrap: wrap; |
| 72 | border-bottom: 1px solid var(--border); |
| 73 | } |
| 74 | .landing-header-start { |
| 75 | display: flex; |
| 76 | align-items: center; |
| 77 | flex-wrap: wrap; |
| 78 | gap: 0.35rem; |
| 79 | margin-right: auto; |
| 80 | } |
| 81 | .landing-header-social { |
| 82 | display: flex; |
| 83 | align-items: center; |
| 84 | gap: 0.15rem; |
| 85 | } |
| 86 | .social-icon-link { |
| 87 | display: inline-flex; |
| 88 | align-items: center; |
| 89 | justify-content: center; |
| 90 | width: 2.25rem; |
| 91 | height: 2.25rem; |
| 92 | color: var(--text-muted); |
| 93 | border-radius: 10px; |
| 94 | border: 1px solid transparent; |
| 95 | transition: color 0.15s, border-color 0.15s, background 0.15s; |
| 96 | } |
| 97 | .social-icon-link:hover { |
| 98 | color: var(--accent); |
| 99 | border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); |
| 100 | background: var(--surface-elevated); |
| 101 | } |
| 102 | .social-icon-link svg { |
| 103 | width: 1.15rem; |
| 104 | height: 1.15rem; |
| 105 | fill: currentColor; |
| 106 | } |
| 107 | .theme-toggle { |
| 108 | display: inline-flex; |
| 109 | align-items: center; |
| 110 | gap: 0.4rem; |
| 111 | padding: 0.45rem 0.85rem; |
| 112 | font-size: 0.85rem; |
| 113 | font-weight: 600; |
| 114 | font-family: var(--font-sans); |
| 115 | color: var(--text-muted); |
| 116 | background: var(--surface); |
| 117 | border: 1px solid var(--border); |
| 118 | border-radius: 10px; |
| 119 | cursor: pointer; |
| 120 | transition: color 0.15s, border-color 0.15s, background 0.15s; |
| 121 | } |
| 122 | .theme-toggle:hover { |
| 123 | color: var(--accent); |
| 124 | border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); |
| 125 | background: var(--surface-elevated); |
| 126 | } |
| 127 | .theme-toggle .theme-toggle-icon { font-size: 1rem; line-height: 1; } |
| 128 | .landing-header .cta-signin { |
| 129 | padding: 0.5rem 1rem; |
| 130 | font-size: 0.9rem; |
| 131 | } |
| 132 | |
| 133 | .hero { |
| 134 | padding: 2rem 0 1.5rem; |
| 135 | text-align: center; |
| 136 | } |
| 137 | .hero-title-main-only { |
| 138 | font-family: var(--font-sans); |
| 139 | font-size: clamp(2.1rem, 6vw, 3rem); |
| 140 | font-weight: 600; |
| 141 | margin: 0 0 0.5rem; |
| 142 | letter-spacing: -0.02em; |
| 143 | line-height: 1.2; |
| 144 | } |
| 145 | .hero-brand-sub { |
| 146 | font-size: clamp(1.26rem, 2.4vw, 1.5rem); |
| 147 | color: var(--text-muted); |
| 148 | margin: 0 auto 1.15rem; |
| 149 | max-width: 30em; |
| 150 | font-weight: 400; |
| 151 | line-height: 1.45; |
| 152 | } |
| 153 | .hero-brand-sub-accent { |
| 154 | color: var(--accent); |
| 155 | } |
| 156 | .hero-messages { |
| 157 | max-width: 38rem; |
| 158 | margin: 0 auto 1.5rem; |
| 159 | text-align: center; |
| 160 | } |
| 161 | .hero-messages p { |
| 162 | margin: 0 0 0.5rem; |
| 163 | font-size: 1.1rem; |
| 164 | color: var(--hero-grey-lines); |
| 165 | line-height: 1.55; |
| 166 | font-weight: 400; |
| 167 | } |
| 168 | .hero-messages p:last-child { margin-bottom: 0; } |
| 169 | |
| 170 | .deploy-headlines { |
| 171 | text-align: center; |
| 172 | max-width: 42rem; |
| 173 | margin: 0 auto 2.25rem; |
| 174 | padding: 2.5rem 1.5rem 2.35rem; |
| 175 | } |
| 176 | .deploy-headlines .deploy-title { |
| 177 | font-family: var(--font-sans); |
| 178 | font-size: clamp(1.05rem, 2.2vw, 1.28rem); |
| 179 | font-weight: 700; |
| 180 | color: var(--text); |
| 181 | line-height: 1.4; |
| 182 | margin: 0; |
| 183 | } |
| 184 | |
| 185 | /* Overview video: full-width within .wide, 16:9, continues with channel uploads playlist */ |
| 186 | .landing-overview-video { |
| 187 | margin: 0 auto 0; |
| 188 | } |
| 189 | .landing-video-frame { |
| 190 | position: relative; |
| 191 | width: 100%; |
| 192 | aspect-ratio: 16 / 9; |
| 193 | border-radius: var(--radius-lg); |
| 194 | overflow: hidden; |
| 195 | border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); |
| 196 | background: #0a0f18; |
| 197 | box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 12%, transparent); |
| 198 | } |
| 199 | .landing-video-frame iframe { |
| 200 | position: absolute; |
| 201 | inset: 0; |
| 202 | width: 100%; |
| 203 | height: 100%; |
| 204 | border: 0; |
| 205 | } |
| 206 | .landing-channel-strip { |
| 207 | margin-top: 1.25rem; |
| 208 | } |
| 209 | .landing-channel-strip-title { |
| 210 | font-family: var(--font-sans); |
| 211 | font-size: 0.88rem; |
| 212 | font-weight: 600; |
| 213 | color: var(--text-muted); |
| 214 | text-transform: uppercase; |
| 215 | letter-spacing: 0.06em; |
| 216 | margin: 0 0 0.65rem; |
| 217 | } |
| 218 | .landing-channel-scroll { |
| 219 | display: flex; |
| 220 | gap: 0.75rem; |
| 221 | overflow-x: auto; |
| 222 | padding-bottom: 0.35rem; |
| 223 | scroll-snap-type: x mandatory; |
| 224 | -webkit-overflow-scrolling: touch; |
| 225 | } |
| 226 | .landing-channel-scroll::-webkit-scrollbar { |
| 227 | height: 6px; |
| 228 | } |
| 229 | .landing-channel-scroll::-webkit-scrollbar-thumb { |
| 230 | background: color-mix(in srgb, var(--accent) 45%, var(--border)); |
| 231 | border-radius: 3px; |
| 232 | } |
| 233 | .landing-channel-card { |
| 234 | flex: 0 0 min(240px, 72vw); |
| 235 | scroll-snap-align: start; |
| 236 | border-radius: 10px; |
| 237 | overflow: hidden; |
| 238 | border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); |
| 239 | background: var(--surface-elevated); |
| 240 | text-decoration: none; |
| 241 | color: var(--text); |
| 242 | transition: border-color 0.15s, transform 0.15s; |
| 243 | } |
| 244 | .landing-channel-card:hover { |
| 245 | border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); |
| 246 | transform: translateY(-2px); |
| 247 | } |
| 248 | .landing-channel-card:focus-visible { |
| 249 | outline: 2px solid var(--accent); |
| 250 | outline-offset: 2px; |
| 251 | } |
| 252 | .landing-channel-card img { |
| 253 | display: block; |
| 254 | width: 100%; |
| 255 | aspect-ratio: 16 / 9; |
| 256 | object-fit: cover; |
| 257 | background: #111; |
| 258 | } |
| 259 | .landing-channel-card span { |
| 260 | display: block; |
| 261 | padding: 0.5rem 0.65rem 0.65rem; |
| 262 | font-size: 0.88rem; |
| 263 | font-weight: 600; |
| 264 | line-height: 1.35; |
| 265 | } |
| 266 | .landing-channel-card--subscribe span { |
| 267 | color: var(--accent); |
| 268 | } |
| 269 | .landing-channel-card--text { |
| 270 | display: flex; |
| 271 | align-items: center; |
| 272 | justify-content: center; |
| 273 | min-height: 8.5rem; |
| 274 | background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%); |
| 275 | } |
| 276 | .landing-channel-card--text span { |
| 277 | padding: 1rem; |
| 278 | text-align: center; |
| 279 | } |
| 280 | |
| 281 | .spotlight-intro { |
| 282 | text-align: center; |
| 283 | max-width: 52rem; |
| 284 | margin: 5.5rem auto 1.75rem; |
| 285 | padding: 0 1.5rem; |
| 286 | } |
| 287 | .spotlight-intro-title { |
| 288 | font-family: var(--font-sans); |
| 289 | font-size: clamp(1.65rem, 4.8vw, 2.65rem); |
| 290 | font-weight: 700; |
| 291 | color: var(--accent); |
| 292 | line-height: 1.22; |
| 293 | margin: 0 0 0.85rem; |
| 294 | letter-spacing: -0.025em; |
| 295 | text-wrap: balance; |
| 296 | } |
| 297 | .spotlight-intro-subtitle { |
| 298 | font-family: var(--font-sans); |
| 299 | font-size: clamp(0.95rem, 2.1vw, 1.12rem); |
| 300 | font-weight: 500; |
| 301 | color: var(--hero-grey-lines); |
| 302 | line-height: 1.5; |
| 303 | margin: 0 auto; |
| 304 | max-width: 38rem; |
| 305 | text-wrap: balance; |
| 306 | } |
| 307 | html[data-theme="light"] .spotlight-intro-subtitle { |
| 308 | color: var(--text-muted); |
| 309 | } |
| 310 | |
| 311 | .spotlight-pair { |
| 312 | display: grid; |
| 313 | grid-template-columns: 1fr 1fr; |
| 314 | gap: 1.25rem; |
| 315 | max-width: 1100px; |
| 316 | margin: 0 auto 2rem; |
| 317 | padding: 0 1.5rem; |
| 318 | } |
| 319 | @media (max-width: 768px) { |
| 320 | .spotlight-pair { grid-template-columns: 1fr; } |
| 321 | } |
| 322 | .spotlight-card { |
| 323 | padding: 1.5rem 1.35rem; |
| 324 | text-align: center; |
| 325 | border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); |
| 326 | border-radius: var(--radius-lg); |
| 327 | background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%); |
| 328 | } |
| 329 | .spotlight-card-icon { |
| 330 | font-size: 2.1rem; |
| 331 | line-height: 1; |
| 332 | margin-bottom: 0.45rem; |
| 333 | } |
| 334 | .spotlight-card h2 { |
| 335 | font-family: var(--font-sans); |
| 336 | font-size: clamp(1.05rem, 2.2vw, 1.25rem); |
| 337 | font-weight: 700; |
| 338 | margin: 0 0 0.55rem; |
| 339 | color: var(--text); |
| 340 | } |
| 341 | .spotlight-card p { |
| 342 | margin: 0; |
| 343 | font-size: 0.95rem; |
| 344 | color: var(--text-muted); |
| 345 | line-height: 1.6; |
| 346 | } |
| 347 | .spotlight-card a { |
| 348 | color: var(--accent); |
| 349 | text-decoration: none; |
| 350 | font-weight: 600; |
| 351 | } |
| 352 | .spotlight-card a:hover { text-decoration: underline; } |
| 353 | |
| 354 | .cta { |
| 355 | display: inline-flex; |
| 356 | align-items: center; |
| 357 | gap: 0.5rem; |
| 358 | background: var(--accent); |
| 359 | color: var(--cta-on-accent); |
| 360 | padding: 0.85rem 1.75rem; |
| 361 | border-radius: 10px; |
| 362 | font-weight: 600; |
| 363 | font-size: 0.95rem; |
| 364 | text-decoration: none; |
| 365 | transition: transform 0.15s, box-shadow 0.15s; |
| 366 | } |
| 367 | .cta:hover { |
| 368 | transform: translateY(-1px); |
| 369 | box-shadow: 0 8px 24px var(--accent-glow); |
| 370 | } |
| 371 | .cta-secondary { |
| 372 | background: transparent; |
| 373 | color: var(--accent); |
| 374 | border: 1px solid var(--accent); |
| 375 | } |
| 376 | .cta-secondary:hover { |
| 377 | background: var(--accent-soft); |
| 378 | box-shadow: none; |
| 379 | } |
| 380 | .hero .cta-row .cta-secondary { |
| 381 | border-color: var(--accent); |
| 382 | } |
| 383 | .cta-row { |
| 384 | display: flex; |
| 385 | flex-wrap: wrap; |
| 386 | justify-content: center; |
| 387 | align-items: center; |
| 388 | gap: 0.75rem; |
| 389 | margin-top: 1.25rem; |
| 390 | } |
| 391 | .hero .cta-row { |
| 392 | display: grid; |
| 393 | grid-template-columns: 1fr 1fr; |
| 394 | align-items: stretch; |
| 395 | width: 100%; |
| 396 | max-width: 26rem; |
| 397 | margin-left: auto; |
| 398 | margin-right: auto; |
| 399 | gap: 0.75rem; |
| 400 | } |
| 401 | .hero .cta-row .cta { |
| 402 | justify-content: center; |
| 403 | text-align: center; |
| 404 | width: 100%; |
| 405 | box-sizing: border-box; |
| 406 | padding-left: 1rem; |
| 407 | padding-right: 1rem; |
| 408 | } |
| 409 | @media (max-width: 480px) { |
| 410 | .hero .cta-row { |
| 411 | grid-template-columns: 1fr; |
| 412 | max-width: 20rem; |
| 413 | } |
| 414 | } |
| 415 | |
| 416 | .badge { |
| 417 | display: inline-flex; |
| 418 | align-items: center; |
| 419 | gap: 0.4rem; |
| 420 | background: var(--accent-dim); |
| 421 | color: var(--accent); |
| 422 | padding: 0.4rem 1rem; |
| 423 | border-radius: 999px; |
| 424 | font-size: 0.8rem; |
| 425 | font-weight: 600; |
| 426 | text-decoration: none; |
| 427 | letter-spacing: 0.02em; |
| 428 | } |
| 429 | .badge:hover { |
| 430 | background: color-mix(in srgb, var(--accent) 28%, transparent); |
| 431 | color: var(--accent); |
| 432 | } |
| 433 | .badge-wrap .badge { |
| 434 | color: var(--text-muted); |
| 435 | } |
| 436 | .badge-wrap .badge:hover { |
| 437 | color: var(--text-muted); |
| 438 | } |
| 439 | .badge-wrap { text-align: center; padding: 1rem 0 0.5rem; } |
| 440 | |
| 441 | /* Band B — three steps only, after hero + GitHub badge, before deploy headlines */ |
| 442 | .band-b-path { |
| 443 | margin: 0 auto; |
| 444 | padding: 0.5rem 1.5rem 1.75rem; |
| 445 | } |
| 446 | .band-b-path-inner { |
| 447 | max-width: 56rem; |
| 448 | margin: 0 auto; |
| 449 | border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); |
| 450 | border-radius: var(--radius-lg); |
| 451 | background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface) 100%); |
| 452 | padding: 1.2rem 1.15rem 1.35rem; |
| 453 | } |
| 454 | .band-b-steps { |
| 455 | display: grid; |
| 456 | grid-template-columns: repeat(3, 1fr); |
| 457 | gap: 0.85rem; |
| 458 | list-style: none; |
| 459 | margin: 0; |
| 460 | padding: 0; |
| 461 | align-items: stretch; |
| 462 | } |
| 463 | @media (max-width: 720px) { |
| 464 | .band-b-steps { grid-template-columns: 1fr; } |
| 465 | } |
| 466 | .band-b-step { |
| 467 | margin: 0; |
| 468 | padding: 1rem 0.9rem 1.05rem; |
| 469 | border-radius: var(--radius); |
| 470 | border: 1px solid var(--border); |
| 471 | background: var(--surface); |
| 472 | display: flex; |
| 473 | flex-direction: column; |
| 474 | min-height: 100%; |
| 475 | } |
| 476 | .band-b-step-head { |
| 477 | display: flex; |
| 478 | flex-direction: row; |
| 479 | align-items: center; |
| 480 | gap: 0.5rem; |
| 481 | margin: 0 0 0.5rem; |
| 482 | } |
| 483 | .band-b-step-marker { |
| 484 | flex-shrink: 0; |
| 485 | font-family: var(--font-sans); |
| 486 | font-size: clamp(1.5rem, 3.8vw, 2.1rem); |
| 487 | font-weight: 700; |
| 488 | line-height: 1; |
| 489 | color: var(--accent); |
| 490 | letter-spacing: -0.03em; |
| 491 | } |
| 492 | .band-b-step-title { |
| 493 | font-family: var(--font-sans); |
| 494 | font-size: clamp(0.95rem, 2vw, 1.05rem); |
| 495 | font-weight: 700; |
| 496 | margin: 0; |
| 497 | color: var(--text); |
| 498 | line-height: 1.25; |
| 499 | } |
| 500 | .band-b-step p { |
| 501 | flex: 1 1 auto; |
| 502 | margin: 0; |
| 503 | font-size: 0.86rem; |
| 504 | color: var(--text-muted); |
| 505 | line-height: 1.55; |
| 506 | min-height: calc(2 * 1.55 * 0.86rem); |
| 507 | } |
| 508 | .band-b-step-links { |
| 509 | margin-top: auto; |
| 510 | padding-top: 0.55rem; |
| 511 | display: flex; |
| 512 | flex-direction: column; |
| 513 | align-items: flex-start; |
| 514 | gap: 0.35rem; |
| 515 | } |
| 516 | .band-b-step-link { |
| 517 | font-size: 0.86rem; |
| 518 | font-weight: 600; |
| 519 | color: var(--accent); |
| 520 | text-decoration: none; |
| 521 | border: none; |
| 522 | background: none; |
| 523 | padding: 0; |
| 524 | } |
| 525 | .band-b-step-link:hover { |
| 526 | text-decoration: underline; |
| 527 | } |
| 528 | .band-b-step-link:focus-visible { |
| 529 | outline: 2px solid var(--accent); |
| 530 | outline-offset: 2px; |
| 531 | border-radius: 4px; |
| 532 | } |
| 533 | .band-b-step-link--secondary { |
| 534 | font-weight: 500; |
| 535 | margin-top: 0.4rem; |
| 536 | color: color-mix(in srgb, var(--accent) 88%, var(--text-muted)); |
| 537 | } |
| 538 | .band-b-step-link--secondary:hover { |
| 539 | color: var(--accent); |
| 540 | } |
| 541 | |
| 542 | /* Ecosystem rings (hero graphic) */ |
| 543 | .landing-ecosystem { |
| 544 | position: relative; |
| 545 | margin: 1.5rem auto 0; |
| 546 | max-width: 360px; |
| 547 | padding: 1rem; |
| 548 | isolation: isolate; |
| 549 | } |
| 550 | .landing-ecosystem::before { |
| 551 | content: ""; |
| 552 | position: absolute; |
| 553 | left: 50%; |
| 554 | top: 50%; |
| 555 | width: min(100%, 340px); |
| 556 | height: min(100%, 340px); |
| 557 | max-width: 340px; |
| 558 | max-height: 340px; |
| 559 | transform: translate(-50%, -50%); |
| 560 | border-radius: 50%; |
| 561 | background: radial-gradient( |
| 562 | ellipse 58% 58% at 50% 50%, |
| 563 | color-mix(in srgb, var(--accent) 16%, transparent) 0%, |
| 564 | transparent 72% |
| 565 | ); |
| 566 | pointer-events: none; |
| 567 | z-index: 0; |
| 568 | } |
| 569 | .landing-ecosystem-rings { |
| 570 | position: relative; |
| 571 | width: 320px; |
| 572 | height: 320px; |
| 573 | margin: 0 auto; |
| 574 | z-index: 1; |
| 575 | filter: |
| 576 | drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 28%, transparent)) |
| 577 | drop-shadow(0 0 32px color-mix(in srgb, var(--accent) 12%, transparent)); |
| 578 | } |
| 579 | .landing-ecosystem-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } |
| 580 | .landing-ecosystem-center { |
| 581 | position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); |
| 582 | display: flex; flex-direction: column; align-items: center; gap: 0.35rem; z-index: 2; |
| 583 | padding: 1.25rem; min-width: 100px; min-height: 90px; box-sizing: border-box; |
| 584 | } |
| 585 | .landing-ecosystem-core-icon { |
| 586 | font-size: 2.75rem; |
| 587 | line-height: 1; |
| 588 | filter: grayscale(0.15) |
| 589 | drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 40%, transparent)) |
| 590 | drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 18%, transparent)); |
| 591 | } |
| 592 | .landing-ecosystem-core-label { |
| 593 | color: var(--accent); |
| 594 | font-weight: 600; |
| 595 | font-size: 0.95rem; |
| 596 | text-shadow: |
| 597 | 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent), |
| 598 | 0 0 24px color-mix(in srgb, var(--accent) 20%, transparent); |
| 599 | } |
| 600 | .landing-ecosystem-icon { |
| 601 | position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin-left: -18px; margin-top: -18px; |
| 602 | display: flex; align-items: center; justify-content: center; font-size: 1.35rem; |
| 603 | transform-origin: center center; z-index: 1; opacity: 0.9; |
| 604 | } |
| 605 | .landing-ecosystem-icon-1 { transform: rotate(0deg) translate(0, -90px); } |
| 606 | .landing-ecosystem-icon-2 { transform: rotate(45deg) translate(0, -90px); } |
| 607 | .landing-ecosystem-icon-3 { transform: rotate(90deg) translate(0, -90px); } |
| 608 | .landing-ecosystem-icon-4 { transform: rotate(135deg) translate(0, -90px); } |
| 609 | .landing-ecosystem-icon-5 { transform: rotate(180deg) translate(0, -90px); } |
| 610 | .landing-ecosystem-icon-6 { transform: rotate(225deg) translate(0, -90px); } |
| 611 | .landing-ecosystem-icon-7 { transform: rotate(270deg) translate(0, -90px); } |
| 612 | .landing-ecosystem-icon-8 { transform: rotate(315deg) translate(0, -90px); } |
| 613 | .landing-ecosystem-icon-9 { transform: rotate(0deg) translate(0, -135px); } |
| 614 | .landing-ecosystem-icon-10 { transform: rotate(30deg) translate(0, -135px); } |
| 615 | .landing-ecosystem-icon-11 { transform: rotate(60deg) translate(0, -135px); } |
| 616 | .landing-ecosystem-icon-12 { transform: rotate(90deg) translate(0, -135px); } |
| 617 | .landing-ecosystem-icon-13 { transform: rotate(120deg) translate(0, -135px); } |
| 618 | .landing-ecosystem-icon-14 { transform: rotate(150deg) translate(0, -135px); } |
| 619 | .landing-ecosystem-icon-15 { transform: rotate(180deg) translate(0, -135px); } |
| 620 | .landing-ecosystem-icon-16 { transform: rotate(210deg) translate(0, -135px); } |
| 621 | .landing-ecosystem-icon-17 { transform: rotate(240deg) translate(0, -135px); } |
| 622 | .landing-ecosystem-icon-18 { transform: rotate(270deg) translate(0, -135px); } |
| 623 | .landing-ecosystem-icon-19 { transform: rotate(300deg) translate(0, -135px); } |
| 624 | .landing-ecosystem-icon-20 { transform: rotate(330deg) translate(0, -135px); } |
| 625 | |
| 626 | /* Vertical flow */ |
| 627 | .flow-intro-block { |
| 628 | text-align: center; |
| 629 | padding: 2rem 1.5rem 1rem; |
| 630 | max-width: 44rem; |
| 631 | margin: 0 auto; |
| 632 | } |
| 633 | .flow-intro-block--after-ecosystem { |
| 634 | padding-top: 2.75rem; |
| 635 | padding-bottom: 1.5rem; |
| 636 | } |
| 637 | .flow-intro-title { |
| 638 | font-family: var(--font-sans); |
| 639 | font-size: clamp(1.45rem, 4.2vw, 2.15rem); |
| 640 | font-weight: 700; |
| 641 | color: var(--text); |
| 642 | line-height: 1.3; |
| 643 | margin: 0 0 0.65rem; |
| 644 | letter-spacing: -0.02em; |
| 645 | } |
| 646 | .flow-intro-sub { |
| 647 | font-size: clamp(0.88rem, 2vw, 1rem); |
| 648 | color: var(--text-muted); |
| 649 | line-height: 1.55; |
| 650 | margin: 0 0 0.85rem; |
| 651 | font-weight: 400; |
| 652 | } |
| 653 | .flow-intro-sub--accent { |
| 654 | color: var(--accent); |
| 655 | font-weight: 600; |
| 656 | } |
| 657 | /* Structured memory (hero fold + main): same type scale as Ecosystem visions; doc-link blue, normal weight, centered */ |
| 658 | .structured-memory-heading { |
| 659 | color: #58a6ff; |
| 660 | text-align: center; |
| 661 | font-weight: 400; |
| 662 | text-shadow: none; |
| 663 | } |
| 664 | html[data-theme="light"] .structured-memory-heading { |
| 665 | color: #0969da; |
| 666 | } |
| 667 | .ecosystem-vision-heading-wrap .flow-intro-title.structured-memory-heading { |
| 668 | text-shadow: none; |
| 669 | } |
| 670 | .hero-value-fold-heading-text { |
| 671 | margin: 0; |
| 672 | } |
| 673 | .feature-highlights { |
| 674 | padding: 2.5rem 0 2.75rem; |
| 675 | border-top: 1px solid var(--border); |
| 676 | } |
| 677 | .feature-highlights h2 { |
| 678 | font-family: var(--font-sans); |
| 679 | text-align: center; |
| 680 | font-size: clamp(1.2rem, 2.8vw, 1.5rem); |
| 681 | font-weight: 700; |
| 682 | margin: 0 0 0.35rem; |
| 683 | color: var(--text); |
| 684 | } |
| 685 | .feature-highlights .feature-highlights-lead { |
| 686 | text-align: center; |
| 687 | color: var(--text-muted); |
| 688 | font-size: 0.95rem; |
| 689 | max-width: 34em; |
| 690 | margin: 0 auto 1.75rem; |
| 691 | line-height: 1.55; |
| 692 | } |
| 693 | .feature-highlights-grid { |
| 694 | display: grid; |
| 695 | grid-template-columns: repeat(4, 1fr); |
| 696 | gap: 1.25rem; |
| 697 | } |
| 698 | @media (max-width: 1024px) { |
| 699 | .feature-highlights-grid { grid-template-columns: repeat(2, 1fr); } |
| 700 | } |
| 701 | @media (max-width: 520px) { |
| 702 | .feature-highlights-grid { grid-template-columns: 1fr; } |
| 703 | } |
| 704 | |
| 705 | .ecosystem-vision-section { |
| 706 | position: relative; |
| 707 | isolation: isolate; |
| 708 | overflow: visible; |
| 709 | padding: 4.25rem 0 3.75rem; |
| 710 | margin-top: 1.5rem; |
| 711 | border-top: 1px solid var(--border); |
| 712 | } |
| 713 | .ecosystem-vision-section::before { |
| 714 | content: ""; |
| 715 | position: absolute; |
| 716 | inset: 0; |
| 717 | pointer-events: none; |
| 718 | z-index: 0; |
| 719 | /* Ellipse must stay ≤100% wide or the fade clips as sharp vertical edges. */ |
| 720 | background: radial-gradient( |
| 721 | ellipse 72% 70% at 50% 54%, |
| 722 | color-mix(in srgb, var(--accent) 15%, transparent) 0%, |
| 723 | color-mix(in srgb, var(--accent) 4.5%, transparent) 48%, |
| 724 | transparent 72% |
| 725 | ); |
| 726 | } |
| 727 | .ecosystem-vision-section > * { |
| 728 | position: relative; |
| 729 | z-index: 1; |
| 730 | } |
| 731 | .ecosystem-vision-heading-wrap { |
| 732 | display: flex; |
| 733 | justify-content: center; |
| 734 | padding: 1.25rem 1rem 0.35rem; |
| 735 | margin: 0 auto; |
| 736 | max-width: 44rem; |
| 737 | } |
| 738 | .ecosystem-vision-heading-wrap .flow-intro-title { |
| 739 | text-align: center; |
| 740 | max-width: 40rem; |
| 741 | margin-left: auto; |
| 742 | margin-right: auto; |
| 743 | text-shadow: |
| 744 | 0 0 5px color-mix(in srgb, var(--accent) 58%, transparent), |
| 745 | 0 0 12px color-mix(in srgb, var(--accent) 32%, transparent); |
| 746 | } |
| 747 | .ecosystem-architecture-title { |
| 748 | font-family: var(--font-sans); |
| 749 | text-align: center; |
| 750 | font-size: clamp(1.2rem, 2.8vw, 1.5rem); |
| 751 | font-weight: 700; |
| 752 | margin: 0 0 1.15rem; |
| 753 | color: var(--accent); |
| 754 | letter-spacing: -0.02em; |
| 755 | } |
| 756 | .ecosystem-vision-lead { |
| 757 | text-align: center; |
| 758 | color: var(--text-muted); |
| 759 | font-size: 0.98rem; |
| 760 | max-width: 40rem; |
| 761 | margin: 0 auto 1.5rem; |
| 762 | line-height: 1.6; |
| 763 | } |
| 764 | .ecosystem-flow-row { |
| 765 | display: flex; |
| 766 | flex-wrap: wrap; |
| 767 | align-items: stretch; |
| 768 | justify-content: center; |
| 769 | gap: 0.65rem 0.5rem; |
| 770 | margin: 0 auto 1.25rem; |
| 771 | max-width: 56rem; |
| 772 | } |
| 773 | .ecosystem-flow-row.ecosystem-flow-row--in-card { |
| 774 | margin-top: 0; |
| 775 | margin-bottom: 1.35rem; |
| 776 | max-width: 100%; |
| 777 | } |
| 778 | .ecosystem-flow-node { |
| 779 | flex: 1 1 120px; |
| 780 | min-width: 100px; |
| 781 | max-width: 160px; |
| 782 | padding: 0.85rem 0.65rem; |
| 783 | border-radius: var(--radius); |
| 784 | border: 1px solid var(--border); |
| 785 | background: var(--surface); |
| 786 | text-align: center; |
| 787 | font-size: 0.8rem; |
| 788 | font-weight: 600; |
| 789 | color: var(--text); |
| 790 | line-height: 1.35; |
| 791 | } |
| 792 | .ecosystem-flow-node span { |
| 793 | display: block; |
| 794 | font-weight: 400; |
| 795 | font-size: 0.72rem; |
| 796 | color: var(--text-muted); |
| 797 | margin-top: 0.25rem; |
| 798 | } |
| 799 | .ecosystem-flow-arrow { |
| 800 | align-self: center; |
| 801 | color: var(--accent); |
| 802 | font-size: 1.1rem; |
| 803 | opacity: 0.85; |
| 804 | } |
| 805 | @media (max-width: 640px) { |
| 806 | .ecosystem-flow-arrow { display: none; } |
| 807 | } |
| 808 | .ecosystem-vision-card { |
| 809 | border: none; |
| 810 | border-radius: 0; |
| 811 | background: transparent; |
| 812 | padding: 0.5rem 0 0; |
| 813 | margin-top: 0.35rem; |
| 814 | max-width: 40rem; |
| 815 | margin-left: auto; |
| 816 | margin-right: auto; |
| 817 | } |
| 818 | .ecosystem-vision-card > p { |
| 819 | margin: 0 0 1rem; |
| 820 | font-size: 0.95rem; |
| 821 | color: var(--text-muted); |
| 822 | line-height: 1.6; |
| 823 | } |
| 824 | .ecosystem-vision-card .flow-details { margin-top: 0.5rem; } |
| 825 | .ecosystem-doc-link-hint { |
| 826 | font-size: 0.82rem; |
| 827 | color: var(--text-muted); |
| 828 | margin: 0.75rem 0 0; |
| 829 | } |
| 830 | .feature-highlight-card { |
| 831 | border: 1px solid var(--border); |
| 832 | border-radius: var(--radius); |
| 833 | padding: 1.35rem 1.25rem; |
| 834 | background: var(--surface); |
| 835 | text-align: center; |
| 836 | } |
| 837 | .feature-highlight-card .fh-icon { |
| 838 | font-size: 2rem; |
| 839 | line-height: 1; |
| 840 | margin-bottom: 0.5rem; |
| 841 | } |
| 842 | .feature-highlight-card h3 { |
| 843 | font-family: var(--font-sans); |
| 844 | font-size: 1.05rem; |
| 845 | font-weight: 700; |
| 846 | margin: 0 0 0.45rem; |
| 847 | color: var(--text); |
| 848 | } |
| 849 | .feature-highlight-card p { |
| 850 | margin: 0; |
| 851 | font-size: 0.9rem; |
| 852 | color: var(--text-muted); |
| 853 | line-height: 1.55; |
| 854 | } |
| 855 | .flow-track { |
| 856 | padding: 1rem 0 3rem; |
| 857 | } |
| 858 | .flow-step { |
| 859 | display: grid; |
| 860 | grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); |
| 861 | gap: 1.75rem 2.5rem; |
| 862 | align-items: start; |
| 863 | padding: 3rem 0; |
| 864 | margin-bottom: 0.5rem; |
| 865 | border-top: 1px solid var(--border); |
| 866 | } |
| 867 | .flow-step:first-of-type { border-top: none; padding-top: 1.5rem; } |
| 868 | @media (max-width: 820px) { |
| 869 | .flow-step { |
| 870 | grid-template-columns: 1fr; |
| 871 | gap: 1rem; |
| 872 | } |
| 873 | } |
| 874 | .flow-visual { |
| 875 | text-align: center; |
| 876 | padding: 0.5rem 1rem; |
| 877 | } |
| 878 | @media (min-width: 821px) { |
| 879 | .flow-visual { text-align: left; padding-left: 0; } |
| 880 | } |
| 881 | .flow-step-num { |
| 882 | font-size: 0.75rem; |
| 883 | font-weight: 700; |
| 884 | letter-spacing: 0.12em; |
| 885 | text-transform: uppercase; |
| 886 | color: var(--accent); |
| 887 | margin: 0 0 0.5rem; |
| 888 | } |
| 889 | .flow-icon { |
| 890 | font-size: clamp(2.5rem, 6vw, 3.25rem); |
| 891 | line-height: 1.2; |
| 892 | display: block; |
| 893 | margin-bottom: 0.35rem; |
| 894 | } |
| 895 | .flow-visual-caption { |
| 896 | font-size: clamp(1.05rem, 2.4vw, 1.7rem); |
| 897 | color: var(--text-muted); |
| 898 | margin: 0; |
| 899 | max-width: 18rem; |
| 900 | line-height: 1.4; |
| 901 | font-weight: 500; |
| 902 | margin-left: auto; |
| 903 | margin-right: auto; |
| 904 | } |
| 905 | @media (min-width: 821px) { |
| 906 | .flow-visual-caption { margin-left: 0; } |
| 907 | } |
| 908 | .flow-import-icons { |
| 909 | display: flex; |
| 910 | flex-wrap: wrap; |
| 911 | gap: 0.3rem 0.55rem; |
| 912 | margin: 0.75rem auto 0; |
| 913 | max-width: 20rem; |
| 914 | justify-content: center; |
| 915 | } |
| 916 | @media (min-width: 821px) { |
| 917 | .flow-import-icons { justify-content: flex-start; margin-left: 0; max-width: 22rem; } |
| 918 | } |
| 919 | .flow-import-icon { |
| 920 | font-size: 0.68rem; |
| 921 | color: var(--text-muted); |
| 922 | white-space: nowrap; |
| 923 | line-height: 1.3; |
| 924 | } |
| 925 | .flow-import-grid { |
| 926 | display: grid; |
| 927 | grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); |
| 928 | gap: 0.45rem; |
| 929 | margin: 0.75rem 0; |
| 930 | } |
| 931 | .flow-import-tile { |
| 932 | display: flex; |
| 933 | flex-direction: column; |
| 934 | align-items: center; |
| 935 | padding: 0.45rem 0.35rem; |
| 936 | border-radius: 6px; |
| 937 | border: 1px solid var(--border); |
| 938 | background: var(--card-bg, rgba(255,255,255,0.03)); |
| 939 | text-align: center; |
| 940 | font-size: 0.78rem; |
| 941 | line-height: 1.3; |
| 942 | } |
| 943 | .flow-import-tile small { |
| 944 | font-size: 0.65rem; |
| 945 | color: var(--text-muted); |
| 946 | } |
| 947 | .flow-detail-heading { |
| 948 | font-size: 0.9rem; |
| 949 | font-weight: 700; |
| 950 | margin: 1rem 0 0.35rem; |
| 951 | letter-spacing: -0.02em; |
| 952 | } |
| 953 | .detail-inner > .flow-detail-heading:first-of-type { |
| 954 | margin-top: 0; |
| 955 | } |
| 956 | .flow-body h2 { |
| 957 | font-family: var(--font-sans); |
| 958 | font-size: clamp(1.35rem, 3vw, 1.65rem); |
| 959 | font-weight: 700; |
| 960 | margin: 0 0 0.65rem; |
| 961 | letter-spacing: -0.02em; |
| 962 | line-height: 1.25; |
| 963 | } |
| 964 | .flow-body > p { |
| 965 | margin: 0 0 1rem; |
| 966 | color: var(--text-muted); |
| 967 | font-size: 0.98rem; |
| 968 | max-width: 38em; |
| 969 | } |
| 970 | .flow-details { |
| 971 | margin-top: 0.25rem; |
| 972 | border: 1px solid var(--border); |
| 973 | border-radius: var(--radius); |
| 974 | background: var(--surface); |
| 975 | overflow: hidden; |
| 976 | } |
| 977 | .flow-details summary { |
| 978 | cursor: pointer; |
| 979 | padding: 0.85rem 1.1rem; |
| 980 | font-weight: 600; |
| 981 | font-size: 0.9rem; |
| 982 | color: var(--accent); |
| 983 | list-style: none; |
| 984 | display: flex; |
| 985 | align-items: center; |
| 986 | justify-content: space-between; |
| 987 | gap: 0.75rem; |
| 988 | user-select: none; |
| 989 | } |
| 990 | .flow-details summary::-webkit-details-marker { display: none; } |
| 991 | .flow-details summary::after { |
| 992 | content: "▾"; |
| 993 | font-size: 0.75rem; |
| 994 | opacity: 0.7; |
| 995 | transition: transform 0.2s; |
| 996 | } |
| 997 | .flow-details[open] summary::after { transform: rotate(180deg); } |
| 998 | .flow-details summary:hover { background: var(--surface-elevated); } |
| 999 | .flow-details .detail-inner { |
| 1000 | padding: 0 1.1rem 1.1rem; |
| 1001 | border-top: 1px solid var(--border); |
| 1002 | font-size: 0.88rem; |
| 1003 | color: var(--text-muted); |
| 1004 | line-height: 1.65; |
| 1005 | } |
| 1006 | .flow-details .detail-inner ul { |
| 1007 | margin: 0.5rem 0 0; |
| 1008 | padding-left: 1.2rem; |
| 1009 | } |
| 1010 | .flow-details .detail-inner li { margin-bottom: 0.4rem; } |
| 1011 | .flow-details .detail-inner a { color: var(--accent); text-decoration: none; } |
| 1012 | .flow-details .detail-inner a:hover { text-decoration: underline; } |
| 1013 | .flow-details code { |
| 1014 | background: var(--surface-elevated); |
| 1015 | padding: 0.12rem 0.35rem; |
| 1016 | border-radius: 4px; |
| 1017 | font-size: 0.86em; |
| 1018 | } |
| 1019 | |
| 1020 | .flow-closing { |
| 1021 | text-align: center; |
| 1022 | padding: 2rem 1.5rem 3rem; |
| 1023 | border-top: 1px solid var(--border); |
| 1024 | } |
| 1025 | .flow-closing p { color: var(--text-muted); font-size: 0.95rem; max-width: 32em; margin: 0 auto 1.25rem; } |
| 1026 | |
| 1027 | /* Value pitch: differentiation + proposals + glossary (see docs/WHITEPAPER.md) */ |
| 1028 | .value-pitch { |
| 1029 | padding: 1.75rem 1.5rem 2rem; |
| 1030 | background: var(--surface); |
| 1031 | border-bottom: 1px solid var(--border); |
| 1032 | } |
| 1033 | .value-pitch-inner { max-width: 960px; margin: 0 auto; } |
| 1034 | .value-pitch > .value-pitch-inner > .ecosystem-vision-heading-wrap { |
| 1035 | padding-top: 0.25rem; |
| 1036 | padding-bottom: 0.5rem; |
| 1037 | } |
| 1038 | .value-pitch-lead { |
| 1039 | margin: 0 0 1.25rem; |
| 1040 | color: var(--text-muted); |
| 1041 | font-size: 1.05rem; |
| 1042 | max-width: 48rem; |
| 1043 | } |
| 1044 | .value-pitch-root-list { |
| 1045 | list-style: none; |
| 1046 | margin: 0 0 1.1rem; |
| 1047 | padding: 0; |
| 1048 | max-width: none; |
| 1049 | display: flex; |
| 1050 | flex-wrap: wrap; |
| 1051 | align-items: center; |
| 1052 | column-gap: 0.65rem; |
| 1053 | row-gap: 0.35rem; |
| 1054 | color: var(--text-muted); |
| 1055 | font-size: 1.05rem; |
| 1056 | line-height: 1.45; |
| 1057 | } |
| 1058 | .value-pitch-root-list li { |
| 1059 | position: relative; |
| 1060 | padding-left: 0.75rem; |
| 1061 | margin-bottom: 0; |
| 1062 | flex: 0 1 auto; |
| 1063 | } |
| 1064 | .value-pitch-root-list li::before { |
| 1065 | content: ""; |
| 1066 | position: absolute; |
| 1067 | left: 0; |
| 1068 | top: 0.55em; |
| 1069 | width: 0.35rem; |
| 1070 | height: 0.35rem; |
| 1071 | border-radius: 50%; |
| 1072 | background: #58a6ff; |
| 1073 | } |
| 1074 | html[data-theme="light"] .value-pitch-root-list li::before { |
| 1075 | background: #0969da; |
| 1076 | } |
| 1077 | .value-pitch-grid { |
| 1078 | display: grid; |
| 1079 | gap: 1.25rem; |
| 1080 | margin-bottom: 1.25rem; |
| 1081 | align-items: stretch; |
| 1082 | } |
| 1083 | @media (min-width: 768px) { |
| 1084 | .value-pitch-grid { grid-template-columns: 1fr 1fr; } |
| 1085 | } |
| 1086 | .value-blurb { |
| 1087 | display: flex; |
| 1088 | flex-direction: column; |
| 1089 | min-height: 100%; |
| 1090 | background: var(--surface-elevated); |
| 1091 | border: 1px solid var(--border); |
| 1092 | border-radius: var(--radius); |
| 1093 | padding: 1.1rem 1.25rem; |
| 1094 | } |
| 1095 | .value-blurb > .landing-details { |
| 1096 | margin-top: auto; |
| 1097 | } |
| 1098 | .value-blurb h3 { |
| 1099 | margin: 0 0 0.65rem; |
| 1100 | font-size: 1.05rem; |
| 1101 | } |
| 1102 | .value-blurb ul { margin: 0; padding-left: 1.2rem; color: var(--text-muted); font-size: 0.95rem; } |
| 1103 | .value-blurb li { margin-bottom: 0.4rem; } |
| 1104 | .value-pill-caption { |
| 1105 | margin: 0 0 0.5rem; |
| 1106 | font-size: 0.85rem; |
| 1107 | font-weight: 600; |
| 1108 | color: var(--text-muted); |
| 1109 | text-transform: uppercase; |
| 1110 | letter-spacing: 0.04em; |
| 1111 | } |
| 1112 | .value-pill-row { |
| 1113 | list-style: none; |
| 1114 | margin: 0 0 1rem; |
| 1115 | padding: 0; |
| 1116 | display: flex; |
| 1117 | flex-wrap: wrap; |
| 1118 | gap: 0.45rem; |
| 1119 | } |
| 1120 | .value-pill-row li { |
| 1121 | margin: 0; |
| 1122 | font-size: 0.82rem; |
| 1123 | padding: 0.28rem 0.65rem; |
| 1124 | border-radius: 999px; |
| 1125 | border: 1px solid var(--border); |
| 1126 | background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); |
| 1127 | color: var(--text); |
| 1128 | } |
| 1129 | .landing-details { |
| 1130 | margin-top: 0.75rem; |
| 1131 | border-radius: var(--radius); |
| 1132 | border: 1px solid var(--border); |
| 1133 | background: var(--surface); |
| 1134 | padding: 0; |
| 1135 | } |
| 1136 | .landing-details + .landing-details { margin-top: 0.5rem; } |
| 1137 | .landing-details summary { |
| 1138 | cursor: pointer; |
| 1139 | font-weight: 600; |
| 1140 | padding: 0.65rem 0.85rem; |
| 1141 | list-style: none; |
| 1142 | display: flex; |
| 1143 | align-items: center; |
| 1144 | gap: 0.5rem; |
| 1145 | user-select: none; |
| 1146 | } |
| 1147 | .landing-details summary::-webkit-details-marker { display: none; } |
| 1148 | .landing-details summary::before { |
| 1149 | content: "▶"; |
| 1150 | font-size: 1rem; |
| 1151 | line-height: 1; |
| 1152 | color: #58a6ff; |
| 1153 | flex-shrink: 0; |
| 1154 | transition: transform 0.2s ease; |
| 1155 | } |
| 1156 | html[data-theme="light"] .landing-details summary::before { |
| 1157 | color: #0969da; |
| 1158 | } |
| 1159 | .landing-details[open] summary::before { |
| 1160 | transform: rotate(90deg); |
| 1161 | } |
| 1162 | .landing-details[open] summary { |
| 1163 | border-bottom: 1px solid var(--border); |
| 1164 | } |
| 1165 | .landing-details .landing-details-body { |
| 1166 | padding: 0.75rem 0.85rem 0.9rem; |
| 1167 | font-size: 0.9rem; |
| 1168 | color: var(--text-muted); |
| 1169 | line-height: 1.55; |
| 1170 | } |
| 1171 | .landing-details .landing-details-body a { color: var(--accent); } |
| 1172 | |
| 1173 | /* Hero fold: full structured-memory block, collapsed by default (sits under hero graphic, above CTAs) */ |
| 1174 | .hero-value-fold { |
| 1175 | margin-top: 1.35rem; |
| 1176 | margin-bottom: 1.25rem; |
| 1177 | text-align: left; |
| 1178 | width: 100%; |
| 1179 | max-width: none; |
| 1180 | margin-left: auto; |
| 1181 | margin-right: auto; |
| 1182 | border: 1px solid var(--border); |
| 1183 | border-radius: var(--radius); |
| 1184 | background: var(--surface-elevated); |
| 1185 | padding: 0; |
| 1186 | } |
| 1187 | .hero-value-fold-summary { |
| 1188 | list-style: none; |
| 1189 | cursor: pointer; |
| 1190 | padding: 0.85rem 1rem 1.5rem; |
| 1191 | display: flex; |
| 1192 | align-items: center; |
| 1193 | justify-content: center; |
| 1194 | gap: 0.45rem; |
| 1195 | } |
| 1196 | .hero-value-fold-summary::-webkit-details-marker { display: none; } |
| 1197 | .hero-value-fold-summary::after { |
| 1198 | content: "▾"; |
| 1199 | font-size: 1.35rem; |
| 1200 | line-height: 1; |
| 1201 | font-weight: 700; |
| 1202 | color: var(--accent); |
| 1203 | transition: transform 0.2s ease; |
| 1204 | } |
| 1205 | .hero-value-fold[open] .hero-value-fold-summary::after { |
| 1206 | transform: rotate(-180deg); |
| 1207 | } |
| 1208 | .hero-value-fold-body { |
| 1209 | padding: 1rem 0 2rem; |
| 1210 | border-top: 1px solid var(--border); |
| 1211 | } |
| 1212 | |
| 1213 | footer { |
| 1214 | padding: 2.5rem 1.5rem; |
| 1215 | text-align: center; |
| 1216 | color: var(--text-muted); |
| 1217 | font-size: 0.9rem; |
| 1218 | border-top: 1px solid var(--border); |
| 1219 | } |
| 1220 | footer a { color: var(--accent); text-decoration: none; } |
| 1221 | footer a:hover { text-decoration: underline; } |
| 1222 | footer .footer-community { margin: 0 0 0.9rem; } |
| 1223 | footer .footer-discord-link { |
| 1224 | display: inline-flex; |
| 1225 | align-items: center; |
| 1226 | justify-content: center; |
| 1227 | gap: 0.45rem; |
| 1228 | color: var(--accent); |
| 1229 | } |
| 1230 | footer .footer-discord-link:hover { text-decoration: underline; } |
| 1231 | footer .footer-discord-icon { |
| 1232 | width: 1.2em; |
| 1233 | height: 1.2em; |
| 1234 | flex-shrink: 0; |
| 1235 | } |
| 1236 | footer .footer-social-icons { |
| 1237 | display: flex; |
| 1238 | align-items: center; |
| 1239 | justify-content: center; |
| 1240 | gap: 1rem; |
| 1241 | margin: 0 0 0.85rem; |
| 1242 | } |
| 1243 | footer .footer-social-icons a { |
| 1244 | display: inline-flex; |
| 1245 | align-items: center; |
| 1246 | justify-content: center; |
| 1247 | padding: 0.3rem; |
| 1248 | color: var(--accent); |
| 1249 | text-decoration: none; |
| 1250 | border-radius: 10px; |
| 1251 | transition: color 0.15s, background 0.15s; |
| 1252 | } |
| 1253 | footer .footer-social-icons a:hover { |
| 1254 | background: var(--surface-elevated); |
| 1255 | } |
| 1256 | footer .footer-social-icons svg { |
| 1257 | width: 1.35rem; |
| 1258 | height: 1.35rem; |
| 1259 | fill: currentColor; |
| 1260 | } |
| 1261 | footer .footer-links { margin-top: 0.75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; } |
| 1262 | </style> |
| 1263 | </head> |
| 1264 | <body> |
| 1265 | <header class="landing-header"> |
| 1266 | <div class="landing-header-start"> |
| 1267 | <button type="button" id="theme-toggle" class="theme-toggle" aria-label="Switch to light theme" aria-pressed="true" title="Day / night"> |
| 1268 | <span class="theme-toggle-icon" aria-hidden="true">🌙</span> |
| 1269 | <span class="theme-toggle-label">Night</span> |
| 1270 | </button> |
| 1271 | <nav class="landing-header-social" aria-label="Social links"> |
| 1272 | <a href="https://discord.gg/NrtzhZtrED" class="social-icon-link" target="_blank" rel="noopener noreferrer" aria-label="Knowtation on Discord" title="Discord"> |
| 1273 | <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.168 0 2.176 1.096 2.157 2.42 0 1.333-.948 2.418-2.157 2.418z"/></svg> |
| 1274 | </a> |
| 1275 | <a href="https://www.youtube.com/@Knowtation" class="social-icon-link" target="_blank" rel="noopener noreferrer" aria-label="Knowtation on YouTube" title="YouTube"> |
| 1276 | <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg> |
| 1277 | </a> |
| 1278 | <a href="https://x.com/Knowtation1111" class="social-icon-link" target="_blank" rel="noopener noreferrer" aria-label="Knowtation on X (@Knowtation1111)" title="X (Twitter)"> |
| 1279 | <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932L18.901 1.153zm-1.292 19.494h2.039L6.486 3.24H4.298l13.311 17.407z"/></svg> |
| 1280 | </a> |
| 1281 | </nav> |
| 1282 | </div> |
| 1283 | <a href="#" id="main-signin-google" class="cta cta-signin" data-provider="google">Sign in with Google</a> |
| 1284 | <a href="#" id="main-signin-github" class="cta cta-signin" data-provider="github">Sign in with GitHub</a> |
| 1285 | </header> |
| 1286 | |
| 1287 | <div class="container"> |
| 1288 | <header class="hero"> |
| 1289 | <h1 class="hero-title-main-only">Knowtation</h1> |
| 1290 | <p class="hero-brand-sub"><span class="hero-brand-sub-accent">Your notes, become known.</span> One place for you and your agents.</p> |
| 1291 | <div class="hero-messages"> |
| 1292 | <p>Precise retrieval - faster answers - lower token cost</p> |
| 1293 | <p>Narrow search first - then discover insights</p> |
| 1294 | <p>Memory consolidation - context flexibility</p> |
| 1295 | <p>Own your Markdown vault</p> |
| 1296 | </div> |
| 1297 | <div class="landing-ecosystem" aria-label="Knowtation at the center of your tools"> |
| 1298 | <div class="landing-ecosystem-rings"> |
| 1299 | <svg class="landing-ecosystem-svg" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> |
| 1300 | <circle cx="160" cy="160" r="90" fill="none" stroke="var(--border)" stroke-width="1"/> |
| 1301 | <circle cx="160" cy="160" r="135" fill="none" stroke="var(--border)" stroke-width="1"/> |
| 1302 | <circle cx="160" cy="160" r="158" fill="none" stroke="var(--accent)" stroke-width="1" opacity="0.6"/> |
| 1303 | </svg> |
| 1304 | <div class="landing-ecosystem-center"> |
| 1305 | <span class="landing-ecosystem-core-icon" aria-hidden="true">📁</span> |
| 1306 | <span class="landing-ecosystem-core-label">Your vault</span> |
| 1307 | </div> |
| 1308 | <div class="landing-ecosystem-icon landing-ecosystem-icon-1" title="Cursor">✏️</div> |
| 1309 | <div class="landing-ecosystem-icon landing-ecosystem-icon-2" title="Claude">🤖</div> |
| 1310 | <div class="landing-ecosystem-icon landing-ecosystem-icon-3" title="Agents">🦌</div> |
| 1311 | <div class="landing-ecosystem-icon landing-ecosystem-icon-4" title="MCP">🔌</div> |
| 1312 | <div class="landing-ecosystem-icon landing-ecosystem-icon-5" title="CLI">💻</div> |
| 1313 | <div class="landing-ecosystem-icon landing-ecosystem-icon-6" title="Search">🔍</div> |
| 1314 | <div class="landing-ecosystem-icon landing-ecosystem-icon-7" title="Import">📥</div> |
| 1315 | <div class="landing-ecosystem-icon landing-ecosystem-icon-8" title="Memory">🧠</div> |
| 1316 | <div class="landing-ecosystem-icon landing-ecosystem-icon-9" title="GitHub">🐙</div> |
| 1317 | <div class="landing-ecosystem-icon landing-ecosystem-icon-10" title="Hub">🌐</div> |
| 1318 | <div class="landing-ecosystem-icon landing-ecosystem-icon-11" title="Tags">🏷️</div> |
| 1319 | <div class="landing-ecosystem-icon landing-ecosystem-icon-12" title="Time">⏱️</div> |
| 1320 | <div class="landing-ecosystem-icon landing-ecosystem-icon-13" title="Chains">🔗</div> |
| 1321 | <div class="landing-ecosystem-icon landing-ecosystem-icon-14" title="Proposals">📋</div> |
| 1322 | <div class="landing-ecosystem-icon landing-ecosystem-icon-15" title="ICP">⬡</div> |
| 1323 | <div class="landing-ecosystem-icon landing-ecosystem-icon-16" title="Media">🎬</div> |
| 1324 | <div class="landing-ecosystem-icon landing-ecosystem-icon-17" title="Transcribe">🎙️</div> |
| 1325 | <div class="landing-ecosystem-icon landing-ecosystem-icon-18" title="Sync">🔄</div> |
| 1326 | <div class="landing-ecosystem-icon landing-ecosystem-icon-19" title="Notes">📝</div> |
| 1327 | <div class="landing-ecosystem-icon landing-ecosystem-icon-20" title="Export">📤</div> |
| 1328 | </div> |
| 1329 | </div> |
| 1330 | <details class="hero-value-fold" id="structured-memory-hero-fold"> |
| 1331 | <summary class="hero-value-fold-summary"><span class="flow-intro-title structured-memory-heading hero-value-fold-heading-text">Structured memory for humans and agents</span></summary> |
| 1332 | <div class="hero-value-fold-body value-pitch-inner"> |
| 1333 | <p class="value-pitch-lead"> |
| 1334 | Your <strong>owned</strong>, <strong>indexed</strong> notes—optional <strong>time</strong>, <strong>chains</strong>, <strong>episodes</strong>, and <strong>entities</strong>—plus a deep <strong>MCP</strong> surface for assistants that support it. |
| 1335 | </p> |
| 1336 | <ul class="value-pitch-root-list"> |
| 1337 | <li>Root Solution</li> |
| 1338 | <li>Semantic search</li> |
| 1339 | <li>Agent proposals with human review</li> |
| 1340 | <li>Team roles</li> |
| 1341 | <li>Scoped vaults</li> |
| 1342 | <li>Memory consolidation</li> |
| 1343 | <li>Causal-temporal structure</li> |
| 1344 | <li>More than a trim pass on chat or terminal logs.</li> |
| 1345 | </ul> |
| 1346 | <div class="value-pitch-grid"> |
| 1347 | <div class="value-blurb"> |
| 1348 | <h3>Depth you can use</h3> |
| 1349 | <ul> |
| 1350 | <li>Causal chains, episodes, entities, snapshots, and summary notes when you add frontmatter.</li> |
| 1351 | <li>Agent tools such as semantic neighbors, wikilinks, tasks, clustering, and tag suggestions.</li> |
| 1352 | <li>Hosted prompts and memory flows for long-running work (see docs for full lists).</li> |
| 1353 | <li><strong>Imports, capture, transcribe</strong> — one indexed vault for humans and agents.</li> |
| 1354 | </ul> |
| 1355 | <details class="landing-details"> |
| 1356 | <summary>Technical pointers</summary> |
| 1357 | <div class="landing-details-body"> |
| 1358 | Start with <a href="https://github.com/aaronrene/knowtation/blob/main/docs/INTENTION-AND-TEMPORAL.md" target="_blank" rel="noopener">Intention and temporal</a>, |
| 1359 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/PARITY-MATRIX-HOSTED.md" target="_blank" rel="noopener">Hosted parity matrix</a>, and |
| 1360 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/PARITY-MATRIX-HOSTED.md" target="_blank" rel="noopener">Hosted MCP parity matrix</a>. |
| 1361 | </div> |
| 1362 | </details> |
| 1363 | </div> |
| 1364 | <div class="value-blurb"> |
| 1365 | <h3>Agents suggest. Humans approve.</h3> |
| 1366 | <ul> |
| 1367 | <li><strong>Proposals</strong> stay out of the canonical vault until reviewers pass rubrics and admins apply changes.</li> |
| 1368 | <li>Built for teams that need <strong>audit trails</strong>, <strong>roles</strong>, and optional <strong>LLM review hints</strong>—not silent AI overwrites.</li> |
| 1369 | <li>Same AI speed with a <strong>human gate</strong>, optional <strong>rubrics</strong>, and a durable <strong>paper trail</strong> from propose → evaluate → approve.</li> |
| 1370 | <li><strong>Scoped roles</strong> — viewer, editor, evaluator, admin — so each person only touches what their job allows.</li> |
| 1371 | </ul> |
| 1372 | <details class="landing-details"> |
| 1373 | <summary>How proposals work (API)</summary> |
| 1374 | <div class="landing-details-body"> |
| 1375 | Agents and editors create rows via <code>POST /api/v1/proposals</code>; humans evaluate; approve writes the vault. |
| 1376 | See <a href="https://github.com/aaronrene/knowtation/blob/main/docs/PROPOSAL-LIFECYCLE.md" target="_blank" rel="noopener">Proposal lifecycle</a> and |
| 1377 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/AGENT-INTEGRATION.md" target="_blank" rel="noopener">Agent integration §4</a>. |
| 1378 | </div> |
| 1379 | </details> |
| 1380 | </div> |
| 1381 | </div> |
| 1382 | <p class="value-pill-caption" id="value-pill-caption-hero">Glossary chips — concepts you can combine</p> |
| 1383 | <ul class="value-pill-row" role="list" aria-labelledby="value-pill-caption-hero"> |
| 1384 | <li role="listitem">Semantic search</li> |
| 1385 | <li role="listitem">Keyword search</li> |
| 1386 | <li role="listitem">Causal chain</li> |
| 1387 | <li role="listitem">Episode</li> |
| 1388 | <li role="listitem">Entity</li> |
| 1389 | <li role="listitem">Snapshot</li> |
| 1390 | <li role="listitem">Summarizes</li> |
| 1391 | <li role="listitem">Consolidate</li> |
| 1392 | <li role="listitem">Discover</li> |
| 1393 | <li role="listitem">Evaluate</li> |
| 1394 | <li role="listitem">Propose</li> |
| 1395 | <li role="listitem">Approve</li> |
| 1396 | <li role="listitem">MCP prompt</li> |
| 1397 | <li role="listitem">Wikilink</li> |
| 1398 | <li role="listitem">Memory event</li> |
| 1399 | <li role="listitem">Temporal summary</li> |
| 1400 | <li role="listitem">Resume session</li> |
| 1401 | <li role="listitem">Knowledge gap</li> |
| 1402 | <li role="listitem">Capture</li> |
| 1403 | <li role="listitem">Import</li> |
| 1404 | <li role="listitem">Rubric</li> |
| 1405 | <li role="listitem">Scoped access</li> |
| 1406 | <li role="listitem">Multi-vault</li> |
| 1407 | <li role="listitem">Transcribe</li> |
| 1408 | <li role="listitem">Attestation</li> |
| 1409 | <li role="listitem">Indexed vault</li> |
| 1410 | <li role="listitem">Relate</li> |
| 1411 | <li role="listitem">Cluster</li> |
| 1412 | <li role="listitem">Tag suggest</li> |
| 1413 | <li role="listitem">Enrich</li> |
| 1414 | <li role="listitem">Extract tasks</li> |
| 1415 | </ul> |
| 1416 | </div> |
| 1417 | </details> |
| 1418 | <div class="cta-row"> |
| 1419 | <a href="/hub/" class="cta cta-secondary">Hosted Hub (Beta)</a> |
| 1420 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/TWO-PATHS-HOSTED-AND-SELF-HOSTED.md#quick-start-self-hosted" class="cta cta-secondary" target="_blank" rel="noopener">Self-host quick start</a> |
| 1421 | </div> |
| 1422 | </header> |
| 1423 | </div> |
| 1424 | |
| 1425 | <div class="badge-wrap"> |
| 1426 | <a href="https://github.com/aaronrene/knowtation" class="badge" target="_blank" rel="noopener">Open source on GitHub</a> |
| 1427 | </div> |
| 1428 | |
| 1429 | <section class="band-b-path wide" aria-label="Three steps: note or import, add agents, ask your AI"> |
| 1430 | <div class="band-b-path-inner"> |
| 1431 | <ul class="band-b-steps" role="list"> |
| 1432 | <li class="band-b-step"> |
| 1433 | <div class="band-b-step-head"> |
| 1434 | <span class="band-b-step-marker">1</span> |
| 1435 | <h3 class="band-b-step-title">Note / import</h3> |
| 1436 | </div> |
| 1437 | <p>Capture or import into your indexed vault. Keep work out of chat-only threads. Export and own your history</p> |
| 1438 | <div class="band-b-step-links"> |
| 1439 | <a href="/hub/" class="band-b-step-link">Hosted Hub (Beta)</a> |
| 1440 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/TWO-PATHS-HOSTED-AND-SELF-HOSTED.md#quick-start-self-hosted" class="band-b-step-link band-b-step-link--secondary" target="_blank" rel="noopener">Self-host quick start</a> |
| 1441 | </div> |
| 1442 | </li> |
| 1443 | <li class="band-b-step"> |
| 1444 | <div class="band-b-step-head"> |
| 1445 | <span class="band-b-step-marker">2</span> |
| 1446 | <h3 class="band-b-step-title">Add agents</h3> |
| 1447 | </div> |
| 1448 | <p>MCP is a common path in Cursor and other tools. CLI covers terminal workflows and automation. Both reach the same vault, search, memory, proposals, and govern access rights.</p> |
| 1449 | <div class="band-b-step-links"> |
| 1450 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/AGENT-INTEGRATION.md" class="band-b-step-link" target="_blank" rel="noopener">Agent integration (MCP & CLI)</a> |
| 1451 | </div> |
| 1452 | </li> |
| 1453 | <li class="band-b-step"> |
| 1454 | <div class="band-b-step-head"> |
| 1455 | <span class="band-b-step-marker">3</span> |
| 1456 | <h3 class="band-b-step-title">Ask your AI</h3> |
| 1457 | </div> |
| 1458 | <p>Paste phased prompts for install, index, and checks. Your assistant walks the steps you pick. Customize your specs and schema creatively using our many tags, tools, and prompts.</p> |
| 1459 | <div class="band-b-step-links"> |
| 1460 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/AI-ASSISTED-SETUP.md" class="band-b-step-link" target="_blank" rel="noopener">AI-assisted setup (prompts)</a> |
| 1461 | </div> |
| 1462 | </li> |
| 1463 | </ul> |
| 1464 | </div> |
| 1465 | </section> |
| 1466 | |
| 1467 | <div class="deploy-headlines wide"> |
| 1468 | <p class="deploy-title">Run locally or get online access with our hosted service on decentralized Internet Computer canisters.</p> |
| 1469 | </div> |
| 1470 | |
| 1471 | <section class="landing-overview-video wide" aria-label="Knowtation overview video"> |
| 1472 | <!-- If the iframe shows "Video unavailable" but youtube.com/watch?v=… works: YouTube Studio → Content → this video → Details → Allow embedding must be ON. --> |
| 1473 | <div class="landing-video-frame"> |
| 1474 | <iframe |
| 1475 | src="https://www.youtube.com/embed/LPHBkyZmvVo?rel=0&modestbranding=1&playsinline=1" |
| 1476 | title="KNOWTATION Overview (embedded)" |
| 1477 | allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" |
| 1478 | allowfullscreen |
| 1479 | loading="lazy" |
| 1480 | ></iframe> |
| 1481 | </div> |
| 1482 | <div class="landing-channel-strip"> |
| 1483 | <p class="landing-channel-strip-title">Channel</p> |
| 1484 | <div class="landing-channel-scroll" role="list"> |
| 1485 | <!-- Add another <a class="landing-channel-card" role="listitem"> when you publish more videos (copy thumbnail URL pattern below). --> |
| 1486 | <a class="landing-channel-card" role="listitem" href="https://www.youtube.com/watch?v=LPHBkyZmvVo&list=UUW-qQC8z_QcBz5QfDi2zapw" target="_blank" rel="noopener noreferrer"> |
| 1487 | <img src="https://i.ytimg.com/vi/LPHBkyZmvVo/mqdefault.jpg" width="320" height="180" alt="Thumbnail: KNOWTATION Overview on YouTube" decoding="async" /> |
| 1488 | <span>KNOWTATION Overview</span> |
| 1489 | </a> |
| 1490 | <a class="landing-channel-card landing-channel-card--subscribe landing-channel-card--text" role="listitem" href="https://www.youtube.com/@Knowtation/videos" target="_blank" rel="noopener noreferrer"> |
| 1491 | <span>Open the channel on YouTube — subscribe for new uploads</span> |
| 1492 | </a> |
| 1493 | </div> |
| 1494 | </div> |
| 1495 | </section> |
| 1496 | |
| 1497 | <header class="spotlight-intro wide"> |
| 1498 | <h2 class="spotlight-intro-title">Know thyself... and your agents</h2> |
| 1499 | <p class="spotlight-intro-subtitle">Proposals, Evaluations, and Scoped Access =<br />Security, Savings, and Ownership and Control</p> |
| 1500 | </header> |
| 1501 | |
| 1502 | <section class="spotlight-pair wide" aria-label="Trust and memory"> |
| 1503 | <article class="spotlight-card"> |
| 1504 | <div class="spotlight-card-icon" aria-hidden="true">🔏</div> |
| 1505 | <h2>Attestation for serious teams</h2> |
| 1506 | <p>Legal, compliance, finance, and operations increasingly need proof of <strong>who approved a change</strong> and <strong>that the record was not silently altered</strong>. Knowtation pairs human-in-the-loop proposals with <strong>HMAC-signed attestation</strong> and optional <strong>Internet Computer blockchain anchoring</strong> — an audit trail you can point to, not just another row in a vendor database. <a href="https://github.com/aaronrene/knowtation/blob/main/docs/WHITEPAPER.md" target="_blank" rel="noopener">Whitepaper: attestation and ICP</a></p> |
| 1507 | </article> |
| 1508 | <article class="spotlight-card"> |
| 1509 | <div class="spotlight-card-icon" aria-hidden="true">🧠</div> |
| 1510 | <h2>Notes that become truly known</h2> |
| 1511 | <p>Your vault is searchable; <strong>memory</strong> keeps what agents and you did over time. <strong>Consolidation</strong> folds noisy events into compact facts so future context stays small. Optional <strong>Discover</strong> traces <strong>cross-topic insights</strong> — new paths between ideas — so yesterday’s notes actively inform tomorrow’s decisions instead of sitting in a forgotten folder. That is what “become known” means: interconnected, growing context, not a one-off chat dump.</p> |
| 1512 | </article> |
| 1513 | </section> |
| 1514 | |
| 1515 | <section class="feature-highlights wide" aria-labelledby="feature-highlights-heading"> |
| 1516 | <h2 id="feature-highlights-heading">What teams care about</h2> |
| 1517 | <p class="feature-highlights-lead">Solutions for the worries we hear most: cost, lock-in, trust, and “can my agents actually use this?”</p> |
| 1518 | <div class="feature-highlights-grid"> |
| 1519 | <div class="feature-highlight-card"> |
| 1520 | <div class="fh-icon" aria-hidden="true">💸</div> |
| 1521 | <h3>Lower token spend</h3> |
| 1522 | <p>Narrow search - only notes you need. Memory consolidation continuously keeps future context smaller.</p> |
| 1523 | </div> |
| 1524 | <div class="feature-highlight-card"> |
| 1525 | <div class="fh-icon" aria-hidden="true">📁</div> |
| 1526 | <h3>Files you own</h3> |
| 1527 | <p>Markdown in your vault — Git, editors, backups. No “export my life’s work” crisis when you switch tools.</p> |
| 1528 | </div> |
| 1529 | <div class="feature-highlight-card"> |
| 1530 | <div class="fh-icon" aria-hidden="true">🔏</div> |
| 1531 | <h3>Audit-ready trust</h3> |
| 1532 | <p>Attestation plus optional IC anchoring for provable intent. Pair with proposals - no unchecked agents</p> |
| 1533 | </div> |
| 1534 | <div class="feature-highlight-card"> |
| 1535 | <div class="fh-icon" aria-hidden="true">🤖</div> |
| 1536 | <h3>Agents that go deep</h3> |
| 1537 | <p>33 MCP tools, memory, consolidation, and the same CLI you use — not a thin search wrapper.</p> |
| 1538 | </div> |
| 1539 | <div class="feature-highlight-card"> |
| 1540 | <div class="fh-icon" aria-hidden="true">📥</div> |
| 1541 | <h3>Everything in one vault</h3> |
| 1542 | <p>Imports, capture, digital wallet CSVs, Supabase bridge — one searchable corpus for humans and agents.</p> |
| 1543 | </div> |
| 1544 | <div class="feature-highlight-card"> |
| 1545 | <div class="fh-icon" aria-hidden="true">🌐</div> |
| 1546 | <h3>Hosted or self-hosted</h3> |
| 1547 | <p>Same product: decentralized canisters when you want zero ops, or full control on your metal.</p> |
| 1548 | </div> |
| 1549 | <div class="feature-highlight-card"> |
| 1550 | <div class="fh-icon" aria-hidden="true">⬡</div> |
| 1551 | <h3>Decentralized online portal</h3> |
| 1552 | <p>A Hosted Hub where you own the data: back up to GitHub anytime for portability.</p> |
| 1553 | </div> |
| 1554 | <div class="feature-highlight-card"> |
| 1555 | <div class="fh-icon" aria-hidden="true">👥</div> |
| 1556 | <h3>Teams online, fast</h3> |
| 1557 | <p>Invite viewers, editors, and admins with scoped access in minutes.<br>No per-seat pricing</p> |
| 1558 | </div> |
| 1559 | </div> |
| 1560 | </section> |
| 1561 | |
| 1562 | <section class="ecosystem-vision-section wide" aria-labelledby="ecosystem-vision-heading"> |
| 1563 | <div class="ecosystem-vision-heading-wrap"> |
| 1564 | <h2 id="ecosystem-vision-heading" class="flow-intro-title">Ecosystem visions</h2> |
| 1565 | </div> |
| 1566 | <p class="ecosystem-vision-lead">Knowtation is the <strong>brain</strong> — files, search, memory, and review. Together with <strong>your custom workflow</strong>, you get one direction: humans and agents propose, humans curate, and history stays inspectable across life, work, and research.</p> |
| 1567 | <div class="ecosystem-vision-card"> |
| 1568 | <h3 class="ecosystem-architecture-title">Future Facing Architecture</h3> |
| 1569 | <div class="ecosystem-flow-row ecosystem-flow-row--in-card" aria-hidden="true"> |
| 1570 | <div class="ecosystem-flow-node">Knowtation<span>Brain · vault · memory</span></div> |
| 1571 | <span class="ecosystem-flow-arrow">↔</span> |
| 1572 | <div class="ecosystem-flow-node">Muse / MuseHub<span>Hands · VCS · review</span></div> |
| 1573 | <span class="ecosystem-flow-arrow">↔</span> |
| 1574 | <div class="ecosystem-flow-node">AgentCeption<span>Nerves · plans · agents</span></div> |
| 1575 | <span class="ecosystem-flow-arrow">↔</span> |
| 1576 | <div class="ecosystem-flow-node">Your Vision<span>Propel Projects</span></div> |
| 1577 | </div> |
| 1578 | <p>Use Knowtation any way you can imagine. Our vision was built around connecting open-source projects that share patterns: tiered retrieval, proposals before commit, and JSON-friendly automation. The use cases are infinite in business, research, legal, creative, personal life and more. We are curious to see how bridges may evolve.</p> |
| 1579 | <p>Connect with our fellow community projects and partners to create an incredible future with supercharged tools. Adjust at will to fit your needs.</p> |
| 1580 | <details class="flow-details"> |
| 1581 | <summary>Technical details and links</summary> |
| 1582 | <div class="detail-inner"> |
| 1583 | <p><strong>Stack roles (from <a href="https://github.com/aaronrene/knowtation/blob/main/docs/ECOSYSTEM-VISION.md" target="_blank" rel="noopener">ECOSYSTEM-VISION.md</a>):</strong></p> |
| 1584 | <ul> |
| 1585 | <li><strong>Knowtation</strong> — Vaults, semantic search, Hub, MCP/CLI (<a href="https://github.com/aaronrene/knowtation/blob/main/docs/WHITEPAPER.md" target="_blank" rel="noopener">WHITEPAPER.md</a>)</li> |
| 1586 | <li><strong>Muse / MuseHub</strong> — Domain-agnostic VCS, MuseHub collaboration — <a href="https://github.com/cgcardona/muse" target="_blank" rel="noopener">github.com/cgcardona/muse</a>, <a href="https://staging.musehub.ai/explore" target="_blank" rel="noopener">MuseHub (staging)</a></li> |
| 1587 | <li><strong>AgentCeption</strong> — Brain dump → plan → issues → agents — <a href="https://github.com/cgcardona/agentception" target="_blank" rel="noopener">github.com/cgcardona/agentception</a></li> |
| 1588 | </ul> |
| 1589 | <p><strong>Knowtation integration:</strong> <a href="https://github.com/aaronrene/knowtation/blob/main/docs/AGENT-INTEGRATION.md" target="_blank" rel="noopener">Agent integration</a> — CLI, MCP, Hub API, proposals, optional external lineage, and hosted MCP in one guide. Multi-agent patterns: <a href="https://github.com/aaronrene/knowtation/blob/main/docs/AGENT-ORCHESTRATION.md" target="_blank" rel="noopener">AGENT-ORCHESTRATION.md</a>.</p> |
| 1590 | <p class="ecosystem-doc-link-hint">Full narrative, use cases, triple loop, and phasing: <a href="https://github.com/aaronrene/knowtation/blob/main/docs/ECOSYSTEM-VISION.md" target="_blank" rel="noopener">docs/ECOSYSTEM-VISION.md</a></p> |
| 1591 | </div> |
| 1592 | </details> |
| 1593 | </div> |
| 1594 | </section> |
| 1595 | |
| 1596 | <section class="value-pitch wide" id="structured-memory-main" aria-labelledby="value-pitch-title"> |
| 1597 | <div class="value-pitch-inner"> |
| 1598 | <div class="ecosystem-vision-heading-wrap"> |
| 1599 | <h2 id="value-pitch-title" class="flow-intro-title structured-memory-heading">Structured memory for humans and agents</h2> |
| 1600 | </div> |
| 1601 | <p class="value-pitch-lead"> |
| 1602 | Your <strong>owned</strong>, <strong>indexed</strong> notes—optional <strong>time</strong>, <strong>chains</strong>, <strong>episodes</strong>, and <strong>entities</strong>—plus a deep <strong>MCP</strong> surface for assistants that support it. |
| 1603 | </p> |
| 1604 | <ul class="value-pitch-root-list"> |
| 1605 | <li>Root Solution</li> |
| 1606 | <li>Semantic search</li> |
| 1607 | <li>Agent proposals with human review</li> |
| 1608 | <li>Team roles</li> |
| 1609 | <li>Scoped vaults</li> |
| 1610 | <li>Memory consolidation</li> |
| 1611 | <li>Causal-temporal structure</li> |
| 1612 | <li>More than a trim pass on chat or terminal logs.</li> |
| 1613 | </ul> |
| 1614 | <div class="value-pitch-grid"> |
| 1615 | <div class="value-blurb"> |
| 1616 | <h3>Depth you can use</h3> |
| 1617 | <ul> |
| 1618 | <li>Causal chains, episodes, entities, snapshots, and summary notes when you add frontmatter.</li> |
| 1619 | <li>Agent tools such as semantic neighbors, wikilinks, tasks, clustering, and tag suggestions.</li> |
| 1620 | <li>Hosted prompts and memory flows for long-running work (see docs for full lists).</li> |
| 1621 | <li><strong>Imports, capture, transcribe</strong> — one indexed vault for humans and agents.</li> |
| 1622 | </ul> |
| 1623 | <details class="landing-details"> |
| 1624 | <summary>Technical pointers</summary> |
| 1625 | <div class="landing-details-body"> |
| 1626 | Start with <a href="https://github.com/aaronrene/knowtation/blob/main/docs/INTENTION-AND-TEMPORAL.md" target="_blank" rel="noopener">Intention and temporal</a>, |
| 1627 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/PARITY-MATRIX-HOSTED.md" target="_blank" rel="noopener">Hosted parity matrix</a>, and |
| 1628 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/PARITY-MATRIX-HOSTED.md" target="_blank" rel="noopener">Hosted MCP parity matrix</a>. |
| 1629 | </div> |
| 1630 | </details> |
| 1631 | </div> |
| 1632 | <div class="value-blurb"> |
| 1633 | <h3>Agents suggest. Humans approve.</h3> |
| 1634 | <ul> |
| 1635 | <li><strong>Proposals</strong> stay out of the canonical vault until reviewers pass rubrics and admins apply changes.</li> |
| 1636 | <li>Built for teams that need <strong>audit trails</strong>, <strong>roles</strong>, and optional <strong>LLM review hints</strong>—not silent AI overwrites.</li> |
| 1637 | <li>Same AI speed with a <strong>human gate</strong>, optional <strong>rubrics</strong>, and a durable <strong>paper trail</strong> from propose → evaluate → approve.</li> |
| 1638 | <li><strong>Scoped roles</strong> — viewer, editor, evaluator, admin — so each person only touches what their job allows.</li> |
| 1639 | </ul> |
| 1640 | <details class="landing-details"> |
| 1641 | <summary>How proposals work (API)</summary> |
| 1642 | <div class="landing-details-body"> |
| 1643 | Agents and editors create rows via <code>POST /api/v1/proposals</code>; humans evaluate; approve writes the vault. |
| 1644 | See <a href="https://github.com/aaronrene/knowtation/blob/main/docs/PROPOSAL-LIFECYCLE.md" target="_blank" rel="noopener">Proposal lifecycle</a> and |
| 1645 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/AGENT-INTEGRATION.md" target="_blank" rel="noopener">Agent integration §4</a>. |
| 1646 | </div> |
| 1647 | </details> |
| 1648 | </div> |
| 1649 | </div> |
| 1650 | <p class="value-pill-caption" id="value-pill-caption-main">Glossary chips — concepts you can combine</p> |
| 1651 | <ul class="value-pill-row" role="list" aria-labelledby="value-pill-caption-main"> |
| 1652 | <li role="listitem">Semantic search</li> |
| 1653 | <li role="listitem">Keyword search</li> |
| 1654 | <li role="listitem">Causal chain</li> |
| 1655 | <li role="listitem">Episode</li> |
| 1656 | <li role="listitem">Entity</li> |
| 1657 | <li role="listitem">Snapshot</li> |
| 1658 | <li role="listitem">Summarizes</li> |
| 1659 | <li role="listitem">Consolidate</li> |
| 1660 | <li role="listitem">Discover</li> |
| 1661 | <li role="listitem">Evaluate</li> |
| 1662 | <li role="listitem">Propose</li> |
| 1663 | <li role="listitem">Approve</li> |
| 1664 | <li role="listitem">MCP prompt</li> |
| 1665 | <li role="listitem">Wikilink</li> |
| 1666 | <li role="listitem">Memory event</li> |
| 1667 | <li role="listitem">Temporal summary</li> |
| 1668 | <li role="listitem">Resume session</li> |
| 1669 | <li role="listitem">Knowledge gap</li> |
| 1670 | <li role="listitem">Capture</li> |
| 1671 | <li role="listitem">Import</li> |
| 1672 | <li role="listitem">Rubric</li> |
| 1673 | <li role="listitem">Scoped access</li> |
| 1674 | <li role="listitem">Multi-vault</li> |
| 1675 | <li role="listitem">Transcribe</li> |
| 1676 | <li role="listitem">Attestation</li> |
| 1677 | <li role="listitem">Indexed vault</li> |
| 1678 | <li role="listitem">Relate</li> |
| 1679 | <li role="listitem">Cluster</li> |
| 1680 | <li role="listitem">Tag suggest</li> |
| 1681 | <li role="listitem">Enrich</li> |
| 1682 | <li role="listitem">Extract tasks</li> |
| 1683 | </ul> |
| 1684 | </div> |
| 1685 | </section> |
| 1686 | |
| 1687 | <div class="flow-intro-block flow-intro-block--after-ecosystem"> |
| 1688 | <p class="flow-intro-title">Control, customize and own your data, agents, memory, and backup.</p> |
| 1689 | <p class="flow-intro-sub flow-intro-sub--accent">Discover new paths with cross-topic insights</p> |
| 1690 | </div> |
| 1691 | |
| 1692 | <section class="flow-track wide" aria-label="How Knowtation works"> |
| 1693 | <article class="flow-step"> |
| 1694 | <div class="flow-visual"> |
| 1695 | <p class="flow-step-num">Step 1</p> |
| 1696 | <span class="flow-icon" aria-hidden="true">🔐</span> |
| 1697 | <p class="flow-visual-caption">Sign in, invite teammates, pick who sees what.</p> |
| 1698 | </div> |
| 1699 | <div class="flow-body"> |
| 1700 | <h2>Sign in and set scope</h2> |
| 1701 | <p>Use Google or GitHub to open the hosted Hub. Add people with viewer, editor, or admin roles. Multi-vault setups let each team or project keep its own boundary while you stay in one account. <strong>Teams are included at no additional cost.</strong></p> |
| 1702 | <details class="flow-details"> |
| 1703 | <summary>Technical details</summary> |
| 1704 | <div class="detail-inner"> |
| 1705 | <p>Hosted auth flows through the gateway; JWTs carry user id and role for API and Hub UI. Self-hosted Hub uses the same role model with <code>data/hub_roles.json</code> and optional invites.</p> |
| 1706 | <ul> |
| 1707 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/TEAMS-AND-COLLABORATION.md" target="_blank" rel="noopener">Teams and collaboration</a></li> |
| 1708 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/TWO-PATHS-HOSTED-AND-SELF-HOSTED.md" target="_blank" rel="noopener">Hosted vs self-hosted paths</a></li> |
| 1709 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/HUB-API.md" target="_blank" rel="noopener">Hub API and JWT</a></li> |
| 1710 | </ul> |
| 1711 | </div> |
| 1712 | </details> |
| 1713 | </div> |
| 1714 | </article> |
| 1715 | |
| 1716 | <article class="flow-step"> |
| 1717 | <div class="flow-visual"> |
| 1718 | <p class="flow-step-num">Step 2</p> |
| 1719 | <span class="flow-icon" aria-hidden="true">📥</span> |
| 1720 | <p class="flow-visual-caption">Stream messages to your inbox and pull exports into one vault.</p> |
| 1721 | <p class="flow-import-icons" aria-label="Live capture channels"> |
| 1722 | <span class="flow-import-icon">💬 Slack</span> |
| 1723 | <span class="flow-import-icon">🎮 Discord</span> |
| 1724 | <span class="flow-import-icon">✈️ Telegram</span> |
| 1725 | <span class="flow-import-icon">📱 WhatsApp</span> |
| 1726 | </p> |
| 1727 | <p class="flow-import-icons" aria-label="Supported import sources"> |
| 1728 | <span class="flow-import-icon">🤖 ChatGPT</span> |
| 1729 | <span class="flow-import-icon">🧠 Claude</span> |
| 1730 | <span class="flow-import-icon">💾 Mem0</span> |
| 1731 | <span class="flow-import-icon">📝 Notion</span> |
| 1732 | <span class="flow-import-icon">🎫 Jira</span> |
| 1733 | <span class="flow-import-icon">📓 NotebookLM</span> |
| 1734 | <span class="flow-import-icon">📁 Google Drive</span> |
| 1735 | <span class="flow-import-icon">📋 Linear</span> |
| 1736 | <span class="flow-import-icon">🔗 MIF</span> |
| 1737 | <span class="flow-import-icon">📄 Markdown</span> |
| 1738 | <span class="flow-import-icon">🎙️ Audio</span> |
| 1739 | <span class="flow-import-icon">💰 Wallet CSV</span> |
| 1740 | <span class="flow-import-icon">🗄️ Supabase</span> |
| 1741 | <span class="flow-import-icon">🦞 OpenClaw</span> |
| 1742 | </p> |
| 1743 | </div> |
| 1744 | <div class="flow-body"> |
| 1745 | <h2>Capture and import</h2> |
| 1746 | <p><strong>Capture</strong> sends Slack, Discord, Telegram, or WhatsApp (via automation) straight to your inbox through the Hub. <strong>Import</strong> brings batch exports—chats, docs, tickets, audio, wallet CSVs—into the same Markdown vault. Webhooks and adapters write inbox notes automatically; you keep the files.</p> |
| 1747 | <details class="flow-details"> |
| 1748 | <summary>Technical details</summary> |
| 1749 | <div class="detail-inner"> |
| 1750 | <p class="flow-detail-heading">Capture (messages → inbox)</p> |
| 1751 | <p>Hub endpoint: <code>POST /api/v1/capture</code> with JSON. Optional: set <code>CAPTURE_WEBHOOK_SECRET</code> in Hub env and send header <code>X-Webhook-Secret</code>.</p> |
| 1752 | <div class="flow-import-grid"> |
| 1753 | <span class="flow-import-tile">💬 <strong>Slack</strong><br><small>Adapter port 3132; <code>SLACK_SIGNING_SECRET</code></small></span> |
| 1754 | <span class="flow-import-tile">🎮 <strong>Discord</strong><br><small>Adapter port 3133; webhook or bot</small></span> |
| 1755 | <span class="flow-import-tile">✈️ <strong>Telegram</strong><br><small>Adapter port 3134; bot → capture</small></span> |
| 1756 | <span class="flow-import-tile">📱 <strong>WhatsApp</strong><br><small>Zapier / n8n → POST capture</small></span> |
| 1757 | </div> |
| 1758 | <p>Run a capture adapter (<code>scripts/capture-slack-adapter.mjs</code>, <code>capture-discord-adapter.mjs</code>, <code>capture-telegram-adapter.mjs</code>) or any automation that maps events to the capture format. Example body: <code>{"body":"text","source":"slack"}</code>. Full contract: <a href="https://github.com/aaronrene/knowtation/blob/main/docs/CAPTURE-CONTRACT.md" target="_blank" rel="noopener">Capture contract</a>; platform wiring: <a href="https://github.com/aaronrene/knowtation/blob/main/docs/MESSAGING-INTEGRATION.md" target="_blank" rel="noopener">Messaging integration</a>.</p> |
| 1759 | <p class="flow-detail-heading">Batch import (exports and files)</p> |
| 1760 | <p>Importers normalize to vault notes with <code>source</code>, <code>source_id</code>, and <code>date</code> for idempotent re-runs. Supabase memory tables can be imported for users coming from database-centric stacks.</p> |
| 1761 | <div class="flow-import-grid"> |
| 1762 | <span class="flow-import-tile">🤖 <strong>ChatGPT</strong><br><small>ZIP or folder export</small></span> |
| 1763 | <span class="flow-import-tile">🧠 <strong>Claude</strong><br><small>Chat + memory export</small></span> |
| 1764 | <span class="flow-import-tile">💾 <strong>Mem0</strong><br><small>JSON memory export</small></span> |
| 1765 | <span class="flow-import-tile">📝 <strong>Notion</strong><br><small>API; page IDs + key</small></span> |
| 1766 | <span class="flow-import-tile">🎫 <strong>Jira</strong><br><small>CSV export</small></span> |
| 1767 | <span class="flow-import-tile">📓 <strong>NotebookLM</strong><br><small>Markdown or JSON</small></span> |
| 1768 | <span class="flow-import-tile">📁 <strong>Google Drive</strong><br><small>Markdown folder</small></span> |
| 1769 | <span class="flow-import-tile">📋 <strong>Linear</strong><br><small>CSV export</small></span> |
| 1770 | <span class="flow-import-tile">🔗 <strong>MIF</strong><br><small>Memory Interchange</small></span> |
| 1771 | <span class="flow-import-tile">📄 <strong>Markdown</strong><br><small>File or folder</small></span> |
| 1772 | <span class="flow-import-tile">🎙️ <strong>Audio</strong><br><small>Whisper transcription</small></span> |
| 1773 | <span class="flow-import-tile">💰 <strong>Wallet CSV</strong><br><small>Tx history; 11 formats</small></span> |
| 1774 | <span class="flow-import-tile">🗄️ <strong>Supabase</strong><br><small>Memory table import</small></span> |
| 1775 | <span class="flow-import-tile">🦞 <strong>OpenClaw</strong><br><small>Agent memory + chats</small></span> |
| 1776 | <span class="flow-import-tile">🪶 <strong>Hermes Agent</strong><br><small>Agent memory + profile</small></span> |
| 1777 | <span class="flow-import-tile">📥 <strong>Imports</strong><br><small>Local files & team uploads</small></span> |
| 1778 | </div> |
| 1779 | <ul> |
| 1780 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/IMPORT-SOURCES.md" target="_blank" rel="noopener">All import sources and formats</a></li> |
| 1781 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/CAPTURE-CONTRACT.md" target="_blank" rel="noopener">Capture contract (webhooks, adapters)</a></li> |
| 1782 | <li>Digital wallet and exchange CSVs → per-transaction notes with chain and address metadata (see Import Sources)</li> |
| 1783 | </ul> |
| 1784 | </div> |
| 1785 | </details> |
| 1786 | </div> |
| 1787 | </article> |
| 1788 | |
| 1789 | <article class="flow-step"> |
| 1790 | <div class="flow-visual"> |
| 1791 | <p class="flow-step-num">Step 3</p> |
| 1792 | <span class="flow-icon" aria-hidden="true">📚</span> |
| 1793 | <p class="flow-visual-caption">Starter vault layouts and agent skill packs—before agents run wide.</p> |
| 1794 | </div> |
| 1795 | <div class="flow-body"> |
| 1796 | <h2>Templates and Skills</h2> |
| 1797 | <p><strong>Templates</strong> are example folders and notes you copy or seed into a vault. <strong>Skill packs</strong> are agent playbooks (Cursor and similar) that say how to search, which MCP prompts to use, and how outputs should look. Together they give you a sane default between importing data and letting agents work the vault.</p> |
| 1798 | <details class="flow-details"> |
| 1799 | <summary>Technical details</summary> |
| 1800 | <div class="detail-inner"> |
| 1801 | <p class="flow-detail-heading">Vault templates</p> |
| 1802 | <p>Each template lives under <code>vault/templates/<name>/</code> with a README and sample notes. Hosted: set <code>KNOWTATION_HUB_URL</code>, <code>KNOWTATION_HUB_TOKEN</code>, then <code>npm run seed:template-research-lab</code> (or <code>business-ops</code>, <code>finance</code>, <code>engineering-team</code>, <code>personal-knowledge</code>, <code>smart-home</code>, <code>content-creation</code>, <code>education</code>).</p> |
| 1803 | <ul> |
| 1804 | <li><strong>Research lab</strong> — literature, protocols, experiments, meetings</li> |
| 1805 | <li><strong>Business ops</strong> — decisions, customers, playbooks, competitive</li> |
| 1806 | <li><strong>Finance</strong> — thesis, positions, transactions, tax, reports</li> |
| 1807 | <li><strong>Engineering team</strong> — architecture, runbooks, incidents, retros</li> |
| 1808 | <li><strong>Personal knowledge</strong> — inbox, projects, areas, journal</li> |
| 1809 | <li><strong>Smart home</strong> — devices, automations, energy, maintenance</li> |
| 1810 | <li><strong>Content creation</strong> — drafts, research, outlines, style guide</li> |
| 1811 | <li><strong>Education</strong> — courses, assignments, study notes, schedule</li> |
| 1812 | </ul> |
| 1813 | <p class="flow-detail-heading">Skill packs</p> |
| 1814 | <p>Domain skills: <strong>research-assistant</strong>, <strong>business-analyst</strong>, <strong>financial-ops</strong>. Marketing pipeline (seven): <strong>marketing-research</strong>, <strong>marketing-strategy</strong>, <strong>marketing-writer</strong>, <strong>marketing-editor</strong>, <strong>marketing-visual</strong>, <strong>marketing-distribution</strong>, <strong>marketing-analytics</strong>. Files live under <code>.cursor/skills/packs/<name>/SKILL.md</code>; they compose with MCP prompts and the base knowtation skill.</p> |
| 1815 | <ul> |
| 1816 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/TEMPLATES-AND-SKILLS.md" target="_blank" rel="noopener">Templates and skills — architecture, lists, seed and activation</a></li> |
| 1817 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/POPULAR-PROMPTS-AND-STARTERS.md" target="_blank" rel="noopener">Popular prompts and copy-paste starters</a> — MCP prompt names, any-LLM blocks, CLI one-liners (wiki, research, and more)</li> |
| 1818 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/SHOWCASE-VAULT.md" target="_blank" rel="noopener">Showcase vault and seed scripts</a></li> |
| 1819 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/AGENT-INTEGRATION.md" target="_blank" rel="noopener">Agent integration</a> (CLI, MCP, Hub API)</li> |
| 1820 | </ul> |
| 1821 | </div> |
| 1822 | </details> |
| 1823 | </div> |
| 1824 | </article> |
| 1825 | |
| 1826 | <article class="flow-step"> |
| 1827 | <div class="flow-visual"> |
| 1828 | <p class="flow-step-num">Step 4</p> |
| 1829 | <span class="flow-icon" aria-hidden="true">🤖</span> |
| 1830 | <p class="flow-visual-caption">Agents get the right context, not the whole vault.</p> |
| 1831 | </div> |
| 1832 | <div class="flow-body"> |
| 1833 | <h2>Agent flow: context, memory, cost</h2> |
| 1834 | <p>Agents connect through a large MCP surface and the same CLI you use. They are guided to search narrowly, then open specific notes. Memory prompts remind them what already happened so they skip redundant work. That pattern saves tokens and improves answers.</p> |
| 1835 | <details class="flow-details"> |
| 1836 | <summary>Technical details</summary> |
| 1837 | <div class="detail-inner"> |
| 1838 | <p>Knowtation ships many MCP tools (search, get-note, memory store/query/consolidate, proposals, and more), resources (vault listings, media URIs, config snapshots), and prompts for workflows like briefs, meetings, and session resume. Hosted MCP adds OAuth-gated access aligned with Hub roles.</p> |
| 1839 | <p><strong>Token savings (operational layer).</strong> Beyond “search small, then open one note,” the product now wires savings into hosted and self-hosted operation: consolidation passes and quotas by plan, optional Discover inside the same consolidate run, advanced knobs (lookback, max events/topics, output token cap) persisted on billing records when hosted and in <code>config/local.yaml</code> when self-hosted, encrypt-aware consolidation prompts when memory encryption is on, and hosted MCP <code>search</code> over HTTP POST with parity fields so agents can keep payloads small in the browser path too.</p> |
| 1840 | <ul> |
| 1841 | <li>Two-step retrieval: <code>search</code> with <code>--fields</code>, <code>--limit</code>, filters → then <code>get_note</code> for bodies</li> |
| 1842 | <li>Memory-aware prompts: <code>memory-context</code>, <code>memory-informed-search</code>, <code>resume-session</code></li> |
| 1843 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/TOKEN-SAVINGS.md" target="_blank" rel="noopener">Token savings program</a> (consolidation, Discover, advanced knobs, hosted metering)</li> |
| 1844 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/RETRIEVAL-AND-CLI-REFERENCE.md" target="_blank" rel="noopener">Retrieval and CLI reference</a></li> |
| 1845 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/AGENT-INTEGRATION.md" target="_blank" rel="noopener">Agent integration</a></li> |
| 1846 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/POPULAR-PROMPTS-AND-STARTERS.md" target="_blank" rel="noopener">Popular prompts and copy-paste starters</a> (MCP recipes, any-LLM text, CLI)</li> |
| 1847 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/TEMPLATES-AND-SKILLS.md" target="_blank" rel="noopener">Starter vault templates and agent skill packs</a> — pre-built domain structures and agent playbooks for research, business, finance, marketing, education, and more</li> |
| 1848 | </ul> |
| 1849 | </div> |
| 1850 | </details> |
| 1851 | </div> |
| 1852 | </article> |
| 1853 | |
| 1854 | <article class="flow-step"> |
| 1855 | <div class="flow-visual"> |
| 1856 | <p class="flow-step-num">Step 5</p> |
| 1857 | <span class="flow-icon" aria-hidden="true">🧠</span> |
| 1858 | <p class="flow-visual-caption">Re-index when content changes; compress memory; Discover cross-topic insights.</p> |
| 1859 | </div> |
| 1860 | <div class="flow-body"> |
| 1861 | <h2>Index, re-index, consolidate</h2> |
| 1862 | <p>After imports or edits, indexing refreshes vectors so search stays accurate. A consolidation engine merges memory events into compact facts, verifies them against the vault, and can run an optional <strong>Discover</strong> pass that <strong>discovers cross-topic insights</strong> — patterns, tensions, and follow-ups across topics — on a schedule you control, with billing-aware limits when hosted. <strong>Discover is optional:</strong> when enabled, it enriches memory so agents load sharper, wider context in later sessions without pasting the whole vault into the prompt.</p> |
| 1863 | <details class="flow-details"> |
| 1864 | <summary>Technical details</summary> |
| 1865 | <div class="detail-inner"> |
| 1866 | <p>Indexer writes chunks to Qdrant or sqlite-vec. Consolidation runs consolidate, verify, and optional Discover — <strong>Discover discovers cross-topic insights</strong> by emitting <code>insight</code> events that connect themes a single-topic merge would miss. Cost guardrails apply throughout. Hosted mode persists advanced knobs through billing and gateway settings; Discover runs inside the same consolidate request (not a second pass count) when turned on.</p> |
| 1867 | <ul> |
| 1868 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/MEMORY-CONSOLIDATION-GUIDE.md" target="_blank" rel="noopener">Memory consolidation guide</a></li> |
| 1869 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/DAEMON-CONSOLIDATION-SPEC.md" target="_blank" rel="noopener">Daemon consolidation spec</a></li> |
| 1870 | <li>CLI: <code>npm run index</code>; API routes under <code>/api/v1/memory/consolidate</code> (self-hosted Hub)</li> |
| 1871 | </ul> |
| 1872 | </div> |
| 1873 | </details> |
| 1874 | </div> |
| 1875 | </article> |
| 1876 | |
| 1877 | <article class="flow-step"> |
| 1878 | <div class="flow-visual"> |
| 1879 | <p class="flow-step-num">Step 6</p> |
| 1880 | <span class="flow-icon" aria-hidden="true">🐙</span> |
| 1881 | <p class="flow-visual-caption">Tie the vault to GitHub for history and portability.</p> |
| 1882 | </div> |
| 1883 | <div class="flow-body"> |
| 1884 | <h2>GitHub backup to your vault</h2> |
| 1885 | <p>Connect a repository so your vault — notes and media — is backed up and versioned the way engineers already work. Your canonical story stays in plain files and commits under your control, not an opaque database export.</p> |
| 1886 | <details class="flow-details"> |
| 1887 | <summary>Technical details</summary> |
| 1888 | <div class="detail-inner"> |
| 1889 | <p>The Hub and bridge coordinate OAuth to GitHub, commits for backup, and (where configured) image upload paths. Proposals and review queues align with human-in-the-loop changes before writes land in the vault.</p> |
| 1890 | <ul> |
| 1891 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/PROVENANCE-AND-GIT.md" target="_blank" rel="noopener">Provenance and Git</a></li> |
| 1892 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/hub/gateway/README.md" target="_blank" rel="noopener">Gateway deploy (hosted)</a></li> |
| 1893 | </ul> |
| 1894 | </div> |
| 1895 | </details> |
| 1896 | </div> |
| 1897 | </article> |
| 1898 | |
| 1899 | <article class="flow-step"> |
| 1900 | <div class="flow-visual"> |
| 1901 | <p class="flow-step-num">Step 7</p> |
| 1902 | <span class="flow-icon" aria-hidden="true">⬡</span> |
| 1903 | <p class="flow-visual-caption">Hosted data on ICP; or run everything yourself.</p> |
| 1904 | </div> |
| 1905 | <div class="flow-body"> |
| 1906 | <h2>Decentralized and self-hosted</h2> |
| 1907 | <p>Hosted vaults can live on Internet Computer canisters with a gateway in front. Prefer your own machines? The same project runs locally with full control over config, keys, and network boundaries.</p> |
| 1908 | <details class="flow-details"> |
| 1909 | <summary>Technical details</summary> |
| 1910 | <div class="detail-inner"> |
| 1911 | <p>Motoko canisters store note payloads and proposal records; the gateway proxies with JWT verification and rate limits. Attestation records can be HMAC-signed and optionally anchored on-chain for audit.</p> |
| 1912 | <ul> |
| 1913 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/WHITEPAPER.md" target="_blank" rel="noopener">Whitepaper (architecture and trust)</a></li> |
| 1914 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/SELF-HOSTED-SETUP-CHECKLIST.md" target="_blank" rel="noopener">Self-hosted checklist</a></li> |
| 1915 | <li>ICP canister code under <code>hub/icp/</code> in the repo</li> |
| 1916 | </ul> |
| 1917 | </div> |
| 1918 | </details> |
| 1919 | </div> |
| 1920 | </article> |
| 1921 | |
| 1922 | <article class="flow-step"> |
| 1923 | <div class="flow-visual"> |
| 1924 | <p class="flow-step-num">Step 8</p> |
| 1925 | <span class="flow-icon" aria-hidden="true">🌐</span> |
| 1926 | <p class="flow-visual-caption">Use it in the browser from anywhere; share at role granularity.</p> |
| 1927 | </div> |
| 1928 | <div class="flow-body"> |
| 1929 | <h2>Hosted Hub and sharing</h2> |
| 1930 | <p>The web Hub is the friendly face: browse, search, edit, imports, settings, and billing when you use the hosted service. Team members see only what their role allows; you are not sharing a single password to a pile of notes.</p> |
| 1931 | <details class="flow-details"> |
| 1932 | <summary>Technical details</summary> |
| 1933 | <div class="detail-inner"> |
| 1934 | <p>Stripe-backed plans meter searches, index jobs, consolidation passes, and scale with your tier. The bridge handles vault IO, memory events in serverless deployments, and parity with self-hosted behavior where documented.</p> |
| 1935 | <ul> |
| 1936 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/HUB-API.md" target="_blank" rel="noopener">Hub API</a></li> |
| 1937 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/hub/gateway/README.md" target="_blank" rel="noopener">Deploy gateway (hosted)</a></li> |
| 1938 | </ul> |
| 1939 | </div> |
| 1940 | </details> |
| 1941 | </div> |
| 1942 | </article> |
| 1943 | |
| 1944 | <article class="flow-step"> |
| 1945 | <div class="flow-visual"> |
| 1946 | <p class="flow-step-num">Step 9</p> |
| 1947 | <span class="flow-icon" aria-hidden="true">🏷️</span> |
| 1948 | <p class="flow-visual-caption">Tags, entities, episodes, and causal chains — optional but powerful.</p> |
| 1949 | </div> |
| 1950 | <div class="flow-body"> |
| 1951 | <h2>Structure: entities, episodes, causality</h2> |
| 1952 | <p>Optional frontmatter links notes across time and topic: projects, tags, entities, episode ids, causal chains, and follow-on relationships. Agents and filters use the same fields, so “what happened next?” stays searchable without dumping everything into the prompt.</p> |
| 1953 | <details class="flow-details"> |
| 1954 | <summary>Technical details</summary> |
| 1955 | <div class="detail-inner"> |
| 1956 | <p>Fields are opt-in in Markdown YAML frontmatter. CLI and MCP accept filters such as <code>--entity</code>, <code>--episode</code>, and <code>--chain</code>. See the spec and intention doc for the full schema and examples.</p> |
| 1957 | <ul> |
| 1958 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/INTENTION-AND-TEMPORAL.md" target="_blank" rel="noopener">Intention and temporal fields</a></li> |
| 1959 | <li><a href="https://github.com/aaronrene/knowtation/blob/main/docs/SPEC.md" target="_blank" rel="noopener">SPEC (frontmatter and CLI)</a></li> |
| 1960 | </ul> |
| 1961 | </div> |
| 1962 | </details> |
| 1963 | </div> |
| 1964 | </article> |
| 1965 | </section> |
| 1966 | |
| 1967 | <div class="flow-closing container"> |
| 1968 | <p><strong style="color: var(--text);">Read the full story</strong> in the whitepaper — thesis, token levers, imports, memory providers, attestation, and billing model.</p> |
| 1969 | <div class="cta-row"> |
| 1970 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/WHITEPAPER.md" class="cta" target="_blank" rel="noopener">Whitepaper</a> |
| 1971 | <a href="https://github.com/aaronrene/knowtation/blob/main/README.md" class="cta cta-secondary" target="_blank" rel="noopener">README</a> |
| 1972 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/AI-ASSISTED-SETUP.md" class="cta cta-secondary" target="_blank" rel="noopener">AI-assisted setup</a> |
| 1973 | </div> |
| 1974 | </div> |
| 1975 | |
| 1976 | <footer> |
| 1977 | <p class="footer-community"> |
| 1978 | <a href="https://discord.gg/NrtzhZtrED" class="footer-discord-link" target="_blank" rel="noopener noreferrer"> |
| 1979 | <svg class="footer-discord-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" fill="currentColor"> |
| 1980 | <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.168 0 2.176 1.096 2.157 2.42 0 1.333-.948 2.418-2.157 2.418z"/> |
| 1981 | </svg> |
| 1982 | <strong>Join the community</strong> |
| 1983 | </a> |
| 1984 | </p> |
| 1985 | <div class="footer-social-icons" role="navigation" aria-label="YouTube and X"> |
| 1986 | <a href="https://www.youtube.com/@Knowtation" target="_blank" rel="noopener noreferrer" aria-label="Knowtation on YouTube" title="YouTube"> |
| 1987 | <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg> |
| 1988 | </a> |
| 1989 | <a href="https://x.com/Knowtation1111" target="_blank" rel="noopener noreferrer" aria-label="Knowtation on X (@Knowtation1111)" title="X (Twitter)"> |
| 1990 | <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932L18.901 1.153zm-1.292 19.494h2.039L6.486 3.24H4.298l13.311 17.407z"/></svg> |
| 1991 | </a> |
| 1992 | </div> |
| 1993 | <p><a href="https://github.com/aaronrene/knowtation">Knowtation</a> — Your notes, your data, your context.</p> |
| 1994 | <div class="footer-links"> |
| 1995 | <a href="/hub/">Hub</a> |
| 1996 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/GETTING-STARTED.md" target="_blank" rel="noopener">Getting started</a> |
| 1997 | <a href="https://github.com/aaronrene/knowtation/blob/main/docs/AGENT-ORCHESTRATION.md" target="_blank" rel="noopener">Agent orchestration</a> |
| 1998 | </div> |
| 1999 | </footer> |
| 2000 | |
| 2001 | <script> |
| 2002 | (function () { |
| 2003 | var key = 'knowtation-theme'; |
| 2004 | var root = document.documentElement; |
| 2005 | var meta = document.querySelector('meta[name="theme-color"]'); |
| 2006 | var btn = document.getElementById('theme-toggle'); |
| 2007 | var icon = btn && btn.querySelector('.theme-toggle-icon'); |
| 2008 | var label = btn && btn.querySelector('.theme-toggle-label'); |
| 2009 | |
| 2010 | function currentTheme() { |
| 2011 | return root.getAttribute('data-theme') === 'light' ? 'light' : 'dark'; |
| 2012 | } |
| 2013 | |
| 2014 | function syncThemeButton() { |
| 2015 | if (!btn) return; |
| 2016 | var isDark = currentTheme() === 'dark'; |
| 2017 | btn.setAttribute('aria-pressed', isDark ? 'true' : 'false'); |
| 2018 | btn.setAttribute('aria-label', isDark ? 'Switch to light theme' : 'Switch to dark theme'); |
| 2019 | if (icon) icon.textContent = isDark ? '🌙' : '☀️'; |
| 2020 | if (label) label.textContent = isDark ? 'Night' : 'Day'; |
| 2021 | } |
| 2022 | |
| 2023 | function applyTheme(theme) { |
| 2024 | root.setAttribute('data-theme', theme); |
| 2025 | try { localStorage.setItem(key, theme); } catch (e) {} |
| 2026 | if (meta) meta.setAttribute('content', theme === 'light' ? '#f5f7fb' : '#0a192f'); |
| 2027 | syncThemeButton(); |
| 2028 | } |
| 2029 | |
| 2030 | syncThemeButton(); |
| 2031 | if (btn) { |
| 2032 | btn.addEventListener('click', function () { |
| 2033 | applyTheme(currentTheme() === 'dark' ? 'light' : 'dark'); |
| 2034 | }); |
| 2035 | } |
| 2036 | })(); |
| 2037 | |
| 2038 | (function () { |
| 2039 | var host = typeof location !== 'undefined' && location.hostname; |
| 2040 | var gateway = (host === 'knowtation.store' || host === 'www.knowtation.store') |
| 2041 | ? 'https://knowtation-gateway.netlify.app' |
| 2042 | : (typeof location !== 'undefined' ? location.origin : ''); |
| 2043 | document.querySelectorAll('.cta-signin').forEach(function (a) { |
| 2044 | var p = a.getAttribute('data-provider'); |
| 2045 | if (gateway && p) a.href = gateway + '/auth/login?provider=' + p; |
| 2046 | }); |
| 2047 | })(); |
| 2048 | </script> |
| 2049 | </body> |
| 2050 | </html> |