982 lines · 19.5 KB · CSS
RawDownload
/* 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.