I might have forgotten to commit the new compiled stylesheets

dist/base.module.css

@@ -2,7 +2,7 @@
  * Bluelib Base
  * by <me@steffo.eu>
  */
-.bluelib {
+:where(.bluelib) {
   --bhsl-current-hue: var(--bhsl-foreground-hue);
   --bhsl-current-saturation: var(--bhsl-foreground-saturation);
   --bhsl-current-lightness: var(--bhsl-foreground-lightness);
@@ -16,8 +16,8 @@
   line-height: var(--bfont-text-height);
   font-family: var(--bfont-text-family);
 }
-.bluelib,
+:where(.bluelib),
-.bluelib * {
+:where(.bluelib) * {
   margin: 0;
   padding: 0;
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
@@ -26,57 +26,57 @@
   border-style: solid;
   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));
 }
-.bluelib,
+:where(.bluelib),
-.bluelib *,
+:where(.bluelib) *,
-.bluelib::before,
+:where(.bluelib)::before,
-.bluelib *::before,
+:where(.bluelib) *::before,
-.bluelib::after,
+:where(.bluelib)::after,
-.bluelib *::after {
+:where(.bluelib) *::after {
   box-sizing: border-box;
 }
-.bluelib:focus-visible,
+:where(.bluelib):focus-visible,
-.bluelib *:focus-visible {
+:where(.bluelib) *: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);
 }
-.bluelib .page-footer {
+:where(.bluelib) .page-footer {
   margin: 1rem 0;
   text-align: center;
   font-size: x-small;
 }
-.bluelib .float-top {
+:where(.bluelib) .float-top {
   margin-bottom: auto;
 }
-.bluelib .float-right {
+:where(.bluelib) .float-right {
   margin-left: auto;
 }
-.bluelib .float-bottom {
+:where(.bluelib) .float-bottom {
   margin-top: auto;
 }
-.bluelib .float-left {
+:where(.bluelib) .float-left {
   margin-right: auto;
 }
-.bluelib .float-hcenter {
+:where(.bluelib) .float-hcenter {
   margin-left: auto;
   margin-right: auto;
 }
-.bluelib .float-vcenter {
+:where(.bluelib) .float-vcenter {
   margin-top: auto;
   margin-bottom: auto;
 }
-.bluelib .header-1 {
+:where(.bluelib) .header-1 {
   font-size: 2.5em;
 }
-.bluelib .header-2 {
+:where(.bluelib) .header-2 {
   font-size: 1.75em;
 }
-.bluelib .header-1,
+:where(.bluelib) .header-1,
-.bluelib .header-2,
+:where(.bluelib) .header-2,
-.bluelib .header-3,
+:where(.bluelib) .header-3,
-.bluelib .header-4,
+:where(.bluelib) .header-4,
-.bluelib .header-5,
+:where(.bluelib) .header-5,
-.bluelib .header-6 {
+:where(.bluelib) .header-6 {
   text-align: center;
   --bhsl-current-hue: var(--bhsl-primary-hue);
   --bhsl-current-saturation: var(--bhsl-primary-saturation);
@@ -88,7 +88,7 @@
   line-height: var(--bfont-header-height);
   font-family: var(--bfont-header-family);
 }
-.bluelib .panel {
+:where(.bluelib) .panel {
   padding-top: 8px;
   padding-right: 8px;
   padding-left: 8px;
@@ -101,40 +101,40 @@
   gap: 8px;
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
 }
-.bluelib .panel.border-top,
+:where(.bluelib) .panel.border-top,
-.bluelib .panel.panel-box {
+:where(.bluelib) .panel.panel-box {
   border-top-width: 2px;
   padding-top: 6px;
 }
-.bluelib .panel.border-right,
+:where(.bluelib) .panel.border-right,
-.bluelib .panel.panel-box {
+:where(.bluelib) .panel.panel-box {
   border-right-width: 2px;
   padding-right: 6px;
 }
-.bluelib .panel.border-left,
+:where(.bluelib) .panel.border-left,
-.bluelib .panel.panel-box,
+:where(.bluelib) .panel.panel-box,
-.bluelib .panel.panel-dialog {
+:where(.bluelib) .panel.panel-dialog {
   border-left-width: 2px;
   padding-left: 6px;
 }
-.bluelib .panel.border-bottom,
+:where(.bluelib) .panel.border-bottom,
-.bluelib .panel.panel-box {
+:where(.bluelib) .panel.panel-box {
   border-bottom-width: 2px;
   padding-bottom: 6px;
 }
-.bluelib .panel.panel-parenthesis {
+:where(.bluelib) .panel.panel-parenthesis {
   font-size: smaller;
 }
-.bluelib .chapter-0,
+:where(.bluelib) .chapter-0,
-.bluelib .chapter-1,
+:where(.bluelib) .chapter-1,
-.bluelib .chapter-2,
+:where(.bluelib) .chapter-2,
-.bluelib .chapter-3,
+:where(.bluelib) .chapter-3,
-.bluelib .chapter-4,
+:where(.bluelib) .chapter-4,
-.bluelib .chapter-5,
+:where(.bluelib) .chapter-5,
-.bluelib .chapter-6,
+:where(.bluelib) .chapter-6,
-.bluelib .chapter-7,
+:where(.bluelib) .chapter-7,
-.bluelib .chapter-8,
+:where(.bluelib) .chapter-8,
-.bluelib .chapter-9 {
+:where(.bluelib) .chapter-9 {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
@@ -143,145 +143,145 @@
   align-items: stretch;
   margin: 8px 0;
 }
-.bluelib .chapter-0 > *,
+:where(.bluelib) .chapter-0 > *,
-.bluelib .chapter-1 > *,
+:where(.bluelib) .chapter-1 > *,
-.bluelib .chapter-2 > *,
+:where(.bluelib) .chapter-2 > *,
-.bluelib .chapter-3 > *,
+:where(.bluelib) .chapter-3 > *,
-.bluelib .chapter-4 > *,
+:where(.bluelib) .chapter-4 > *,
-.bluelib .chapter-5 > *,
+:where(.bluelib) .chapter-5 > *,
-.bluelib .chapter-6 > *,
+:where(.bluelib) .chapter-6 > *,
-.bluelib .chapter-7 > *,
+:where(.bluelib) .chapter-7 > *,
-.bluelib .chapter-8 > *,
+:where(.bluelib) .chapter-8 > *,
-.bluelib .chapter-9 > * {
+:where(.bluelib) .chapter-9 > * {
   flex-grow: 1;
   flex-shrink: 0;
 }
-.bluelib .chapter-0 > .header-1,
+:where(.bluelib) .chapter-0 > .header-1,
-.bluelib .chapter-1 > .header-1,
+:where(.bluelib) .chapter-1 > .header-1,
-.bluelib .chapter-2 > .header-1,
+:where(.bluelib) .chapter-2 > .header-1,
-.bluelib .chapter-3 > .header-1,
+:where(.bluelib) .chapter-3 > .header-1,
-.bluelib .chapter-4 > .header-1,
+:where(.bluelib) .chapter-4 > .header-1,
-.bluelib .chapter-5 > .header-1,
+:where(.bluelib) .chapter-5 > .header-1,
-.bluelib .chapter-6 > .header-1,
+:where(.bluelib) .chapter-6 > .header-1,
-.bluelib .chapter-7 > .header-1,
+:where(.bluelib) .chapter-7 > .header-1,
-.bluelib .chapter-8 > .header-1,
+:where(.bluelib) .chapter-8 > .header-1,
-.bluelib .chapter-9 > .header-1,
+:where(.bluelib) .chapter-9 > .header-1,
-.bluelib .chapter-0 > .header-2,
+:where(.bluelib) .chapter-0 > .header-2,
-.bluelib .chapter-1 > .header-2,
+:where(.bluelib) .chapter-1 > .header-2,
-.bluelib .chapter-2 > .header-2,
+:where(.bluelib) .chapter-2 > .header-2,
-.bluelib .chapter-3 > .header-2,
+:where(.bluelib) .chapter-3 > .header-2,
-.bluelib .chapter-4 > .header-2,
+:where(.bluelib) .chapter-4 > .header-2,
-.bluelib .chapter-5 > .header-2,
+:where(.bluelib) .chapter-5 > .header-2,
-.bluelib .chapter-6 > .header-2,
+:where(.bluelib) .chapter-6 > .header-2,
-.bluelib .chapter-7 > .header-2,
+:where(.bluelib) .chapter-7 > .header-2,
-.bluelib .chapter-8 > .header-2,
+:where(.bluelib) .chapter-8 > .header-2,
-.bluelib .chapter-9 > .header-2,
+:where(.bluelib) .chapter-9 > .header-2,
-.bluelib .chapter-0 > .header-3,
+:where(.bluelib) .chapter-0 > .header-3,
-.bluelib .chapter-1 > .header-3,
+:where(.bluelib) .chapter-1 > .header-3,
-.bluelib .chapter-2 > .header-3,
+:where(.bluelib) .chapter-2 > .header-3,
-.bluelib .chapter-3 > .header-3,
+:where(.bluelib) .chapter-3 > .header-3,
-.bluelib .chapter-4 > .header-3,
+:where(.bluelib) .chapter-4 > .header-3,
-.bluelib .chapter-5 > .header-3,
+:where(.bluelib) .chapter-5 > .header-3,
-.bluelib .chapter-6 > .header-3,
+:where(.bluelib) .chapter-6 > .header-3,
-.bluelib .chapter-7 > .header-3,
+:where(.bluelib) .chapter-7 > .header-3,
-.bluelib .chapter-8 > .header-3,
+:where(.bluelib) .chapter-8 > .header-3,
-.bluelib .chapter-9 > .header-3,
+:where(.bluelib) .chapter-9 > .header-3,
-.bluelib .chapter-0 > .header-4,
+:where(.bluelib) .chapter-0 > .header-4,
-.bluelib .chapter-1 > .header-4,
+:where(.bluelib) .chapter-1 > .header-4,
-.bluelib .chapter-2 > .header-4,
+:where(.bluelib) .chapter-2 > .header-4,
-.bluelib .chapter-3 > .header-4,
+:where(.bluelib) .chapter-3 > .header-4,
-.bluelib .chapter-4 > .header-4,
+:where(.bluelib) .chapter-4 > .header-4,
-.bluelib .chapter-5 > .header-4,
+:where(.bluelib) .chapter-5 > .header-4,
-.bluelib .chapter-6 > .header-4,
+:where(.bluelib) .chapter-6 > .header-4,
-.bluelib .chapter-7 > .header-4,
+:where(.bluelib) .chapter-7 > .header-4,
-.bluelib .chapter-8 > .header-4,
+:where(.bluelib) .chapter-8 > .header-4,
-.bluelib .chapter-9 > .header-4,
+:where(.bluelib) .chapter-9 > .header-4,
-.bluelib .chapter-0 > .header-5,
+:where(.bluelib) .chapter-0 > .header-5,
-.bluelib .chapter-1 > .header-5,
+:where(.bluelib) .chapter-1 > .header-5,
-.bluelib .chapter-2 > .header-5,
+:where(.bluelib) .chapter-2 > .header-5,
-.bluelib .chapter-3 > .header-5,
+:where(.bluelib) .chapter-3 > .header-5,
-.bluelib .chapter-4 > .header-5,
+:where(.bluelib) .chapter-4 > .header-5,
-.bluelib .chapter-5 > .header-5,
+:where(.bluelib) .chapter-5 > .header-5,
-.bluelib .chapter-6 > .header-5,
+:where(.bluelib) .chapter-6 > .header-5,
-.bluelib .chapter-7 > .header-5,
+:where(.bluelib) .chapter-7 > .header-5,
-.bluelib .chapter-8 > .header-5,
+:where(.bluelib) .chapter-8 > .header-5,
-.bluelib .chapter-9 > .header-5,
+:where(.bluelib) .chapter-9 > .header-5,
-.bluelib .chapter-0 > .header-6,
+:where(.bluelib) .chapter-0 > .header-6,
-.bluelib .chapter-1 > .header-6,
+:where(.bluelib) .chapter-1 > .header-6,
-.bluelib .chapter-2 > .header-6,
+:where(.bluelib) .chapter-2 > .header-6,
-.bluelib .chapter-3 > .header-6,
+:where(.bluelib) .chapter-3 > .header-6,
-.bluelib .chapter-4 > .header-6,
+:where(.bluelib) .chapter-4 > .header-6,
-.bluelib .chapter-5 > .header-6,
+:where(.bluelib) .chapter-5 > .header-6,
-.bluelib .chapter-6 > .header-6,
+:where(.bluelib) .chapter-6 > .header-6,
-.bluelib .chapter-7 > .header-6,
+:where(.bluelib) .chapter-7 > .header-6,
-.bluelib .chapter-8 > .header-6,
+:where(.bluelib) .chapter-8 > .header-6,
-.bluelib .chapter-9 > .header-6 {
+:where(.bluelib) .chapter-9 > .header-6 {
   flex-basis: 100%;
   margin-top: 1.2em;
 }
-.bluelib .chapter-0 {
+:where(.bluelib) .chapter-0 {
   flex-wrap: nowrap;
 }
-.bluelib .chapter-0 > * {
+:where(.bluelib) .chapter-0 > * {
   flex-shrink: 1;
 }
-.bluelib .chapter-1 > * {
+:where(.bluelib) .chapter-1 > * {
   flex-basis: calc(100% / 2);
 }
-.bluelib .chapter-2 > * {
+:where(.bluelib) .chapter-2 > * {
   flex-basis: calc(100% / 3);
 }
-.bluelib .chapter-3 > * {
+:where(.bluelib) .chapter-3 > * {
   flex-basis: calc(100% / 4);
 }
-.bluelib .chapter-4 > * {
+:where(.bluelib) .chapter-4 > * {
   flex-basis: calc(100% / 5);
 }
-.bluelib .chapter-5 > * {
+:where(.bluelib) .chapter-5 > * {
   flex-basis: calc(100% / 6);
 }
-.bluelib .chapter-6 > * {
+:where(.bluelib) .chapter-6 > * {
   flex-basis: calc(100% / 7);
 }
-.bluelib .chapter-7 > * {
+:where(.bluelib) .chapter-7 > * {
   flex-basis: calc(100% / 8);
 }
-.bluelib .chapter-8 > * {
+:where(.bluelib) .chapter-8 > * {
   flex-basis: calc(100% / 9);
 }
-.bluelib .chapter-9 > * {
+:where(.bluelib) .chapter-9 > * {
   flex-basis: calc(100% / 10);
 }
-.bluelib .separator {
+:where(.bluelib) .separator {
   border-width: 1px;
   border-style: dashed;
 }
-.bluelib .separator-light {
+:where(.bluelib) .separator-light {
   border-style: dotted;
 }
-.bluelib .separator-heavy {
+:where(.bluelib) .separator-heavy {
   border-style: solid;
 }
-.bluelib .image {
+:where(.bluelib) .image {
   display: block;
   max-width: 100%;
   object-fit: contain;
 }
-.bluelib .image-limit-half {
+:where(.bluelib) .image-limit-half {
   max-height: max(28.2vw, 50vh);
 }
-.bluelib .image-limit-quarter {
+:where(.bluelib) .image-limit-quarter {
   max-height: max(14.1vw, 25vh);
 }
-.bluelib .table {
+:where(.bluelib) .table {
   border-collapse: collapse;
 }
-.bluelib .table .table-head,
+:where(.bluelib) .table .table-head,
-.bluelib .table .table-data {
+:where(.bluelib) .table .table-data {
   padding: 3px 7px;
   border-width: 1px;
 }
-.bluelib .table .table-caption {
+:where(.bluelib) .table .table-caption {
   border-width: 1px;
   font-style: var(--bfont-caption-style);
   font-variant: var(--bfont-caption-variant);
@@ -290,77 +290,77 @@
   line-height: var(--bfont-caption-height);
   font-family: var(--bfont-caption-family);
 }
-.bluelib .table .table-caption.table-caption-top {
+:where(.bluelib) .table .table-caption.table-caption-top {
   caption-side: top;
   border-bottom-width: 0;
 }
-.bluelib .table .table-caption.table-caption-bottom {
+:where(.bluelib) .table .table-caption.table-caption-bottom {
   caption-side: bottom;
   border-top-width: 0;
 }
-.bluelib .table.panel {
+:where(.bluelib) .table.panel {
   display: table;
 }
-.bluelib .table.panel .table-head,
+:where(.bluelib) .table.panel .table-head,
-.bluelib .table.panel .table-data {
+:where(.bluelib) .table.panel .table-data {
   padding: 8px;
 }
-.bluelib .table.panel .table-caption {
+:where(.bluelib) .table.panel .table-caption {
   text-align: inherit;
   background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
   padding: 8px;
 }
-.bluelib .table.panel .table-caption * {
+:where(.bluelib) .table.panel .table-caption * {
   margin-top: 8px;
   margin-bottom: 8px;
 }
-.bluelib .table.panel .table-caption *:first-child {
+:where(.bluelib) .table.panel .table-caption *:first-child {
   margin-top: 0;
 }
-.bluelib .table.panel .table-caption *:last-child {
+:where(.bluelib) .table.panel .table-caption *:last-child {
   margin-bottom: 0;
 }
-.bluelib .table.panel-box .table-row {
+:where(.bluelib) .table.panel-box .table-row {
   border-width: 1px;
 }
-.bluelib .table.panel-box .table-head,
+:where(.bluelib) .table.panel-box .table-head,
-.bluelib .table.panel-box .table-data {
+:where(.bluelib) .table.panel-box .table-data {
   border-width: 1px;
   padding: 7px;
 }
-.bluelib .table.panel-box .table-caption {
+:where(.bluelib) .table.panel-box .table-caption {
   border-width: 2px;
   padding: 6px;
 }
-.bluelib .table.panel-box .table-caption.table-caption-top {
+:where(.bluelib) .table.panel-box .table-caption.table-caption-top {
   border-bottom-width: 0;
 }
-.bluelib .table.panel-box .table-caption.table-caption-bottom {
+:where(.bluelib) .table.panel-box .table-caption.table-caption-bottom {
   border-top-width: 0;
 }
-.bluelib .table.panel-dialog .table-header > .table-row {
+:where(.bluelib) .table.panel-dialog .table-header > .table-row {
   border-bottom-width: 1px;
 }
-.bluelib .table.panel-dialog .table-body > .table-row {
+:where(.bluelib) .table.panel-dialog .table-body > .table-row {
   border-width: 0;
 }
-.bluelib .table.panel-dialog .table-footer > .table-row {
+:where(.bluelib) .table.panel-dialog .table-footer > .table-row {
   border-top-width: 1px;
 }
-.bluelib .table.panel-dialog .table-head,
+:where(.bluelib) .table.panel-dialog .table-head,
-.bluelib .table.panel-dialog .table-data {
+:where(.bluelib) .table.panel-dialog .table-data {
   border-width: 0 0 0 1px;
   padding: 8px 8px 8px 7px;
 }
-.bluelib .table.panel-dialog .table-caption {
+:where(.bluelib) .table.panel-dialog .table-caption {
   border-width: 0 0 0 2px;
   padding: 8px 8px 8px 6px;
 }
-.bluelib .panel > .list-unordered,
+:where(.bluelib) .panel > .list-unordered,
-.bluelib .panel > .list-ordered {
+:where(.bluelib) .panel > .list-ordered {
   margin-left: 6ex;
 }
-.bluelib .glossary-term {
+:where(.bluelib) .glossary-term {
   margin-top: 0.5em;
   padding: 0.2em 0;
   --bhsl-current-hue: var(--bhsl-primary-hue);
@@ -373,14 +373,14 @@
   line-height: var(--bfont-term-height);
   font-family: var(--bfont-term-family);
 }
-.bluelib .glossary-description {
+:where(.bluelib) .glossary-description {
   margin-left: 4.5ex;
   margin-bottom: 0.5em;
 }
-.bluelib .glossary-details {
+:where(.bluelib) .glossary-details {
   margin-left: 4.5ex;
 }
-.bluelib .glossary-summary {
+:where(.bluelib) .glossary-summary {
   cursor: pointer;
   margin-left: -4ex;
   padding: 0.2em 0;
@@ -392,11 +392,11 @@
   font-family: var(--bfont-summary-family);
   user-select: none;
 }
-.bluelib .modifier-fade {
+:where(.bluelib) .modifier-fade {
   opacity: 0.3;
 }
-.bluelib .modifier-mark,
+:where(.bluelib) .modifier-mark,
-.bluelib .element-mark {
+:where(.bluelib) .element-mark {
   font-style: var(--bfont-mark-style);
   font-variant: var(--bfont-mark-variant);
   font-weight: var(--bfont-mark-weight);
@@ -408,125 +408,126 @@
   --bhsl-current-saturation: var(--bhsl-mark-foreground-saturation);
   --bhsl-current-lightness: var(--bhsl-mark-foreground-lightness);
 }
-.bluelib .modifier-mark .modifier-mark,
+:where(.bluelib) .modifier-mark .modifier-mark,
-.bluelib .element-mark .modifier-mark,
+:where(.bluelib) .element-mark .modifier-mark,
-.bluelib .modifier-mark .element-mark,
+:where(.bluelib) .modifier-mark .element-mark,
-.bluelib .element-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);
 }
-.bluelib .modifier-mark .modifier-mark .modifier-mark,
+:where(.bluelib) .modifier-mark .modifier-mark .modifier-mark,
-.bluelib .element-mark .modifier-mark .modifier-mark,
+:where(.bluelib) .element-mark .modifier-mark .modifier-mark,
-.bluelib .modifier-mark .element-mark .modifier-mark,
+:where(.bluelib) .modifier-mark .element-mark .modifier-mark,
-.bluelib .element-mark .element-mark .modifier-mark,
+:where(.bluelib) .element-mark .element-mark .modifier-mark,
-.bluelib .modifier-mark .modifier-mark .element-mark,
+:where(.bluelib) .modifier-mark .modifier-mark .element-mark,
-.bluelib .element-mark .modifier-mark .element-mark,
+:where(.bluelib) .element-mark .modifier-mark .element-mark,
-.bluelib .modifier-mark .element-mark .element-mark,
+:where(.bluelib) .modifier-mark .element-mark .element-mark,
-.bluelib .element-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);
 }
-.bluelib .modifier-todo {
+:where(.bluelib) .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);
 }
-.bluelib .modifier-todo,
+:where(.bluelib) .modifier-todo,
-.bluelib .modifier-todo .panel {
+:where(.bluelib) .modifier-todo .panel {
   border-style: dashed;
   background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
 }
-.bluelib .property-disabled {
+:where(.bluelib) .property-disabled {
   border-style: dashed;
   cursor: not-allowed;
 }
-.bluelib .modifier-red {
+:where(.bluelib) .modifier-red {
   --bhsl-current-hue: var(--bhsl-red-hue);
   --bhsl-current-saturation: var(--bhsl-red-saturation);
   --bhsl-current-lightness: var(--bhsl-red-lightness);
 }
-.bluelib .modifier-yellow {
+:where(.bluelib) .modifier-yellow {
   --bhsl-current-hue: var(--bhsl-yellow-hue);
   --bhsl-current-saturation: var(--bhsl-yellow-saturation);
   --bhsl-current-lightness: var(--bhsl-yellow-lightness);
 }
-.bluelib .modifier-green {
+:where(.bluelib) .modifier-green {
   --bhsl-current-hue: var(--bhsl-green-hue);
   --bhsl-current-saturation: var(--bhsl-green-saturation);
   --bhsl-current-lightness: var(--bhsl-green-lightness);
 }
-.bluelib .modifier-cyan {
+:where(.bluelib) .modifier-cyan {
   --bhsl-current-hue: var(--bhsl-cyan-hue);
   --bhsl-current-saturation: var(--bhsl-cyan-saturation);
   --bhsl-current-lightness: var(--bhsl-cyan-lightness);
 }
-.bluelib .modifier-blue {
+:where(.bluelib) .modifier-blue {
   --bhsl-current-hue: var(--bhsl-blue-hue);
   --bhsl-current-saturation: var(--bhsl-blue-saturation);
   --bhsl-current-lightness: var(--bhsl-blue-lightness);
 }
-.bluelib .modifier-magenta {
+:where(.bluelib) .modifier-magenta {
   --bhsl-current-hue: var(--bhsl-magenta-hue);
   --bhsl-current-saturation: var(--bhsl-magenta-saturation);
   --bhsl-current-lightness: var(--bhsl-magenta-lightness);
 }
-.bluelib .input {
+:where(.bluelib) .input {
   font: inherit;
   cursor: pointer;
   background-color: transparent;
   padding: 0.125em 0.75ex;
   vertical-align: middle;
+  min-width: 0;
   border-width: 0;
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4);
 }
-.bluelib .input::placeholder {
+:where(.bluelib) .input::placeholder {
   opacity: 1;
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4);
 }
-.bluelib .input:hover:not(.property-disabled) {
+:where(.bluelib) .input:hover:not(.property-disabled) {
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-.bluelib .input:hover:not(.property-disabled)::placeholder {
+:where(.bluelib) .input:hover:not(.property-disabled)::placeholder {
   color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
 }
-.bluelib .input:active:not(.property-disabled),
+:where(.bluelib) .input:active:not(.property-disabled),
-.bluelib .input:focus:not(.property-disabled) {
+:where(.bluelib) .input:focus:not(.property-disabled) {
   border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-.bluelib .input-area {
+:where(.bluelib) .input-area {
   resize: vertical;
 }
-.bluelib .input-field,
+:where(.bluelib) .input-field,
-.bluelib .input-select {
+:where(.bluelib) .input-select {
   border-bottom-width: 2px;
 }
-.bluelib .input-area,
+:where(.bluelib) .input-area,
-.bluelib .input-multiselect {
+:where(.bluelib) .input-multiselect {
   border-left-width: 2px;
 }
-.bluelib .input-field:not(.property-disabled),
+:where(.bluelib) .input-field:not(.property-disabled),
-.bluelib .input-area:not(.property-disabled) {
+:where(.bluelib) .input-area:not(.property-disabled) {
   cursor: text;
 }
-.bluelib .input-select:not(.property-disabled),
+:where(.bluelib) .input-select:not(.property-disabled),
-.bluelib .input-multiselect:not(.property-disabled) {
+:where(.bluelib) .input-multiselect:not(.property-disabled) {
   cursor: vertical-text;
 }
-.bluelib .input-range:not(.property-disabled) {
+:where(.bluelib) .input-range:not(.property-disabled) {
   cursor: ew-resize;
 }
-.bluelib .input-radio:not(.property-disabled),
+:where(.bluelib) .input-radio:not(.property-disabled),
-.bluelib .input-checkbox:not(.property-disabled),
+:where(.bluelib) .input-checkbox:not(.property-disabled),
-.bluelib .input-button:not(.property-disabled),
+:where(.bluelib) .input-button:not(.property-disabled),
-.bluelib .input-color:not(.property-disabled) {
+:where(.bluelib) .input-color:not(.property-disabled) {
   cursor: pointer;
 }
-.bluelib .input-select optgroup,
+:where(.bluelib) .input-select optgroup,
-.bluelib .input-multiselect optgroup {
+:where(.bluelib) .input-multiselect optgroup {
   padding-bottom: 0.25em;
   font-style: var(--bfont-header-style);
   font-variant: var(--bfont-header-variant);
@@ -535,12 +536,12 @@
   line-height: var(--bfont-header-height);
   font-family: var(--bfont-header-family);
 }
-.bluelib .input-select optgroup option,
+:where(.bluelib) .input-select optgroup option,
-.bluelib .input-multiselect optgroup option {
+:where(.bluelib) .input-multiselect optgroup option {
   padding: 0.125em 0 0.125em 2ex;
 }
-.bluelib .input-select option,
+:where(.bluelib) .input-select option,
-.bluelib .input-multiselect option {
+:where(.bluelib) .input-multiselect option {
   font-style: var(--bfont-text-style);
   font-variant: var(--bfont-text-variant);
   font-weight: var(--bfont-text-weight);
@@ -548,8 +549,8 @@
   line-height: var(--bfont-text-height);
   font-family: var(--bfont-text-family);
 }
-.bluelib .input-radio,
+:where(.bluelib) .input-radio,
-.bluelib .input-checkbox {
+:where(.bluelib) .input-checkbox {
   appearance: none;
   width: 1em;
   height: 1em;
@@ -559,24 +560,24 @@
   justify-content: center;
   align-items: center;
 }
-.bluelib .input-radio::before,
+:where(.bluelib) .input-radio::before,
-.bluelib .input-checkbox::before {
+:where(.bluelib) .input-checkbox::before {
   display: block;
   content: "";
   width: 100%;
   height: 100%;
 }
-.bluelib .input-radio:checked::before,
+:where(.bluelib) .input-radio:checked::before,
-.bluelib .input-checkbox:checked::before {
+:where(.bluelib) .input-checkbox:checked::before {
   background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
 }
-.bluelib .input-radio {
+:where(.bluelib) .input-radio {
   border-radius: 100%;
 }
-.bluelib .input-radio::before {
+:where(.bluelib) .input-radio::before {
   border-radius: 100%;
 }
-.bluelib .input-range {
+:where(.bluelib) .input-range {
   padding: 0;
   /*
         appearance: none;
@@ -603,47 +604,49 @@
         }
          */
 }
-.bluelib .input-button {
+:where(.bluelib) .input-button {
   border-width: 2px;
   border-style: outset;
 }
-.bluelib .input-button:active {
+:where(.bluelib) .input-button:active {
   border-style: inset;
 }
-.bluelib .input-file,
+:where(.bluelib) .input-file,
-.bluelib .input-color {
+:where(.bluelib) .input-color {
   padding: 0;
 }
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
-  .bluelib .input-field::-webkit-calendar-picker-indicator {
+  :where(.bluelib) .input-field::-webkit-calendar-picker-indicator {
     filter: invert(calc(calc(var(--bhsl-current-lightness) - 50%) * 1000));
   }
-  .bluelib .input-select optgroup,
+  :where(.bluelib) .input-select optgroup,
-  .bluelib .input-select option {
+  :where(.bluelib) .input-select option {
     background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
   }
-  .bluelib .input-select optgroup::before,
+  :where(.bluelib) .input-select optgroup::before,
-  .bluelib .input-select option::before {
+  :where(.bluelib) .input-select option::before {
     content: "";
   }
 }
-.bluelib .form-flex {
+:where(.bluelib) .form-flex {
   display: flex;
   flex-direction: column;
   justify-content: stretch;
 }
-.bluelib .form-flex > .element-paragraph {
+:where(.bluelib) .form-flex > .form-flex-content {
   margin: 0.5em 0;
 }
-.bluelib .form-flex > .element-label {
+:where(.bluelib) .form-flex > .form-flex-choice {
   display: flex;
   gap: 1ex;
+  min-height: 1.675em;
 }
-.bluelib .form-flex > .element-label > *:first-child,
+:where(.bluelib) .form-flex > .form-flex-choice > *:first-child,
-.bluelib .form-flex > .element-label > *:last-child {
+:where(.bluelib) .form-flex > .form-flex-choice > *:last-child {
   margin: auto 0;
   flex-basis: 15%;
   flex-grow: 0;
+  flex-shrink: 0;
   font-style: var(--bfont-label-style);
   font-variant: var(--bfont-label-variant);
   font-weight: var(--bfont-label-weight);
@@ -654,27 +657,28 @@
   --bhsl-current-saturation: var(--bhsl-primary-saturation);
   --bhsl-current-lightness: var(--bhsl-primary-lightness);
 }
-.bluelib .form-flex > .element-label > * {
+:where(.bluelib) .form-flex > .form-flex-choice > * {
   flex-grow: 1;
   display: flex;
-  justify-content: start;
+  justify-content: space-between;
-  align-items: center;
+  flex-wrap: wrap;
-  gap: 4px;
+  align-items: stretch;
+  gap: 1ex;
 }
-.bluelib .form-flex > .element-label > *:first-child {
+:where(.bluelib) .form-flex > .form-flex-choice > *:first-child {
   text-align: right;
   display: block;
 }
-.bluelib .form-flex > .element-label > *:last-child {
+:where(.bluelib) .form-flex > .form-flex-choice > *:last-child {
   text-align: left;
   display: block;
 }
-.bluelib .text-anchor {
+:where(.bluelib) .text-anchor {
   --bhsl-current-hue: var(--bhsl-link-hue);
   --bhsl-current-saturation: var(--bhsl-link-saturation);
   --bhsl-current-lightness: var(--bhsl-link-lightness);
 }
-.bluelib .text-idiomatic {
+:where(.bluelib) .text-idiomatic {
   font-style: var(--bfont-idiomatic-style);
   font-variant: var(--bfont-idiomatic-variant);
   font-weight: var(--bfont-idiomatic-weight);
@@ -682,7 +686,7 @@
   line-height: var(--bfont-idiomatic-height);
   font-family: var(--bfont-idiomatic-family);
 }
-.bluelib .text-emphasis {
+:where(.bluelib) .text-emphasis {
   font-style: var(--bfont-emphasis-style);
   font-variant: var(--bfont-emphasis-variant);
   font-weight: var(--bfont-emphasis-weight);
@@ -690,7 +694,7 @@
   line-height: var(--bfont-emphasis-height);
   font-family: var(--bfont-emphasis-family);
 }
-.bluelib .text-attention {
+:where(.bluelib) .text-attention {
   font-style: var(--bfont-attention-style);
   font-variant: var(--bfont-attention-variant);
   font-weight: var(--bfont-attention-weight);
@@ -698,7 +702,7 @@
   line-height: var(--bfont-attention-height);
   font-family: var(--bfont-attention-family);
 }
-.bluelib .text-strong {
+:where(.bluelib) .text-strong {
   font-style: var(--bfont-strong-style);
   font-variant: var(--bfont-strong-variant);
   font-weight: var(--bfont-strong-weight);
@@ -706,20 +710,20 @@
   line-height: var(--bfont-strong-height);
   font-family: var(--bfont-strong-family);
 }
-.bluelib .text-inserted {
+:where(.bluelib) .text-inserted {
   --bhsl-current-hue: var(--bhsl-inserted-hue);
   --bhsl-current-saturation: var(--bhsl-inserted-saturation);
   --bhsl-current-lightness: var(--bhsl-inserted-lightness);
 }
-.bluelib .text-deleted {
+:where(.bluelib) .text-deleted {
   --bhsl-current-hue: var(--bhsl-deleted-hue);
   --bhsl-current-saturation: var(--bhsl-deleted-saturation);
   --bhsl-current-lightness: var(--bhsl-deleted-lightness);
 }
-.bluelib .text-code,
+:where(.bluelib) .text-code,
-.bluelib .text-preformatted,
+:where(.bluelib) .text-preformatted,
-.bluelib .text-input,
+:where(.bluelib) .text-input,
-.bluelib .text-output {
+:where(.bluelib) .text-output {
   font-style: var(--bfont-code-style);
   font-variant: var(--bfont-code-variant);
   font-weight: var(--bfont-code-weight);
@@ -727,20 +731,20 @@
   line-height: var(--bfont-code-height);
   font-family: var(--bfont-code-family);
 }
-.bluelib .text-preformatted {
+:where(.bluelib) .text-preformatted {
   overflow-x: scroll;
 }
-.bluelib .text-input,
+:where(.bluelib) .text-input,
-.bluelib .text-output {
+:where(.bluelib) .text-output {
   padding: 0 0.25ex;
 }
-.bluelib .text-input {
+:where(.bluelib) .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);
 }
-.bluelib .text-input .text-input {
+:where(.bluelib) .text-input .text-input {
   font-style: var(--bfont-boldcode-style);
   font-variant: var(--bfont-boldcode-variant);
   font-weight: var(--bfont-boldcode-weight);
@@ -748,13 +752,13 @@
   line-height: var(--bfont-boldcode-height);
   font-family: var(--bfont-boldcode-family);
 }
-.bluelib .text-output {
+:where(.bluelib) .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);
 }
-.bluelib .text-output .text-output {
+:where(.bluelib) .text-output .text-output {
   font-style: var(--bfont-boldcode-style);
   font-variant: var(--bfont-boldcode-variant);
   font-weight: var(--bfont-boldcode-weight);
@@ -762,7 +766,7 @@
   line-height: var(--bfont-boldcode-height);
   font-family: var(--bfont-boldcode-family);
 }
-.bluelib .text-variable {
+:where(.bluelib) .text-variable {
   font-style: var(--bfont-variable-style);
   font-variant: var(--bfont-variable-variant);
   font-weight: var(--bfont-variable-weight);
@@ -770,7 +774,7 @@
   line-height: var(--bfont-variable-height);
   font-family: var(--bfont-variable-family);
 }
-.bluelib .text-citation {
+:where(.bluelib) .text-citation {
   font-style: var(--bfont-citation-style);
   font-variant: var(--bfont-citation-variant);
   font-weight: var(--bfont-citation-weight);
@@ -778,7 +782,7 @@
   line-height: var(--bfont-citation-height);
   font-family: var(--bfont-citation-family);
 }
-.bluelib .text-definition {
+:where(.bluelib) .text-definition {
   font-style: var(--bfont-term-style);
   font-variant: var(--bfont-term-variant);
   font-weight: var(--bfont-term-weight);
@@ -789,6 +793,6 @@
   --bhsl-current-saturation: var(--bhsl-primary-saturation);
   --bhsl-current-lightness: var(--bhsl-primary-lightness);
 }
-.bluelib .text-abbreviation {
+:where(.bluelib) .text-abbreviation {
   cursor: help;
 }

dist/classic.module.css

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

dist/classic.root.css

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

dist/colors-amber.module.css

@@ -3,7 +3,7 @@
  * by <lorenzo.balugani@gmail.com>
  * ported to v5 by <me@steffo.eu>
  */
-.bluelib {
+:where(.bluelib) {
   --bhsl-background-hue: 0deg;
   --bhsl-background-saturation: 8%;
   --bhsl-background-lightness: 14%;

dist/colors-amber.root.css

@@ -3,7 +3,7 @@
  * by <lorenzo.balugani@gmail.com>
  * ported to v5 by <me@steffo.eu>
  */
-body {
+:where(body) {
   --bhsl-background-hue: 0deg;
   --bhsl-background-saturation: 8%;
   --bhsl-background-lightness: 14%;

dist/colors-pixeldawn.module.css

@@ -2,23 +2,23 @@
  * Bluelib Royal Dawn Colors
  * by <me@steffo.eu>
  */
-.bluelib {
+:where(.bluelib) {
   --bhsl-background-hue: 14deg;
   --bhsl-background-saturation: 85%;
   --bhsl-background-lightness: 74%;
-  --bhsl-foreground-hue: 0deg;
+  --bhsl-foreground-hue: 340deg;
-  --bhsl-foreground-saturation: 0%;
+  --bhsl-foreground-saturation: 40%;
-  --bhsl-foreground-lightness: 0%;
+  --bhsl-foreground-lightness: 20%;
-  --bhsl-primary-hue: 0deg;
+  --bhsl-primary-hue: 220deg;
-  --bhsl-primary-saturation: 0%;
+  --bhsl-primary-saturation: 92%;
-  --bhsl-primary-lightness: 0%;
+  --bhsl-primary-lightness: 11%;
   --bhsl-link-hue: 237deg;
-  --bhsl-link-saturation: 91%;
+  --bhsl-link-saturation: 80%;
-  --bhsl-link-lightness: 59%;
+  --bhsl-link-lightness: 41%;
-  --bhsl-mark-foreground-hue: 32deg;
+  --bhsl-mark-foreground-hue: 194deg;
   --bhsl-mark-foreground-saturation: 64%;
   --bhsl-mark-foreground-lightness: 14%;
-  --bhsl-mark-background-hue: 32deg;
+  --bhsl-mark-background-hue: 194deg;
   --bhsl-mark-background-saturation: 100%;
   --bhsl-mark-background-lightness: 81%;
   --bhsl-todo-foreground-hue: 43deg;
@@ -35,29 +35,61 @@
   --bhsl-sample-output-lightness: 100%;
   --bhsl-red-hue: 0deg;
   --bhsl-red-saturation: 100%;
-  --bhsl-red-lightness: 60%;
+  --bhsl-red-lightness: 15%;
   --bhsl-yellow-hue: 60deg;
   --bhsl-yellow-saturation: 100%;
-  --bhsl-yellow-lightness: 60%;
+  --bhsl-yellow-lightness: 15%;
   --bhsl-green-hue: 120deg;
   --bhsl-green-saturation: 100%;
-  --bhsl-green-lightness: 60%;
+  --bhsl-green-lightness: 15%;
   --bhsl-cyan-hue: 180deg;
   --bhsl-cyan-saturation: 100%;
-  --bhsl-cyan-lightness: 60%;
+  --bhsl-cyan-lightness: 15%;
   --bhsl-blue-hue: 240deg;
   --bhsl-blue-saturation: 100%;
-  --bhsl-blue-lightness: 60%;
+  --bhsl-blue-lightness: 15%;
   --bhsl-magenta-hue: 300deg;
   --bhsl-magenta-saturation: 100%;
-  --bhsl-magenta-lightness: 60%;
+  --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);
+  /*
+    @{panel} {
+        
+        @{panel} {
+            background-color: .hsl-group(background; 0; - 8%; - 5%; 1.0)[@c] !important;
+
+            @{panel} {
+                background-color: .hsl-group(background; 0; - 16%; - 10%; 1.0)[@c] !important;
+            }
+        }
+    }
+    */
 }
-.bluelib:is(.bluelib) {
+:where(.bluelib):is(:where(.bluelib)) {
   --b-panel-initial-opacity: 0.5;
+  --b-border-radius: 0;
+  --b-outer-shadow: none;
+}
+:where(.bluelib):is(:where(.bluelib)) .header-1,
+:where(.bluelib):is(:where(.bluelib)) .header-2,
+:where(.bluelib):is(:where(.bluelib)) .header-3,
+:where(.bluelib):is(:where(.bluelib)) .header-4,
+:where(.bluelib):is(:where(.bluelib)) .header-5,
+:where(.bluelib):is(:where(.bluelib)) .header-6 {
+  color: white;
+  text-shadow: 2px 2px 0 #9832ce;
+}
+:where(.bluelib):is(:where(.bluelib)) .panel .header-1,
+:where(.bluelib):is(:where(.bluelib)) .panel .header-2,
+:where(.bluelib):is(:where(.bluelib)) .panel .header-3,
+:where(.bluelib):is(:where(.bluelib)) .panel .header-4,
+:where(.bluelib):is(:where(.bluelib)) .panel .header-5,
+:where(.bluelib):is(:where(.bluelib)) .panel .header-6 {
+  color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
+  text-shadow: none;
 }

dist/colors-pixeldawn.root.css

@@ -2,23 +2,23 @@
  * Bluelib Royal Dawn Colors
  * by <me@steffo.eu>
  */
-body {
+:where(body) {
   --bhsl-background-hue: 14deg;
   --bhsl-background-saturation: 85%;
   --bhsl-background-lightness: 74%;
-  --bhsl-foreground-hue: 0deg;
+  --bhsl-foreground-hue: 340deg;
-  --bhsl-foreground-saturation: 0%;
+  --bhsl-foreground-saturation: 40%;
-  --bhsl-foreground-lightness: 0%;
+  --bhsl-foreground-lightness: 20%;
-  --bhsl-primary-hue: 0deg;
+  --bhsl-primary-hue: 220deg;
-  --bhsl-primary-saturation: 0%;
+  --bhsl-primary-saturation: 92%;
-  --bhsl-primary-lightness: 0%;
+  --bhsl-primary-lightness: 11%;
   --bhsl-link-hue: 237deg;
-  --bhsl-link-saturation: 91%;
+  --bhsl-link-saturation: 80%;
-  --bhsl-link-lightness: 59%;
+  --bhsl-link-lightness: 41%;
-  --bhsl-mark-foreground-hue: 32deg;
+  --bhsl-mark-foreground-hue: 194deg;
   --bhsl-mark-foreground-saturation: 64%;
   --bhsl-mark-foreground-lightness: 14%;
-  --bhsl-mark-background-hue: 32deg;
+  --bhsl-mark-background-hue: 194deg;
   --bhsl-mark-background-saturation: 100%;
   --bhsl-mark-background-lightness: 81%;
   --bhsl-todo-foreground-hue: 43deg;
@@ -35,29 +35,61 @@ body {
   --bhsl-sample-output-lightness: 100%;
   --bhsl-red-hue: 0deg;
   --bhsl-red-saturation: 100%;
-  --bhsl-red-lightness: 60%;
+  --bhsl-red-lightness: 15%;
   --bhsl-yellow-hue: 60deg;
   --bhsl-yellow-saturation: 100%;
-  --bhsl-yellow-lightness: 60%;
+  --bhsl-yellow-lightness: 15%;
   --bhsl-green-hue: 120deg;
   --bhsl-green-saturation: 100%;
-  --bhsl-green-lightness: 60%;
+  --bhsl-green-lightness: 15%;
   --bhsl-cyan-hue: 180deg;
   --bhsl-cyan-saturation: 100%;
-  --bhsl-cyan-lightness: 60%;
+  --bhsl-cyan-lightness: 15%;
   --bhsl-blue-hue: 240deg;
   --bhsl-blue-saturation: 100%;
-  --bhsl-blue-lightness: 60%;
+  --bhsl-blue-lightness: 15%;
   --bhsl-magenta-hue: 300deg;
   --bhsl-magenta-saturation: 100%;
-  --bhsl-magenta-lightness: 60%;
+  --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);
+  /*
+    @{panel} {
+        
+        @{panel} {
+            background-color: .hsl-group(background; 0; - 8%; - 5%; 1.0)[@c] !important;
+
+            @{panel} {
+                background-color: .hsl-group(background; 0; - 16%; - 10%; 1.0)[@c] !important;
+            }
+        }
+    }
+    */
 }
-body:is(body) {
+:where(body):is(:where(body)) {
   --b-panel-initial-opacity: 0.5;
+  --b-border-radius: 0;
+  --b-outer-shadow: none;
+}
+:where(body):is(:where(body)) h1,
+:where(body):is(:where(body)) h2,
+:where(body):is(:where(body)) h3,
+:where(body):is(:where(body)) h4,
+:where(body):is(:where(body)) h5,
+:where(body):is(:where(body)) h6 {
+  color: white;
+  text-shadow: 2px 2px 0 #9832ce;
+}
+:where(body):is(:where(body)) .panel h1,
+:where(body):is(:where(body)) .panel h2,
+:where(body):is(:where(body)) .panel h3,
+:where(body):is(:where(body)) .panel h4,
+:where(body):is(:where(body)) .panel h5,
+:where(body):is(:where(body)) .panel h6 {
+  color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
+  text-shadow: none;
 }

dist/colors-royalblue.module.css

@@ -2,7 +2,7 @@
  * Bluelib Royal Blue Colors
  * by <me@steffo.eu>
  */
-.bluelib {
+:where(.bluelib) {
   --bhsl-background-hue: 224deg;
   --bhsl-background-saturation: 64%;
   --bhsl-background-lightness: 14%;

dist/colors-royalblue.root.css

@@ -2,7 +2,7 @@
  * Bluelib Royal Blue Colors
  * by <me@steffo.eu>
  */
-body {
+:where(body) {
   --bhsl-background-hue: 224deg;
   --bhsl-background-saturation: 64%;
   --bhsl-background-lightness: 14%;

dist/fonts-fira-ghpages.module.css

@@ -142,7 +142,7 @@
   font-weight: 600;
   font-style: normal;
 }
-.bluelib {
+:where(.bluelib) {
   --bfont-text-style: normal;
   --bfont-text-variant: normal;
   --bfont-text-weight: 400;

dist/fonts-fira-ghpages.root.css

@@ -142,7 +142,7 @@
   font-weight: 600;
   font-style: normal;
 }
-body {
+:where(body) {
   --bfont-text-style: normal;
   --bfont-text-variant: normal;
   --bfont-text-weight: 400;

dist/glass.module.css

@@ -2,82 +2,82 @@
  * Bluelib Glass
  * by <me@steffo.eu>
  */
-.bluelib {
+: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))) {
-  .bluelib .panel,
+  :where(.bluelib) .panel,
-  .bluelib .table.panel > .table-caption {
+  :where(.bluelib) .table.panel > .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)));
   }
-  .bluelib .panel .panel,
+  :where(.bluelib) .panel .panel,
-  .bluelib .table.panel > .table-caption .panel {
+  :where(.bluelib) .table.panel > .table-caption .panel {
     background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));
     backdrop-filter: none;
   }
-  .bluelib .modifier-mark,
+  :where(.bluelib) .modifier-mark,
-  .bluelib .element-mark,
+  :where(.bluelib) .element-mark,
-  .bluelib .panel.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;
   }
-  .bluelib .modifier-mark .modifier-mark,
+  :where(.bluelib) .modifier-mark .modifier-mark,
-  .bluelib .element-mark .modifier-mark,
+  :where(.bluelib) .element-mark .modifier-mark,
-  .bluelib .panel.modifier-mark .modifier-mark,
+  :where(.bluelib) .panel.modifier-mark .modifier-mark,
-  .bluelib .modifier-mark .element-mark,
+  :where(.bluelib) .modifier-mark .element-mark,
-  .bluelib .element-mark .element-mark,
+  :where(.bluelib) .element-mark .element-mark,
-  .bluelib .panel.modifier-mark .element-mark,
+  :where(.bluelib) .panel.modifier-mark .element-mark,
-  .bluelib .modifier-mark .panel.modifier-mark,
+  :where(.bluelib) .modifier-mark .panel.modifier-mark,
-  .bluelib .element-mark .panel.modifier-mark,
+  :where(.bluelib) .element-mark .panel.modifier-mark,
-  .bluelib .panel.modifier-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));
   }
-  .bluelib .modifier-mark .modifier-mark .modifier-mark,
+  :where(.bluelib) .modifier-mark .modifier-mark .modifier-mark,
-  .bluelib .element-mark .modifier-mark .modifier-mark,
+  :where(.bluelib) .element-mark .modifier-mark .modifier-mark,
-  .bluelib .panel.modifier-mark .modifier-mark .modifier-mark,
+  :where(.bluelib) .panel.modifier-mark .modifier-mark .modifier-mark,
-  .bluelib .modifier-mark .element-mark .modifier-mark,
+  :where(.bluelib) .modifier-mark .element-mark .modifier-mark,
-  .bluelib .element-mark .element-mark .modifier-mark,
+  :where(.bluelib) .element-mark .element-mark .modifier-mark,
-  .bluelib .panel.modifier-mark .element-mark .modifier-mark,
+  :where(.bluelib) .panel.modifier-mark .element-mark .modifier-mark,
-  .bluelib .modifier-mark .panel.modifier-mark .modifier-mark,
+  :where(.bluelib) .modifier-mark .panel.modifier-mark .modifier-mark,
-  .bluelib .element-mark .panel.modifier-mark .modifier-mark,
+  :where(.bluelib) .element-mark .panel.modifier-mark .modifier-mark,
-  .bluelib .panel.modifier-mark .panel.modifier-mark .modifier-mark,
+  :where(.bluelib) .panel.modifier-mark .panel.modifier-mark .modifier-mark,
-  .bluelib .modifier-mark .modifier-mark .element-mark,
+  :where(.bluelib) .modifier-mark .modifier-mark .element-mark,
-  .bluelib .element-mark .modifier-mark .element-mark,
+  :where(.bluelib) .element-mark .modifier-mark .element-mark,
-  .bluelib .panel.modifier-mark .modifier-mark .element-mark,
+  :where(.bluelib) .panel.modifier-mark .modifier-mark .element-mark,
-  .bluelib .modifier-mark .element-mark .element-mark,
+  :where(.bluelib) .modifier-mark .element-mark .element-mark,
-  .bluelib .element-mark .element-mark .element-mark,
+  :where(.bluelib) .element-mark .element-mark .element-mark,
-  .bluelib .panel.modifier-mark .element-mark .element-mark,
+  :where(.bluelib) .panel.modifier-mark .element-mark .element-mark,
-  .bluelib .modifier-mark .panel.modifier-mark .element-mark,
+  :where(.bluelib) .modifier-mark .panel.modifier-mark .element-mark,
-  .bluelib .element-mark .panel.modifier-mark .element-mark,
+  :where(.bluelib) .element-mark .panel.modifier-mark .element-mark,
-  .bluelib .panel.modifier-mark .panel.modifier-mark .element-mark,
+  :where(.bluelib) .panel.modifier-mark .panel.modifier-mark .element-mark,
-  .bluelib .modifier-mark .modifier-mark .panel.modifier-mark,
+  :where(.bluelib) .modifier-mark .modifier-mark .panel.modifier-mark,
-  .bluelib .element-mark .modifier-mark .panel.modifier-mark,
+  :where(.bluelib) .element-mark .modifier-mark .panel.modifier-mark,
-  .bluelib .panel.modifier-mark .modifier-mark .panel.modifier-mark,
+  :where(.bluelib) .panel.modifier-mark .modifier-mark .panel.modifier-mark,
-  .bluelib .modifier-mark .element-mark .panel.modifier-mark,
+  :where(.bluelib) .modifier-mark .element-mark .panel.modifier-mark,
-  .bluelib .element-mark .element-mark .panel.modifier-mark,
+  :where(.bluelib) .element-mark .element-mark .panel.modifier-mark,
-  .bluelib .panel.modifier-mark .element-mark .panel.modifier-mark,
+  :where(.bluelib) .panel.modifier-mark .element-mark .panel.modifier-mark,
-  .bluelib .modifier-mark .panel.modifier-mark .panel.modifier-mark,
+  :where(.bluelib) .modifier-mark .panel.modifier-mark .panel.modifier-mark,
-  .bluelib .element-mark .panel.modifier-mark .panel.modifier-mark,
+  :where(.bluelib) .element-mark .panel.modifier-mark .panel.modifier-mark,
-  .bluelib .panel.modifier-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));
   }
-  .bluelib .modifier-todo,
+  :where(.bluelib) .modifier-todo,
-  .bluelib .panel.modifier-todo {
+  :where(.bluelib) .panel.modifier-todo {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
   }
-  .bluelib .modifier-todo .panel,
+  :where(.bluelib) .modifier-todo .panel,
-  .bluelib .panel.modifier-todo .panel {
+  :where(.bluelib) .panel.modifier-todo .panel {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
     backdrop-filter: none;
   }
-  .bluelib .panel.modifier-todo {
+  :where(.bluelib) .panel.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%);
   }
-  .bluelib .panel .panel.modifier-todo {
+  :where(.bluelib) .panel .panel.modifier-todo {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
   }
 }

dist/glass.root.css

@@ -2,82 +2,82 @@
  * Bluelib Glass
  * by <me@steffo.eu>
  */
-body {
+: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))) {
-  body .panel,
+  :where(body) .panel,
-  body table.panel > caption {
+  :where(body) table.panel > 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)));
   }
-  body .panel .panel,
+  :where(body) .panel .panel,
-  body table.panel > caption .panel {
+  :where(body) table.panel > caption .panel {
     background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));
     backdrop-filter: none;
   }
-  body .mark,
+  :where(body) .mark,
-  body mark,
+  :where(body) mark,
-  body .panel.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;
   }
-  body .mark .mark,
+  :where(body) .mark .mark,
-  body mark .mark,
+  :where(body) mark .mark,
-  body .panel.mark .mark,
+  :where(body) .panel.mark .mark,
-  body .mark mark,
+  :where(body) .mark mark,
-  body mark mark,
+  :where(body) mark mark,
-  body .panel.mark mark,
+  :where(body) .panel.mark mark,
-  body .mark .panel.mark,
+  :where(body) .mark .panel.mark,
-  body mark .panel.mark,
+  :where(body) mark .panel.mark,
-  body .panel.mark .panel.mark {
+  :where(body) .panel.mark .panel.mark {
     background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
   }
-  body .mark .mark .mark,
+  :where(body) .mark .mark .mark,
-  body mark .mark .mark,
+  :where(body) mark .mark .mark,
-  body .panel.mark .mark .mark,
+  :where(body) .panel.mark .mark .mark,
-  body .mark mark .mark,
+  :where(body) .mark mark .mark,
-  body mark mark .mark,
+  :where(body) mark mark .mark,
-  body .panel.mark mark .mark,
+  :where(body) .panel.mark mark .mark,
-  body .mark .panel.mark .mark,
+  :where(body) .mark .panel.mark .mark,
-  body mark .panel.mark .mark,
+  :where(body) mark .panel.mark .mark,
-  body .panel.mark .panel.mark .mark,
+  :where(body) .panel.mark .panel.mark .mark,
-  body .mark .mark mark,
+  :where(body) .mark .mark mark,
-  body mark .mark mark,
+  :where(body) mark .mark mark,
-  body .panel.mark .mark mark,
+  :where(body) .panel.mark .mark mark,
-  body .mark mark mark,
+  :where(body) .mark mark mark,
-  body mark mark mark,
+  :where(body) mark mark mark,
-  body .panel.mark mark mark,
+  :where(body) .panel.mark mark mark,
-  body .mark .panel.mark mark,
+  :where(body) .mark .panel.mark mark,
-  body mark .panel.mark mark,
+  :where(body) mark .panel.mark mark,
-  body .panel.mark .panel.mark mark,
+  :where(body) .panel.mark .panel.mark mark,
-  body .mark .mark .panel.mark,
+  :where(body) .mark .mark .panel.mark,
-  body mark .mark .panel.mark,
+  :where(body) mark .mark .panel.mark,
-  body .panel.mark .mark .panel.mark,
+  :where(body) .panel.mark .mark .panel.mark,
-  body .mark mark .panel.mark,
+  :where(body) .mark mark .panel.mark,
-  body mark mark .panel.mark,
+  :where(body) mark mark .panel.mark,
-  body .panel.mark mark .panel.mark,
+  :where(body) .panel.mark mark .panel.mark,
-  body .mark .panel.mark .panel.mark,
+  :where(body) .mark .panel.mark .panel.mark,
-  body mark .panel.mark .panel.mark,
+  :where(body) mark .panel.mark .panel.mark,
-  body .panel.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));
   }
-  body .todo,
+  :where(body) .todo,
-  body .panel.todo {
+  :where(body) .panel.todo {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
   }
-  body .todo .panel,
+  :where(body) .todo .panel,
-  body .panel.todo .panel {
+  :where(body) .panel.todo .panel {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
     backdrop-filter: none;
   }
-  body .panel.todo {
+  :where(body) .panel.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%);
   }
-  body .panel .panel.todo {
+  :where(body) .panel .panel.todo {
     background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
   }
 }