/* Every value comes from tokens.css. Three type sizes: title, head, body. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--type-body) / var(--leading-body) var(--font);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--primary); text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
code, pre { font-family: var(--mono); font-size: var(--type-body); }
pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.wrap { width: min(100% - 2 * var(--space-4), var(--page)); margin-inline: auto; }
.measure { max-width: var(--measure); }
.muted { color: var(--text-2); }
.needs-you { color: var(--needs-you); }
.saving { color: var(--saving); }
.strong { font-weight: var(--weight-bold); }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--target) + var(--space-5)); }
.top > a:first-child { display: inline-flex; align-items: center; min-height: var(--target); }
.top img { height: var(--space-6); width: auto; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .logo-light { display: none; }
  .logo-dark { display: block; }
}
.quiet { display: inline-flex; align-items: center; min-height: var(--target); color: var(--text-2); text-decoration: none; }
.quiet:hover { color: var(--text); text-decoration: underline; }

/* Hero */
.hero { padding-block: var(--space-7) var(--space-7); }
h1 { font-size: var(--type-title); line-height: var(--leading-title); font-weight: var(--weight-bold); letter-spacing: -0.02em; text-wrap: balance; }
.cursor { display: inline-block; width: var(--cursor-w); height: var(--cursor-h); margin-inline-start: 0.12em; background: var(--accent); border-radius: var(--space-1); animation: blink var(--blink) steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
.lead { margin-block-start: var(--space-4); font-size: var(--type-head); line-height: 1.4; color: var(--text-2); max-width: var(--measure); }

/* The paste line: the primary action */
.paste { margin-block-start: var(--space-6); max-width: var(--measure); }
.paste label, .paste .label { display: block; font-weight: var(--weight-medium); margin-block-end: var(--space-2); }
.paste-box { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.paste-box pre { flex: 1 1 16rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target); min-width: 7rem; padding-inline: var(--space-4); border: 0; border-radius: var(--radius); background: var(--primary); color: var(--on-primary); font: inherit; font-weight: var(--weight-bold); cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn-plain { background: transparent; color: var(--primary); border: var(--line) solid var(--border); font-weight: var(--weight-medium); min-width: 5rem; }
.note { margin-block-start: var(--space-3); color: var(--text-2); }

/* Sections */
section { padding-block: var(--space-7); border-block-start: var(--line) solid var(--border); }
h2 { font-size: var(--type-head); line-height: 1.3; font-weight: var(--weight-bold); }
h3 { font-size: var(--type-body); font-weight: var(--weight-bold); }
.sub { margin-block-start: var(--space-2); color: var(--text-2); max-width: var(--measure); }
.shot { margin-block-start: var(--space-5); border: var(--line) solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.caption { margin-block-start: var(--space-3); color: var(--text-2); }

.grid { display: grid; gap: var(--space-5); margin-block-start: var(--space-5); }
@media (min-width: 44rem) { .grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.grid p { margin-block-start: var(--space-1); color: var(--text-2); }
.grid code { display: block; margin-block-start: var(--space-2); color: var(--text); }

.facts li { padding-block: var(--space-3); border-block-end: var(--line) solid var(--border); }
.facts li:last-child { border-block-end: 0; }
.facts { margin-block-start: var(--space-4); max-width: var(--measure); }

details { margin-block-start: var(--space-5); max-width: var(--measure); }
summary { display: flex; align-items: center; min-height: var(--target); color: var(--primary); cursor: pointer; font-weight: var(--weight-medium); }

.cmd { margin-block-start: var(--space-4); max-width: var(--measure); }
.cmd + .cmd { margin-block-start: var(--space-3); }

/* Prose pages */
.page { padding-block: var(--space-7); }
.page h1 { font-size: var(--type-title); }
.page h2 { margin-block-start: var(--space-6); }
.page p, .page ul { margin-block-start: var(--space-3); max-width: var(--measure); }
.table { width: 100%; max-width: var(--measure); margin-block-start: var(--space-4); border-collapse: collapse; }
.table th, .table td { padding: var(--space-3) var(--space-3) var(--space-3) 0; text-align: start; vertical-align: top; border-block-end: var(--line) solid var(--border); }
.table th { font-weight: var(--weight-medium); color: var(--text-2); }

/* Footer */
footer { padding-block: var(--space-6); border-block-start: var(--line) solid var(--border); color: var(--text-2); }
footer ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }