<commit_before>@custom-selector :--header h1, h2, h3, h4, h5, h6;
@custom-selector :--button button, .button;

/*
Use `border-box` properly:
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* Disable focus. */
*:focus { outline: none; }

/* Text selection */
::selection {
  background: var(--color-background-header);
  color: #fff;
}

body {
  background-color: var(--color-background);
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-body);
  line-height: var(--line-height);
  padding-bottom: calc(var(--line-height) * 2);
}

a {
  color: inherit;
  text-decoration: inherit;
}

p, ul, ol, pre, .table-wrapper {
  margin: 0 0 var(--line-height);
}

pre, code {
  font-family: var(--font-mono);
  font-size: var(--size-mono);
}

pre {
  padding: calc(var(--line-height) * 1 / 2) calc(var(--line-height) * 3 / 4);
  background-color: var(--color-ultralight);
  border-radius: var(--border-radius);
  box-shadow: 0 -1px 0 var(--color-light);
  line-height: var(--mono-height);
  margin: calc(var(--line-height) * 3 / 2) 0;
  overflow: auto;
}

code {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: calc(var(--border-radius) / 2);
  padding: 0.2em 0.3em 0.1em;
}

li pre {
  margin: calc(var(--line-height) * 1 / 2) 0;
}

pre code {
  font-size: 1em;
  background: none;
  padding: 0;
}

:--header {
  color: var(--color-solid);
  font-size: calc(1em * 4 / 3);
  font-family: var(--font-alt);
  font-weight: inherit;
  margin: calc(var(--line-height) * 3 * 3 / 4) 0 calc(var(--line-height) * 1 * 3 / 4);
}

:--header a {
  color: var(--color-header-light) !important;
  margin-left: 0.5em;
  text-decoration: none !important;
}

header {
  background: var(--color-background-header);
  padding:
    calc(var(--line-height) * 4)
    var(--line-height);
  text-align: center;
  overflow: hidden;
  position: relative;
}

header h1 {
  font-size: 2.25em;
  font-family: var(--font-alt);
  font-style: italic;
  font-weight: 900;
  letter-spacing: calc(1em / -50);
  line-height: calc(var(--line-height) / (2.25 / 2));
  margin: 0;
  color: var(--color-header-solid);
}

header h2 {
  font-size: 1em;
  font-weight: normal;
  font-family: inherit;
  margin: 0 0 calc(var(--line-height) * 3 / 2);
  color: var(--color-header-alt);
}

header code {
  display: inline-block;
  background-color: var(--color-ultralight);
  border-radius: var(--border-radius);
  line-height: var(--mono-height);
  box-shadow: inset 0 1px 0 var(--color-light);
  padding: calc(var(--mono-height) / 2) 1em;
  color: var(--color-header-alt);
}

header code:before {
  content: '$ ';
  opacity: 0.4;
}

header code,
header :--button {
  margin: 0 0.4em;
}

header :--button {
  color: var(--color-header-solid);
}

.example {
  padding: calc(var(--line-height) * 3 / 4);
  background-color: var(--color-ultralight);
  border-radius: var(--border-radius);
  box-shadow: 0 -1px 0 var(--color-light);
  margin: calc(var(--line-height) * 3 / 2) 0;
}

.example p,
.example ul {
  margin: 0;
}

.example code {
  background-color: transparent;
}

.example ul {
  padding: 0;
  list-style-type: none;
  font-size: 0.8em;
  line-height: var(--mono-height);
  margin: 0.2em 0;
}

.example li:before {
  content: '-';
  font-family: var(--font-mono);
  font-size: var(--size-mono);
}

.example .left,
.example .right {
  width: 50%;
  color: var(--color-alt);
}

.example .left {
  float: left;
  padding-right: calc(var(--line-height) * 1 / 2);
}

.example .right {
  float: right;
  padding-left: calc(var(--line-height) * 1 / 2);
  white-space: nowrap;
}

.container > div > p {
  font-size: calc(1em * 4 / 5);
  color: var(--color-body);
  font-weight: bold;
}

.example input {
  color: var(--color-body);
  padding: 0 calc(var(--mono-height) * 3 / 4);
  background-color: var(--color-ultralight);
  border-radius: var(--border-radius);
  box-shadow: 0 -1px 0 var(--color-light);
  height: calc(var(--mono-height) * 7 / 4);
  margin: calc(var(--line-height) * 1 / 2) 0 0;
  font-size: var(--size-mono);
  font-family: var(--font-mono);
  width: 100%;
  border: none;
}

.product-container {
  border-radius: var(--border-radius);
  background-color: var(--color-example);
  border: 1px rgba(0, 0, 0, 0.45) solid;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  height: calc(var(--line-height) * 5);
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  padding-top: 1.5em;
  position: relative;
}

.product-container h1 {
  display: inline-block;
  margin: 0;
  font-size: calc(1em * 5 / 4);
  font-weight: normal;
  color: var(--color-body);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.product-container h4 {
  display: inline-block;
  margin: 0;
  font-size: inherit;
  font-family: inherit;
  font-weight: normal;
  color: var(--color-fade);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  position: relative;
  top: calc(1em * 1 / 4);
}

.product-container h1,
.product-container h4,
.product-container .details > div > span {
  text-transform: capitalize;
}

.product-container h1:after,
.product-container h4:after {
  content: ', ';
  margin-right: 0.5em;
}

.product-container h1:last-of-type:after,
.product-container h4:last-of-type:after {
  display: none;
}

.product-container hr {
  border: none;
  height: 0;
  margin: 0 0 calc(var(--line-height) * -2 / 3);
}

.product-container .details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px rgba(255, 255, 255, 0.15) solid;
  background-color: rgba(0, 0, 0, 0.1);
  font-size: calc(1em * 4 / 5);
  line-height: var(--line-height);
  height: calc(var(--line-height) * 2);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.product-container .details > div {
  display: inline-block;
  position: relative;
  top: calc(var(--line-height) * -2 / 3);
  border-radius: var(--border-radius);
  background-color: var(--color-example);
  border: 1px rgba(0, 0, 0, 0.3) solid;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

.product-container .details > div > span {
  display: inline-block;
  padding: calc(var(--line-height) * 1 / 6 - 2px) 0.8em;
  position: relative;
  color: var(--color-alt);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.product-container .details > div > span:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.075);
}

.product-container .details > div > span:last-of-type:after {
  display: none;
}

.container:after {
  content: ' ';
  display: block;
  clear: both;
}

article {
  max-width: var(--max-width);
  padding: 0 var(--line-height);
  margin: 0 auto;
}

article a {
  text-decoration: underline;
  color: var(--color-code-c);
}

:--button {
  display: inline-block;
  background-color: var(--color-button);
  border-radius: var(--border-radius);
  line-height: calc(var(--mono-height) * 2);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  color: var(--color-body);
  padding: 0 1em;
  font-weight: bold;
  font-size: var(--size-mono);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

:--button:hover {
  color: #fff;
}

#corner {
  position: absolute;
  top: 2.6em;
  right: -4em;
  transform: rotate(45deg);
  transform-origin: center;
  width: 15em;
  line-height: calc(var(--line-height) * 4 / 3);
  text-align: center;
  display: block;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-header-alt);
}
<commit_msg>text tweaks<commit_after>@custom-selector :--header h1, h2, h3, h4, h5, h6;
@custom-selector :--button button, .button;

/*
Use `border-box` properly:
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* Disable focus. */
*:focus { outline: none; }

/* Text selection */
::selection {
  background: var(--color-background-header);
  color: #fff;
}

body {
  background-color: var(--color-background);
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-body);
  line-height: var(--line-height);
  padding-bottom: calc(var(--line-height) * 2);
}

a {
  color: inherit;
  text-decoration: inherit;
}

p, ul, ol, pre, .table-wrapper {
  margin: 0 0 var(--line-height);
}

pre, code {
  font-family: var(--font-mono);
  font-size: var(--size-mono);
}

pre {
  padding: calc(var(--line-height) * 1 / 2) calc(var(--line-height) * 3 / 4);
  background-color: var(--color-ultralight);
  border-radius: var(--border-radius);
  box-shadow: 0 -1px 0 var(--color-light);
  line-height: var(--mono-height);
  margin: calc(var(--line-height) * 3 / 2) 0;
  overflow: auto;
}

code {
  text-shadow: 0 0 3px var(--color-code-b);
}

li pre {
  margin: calc(var(--line-height) * 1 / 2) 0;
}

pre code {
  font-size: 1em;
  background: none;
  padding: 0;
  text-shadow: none;
}

:--header {
  color: var(--color-solid);
  font-size: calc(1em * 4 / 3);
  font-family: var(--font-alt);
  font-weight: inherit;
  margin: calc(var(--line-height) * 3 * 3 / 4) 0 calc(var(--line-height) * 1 * 3 / 4);
}

:--header a {
  color: var(--color-header-light) !important;
  margin-left: 0.5em;
  text-decoration: none !important;
}

header {
  background: var(--color-background-header);
  padding:
    calc(var(--line-height) * 4)
    var(--line-height);
  text-align: center;
  overflow: hidden;
  position: relative;
}

header h1 {
  font-size: 2.25em;
  font-family: var(--font-alt);
  font-style: italic;
  font-weight: 900;
  letter-spacing: calc(1em / -50);
  line-height: calc(var(--line-height) / (2.25 / 2));
  margin: 0;
  color: var(--color-header-solid);
}

header h2 {
  font-size: 1em;
  font-weight: normal;
  font-family: inherit;
  margin: 0 0 calc(var(--line-height) * 3 / 2);
  color: var(--color-header-alt);
}

header code {
  display: inline-block;
  background-color: var(--color-ultralight);
  border-radius: var(--border-radius);
  line-height: var(--mono-height);
  box-shadow: inset 0 1px 0 var(--color-light);
  padding: calc(var(--mono-height) / 2) 1em;
  color: var(--color-header-alt);
}

header code:before {
  content: '$ ';
  opacity: 0.4;
}

header code,
header :--button {
  margin: 0 0.4em;
}

header :--button {
  color: var(--color-header-solid);
}

.example {
  padding: calc(var(--line-height) * 3 / 4);
  background-color: var(--color-ultralight);
  border-radius: var(--border-radius);
  box-shadow: 0 -1px 0 var(--color-light);
  margin: calc(var(--line-height) * 3 / 2) 0;
}

.example p,
.example ul {
  margin: 0;
}

.example code {
  background-color: transparent;
  text-shadow: none;
}

.example ul {
  padding: 0;
  list-style-type: none;
  font-size: 0.8em;
  line-height: var(--mono-height);
  margin: 0.2em 0;
}

.example li:before {
  content: '-';
  font-family: var(--font-mono);
  font-size: var(--size-mono);
}

.example .left,
.example .right {
  width: 50%;
  color: var(--color-alt);
}

.example .left {
  float: left;
  padding-right: calc(var(--line-height) * 1 / 2);
}

.example .right {
  float: right;
  padding-left: calc(var(--line-height) * 1 / 2);
  white-space: nowrap;
}

.container > div > p {
  font-size: calc(1em * 4 / 5);
  color: var(--color-body);
  font-weight: bold;
}

.example input {
  color: var(--color-body);
  padding: 0 calc(var(--mono-height) * 3 / 4);
  background-color: var(--color-ultralight);
  border-radius: var(--border-radius);
  box-shadow: 0 -1px 0 var(--color-light);
  height: calc(var(--mono-height) * 7 / 4);
  margin: calc(var(--line-height) * 1 / 2) 0 0;
  font-size: var(--size-mono);
  font-family: var(--font-mono);
  width: 100%;
  border: none;
}

.product-container {
  border-radius: var(--border-radius);
  background-color: var(--color-example);
  border: 1px rgba(0, 0, 0, 0.45) solid;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  height: calc(var(--line-height) * 5);
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  padding-top: 1.5em;
  position: relative;
}

.product-container h1 {
  display: inline-block;
  margin: 0;
  font-size: calc(1em * 5 / 4);
  font-weight: normal;
  color: var(--color-body);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.product-container h4 {
  display: inline-block;
  margin: 0;
  font-size: inherit;
  font-family: inherit;
  font-weight: normal;
  color: var(--color-fade);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  position: relative;
  top: calc(1em * 1 / 4);
}

.product-container h1,
.product-container h4,
.product-container .details > div > span {
  text-transform: capitalize;
}

.product-container h1:after,
.product-container h4:after {
  content: ', ';
  margin-right: 0.5em;
}

.product-container h1:last-of-type:after,
.product-container h4:last-of-type:after {
  display: none;
}

.product-container hr {
  border: none;
  height: 0;
  margin: 0 0 calc(var(--line-height) * -2 / 3);
}

.product-container .details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px rgba(255, 255, 255, 0.15) solid;
  background-color: rgba(0, 0, 0, 0.1);
  font-size: calc(1em * 4 / 5);
  line-height: var(--line-height);
  height: calc(var(--line-height) * 2);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.product-container .details > div {
  display: inline-block;
  position: relative;
  top: calc(var(--line-height) * -2 / 3);
  border-radius: var(--border-radius);
  background-color: var(--color-example);
  border: 1px rgba(0, 0, 0, 0.3) solid;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

.product-container .details > div > span {
  display: inline-block;
  padding: calc(var(--line-height) * 1 / 6 - 2px) 0.8em;
  position: relative;
  color: var(--color-alt);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.product-container .details > div > span:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.075);
}

.product-container .details > div > span:last-of-type:after {
  display: none;
}

.container:after {
  content: ' ';
  display: block;
  clear: both;
}

article {
  max-width: var(--max-width);
  padding: 0 var(--line-height);
  margin: 0 auto;
}

article a {
  text-decoration: underline;
  color: var(--color-code-c);
}

:--button {
  display: inline-block;
  background-color: var(--color-button);
  border-radius: var(--border-radius);
  line-height: calc(var(--mono-height) * 2);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  color: var(--color-body);
  padding: 0 1em;
  font-weight: bold;
  font-size: var(--size-mono);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

:--button:hover {
  color: #fff;
}

#corner {
  position: absolute;
  top: 2.6em;
  right: -4em;
  transform: rotate(45deg);
  transform-origin: center;
  width: 15em;
  line-height: calc(var(--line-height) * 4 / 3);
  text-align: center;
  display: block;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-header-alt);
}

{'fraction_non_alphanumeric': 0.1937633262260128, 'fraction_numerical': 0.041178038379530914, 'mean_word_length': 3.064175467099919, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 25, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6767511', 'n_tokens_mistral': 6538, 'n_tokens_neox': 5968, 'n_words': 1382}