| :root {
|
| --bg: #000000;
|
| --text: #e6e6e6;
|
| --muted: #6a6a6a;
|
| --dim: #9a9a9a;
|
| --line: #171717;
|
| --code: #8fb8e6;
|
| --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
|
| --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
|
| }
|
|
|
| * { box-sizing: border-box; }
|
| html { scroll-behavior: smooth; }
|
|
|
| body {
|
| margin: 0;
|
| background: var(--bg);
|
| color: var(--text);
|
| font-family: var(--sans);
|
| font-size: 15px;
|
| line-height: 1.7;
|
| -webkit-font-smoothing: antialiased;
|
| }
|
|
|
| ::selection { background: #1f1f1f; }
|
|
|
| .wrap { max-width: 620px; margin: 0 auto; padding: 0 28px; }
|
|
|
|
|
| header { border-bottom: 1px solid var(--line); }
|
| .nav {
|
| max-width: 620px; margin: 0 auto; padding: 18px 28px;
|
| display: flex; align-items: center; justify-content: space-between;
|
| }
|
| .brand {
|
| font-family: var(--mono); font-size: 15px; font-weight: 500;
|
| letter-spacing: 0.5px; color: var(--text); text-decoration: none;
|
| }
|
| .links { display: flex; align-items: center; gap: 18px; }
|
| .links a { color: var(--muted); display: inline-flex; transition: color 0.15s; }
|
| .links a:hover { color: var(--text); }
|
|
|
|
|
| .ca { font-family: var(--mono); font-size: 12px; color: var(--dim); letter-spacing: 0.3px; }
|
| .ca .lbl { color: var(--muted); }
|
|
|
|
|
| .logo { display: flex; justify-content: center; padding: 96px 0 72px; }
|
| .logo img { width: 200px; height: auto; display: block; }
|
|
|
|
|
| .intro { padding-bottom: 8px; }
|
| .intro p { font-size: 17px; line-height: 1.75; color: var(--text); margin: 0; letter-spacing: -0.1px; }
|
|
|
| code {
|
| font-family: var(--mono); font-size: 0.88em; color: #cfcfcf;
|
| background: #0b0b0b; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px;
|
| }
|
|
|
| code.f { color: var(--code); }
|
|
|
| hr { border: none; border-top: 1px solid var(--line); margin: 48px 0; }
|
|
|
|
|
| h2 {
|
| font-family: var(--mono); font-size: 11px; font-weight: 500;
|
| letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
|
| margin: 0 0 20px;
|
| }
|
|
|
|
|
| .lore p { color: var(--dim); margin: 0 0 18px; }
|
| .lore em { font-style: normal; color: var(--text); }
|
| .lore .cite { font-size: 13px; color: var(--muted); margin-top: 24px; }
|
| .lore .cite a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line); }
|
| .lore .cite a:hover { color: var(--text); border-bottom-color: var(--muted); }
|
|
|
|
|
| .diagram { margin: 6px 0 30px; }
|
| .diagram svg { width: 100%; height: auto; display: block; }
|
| .diagram text { font-family: var(--mono); text-anchor: middle; fill: var(--dim); font-size: 12px; }
|
| .diagram .node rect, .diagram .snode circle { fill: #070707; stroke: var(--line2); stroke-width: 1; }
|
| .diagram .node.open rect { stroke-dasharray: 3 4; }
|
| .diagram .node text, .diagram .snode text { fill: var(--text); font-size: 12.5px; }
|
| .diagram .node .sub { fill: var(--muted); font-size: 9.5px; }
|
| .diagram .snode.dead circle { stroke: #333; }
|
| .diagram .snode.dead text { fill: var(--muted); }
|
| .diagram text.acc { fill: var(--code); font-size: 12px; }
|
| .diagram .lab { fill: var(--muted); font-size: 10.5px; }
|
| .diagram line, .diagram path { stroke: #4f4f4f; stroke-width: 1; }
|
| .diagram figcaption { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: center; margin-top: 12px; line-height: 1.5; }
|
|
|
|
|
| .why p, .ledger p { color: var(--dim); margin: 0 0 18px; }
|
| .why p:last-child, .ledger p:last-child { margin-bottom: 0; }
|
|
|
|
|
| .qa { padding: 16px 0; border-top: 1px solid var(--line); }
|
| .qa:first-of-type { border-top: none; padding-top: 0; }
|
| .qa .q { margin: 0 0 6px; color: var(--text); font-size: 14.5px; font-weight: 600; }
|
| .qa .a { margin: 0; color: var(--dim); font-size: 14px; }
|
|
|
|
|
| .mech .step { display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
|
| .mech .step:first-of-type { border-top: none; padding-top: 0; }
|
| .mech .step .n { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 3px; }
|
| .mech h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; color: var(--text); }
|
| .mech .step p { margin: 0; color: var(--dim); font-size: 14px; }
|
|
|
|
|
| .srow { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); align-items: baseline; }
|
| .srow:first-of-type { border-top: none; }
|
| .srow .k { font-family: var(--mono); font-size: 13px; color: var(--muted); }
|
| .srow p { margin: 0; color: var(--dim); font-size: 14px; }
|
|
|
|
|
| .spec dl { margin: 0; font-family: var(--mono); font-size: 13.5px; }
|
| .spec dl > div {
|
| display: grid; grid-template-columns: 130px 1fr; gap: 16px;
|
| padding: 11px 0; border-top: 1px solid var(--line);
|
| }
|
| .spec dl > div:first-child { border-top: none; }
|
| .spec dt { color: var(--muted); }
|
| .spec dd { margin: 0; color: var(--dim); }
|
|
|
|
|
| footer {
|
| max-width: 620px; margin: 96px auto 0; padding: 24px 28px;
|
| border-top: 1px solid var(--line);
|
| display: flex; justify-content: space-between;
|
| font-family: var(--mono); font-size: 12px; color: var(--muted);
|
| }
|
|
|
| @media (max-width: 560px) {
|
| .logo { padding: 64px 0 52px; }
|
| .logo img { width: 160px; }
|
| .intro p { font-size: 16px; }
|
| .spec dl > div,
|
| .srow { grid-template-columns: 92px 1fr; gap: 12px; }
|
| footer { flex-direction: column; gap: 6px; }
|
| }
|
|
|
