/* Document-style homepage body. Measured prose, hairline sections. */.doc { max-width: 720px; /* Without the rail there is nothing to align to, so the column centres. */ margin-inline: auto; padding: 4rem 1.5rem 6rem; overflow-x: clip;}@media (min-width: 640px) { .doc { padding: 4.5rem 2.5rem 7rem; }}@media (min-width: 1024px) { /* Fill the content column; the frame around rail + content is centred. */ .doc { max-width: none; margin-inline: 0; padding-inline: 0; } .doc__intro, .doc__section > :not(.doc__fig--wide):not(.testi) { max-width: 720px; }} .doc__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.22; color: var(--color-ink); text-wrap: pretty; margin-bottom: 1rem;}.doc__lede { font-size: 17px; line-height: 1.6; color: var(--color-ink-2); text-wrap: pretty; margin-bottom: 1.6rem;}.doc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-bottom: 1.1rem;}.doc__copy { display: inline-flex; align-items: center; gap: 0.5rem;}.doc__quiet { font-size: 13.5px; color: var(--color-ink-3);}.doc__quiet:hover { color: var(--color-ink);}.doc__works { font-size: 13px; color: var(--color-ink-2);}.doc__works span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-ink-3); margin-right: 0.5rem;} .doc__section { border-top: 1px solid var(--color-rule); margin-top: 3.25rem; padding-top: 2.25rem;}.doc__h { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--color-ink); margin-bottom: 1rem;}.doc__section > p { font-size: 16px; line-height: 1.65; color: var(--color-ink-2); text-wrap: pretty;}.doc__section > p + p { margin-top: 1rem;}.doc__section a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule-strong);}.doc__section a:hover { text-decoration-color: var(--color-ink);} .doc__fig { margin-top: 1.75rem;}.doc__fig .figcap { margin-top: 0.85rem;}.doc__fig--wide { margin-top: 1.5rem;}/* The context demo is designed for a wide canvas; let it break out of the prose measure on large screens. *//* The context demo spans the full content column but never past it. */.doc__fig--wide { max-width: 100%;} .doc__beats { display: grid; gap: 1.25rem;}.doc__beats dt { font-size: 16px; font-weight: 600; color: var(--color-ink); margin-bottom: 0.2rem;}.doc__beats dd { font-size: 15.5px; line-height: 1.6; color: var(--color-ink-2);} .doc__ways { margin-top: 1.25rem; display: grid; gap: 0;}.doc__ways li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.5rem; padding: 0.85rem 0; border-top: 1px solid var(--color-rule); font-size: 15.5px; line-height: 1.55; color: var(--color-ink-2);}.doc__ways li:last-child { border-bottom: 1px solid var(--color-rule);}.doc__ways strong { color: var(--color-ink); font-weight: 600;}.doc__ways a,.doc__ways code { margin-left: 0.4rem;}.doc__ways code { font-family: var(--font-mono); font-size: 12.5px; background: var(--color-surface-2); border: 1px solid var(--color-rule); border-radius: 5px; padding: 0.1rem 0.4rem; color: var(--color-ink);}.doc__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--color-ink-3); padding-top: 0.25rem;} .doc__list { display: grid; gap: 0;}.doc__list li { padding: 0.7rem 0; border-top: 1px solid var(--color-rule); font-size: 15.5px;}.doc__list li:last-child { border-bottom: 1px solid var(--color-rule);}.doc__quiet-p { margin-top: 0.75rem; font-size: 14px !important; color: var(--color-ink-3) !important;} /* ── Hero variants ── */.doc__runs { font-size: 15px; color: var(--color-ink-2); margin-bottom: 1rem;}.doc__paths { display: grid; gap: 1px; background: var(--color-rule); border: 1px solid var(--color-rule); border-radius: 10px; overflow: hidden; margin-bottom: 1.1rem;}@media (min-width: 720px) { .doc__paths { grid-template-columns: repeat(3, minmax(0, 1fr)); }}.doc__path { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem 1.05rem; background: var(--color-surface); color: var(--color-ink-2); text-decoration: none; transition: background 0.15s ease;}.doc__path:hover { background: var(--color-surface-2);}.doc__path--primary { background: var(--color-ink); color: #bdbdbd;}.doc__path--primary:hover { background: #1f1f24;}.doc__path-k { font-size: 15px; font-weight: 600; color: var(--color-ink);}.doc__path--primary .doc__path-k,.doc__path--primary .doc__path-a { color: var(--color-surface);}.doc__path-d { font-size: 13.5px; line-height: 1.5; flex: 1;}.doc__path-d code { font-family: var(--font-mono); font-size: 12px;}.doc__path-a { font-size: 13.5px; font-weight: 500; color: var(--color-ink); margin-top: 0.4rem;}.doc__actions--quiet { margin-bottom: 0;}.doc__actions--quiet .doc__quiet { max-width: 34ch; line-height: 1.4;} .doc__specs { display: grid; border-top: 1px solid var(--color-rule);}.doc__specs > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-rule); font-size: 14px; line-height: 1.5;}.doc__specs dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-ink-3); padding-top: 0.25rem;}.doc__specs dd { color: var(--color-ink-2);}.doc__specs a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule-strong);} .doc__cmd { font-family: var(--font-mono); font-size: 12.5px; background: var(--color-surface-2); border: 1px solid var(--color-rule); border-radius: 6px; padding: 0.55rem 0.75rem; color: var(--color-ink);} .doc__fig--hero { margin-top: 2rem; max-width: 720px;} /* ── More hero variants ── */.doc__lede--runs a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule-strong);}.doc__lede--runs a:hover { text-decoration-color: var(--color-ink);} .doc__term { font-family: var(--font-mono); font-size: 12.5px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-surface-2); padding: 0.5rem 0; margin-bottom: 1.1rem;}.doc__term-row { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 1rem; align-items: baseline; padding: 0.45rem 1rem;}.doc__term-k { color: var(--color-ink-3);}.doc__term-k::before { content: "$ "; color: var(--color-rule-strong);}.doc__term-v { color: var(--color-ink);}a.doc__term-v { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule-strong);}a.doc__term-v:hover { text-decoration-color: var(--color-ink);}.doc__term-n { color: var(--color-ink-3); font-size: 11.5px;}@media (max-width: 719.98px) { .doc__term-n { display: none; }} .doc__rows { display: grid; margin-bottom: 1.1rem;}.doc__rows li { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.8rem 0; border-top: 1px solid var(--color-rule);}.doc__rows li:last-child { border-bottom: 1px solid var(--color-rule);}.doc__rows-b { display: flex; flex-direction: column; gap: 0.1rem; font-size: 14.5px; color: var(--color-ink-2);}.doc__rows-b strong { color: var(--color-ink); font-weight: 600;}.doc__rows-a { padding: 0.5rem 0.9rem; font-size: 13.5px;} .doc__mono-links { display: flex; flex-wrap: wrap; gap: 1.25rem; font-family: var(--font-mono); font-size: 12px;}.doc__mono-links a { color: var(--color-ink-3);}.doc__mono-links a:hover { color: var(--color-ink);} .doc__icons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-rule); border: 1px solid var(--color-rule); border-radius: 10px; overflow: hidden;}@media (min-width: 720px) { .doc__icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }}.doc__icon { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.9rem 1rem; background: var(--color-surface); color: var(--color-ink-2); transition: background 0.15s ease;}.doc__icon:hover { background: var(--color-surface-2);}.doc__icon svg { margin-bottom: 0.35rem;}.doc__icon span { font-size: 14px; font-weight: 600; color: var(--color-ink);}.doc__icon small { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-3);} /* ── Byline ── */.doc__byline { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1.1rem; font-size: 13.5px; color: var(--color-ink-2); text-decoration: none;}.doc__byline img { width: 24px; height: 24px; border-radius: 999px; box-shadow: 0 0 0 1px var(--color-rule);}.doc__byline strong { color: var(--color-ink); font-weight: 500;}.doc__byline-x { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-ink-3);}.doc__byline:hover .doc__byline-x { color: var(--color-ink);} .doc__sig { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 1.25rem; text-decoration: none !important;}.doc__sig img { width: 40px; height: 40px; border-radius: 999px; box-shadow: 0 0 0 1px var(--color-rule);}.doc__sig-b {Lines 1–500 of 982. Load more
/* Document-style homepage body. Measured prose, hairline sections. */ .doc { max-width: 720px; /* Without the rail there is nothing to align to, so the column centres. */ margin-inline: auto; padding: 4rem 1.5rem 6rem; overflow-x: clip; } @media (min-width: 640px) { .doc { padding: 4.5rem 2.5rem 7rem; } } @media (min-width: 1024px) { /* Fill the content column; the frame around rail + content is centred. */ .doc { max-width: none; margin-inline: 0; padding-inline: 0; } .doc__intro, .doc__section > :not(.doc__fig--wide):not(.testi) { max-width: 720px; } } .doc__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.22; color: var(--color-ink); text-wrap: pretty; margin-bottom: 1rem; } .doc__lede { font-size: 17px; line-height: 1.6; color: var(--color-ink-2); text-wrap: pretty; margin-bottom: 1.6rem; } .doc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-bottom: 1.1rem; } .doc__copy { display: inline-flex; align-items: center; gap: 0.5rem; } .doc__quiet { font-size: 13.5px; color: var(--color-ink-3); } .doc__quiet:hover { color: var(--color-ink); } .doc__works { font-size: 13px; color: var(--color-ink-2); } .doc__works span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-ink-3); margin-right: 0.5rem; } .doc__section { border-top: 1px solid var(--color-rule); margin-top: 3.25rem; padding-top: 2.25rem; } .doc__h { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--color-ink); margin-bottom: 1rem; } .doc__section > p { font-size: 16px; line-height: 1.65; color: var(--color-ink-2); text-wrap: pretty; } .doc__section > p + p { margin-top: 1rem; } .doc__section a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule-strong); } .doc__section a:hover { text-decoration-color: var(--color-ink); } .doc__fig { margin-top: 1.75rem; } .doc__fig .figcap { margin-top: 0.85rem; } .doc__fig--wide { margin-top: 1.5rem; } /* The context demo is designed for a wide canvas; let it break out of the prose measure on large screens. */ /* The context demo spans the full content column but never past it. */ .doc__fig--wide { max-width: 100%; } .doc__beats { display: grid; gap: 1.25rem; } .doc__beats dt { font-size: 16px; font-weight: 600; color: var(--color-ink); margin-bottom: 0.2rem; } .doc__beats dd { font-size: 15.5px; line-height: 1.6; color: var(--color-ink-2); } .doc__ways { margin-top: 1.25rem; display: grid; gap: 0; } .doc__ways li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.5rem; padding: 0.85rem 0; border-top: 1px solid var(--color-rule); font-size: 15.5px; line-height: 1.55; color: var(--color-ink-2); } .doc__ways li:last-child { border-bottom: 1px solid var(--color-rule); } .doc__ways strong { color: var(--color-ink); font-weight: 600; } .doc__ways a, .doc__ways code { margin-left: 0.4rem; } .doc__ways code { font-family: var(--font-mono); font-size: 12.5px; background: var(--color-surface-2); border: 1px solid var(--color-rule); border-radius: 5px; padding: 0.1rem 0.4rem; color: var(--color-ink); } .doc__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--color-ink-3); padding-top: 0.25rem; } .doc__list { display: grid; gap: 0; } .doc__list li { padding: 0.7rem 0; border-top: 1px solid var(--color-rule); font-size: 15.5px; } .doc__list li:last-child { border-bottom: 1px solid var(--color-rule); } .doc__quiet-p { margin-top: 0.75rem; font-size: 14px !important; color: var(--color-ink-3) !important; } /* ── Hero variants ── */ .doc__runs { font-size: 15px; color: var(--color-ink-2); margin-bottom: 1rem; } .doc__paths { display: grid; gap: 1px; background: var(--color-rule); border: 1px solid var(--color-rule); border-radius: 10px; overflow: hidden; margin-bottom: 1.1rem; } @media (min-width: 720px) { .doc__paths { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .doc__path { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem 1.05rem; background: var(--color-surface); color: var(--color-ink-2); text-decoration: none; transition: background 0.15s ease; } .doc__path:hover { background: var(--color-surface-2); } .doc__path--primary { background: var(--color-ink); color: #bdbdbd; } .doc__path--primary:hover { background: #1f1f24; } .doc__path-k { font-size: 15px; font-weight: 600; color: var(--color-ink); } .doc__path--primary .doc__path-k, .doc__path--primary .doc__path-a { color: var(--color-surface); } .doc__path-d { font-size: 13.5px; line-height: 1.5; flex: 1; } .doc__path-d code { font-family: var(--font-mono); font-size: 12px; } .doc__path-a { font-size: 13.5px; font-weight: 500; color: var(--color-ink); margin-top: 0.4rem; } .doc__actions--quiet { margin-bottom: 0; } .doc__actions--quiet .doc__quiet { max-width: 34ch; line-height: 1.4; } .doc__specs { display: grid; border-top: 1px solid var(--color-rule); } .doc__specs > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-rule); font-size: 14px; line-height: 1.5; } .doc__specs dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-ink-3); padding-top: 0.25rem; } .doc__specs dd { color: var(--color-ink-2); } .doc__specs a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule-strong); } .doc__cmd { font-family: var(--font-mono); font-size: 12.5px; background: var(--color-surface-2); border: 1px solid var(--color-rule); border-radius: 6px; padding: 0.55rem 0.75rem; color: var(--color-ink); } .doc__fig--hero { margin-top: 2rem; max-width: 720px; } /* ── More hero variants ── */ .doc__lede--runs a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule-strong); } .doc__lede--runs a:hover { text-decoration-color: var(--color-ink); } .doc__term { font-family: var(--font-mono); font-size: 12.5px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-surface-2); padding: 0.5rem 0; margin-bottom: 1.1rem; } .doc__term-row { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 1rem; align-items: baseline; padding: 0.45rem 1rem; } .doc__term-k { color: var(--color-ink-3); } .doc__term-k::before { content: "$ "; color: var(--color-rule-strong); } .doc__term-v { color: var(--color-ink); } a.doc__term-v { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule-strong); } a.doc__term-v:hover { text-decoration-color: var(--color-ink); } .doc__term-n { color: var(--color-ink-3); font-size: 11.5px; } @media (max-width: 719.98px) { .doc__term-n { display: none; } } .doc__rows { display: grid; margin-bottom: 1.1rem; } .doc__rows li { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.8rem 0; border-top: 1px solid var(--color-rule); } .doc__rows li:last-child { border-bottom: 1px solid var(--color-rule); } .doc__rows-b { display: flex; flex-direction: column; gap: 0.1rem; font-size: 14.5px; color: var(--color-ink-2); } .doc__rows-b strong { color: var(--color-ink); font-weight: 600; } .doc__rows-a { padding: 0.5rem 0.9rem; font-size: 13.5px; } .doc__mono-links { display: flex; flex-wrap: wrap; gap: 1.25rem; font-family: var(--font-mono); font-size: 12px; } .doc__mono-links a { color: var(--color-ink-3); } .doc__mono-links a:hover { color: var(--color-ink); } .doc__icons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-rule); border: 1px solid var(--color-rule); border-radius: 10px; overflow: hidden; } @media (min-width: 720px) { .doc__icons { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .doc__icon { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.9rem 1rem; background: var(--color-surface); color: var(--color-ink-2); transition: background 0.15s ease; } .doc__icon:hover { background: var(--color-surface-2); } .doc__icon svg { margin-bottom: 0.35rem; } .doc__icon span { font-size: 14px; font-weight: 600; color: var(--color-ink); } .doc__icon small { font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-3); } /* ── Byline ── */ .doc__byline { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1.1rem; font-size: 13.5px; color: var(--color-ink-2); text-decoration: none; } .doc__byline img { width: 24px; height: 24px; border-radius: 999px; box-shadow: 0 0 0 1px var(--color-rule); } .doc__byline strong { color: var(--color-ink); font-weight: 500; } .doc__byline-x { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-ink-3); } .doc__byline:hover .doc__byline-x { color: var(--color-ink); } .doc__sig { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 1.25rem; text-decoration: none !important; } .doc__sig img { width: 40px; height: 40px; border-radius: 999px; box-shadow: 0 0 0 1px var(--color-rule); } .doc__sig-b {