/* * hum.metaphi.ai — the token contract. The page and the docs paint only from these. * Two scopes: dark and light. The system's preference paints the page until the reader picks one; then * one attribute on re-skins everything. * Rectangular edges throughout; elevation is a hairline border, never a shadow. The cyan of the wordmark is the one colour. */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #0B0B0A; --well: #131311; /* recessed: code, inputs */ --card: #151513; --fg: #E9E4DA; --fg-strong: #FFFDF7; --fg-muted: #A9A296; --mark: #22D3EE; --mark-wash: rgba(34, 211, 238, 0.10); --border-subtle: rgba(246, 244, 238, 0.10); --border: rgba(246, 244, 238, 0.18); --border-strong: rgba(246, 244, 238, 0.34); --ok: #4ADE80; --warn: #FBBF24; --bad: #F87171; --terminal-bg: #070707; } [data-theme="light"] { color-scheme: light; --bg: #FCFBF8; --well: #F3F1EB; --card: #FFFFFF; --fg: #3E3934; --fg-strong: #171411; --fg-muted: #766E62; --mark: #0E8FA3; --mark-wash: rgba(14, 143, 163, 0.08); --border-subtle: rgba(23, 20, 17, 0.07); --border: rgba(23, 20, 17, 0.12); --border-strong: rgba(23, 20, 17, 0.22); --ok: #16A34A; --warn: #D97706; --bad: #DC2626; --terminal-bg: #171411; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #FCFBF8; --well: #F3F1EB; --card: #FFFFFF; --fg: #3E3934; --fg-strong: #171411; --fg-muted: #766E62; --mark: #0E8FA3; --mark-wash: rgba(14, 143, 163, 0.08); --border-subtle: rgba(23, 20, 17, 0.07); --border: rgba(23, 20, 17, 0.12); --border-strong: rgba(23, 20, 17, 0.22); --ok: #16A34A; --warn: #D97706; --bad: #DC2626; --terminal-bg: #171411; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; } code, pre, kbd, .mono { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; } ::selection { background: var(--mark); color: #0B0B0A; } /* chrome */ .wrap { max-width: 84rem; margin: 0 auto; padding: 0 1.5rem; } .eyebrow { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--fg-muted); } .topbar { border-bottom: 1px solid var(--border-subtle); } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 3.5rem; } .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .brand .word { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: 15px; color: var(--mark); letter-spacing: 0.02em; } .brand .bird { font-family: ui-monospace, Menlo, monospace; font-size: 6px; line-height: 1; color: var(--fg-strong); white-space: pre; } .brand .sub { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-muted); } .links { display: flex; align-items: center; gap: 1.5rem; } .links a { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-muted); text-decoration: none; } .links a:hover, .links a[aria-current] { color: var(--fg-strong); } .theme { appearance: none; background: none; border: 0; padding: 0.35rem; display: inline-flex; color: var(--fg-muted); cursor: pointer; } .theme:hover { color: var(--fg-strong); } .theme .sun { display: none; } .theme .moon { display: block; } [data-theme="dark"] .theme .sun { display: none; } [data-theme="dark"] .theme .moon { display: block; } [data-theme="light"] .theme .sun { display: block; } [data-theme="light"] .theme .moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme .sun { display: block; } :root:not([data-theme="dark"]) .theme .moon { display: none; } } /* buttons and commands */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; border: 1px solid var(--border-strong); padding: 0.7rem 1rem; font-family: ui-monospace, Menlo, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-strong); text-decoration: none; } .btn:hover { background: var(--well); } .btn.primary { background: var(--fg-strong); color: var(--bg); border-color: var(--fg-strong); } .btn.primary:hover { background: var(--mark); border-color: var(--mark); color: #0B0B0A; } .cmd { display: flex; align-items: stretch; border: 1px solid var(--border-strong); background: var(--well); max-width: 34rem; } .cmd .line { flex: 1; min-width: 0; display: flex; gap: 0.75rem; align-items: center; padding: 0.85rem 1rem; font-family: ui-monospace, Menlo, monospace; font-size: 14px; color: var(--fg-strong); overflow-x: auto; white-space: nowrap; } .cmd .line .p { color: var(--fg-muted); } .cmd button { appearance: none; background: none; border: 0; border-left: 1px solid var(--border); padding: 0 1rem; color: var(--fg-muted); cursor: pointer; font-family: ui-monospace, Menlo, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; } .cmd button:hover { color: var(--fg-strong); } /* prose (docs) */ .prose { max-width: 42rem; } .prose h1 { margin: 0.25rem 0 0; font-weight: 200; font-size: 2.6rem; line-height: 1.05; letter-spacing: -0.025em; color: var(--fg-strong); } .prose .lede { margin: 1rem 0 0; font-size: 1.1rem; color: var(--fg-muted); } .prose h2 { margin: 3rem 0 0.75rem; font-weight: 400; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.015em; color: var(--fg-strong); padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); } .prose h3 { margin: 2rem 0 0.5rem; font-weight: 600; font-size: 1.02rem; color: var(--fg-strong); } .prose h2 a, .prose h3 a { text-decoration: none; } .prose p, .prose li { font-size: 15px; line-height: 1.7; } .prose p { margin: 0.75rem 0; } .prose ul, .prose ol { padding-left: 1.25rem; margin: 0.75rem 0; } .prose ol { padding-left: 1.4rem; } .prose li { margin: 0.3rem 0; } .prose li::marker { color: var(--fg-muted); } .prose a { color: var(--fg-strong); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; } .prose a:hover { text-decoration-color: var(--mark); } .prose strong { color: var(--fg-strong); font-weight: 600; } .prose code { font-size: 13px; color: var(--fg-strong); background: var(--well); padding: 0.1em 0.35em; border: 1px solid var(--border-subtle); } .prose pre { margin: 1rem 0; padding: 0.9rem 1.1rem; background: var(--well); border: 1px solid var(--border); overflow-x: auto; font-size: 13px; line-height: 1.65; color: var(--fg-strong); } .prose pre code { background: none; border: 0; padding: 0; font-size: inherit; } .prose .tw { overflow-x: auto; margin: 1rem 0; } .prose table { width: 100%; border-collapse: collapse; margin: 0; font-size: 14px; } .prose th, .prose td { text-align: left; vertical-align: top; padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--border-subtle); } .prose th { font-family: ui-monospace, Menlo, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-muted); font-weight: 400; } .prose td code { white-space: nowrap; } .prose td:first-child { white-space: nowrap; color: var(--fg-strong); } .prose hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 2rem 0; } .prose blockquote { margin: 1rem 0; padding: 0.1rem 1rem; border-left: 2px solid var(--mark); color: var(--fg-muted); } .prose kbd { font-size: 12px; color: var(--fg-strong); border: 1px solid var(--border-strong); padding: 0.05em 0.4em; } /* the docs shell */ .docs { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 13rem; } .docs nav.side { border-right: 1px solid var(--border-subtle); padding: 2rem 1.5rem 3rem 0; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; } .docs nav.side .group { margin-bottom: 1.6rem; } .docs nav.side .group .eyebrow { margin-bottom: 0.6rem; } .docs nav.side a { display: block; padding: 0.3rem 0.7rem; font-size: 14px; color: var(--fg-muted); text-decoration: none; border-left: 2px solid transparent; } .docs nav.side a:hover { color: var(--fg-strong); } .docs nav.side a[aria-current] { color: var(--fg-strong); border-left-color: var(--mark); background: var(--well); } .docs article { padding: 2.5rem 3rem 5rem; min-width: 0; } .docs aside { border-left: 1px solid var(--border-subtle); padding: 2.5rem 0 3rem 1.5rem; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; } .docs aside .eyebrow { margin-bottom: 0.75rem; } .docs aside a { display: block; font-size: 13px; color: var(--fg-muted); text-decoration: none; padding: 0.2rem 0; } .docs aside a:hover, .docs aside a.here { color: var(--fg-strong); } .pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); } .pager a { text-decoration: none; color: var(--fg-muted); font-size: 14px; } .pager a b { display: block; font-weight: 500; color: var(--fg-strong); } .pager a:hover b { color: var(--mark); } .pager .next { text-align: right; margin-left: auto; } .section-select { display: none; } @media (max-width: 960px) { .docs { grid-template-columns: 1fr; } .docs nav.side, .docs aside { display: none; } .docs article { padding: 1.75rem 0 4rem; } .section-select { display: block; margin-bottom: 1.5rem; } .section-select select { width: 100%; margin-top: 0.4rem; padding: 0.55rem 0.7rem; background: var(--bg); color: var(--fg-strong); border: 1px solid var(--border); font-size: 14px; } } @media (max-width: 1200px) and (min-width: 961px) { .docs { grid-template-columns: 14rem minmax(0, 1fr); } .docs aside { display: none; } } /* footer */ .foot { border-top: 1px solid var(--border-subtle); } .foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.6rem 1.5rem; font-family: ui-monospace, Menlo, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-muted); flex-wrap: wrap; } .foot a { color: inherit; text-decoration: none; } .foot a:hover { color: var(--fg-strong); } .foot .row { display: flex; gap: 1.5rem; } @media (max-width: 640px) { .brand .sub { display: none; } .links { gap: 1rem; } .links a:not([href="/docs"]):not([href="/"]) { display: none; } } /* phones: tables stack into rows, type tightens, the shell gives the page the whole width */ @media (max-width: 640px) { .wrap { padding: 0 1rem; } .prose h1 { font-size: 2rem; } .prose .lede { font-size: 1rem; } .prose h2 { font-size: 1.25rem; margin-top: 2.25rem; } .prose p, .prose li { font-size: 14.5px; } .prose pre { padding: 0.75rem 0.85rem; font-size: 12.5px; } .prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; } .prose thead { display: none; } .prose tr { padding: 0.6rem 0; border-bottom: 1px solid var(--border-subtle); } .prose td { padding: 0.1rem 0; border: 0; } .prose td:first-child { white-space: normal; margin-bottom: 0.15rem; } .prose td code { white-space: normal; } .docs article { padding: 1.25rem 0 3rem; } .section-select { margin-bottom: 1rem; } }