@stackoverflow/stacks 1.0.1 → 1.3.0

package/dist/css/stacks.css

@@ -402,9 +402,8 @@ template {
 .s-activity-indicator {
   display: inline-block;
   min-width: var(--su-static12);
-  height: var(--su-static12);
-  padding-left: var(--su4);
-  padding-right: var(--su4);
+  min-height: var(--su-static12);
+  padding: var(--su2) var(--su4);
   line-height: 1.1;
   background-color: var(--theme-secondary-400);
   box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -443,6 +442,7 @@ body.theme-highcontrast .s-activity-indicator {
 body.theme-highcontrast .s-avatar {
   background-color: var(--black);
   box-shadow: 0 0 0 1px var(--black);
+  color: var(--white);
 }
 body.theme-highcontrast .s-avatar .s-avatar--letter {
   color: var(--white);
@@ -600,6 +600,9 @@ a.s-badge:hover {
   margin-right: var(--su1);
   margin-left: calc((var(--su4) + var(--su1)) * -1);
 }
+.s-badge__icon {
+  gap: 0.3em;
+}
 .s-badge__sm {
   min-width: 18px;
   align-self: flex-start;
@@ -726,6 +729,39 @@ body.theme-highcontrast .s-badge__moderator {
 body.theme-highcontrast .s-badge__staff {
   border-color: currentColor;
 }
+.s-badge__danger {
+  color: var(--red-900);
+  background-color: var(--red-100);
+  border-color: var(--red-600);
+}
+.s-badge__danger.s-badge__filled {
+  color: hsl(0, 0%, 100%);
+  background-color: var(--red-500);
+  border-color: transparent;
+}
+body.theme-highcontrast .s-badge__danger.s-badge__filled {
+  color: var(--white);
+}
+.s-badge__info {
+  color: var(--blue-900);
+  background-color: var(--blue-100);
+  border-color: var(--blue-600);
+}
+.s-badge__warning {
+  color: var(--yellow-900);
+  background-color: var(--yellow-100);
+  border-color: var(--yellow-600);
+}
+.s-badge__muted {
+  color: var(--black-900);
+  background-color: var(--black-100);
+  border-color: var(--black-600);
+}
+.s-badge__muted.s-badge__filled {
+  color: var(--white);
+  background-color: var(--black-700);
+  border-color: transparent;
+}
 .s-award-bling {
   display: flex;
   align-items: center;
@@ -1386,24 +1422,33 @@ body.theme-system .theme-dark__forced .s-label--status.s-label--status__required
     background-repeat: no-repeat;
     background-size: contain;
   }
-  .s-checkbox:checked {
+  .s-checkbox:checked,
+  .s-checkbox:indeterminate {
     border-color: var(--theme-secondary-400) !important;
     background-color: var(--theme-secondary-400);
-    background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
   }
   @media (prefers-color-scheme: dark) {
-    body.theme-highcontrast.theme-system .s-checkbox:checked {
+    body.theme-highcontrast.theme-system .s-checkbox:checked,
+    body.theme-highcontrast.theme-system .s-checkbox:indeterminate {
       border-color: var(--blue-700) !important;
       background-color: var(--blue-300);
     }
   }
-  body.theme-highcontrast.theme-dark .s-checkbox:checked {
+  body.theme-highcontrast.theme-dark .s-checkbox:checked,
+  body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
     border-color: var(--blue-700) !important;
     background-color: var(--blue-300);
   }
-  .s-checkbox:checked:focus {
+  .s-checkbox:checked:focus,
+  .s-checkbox:indeterminate:focus {
     border-color: var(--theme-secondary-400);
   }
+  .s-checkbox:checked {
+    background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
+  }
+  .s-checkbox:indeterminate {
+    background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
+  }
   .s-checkbox:focus {
     border-color: var(--theme-secondary-300);
     box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -1604,9 +1649,6 @@ body.theme-highcontrast .s-select > select[read-only] {
   opacity: unset;
 }
 .is-disabled .s-input-icon {
-  color: var(--black-200);
-}
-body.theme-highcontrast .is-disabled .s-input-icon {
   color: var(--black-400);
 }
 .is-disabled .s-label {
@@ -1623,10 +1665,6 @@ body.theme-highcontrast .is-disabled .s-input-icon {
 .s-input-icon.s-input-icon__creditcard {
   right: auto;
   left: 0.7em;
-  color: var(--black-200);
-}
-body.theme-highcontrast .s-input-icon.s-input-icon__search,
-body.theme-highcontrast .s-input-icon.s-input-icon__creditcard {
   color: var(--black-400);
 }
 .s-input-message {
@@ -2220,77 +2258,6 @@ body.theme-system .theme-dark__forced .s-popover--arrow {
 .s-post-summary.s-post-summary__minimal .s-post-summary--content {
   width: 100%;
 }
-.s-post-summary.s-post-summary__legacy {
-  padding-left: 0;
-}
-@media (max-width: 980px) {
-  .s-post-summary.s-post-summary__legacy {
-    padding-left: var(--su16);
-  }
-}
-.s-post-summary.s-post-summary__legacy .s-post-summary--stats {
-  width: auto;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--su2);
-}
-.s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item {
-  min-width: var(--su64);
-  height: var(--su48);
-  flex-direction: column;
-  gap: 0;
-  font-size: var(--fs-caption);
-}
-.s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.s-post-summary--stats-item__emphasized {
-  color: inherit;
-}
-.s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.has-accepted-answer .svg-icon {
-  display: none;
-}
-.s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item .s-post-summary--stats-item-number {
-  font-weight: normal;
-  font-size: var(--fs-body3);
-}
-.s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-deleted,
-.s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-published,
-.s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-draft,
-.s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-review,
-.s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-closed,
-.s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-archived,
-.s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-pinned {
-  display: none;
-}
-@media (max-width: 980px) {
-  .s-post-summary.s-post-summary__legacy .s-post-summary--stats {
-    flex-direction: row;
-    align-items: center;
-    gap: var(--su8);
-  }
-  .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item {
-    min-width: auto;
-    height: auto;
-    flex-direction: row;
-    gap: 3px;
-  }
-  .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item .s-post-summary--stats-item-number {
-    font-size: inherit;
-  }
-  .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.s-post-summary--stats-item__emphasized {
-    color: var(--fc-dark);
-  }
-  .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.has-accepted-answer .svg-icon {
-    display: block;
-  }
-  .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-deleted,
-  .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-published,
-  .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-draft,
-  .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-review,
-  .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-closed,
-  .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-archived,
-  .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-pinned {
-    display: block;
-  }
-}
 .s-post-summary--content-menu-button {
   position: absolute !important;
   top: var(--su8);
@@ -2313,7 +2280,7 @@ body.theme-system .theme-dark__forced .s-popover--arrow {
   font-size: var(--fs-body1);
   color: var(--fc-light);
 }
-.s-post-summary--stats .s-post-summary--stats-item {
+.s-post-summary--stats .s-post-summary--stats-item:not(.s-badge) {
   display: inline-flex;
   gap: 0.3em;
   align-items: center;
@@ -2327,6 +2294,11 @@ body.theme-system .theme-dark__forced .s-popover--arrow {
 .s-post-summary--stats .s-post-summary--stats-item .s-post-summary--stats-item-number {
   font-weight: 500;
 }
+.s-post-summary--stats .s-post-summary--stats-item.s-badge {
+  font-size: var(--fs-body1);
+  line-height: var(--lh-md);
+  padding: var(--su2) var(--su4);
+}
 .s-post-summary--stats .s-post-summary--stats-item.has-answers,
 .s-post-summary--stats .s-post-summary--stats-item.has-bounty,
 .s-post-summary--stats .s-post-summary--stats-item.is-deleted,
@@ -2552,12 +2524,12 @@ body.theme-highcontrast .s-post-summary--answer:before {
   color: hsl(0, 0%, 100%);
   background-color: var(--red-500);
 }
-.s-post-summary__ignored .s-post-summary--content,
-.s-post-summary__deleted .s-post-summary--content {
+.s-post-summary__ignored .s-post-summary--content > *:not(.s-post-summary--content-menu-button):not(.s-post-summary--meta),
+.s-post-summary__deleted .s-post-summary--content > *:not(.s-post-summary--content-menu-button):not(.s-post-summary--meta) {
   opacity: 0.6;
 }
-.s-post-summary__ignored .s-post-summary--stats-item:not(.is-deleted),
-.s-post-summary__deleted .s-post-summary--stats-item:not(.is-deleted) {
+.s-post-summary__ignored .s-post-summary--stats-item:not(.s-badge):not(.is-deleted),
+.s-post-summary__deleted .s-post-summary--stats-item:not(.s-badge):not(.is-deleted) {
   opacity: 0.6;
   filter: grayscale(100%);
 }
@@ -2579,8 +2551,14 @@ body.theme-highcontrast .s-post-summary--answer:before {
 .s-post-summary__deleted .s-post-summary--content-excerpt {
   color: var(--black-500);
 }
-.s-post-summary__ignored .s-post-summary--meta,
-.s-post-summary__deleted .s-post-summary--meta {
+.s-post-summary__ignored .s-post-summary--meta > *:not(.s-post-summary--meta-tags),
+.s-post-summary__deleted .s-post-summary--meta > *:not(.s-post-summary--meta-tags) {
+  opacity: 0.6;
+  filter: grayscale(100%);
+}
+.s-post-summary__ignored .s-post-summary--meta-tags > a,
+.s-post-summary__deleted .s-post-summary--meta-tags > a {
+  opacity: 0.6;
   filter: grayscale(100%);
 }
 .s-progress,
@@ -3805,6 +3783,9 @@ body.theme-highcontrast .s-topbar {
   color: var(--theme-topbar-item-color-hover);
   background-color: var(--theme-topbar-item-background-hover);
 }
+.s-topbar .s-navigation .s-navigation--item:focus-visible {
+  box-shadow: var(--theme-topbar-search-shadow-focus);
+}
 .s-topbar .s-navigation .s-navigation--item:not(.is-selected) {
   color: var(--theme-topbar-item-color);
 }
@@ -3816,7 +3797,7 @@ body.theme-highcontrast .s-topbar {
   --theme-topbar-background-color: hsl(210, 8%, 97.5%);
   --theme-topbar-search-color: hsl(210, 8%, 25%);
   --theme-topbar-search-background: hsl(0, 0%, 100%);
-  --theme-topbar-search-placeholder: hsl(210, 8%, 75%);
+  --theme-topbar-search-placeholder: hsl(210, 8%, 55%);
   --theme-topbar-search-border: hsl(210, 8%, 75%);
   --theme-topbar-search-border-focus: hsl(206, 90%, 69.5%);
   --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -4738,7 +4719,7 @@ body:not(.theme-dark) .theme-dark__forced .themed {
   --theme-topbar-background-color: var(--black-025);
   --theme-topbar-search-color: var(--black-700);
   --theme-topbar-search-background: var(--white);
-  --theme-topbar-search-placeholder: var(--black-200);
+  --theme-topbar-search-placeholder: var(--black-400);
   --theme-topbar-search-border: var(--black-200);
   --theme-topbar-search-border-focus: var(--blue-300);
   --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -5342,61 +5323,61 @@ body.theme-system.theme-highcontrast .theme-light__forced {
   --black-750: hsl(210, 8%, 10%);
   --black-800: hsl(210, 8%, 5%);
   --black-900: hsl(0, 0%, 0%);
-  --orange-050: hsl(27, 100%, 97.5%);
-  --orange-100: hsl(27, 100%, 94%);
-  --orange-200: hsl(27, 100%, 88%);
-  --orange-300: hsl(27, 100%, 82%);
+  --orange-050: hsl(27, 100%, 93%);
+  --orange-100: hsl(27, 100%, 90%);
+  --orange-200: hsl(27, 100%, 86%);
+  --orange-300: hsl(27, 100%, 81%);
   --orange-400: hsl(27, 100%, 34%);
   --orange-500: hsl(27, 100%, 29%);
   --orange-600: hsl(27, 100%, 24%);
   --orange-700: hsl(27, 100%, 19%);
   --orange-800: hsl(27, 100%, 13%);
   --orange-900: hsl(27, 100%, 8%);
-  --blue-050: hsl(206, 100%, 97.5%);
-  --blue-100: hsl(206, 100%, 95%);
-  --blue-200: hsl(206, 100%, 90%);
-  --blue-300: hsl(206, 100%, 85%);
+  --blue-050: hsl(206, 100%, 94%);
+  --blue-100: hsl(206, 100%, 92%);
+  --blue-200: hsl(206, 100%, 89%);
+  --blue-300: hsl(206, 100%, 86%);
   --blue-400: hsl(206, 100%, 25%);
   --blue-500: hsl(206, 100%, 20%);
   --blue-600: hsl(206, 100%, 15%);
   --blue-700: hsl(206, 100%, 10%);
   --blue-800: hsl(206, 100%, 7.5%);
   --blue-900: hsl(206, 100%, 5%);
-  --powder-050: hsl(205, 100%, 97.5%);
-  --powder-100: hsl(205, 85%, 96%);
-  --powder-200: hsl(205, 75%, 92%);
-  --powder-300: hsl(205, 70%, 88%);
+  --powder-050: hsl(205, 100%, 95%);
+  --powder-100: hsl(205, 85%, 93%);
+  --powder-200: hsl(205, 75%, 89%);
+  --powder-300: hsl(205, 70%, 86%);
   --powder-400: hsl(205, 55%, 28%);
   --powder-500: hsl(205, 60%, 24%);
   --powder-600: hsl(205, 70%, 20%);
   --powder-700: hsl(205, 75%, 16%);
   --powder-800: hsl(205, 75%, 12%);
   --powder-900: hsl(205, 75%, 8%);
-  --green-025: hsl(140, 100%, 97%);
-  --green-050: hsl(140, 100%, 96%);
-  --green-100: hsl(140, 100%, 94%);
-  --green-200: hsl(140, 100%, 88%);
-  --green-300: hsl(140, 100%, 82%);
+  --green-025: hsl(140, 100%, 94%);
+  --green-050: hsl(140, 100%, 91%);
+  --green-100: hsl(140, 100%, 87%);
+  --green-200: hsl(140, 100%, 83%);
+  --green-300: hsl(140, 100%, 78%);
   --green-400: hsl(140, 100%, 18%);
   --green-500: hsl(140, 100%, 15%);
   --green-600: hsl(140, 100%, 12%);
   --green-700: hsl(140, 100%, 9%);
   --green-800: hsl(140, 100%, 6%);
   --green-900: hsl(140, 100%, 3%);
-  --yellow-050: hsl(47, 100%, 95%);
-  --yellow-100: hsl(47, 100%, 92%);
-  --yellow-200: hsl(47, 95%, 85%);
-  --yellow-300: hsl(47, 95%, 78%);
+  --yellow-050: hsl(47, 100%, 92%);
+  --yellow-100: hsl(47, 100%, 88%);
+  --yellow-200: hsl(47, 95%, 83%);
+  --yellow-300: hsl(47, 95%, 75%);
   --yellow-400: hsl(47, 100%, 28%);
   --yellow-500: hsl(47, 100%, 26%);
   --yellow-600: hsl(47, 100%, 23%);
   --yellow-700: hsl(47, 100%, 19%);
   --yellow-800: hsl(47, 100%, 13%);
   --yellow-900: hsl(47, 100%, 7%);
-  --red-050: hsl(358, 100%, 97.5%);
-  --red-100: hsl(358, 100%, 95%);
-  --red-200: hsl(358, 100%, 90%);
-  --red-300: hsl(358, 100%, 85%);
+  --red-050: hsl(358, 100%, 94%);
+  --red-100: hsl(358, 100%, 92%);
+  --red-200: hsl(358, 100%, 89%);
+  --red-300: hsl(358, 100%, 86%);
   --red-400: hsl(358, 100%, 35%);
   --red-500: hsl(358, 100%, 29%);
   --red-600: hsl(358, 100%, 23%);
@@ -5463,61 +5444,61 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
   --black-750: hsl(210, 8%, 90%);
   --black-800: hsl(210, 8%, 95%);
   --black-900: hsl(0, 0%, 100%);
-  --orange-050: hsl(27, 100%, 4%);
-  --orange-100: hsl(27, 100%, 8%);
-  --orange-200: hsl(27, 100%, 16%);
-  --orange-300: hsl(27, 100%, 24%);
+  --orange-050: hsl(27, 100%, 7%);
+  --orange-100: hsl(27, 100%, 9%);
+  --orange-200: hsl(27, 100%, 15%);
+  --orange-300: hsl(27, 100%, 22%);
   --orange-400: hsl(27, 100%, 64%);
   --orange-500: hsl(27, 100%, 71%);
   --orange-600: hsl(27, 100%, 77%);
   --orange-700: hsl(27, 100%, 82%);
   --orange-800: hsl(27, 100%, 87%);
   --orange-900: hsl(27, 100%, 91%);
-  --blue-050: hsl(206, 100%, 4%);
+  --blue-050: hsl(206, 100%, 7%);
   --blue-100: hsl(206, 100%, 11%);
-  --blue-200: hsl(206, 100%, 18%);
-  --blue-300: hsl(206, 100%, 25%);
+  --blue-200: hsl(206, 100%, 17%);
+  --blue-300: hsl(206, 100%, 24%);
   --blue-400: hsl(206, 100%, 75%);
   --blue-500: hsl(206, 100%, 80%);
   --blue-600: hsl(206, 100%, 85%);
   --blue-700: hsl(206, 100%, 90%);
   --blue-800: hsl(206, 100%, 92.5%);
   --blue-900: hsl(206, 100%, 95%);
-  --powder-050: hsl(205, 100%, 6%);
-  --powder-100: hsl(205, 90%, 8%);
+  --powder-050: hsl(205, 100%, 7%);
+  --powder-100: hsl(205, 95%, 10%);
   --powder-200: hsl(205, 80%, 14%);
-  --powder-300: hsl(205, 60%, 20%);
+  --powder-300: hsl(205, 76%, 19%);
   --powder-400: hsl(205, 55%, 72%);
   --powder-500: hsl(205, 60%, 76%);
   --powder-600: hsl(205, 70%, 80%);
   --powder-700: hsl(205, 75%, 84%);
   --powder-800: hsl(205, 75%, 88%);
   --powder-900: hsl(205, 75%, 92%);
-  --green-025: hsl(140, 100%, 3%);
-  --green-050: hsl(140, 100%, 4%);
-  --green-100: hsl(140, 100%, 6%);
-  --green-200: hsl(140, 100%, 12%);
-  --green-300: hsl(140, 100%, 18%);
+  --green-025: hsl(140, 100%, 5%);
+  --green-050: hsl(140, 100%, 6%);
+  --green-100: hsl(140, 100%, 7%);
+  --green-200: hsl(140, 100%, 11%);
+  --green-300: hsl(140, 100%, 15%);
   --green-400: hsl(140, 100%, 65%);
   --green-500: hsl(140, 100%, 71%);
   --green-600: hsl(140, 100%, 77%);
   --green-700: hsl(140, 100%, 83%);
   --green-800: hsl(140, 100%, 89%);
   --green-900: hsl(140, 100%, 94%);
-  --yellow-050: hsl(47, 100%, 4%);
-  --yellow-100: hsl(47, 100%, 8%);
-  --yellow-200: hsl(47, 95%, 16%);
-  --yellow-300: hsl(47, 95%, 24%);
+  --yellow-050: hsl(47, 100%, 6%);
+  --yellow-100: hsl(47, 100%, 9%);
+  --yellow-200: hsl(47, 100%, 14%);
+  --yellow-300: hsl(47, 100%, 20%);
   --yellow-400: hsl(47, 100%, 55%);
   --yellow-500: hsl(47, 100%, 63%);
   --yellow-600: hsl(47, 100%, 71%);
   --yellow-700: hsl(47, 100%, 79%);
   --yellow-800: hsl(47, 100%, 87%);
   --yellow-900: hsl(47, 100%, 95%);
-  --red-050: hsl(358, 100%, 4%);
-  --red-100: hsl(358, 100%, 8%);
-  --red-200: hsl(358, 100%, 16%);
-  --red-300: hsl(358, 100%, 24%);
+  --red-050: hsl(358, 100%, 9%);
+  --red-100: hsl(358, 100%, 12%);
+  --red-200: hsl(358, 100%, 17%);
+  --red-300: hsl(358, 100%, 22%);
   --red-400: hsl(358, 100%, 70%);
   --red-500: hsl(358, 100%, 75%);
   --red-600: hsl(358, 100%, 80%);
@@ -5584,61 +5565,61 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --black-750: hsl(210, 8%, 90%);
     --black-800: hsl(210, 8%, 95%);
     --black-900: hsl(0, 0%, 100%);
-    --orange-050: hsl(27, 100%, 4%);
-    --orange-100: hsl(27, 100%, 8%);
-    --orange-200: hsl(27, 100%, 16%);
-    --orange-300: hsl(27, 100%, 24%);
+    --orange-050: hsl(27, 100%, 7%);
+    --orange-100: hsl(27, 100%, 9%);
+    --orange-200: hsl(27, 100%, 15%);
+    --orange-300: hsl(27, 100%, 22%);
     --orange-400: hsl(27, 100%, 64%);
     --orange-500: hsl(27, 100%, 71%);
     --orange-600: hsl(27, 100%, 77%);
     --orange-700: hsl(27, 100%, 82%);
     --orange-800: hsl(27, 100%, 87%);
     --orange-900: hsl(27, 100%, 91%);
-    --blue-050: hsl(206, 100%, 4%);
+    --blue-050: hsl(206, 100%, 7%);
     --blue-100: hsl(206, 100%, 11%);
-    --blue-200: hsl(206, 100%, 18%);
-    --blue-300: hsl(206, 100%, 25%);
+    --blue-200: hsl(206, 100%, 17%);
+    --blue-300: hsl(206, 100%, 24%);
     --blue-400: hsl(206, 100%, 75%);
     --blue-500: hsl(206, 100%, 80%);
     --blue-600: hsl(206, 100%, 85%);
     --blue-700: hsl(206, 100%, 90%);
     --blue-800: hsl(206, 100%, 92.5%);
     --blue-900: hsl(206, 100%, 95%);
-    --powder-050: hsl(205, 100%, 6%);
-    --powder-100: hsl(205, 90%, 8%);
+    --powder-050: hsl(205, 100%, 7%);
+    --powder-100: hsl(205, 95%, 10%);
     --powder-200: hsl(205, 80%, 14%);
-    --powder-300: hsl(205, 60%, 20%);
+    --powder-300: hsl(205, 76%, 19%);
     --powder-400: hsl(205, 55%, 72%);
     --powder-500: hsl(205, 60%, 76%);
     --powder-600: hsl(205, 70%, 80%);
     --powder-700: hsl(205, 75%, 84%);
     --powder-800: hsl(205, 75%, 88%);
     --powder-900: hsl(205, 75%, 92%);
-    --green-025: hsl(140, 100%, 3%);
-    --green-050: hsl(140, 100%, 4%);
-    --green-100: hsl(140, 100%, 6%);
-    --green-200: hsl(140, 100%, 12%);
-    --green-300: hsl(140, 100%, 18%);
+    --green-025: hsl(140, 100%, 5%);
+    --green-050: hsl(140, 100%, 6%);
+    --green-100: hsl(140, 100%, 7%);
+    --green-200: hsl(140, 100%, 11%);
+    --green-300: hsl(140, 100%, 15%);
     --green-400: hsl(140, 100%, 65%);
     --green-500: hsl(140, 100%, 71%);
     --green-600: hsl(140, 100%, 77%);
     --green-700: hsl(140, 100%, 83%);
     --green-800: hsl(140, 100%, 89%);
     --green-900: hsl(140, 100%, 94%);
-    --yellow-050: hsl(47, 100%, 4%);
-    --yellow-100: hsl(47, 100%, 8%);
-    --yellow-200: hsl(47, 95%, 16%);
-    --yellow-300: hsl(47, 95%, 24%);
+    --yellow-050: hsl(47, 100%, 6%);
+    --yellow-100: hsl(47, 100%, 9%);
+    --yellow-200: hsl(47, 100%, 14%);
+    --yellow-300: hsl(47, 100%, 20%);
     --yellow-400: hsl(47, 100%, 55%);
     --yellow-500: hsl(47, 100%, 63%);
     --yellow-600: hsl(47, 100%, 71%);
     --yellow-700: hsl(47, 100%, 79%);
     --yellow-800: hsl(47, 100%, 87%);
     --yellow-900: hsl(47, 100%, 95%);
-    --red-050: hsl(358, 100%, 4%);
-    --red-100: hsl(358, 100%, 8%);
-    --red-200: hsl(358, 100%, 16%);
-    --red-300: hsl(358, 100%, 24%);
+    --red-050: hsl(358, 100%, 9%);
+    --red-100: hsl(358, 100%, 12%);
+    --red-200: hsl(358, 100%, 17%);
+    --red-300: hsl(358, 100%, 22%);
     --red-400: hsl(358, 100%, 70%);
     --red-500: hsl(358, 100%, 75%);
     --red-600: hsl(358, 100%, 80%);
@@ -12056,6 +12037,58 @@ body {
   margin-left: var(--su128) !important;
   margin-right: var(--su128) !important;
 }
+.mxn1 {
+  margin-left: calc(var(--su1) * -1) !important;
+  margin-right: calc(var(--su1) * -1) !important;
+}
+.mxn2 {
+  margin-left: calc(var(--su2) * -1) !important;
+  margin-right: calc(var(--su2) * -1) !important;
+}
+.mxn4 {
+  margin-left: calc(var(--su4) * -1) !important;
+  margin-right: calc(var(--su4) * -1) !important;
+}
+.mxn6 {
+  margin-left: calc(var(--su6) * -1) !important;
+  margin-right: calc(var(--su6) * -1) !important;
+}
+.mxn8 {
+  margin-left: calc(var(--su8) * -1) !important;
+  margin-right: calc(var(--su8) * -1) !important;
+}
+.mxn12 {
+  margin-left: calc(var(--su12) * -1) !important;
+  margin-right: calc(var(--su12) * -1) !important;
+}
+.mxn16 {
+  margin-left: calc(var(--su16) * -1) !important;
+  margin-right: calc(var(--su16) * -1) !important;
+}
+.mxn24 {
+  margin-left: calc(var(--su24) * -1) !important;
+  margin-right: calc(var(--su24) * -1) !important;
+}
+.mxn32 {
+  margin-left: calc(var(--su32) * -1) !important;
+  margin-right: calc(var(--su32) * -1) !important;
+}
+.mxn48 {
+  margin-left: calc(var(--su48) * -1) !important;
+  margin-right: calc(var(--su48) * -1) !important;
+}
+.mxn64 {
+  margin-left: calc(var(--su64) * -1) !important;
+  margin-right: calc(var(--su64) * -1) !important;
+}
+.mxn96 {
+  margin-left: calc(var(--su96) * -1) !important;
+  margin-right: calc(var(--su96) * -1) !important;
+}
+.mxn128 {
+  margin-left: calc(var(--su128) * -1) !important;
+  margin-right: calc(var(--su128) * -1) !important;
+}
 .my1 {
   margin-top: var(--su1) !important;
   margin-bottom: var(--su1) !important;
@@ -12108,6 +12141,58 @@ body {
   margin-top: var(--su128) !important;
   margin-bottom: var(--su128) !important;
 }
+.myn1 {
+  margin-top: calc(var(--su1) * -1) !important;
+  margin-bottom: calc(var(--su1) * -1) !important;
+}
+.myn2 {
+  margin-top: calc(var(--su2) * -1) !important;
+  margin-bottom: calc(var(--su2) * -1) !important;
+}
+.myn4 {
+  margin-top: calc(var(--su4) * -1) !important;
+  margin-bottom: calc(var(--su4) * -1) !important;
+}
+.myn6 {
+  margin-top: calc(var(--su6) * -1) !important;
+  margin-bottom: calc(var(--su6) * -1) !important;
+}
+.myn8 {
+  margin-top: calc(var(--su8) * -1) !important;
+  margin-bottom: calc(var(--su8) * -1) !important;
+}
+.myn12 {
+  margin-top: calc(var(--su12) * -1) !important;
+  margin-bottom: calc(var(--su12) * -1) !important;
+}
+.myn16 {
+  margin-top: calc(var(--su16) * -1) !important;
+  margin-bottom: calc(var(--su16) * -1) !important;
+}
+.myn24 {
+  margin-top: calc(var(--su24) * -1) !important;
+  margin-bottom: calc(var(--su24) * -1) !important;
+}
+.myn32 {
+  margin-top: calc(var(--su32) * -1) !important;
+  margin-bottom: calc(var(--su32) * -1) !important;
+}
+.myn48 {
+  margin-top: calc(var(--su48) * -1) !important;
+  margin-bottom: calc(var(--su48) * -1) !important;
+}
+.myn64 {
+  margin-top: calc(var(--su64) * -1) !important;
+  margin-bottom: calc(var(--su64) * -1) !important;
+}
+.myn96 {
+  margin-top: calc(var(--su96) * -1) !important;
+  margin-bottom: calc(var(--su96) * -1) !important;
+}
+.myn128 {
+  margin-top: calc(var(--su128) * -1) !important;
+  margin-bottom: calc(var(--su128) * -1) !important;
+}
 .p0 {
   padding: 0 !important;
 }
@@ -14292,7 +14377,7 @@ ol {
 .hmn-initial {
   min-height: initial !important;
 }
-.hmx-screen {
+.hmn-screen {
   min-height: 100vh !important;
 }
 /* stylelint-disable */
@@ -15862,7 +15947,7 @@ ol {
   .lg\:hmn-initial {
     min-height: initial !important;
   }
-  .lg\:hmx-screen {
+  .lg\:hmn-screen {
     min-height: 100vh !important;
   }
 }
@@ -17432,7 +17517,7 @@ ol {
   .md\:hmn-initial {
     min-height: initial !important;
   }
-  .md\:hmx-screen {
+  .md\:hmn-screen {
     min-height: 100vh !important;
   }
 }
@@ -19002,7 +19087,7 @@ ol {
   .sm\:hmn-initial {
     min-height: initial !important;
   }
-  .sm\:hmx-screen {
+  .sm\:hmn-screen {
     min-height: 100vh !important;
   }
 }
@@ -19242,13 +19327,13 @@ body.theme-highcontrast .s-btn__danger.s-btn__filled:not(.is-selected) .s-btn--n
   box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.7);
 }
 @media (prefers-color-scheme: dark) {
-  body.theme-system .s-btn__filled {
+  body.theme-system .s-btn__filled:not(:focus) {
     box-shadow: none;
   }
 }
-body.theme-dark .s-btn__filled,
-.theme-dark__forced .s-btn__filled,
-body.theme-system .theme-dark__forced .s-btn__filled {
+body.theme-dark .s-btn__filled:not(:focus),
+.theme-dark__forced .s-btn__filled:not(:focus),
+body.theme-system .theme-dark__forced .s-btn__filled:not(:focus) {
   box-shadow: none;
 }
 .s-btn__filled:hover,
@@ -19309,13 +19394,13 @@ body.theme-highcontrast .s-btn__muted.s-btn__filled {
   box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 }
 @media (prefers-color-scheme: dark) {
-  body.theme-system .s-btn__muted.s-btn__filled {
+  body.theme-system .s-btn__muted.s-btn__filled:not(:focus) {
     box-shadow: none;
   }
 }
-body.theme-dark .s-btn__muted.s-btn__filled,
-.theme-dark__forced .s-btn__muted.s-btn__filled,
-body.theme-system .theme-dark__forced .s-btn__muted.s-btn__filled {
+body.theme-dark .s-btn__muted.s-btn__filled:not(:focus),
+.theme-dark__forced .s-btn__muted.s-btn__filled:not(:focus),
+body.theme-system .theme-dark__forced .s-btn__muted.s-btn__filled:not(:focus) {
   box-shadow: none;
 }
 body.theme-highcontrast .s-btn__muted.s-btn__filled {
@@ -19397,13 +19482,13 @@ body.theme-highcontrast .s-btn__danger:focus {
   box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 }
 @media (prefers-color-scheme: dark) {
-  body.theme-system .s-btn__danger.s-btn__filled {
+  body.theme-system .s-btn__danger.s-btn__filled:not(:focus) {
     box-shadow: none;
   }
 }
-body.theme-dark .s-btn__danger.s-btn__filled,
-.theme-dark__forced .s-btn__danger.s-btn__filled,
-body.theme-system .theme-dark__forced .s-btn__danger.s-btn__filled {
+body.theme-dark .s-btn__danger.s-btn__filled:not(:focus),
+.theme-dark__forced .s-btn__danger.s-btn__filled:not(:focus),
+body.theme-system .theme-dark__forced .s-btn__danger.s-btn__filled:not(:focus) {
   box-shadow: none;
 }
 body.theme-highcontrast .s-btn__danger.s-btn__filled {
@@ -19448,25 +19533,28 @@ body.theme-highcontrast .s-btn__danger.s-btn__filled.is-selected .s-btn--number
   box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 }
 @media (prefers-color-scheme: dark) {
-  body.theme-system .s-btn__primary {
+  body.theme-system .s-btn__primary:not(:focus) {
     box-shadow: none;
   }
   body.theme-system .s-btn__primary:not(.is-selected) {
+    background-color: var(--theme-secondary-300);
     color: var(--black);
   }
 }
-body.theme-dark .s-btn__primary,
-.theme-dark__forced .s-btn__primary,
-body.theme-system .theme-dark__forced .s-btn__primary {
+body.theme-dark .s-btn__primary:not(:focus),
+.theme-dark__forced .s-btn__primary:not(:focus),
+body.theme-system .theme-dark__forced .s-btn__primary:not(:focus) {
   box-shadow: none;
 }
 body.theme-dark .s-btn__primary:not(.is-selected),
 .theme-dark__forced .s-btn__primary:not(.is-selected),
 body.theme-system .theme-dark__forced .s-btn__primary:not(.is-selected) {
+  background-color: var(--theme-secondary-300);
   color: var(--black);
 }
 body.theme-highcontrast .s-btn__primary:not(.is-selected) {
   border-color: transparent;
+  background-color: var(--theme-secondary-400);
   color: var(--white);
 }
 .theme-light__forced .s-btn__primary,
@@ -19559,7 +19647,7 @@ body.theme-highcontrast .s-btn__github {
 .s-btn__unset:focus {
   padding: 0;
   border: none;
-  outline: none;
+  outline: initial;
   font: unset;
   border-radius: 0;
   color: unset;
@@ -19573,7 +19661,7 @@ body.theme-highcontrast .s-btn__github {
   padding: 0;
   border: none;
   border-radius: 0;
-  outline: none;
+  outline: initial;
   font: inherit;
   background: none;
   box-shadow: none;
@@ -19672,6 +19760,12 @@ body.theme-highcontrast .s-btn__link {
 .s-btn__link.s-btn__dropdown:after {
   right: 0;
 }
+.s-btn__unset:focus,
+.s-btn__link:focus,
+.s-btn__unset:focus-visible,
+.s-btn__link:focus-visible {
+  outline-style: auto;
+}
 .s-btn__icon .svg-icon {
   vertical-align: baseline;
   margin-top: -0.3em;