v8.0.0 (#62)

dist/_build.sh

@@ -48,6 +48,8 @@ echo >> "$base.less"
 
 echo "Compiling $base.css..."
 lessc "$base.less" "$base.css"
+echo "Compiling $base.min.css..."
+lessc "$base.less" --clean-css "$base.min.css"
 
 done
 done

dist/base.module.css

@@ -17,7 +17,7 @@
   font-family: var(--bfont-text-family);
 }
 :where(.bluelib),
-:where(.bluelib) * {
+:where(.bluelib) :where(*) {
   margin: 0;
   padding: 0;
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
@@ -27,56 +27,51 @@
   scrollbar-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)) hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
 }
 :where(.bluelib),
-:where(.bluelib) *,
+:where(.bluelib) :where(*),
 :where(.bluelib)::before,
-:where(.bluelib) *::before,
+:where(.bluelib) :where(*)::before,
 :where(.bluelib)::after,
-:where(.bluelib) *::after {
+:where(.bluelib) :where(*)::after {
   box-sizing: border-box;
 }
 :where(.bluelib):focus-visible,
-:where(.bluelib) *:focus-visible {
+:where(.bluelib) :where(*):focus-visible {
   outline-width: 4px;
   outline-style: solid;
   outline-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.3);
 }
-:where(.bluelib) .page-footer {
+:where(.bluelib) :where(.page-footer) {
   margin: 1rem 0;
   text-align: center;
   font-size: x-small;
 }
-:where(.bluelib) .float-top {
+:where(.bluelib) :where(.float-top) {
   margin-bottom: auto;
 }
-:where(.bluelib) .float-right {
+:where(.bluelib) :where(.float-right) {
   margin-left: auto;
 }
-:where(.bluelib) .float-bottom {
+:where(.bluelib) :where(.float-bottom) {
   margin-top: auto;
 }
-:where(.bluelib) .float-left {
+:where(.bluelib) :where(.float-left) {
   margin-right: auto;
 }
-:where(.bluelib) .float-hcenter {
+:where(.bluelib) :where(.float-hcenter) {
   margin-left: auto;
   margin-right: auto;
 }
-:where(.bluelib) .float-vcenter {
+:where(.bluelib) :where(.float-vcenter) {
   margin-top: auto;
   margin-bottom: auto;
 }
-:where(.bluelib) .header-1 {
+:where(.bluelib) :where(.header-1) {
   font-size: 2.5em;
 }
-:where(.bluelib) .header-2 {
+:where(.bluelib) :where(.header-2) {
   font-size: 1.75em;
 }
-:where(.bluelib) .header-1,
+:where(.bluelib) :where(h1, h2, h3, h4, h5, h6) {
-:where(.bluelib) .header-2,
-:where(.bluelib) .header-3,
-:where(.bluelib) .header-4,
-:where(.bluelib) .header-5,
-:where(.bluelib) .header-6 {
   text-align: center;
   --bhsl-current-hue: var(--bhsl-primary-hue);
   --bhsl-current-saturation: var(--bhsl-primary-saturation);
@@ -88,7 +83,7 @@
   line-height: var(--bfont-header-height);
   font-family: var(--bfont-header-family);
 }
-:where(.bluelib) .panel {
+:where(.bluelib) :where(.panel) {
   padding-top: 8px;
   padding-right: 8px;
   padding-left: 8px;
@@ -101,40 +96,64 @@
   gap: 8px;
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
 }
-:where(.bluelib) .panel.border-top,
+:where(.bluelib) :where(.panel):where(.border-top),
-:where(.bluelib) .panel.panel-box {
+:where(.bluelib) :where(.panel):where(.panel-box) {
   border-top-width: 2px;
   padding-top: 6px;
 }
-:where(.bluelib) .panel.border-right,
+:where(.bluelib) :where(.panel):where(.border-right),
-:where(.bluelib) .panel.panel-box {
+:where(.bluelib) :where(.panel):where(.panel-box) {
   border-right-width: 2px;
   padding-right: 6px;
 }
-:where(.bluelib) .panel.border-left,
+:where(.bluelib) :where(.panel):where(.border-left),
-:where(.bluelib) .panel.panel-box,
+:where(.bluelib) :where(.panel):where(.panel-box),
-:where(.bluelib) .panel.panel-dialog {
+:where(.bluelib) :where(.panel):where(.panel-dialog) {
   border-left-width: 2px;
   padding-left: 6px;
 }
-:where(.bluelib) .panel.border-bottom,
+:where(.bluelib) :where(.panel):where(.border-bottom),
-:where(.bluelib) .panel.panel-box {
+:where(.bluelib) :where(.panel):where(.panel-box) {
   border-bottom-width: 2px;
   padding-bottom: 6px;
 }
-:where(.bluelib) .panel.panel-parenthesis {
+:where(.bluelib) :where(.panel):where(.panel-parenthesis) {
   font-size: smaller;
 }
-:where(.bluelib) .chapter-0,
+:where(.bluelib) :where(.chapter-0) {
-:where(.bluelib) .chapter-1,
+  flex-wrap: nowrap;
-:where(.bluelib) .chapter-2,
+}
-:where(.bluelib) .chapter-3,
+:where(.bluelib) :where(.chapter-0) > :where(*) {
-:where(.bluelib) .chapter-4,
+  flex-shrink: 1;
-:where(.bluelib) .chapter-5,
+}
-:where(.bluelib) .chapter-6,
+:where(.bluelib) :where(.chapter-1) > :where(*) {
-:where(.bluelib) .chapter-7,
+  flex-basis: calc(100% / 2);
-:where(.bluelib) .chapter-8,
+}
-:where(.bluelib) .chapter-9 {
+:where(.bluelib) :where(.chapter-2) > :where(*) {
+  flex-basis: calc(100% / 3);
+}
+:where(.bluelib) :where(.chapter-3) > :where(*) {
+  flex-basis: calc(100% / 4);
+}
+:where(.bluelib) :where(.chapter-4) > :where(*) {
+  flex-basis: calc(100% / 5);
+}
+:where(.bluelib) :where(.chapter-5) > :where(*) {
+  flex-basis: calc(100% / 6);
+}
+:where(.bluelib) :where(.chapter-6) > :where(*) {
+  flex-basis: calc(100% / 7);
+}
+:where(.bluelib) :where(.chapter-7) > :where(*) {
+  flex-basis: calc(100% / 8);
+}
+:where(.bluelib) :where(.chapter-8) > :where(*) {
+  flex-basis: calc(100% / 9);
+}
+:where(.bluelib) :where(.chapter-9) > :where(*) {
+  flex-basis: calc(100% / 10);
+}
+:where(.bluelib) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
@@ -143,145 +162,44 @@
   align-items: stretch;
   margin: 8px 0;
 }
-:where(.bluelib) .chapter-0 > *,
+:where(.bluelib) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > :where(*) {
-:where(.bluelib) .chapter-1 > *,
-:where(.bluelib) .chapter-2 > *,
-:where(.bluelib) .chapter-3 > *,
-:where(.bluelib) .chapter-4 > *,
-:where(.bluelib) .chapter-5 > *,
-:where(.bluelib) .chapter-6 > *,
-:where(.bluelib) .chapter-7 > *,
-:where(.bluelib) .chapter-8 > *,
-:where(.bluelib) .chapter-9 > * {
   flex-grow: 1;
   flex-shrink: 0;
 }
-:where(.bluelib) .chapter-0 > .header-1,
+:where(.bluelib) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > :where(h1, h2, h3, h4, h5, h6) {
-:where(.bluelib) .chapter-1 > .header-1,
-:where(.bluelib) .chapter-2 > .header-1,
-:where(.bluelib) .chapter-3 > .header-1,
-:where(.bluelib) .chapter-4 > .header-1,
-:where(.bluelib) .chapter-5 > .header-1,
-:where(.bluelib) .chapter-6 > .header-1,
-:where(.bluelib) .chapter-7 > .header-1,
-:where(.bluelib) .chapter-8 > .header-1,
-:where(.bluelib) .chapter-9 > .header-1,
-:where(.bluelib) .chapter-0 > .header-2,
-:where(.bluelib) .chapter-1 > .header-2,
-:where(.bluelib) .chapter-2 > .header-2,
-:where(.bluelib) .chapter-3 > .header-2,
-:where(.bluelib) .chapter-4 > .header-2,
-:where(.bluelib) .chapter-5 > .header-2,
-:where(.bluelib) .chapter-6 > .header-2,
-:where(.bluelib) .chapter-7 > .header-2,
-:where(.bluelib) .chapter-8 > .header-2,
-:where(.bluelib) .chapter-9 > .header-2,
-:where(.bluelib) .chapter-0 > .header-3,
-:where(.bluelib) .chapter-1 > .header-3,
-:where(.bluelib) .chapter-2 > .header-3,
-:where(.bluelib) .chapter-3 > .header-3,
-:where(.bluelib) .chapter-4 > .header-3,
-:where(.bluelib) .chapter-5 > .header-3,
-:where(.bluelib) .chapter-6 > .header-3,
-:where(.bluelib) .chapter-7 > .header-3,
-:where(.bluelib) .chapter-8 > .header-3,
-:where(.bluelib) .chapter-9 > .header-3,
-:where(.bluelib) .chapter-0 > .header-4,
-:where(.bluelib) .chapter-1 > .header-4,
-:where(.bluelib) .chapter-2 > .header-4,
-:where(.bluelib) .chapter-3 > .header-4,
-:where(.bluelib) .chapter-4 > .header-4,
-:where(.bluelib) .chapter-5 > .header-4,
-:where(.bluelib) .chapter-6 > .header-4,
-:where(.bluelib) .chapter-7 > .header-4,
-:where(.bluelib) .chapter-8 > .header-4,
-:where(.bluelib) .chapter-9 > .header-4,
-:where(.bluelib) .chapter-0 > .header-5,
-:where(.bluelib) .chapter-1 > .header-5,
-:where(.bluelib) .chapter-2 > .header-5,
-:where(.bluelib) .chapter-3 > .header-5,
-:where(.bluelib) .chapter-4 > .header-5,
-:where(.bluelib) .chapter-5 > .header-5,
-:where(.bluelib) .chapter-6 > .header-5,
-:where(.bluelib) .chapter-7 > .header-5,
-:where(.bluelib) .chapter-8 > .header-5,
-:where(.bluelib) .chapter-9 > .header-5,
-:where(.bluelib) .chapter-0 > .header-6,
-:where(.bluelib) .chapter-1 > .header-6,
-:where(.bluelib) .chapter-2 > .header-6,
-:where(.bluelib) .chapter-3 > .header-6,
-:where(.bluelib) .chapter-4 > .header-6,
-:where(.bluelib) .chapter-5 > .header-6,
-:where(.bluelib) .chapter-6 > .header-6,
-:where(.bluelib) .chapter-7 > .header-6,
-:where(.bluelib) .chapter-8 > .header-6,
-:where(.bluelib) .chapter-9 > .header-6 {
   flex-basis: 100%;
   margin-top: 1.2em;
 }
-:where(.bluelib) .chapter-0 {
+:where(.bluelib) :where(.separator) {
-  flex-wrap: nowrap;
-}
-:where(.bluelib) .chapter-0 > * {
-  flex-shrink: 1;
-}
-:where(.bluelib) .chapter-1 > * {
-  flex-basis: calc(100% / 2);
-}
-:where(.bluelib) .chapter-2 > * {
-  flex-basis: calc(100% / 3);
-}
-:where(.bluelib) .chapter-3 > * {
-  flex-basis: calc(100% / 4);
-}
-:where(.bluelib) .chapter-4 > * {
-  flex-basis: calc(100% / 5);
-}
-:where(.bluelib) .chapter-5 > * {
-  flex-basis: calc(100% / 6);
-}
-:where(.bluelib) .chapter-6 > * {
-  flex-basis: calc(100% / 7);
-}
-:where(.bluelib) .chapter-7 > * {
-  flex-basis: calc(100% / 8);
-}
-:where(.bluelib) .chapter-8 > * {
-  flex-basis: calc(100% / 9);
-}
-:where(.bluelib) .chapter-9 > * {
-  flex-basis: calc(100% / 10);
-}
-:where(.bluelib) .separator {
   border-width: 1px;
   border-style: dashed;
 }
-:where(.bluelib) .separator-light {
+:where(.bluelib) :where(.separator-light) {
   border-style: dotted;
 }
-:where(.bluelib) .separator-heavy {
+:where(.bluelib) :where(.separator-heavy) {
   border-style: solid;
 }
-:where(.bluelib) .image {
+:where(.bluelib) :where(.image) {
   display: block;
   max-width: 100%;
   object-fit: contain;
 }
-:where(.bluelib) .image-limit-half {
+:where(.bluelib) :where(.image-limit-half) {
   max-height: max(28.2vw, 50vh);
 }
-:where(.bluelib) .image-limit-quarter {
+:where(.bluelib) :where(.image-limit-quarter) {
   max-height: max(14.1vw, 25vh);
 }
-:where(.bluelib) .table {
+:where(.bluelib) :where(.table) {
   border-collapse: collapse;
 }
-:where(.bluelib) .table .table-head,
+:where(.bluelib) :where(.table) :where(.table-head),
-:where(.bluelib) .table .table-data {
+:where(.bluelib) :where(.table) :where(.table-data) {
   padding: 3px 7px;
   border-width: 1px;
 }
-:where(.bluelib) .table .table-caption {
+:where(.bluelib) :where(.table) :where(.table-caption) {
   border-width: 1px;
   font-style: var(--bfont-caption-style);
   font-variant: var(--bfont-caption-variant);
@@ -290,77 +208,77 @@
   line-height: var(--bfont-caption-height);
   font-family: var(--bfont-caption-family);
 }
-:where(.bluelib) .table .table-caption.table-caption-top {
+:where(.bluelib) :where(.table) :where(.table-caption):where(.table-caption-top) {
   caption-side: top;
   border-bottom-width: 0;
 }
-:where(.bluelib) .table .table-caption.table-caption-bottom {
+:where(.bluelib) :where(.table) :where(.table-caption):where(.table-caption-bottom) {
   caption-side: bottom;
   border-top-width: 0;
 }
-:where(.bluelib) .table.panel {
+:where(.bluelib) :where(.table):where(.panel) {
   display: table;
 }
-:where(.bluelib) .table.panel .table-head,
+:where(.bluelib) :where(.table):where(.panel) :where(.table-head),
-:where(.bluelib) .table.panel .table-data {
+:where(.bluelib) :where(.table):where(.panel) :where(.table-data) {
   padding: 8px;
 }
-:where(.bluelib) .table.panel .table-caption {
+:where(.bluelib) :where(.table):where(.panel) :where(.table-caption) {
   text-align: inherit;
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
   padding: 8px;
 }
-:where(.bluelib) .table.panel .table-caption * {
+:where(.bluelib) :where(.table):where(.panel) :where(.table-caption) :where(*) {
   margin-top: 8px;
   margin-bottom: 8px;
 }
-:where(.bluelib) .table.panel .table-caption *:first-child {
+:where(.bluelib) :where(.table):where(.panel) :where(.table-caption) :where(*):first-child {
   margin-top: 0;
 }
-:where(.bluelib) .table.panel .table-caption *:last-child {
+:where(.bluelib) :where(.table):where(.panel) :where(.table-caption) :where(*):last-child {
   margin-bottom: 0;
 }
-:where(.bluelib) .table.panel-box .table-row {
+:where(.bluelib) :where(.table):where(.panel-box) :where(.table-row) {
   border-width: 1px;
 }
-:where(.bluelib) .table.panel-box .table-head,
+:where(.bluelib) :where(.table):where(.panel-box) :where(.table-head),
-:where(.bluelib) .table.panel-box .table-data {
+:where(.bluelib) :where(.table):where(.panel-box) :where(.table-data) {
   border-width: 1px;
   padding: 7px;
 }
-:where(.bluelib) .table.panel-box .table-caption {
+:where(.bluelib) :where(.table):where(.panel-box) :where(.table-caption) {
   border-width: 2px;
   padding: 6px;
 }
-:where(.bluelib) .table.panel-box .table-caption.table-caption-top {
+:where(.bluelib) :where(.table):where(.panel-box) :where(.table-caption):where(.table-caption-top) {
   border-bottom-width: 0;
 }
-:where(.bluelib) .table.panel-box .table-caption.table-caption-bottom {
+:where(.bluelib) :where(.table):where(.panel-box) :where(.table-caption):where(.table-caption-bottom) {
   border-top-width: 0;
 }
-:where(.bluelib) .table.panel-dialog .table-header > .table-row {
+:where(.bluelib) :where(.table):where(.panel-dialog) :where(.table-header) > :where(.table-row) {
   border-bottom-width: 1px;
 }
-:where(.bluelib) .table.panel-dialog .table-body > .table-row {
+:where(.bluelib) :where(.table):where(.panel-dialog) :where(.table-body) > :where(.table-row) {
   border-width: 0;
 }
-:where(.bluelib) .table.panel-dialog .table-footer > .table-row {
+:where(.bluelib) :where(.table):where(.panel-dialog) :where(.table-footer) > :where(.table-row) {
   border-top-width: 1px;
 }
-:where(.bluelib) .table.panel-dialog .table-head,
+:where(.bluelib) :where(.table):where(.panel-dialog) :where(.table-head),
-:where(.bluelib) .table.panel-dialog .table-data {
+:where(.bluelib) :where(.table):where(.panel-dialog) :where(.table-data) {
   border-width: 0 0 0 1px;
   padding: 8px 8px 8px 7px;
 }
-:where(.bluelib) .table.panel-dialog .table-caption {
+:where(.bluelib) :where(.table):where(.panel-dialog) :where(.table-caption) {
   border-width: 0 0 0 2px;
   padding: 8px 8px 8px 6px;
 }
-:where(.bluelib) .panel > .list-unordered,
+:where(.bluelib) :where(.panel) > :where(.list-unordered),
-:where(.bluelib) .panel > .list-ordered {
+:where(.bluelib) :where(.panel) > :where(.list-ordered) {
   margin-left: 6ex;
 }
-:where(.bluelib) .glossary-term {
+:where(.bluelib) :where(.glossary-term) {
   margin-top: 0.5em;
   padding: 0.2em 0;
   --bhsl-current-hue: var(--bhsl-primary-hue);
@@ -373,14 +291,14 @@
   line-height: var(--bfont-term-height);
   font-family: var(--bfont-term-family);
 }
-:where(.bluelib) .glossary-description {
+:where(.bluelib) :where(.glossary-description) {
   margin-left: 4.5ex;
   margin-bottom: 0.5em;
 }
-:where(.bluelib) .glossary-details {
+:where(.bluelib) :where(.glossary-details) {
   margin-left: 4.5ex;
 }
-:where(.bluelib) .glossary-summary {
+:where(.bluelib) :where(.glossary-summary) {
   cursor: pointer;
   margin-left: -4ex;
   padding: 0.2em 0;
@@ -392,11 +310,10 @@
   font-family: var(--bfont-summary-family);
   user-select: none;
 }
-:where(.bluelib) .modifier-fade {
+:where(.bluelib) :where(.modifier-fade) {
   opacity: 0.3;
 }
-:where(.bluelib) .modifier-mark,
+:where(.bluelib) :where(.modifier-mark) {
-:where(.bluelib) .element-mark {
   font-style: var(--bfont-mark-style);
   font-variant: var(--bfont-mark-variant);
   font-weight: var(--bfont-mark-weight);
@@ -408,73 +325,63 @@
   --bhsl-current-saturation: var(--bhsl-mark-foreground-saturation);
   --bhsl-current-lightness: var(--bhsl-mark-foreground-lightness);
 }
-:where(.bluelib) .modifier-mark .modifier-mark,
+:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) {
-:where(.bluelib) .element-mark .modifier-mark,
-:where(.bluelib) .modifier-mark .element-mark,
-:where(.bluelib) .element-mark .element-mark {
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
   --bhsl-current-hue: var(--bhsl-foreground-hue);
   --bhsl-current-saturation: var(--bhsl-foreground-saturation);
   --bhsl-current-lightness: var(--bhsl-foreground-lightness);
 }
-:where(.bluelib) .modifier-mark .modifier-mark .modifier-mark,
+:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark) {
-:where(.bluelib) .element-mark .modifier-mark .modifier-mark,
-:where(.bluelib) .modifier-mark .element-mark .modifier-mark,
-:where(.bluelib) .element-mark .element-mark .modifier-mark,
-:where(.bluelib) .modifier-mark .modifier-mark .element-mark,
-:where(.bluelib) .element-mark .modifier-mark .element-mark,
-:where(.bluelib) .modifier-mark .element-mark .element-mark,
-:where(.bluelib) .element-mark .element-mark .element-mark {
   background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
   --bhsl-current-hue: var(--bhsl-mark-foreground-hue);
   --bhsl-current-saturation: var(--bhsl-mark-foreground-saturation);
   --bhsl-current-lightness: var(--bhsl-mark-foreground-lightness);
 }
-:where(.bluelib) .modifier-todo {
+:where(.bluelib) :where(.modifier-todo) {
   --bhsl-current-hue: var(--bhsl-todo-foreground-hue);
   --bhsl-current-saturation: var(--bhsl-todo-foreground-saturation);
   --bhsl-current-lightness: var(--bhsl-todo-foreground-lightness);
 }
-:where(.bluelib) .modifier-todo,
+:where(.bluelib) :where(.modifier-todo),
-:where(.bluelib) .modifier-todo .panel {
+:where(.bluelib) :where(.modifier-todo) :where(.panel) {
   border-style: dashed;
   background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
 }
-:where(.bluelib) .property-disabled {
+:where(.bluelib) :where(.property-disabled) {
   border-style: dashed;
   cursor: not-allowed;
 }
-:where(.bluelib) .modifier-red {
+:where(.bluelib) :where(.modifier-red) {
   --bhsl-current-hue: var(--bhsl-red-hue);
   --bhsl-current-saturation: var(--bhsl-red-saturation);
   --bhsl-current-lightness: var(--bhsl-red-lightness);
 }
-:where(.bluelib) .modifier-yellow {
+:where(.bluelib) :where(.modifier-yellow) {
   --bhsl-current-hue: var(--bhsl-yellow-hue);
   --bhsl-current-saturation: var(--bhsl-yellow-saturation);
   --bhsl-current-lightness: var(--bhsl-yellow-lightness);
 }
-:where(.bluelib) .modifier-green {
+:where(.bluelib) :where(.modifier-green) {
   --bhsl-current-hue: var(--bhsl-green-hue);
   --bhsl-current-saturation: var(--bhsl-green-saturation);
   --bhsl-current-lightness: var(--bhsl-green-lightness);
 }
-:where(.bluelib) .modifier-cyan {
+:where(.bluelib) :where(.modifier-cyan) {
   --bhsl-current-hue: var(--bhsl-cyan-hue);
   --bhsl-current-saturation: var(--bhsl-cyan-saturation);
   --bhsl-current-lightness: var(--bhsl-cyan-lightness);
 }
-:where(.bluelib) .modifier-blue {
+:where(.bluelib) :where(.modifier-blue) {
   --bhsl-current-hue: var(--bhsl-blue-hue);
   --bhsl-current-saturation: var(--bhsl-blue-saturation);
   --bhsl-current-lightness: var(--bhsl-blue-lightness);
 }
-:where(.bluelib) .modifier-magenta {
+:where(.bluelib) :where(.modifier-magenta) {
   --bhsl-current-hue: var(--bhsl-magenta-hue);
   --bhsl-current-saturation: var(--bhsl-magenta-saturation);
   --bhsl-current-lightness: var(--bhsl-magenta-lightness);
 }
-:where(.bluelib) .input {
+:where(.bluelib) :where(.input) {
   font: inherit;
   cursor: pointer;
   background-color: transparent;
@@ -484,50 +391,50 @@
   border-width: 0;
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4);
 }
-:where(.bluelib) .input::placeholder {
+:where(.bluelib) :where(.input)::placeholder {
   opacity: 1;
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4);
 }
-:where(.bluelib) .input:hover:not(.property-disabled) {
+:where(.bluelib) :where(.input):hover:not(:where(.property-disabled)) {
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-:where(.bluelib) .input:hover:not(.property-disabled)::placeholder {
+:where(.bluelib) :where(.input):hover:not(:where(.property-disabled))::placeholder {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-:where(.bluelib) .input:active:not(.property-disabled),
+:where(.bluelib) :where(.input):active:not(:where(.property-disabled)),
-:where(.bluelib) .input:focus:not(.property-disabled) {
+:where(.bluelib) :where(.input):focus:not(:where(.property-disabled)) {
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-:where(.bluelib) .input-area {
+:where(.bluelib) :where(.input-area) {
   resize: vertical;
 }
-:where(.bluelib) .input-field,
+:where(.bluelib) :where(.input-field),
-:where(.bluelib) .input-select {
+:where(.bluelib) :where(.input-select) {
   border-bottom-width: 2px;
 }
-:where(.bluelib) .input-area,
+:where(.bluelib) :where(.input-area),
-:where(.bluelib) .input-multiselect {
+:where(.bluelib) :where(.input-multiselect) {
   border-left-width: 2px;
 }
-:where(.bluelib) .input-field:not(.property-disabled),
+:where(.bluelib) :where(.input-field):not(:where(.property-disabled)),
-:where(.bluelib) .input-area:not(.property-disabled) {
+:where(.bluelib) :where(.input-area):not(:where(.property-disabled)) {
   cursor: text;
 }
-:where(.bluelib) .input-select:not(.property-disabled),
+:where(.bluelib) :where(.input-select):not(:where(.property-disabled)),
-:where(.bluelib) .input-multiselect:not(.property-disabled) {
+:where(.bluelib) :where(.input-multiselect):not(:where(.property-disabled)) {
   cursor: vertical-text;
 }
-:where(.bluelib) .input-range:not(.property-disabled) {
+:where(.bluelib) :where(.input-range):not(:where(.property-disabled)) {
   cursor: ew-resize;
 }
-:where(.bluelib) .input-radio:not(.property-disabled),
+:where(.bluelib) :where(.input-radio):not(:where(.property-disabled)),
-:where(.bluelib) .input-checkbox:not(.property-disabled),
+:where(.bluelib) :where(.input-checkbox):not(:where(.property-disabled)),
-:where(.bluelib) .input-button:not(.property-disabled),
+:where(.bluelib) :where(.input-button):not(:where(.property-disabled)),
-:where(.bluelib) .input-color:not(.property-disabled) {
+:where(.bluelib) :where(.input-color):not(:where(.property-disabled)) {
   cursor: pointer;
 }
-:where(.bluelib) .input-select optgroup,
+:where(.bluelib) :where(.input-select) optgroup,
-:where(.bluelib) .input-multiselect optgroup {
+:where(.bluelib) :where(.input-multiselect) optgroup {
   padding-bottom: 0.25em;
   font-style: var(--bfont-header-style);
   font-variant: var(--bfont-header-variant);
@@ -536,12 +443,12 @@
   line-height: var(--bfont-header-height);
   font-family: var(--bfont-header-family);
 }
-:where(.bluelib) .input-select optgroup option,
+:where(.bluelib) :where(.input-select) optgroup option,
-:where(.bluelib) .input-multiselect optgroup option {
+:where(.bluelib) :where(.input-multiselect) optgroup option {
   padding: 0.125em 0 0.125em 2ex;
 }
-:where(.bluelib) .input-select option,
+:where(.bluelib) :where(.input-select) option,
-:where(.bluelib) .input-multiselect option {
+:where(.bluelib) :where(.input-multiselect) option {
   font-style: var(--bfont-text-style);
   font-variant: var(--bfont-text-variant);
   font-weight: var(--bfont-text-weight);
@@ -549,8 +456,8 @@
   line-height: var(--bfont-text-height);
   font-family: var(--bfont-text-family);
 }
-:where(.bluelib) .input-radio,
+:where(.bluelib) :where(.input-radio),
-:where(.bluelib) .input-checkbox {
+:where(.bluelib) :where(.input-checkbox) {
   appearance: none;
   width: 1em;
   height: 1em;
@@ -560,89 +467,65 @@
   justify-content: center;
   align-items: center;
 }
-:where(.bluelib) .input-radio::before,
+:where(.bluelib) :where(.input-radio)::before,
-:where(.bluelib) .input-checkbox::before {
+:where(.bluelib) :where(.input-checkbox)::before {
   display: block;
   content: "";
   width: 100%;
   height: 100%;
 }
-:where(.bluelib) .input-radio:checked::before,
+:where(.bluelib) :where(.input-radio):checked::before,
-:where(.bluelib) .input-checkbox:checked::before {
+:where(.bluelib) :where(.input-checkbox):checked::before {
   background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-:where(.bluelib) .input-radio {
+:where(.bluelib) :where(.input-radio) {
   border-radius: 100%;
 }
-:where(.bluelib) .input-radio::before {
+:where(.bluelib) :where(.input-radio)::before {
   border-radius: 100%;
 }
-:where(.bluelib) .input-range {
+:where(.bluelib) :where(.input-range) {
   padding: 0;
-  /*
-        appearance: none;
-
-        &::-moz-range-thumb {
-            width: 0;
-            border-radius: 0;
-            border-style: outset;
-
-            border-color: .hsl-group(current)[@c];
-            border-width: 4px;
-
-            background-color: .hsl-group(primary)[@c];
-        }
-
-        &::-moz-range-track {
-            height: 0.125em;
-            background-color: .hsl-group(current)[@c];
-        }
-
-        &::-moz-range-progress {
-            height: 0.5em;
-            background-color: .hsl-group(current)[@c];
-        }
-         */
 }
-:where(.bluelib) .input-button {
+:where(.bluelib) :where(.input-button) {
   border-width: 2px;
   border-style: outset;
 }
-:where(.bluelib) .input-button:active {
+:where(.bluelib) :where(.input-button):active {
   border-style: inset;
 }
-:where(.bluelib) .input-file,
+:where(.bluelib) :where(.input-file),
-:where(.bluelib) .input-color {
+:where(.bluelib) :where(.input-color) {
   padding: 0;
 }
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
-  :where(.bluelib) .input-field::-webkit-calendar-picker-indicator {
+  :where(.bluelib) :where(.input-field)::-webkit-calendar-picker-indicator {
     filter: invert(calc(calc(var(--bhsl-current-lightness) - 50%) * 1000));
   }
-  :where(.bluelib) .input-select optgroup,
+  :where(.bluelib) :where(.input-select) optgroup,
-  :where(.bluelib) .input-select option {
+  :where(.bluelib) :where(.input-select) option {
     background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
   }
-  :where(.bluelib) .input-select optgroup::before,
+  :where(.bluelib) :where(.input-select) optgroup::before,
-  :where(.bluelib) .input-select option::before {
+  :where(.bluelib) :where(.input-select) option::before {
     content: "";
   }
 }
-:where(.bluelib) .form-flex {
+:where(.bluelib) :where(.form-flex) {
   display: flex;
   flex-direction: column;
   justify-content: stretch;
 }
-:where(.bluelib) .form-flex > .form-flex-content {
+:where(.bluelib) :where(.form-flex) > :where(.form-flex-content) {
   margin: 0.5em 0;
 }
-:where(.bluelib) .form-flex > .form-flex-choice {
+:where(.bluelib) :where(.form-flex) > :where(.form-flex-choice) {
   display: flex;
   gap: 1ex;
   min-height: 1.675em;
 }
-:where(.bluelib) .form-flex > .form-flex-choice > *:first-child,
+:where(.bluelib) :where(.form-flex) > :where(.form-flex-choice) > :where(*):first-child,
-:where(.bluelib) .form-flex > .form-flex-choice > *:last-child {
+:where(.bluelib) :where(.form-flex) > :where(.form-flex-choice) > :where(*):last-child {
   margin: auto 0;
   flex-basis: 15%;
   flex-grow: 0;
@@ -657,7 +540,7 @@
   --bhsl-current-saturation: var(--bhsl-primary-saturation);
   --bhsl-current-lightness: var(--bhsl-primary-lightness);
 }
-:where(.bluelib) .form-flex > .form-flex-choice > * {
+:where(.bluelib) :where(.form-flex) > :where(.form-flex-choice) > :where(*) {
   flex-grow: 1;
   display: flex;
   justify-content: space-between;
@@ -665,20 +548,20 @@
   align-items: stretch;
   gap: 1ex;
 }
-:where(.bluelib) .form-flex > .form-flex-choice > *:first-child {
+:where(.bluelib) :where(.form-flex) > :where(.form-flex-choice) > :where(*):first-child {
   text-align: right;
   display: block;
 }
-:where(.bluelib) .form-flex > .form-flex-choice > *:last-child {
+:where(.bluelib) :where(.form-flex) > :where(.form-flex-choice) > :where(*):last-child {
   text-align: left;
   display: block;
 }
-:where(.bluelib) .text-anchor {
+:where(.bluelib) :where(.text-anchor) {
   --bhsl-current-hue: var(--bhsl-link-hue);
   --bhsl-current-saturation: var(--bhsl-link-saturation);
   --bhsl-current-lightness: var(--bhsl-link-lightness);
 }
-:where(.bluelib) .text-idiomatic {
+:where(.bluelib) :where(.text-idiomatic) {
   font-style: var(--bfont-idiomatic-style);
   font-variant: var(--bfont-idiomatic-variant);
   font-weight: var(--bfont-idiomatic-weight);
@@ -686,7 +569,7 @@
   line-height: var(--bfont-idiomatic-height);
   font-family: var(--bfont-idiomatic-family);
 }
-:where(.bluelib) .text-emphasis {
+:where(.bluelib) :where(.text-emphasis) {
   font-style: var(--bfont-emphasis-style);
   font-variant: var(--bfont-emphasis-variant);
   font-weight: var(--bfont-emphasis-weight);
@@ -694,7 +577,7 @@
   line-height: var(--bfont-emphasis-height);
   font-family: var(--bfont-emphasis-family);
 }
-:where(.bluelib) .text-attention {
+:where(.bluelib) :where(.text-attention) {
   font-style: var(--bfont-attention-style);
   font-variant: var(--bfont-attention-variant);
   font-weight: var(--bfont-attention-weight);
@@ -702,7 +585,7 @@
   line-height: var(--bfont-attention-height);
   font-family: var(--bfont-attention-family);
 }
-:where(.bluelib) .text-strong {
+:where(.bluelib) :where(.text-strong) {
   font-style: var(--bfont-strong-style);
   font-variant: var(--bfont-strong-variant);
   font-weight: var(--bfont-strong-weight);
@@ -710,20 +593,20 @@
   line-height: var(--bfont-strong-height);
   font-family: var(--bfont-strong-family);
 }
-:where(.bluelib) .text-inserted {
+:where(.bluelib) :where(.text-inserted) {
   --bhsl-current-hue: var(--bhsl-inserted-hue);
   --bhsl-current-saturation: var(--bhsl-inserted-saturation);
   --bhsl-current-lightness: var(--bhsl-inserted-lightness);
 }
-:where(.bluelib) .text-deleted {
+:where(.bluelib) :where(.text-deleted) {
   --bhsl-current-hue: var(--bhsl-deleted-hue);
   --bhsl-current-saturation: var(--bhsl-deleted-saturation);
   --bhsl-current-lightness: var(--bhsl-deleted-lightness);
 }
-:where(.bluelib) .text-code,
+:where(.bluelib) :where(.text-code),
-:where(.bluelib) .text-preformatted,
+:where(.bluelib) :where(.text-preformatted),
-:where(.bluelib) .text-input,
+:where(.bluelib) :where(.text-input),
-:where(.bluelib) .text-output {
+:where(.bluelib) :where(.text-output) {
   font-style: var(--bfont-code-style);
   font-variant: var(--bfont-code-variant);
   font-weight: var(--bfont-code-weight);
@@ -731,20 +614,20 @@
   line-height: var(--bfont-code-height);
   font-family: var(--bfont-code-family);
 }
-:where(.bluelib) .text-preformatted {
+:where(.bluelib) :where(.text-preformatted) {
   overflow-x: scroll;
 }
-:where(.bluelib) .text-input,
+:where(.bluelib) :where(.text-input),
-:where(.bluelib) .text-output {
+:where(.bluelib) :where(.text-output) {
   padding: 0 0.25ex;
 }
-:where(.bluelib) .text-input {
+:where(.bluelib) :where(.text-input) {
   background-color: hsl(var(--bhsl-sample-output-hue) var(--bhsl-sample-output-saturation) var(--bhsl-sample-output-lightness));
   --bhsl-current-hue: var(--bhsl-sample-input-hue);
   --bhsl-current-saturation: var(--bhsl-sample-input-saturation);
   --bhsl-current-lightness: var(--bhsl-sample-input-lightness);
 }
-:where(.bluelib) .text-input .text-input {
+:where(.bluelib) :where(.text-input) :where(.text-input) {
   font-style: var(--bfont-boldcode-style);
   font-variant: var(--bfont-boldcode-variant);
   font-weight: var(--bfont-boldcode-weight);
@@ -752,13 +635,13 @@
   line-height: var(--bfont-boldcode-height);
   font-family: var(--bfont-boldcode-family);
 }
-:where(.bluelib) .text-output {
+:where(.bluelib) :where(.text-output) {
   background-color: hsl(var(--bhsl-sample-input-hue) var(--bhsl-sample-input-saturation) var(--bhsl-sample-input-lightness));
   --bhsl-current-hue: var(--bhsl-sample-output-hue);
   --bhsl-current-saturation: var(--bhsl-sample-output-saturation);
   --bhsl-current-lightness: var(--bhsl-sample-output-lightness);
 }
-:where(.bluelib) .text-output .text-output {
+:where(.bluelib) :where(.text-output) :where(.text-output) {
   font-style: var(--bfont-boldcode-style);
   font-variant: var(--bfont-boldcode-variant);
   font-weight: var(--bfont-boldcode-weight);
@@ -766,7 +649,7 @@
   line-height: var(--bfont-boldcode-height);
   font-family: var(--bfont-boldcode-family);
 }
-:where(.bluelib) .text-variable {
+:where(.bluelib) :where(.text-variable) {
   font-style: var(--bfont-variable-style);
   font-variant: var(--bfont-variable-variant);
   font-weight: var(--bfont-variable-weight);
@@ -774,7 +657,7 @@
   line-height: var(--bfont-variable-height);
   font-family: var(--bfont-variable-family);
 }
-:where(.bluelib) .text-citation {
+:where(.bluelib) :where(.text-citation) {
   font-style: var(--bfont-citation-style);
   font-variant: var(--bfont-citation-variant);
   font-weight: var(--bfont-citation-weight);
@@ -782,7 +665,7 @@
   line-height: var(--bfont-citation-height);
   font-family: var(--bfont-citation-family);
 }
-:where(.bluelib) .text-definition {
+:where(.bluelib) :where(.text-definition) {
   font-style: var(--bfont-term-style);
   font-variant: var(--bfont-term-variant);
   font-weight: var(--bfont-term-weight);
@@ -793,6 +676,6 @@
   --bhsl-current-saturation: var(--bhsl-primary-saturation);
   --bhsl-current-lightness: var(--bhsl-primary-lightness);
 }
-:where(.bluelib) .text-abbreviation {
+:where(.bluelib) :where(.text-abbreviation) {
   cursor: help;
 }

dist/base.root.css

@@ -17,7 +17,7 @@
   font-family: var(--bfont-text-family);
 }
 :where(body),
-:where(body) * {
+:where(body) :where(*) {
   margin: 0;
   padding: 0;
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
@@ -27,56 +27,51 @@
   scrollbar-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)) hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
 }
 :where(body),
-:where(body) *,
+:where(body) :where(*),
 :where(body)::before,
-:where(body) *::before,
+:where(body) :where(*)::before,
 :where(body)::after,
-:where(body) *::after {
+:where(body) :where(*)::after {
   box-sizing: border-box;
 }
 :where(body):focus-visible,
-:where(body) *:focus-visible {
+:where(body) :where(*):focus-visible {
   outline-width: 4px;
   outline-style: solid;
   outline-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.3);
 }
-:where(body) footer {
+:where(body) :where(footer) {
   margin: 1rem 0;
   text-align: center;
   font-size: x-small;
 }
-:where(body) .float-top {
+:where(body) :where(.float-top) {
   margin-bottom: auto;
 }
-:where(body) .float-right {
+:where(body) :where(.float-right) {
   margin-left: auto;
 }
-:where(body) .float-bottom {
+:where(body) :where(.float-bottom) {
   margin-top: auto;
 }
-:where(body) .float-left {
+:where(body) :where(.float-left) {
   margin-right: auto;
 }
-:where(body) .float-hcenter {
+:where(body) :where(.float-hcenter) {
   margin-left: auto;
   margin-right: auto;
 }
-:where(body) .float-vcenter {
+:where(body) :where(.float-vcenter) {
   margin-top: auto;
   margin-bottom: auto;
 }
-:where(body) h1 {
+:where(body) :where(h1) {
   font-size: 2.5em;
 }
-:where(body) h2 {
+:where(body) :where(h2) {
   font-size: 1.75em;
 }
-:where(body) h1,
+:where(body) :where(h1, h2, h3, h4, h5, h6) {
-:where(body) h2,
-:where(body) h3,
-:where(body) h4,
-:where(body) h5,
-:where(body) h6 {
   text-align: center;
   --bhsl-current-hue: var(--bhsl-primary-hue);
   --bhsl-current-saturation: var(--bhsl-primary-saturation);
@@ -88,7 +83,7 @@
   line-height: var(--bfont-header-height);
   font-family: var(--bfont-header-family);
 }
-:where(body) .panel {
+:where(body) :where(.panel) {
   padding-top: 8px;
   padding-right: 8px;
   padding-left: 8px;
@@ -101,40 +96,64 @@
   gap: 8px;
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
 }
-:where(body) .panel.border-top,
+:where(body) :where(.panel):where(.border-top),
-:where(body) .panel.box {
+:where(body) :where(.panel):where(.box) {
   border-top-width: 2px;
   padding-top: 6px;
 }
-:where(body) .panel.border-right,
+:where(body) :where(.panel):where(.border-right),
-:where(body) .panel.box {
+:where(body) :where(.panel):where(.box) {
   border-right-width: 2px;
   padding-right: 6px;
 }
-:where(body) .panel.border-left,
+:where(body) :where(.panel):where(.border-left),
-:where(body) .panel.box,
+:where(body) :where(.panel):where(.box),
-:where(body) .panel.dialog {
+:where(body) :where(.panel):where(.dialog) {
   border-left-width: 2px;
   padding-left: 6px;
 }
-:where(body) .panel.border-bottom,
+:where(body) :where(.panel):where(.border-bottom),
-:where(body) .panel.box {
+:where(body) :where(.panel):where(.box) {
   border-bottom-width: 2px;
   padding-bottom: 6px;
 }
-:where(body) .panel.parenthesis {
+:where(body) :where(.panel):where(.parenthesis) {
   font-size: smaller;
 }
-:where(body) .chapter-0,
+:where(body) :where(.chapter-0) {
-:where(body) .chapter-1,
+  flex-wrap: nowrap;
-:where(body) .chapter-2,
+}
-:where(body) .chapter-3,
+:where(body) :where(.chapter-0) > :where(*) {
-:where(body) .chapter-4,
+  flex-shrink: 1;
-:where(body) .chapter-5,
+}
-:where(body) .chapter-6,
+:where(body) :where(.chapter-1) > :where(*) {
-:where(body) .chapter-7,
+  flex-basis: calc(100% / 2);
-:where(body) .chapter-8,
+}
-:where(body) .chapter-9 {
+:where(body) :where(.chapter-2) > :where(*) {
+  flex-basis: calc(100% / 3);
+}
+:where(body) :where(.chapter-3) > :where(*) {
+  flex-basis: calc(100% / 4);
+}
+:where(body) :where(.chapter-4) > :where(*) {
+  flex-basis: calc(100% / 5);
+}
+:where(body) :where(.chapter-5) > :where(*) {
+  flex-basis: calc(100% / 6);
+}
+:where(body) :where(.chapter-6) > :where(*) {
+  flex-basis: calc(100% / 7);
+}
+:where(body) :where(.chapter-7) > :where(*) {
+  flex-basis: calc(100% / 8);
+}
+:where(body) :where(.chapter-8) > :where(*) {
+  flex-basis: calc(100% / 9);
+}
+:where(body) :where(.chapter-9) > :where(*) {
+  flex-basis: calc(100% / 10);
+}
+:where(body) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
@@ -143,145 +162,44 @@
   align-items: stretch;
   margin: 8px 0;
 }
-:where(body) .chapter-0 > *,
+:where(body) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > :where(*) {
-:where(body) .chapter-1 > *,
-:where(body) .chapter-2 > *,
-:where(body) .chapter-3 > *,
-:where(body) .chapter-4 > *,
-:where(body) .chapter-5 > *,
-:where(body) .chapter-6 > *,
-:where(body) .chapter-7 > *,
-:where(body) .chapter-8 > *,
-:where(body) .chapter-9 > * {
   flex-grow: 1;
   flex-shrink: 0;
 }
-:where(body) .chapter-0 > h1,
+:where(body) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > :where(h1, h2, h3, h4, h5, h6) {
-:where(body) .chapter-1 > h1,
-:where(body) .chapter-2 > h1,
-:where(body) .chapter-3 > h1,
-:where(body) .chapter-4 > h1,
-:where(body) .chapter-5 > h1,
-:where(body) .chapter-6 > h1,
-:where(body) .chapter-7 > h1,
-:where(body) .chapter-8 > h1,
-:where(body) .chapter-9 > h1,
-:where(body) .chapter-0 > h2,
-:where(body) .chapter-1 > h2,
-:where(body) .chapter-2 > h2,
-:where(body) .chapter-3 > h2,
-:where(body) .chapter-4 > h2,
-:where(body) .chapter-5 > h2,
-:where(body) .chapter-6 > h2,
-:where(body) .chapter-7 > h2,
-:where(body) .chapter-8 > h2,
-:where(body) .chapter-9 > h2,
-:where(body) .chapter-0 > h3,
-:where(body) .chapter-1 > h3,
-:where(body) .chapter-2 > h3,
-:where(body) .chapter-3 > h3,
-:where(body) .chapter-4 > h3,
-:where(body) .chapter-5 > h3,
-:where(body) .chapter-6 > h3,
-:where(body) .chapter-7 > h3,
-:where(body) .chapter-8 > h3,
-:where(body) .chapter-9 > h3,
-:where(body) .chapter-0 > h4,
-:where(body) .chapter-1 > h4,
-:where(body) .chapter-2 > h4,
-:where(body) .chapter-3 > h4,
-:where(body) .chapter-4 > h4,
-:where(body) .chapter-5 > h4,
-:where(body) .chapter-6 > h4,
-:where(body) .chapter-7 > h4,
-:where(body) .chapter-8 > h4,
-:where(body) .chapter-9 > h4,
-:where(body) .chapter-0 > h5,
-:where(body) .chapter-1 > h5,
-:where(body) .chapter-2 > h5,
-:where(body) .chapter-3 > h5,
-:where(body) .chapter-4 > h5,
-:where(body) .chapter-5 > h5,
-:where(body) .chapter-6 > h5,
-:where(body) .chapter-7 > h5,
-:where(body) .chapter-8 > h5,
-:where(body) .chapter-9 > h5,
-:where(body) .chapter-0 > h6,
-:where(body) .chapter-1 > h6,
-:where(body) .chapter-2 > h6,
-:where(body) .chapter-3 > h6,
-:where(body) .chapter-4 > h6,
-:where(body) .chapter-5 > h6,
-:where(body) .chapter-6 > h6,
-:where(body) .chapter-7 > h6,
-:where(body) .chapter-8 > h6,
-:where(body) .chapter-9 > h6 {
   flex-basis: 100%;
   margin-top: 1.2em;
 }
-:where(body) .chapter-0 {
+:where(body) :where(hr) {
-  flex-wrap: nowrap;
-}
-:where(body) .chapter-0 > * {
-  flex-shrink: 1;
-}
-:where(body) .chapter-1 > * {
-  flex-basis: calc(100% / 2);
-}
-:where(body) .chapter-2 > * {
-  flex-basis: calc(100% / 3);
-}
-:where(body) .chapter-3 > * {
-  flex-basis: calc(100% / 4);
-}
-:where(body) .chapter-4 > * {
-  flex-basis: calc(100% / 5);
-}
-:where(body) .chapter-5 > * {
-  flex-basis: calc(100% / 6);
-}
-:where(body) .chapter-6 > * {
-  flex-basis: calc(100% / 7);
-}
-:where(body) .chapter-7 > * {
-  flex-basis: calc(100% / 8);
-}
-:where(body) .chapter-8 > * {
-  flex-basis: calc(100% / 9);
-}
-:where(body) .chapter-9 > * {
-  flex-basis: calc(100% / 10);
-}
-:where(body) hr {
   border-width: 1px;
   border-style: dashed;
 }
-:where(body) .separator-light {
+:where(body) :where(.separator-light) {
   border-style: dotted;
 }
-:where(body) .separator-heavy {
+:where(body) :where(.separator-heavy) {
   border-style: solid;
 }
-:where(body) img {
+:where(body) :where(img) {
   display: block;
   max-width: 100%;
   object-fit: contain;
 }
-:where(body) .image-limit-half {
+:where(body) :where(.image-limit-half) {
   max-height: max(28.2vw, 50vh);
 }
-:where(body) .image-limit-quarter {
+:where(body) :where(.image-limit-quarter) {
   max-height: max(14.1vw, 25vh);
 }
-:where(body) table {
+:where(body) :where(table) {
   border-collapse: collapse;
 }
-:where(body) table th,
+:where(body) :where(table) :where(th),
-:where(body) table td {
+:where(body) :where(table) :where(td) {
   padding: 3px 7px;
   border-width: 1px;
 }
-:where(body) table caption {
+:where(body) :where(table) :where(caption) {
   border-width: 1px;
   font-style: var(--bfont-caption-style);
   font-variant: var(--bfont-caption-variant);
@@ -290,77 +208,77 @@
   line-height: var(--bfont-caption-height);
   font-family: var(--bfont-caption-family);
 }
-:where(body) table caption.table-caption-top {
+:where(body) :where(table) :where(caption):where(.table-caption-top) {
   caption-side: top;
   border-bottom-width: 0;
 }
-:where(body) table caption.table-caption-bottom {
+:where(body) :where(table) :where(caption):where(.table-caption-bottom) {
   caption-side: bottom;
   border-top-width: 0;
 }
-:where(body) table.panel {
+:where(body) :where(table):where(.panel) {
   display: table;
 }
-:where(body) table.panel th,
+:where(body) :where(table):where(.panel) :where(th),
-:where(body) table.panel td {
+:where(body) :where(table):where(.panel) :where(td) {
   padding: 8px;
 }
-:where(body) table.panel caption {
+:where(body) :where(table):where(.panel) :where(caption) {
   text-align: inherit;
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
   padding: 8px;
 }
-:where(body) table.panel caption * {
+:where(body) :where(table):where(.panel) :where(caption) :where(*) {
   margin-top: 8px;
   margin-bottom: 8px;
 }
-:where(body) table.panel caption *:first-child {
+:where(body) :where(table):where(.panel) :where(caption) :where(*):first-child {
   margin-top: 0;
 }
-:where(body) table.panel caption *:last-child {
+:where(body) :where(table):where(.panel) :where(caption) :where(*):last-child {
   margin-bottom: 0;
 }
-:where(body) table.box tr {
+:where(body) :where(table):where(.box) :where(tr) {
   border-width: 1px;
 }
-:where(body) table.box th,
+:where(body) :where(table):where(.box) :where(th),
-:where(body) table.box td {
+:where(body) :where(table):where(.box) :where(td) {
   border-width: 1px;
   padding: 7px;
 }
-:where(body) table.box caption {
+:where(body) :where(table):where(.box) :where(caption) {
   border-width: 2px;
   padding: 6px;
 }
-:where(body) table.box caption.table-caption-top {
+:where(body) :where(table):where(.box) :where(caption):where(.table-caption-top) {
   border-bottom-width: 0;
 }
-:where(body) table.box caption.table-caption-bottom {
+:where(body) :where(table):where(.box) :where(caption):where(.table-caption-bottom) {
   border-top-width: 0;
 }
-:where(body) table.dialog thead > tr {
+:where(body) :where(table):where(.dialog) :where(thead) > :where(tr) {
   border-bottom-width: 1px;
 }
-:where(body) table.dialog tbody > tr {
+:where(body) :where(table):where(.dialog) :where(tbody) > :where(tr) {
   border-width: 0;
 }
-:where(body) table.dialog tfoot > tr {
+:where(body) :where(table):where(.dialog) :where(tfoot) > :where(tr) {
   border-top-width: 1px;
 }
-:where(body) table.dialog th,
+:where(body) :where(table):where(.dialog) :where(th),
-:where(body) table.dialog td {
+:where(body) :where(table):where(.dialog) :where(td) {
   border-width: 0 0 0 1px;
   padding: 8px 8px 8px 7px;
 }
-:where(body) table.dialog caption {
+:where(body) :where(table):where(.dialog) :where(caption) {
   border-width: 0 0 0 2px;
   padding: 8px 8px 8px 6px;
 }
-:where(body) .panel > ul,
+:where(body) :where(.panel) > :where(ul),
-:where(body) .panel > ol {
+:where(body) :where(.panel) > :where(ol) {
   margin-left: 6ex;
 }
-:where(body) dt {
+:where(body) :where(dt) {
   margin-top: 0.5em;
   padding: 0.2em 0;
   --bhsl-current-hue: var(--bhsl-primary-hue);
@@ -373,14 +291,14 @@
   line-height: var(--bfont-term-height);
   font-family: var(--bfont-term-family);
 }
-:where(body) dd {
+:where(body) :where(dd) {
   margin-left: 4.5ex;
   margin-bottom: 0.5em;
 }
-:where(body) details {
+:where(body) :where(details) {
   margin-left: 4.5ex;
 }
-:where(body) summary {
+:where(body) :where(summary) {
   cursor: pointer;
   margin-left: -4ex;
   padding: 0.2em 0;
@@ -392,11 +310,10 @@
   font-family: var(--bfont-summary-family);
   user-select: none;
 }
-:where(body) .fade {
+:where(body) :where(.fade) {
   opacity: 0.3;
 }
-:where(body) .mark,
+:where(body) :where(mark, .mark) {
-:where(body) mark {
   font-style: var(--bfont-mark-style);
   font-variant: var(--bfont-mark-variant);
   font-weight: var(--bfont-mark-weight);
@@ -408,76 +325,63 @@
   --bhsl-current-saturation: var(--bhsl-mark-foreground-saturation);
   --bhsl-current-lightness: var(--bhsl-mark-foreground-lightness);
 }
-:where(body) .mark .mark,
+:where(body) :where(mark, .mark) :where(mark, .mark) {
-:where(body) mark .mark,
-:where(body) .mark mark,
-:where(body) mark mark {
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
   --bhsl-current-hue: var(--bhsl-foreground-hue);
   --bhsl-current-saturation: var(--bhsl-foreground-saturation);
   --bhsl-current-lightness: var(--bhsl-foreground-lightness);
 }
-:where(body) .mark .mark .mark,
+:where(body) :where(mark, .mark) :where(mark, .mark) :where(mark, .mark) {
-:where(body) mark .mark .mark,
-:where(body) .mark mark .mark,
-:where(body) mark mark .mark,
-:where(body) .mark .mark mark,
-:where(body) mark .mark mark,
-:where(body) .mark mark mark,
-:where(body) mark mark mark {
   background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
   --bhsl-current-hue: var(--bhsl-mark-foreground-hue);
   --bhsl-current-saturation: var(--bhsl-mark-foreground-saturation);
   --bhsl-current-lightness: var(--bhsl-mark-foreground-lightness);
 }
-:where(body) .todo {
+:where(body) :where(.todo) {
   --bhsl-current-hue: var(--bhsl-todo-foreground-hue);
   --bhsl-current-saturation: var(--bhsl-todo-foreground-saturation);
   --bhsl-current-lightness: var(--bhsl-todo-foreground-lightness);
 }
-:where(body) .todo,
+:where(body) :where(.todo),
-:where(body) .todo .panel {
+:where(body) :where(.todo) :where(.panel) {
   border-style: dashed;
   background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
 }
-:where(body) [disabled] {
+:where(body) :where([disabled]) {
   border-style: dashed;
   cursor: not-allowed;
 }
-:where(body) .red {
+:where(body) :where(.red) {
   --bhsl-current-hue: var(--bhsl-red-hue);
   --bhsl-current-saturation: var(--bhsl-red-saturation);
   --bhsl-current-lightness: var(--bhsl-red-lightness);
 }
-:where(body) .yellow {
+:where(body) :where(.yellow) {
   --bhsl-current-hue: var(--bhsl-yellow-hue);
   --bhsl-current-saturation: var(--bhsl-yellow-saturation);
   --bhsl-current-lightness: var(--bhsl-yellow-lightness);
 }
-:where(body) .green {
+:where(body) :where(.green) {
   --bhsl-current-hue: var(--bhsl-green-hue);
   --bhsl-current-saturation: var(--bhsl-green-saturation);
   --bhsl-current-lightness: var(--bhsl-green-lightness);
 }
-:where(body) .cyan {
+:where(body) :where(.cyan) {
   --bhsl-current-hue: var(--bhsl-cyan-hue);
   --bhsl-current-saturation: var(--bhsl-cyan-saturation);
   --bhsl-current-lightness: var(--bhsl-cyan-lightness);
 }
-:where(body) .blue {
+:where(body) :where(.blue) {
   --bhsl-current-hue: var(--bhsl-blue-hue);
   --bhsl-current-saturation: var(--bhsl-blue-saturation);
   --bhsl-current-lightness: var(--bhsl-blue-lightness);
 }
-:where(body) .magenta {
+:where(body) :where(.magenta) {
   --bhsl-current-hue: var(--bhsl-magenta-hue);
   --bhsl-current-saturation: var(--bhsl-magenta-saturation);
   --bhsl-current-lightness: var(--bhsl-magenta-lightness);
 }
-:where(body) input,
+:where(body) :where(input, textarea, select, button) {
-:where(body) textarea,
-:where(body) select,
-:where(body) button {
   font: inherit;
   cursor: pointer;
   background-color: transparent;
@@ -487,82 +391,50 @@
   border-width: 0;
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4);
 }
-:where(body) input::placeholder,
+:where(body) :where(input, textarea, select, button)::placeholder {
-:where(body) textarea::placeholder,
-:where(body) select::placeholder,
-:where(body) button::placeholder {
   opacity: 1;
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4);
 }
-:where(body) input:hover:not([disabled]),
+:where(body) :where(input, textarea, select, button):hover:not(:where([disabled])) {
-:where(body) textarea:hover:not([disabled]),
-:where(body) select:hover:not([disabled]),
-:where(body) button:hover:not([disabled]) {
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-:where(body) input:hover:not([disabled])::placeholder,
+:where(body) :where(input, textarea, select, button):hover:not(:where([disabled]))::placeholder {
-:where(body) textarea:hover:not([disabled])::placeholder,
-:where(body) select:hover:not([disabled])::placeholder,
-:where(body) button:hover:not([disabled])::placeholder {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-:where(body) input:active:not([disabled]),
+:where(body) :where(input, textarea, select, button):active:not(:where([disabled])),
-:where(body) textarea:active:not([disabled]),
+:where(body) :where(input, textarea, select, button):focus:not(:where([disabled])) {
-:where(body) select:active:not([disabled]),
-:where(body) button:active:not([disabled]),
-:where(body) input:focus:not([disabled]),
-:where(body) textarea:focus:not([disabled]),
-:where(body) select:focus:not([disabled]),
-:where(body) button:focus:not([disabled]) {
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-:where(body) textarea {
+:where(body) :where(textarea) {
   resize: vertical;
 }
-:where(body) input[type="text"],
+:where(body) :where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"]),
-:where(body) input[type="password"],
+:where(body) :where(select:not([multiple])) {
-:where(body) input[type="email"],
-:where(body) input[type="number"],
-:where(body) input[type="search"],
-:where(body) input[type="tel"],
-:where(body) input[type="datetime-local"],
-:where(body) input[type="date"],
-:where(body) input[type="time"],
-:where(body) select:not([multiple]) {
   border-bottom-width: 2px;
 }
-:where(body) textarea,
+:where(body) :where(textarea),
-:where(body) select[multiple] {
+:where(body) :where(select[multiple]) {
   border-left-width: 2px;
 }
-:where(body) input[type="text"],
+:where(body) :where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"]):not(:where([disabled])),
-:where(body) input[type="password"],
+:where(body) :where(textarea):not(:where([disabled])) {
-:where(body) input[type="email"],
-:where(body) input[type="number"],
-:where(body) input[type="search"],
-:where(body) input[type="tel"],
-:where(body) input[type="datetime-local"],
-:where(body) input[type="date"],
-:where(body) input[type="time"]:not([disabled]),
-:where(body) textarea:not([disabled]) {
   cursor: text;
 }
-:where(body) select:not([multiple]):not([disabled]),
+:where(body) :where(select:not([multiple])):not(:where([disabled])),
-:where(body) select[multiple]:not([disabled]) {
+:where(body) :where(select[multiple]):not(:where([disabled])) {
   cursor: vertical-text;
 }
-:where(body) input[type="range"]:not([disabled]) {
+:where(body) :where(input[type="range"]):not(:where([disabled])) {
   cursor: ew-resize;
 }
-:where(body) input[type="radio"]:not([disabled]),
+:where(body) :where(input[type="radio"]):not(:where([disabled])),
-:where(body) input[type="checkbox"]:not([disabled]),
+:where(body) :where(input[type="checkbox"]):not(:where([disabled])),
-:where(body) input[type="button"],
+:where(body) :where(input[type="button"], button):not(:where([disabled])),
-:where(body) button:not([disabled]),
+:where(body) :where(input[type="color"]):not(:where([disabled])) {
-:where(body) input[type="color"]:not([disabled]) {
   cursor: pointer;
 }
-:where(body) select:not([multiple]) optgroup,
+:where(body) :where(select:not([multiple])) optgroup,
-:where(body) select[multiple] optgroup {
+:where(body) :where(select[multiple]) optgroup {
   padding-bottom: 0.25em;
   font-style: var(--bfont-header-style);
   font-variant: var(--bfont-header-variant);
@@ -571,12 +443,12 @@
   line-height: var(--bfont-header-height);
   font-family: var(--bfont-header-family);
 }
-:where(body) select:not([multiple]) optgroup option,
+:where(body) :where(select:not([multiple])) optgroup option,
-:where(body) select[multiple] optgroup option {
+:where(body) :where(select[multiple]) optgroup option {
   padding: 0.125em 0 0.125em 2ex;
 }
-:where(body) select:not([multiple]) option,
+:where(body) :where(select:not([multiple])) option,
-:where(body) select[multiple] option {
+:where(body) :where(select[multiple]) option {
   font-style: var(--bfont-text-style);
   font-variant: var(--bfont-text-variant);
   font-weight: var(--bfont-text-weight);
@@ -584,8 +456,8 @@
   line-height: var(--bfont-text-height);
   font-family: var(--bfont-text-family);
 }
-:where(body) input[type="radio"],
+:where(body) :where(input[type="radio"]),
-:where(body) input[type="checkbox"] {
+:where(body) :where(input[type="checkbox"]) {
   appearance: none;
   width: 1em;
   height: 1em;
@@ -595,99 +467,65 @@
   justify-content: center;
   align-items: center;
 }
-:where(body) input[type="radio"]::before,
+:where(body) :where(input[type="radio"])::before,
-:where(body) input[type="checkbox"]::before {
+:where(body) :where(input[type="checkbox"])::before {
   display: block;
   content: "";
   width: 100%;
   height: 100%;
 }
-:where(body) input[type="radio"]:checked::before,
+:where(body) :where(input[type="radio"]):checked::before,
-:where(body) input[type="checkbox"]:checked::before {
+:where(body) :where(input[type="checkbox"]):checked::before {
   background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-:where(body) input[type="radio"] {
+:where(body) :where(input[type="radio"]) {
   border-radius: 100%;
 }
-:where(body) input[type="radio"]::before {
+:where(body) :where(input[type="radio"])::before {
   border-radius: 100%;
 }
-:where(body) input[type="range"] {
+:where(body) :where(input[type="range"]) {
   padding: 0;
-  /*
-        appearance: none;
-
-        &::-moz-range-thumb {
-            width: 0;
-            border-radius: 0;
-            border-style: outset;
-
-            border-color: .hsl-group(current)[@c];
-            border-width: 4px;
-
-            background-color: .hsl-group(primary)[@c];
-        }
-
-        &::-moz-range-track {
-            height: 0.125em;
-            background-color: .hsl-group(current)[@c];
-        }
-
-        &::-moz-range-progress {
-            height: 0.5em;
-            background-color: .hsl-group(current)[@c];
-        }
-         */
 }
-:where(body) input[type="button"],
+:where(body) :where(input[type="button"], button) {
-:where(body) button {
   border-width: 2px;
   border-style: outset;
 }
-:where(body) input[type="button"]:active,
+:where(body) :where(input[type="button"], button):active {
-:where(body) button:active {
   border-style: inset;
 }
-:where(body) input[type="file"],
+:where(body) :where(input[type="file"]),
-:where(body) input[type="color"] {
+:where(body) :where(input[type="color"]) {
   padding: 0;
 }
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
-  :where(body) input[type="text"]::-webkit-calendar-picker-indicator,
+  :where(body) :where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"])::-webkit-calendar-picker-indicator {
-  :where(body) input[type="password"]::-webkit-calendar-picker-indicator,
-  :where(body) input[type="email"]::-webkit-calendar-picker-indicator,
-  :where(body) input[type="number"]::-webkit-calendar-picker-indicator,
-  :where(body) input[type="search"]::-webkit-calendar-picker-indicator,
-  :where(body) input[type="tel"]::-webkit-calendar-picker-indicator,
-  :where(body) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
-  :where(body) input[type="date"]::-webkit-calendar-picker-indicator,
-  :where(body) input[type="time"]::-webkit-calendar-picker-indicator {
     filter: invert(calc(calc(var(--bhsl-current-lightness) - 50%) * 1000));
   }
-  :where(body) select:not([multiple]) optgroup,
+  :where(body) :where(select:not([multiple])) optgroup,
-  :where(body) select:not([multiple]) option {
+  :where(body) :where(select:not([multiple])) option {
     background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
   }
-  :where(body) select:not([multiple]) optgroup::before,
+  :where(body) :where(select:not([multiple])) optgroup::before,
-  :where(body) select:not([multiple]) option::before {
+  :where(body) :where(select:not([multiple])) option::before {
     content: "";
   }
 }
-:where(body) .form-flex {
+:where(body) :where(.form-flex) {
   display: flex;
   flex-direction: column;
   justify-content: stretch;
 }
-:where(body) .form-flex > :is(.form-flex-content, p) {
+:where(body) :where(.form-flex) > :where(.form-flex-content, p) {
   margin: 0.5em 0;
 }
-:where(body) .form-flex > :is(.form-flex-choice, label) {
+:where(body) :where(.form-flex) > :where(.form-flex-choice, label) {
   display: flex;
   gap: 1ex;
   min-height: 1.675em;
 }
-:where(body) .form-flex > :is(.form-flex-choice, label) > *:first-child,
+:where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*):first-child,
-:where(body) .form-flex > :is(.form-flex-choice, label) > *:last-child {
+:where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*):last-child {
   margin: auto 0;
   flex-basis: 15%;
   flex-grow: 0;
@@ -702,7 +540,7 @@
   --bhsl-current-saturation: var(--bhsl-primary-saturation);
   --bhsl-current-lightness: var(--bhsl-primary-lightness);
 }
-:where(body) .form-flex > :is(.form-flex-choice, label) > * {
+:where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*) {
   flex-grow: 1;
   display: flex;
   justify-content: space-between;
@@ -710,20 +548,20 @@
   align-items: stretch;
   gap: 1ex;
 }
-:where(body) .form-flex > :is(.form-flex-choice, label) > *:first-child {
+:where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*):first-child {
   text-align: right;
   display: block;
 }
-:where(body) .form-flex > :is(.form-flex-choice, label) > *:last-child {
+:where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*):last-child {
   text-align: left;
   display: block;
 }
-:where(body) a {
+:where(body) :where(a) {
   --bhsl-current-hue: var(--bhsl-link-hue);
   --bhsl-current-saturation: var(--bhsl-link-saturation);
   --bhsl-current-lightness: var(--bhsl-link-lightness);
 }
-:where(body) i {
+:where(body) :where(i) {
   font-style: var(--bfont-idiomatic-style);
   font-variant: var(--bfont-idiomatic-variant);
   font-weight: var(--bfont-idiomatic-weight);
@@ -731,7 +569,7 @@
   line-height: var(--bfont-idiomatic-height);
   font-family: var(--bfont-idiomatic-family);
 }
-:where(body) em {
+:where(body) :where(em) {
   font-style: var(--bfont-emphasis-style);
   font-variant: var(--bfont-emphasis-variant);
   font-weight: var(--bfont-emphasis-weight);
@@ -739,7 +577,7 @@
   line-height: var(--bfont-emphasis-height);
   font-family: var(--bfont-emphasis-family);
 }
-:where(body) b {
+:where(body) :where(b) {
   font-style: var(--bfont-attention-style);
   font-variant: var(--bfont-attention-variant);
   font-weight: var(--bfont-attention-weight);
@@ -747,7 +585,7 @@
   line-height: var(--bfont-attention-height);
   font-family: var(--bfont-attention-family);
 }
-:where(body) strong {
+:where(body) :where(strong) {
   font-style: var(--bfont-strong-style);
   font-variant: var(--bfont-strong-variant);
   font-weight: var(--bfont-strong-weight);
@@ -755,20 +593,20 @@
   line-height: var(--bfont-strong-height);
   font-family: var(--bfont-strong-family);
 }
-:where(body) ins {
+:where(body) :where(ins) {
   --bhsl-current-hue: var(--bhsl-inserted-hue);
   --bhsl-current-saturation: var(--bhsl-inserted-saturation);
   --bhsl-current-lightness: var(--bhsl-inserted-lightness);
 }
-:where(body) del {
+:where(body) :where(del) {
   --bhsl-current-hue: var(--bhsl-deleted-hue);
   --bhsl-current-saturation: var(--bhsl-deleted-saturation);
   --bhsl-current-lightness: var(--bhsl-deleted-lightness);
 }
-:where(body) code,
+:where(body) :where(code),
-:where(body) pre,
+:where(body) :where(pre),
-:where(body) kbd,
+:where(body) :where(kbd),
-:where(body) samp {
+:where(body) :where(samp) {
   font-style: var(--bfont-code-style);
   font-variant: var(--bfont-code-variant);
   font-weight: var(--bfont-code-weight);
@@ -776,20 +614,20 @@
   line-height: var(--bfont-code-height);
   font-family: var(--bfont-code-family);
 }
-:where(body) pre {
+:where(body) :where(pre) {
   overflow-x: scroll;
 }
-:where(body) kbd,
+:where(body) :where(kbd),
-:where(body) samp {
+:where(body) :where(samp) {
   padding: 0 0.25ex;
 }
-:where(body) kbd {
+:where(body) :where(kbd) {
   background-color: hsl(var(--bhsl-sample-output-hue) var(--bhsl-sample-output-saturation) var(--bhsl-sample-output-lightness));
   --bhsl-current-hue: var(--bhsl-sample-input-hue);
   --bhsl-current-saturation: var(--bhsl-sample-input-saturation);
   --bhsl-current-lightness: var(--bhsl-sample-input-lightness);
 }
-:where(body) kbd kbd {
+:where(body) :where(kbd) :where(kbd) {
   font-style: var(--bfont-boldcode-style);
   font-variant: var(--bfont-boldcode-variant);
   font-weight: var(--bfont-boldcode-weight);
@@ -797,13 +635,13 @@
   line-height: var(--bfont-boldcode-height);
   font-family: var(--bfont-boldcode-family);
 }
-:where(body) samp {
+:where(body) :where(samp) {
   background-color: hsl(var(--bhsl-sample-input-hue) var(--bhsl-sample-input-saturation) var(--bhsl-sample-input-lightness));
   --bhsl-current-hue: var(--bhsl-sample-output-hue);
   --bhsl-current-saturation: var(--bhsl-sample-output-saturation);
   --bhsl-current-lightness: var(--bhsl-sample-output-lightness);
 }
-:where(body) samp samp {
+:where(body) :where(samp) :where(samp) {
   font-style: var(--bfont-boldcode-style);
   font-variant: var(--bfont-boldcode-variant);
   font-weight: var(--bfont-boldcode-weight);
@@ -811,7 +649,7 @@
   line-height: var(--bfont-boldcode-height);
   font-family: var(--bfont-boldcode-family);
 }
-:where(body) var {
+:where(body) :where(var) {
   font-style: var(--bfont-variable-style);
   font-variant: var(--bfont-variable-variant);
   font-weight: var(--bfont-variable-weight);
@@ -819,7 +657,7 @@
   line-height: var(--bfont-variable-height);
   font-family: var(--bfont-variable-family);
 }
-:where(body) cite {
+:where(body) :where(cite) {
   font-style: var(--bfont-citation-style);
   font-variant: var(--bfont-citation-variant);
   font-weight: var(--bfont-citation-weight);
@@ -827,7 +665,7 @@
   line-height: var(--bfont-citation-height);
   font-family: var(--bfont-citation-family);
 }
-:where(body) dfn {
+:where(body) :where(dfn) {
   font-style: var(--bfont-term-style);
   font-variant: var(--bfont-term-variant);
   font-weight: var(--bfont-term-weight);
@@ -838,6 +676,6 @@
   --bhsl-current-saturation: var(--bhsl-primary-saturation);
   --bhsl-current-lightness: var(--bhsl-primary-lightness);
 }
-:where(body) abbr {
+:where(body) :where(abbr) {
   cursor: help;
 }

dist/classic.module.css

@@ -7,157 +7,122 @@
   --b-outer-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
 }
 :where(.bluelib),
-:where(.bluelib) * {
+:where(.bluelib) :where(*) {
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.15);
 }
-:where(.bluelib) .header-1,
+:where(.bluelib) :where(h1, h2, h3, h4, h5, h6) {
-:where(.bluelib) .header-2,
-:where(.bluelib) .header-3,
-:where(.bluelib) .header-4,
-:where(.bluelib) .header-5,
-:where(.bluelib) .header-6 {
   text-shadow: var(--b-outer-shadow);
 }
-:where(.bluelib) .panel .header-1,
+:where(.bluelib) :where(.panel) :where(h1, h2, h3, h4, h5, h6) {
-:where(.bluelib) .panel .header-2,
-:where(.bluelib) .panel .header-3,
-:where(.bluelib) .panel .header-4,
-:where(.bluelib) .panel .header-5,
-:where(.bluelib) .panel .header-6 {
   text-shadow: none;
 }
-:where(.bluelib) .panel,
+:where(.bluelib) :where(.panel),
-:where(.bluelib) .table.panel > .table-caption {
+:where(.bluelib) :where(.table):where(.panel) > :where(.table-caption) {
   border-radius: var(--b-border-radius);
   box-shadow: var(--b-outer-shadow);
 }
-:where(.bluelib) .panel .panel,
+:where(.bluelib) :where(.panel) :where(.panel),
-:where(.bluelib) .table.panel > .table-caption .panel {
+:where(.bluelib) :where(.table):where(.panel) > :where(.table-caption) :where(.panel) {
   background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
   backdrop-filter: none;
   box-shadow: none;
 }
-:where(.bluelib) .modifier-mark,
+:where(.bluelib) :where(.modifier-mark),
-:where(.bluelib) .element-mark,
+:where(.bluelib) :where(.panel):where(.modifier-mark) {
-:where(.bluelib) .panel.modifier-mark {
   background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
 }
-:where(.bluelib) .modifier-mark .modifier-mark,
+:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark),
-:where(.bluelib) .element-mark .modifier-mark,
+:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
-:where(.bluelib) .panel.modifier-mark .modifier-mark,
+:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark),
-:where(.bluelib) .modifier-mark .element-mark,
+:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) {
-:where(.bluelib) .element-mark .element-mark,
-:where(.bluelib) .panel.modifier-mark .element-mark,
-:where(.bluelib) .modifier-mark .panel.modifier-mark,
-:where(.bluelib) .element-mark .panel.modifier-mark,
-:where(.bluelib) .panel.modifier-mark .panel.modifier-mark {
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
 }
-:where(.bluelib) .modifier-mark .modifier-mark .modifier-mark,
+:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),
-:where(.bluelib) .element-mark .modifier-mark .modifier-mark,
+:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),
-:where(.bluelib) .panel.modifier-mark .modifier-mark .modifier-mark,
+:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
-:where(.bluelib) .modifier-mark .element-mark .modifier-mark,
+:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
-:where(.bluelib) .element-mark .element-mark .modifier-mark,
+:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),
-:where(.bluelib) .panel.modifier-mark .element-mark .modifier-mark,
+:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),
-:where(.bluelib) .modifier-mark .panel.modifier-mark .modifier-mark,
+:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark),
-:where(.bluelib) .element-mark .panel.modifier-mark .modifier-mark,
+:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) {
-:where(.bluelib) .panel.modifier-mark .panel.modifier-mark .modifier-mark,
-:where(.bluelib) .modifier-mark .modifier-mark .element-mark,
-:where(.bluelib) .element-mark .modifier-mark .element-mark,
-:where(.bluelib) .panel.modifier-mark .modifier-mark .element-mark,
-:where(.bluelib) .modifier-mark .element-mark .element-mark,
-:where(.bluelib) .element-mark .element-mark .element-mark,
-:where(.bluelib) .panel.modifier-mark .element-mark .element-mark,
-:where(.bluelib) .modifier-mark .panel.modifier-mark .element-mark,
-:where(.bluelib) .element-mark .panel.modifier-mark .element-mark,
-:where(.bluelib) .panel.modifier-mark .panel.modifier-mark .element-mark,
-:where(.bluelib) .modifier-mark .modifier-mark .panel.modifier-mark,
-:where(.bluelib) .element-mark .modifier-mark .panel.modifier-mark,
-:where(.bluelib) .panel.modifier-mark .modifier-mark .panel.modifier-mark,
-:where(.bluelib) .modifier-mark .element-mark .panel.modifier-mark,
-:where(.bluelib) .element-mark .element-mark .panel.modifier-mark,
-:where(.bluelib) .panel.modifier-mark .element-mark .panel.modifier-mark,
-:where(.bluelib) .modifier-mark .panel.modifier-mark .panel.modifier-mark,
-:where(.bluelib) .element-mark .panel.modifier-mark .panel.modifier-mark,
-:where(.bluelib) .panel.modifier-mark .panel.modifier-mark .panel.modifier-mark {
   background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
 }
-:where(.bluelib) .modifier-todo,
+:where(.bluelib) :where(.modifier-todo),
-:where(.bluelib) .panel.modifier-todo {
+:where(.bluelib) :where(.panel):where(.modifier-todo) {
   background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-:where(.bluelib) .modifier-todo .panel,
+:where(.bluelib) :where(.modifier-todo) :where(.panel),
-:where(.bluelib) .panel.modifier-todo .panel {
+:where(.bluelib) :where(.panel):where(.modifier-todo) :where(.panel) {
   background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-:where(.bluelib) .table.panel {
+:where(.bluelib) :where(.table):where(.panel) {
   border-radius: 0;
 }
-:where(.bluelib) .table.panel > .table-caption {
+:where(.bluelib) :where(.table):where(.panel) > :where(.table-caption) {
   border-radius: 0;
   box-shadow: var(--b-outer-shadow);
 }
-:where(.bluelib) .table.panel-dialog > .table-caption {
+:where(.bluelib) :where(.table):where(.panel-dialog) > :where(.table-caption) {
   border-bottom-width: 2px;
 }
-:where(.bluelib) .input {
+:where(.bluelib) :where(.input) {
   background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.025);
 }
-:where(.bluelib) .input:hover {
+:where(.bluelib) :where(.input):hover {
   background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.05);
 }
-:where(.bluelib) .input:active {
+:where(.bluelib) :where(.input):active {
   background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
 }
-:where(.bluelib) .input-field,
+:where(.bluelib) :where(.input-field),
-:where(.bluelib) .input-select {
+:where(.bluelib) :where(.input-select) {
   border-radius: var(--b-border-radius) var(--b-border-radius) 0 0;
 }
-:where(.bluelib) .input-area,
+:where(.bluelib) :where(.input-area),
-:where(.bluelib) .input-multiselect {
+:where(.bluelib) :where(.input-multiselect) {
   border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0;
 }
-:where(.bluelib) .input-button {
+:where(.bluelib) :where(.input-button) {
   border-radius: var(--b-border-radius);
 }
-:where(.bluelib) .list-unordered > *::marker,
+:where(.bluelib) :where(.list-unordered) > *::marker,
-:where(.bluelib) .list-ordered > *::marker {
+:where(.bluelib) :where(.list-ordered) > *::marker {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5);
 }
-:where(.bluelib) .glossary-summary {
+:where(.bluelib) :where(.glossary-summary) {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-:where(.bluelib) .glossary-summary::marker {
+:where(.bluelib) :where(.glossary-summary)::marker {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5);
 }
-:where(.bluelib) .glossary-summary:hover {
+:where(.bluelib) :where(.glossary-summary):hover {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-:where(.bluelib) .glossary-summary:hover::marker {
+:where(.bluelib) :where(.glossary-summary):hover::marker {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-:where(.bluelib) .glossary-summary:active::marker {
+:where(.bluelib) :where(.glossary-summary):active::marker {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-:where(.bluelib) .text-anchor:hover {
+:where(.bluelib) :where(.text-anchor):hover {
   color: hsl(calc(var(--bhsl-link-hue) + 0deg) calc(var(--bhsl-link-saturation) + 0%) calc(var(--bhsl-link-lightness) + 20%) / 1);
 }
-:where(.bluelib) .text-anchor:active {
+:where(.bluelib) :where(.text-anchor):active {
   color: hsl(calc(var(--bhsl-link-hue) + 0deg) calc(var(--bhsl-link-saturation) + 0%) calc(var(--bhsl-link-lightness) + 40%) / 1);
 }
-:where(.bluelib) .text-input,
+:where(.bluelib) :where(.text-input),
-:where(.bluelib) .text-output {
+:where(.bluelib) :where(.text-output) {
   border-radius: calc(var(--b-border-radius) / 4);
 }
-:where(.bluelib) .text-variable {
+:where(.bluelib) :where(.text-variable) {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-:where(.bluelib) .text-quote::before,
+:where(.bluelib) :where(.text-quote)::before,
-:where(.bluelib) .text-quote::after {
+:where(.bluelib) :where(.text-quote)::after {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-:where(.bluelib) .text-ruby-annotation {
+:where(.bluelib) :where(.text-ruby-annotation) {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }

dist/classic.root.css

@@ -7,175 +7,122 @@
   --b-outer-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
 }
 :where(body),
-:where(body) * {
+:where(body) :where(*) {
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.15);
 }
-:where(body) h1,
+:where(body) :where(h1, h2, h3, h4, h5, h6) {
-:where(body) h2,
-:where(body) h3,
-:where(body) h4,
-:where(body) h5,
-:where(body) h6 {
   text-shadow: var(--b-outer-shadow);
 }
-:where(body) .panel h1,
+:where(body) :where(.panel) :where(h1, h2, h3, h4, h5, h6) {
-:where(body) .panel h2,
-:where(body) .panel h3,
-:where(body) .panel h4,
-:where(body) .panel h5,
-:where(body) .panel h6 {
   text-shadow: none;
 }
-:where(body) .panel,
+:where(body) :where(.panel),
-:where(body) table.panel > caption {
+:where(body) :where(table):where(.panel) > :where(caption) {
   border-radius: var(--b-border-radius);
   box-shadow: var(--b-outer-shadow);
 }
-:where(body) .panel .panel,
+:where(body) :where(.panel) :where(.panel),
-:where(body) table.panel > caption .panel {
+:where(body) :where(table):where(.panel) > :where(caption) :where(.panel) {
   background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
   backdrop-filter: none;
   box-shadow: none;
 }
-:where(body) .mark,
+:where(body) :where(mark, .mark),
-:where(body) mark,
+:where(body) :where(.panel):where(mark, .mark) {
-:where(body) .panel.mark {
   background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
 }
-:where(body) .mark .mark,
+:where(body) :where(mark, .mark) :where(mark, .mark),
-:where(body) mark .mark,
+:where(body) :where(.panel):where(mark, .mark) :where(mark, .mark),
-:where(body) .panel.mark .mark,
+:where(body) :where(mark, .mark) :where(.panel):where(mark, .mark),
-:where(body) .mark mark,
+:where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) {
-:where(body) mark mark,
-:where(body) .panel.mark mark,
-:where(body) .mark .panel.mark,
-:where(body) mark .panel.mark,
-:where(body) .panel.mark .panel.mark {
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
 }
-:where(body) .mark .mark .mark,
+:where(body) :where(mark, .mark) :where(mark, .mark) :where(mark, .mark),
-:where(body) mark .mark .mark,
+:where(body) :where(.panel):where(mark, .mark) :where(mark, .mark) :where(mark, .mark),
-:where(body) .panel.mark .mark .mark,
+:where(body) :where(mark, .mark) :where(.panel):where(mark, .mark) :where(mark, .mark),
-:where(body) .mark mark .mark,
+:where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) :where(mark, .mark),
-:where(body) mark mark .mark,
+:where(body) :where(mark, .mark) :where(mark, .mark) :where(.panel):where(mark, .mark),
-:where(body) .panel.mark mark .mark,
+:where(body) :where(.panel):where(mark, .mark) :where(mark, .mark) :where(.panel):where(mark, .mark),
-:where(body) .mark .panel.mark .mark,
+:where(body) :where(mark, .mark) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark),
-:where(body) mark .panel.mark .mark,
+:where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) {
-:where(body) .panel.mark .panel.mark .mark,
-:where(body) .mark .mark mark,
-:where(body) mark .mark mark,
-:where(body) .panel.mark .mark mark,
-:where(body) .mark mark mark,
-:where(body) mark mark mark,
-:where(body) .panel.mark mark mark,
-:where(body) .mark .panel.mark mark,
-:where(body) mark .panel.mark mark,
-:where(body) .panel.mark .panel.mark mark,
-:where(body) .mark .mark .panel.mark,
-:where(body) mark .mark .panel.mark,
-:where(body) .panel.mark .mark .panel.mark,
-:where(body) .mark mark .panel.mark,
-:where(body) mark mark .panel.mark,
-:where(body) .panel.mark mark .panel.mark,
-:where(body) .mark .panel.mark .panel.mark,
-:where(body) mark .panel.mark .panel.mark,
-:where(body) .panel.mark .panel.mark .panel.mark {
   background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
 }
-:where(body) .todo,
+:where(body) :where(.todo),
-:where(body) .panel.todo {
+:where(body) :where(.panel):where(.todo) {
   background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-:where(body) .todo .panel,
+:where(body) :where(.todo) :where(.panel),
-:where(body) .panel.todo .panel {
+:where(body) :where(.panel):where(.todo) :where(.panel) {
   background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-:where(body) table.panel {
+:where(body) :where(table):where(.panel) {
   border-radius: 0;
 }
-:where(body) table.panel > caption {
+:where(body) :where(table):where(.panel) > :where(caption) {
   border-radius: 0;
   box-shadow: var(--b-outer-shadow);
 }
-:where(body) table.dialog > caption {
+:where(body) :where(table):where(.dialog) > :where(caption) {
   border-bottom-width: 2px;
 }
-:where(body) input,
+:where(body) :where(input, textarea, select, button) {
-:where(body) textarea,
-:where(body) select,
-:where(body) button {
   background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.025);
 }
-:where(body) input:hover,
+:where(body) :where(input, textarea, select, button):hover {
-:where(body) textarea:hover,
-:where(body) select:hover,
-:where(body) button:hover {
   background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.05);
 }
-:where(body) input:active,
+:where(body) :where(input, textarea, select, button):active {
-:where(body) textarea:active,
-:where(body) select:active,
-:where(body) button:active {
   background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
 }
-:where(body) input[type="text"],
+:where(body) :where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"]),
-:where(body) input[type="password"],
+:where(body) :where(select:not([multiple])) {
-:where(body) input[type="email"],
-:where(body) input[type="number"],
-:where(body) input[type="search"],
-:where(body) input[type="tel"],
-:where(body) input[type="datetime-local"],
-:where(body) input[type="date"],
-:where(body) input[type="time"],
-:where(body) select:not([multiple]) {
   border-radius: var(--b-border-radius) var(--b-border-radius) 0 0;
 }
-:where(body) textarea,
+:where(body) :where(textarea),
-:where(body) select[multiple] {
+:where(body) :where(select[multiple]) {
   border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0;
 }
-:where(body) input[type="button"],
+:where(body) :where(input[type="button"], button) {
-:where(body) button {
   border-radius: var(--b-border-radius);
 }
-:where(body) ul > *::marker,
+:where(body) :where(ul) > *::marker,
-:where(body) ol > *::marker {
+:where(body) :where(ol) > *::marker {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5);
 }
-:where(body) summary {
+:where(body) :where(summary) {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-:where(body) summary::marker {
+:where(body) :where(summary)::marker {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5);
 }
-:where(body) summary:hover {
+:where(body) :where(summary):hover {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-:where(body) summary:hover::marker {
+:where(body) :where(summary):hover::marker {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-:where(body) summary:active::marker {
+:where(body) :where(summary):active::marker {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-:where(body) a:hover {
+:where(body) :where(a):hover {
   color: hsl(calc(var(--bhsl-link-hue) + 0deg) calc(var(--bhsl-link-saturation) + 0%) calc(var(--bhsl-link-lightness) + 20%) / 1);
 }
-:where(body) a:active {
+:where(body) :where(a):active {
   color: hsl(calc(var(--bhsl-link-hue) + 0deg) calc(var(--bhsl-link-saturation) + 0%) calc(var(--bhsl-link-lightness) + 40%) / 1);
 }
-:where(body) kbd,
+:where(body) :where(kbd),
-:where(body) samp {
+:where(body) :where(samp) {
   border-radius: calc(var(--b-border-radius) / 4);
 }
-:where(body) var {
+:where(body) :where(var) {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-:where(body) q::before,
+:where(body) :where(q)::before,
-:where(body) q::after {
+:where(body) :where(q)::after {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-:where(body) rt {
+:where(body) :where(rt) {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }

dist/colors-amber.module.min.css

@@ -0,0 +1 @@
+:where(.bluelib){--bhsl-background-hue:0deg;--bhsl-background-saturation:8%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:19deg;--bhsl-foreground-saturation:91%;--bhsl-foreground-lightness:46%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:42%;--bhsl-primary-lightness:94%;--bhsl-link-hue:50deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:80%;--bhsl-mark-foreground-hue:19deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:19deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:66%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:66%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:66%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:66%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:66%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:66%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}

dist/colors-amber.root.min.css

@@ -0,0 +1 @@
+:where(body){--bhsl-background-hue:0deg;--bhsl-background-saturation:8%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:19deg;--bhsl-foreground-saturation:91%;--bhsl-foreground-lightness:46%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:42%;--bhsl-primary-lightness:94%;--bhsl-link-hue:50deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:80%;--bhsl-mark-foreground-hue:19deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:19deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:66%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:66%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:66%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:66%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:66%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:66%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}

dist/colors-pixeldawn.module.css

@@ -75,21 +75,21 @@
   --b-border-radius: 0;
   --b-outer-shadow: none;
 }
-:where(.bluelib):is(:where(.bluelib)) .header-1,
+:where(.bluelib):is(:where(.bluelib)) :where(.header-1),
-:where(.bluelib):is(:where(.bluelib)) .header-2,
+:where(.bluelib):is(:where(.bluelib)) :where(.header-2),
-:where(.bluelib):is(:where(.bluelib)) .header-3,
+:where(.bluelib):is(:where(.bluelib)) :where(.header-3),
-:where(.bluelib):is(:where(.bluelib)) .header-4,
+:where(.bluelib):is(:where(.bluelib)) :where(.header-4),
-:where(.bluelib):is(:where(.bluelib)) .header-5,
+:where(.bluelib):is(:where(.bluelib)) :where(.header-5),
-:where(.bluelib):is(:where(.bluelib)) .header-6 {
+:where(.bluelib):is(:where(.bluelib)) :where(.header-6) {
   color: white;
   text-shadow: 2px 2px 0 #9832ce;
 }
-:where(.bluelib):is(:where(.bluelib)) .panel .header-1,
+:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-1),
-:where(.bluelib):is(:where(.bluelib)) .panel .header-2,
+:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-2),
-:where(.bluelib):is(:where(.bluelib)) .panel .header-3,
+:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-3),
-:where(.bluelib):is(:where(.bluelib)) .panel .header-4,
+:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-4),
-:where(.bluelib):is(:where(.bluelib)) .panel .header-5,
+:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-5),
-:where(.bluelib):is(:where(.bluelib)) .panel .header-6 {
+:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-6) {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
   text-shadow: none;
 }

dist/colors-pixeldawn.module.min.css

@@ -0,0 +1 @@
+:where(.bluelib){--bhsl-background-hue:14deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:74%;--bhsl-foreground-hue:340deg;--bhsl-foreground-saturation:40%;--bhsl-foreground-lightness:20%;--bhsl-primary-hue:220deg;--bhsl-primary-saturation:92%;--bhsl-primary-lightness:11%;--bhsl-link-hue:237deg;--bhsl-link-saturation:80%;--bhsl-link-lightness:41%;--bhsl-mark-foreground-hue:194deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:194deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:15%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:15%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:15%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:15%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:15%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:15%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}:where(.bluelib):is(:where(.bluelib)){--b-panel-initial-opacity:0.5;--b-border-radius:0;--b-outer-shadow:none}:where(.bluelib):is(:where(.bluelib)) :where(.header-1),:where(.bluelib):is(:where(.bluelib)) :where(.header-2),:where(.bluelib):is(:where(.bluelib)) :where(.header-3),:where(.bluelib):is(:where(.bluelib)) :where(.header-4),:where(.bluelib):is(:where(.bluelib)) :where(.header-5),:where(.bluelib):is(:where(.bluelib)) :where(.header-6){color:#fff;text-shadow:2px 2px 0 #9832ce}:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-1),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-2),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-3),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-4),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-5),:where(.bluelib):is(:where(.bluelib)) :where(.panel) :where(.header-6){color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));text-shadow:none}

dist/colors-pixeldawn.root.css

@@ -75,21 +75,21 @@
   --b-border-radius: 0;
   --b-outer-shadow: none;
 }
-:where(body):is(:where(body)) h1,
+:where(body):is(:where(body)) :where(h1),
-:where(body):is(:where(body)) h2,
+:where(body):is(:where(body)) :where(h2),
-:where(body):is(:where(body)) h3,
+:where(body):is(:where(body)) :where(h3),
-:where(body):is(:where(body)) h4,
+:where(body):is(:where(body)) :where(h4),
-:where(body):is(:where(body)) h5,
+:where(body):is(:where(body)) :where(h5),
-:where(body):is(:where(body)) h6 {
+:where(body):is(:where(body)) :where(h6) {
   color: white;
   text-shadow: 2px 2px 0 #9832ce;
 }
-:where(body):is(:where(body)) .panel h1,
+:where(body):is(:where(body)) :where(.panel) :where(h1),
-:where(body):is(:where(body)) .panel h2,
+:where(body):is(:where(body)) :where(.panel) :where(h2),
-:where(body):is(:where(body)) .panel h3,
+:where(body):is(:where(body)) :where(.panel) :where(h3),
-:where(body):is(:where(body)) .panel h4,
+:where(body):is(:where(body)) :where(.panel) :where(h4),
-:where(body):is(:where(body)) .panel h5,
+:where(body):is(:where(body)) :where(.panel) :where(h5),
-:where(body):is(:where(body)) .panel h6 {
+:where(body):is(:where(body)) :where(.panel) :where(h6) {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
   text-shadow: none;
 }

dist/colors-pixeldawn.root.min.css

@@ -0,0 +1 @@
+:where(body){--bhsl-background-hue:14deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:74%;--bhsl-foreground-hue:340deg;--bhsl-foreground-saturation:40%;--bhsl-foreground-lightness:20%;--bhsl-primary-hue:220deg;--bhsl-primary-saturation:92%;--bhsl-primary-lightness:11%;--bhsl-link-hue:237deg;--bhsl-link-saturation:80%;--bhsl-link-lightness:41%;--bhsl-mark-foreground-hue:194deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:194deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:15%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:15%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:15%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:15%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:15%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:15%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}:where(body):is(:where(body)){--b-panel-initial-opacity:0.5;--b-border-radius:0;--b-outer-shadow:none}:where(body):is(:where(body)) :where(h1),:where(body):is(:where(body)) :where(h2),:where(body):is(:where(body)) :where(h3),:where(body):is(:where(body)) :where(h4),:where(body):is(:where(body)) :where(h5),:where(body):is(:where(body)) :where(h6){color:#fff;text-shadow:2px 2px 0 #9832ce}:where(body):is(:where(body)) :where(.panel) :where(h1),:where(body):is(:where(body)) :where(.panel) :where(h2),:where(body):is(:where(body)) :where(.panel) :where(h3),:where(body):is(:where(body)) :where(.panel) :where(h4),:where(body):is(:where(body)) :where(.panel) :where(h5),:where(body):is(:where(body)) :where(.panel) :where(h6){color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));text-shadow:none}

dist/colors-purplestar.module.min.css

@@ -0,0 +1 @@
+:where(.bluelib){--bhsl-background-hue:262deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:13%;--bhsl-foreground-hue:262deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:78%;--bhsl-primary-hue:53deg;--bhsl-primary-saturation:100%;--bhsl-primary-lightness:100%;--bhsl-link-hue:53deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:72%;--bhsl-mark-foreground-hue:53deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:53deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:72%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}

dist/colors-purplestar.root.min.css

@@ -0,0 +1 @@
+:where(body){--bhsl-background-hue:262deg;--bhsl-background-saturation:85%;--bhsl-background-lightness:13%;--bhsl-foreground-hue:262deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:78%;--bhsl-primary-hue:53deg;--bhsl-primary-saturation:100%;--bhsl-primary-lightness:100%;--bhsl-link-hue:53deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:72%;--bhsl-mark-foreground-hue:53deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:53deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:72%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}

dist/colors-royalblue.module.min.css

@@ -0,0 +1 @@
+:where(.bluelib){--bhsl-background-hue:224deg;--bhsl-background-saturation:64%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:212deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:81%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:0%;--bhsl-primary-lightness:100%;--bhsl-link-hue:180deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:40%;--bhsl-mark-foreground-hue:32deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:32deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}

dist/colors-royalblue.root.min.css

@@ -0,0 +1 @@
+:where(body){--bhsl-background-hue:224deg;--bhsl-background-saturation:64%;--bhsl-background-lightness:14%;--bhsl-foreground-hue:212deg;--bhsl-foreground-saturation:100%;--bhsl-foreground-lightness:81%;--bhsl-primary-hue:0deg;--bhsl-primary-saturation:0%;--bhsl-primary-lightness:100%;--bhsl-link-hue:180deg;--bhsl-link-saturation:100%;--bhsl-link-lightness:40%;--bhsl-mark-foreground-hue:32deg;--bhsl-mark-foreground-saturation:64%;--bhsl-mark-foreground-lightness:14%;--bhsl-mark-background-hue:32deg;--bhsl-mark-background-saturation:100%;--bhsl-mark-background-lightness:81%;--bhsl-todo-foreground-hue:43deg;--bhsl-todo-foreground-saturation:100%;--bhsl-todo-foreground-lightness:65%;--bhsl-todo-background-hue:204deg;--bhsl-todo-background-saturation:11%;--bhsl-todo-background-lightness:18%;--bhsl-sample-input-hue:0deg;--bhsl-sample-input-saturation:100%;--bhsl-sample-input-lightness:0%;--bhsl-sample-output-hue:0deg;--bhsl-sample-output-saturation:100%;--bhsl-sample-output-lightness:100%;--bhsl-red-hue:0deg;--bhsl-red-saturation:100%;--bhsl-red-lightness:75%;--bhsl-yellow-hue:60deg;--bhsl-yellow-saturation:100%;--bhsl-yellow-lightness:75%;--bhsl-green-hue:120deg;--bhsl-green-saturation:100%;--bhsl-green-lightness:75%;--bhsl-cyan-hue:180deg;--bhsl-cyan-saturation:100%;--bhsl-cyan-lightness:75%;--bhsl-blue-hue:240deg;--bhsl-blue-saturation:100%;--bhsl-blue-lightness:75%;--bhsl-magenta-hue:300deg;--bhsl-magenta-saturation:100%;--bhsl-magenta-lightness:75%;--bhsl-inserted-hue:var(--bhsl-green-hue);--bhsl-inserted-saturation:var(--bhsl-green-saturation);--bhsl-inserted-lightness:var(--bhsl-green-lightness);--bhsl-deleted-hue:var(--bhsl-red-hue);--bhsl-deleted-saturation:var(--bhsl-red-saturation);--bhsl-deleted-lightness:var(--bhsl-red-lightness)}

dist/fun.module.css

@@ -15,6 +15,6 @@
     --bhsl-current-hue: 360deg;
   }
 }
-.animation-rainbow {
+:where(.animation-rainbow) {
   animation: 2s linear infinite rainbow;
 }

dist/fun.module.min.css

@@ -0,0 +1 @@
+@keyframes rainbow{0%{--bhsl-current-hue:0deg}100%{--bhsl-current-hue:360deg}}:where(.animation-rainbow){animation:2s linear infinite rainbow}

dist/fun.root.css

@@ -15,6 +15,6 @@
     --bhsl-current-hue: 360deg;
   }
 }
-.rainbow {
+:where(.rainbow) {
   animation: 2s linear infinite rainbow;
 }

dist/fun.root.min.css

@@ -0,0 +1 @@
+@keyframes rainbow{0%{--bhsl-current-hue:0deg}100%{--bhsl-current-hue:360deg}}:where(.rainbow){animation:2s linear infinite rainbow}

dist/glass.module.css

@@ -8,76 +8,51 @@
   --b-panel-nested-opacity: 0.075;
 }
 @supports (backdrop-filter: blur(var(--b-panel-blur))) {
-  :where(.bluelib) .panel,
+  :where(.bluelib) :where(.panel),
-  :where(.bluelib) .table.panel > .table-caption {
+  :where(.bluelib) :where(.table):where(.panel) > :where(.table-caption) {
     background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / var(--b-panel-initial-opacity));
     backdrop-filter: blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)));
   }
-  :where(.bluelib) .panel .panel,
+  :where(.bluelib) :where(.panel) :where(.panel),
-  :where(.bluelib) .table.panel > .table-caption .panel {
+  :where(.bluelib) :where(.table):where(.panel) > :where(.table-caption) :where(.panel) {
     background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));
     backdrop-filter: none;
   }
-  :where(.bluelib) .modifier-mark,
+  :where(.bluelib) :where(.modifier-mark),
-  :where(.bluelib) .element-mark,
+  :where(.bluelib) :where(.panel):where(.modifier-mark) {
-  :where(.bluelib) .panel.modifier-mark {
     background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
     backdrop-filter: none;
   }
-  :where(.bluelib) .modifier-mark .modifier-mark,
+  :where(.bluelib) :where(.modifier-mark) :where(.modifier-mark),
-  :where(.bluelib) .element-mark .modifier-mark,
+  :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
-  :where(.bluelib) .panel.modifier-mark .modifier-mark,
+  :where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark),
-  :where(.bluelib) .modifier-mark .element-mark,
+  :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) {
-  :where(.bluelib) .element-mark .element-mark,
-  :where(.bluelib) .panel.modifier-mark .element-mark,
-  :where(.bluelib) .modifier-mark .panel.modifier-mark,
-  :where(.bluelib) .element-mark .panel.modifier-mark,
-  :where(.bluelib) .panel.modifier-mark .panel.modifier-mark {
     background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
   }
-  :where(.bluelib) .modifier-mark .modifier-mark .modifier-mark,
+  :where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),
-  :where(.bluelib) .element-mark .modifier-mark .modifier-mark,
+  :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),
-  :where(.bluelib) .panel.modifier-mark .modifier-mark .modifier-mark,
+  :where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
-  :where(.bluelib) .modifier-mark .element-mark .modifier-mark,
+  :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),
-  :where(.bluelib) .element-mark .element-mark .modifier-mark,
+  :where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),
-  :where(.bluelib) .panel.modifier-mark .element-mark .modifier-mark,
+  :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),
-  :where(.bluelib) .modifier-mark .panel.modifier-mark .modifier-mark,
+  :where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark),
-  :where(.bluelib) .element-mark .panel.modifier-mark .modifier-mark,
+  :where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) {
-  :where(.bluelib) .panel.modifier-mark .panel.modifier-mark .modifier-mark,
-  :where(.bluelib) .modifier-mark .modifier-mark .element-mark,
-  :where(.bluelib) .element-mark .modifier-mark .element-mark,
-  :where(.bluelib) .panel.modifier-mark .modifier-mark .element-mark,
-  :where(.bluelib) .modifier-mark .element-mark .element-mark,
-  :where(.bluelib) .element-mark .element-mark .element-mark,
-  :where(.bluelib) .panel.modifier-mark .element-mark .element-mark,
-  :where(.bluelib) .modifier-mark .panel.modifier-mark .element-mark,
-  :where(.bluelib) .element-mark .panel.modifier-mark .element-mark,
-  :where(.bluelib) .panel.modifier-mark .panel.modifier-mark .element-mark,
-  :where(.bluelib) .modifier-mark .modifier-mark .panel.modifier-mark,
-  :where(.bluelib) .element-mark .modifier-mark .panel.modifier-mark,
-  :where(.bluelib) .panel.modifier-mark .modifier-mark .panel.modifier-mark,
-  :where(.bluelib) .modifier-mark .element-mark .panel.modifier-mark,
-  :where(.bluelib) .element-mark .element-mark .panel.modifier-mark,
-  :where(.bluelib) .panel.modifier-mark .element-mark .panel.modifier-mark,
-  :where(.bluelib) .modifier-mark .panel.modifier-mark .panel.modifier-mark,
-  :where(.bluelib) .element-mark .panel.modifier-mark .panel.modifier-mark,
-  :where(.bluelib) .panel.modifier-mark .panel.modifier-mark .panel.modifier-mark {
     background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
   }
-  :where(.bluelib) .modifier-todo,
+  :where(.bluelib) :where(.modifier-todo),
-  :where(.bluelib) .panel.modifier-todo {
+  :where(.bluelib) :where(.panel):where(.modifier-todo) {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
   }
-  :where(.bluelib) .modifier-todo .panel,
+  :where(.bluelib) :where(.modifier-todo) :where(.panel),
-  :where(.bluelib) .panel.modifier-todo .panel {
+  :where(.bluelib) :where(.panel):where(.modifier-todo) :where(.panel) {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
     backdrop-filter: none;
   }
-  :where(.bluelib) .panel.modifier-todo {
+  :where(.bluelib) :where(.panel):where(.modifier-todo) {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / 0.3);
     backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%);
   }
-  :where(.bluelib) .panel .panel.modifier-todo {
+  :where(.bluelib) :where(.panel) :where(.panel):where(.modifier-todo) {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
   }
 }

dist/glass.module.min.css

@@ -0,0 +1 @@
+:where(.bluelib){--b-panel-blur:16px;--b-panel-initial-opacity:0.3;--b-panel-nested-opacity:0.075}@supports (backdrop-filter:blur(var(--b-panel-blur))){:where(.bluelib) :where(.panel),:where(.bluelib) :where(.table):where(.panel)>:where(.table-caption){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / var(--b-panel-initial-opacity));backdrop-filter:blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))}:where(.bluelib) :where(.panel) :where(.panel),:where(.bluelib) :where(.table):where(.panel)>:where(.table-caption) :where(.panel){background-color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));backdrop-filter:none}:where(.bluelib) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));backdrop-filter:none}:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness))}:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.modifier-mark) :where(.panel):where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.modifier-mark),:where(.bluelib) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark) :where(.panel):where(.modifier-mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness))}:where(.bluelib) :where(.modifier-todo),:where(.bluelib) :where(.panel):where(.modifier-todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}:where(.bluelib) :where(.modifier-todo) :where(.panel),:where(.bluelib) :where(.panel):where(.modifier-todo) :where(.panel){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));backdrop-filter:none}:where(.bluelib) :where(.panel):where(.modifier-todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / .3);backdrop-filter:blur(var(--b-panel-blur)) grayscale(100%)}:where(.bluelib) :where(.panel) :where(.panel):where(.modifier-todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}}

dist/glass.root.css

@@ -8,76 +8,51 @@
   --b-panel-nested-opacity: 0.075;
 }
 @supports (backdrop-filter: blur(var(--b-panel-blur))) {
-  :where(body) .panel,
+  :where(body) :where(.panel),
-  :where(body) table.panel > caption {
+  :where(body) :where(table):where(.panel) > :where(caption) {
     background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / var(--b-panel-initial-opacity));
     backdrop-filter: blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)));
   }
-  :where(body) .panel .panel,
+  :where(body) :where(.panel) :where(.panel),
-  :where(body) table.panel > caption .panel {
+  :where(body) :where(table):where(.panel) > :where(caption) :where(.panel) {
     background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));
     backdrop-filter: none;
   }
-  :where(body) .mark,
+  :where(body) :where(mark, .mark),
-  :where(body) mark,
+  :where(body) :where(.panel):where(mark, .mark) {
-  :where(body) .panel.mark {
     background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
     backdrop-filter: none;
   }
-  :where(body) .mark .mark,
+  :where(body) :where(mark, .mark) :where(mark, .mark),
-  :where(body) mark .mark,
+  :where(body) :where(.panel):where(mark, .mark) :where(mark, .mark),
-  :where(body) .panel.mark .mark,
+  :where(body) :where(mark, .mark) :where(.panel):where(mark, .mark),
-  :where(body) .mark mark,
+  :where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) {
-  :where(body) mark mark,
-  :where(body) .panel.mark mark,
-  :where(body) .mark .panel.mark,
-  :where(body) mark .panel.mark,
-  :where(body) .panel.mark .panel.mark {
     background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
   }
-  :where(body) .mark .mark .mark,
+  :where(body) :where(mark, .mark) :where(mark, .mark) :where(mark, .mark),
-  :where(body) mark .mark .mark,
+  :where(body) :where(.panel):where(mark, .mark) :where(mark, .mark) :where(mark, .mark),
-  :where(body) .panel.mark .mark .mark,
+  :where(body) :where(mark, .mark) :where(.panel):where(mark, .mark) :where(mark, .mark),
-  :where(body) .mark mark .mark,
+  :where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) :where(mark, .mark),
-  :where(body) mark mark .mark,
+  :where(body) :where(mark, .mark) :where(mark, .mark) :where(.panel):where(mark, .mark),
-  :where(body) .panel.mark mark .mark,
+  :where(body) :where(.panel):where(mark, .mark) :where(mark, .mark) :where(.panel):where(mark, .mark),
-  :where(body) .mark .panel.mark .mark,
+  :where(body) :where(mark, .mark) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark),
-  :where(body) mark .panel.mark .mark,
+  :where(body) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) :where(.panel):where(mark, .mark) {
-  :where(body) .panel.mark .panel.mark .mark,
-  :where(body) .mark .mark mark,
-  :where(body) mark .mark mark,
-  :where(body) .panel.mark .mark mark,
-  :where(body) .mark mark mark,
-  :where(body) mark mark mark,
-  :where(body) .panel.mark mark mark,
-  :where(body) .mark .panel.mark mark,
-  :where(body) mark .panel.mark mark,
-  :where(body) .panel.mark .panel.mark mark,
-  :where(body) .mark .mark .panel.mark,
-  :where(body) mark .mark .panel.mark,
-  :where(body) .panel.mark .mark .panel.mark,
-  :where(body) .mark mark .panel.mark,
-  :where(body) mark mark .panel.mark,
-  :where(body) .panel.mark mark .panel.mark,
-  :where(body) .mark .panel.mark .panel.mark,
-  :where(body) mark .panel.mark .panel.mark,
-  :where(body) .panel.mark .panel.mark .panel.mark {
     background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
   }
-  :where(body) .todo,
+  :where(body) :where(.todo),
-  :where(body) .panel.todo {
+  :where(body) :where(.panel):where(.todo) {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
   }
-  :where(body) .todo .panel,
+  :where(body) :where(.todo) :where(.panel),
-  :where(body) .panel.todo .panel {
+  :where(body) :where(.panel):where(.todo) :where(.panel) {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
     backdrop-filter: none;
   }
-  :where(body) .panel.todo {
+  :where(body) :where(.panel):where(.todo) {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / 0.3);
     backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%);
   }
-  :where(body) .panel .panel.todo {
+  :where(body) :where(.panel) :where(.panel):where(.todo) {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
   }
 }

dist/glass.root.min.css

@@ -0,0 +1 @@
+:where(body){--b-panel-blur:16px;--b-panel-initial-opacity:0.3;--b-panel-nested-opacity:0.075}@supports (backdrop-filter:blur(var(--b-panel-blur))){:where(body) :where(.panel),:where(body) :where(table):where(.panel)>:where(caption){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / var(--b-panel-initial-opacity));backdrop-filter:blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))}:where(body) :where(.panel) :where(.panel),:where(body) :where(table):where(.panel)>:where(caption) :where(.panel){background-color:hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));backdrop-filter:none}:where(body) :where(.panel):where(mark,.mark),:where(body) :where(mark,.mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));backdrop-filter:none}:where(body) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(.panel):where(mark,.mark) :where(mark,.mark),:where(body) :where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(mark,.mark) :where(mark,.mark){background-color:hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness))}:where(body) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark) :where(mark,.mark),:where(body) :where(.panel):where(mark,.mark) :where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(.panel):where(mark,.mark) :where(mark,.mark) :where(mark,.mark),:where(body) :where(mark,.mark) :where(.panel):where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(mark,.mark) :where(.panel):where(mark,.mark) :where(mark,.mark),:where(body) :where(mark,.mark) :where(mark,.mark) :where(.panel):where(mark,.mark),:where(body) :where(mark,.mark) :where(mark,.mark) :where(mark,.mark){background-color:hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness))}:where(body) :where(.panel):where(.todo),:where(body) :where(.todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}:where(body) :where(.panel):where(.todo) :where(.panel),:where(body) :where(.todo) :where(.panel){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));backdrop-filter:none}:where(body) :where(.panel):where(.todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / .3);backdrop-filter:blur(var(--b-panel-blur)) grayscale(100%)}:where(body) :where(.panel) :where(.panel):where(.todo){background-color:hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness))}}

examples/index.css

@@ -37,27 +37,11 @@
     }
 }
 
-#body .chapter-1 > .panel,
+#body :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
-#body .chapter-2 > .panel,
-#body .chapter-3 > .panel,
-#body .chapter-4 > .panel,
-#body .chapter-5 > .panel,
-#body .chapter-6 > .panel,
-#body .chapter-7 > .panel,
-#body .chapter-8 > .panel,
-#body .chapter-9 > .panel {
     min-width: 360px;
 }
 
-#body .panel .chapter-1 > .panel,
+#body .panel :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
-#body .panel .chapter-2 > .panel,
-#body .panel .chapter-3 > .panel,
-#body .panel .chapter-4 > .panel,
-#body .panel .chapter-5 > .panel,
-#body .panel .chapter-6 > .panel,
-#body .panel .chapter-7 > .panel,
-#body .panel .chapter-8 > .panel,
-#body .panel .chapter-9 > .panel {
     min-width: unset;
 }
 

examples/index.html

@@ -222,7 +222,7 @@
                                 </dd>
                                 <dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-purplestar:root', 'kazuend-2KXEb_8G5vo-unsplash-edited.jpg')"> Purple Star</label></dt>
                                 <dd>
-                                    <mark>Experimental.</mark> A purple-ish theme for <a href="https://www.starshard.studio">Star Shard Studio</a>.
+                                    A purple-ish theme for <a href="https://www.starshard.studio">Star Shard Studio</a>.
                                 </dd>
                             </dl>
                         </dd>
@@ -270,6 +270,12 @@
                     <div class="panel">
                         <code>&lt;link<wbr> rel=&quot;stylesheet&quot;<wbr> href=&quot;https://unpkg.com/@steffo/bluelib<wbr>@<var>VERSION</var><wbr>/dist/<wbr><var>RULESET</var>.<var>SELECTORSET</var>.css&quot;<wbr> type=&quot;text/css&quot;<wbr>/&gt;</code>
                     </div>
+                    <p>
+                        To save a bit extra bandwidth, at the cost of harder-to-read stylesheets, you can use minified stylesheets, like this:
+                    </p>
+                    <div class="panel">
+                        <code>&lt;link<wbr> rel=&quot;stylesheet&quot;<wbr> href=&quot;https://unpkg.com/@steffo/bluelib<wbr>@<var>VERSION</var><wbr>/dist/<wbr><var>RULESET</var>.<var>SELECTORSET</var>.min.css&quot;<wbr> type=&quot;text/css&quot;<wbr>/&gt;</code>
+                    </div>
                 </section>
                 <section class="panel box todo" id="panel-installtbd">
                     <h3>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steffo/bluelib",
-    "version": "7.2.0",
+    "version": "8.0.0",
     "description": "A stylesheet that supports fast dynamic recoloring via CSS variables",
     "scripts": {
         "dev": "web-dev-server --watch",
@@ -56,6 +56,7 @@
     "private": false,
     "devDependencies": {
         "@web/dev-server": "^0.1.34",
-        "less": "^4.1.3"
+        "less": "^4.1.3",
+        "less-plugin-clean-css": "^1.5.1"
     }
 }

src/rulesets/base.less

@@ -71,9 +71,12 @@
 
     //<editor-fold desc="Rules: Page">
 
+    @{page-header}, @{page-footer} {
+        text-align: center;
+    }
+
     @{page-footer} {
         margin: 1rem 0;
-        text-align: center;
         font-size: x-small;
     }
 
@@ -123,7 +126,7 @@
         font-size: 1.75em;
     }
 
-    @{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} {
+    @{header} {
         text-align: center;
 
         .map-hsl-group(current; primary);
@@ -194,33 +197,6 @@
 
     //<editor-fold desc="Rules: Chapters">
 
-    @{chapter-0}, @{chapter-1}, @{chapter-2}, @{chapter-3}, @{chapter-4}, @{chapter-5}, @{chapter-6}, @{chapter-7}, @{chapter-8}, @{chapter-9} {
-        // Be a row flexbox to separate elements in columns
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
-        gap: 8px;
-        justify-content: center;
-        align-items: stretch;
-
-        // Add the gap as a vertical margin, so that multiple chapters can be placed next to each other
-        margin: 8px 0;
-
-        > @{all} {
-            // Allow all children to grow
-            flex-grow: 1;
-            // But not to shrink
-            flex-shrink: 0;
-        }
-
-        > @{header-1}, > @{header-2}, > @{header-3}, > @{header-4}, > @{header-5}, > @{header-6} {
-            // Headings should fill up all horizontal space available and force a wrap
-            flex-basis: 100%;
-
-            margin-top: 1.2em;
-        }
-    }
-
     // Chapter zero means that the number of panels is not set and they should not be wrapped
     @{chapter-0} {
         flex-wrap: nowrap;
@@ -278,6 +254,33 @@
         }
     }
 
+    @{chapter} {
+        // Be a row flexbox to separate elements in columns
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        gap: 8px;
+        justify-content: center;
+        align-items: stretch;
+
+        // Add the gap as a vertical margin, so that multiple chapters can be placed next to each other
+        margin: 8px 0;
+
+        > @{all} {
+            // Allow all children to grow
+            flex-grow: 1;
+            // But not to shrink
+            flex-shrink: 0;
+        }
+
+        > @{header} {
+            // Headings should fill up all horizontal space available and force a wrap
+            flex-basis: 100%;
+
+            margin-top: 1.2em;
+        }
+    }
+
     //</editor-fold>
 
     /// ===== Separators =====
@@ -513,7 +516,7 @@
         opacity: 0.3;
     }
 
-    @{modifier-mark}, @{element-mark} {
+    @{modifier-mark} {
         // Assign marks to their own font group
         .use-font-group(mark);
 
@@ -522,12 +525,12 @@
         .map-hsl-group(current; mark-foreground);
 
         // If applied twice, go back to "normality"
-        @{modifier-mark}, @{element-mark} {
+        @{modifier-mark} {
             background-color: .hsl-group(background)[@c];
             .map-hsl-group(current; foreground);
 
             // If applied thrice, mark again and not anymore
-            @{modifier-mark}, @{element-mark} {
+            @{modifier-mark} {
                 background-color: .hsl-group(mark-background)[@c];
                 .map-hsl-group(current; mark-foreground);
             }
@@ -710,30 +713,28 @@
     @{input-range} {
         padding: 0;
 
-        /*
+        // appearance: none;
-        appearance: none;
+        //
-
+        // &::-moz-range-thumb {
-        &::-moz-range-thumb {
+        //     width: 0;
-            width: 0;
+        //     border-radius: 0;
-            border-radius: 0;
+        //     border-style: outset;
-            border-style: outset;
+        // 
-
+        //     border-color: .hsl-group(current)[@c];
-            border-color: .hsl-group(current)[@c];
+        //     border-width: 4px;
-            border-width: 4px;
+        // 
-
+        //     background-color: .hsl-group(primary)[@c];
-            background-color: .hsl-group(primary)[@c];
+        // }
-        }
+        // 
-
+        // &::-moz-range-track {
-        &::-moz-range-track {
+        //     height: 0.125em;
-            height: 0.125em;
+        //     background-color: .hsl-group(current)[@c];
-            background-color: .hsl-group(current)[@c];
+        // }
-        }
+        // 
-
+        // &::-moz-range-progress {
-        &::-moz-range-progress {
+        //     height: 0.5em;
-            height: 0.5em;
+        //     background-color: .hsl-group(current)[@c];
-            background-color: .hsl-group(current)[@c];
+        // }
-        }
-         */
     }
 
     @{input-button} {
@@ -900,6 +901,4 @@
     }
 
     //</editor-fold>
-
-
 }

src/rulesets/classic.less

@@ -19,13 +19,13 @@
     }
 
     // Give headers a slight shadow so they are easier to read outside of panels
-    @{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} {
+    @{header} {
         text-shadow: var(--b-outer-shadow);
     }
 
     // But do not give it to headers inside panels
     @{panel} {
-        @{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} {
+        @{header} {
             text-shadow: none;
         }
     }
@@ -45,15 +45,15 @@
     }
 
     // Make sure mark still works, even considering specificity
-    @{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
+    @{modifier-mark}, @{panel}@{modifier-mark} {
         background-color: .hsl-group(mark-background)[@c];
 
         // Make the modifier toggle properly
-        @{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
+        @{modifier-mark}, @{panel}@{modifier-mark} {
             background-color: .hsl-group(background)[@c];
 
             // Make the modifier toggle properly
-            @{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
+            @{modifier-mark}, @{panel}@{modifier-mark} {
                 background-color: .hsl-group(mark-background)[@c];
             }
         }

src/rulesets/glass.less

@@ -30,16 +30,16 @@
         }
 
         // Make sure mark still works, even considering specificity
-        @{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
+        @{modifier-mark}, @{panel}@{modifier-mark} {
             background-color: .hsl-group(mark-background)[@c];
             backdrop-filter: none;
 
             // Make the modifier toggle properly
-            @{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
+            @{modifier-mark}, @{panel}@{modifier-mark} {
                 background-color: .hsl-group(background)[@c];
 
                 // Make the modifier toggle properly
-                @{modifier-mark}, @{element-mark}, @{panel}@{modifier-mark} {
+                @{modifier-mark}, @{panel}@{modifier-mark} {
                     background-color: .hsl-group(mark-background)[@c];
                 }
             }

src/selectorsets/module.less

@@ -1,123 +1,124 @@
 @bluelib: ~":where(.bluelib)";
 
-@all: ~"*";
+@all: ~":where(*)";
 
-@page-main: ~".page-main";
+@page-main: ~":where(.page-main)";
-@page-aside: ~".page-aside";
+@page-aside: ~":where(.page-aside)";
-@page-header: ~".page-header";
+@page-header: ~":where(.page-header)";
-@page-footer: ~".page-footer";
+@page-footer: ~":where(.page-footer)";
 
-@border-top: ~".border-top";
+@border-top: ~":where(.border-top)";
-@border-right: ~".border-right";
+@border-right: ~":where(.border-right)";
-@border-bottom: ~".border-bottom";
+@border-bottom: ~":where(.border-bottom)";
-@border-left: ~".border-left";
+@border-left: ~":where(.border-left)";
 
-@float-top: ~".float-top";
+@float-top: ~":where(.float-top)";
-@float-right: ~".float-right";
+@float-right: ~":where(.float-right)";
-@float-bottom: ~".float-bottom";
+@float-bottom: ~":where(.float-bottom)";
-@float-left: ~".float-left";
+@float-left: ~":where(.float-left)";
-@float-hcenter: ~".float-hcenter";
+@float-hcenter: ~":where(.float-hcenter)";
-@float-vcenter: ~".float-vcenter";
+@float-vcenter: ~":where(.float-vcenter)";
 
-@header-1: ~".header-1";
+@header: ~":where(h1, h2, h3, h4, h5, h6)";
-@header-2: ~".header-2";
+@header-1: ~":where(.header-1)";
-@header-3: ~".header-3";
+@header-2: ~":where(.header-2)";
-@header-4: ~".header-4";
+@header-3: ~":where(.header-3)";
-@header-5: ~".header-5";
+@header-4: ~":where(.header-4)";
-@header-6: ~".header-6";
+@header-5: ~":where(.header-5)";
+@header-6: ~":where(.header-6)";
 
-@panel: ~".panel";
+@panel: ~":where(.panel)";
-@panel-box: ~".panel-box";
+@panel-box: ~":where(.panel-box)";
-@panel-dialog: ~".panel-dialog";
+@panel-dialog: ~":where(.panel-dialog)";
-@panel-parenthesis: ~".panel-parenthesis";
+@panel-parenthesis: ~":where(.panel-parenthesis)";
 
-@chapter-0: ~".chapter-0";
+@chapter: ~":where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9)";
-@chapter-1: ~".chapter-1";
+@chapter-0: ~":where(.chapter-0)";
-@chapter-2: ~".chapter-2";
+@chapter-1: ~":where(.chapter-1)";
-@chapter-3: ~".chapter-3";
+@chapter-2: ~":where(.chapter-2)";
-@chapter-4: ~".chapter-4";
+@chapter-3: ~":where(.chapter-3)";
-@chapter-5: ~".chapter-5";
+@chapter-4: ~":where(.chapter-4)";
-@chapter-6: ~".chapter-6";
+@chapter-5: ~":where(.chapter-5)";
-@chapter-7: ~".chapter-7";
+@chapter-6: ~":where(.chapter-6)";
-@chapter-8: ~".chapter-8";
+@chapter-7: ~":where(.chapter-7)";
-@chapter-9: ~".chapter-9";
+@chapter-8: ~":where(.chapter-8)";
+@chapter-9: ~":where(.chapter-9)";
 
-@separator: ~".separator";
+@separator: ~":where(.separator)";
-@separator-light: ~".separator-light";
+@separator-light: ~":where(.separator-light)";
-@separator-heavy: ~".separator-heavy";
+@separator-heavy: ~":where(.separator-heavy)";
 
-@image: ~".image";
+@image: ~":where(.image)";
-@image-limit-half: ~".image-limit-half";
+@image-limit-half: ~":where(.image-limit-half)";
-@image-limit-quarter: ~".image-limit-quarter";
+@image-limit-quarter: ~":where(.image-limit-quarter)";
-@figure: ~".figure";
+@figure: ~":where(.figure)";
-@figure-caption: ~".figure-caption";
+@figure-caption: ~":where(.figure-caption)";
 
-@table: ~".table";
+@table: ~":where(.table)";
-@table-caption: ~".table-caption";
+@table-caption: ~":where(.table-caption)";
-@table-caption-top: ~".table-caption-top";
+@table-caption-top: ~":where(.table-caption-top)";
-@table-caption-bottom: ~".table-caption-bottom";
+@table-caption-bottom: ~":where(.table-caption-bottom)";
-@table-header: ~".table-header";
+@table-header: ~":where(.table-header)";
-@table-body: ~".table-body";
+@table-body: ~":where(.table-body)";
-@table-footer: ~".table-footer";
+@table-footer: ~":where(.table-footer)";
-@table-row: ~".table-row";
+@table-row: ~":where(.table-row)";
-@table-head: ~".table-head";
+@table-head: ~":where(.table-head)";
-@table-data: ~".table-data";
+@table-data: ~":where(.table-data)";
 
-@list-unordered: ~".list-unordered";
+@list-unordered: ~":where(.list-unordered)";
-@list-ordered: ~".list-ordered";
+@list-ordered: ~":where(.list-ordered)";
 
-@glossary-term: ~".glossary-term";
+@glossary-term: ~":where(.glossary-term)";
-@glossary-description: ~".glossary-description";
+@glossary-description: ~":where(.glossary-description)";
-@glossary-details: ~".glossary-details";
+@glossary-details: ~":where(.glossary-details)";
-@glossary-summary: ~".glossary-summary";
+@glossary-summary: ~":where(.glossary-summary)";
 
-@modifier-fade: ~".modifier-fade";
+@modifier-fade: ~":where(.modifier-fade)";
-@modifier-mark: ~".modifier-mark";
+@modifier-mark: ~":where(.modifier-mark)";
-@element-mark: ~".element-mark";
+@modifier-todo: ~":where(.modifier-todo)";
-@modifier-todo: ~".modifier-todo";
+@property-disabled: ~":where(.property-disabled)";
-@property-disabled: ~".property-disabled";
+@modifier-red: ~":where(.modifier-red)";
-@modifier-red: ~".modifier-red";
+@modifier-yellow: ~":where(.modifier-yellow)";
-@modifier-yellow: ~".modifier-yellow";
+@modifier-green: ~":where(.modifier-green)";
-@modifier-green: ~".modifier-green";
+@modifier-cyan: ~":where(.modifier-cyan)";
-@modifier-cyan: ~".modifier-cyan";
+@modifier-blue: ~":where(.modifier-blue)";
-@modifier-blue: ~".modifier-blue";
+@modifier-magenta: ~":where(.modifier-magenta)";
-@modifier-magenta: ~".modifier-magenta";
 
-@input: ~".input";
+@input: ~":where(.input)";
-@input-field: ~".input-field";
+@input-field: ~":where(.input-field)";
-@input-area: ~".input-area";
+@input-area: ~":where(.input-area)";
-@input-select: ~".input-select";
+@input-select: ~":where(.input-select)";
-@input-multiselect: ~".input-multiselect";
+@input-multiselect: ~":where(.input-multiselect)";
-@input-radio: ~".input-radio";
+@input-radio: ~":where(.input-radio)";
-@input-checkbox: ~".input-checkbox";
+@input-checkbox: ~":where(.input-checkbox)";
-@input-color: ~".input-color";
+@input-color: ~":where(.input-color)";
-@input-file: ~".input-file";
+@input-file: ~":where(.input-file)";
-@input-range: ~".input-range";
+@input-range: ~":where(.input-range)";
-@input-button: ~".input-button";
+@input-button: ~":where(.input-button)";
 
-@form-flex: ~'.form-flex';
+@form-flex: ~":where(.form-flex)";
-@form-flex-content: ~'.form-flex-content';
+@form-flex-content: ~":where(.form-flex-content)";
-@form-flex-choice: ~'.form-flex-choice';
+@form-flex-choice: ~":where(.form-flex-choice)";
 
-@text-anchor: ~".text-anchor";
+@text-anchor: ~":where(.text-anchor)";
-@text-idiomatic: ~".text-idiomatic";
+@text-idiomatic: ~":where(.text-idiomatic)";
-@text-emphasis: ~".text-emphasis";
+@text-emphasis: ~":where(.text-emphasis)";
-@text-attention: ~".text-attention";
+@text-attention: ~":where(.text-attention)";
-@text-strong: ~".text-strong";
+@text-strong: ~":where(.text-strong)";
-@text-annotation: ~".text-annotation";
+@text-annotation: ~":where(.text-annotation)";
-@text-strike: ~".text-strike";
+@text-strike: ~":where(.text-strike)";
-@text-inserted: ~".text-inserted";
+@text-inserted: ~":where(.text-inserted)";
-@text-deleted: ~".text-deleted";
+@text-deleted: ~":where(.text-deleted)";
-@text-preformatted: ~".text-preformatted";
+@text-preformatted: ~":where(.text-preformatted)";
-@text-code: ~".text-code";
+@text-code: ~":where(.text-code)";
-@text-input: ~".text-input";
+@text-input: ~":where(.text-input)";
-@text-output: ~".text-output";
+@text-output: ~":where(.text-output)";
-@text-variable: ~".text-variable";
+@text-variable: ~":where(.text-variable)";
-@text-quote: ~".text-quote";
+@text-quote: ~":where(.text-quote)";
-@text-citation: ~".text-citation";
+@text-citation: ~":where(.text-citation)";
-@text-definition: ~".text-definition";
+@text-definition: ~":where(.text-definition)";
-@text-abbreviation: ~".text-abbreviation";
+@text-abbreviation: ~":where(.text-abbreviation)";
-@text-ruby: ~".text-ruby";
+@text-ruby: ~":where(.text-ruby)";
-@text-ruby-annotation: ~".text-ruby-annotation";
+@text-ruby-annotation: ~":where(.text-ruby-annotation)";
 
-@animation-rainbow: ~".animation-rainbow";
+@animation-rainbow: ~":where(.animation-rainbow)";

src/selectorsets/root.less

@@ -1,123 +1,124 @@
 @bluelib: ~":where(body)";
 
-@all: ~"*";
+@all: ~":where(*)";
 
-@page-main: ~"main";
+@page-main: ~":where(main)";
-@page-aside: ~"aside";
+@page-aside: ~":where(aside)";
-@page-header: ~"header";
+@page-header: ~":where(header)";
-@page-footer: ~"footer";
+@page-footer: ~":where(footer)";
 
-@border-top: ~".border-top";
+@border-top: ~":where(.border-top)";
-@border-right: ~".border-right";
+@border-right: ~":where(.border-right)";
-@border-bottom: ~".border-bottom";
+@border-bottom: ~":where(.border-bottom)";
-@border-left: ~".border-left";
+@border-left: ~":where(.border-left)";
 
-@float-top: ~".float-top";
+@float-top: ~":where(.float-top)";
-@float-right: ~".float-right";
+@float-right: ~":where(.float-right)";
-@float-bottom: ~".float-bottom";
+@float-bottom: ~":where(.float-bottom)";
-@float-left: ~".float-left";
+@float-left: ~":where(.float-left)";
-@float-hcenter: ~".float-hcenter";
+@float-hcenter: ~":where(.float-hcenter)";
-@float-vcenter: ~".float-vcenter";
+@float-vcenter: ~":where(.float-vcenter)";
 
-@header-1: ~"h1";
+@header: ~":where(h1, h2, h3, h4, h5, h6)";
-@header-2: ~"h2";
+@header-1: ~":where(h1)";
-@header-3: ~"h3";
+@header-2: ~":where(h2)";
-@header-4: ~"h4";
+@header-3: ~":where(h3)";
-@header-5: ~"h5";
+@header-4: ~":where(h4)";
-@header-6: ~"h6";
+@header-5: ~":where(h5)";
+@header-6: ~":where(h6)";
 
-@panel: ~".panel";
+@panel: ~":where(.panel)";
-@panel-box: ~".box";
+@panel-box: ~":where(.box)";
-@panel-dialog: ~".dialog";
+@panel-dialog: ~":where(.dialog)";
-@panel-parenthesis: ~".parenthesis";
+@panel-parenthesis: ~":where(.parenthesis)";
 
-@chapter-0: ~".chapter-0";
+@chapter: ~":where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9)";
-@chapter-1: ~".chapter-1";
+@chapter-0: ~":where(.chapter-0)";
-@chapter-2: ~".chapter-2";
+@chapter-1: ~":where(.chapter-1)";
-@chapter-3: ~".chapter-3";
+@chapter-2: ~":where(.chapter-2)";
-@chapter-4: ~".chapter-4";
+@chapter-3: ~":where(.chapter-3)";
-@chapter-5: ~".chapter-5";
+@chapter-4: ~":where(.chapter-4)";
-@chapter-6: ~".chapter-6";
+@chapter-5: ~":where(.chapter-5)";
-@chapter-7: ~".chapter-7";
+@chapter-6: ~":where(.chapter-6)";
-@chapter-8: ~".chapter-8";
+@chapter-7: ~":where(.chapter-7)";
-@chapter-9: ~".chapter-9";
+@chapter-8: ~":where(.chapter-8)";
+@chapter-9: ~":where(.chapter-9)";
 
-@separator: ~"hr";
+@separator: ~":where(hr)";
-@separator-light: ~".separator-light";
+@separator-light: ~":where(.separator-light)";
-@separator-heavy: ~".separator-heavy";
+@separator-heavy: ~":where(.separator-heavy)";
 
-@image: ~"img";
+@image: ~":where(img)";
-@image-limit-half: ~".image-limit-half";
+@image-limit-half: ~":where(.image-limit-half)";
-@image-limit-quarter: ~".image-limit-quarter";
+@image-limit-quarter: ~":where(.image-limit-quarter)";
-@figure: ~"figure";
+@figure: ~":where(figure)";
-@figure-caption: ~"figcaption";
+@figure-caption: ~":where(figcaption)";
 
-@table: ~"table";
+@table: ~":where(table)";
-@table-caption: ~"caption";
+@table-caption: ~":where(caption)";
-@table-caption-top: ~".table-caption-top";
+@table-caption-top: ~":where(.table-caption-top)";
-@table-caption-bottom: ~".table-caption-bottom";
+@table-caption-bottom: ~":where(.table-caption-bottom)";
-@table-header: ~"thead";
+@table-header: ~":where(thead)";
-@table-body: ~"tbody";
+@table-body: ~":where(tbody)";
-@table-footer: ~"tfoot";
+@table-footer: ~":where(tfoot)";
-@table-row: ~"tr";
+@table-row: ~":where(tr)";
-@table-head: ~"th";
+@table-head: ~":where(th)";
-@table-data: ~"td";
+@table-data: ~":where(td)";
 
-@list-unordered: ~"ul";
+@list-unordered: ~":where(ul)";
-@list-ordered: ~"ol";
+@list-ordered: ~":where(ol)";
 
-@glossary-term: ~"dt";
+@glossary-term: ~":where(dt)";
-@glossary-description: ~"dd";
+@glossary-description: ~":where(dd)";
-@glossary-details: ~"details";
+@glossary-details: ~":where(details)";
-@glossary-summary: ~"summary";
+@glossary-summary: ~":where(summary)";
 
-@modifier-fade: ~".fade";
+@modifier-fade: ~":where(.fade)";
-@modifier-mark: ~".mark";
+@modifier-mark: ~":where(mark, .mark)";
-@element-mark: ~"mark";
+@modifier-todo: ~":where(.todo)";
-@modifier-todo: ~".todo";
+@property-disabled: ~":where([disabled])";
-@property-disabled: ~"[disabled]";
+@modifier-red: ~":where(.red)";
-@modifier-red: ~".red";
+@modifier-yellow: ~":where(.yellow)";
-@modifier-yellow: ~".yellow";
+@modifier-green: ~":where(.green)";
-@modifier-green: ~".green";
+@modifier-cyan: ~":where(.cyan)";
-@modifier-cyan: ~".cyan";
+@modifier-blue: ~":where(.blue)";
-@modifier-blue: ~".blue";
+@modifier-magenta: ~":where(.magenta)";
-@modifier-magenta: ~".magenta";
 
-@input: ~"input, textarea, select, button";
+@input: ~":where(input, textarea, select, button)";
-@input-field: ~'input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"]';
+@input-field: ~':where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"])';
-@input-area: ~"textarea";
+@input-area: ~":where(textarea)";
-@input-select: ~"select:not([multiple])";
+@input-select: ~":where(select:not([multiple]))";
-@input-multiselect: ~"select[multiple]";
+@input-multiselect: ~":where(select[multiple])";
-@input-radio: ~'input[type="radio"]';
+@input-radio: ~':where(input[type="radio"])';
-@input-checkbox: ~'input[type="checkbox"]';
+@input-checkbox: ~':where(input[type="checkbox"])';
-@input-color: ~'input[type="color"]';
+@input-color: ~':where(input[type="color"])';
-@input-file: ~'input[type="file"]';
+@input-file: ~':where(input[type="file"])';
-@input-range: ~'input[type="range"]';
+@input-range: ~':where(input[type="range"])';
-@input-button: ~'input[type="button"], button';
+@input-button: ~':where(input[type="button"], button)';
 
-@form-flex: ~'.form-flex';
+@form-flex: ~':where(.form-flex)';
-@form-flex-content: ~':is(.form-flex-content, p)';
+@form-flex-content: ~':where(.form-flex-content, p)';
-@form-flex-choice: ~':is(.form-flex-choice, label)';
+@form-flex-choice: ~':where(.form-flex-choice, label)';
 
-@text-anchor: ~"a";
+@text-anchor: ~":where(a)";
-@text-idiomatic: ~"i";
+@text-idiomatic: ~":where(i)";
-@text-emphasis: ~"em";
+@text-emphasis: ~":where(em)";
-@text-attention: ~"b";
+@text-attention: ~":where(b)";
-@text-strong: ~"strong";
+@text-strong: ~":where(strong)";
-@text-annotation: ~"u";
+@text-annotation: ~":where(u)";
-@text-strike: ~"s";
+@text-strike: ~":where(s)";
-@text-inserted: ~"ins";
+@text-inserted: ~":where(ins)";
-@text-deleted: ~"del";
+@text-deleted: ~":where(del)";
-@text-preformatted: ~"pre";
+@text-preformatted: ~":where(pre)";
-@text-code: ~"code";
+@text-code: ~":where(code)";
-@text-input: ~"kbd";
+@text-input: ~":where(kbd)";
-@text-output: ~"samp";
+@text-output: ~":where(samp)";
-@text-variable: ~"var";
+@text-variable: ~":where(var)";
-@text-quote: ~"q";
+@text-quote: ~":where(q)";
-@text-citation: ~"cite";
+@text-citation: ~":where(cite)";
-@text-definition: ~"dfn";
+@text-definition: ~":where(dfn)";
-@text-abbreviation: ~"abbr";
+@text-abbreviation: ~":where(abbr)";
-@text-ruby: ~"ruby";
+@text-ruby: ~":where(ruby)";
-@text-ruby-annotation: ~"rt";
+@text-ruby-annotation: ~":where(rt)";
 
-@animation-rainbow: ~".rainbow";
+@animation-rainbow: ~":where(.rainbow)";

yarn.lock

@@ -272,6 +272,11 @@ accepts@^1.3.5:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+  integrity sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==
+
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -358,6 +363,14 @@ chokidar@^3.4.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+clean-css@^3.0.1:
+  version "3.4.28"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-3.4.28.tgz#bf1945e82fc808f55695e6ddeaec01400efd03ff"
+  integrity sha512-aTWyttSdI2mYi07kWqHi24NUU9YlELFKGOAgFzZjDN1064DMAOy2FBuoyGmkKRlXkbpXd0EVHmiVkbKhKoirTw==
+  dependencies:
+    commander "2.8.x"
+    source-map "0.4.x"
+
 clone@^2.1.2:
   version "2.1.2"
   resolved "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
@@ -400,6 +413,13 @@ command-line-usage@^6.1.1:
     table-layout "^1.0.2"
     typical "^5.2.0"
 
+commander@2.8.x:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
+  integrity sha512-+pJLBFVk+9ZZdlAOB5WuIElVPPth47hILFkmGym57aq8kwxsowvByvB0DHs1vQAhyMZzdcpTtF0VDKGkSDR4ZQ==
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
 content-disposition@~0.5.2:
   version "0.5.4"
   resolved "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
@@ -574,6 +594,11 @@ graceful-fs@^4.1.2:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+  integrity sha512-8tLu60LgxF6XpdbK8OW3FA+IfTNBn1ZHGHKF4KQbEeSkajYw5PlYJcKluntgegDPTg8UkHjpet1T82vk6TQ68w==
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -809,6 +834,13 @@ koa@^2.13.0:
     type-is "^1.6.16"
     vary "^1.1.2"
 
+less-plugin-clean-css@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/less-plugin-clean-css/-/less-plugin-clean-css-1.5.1.tgz#cc57af7aa3398957e56decebe63cb60c23429703"
+  integrity sha512-Pc68AFHAEJO3aAoRvnUTW5iAiAv6y+TQsWLTTwVNqjiDno6xCvxz1AtfQl7Y0MZSpHPalFajM1EU4RB5UVINpw==
+  dependencies:
+    clean-css "^3.0.1"
+
 less@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/less/-/less-4.1.3.tgz#175be9ddcbf9b250173e0a00b4d6920a5b770246"
@@ -1067,6 +1099,13 @@ setprototypeof@1.2.0:
   resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
+source-map@0.4.x:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  integrity sha512-Y8nIfcb1s/7DcobUz1yOO1GSp7gyL+D9zLHDehT7iRESqGSxjJ448Sg7rvfgsRJCnKLdSl11uGf0s9X80cH0/A==
+  dependencies:
+    amdefine ">=0.0.4"
+
 source-map@~0.6.0:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"