diff --git a/assets/bitblocks.css b/assets/bitblocks.css index 0b5b70b..0d4c5ee 100644 --- a/assets/bitblocks.css +++ b/assets/bitblocks.css @@ -176,6 +176,30 @@ section { border-top: 1px solid var(--line); } .flow .node .sq { width: 20px; height: 20px; background: var(--bc); margin-bottom: 12px; } .flow .node .nm { font-weight: 720; font-size: 18px; letter-spacing: -0.01em; } .flow .node .role { color: var(--muted); font-size: 13px; margin-top: 3px; } + +/* Layered architecture diagram (§03): substrate -> primitives -> apps. */ +.arch { margin-top: 4px; } +.tier { border: 1px solid var(--line); background: var(--surface); } +.tier .tk { display: block; font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 13px 18px; } +.tier-row { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); } +.tier-row.n4 { grid-template-columns: repeat(4, 1fr); } +.tier-row.n3 { grid-template-columns: repeat(3, 1fr); } +.tier-row.n2 { grid-template-columns: repeat(2, 1fr); } +.arch .cell { background: var(--surface); padding: 20px 18px; display: flex; flex-direction: column; gap: 3px; position: relative; text-decoration: none; color: var(--ink); overflow: hidden; } +.arch .cell .sq { width: 18px; height: 18px; background: var(--bc, var(--line)); margin-bottom: 8px; } +.arch .cell b { font-weight: 720; font-size: 17px; letter-spacing: -0.01em; font-variation-settings: 'wdth' 90; } +.arch .cell span { color: var(--muted); font-size: 12.5px; } +.arch a.cell::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bc); transform: scaleY(0.25); transition: transform 0.25s; } +.arch a.cell:hover { background: color-mix(in srgb, var(--bc) 8%, transparent); } +.arch a.cell:hover::before { transform: scaleY(1); } +.arch .cell.ghost { background: repeating-linear-gradient(135deg, transparent, transparent 7px, var(--line-soft) 7px, var(--line-soft) 8px); } +.arch .cell.ghost .sq { background: var(--line); } +.arch .cell.ghost b { color: var(--muted); } +.tier-join { text-align: center; font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 9px 0; } +@media (max-width: 700px) { .tier-row.n4, .tier-row.n3, .tier-row.n2 { grid-template-columns: 1fr; } } +/* §02 tier band before the built-with (Tessera) row. */ +.tier-label { padding: 13px 22px; background: var(--paper); border-bottom: 1px solid var(--line); font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } + .compose .note { margin-top: 30px; color: var(--muted); max-width: 66ch; } .compose .note b { color: var(--ink); font-weight: 600; } diff --git a/index.html b/index.html index b623338..05f5d75 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,7 @@ How they fit together -
+
BitLoginwho are you BitGatewhat may you do @@ -79,9 +79,9 @@

§ 02 — the blocks

-

Five primitives.
One per question.

-

Each block is small, opinionated, and independent. Use one, or snap them together — they were - designed to compose, not to depend.

+

Four primitives.
One proof.

+

Four small, independent primitives — identity, policy, feeds, payments. Use one, or snap them + together. Then Tessera proves they compose: a real application built from the four.

@@ -113,6 +113,7 @@ access, and capabilities in bitcoin, with cryptographic proof instead of a payment processor.

bitunlock.network → +
built with the four ↓
Tessera
what you can do

The capability network for agents — Agent Plugins published, curated, and @@ -129,21 +130,43 @@

§ 03 — how they compose

-

A stack, not a suite.

-

Read left to right, they answer the full lifecycle of a sovereign app. Any block can stand - alone; together they interlock.

+

Four primitives.
One proof they compose.

+

Read it bottom to top: an open substrate, four primitives built on it, and applications + assembled from those primitives. The client is the disposable part.

-
-
who are you
BitLogin
a key you hold
-
what may you do
BitGate
policy you set
-
what do you see
BitFeed
an algorithm you write
-
how you're paid
BitUnlock
money you custody
-
what you can do
Tessera
capabilities you own
+
+
+ built with the stack +
+ Tesseraagent capabilities — the worked example +
your appassembled from the same four
+
what's nexta second, unlike application
+
+
+
composed from ↓
+
+ four primitives +
+ BitLoginidentity — who are you + BitGatepolicy — what may you do + BitFeedfeeds — what do you see + BitUnlockpayments — how you're paid +
+
+
built on ↓
+
+ open substrate +
+
Nostrsigned events · public relays
+
Lightningcryptographic payment
+
+

Tessera is the worked example. It signs users in with BitLogin, moderates with BitGate's four dimensions, ranks its feed with BitFeed-shaped recipes, and gates paid - plugins through BitUnlock — a real application assembled entirely from the blocks. Nothing about - it is special-cased; it's just a client over public events, which is the whole point.

+ plugins through BitUnlock — a real application assembled entirely from the four. Nothing about it + is special-cased; it's just a client over public events. Prove the architecture and a second, + unlike app should assemble from the same four the same way.