Version 2.2.1

README.md

@@ -77,7 +77,7 @@ There are 4 ways to get started with pico.css:
 Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.0/css/pico.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.1/css/pico.min.css" />
 ```
 
 ### Install with NPM
@@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.0/css/pico.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.1/css/pico.classless.min.css"
 />
 ```
 
@@ -144,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.0/css/pico.fluid.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.1/css/pico.fluid.classless.min.css"
 />
 ```
 
@@ -159,7 +159,7 @@ Then just write pure HTML, and it should look great:
     <meta name="color-scheme" content="light dark" />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.0/css/pico.classless.min.css"
+      href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.1/css/pico.classless.min.css"
     />
     <title>Hello, world!</title>
   </head>

css/pico.amber.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -219,6 +219,10 @@ nav details.dropdown summary:focus-visible {
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -262,6 +266,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -413,6 +421,10 @@ nav details.dropdown summary:focus-visible {
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -564,6 +576,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2806,7 +2822,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2821,7 +2837,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3147,11 +3163,6 @@ details.dropdown > a::after {
   background-repeat: no-repeat;
   content: "";
 }
-
-nav details.dropdown {
-  margin-bottom: 0;
-}
-
 details.dropdown > summary:not([role]) {
   height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
@@ -3186,19 +3197,6 @@ details.dropdown > summary:not([role])[aria-invalid=true] {
   --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
   --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
 }
-
-nav details.dropdown {
-  display: inline;
-  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
-}
-nav details.dropdown > summary:not([role]) {
-  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
-  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-nav details.dropdown > summary:not([role]):focus-visible {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
 details.dropdown > summary + ul {
   display: flex;
   z-index: 99;
@@ -3261,17 +3259,9 @@ details.dropdown > summary + ul li label {
 details.dropdown > summary + ul li:has(label):hover {
   background-color: var(--pico-dropdown-hover-background-color);
 }
-
 details.dropdown[open] > summary {
   margin-bottom: 0;
 }
-
-details.dropdown[open] > summary + ul {
-  transform: scaleY(1);
-  opacity: 1;
-  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
-}
-
 details.dropdown[open] > summary::before {
   display: block;
   z-index: 1;
@@ -3283,6 +3273,24 @@ details.dropdown[open] > summary::before {
   content: "";
   cursor: default;
 }
+details.dropdown[open] > summary + ul {
+  transform: scaleY(1);
+  opacity: 1;
+  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
+}
+
+nav details.dropdown {
+  display: inline;
+  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
+  margin-bottom: 0;
+}
+nav details.dropdown > summary:not([role]) {
+  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
+  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
+}
+nav details.dropdown > summary:not([role]):focus-visible {
+  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+}
 
 label > details.dropdown {
   margin-top: calc(var(--pico-spacing) * 0.25);
@@ -4192,57 +4200,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -4264,52 +4293,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.azure.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -219,6 +219,10 @@ nav details.dropdown summary:focus-visible {
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -262,6 +266,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -413,6 +421,10 @@ nav details.dropdown summary:focus-visible {
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -564,6 +576,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2806,7 +2822,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2821,7 +2837,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3147,11 +3163,6 @@ details.dropdown > a::after {
   background-repeat: no-repeat;
   content: "";
 }
-
-nav details.dropdown {
-  margin-bottom: 0;
-}
-
 details.dropdown > summary:not([role]) {
   height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
@@ -3186,19 +3197,6 @@ details.dropdown > summary:not([role])[aria-invalid=true] {
   --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
   --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
 }
-
-nav details.dropdown {
-  display: inline;
-  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
-}
-nav details.dropdown > summary:not([role]) {
-  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
-  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-nav details.dropdown > summary:not([role]):focus-visible {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
 details.dropdown > summary + ul {
   display: flex;
   z-index: 99;
@@ -3261,17 +3259,9 @@ details.dropdown > summary + ul li label {
 details.dropdown > summary + ul li:has(label):hover {
   background-color: var(--pico-dropdown-hover-background-color);
 }
-
 details.dropdown[open] > summary {
   margin-bottom: 0;
 }
-
-details.dropdown[open] > summary + ul {
-  transform: scaleY(1);
-  opacity: 1;
-  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
-}
-
 details.dropdown[open] > summary::before {
   display: block;
   z-index: 1;
@@ -3283,6 +3273,24 @@ details.dropdown[open] > summary::before {
   content: "";
   cursor: default;
 }
+details.dropdown[open] > summary + ul {
+  transform: scaleY(1);
+  opacity: 1;
+  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
+}
+
+nav details.dropdown {
+  display: inline;
+  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
+  margin-bottom: 0;
+}
+nav details.dropdown > summary:not([role]) {
+  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
+  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
+}
+nav details.dropdown > summary:not([role]):focus-visible {
+  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+}
 
 label > details.dropdown {
   margin-top: calc(var(--pico-spacing) * 0.25);
@@ -4192,57 +4200,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -4264,52 +4293,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.blue.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -219,6 +219,10 @@ nav details.dropdown summary:focus-visible {
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -262,6 +266,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -413,6 +421,10 @@ nav details.dropdown summary:focus-visible {
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -564,6 +576,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2806,7 +2822,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2821,7 +2837,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3147,11 +3163,6 @@ details.dropdown > a::after {
   background-repeat: no-repeat;
   content: "";
 }
-
-nav details.dropdown {
-  margin-bottom: 0;
-}
-
 details.dropdown > summary:not([role]) {
   height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
@@ -3186,19 +3197,6 @@ details.dropdown > summary:not([role])[aria-invalid=true] {
   --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
   --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
 }
-
-nav details.dropdown {
-  display: inline;
-  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
-}
-nav details.dropdown > summary:not([role]) {
-  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
-  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-nav details.dropdown > summary:not([role]):focus-visible {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
 details.dropdown > summary + ul {
   display: flex;
   z-index: 99;
@@ -3261,17 +3259,9 @@ details.dropdown > summary + ul li label {
 details.dropdown > summary + ul li:has(label):hover {
   background-color: var(--pico-dropdown-hover-background-color);
 }
-
 details.dropdown[open] > summary {
   margin-bottom: 0;
 }
-
-details.dropdown[open] > summary + ul {
-  transform: scaleY(1);
-  opacity: 1;
-  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
-}
-
 details.dropdown[open] > summary::before {
   display: block;
   z-index: 1;
@@ -3283,6 +3273,24 @@ details.dropdown[open] > summary::before {
   content: "";
   cursor: default;
 }
+details.dropdown[open] > summary + ul {
+  transform: scaleY(1);
+  opacity: 1;
+  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
+}
+
+nav details.dropdown {
+  display: inline;
+  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
+  margin-bottom: 0;
+}
+nav details.dropdown > summary:not([role]) {
+  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
+  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
+}
+nav details.dropdown > summary:not([role]):focus-visible {
+  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+}
 
 label > details.dropdown {
   margin-top: calc(var(--pico-spacing) * 0.25);
@@ -4192,57 +4200,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -4264,52 +4293,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.amber.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.azure.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.blue.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.amber.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.azure.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.blue.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.cyan.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.fuchsia.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.green.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.grey.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.indigo.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.jade.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.lime.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.orange.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.pink.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.pumpkin.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.purple.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.red.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.sand.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.slate.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.violet.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.yellow.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.conditional.zinc.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -195,18 +199,18 @@ input:not([type=submit],
   color-scheme: light;
   --pico-background-color: #fff;
   --pico-color: #373c44;
-  --pico-text-selection-color: rgba(71, 164, 23, 0.25);
+  --pico-text-selection-color: rgba(5, 162, 162, 0.25);
   --pico-muted-color: #646b79;
   --pico-muted-border-color: rgb(231, 234, 239.5);
-  --pico-primary: #33790f;
+  --pico-primary: #047878;
-  --pico-primary-background: #398712;
+  --pico-primary-background: #047878;
   --pico-primary-border: var(--pico-primary-background);
-  --pico-primary-underline: rgba(51, 121, 15, 0.5);
+  --pico-primary-underline: rgba(4, 120, 120, 0.5);
-  --pico-primary-hover: #265e09;
+  --pico-primary-hover: #025d5d;
-  --pico-primary-hover-background: #33790f;
+  --pico-primary-hover-background: #046a6a;
   --pico-primary-hover-border: var(--pico-primary-hover-background);
   --pico-primary-hover-underline: var(--pico-primary-hover);
-  --pico-primary-focus: rgba(71, 164, 23, 0.5);
+  --pico-primary-focus: rgba(5, 162, 162, 0.5);
   --pico-primary-inverse: #fff;
   --pico-secondary: #5d6b89;
   --pico-secondary-background: #525f7a;
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -331,18 +339,18 @@ input:not([type=submit],
     color-scheme: dark;
     --pico-background-color: rgb(19, 22.5, 30.5);
     --pico-color: #c2c7d0;
-    --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
+    --pico-text-selection-color: rgba(10, 177, 177, 0.1875);
     --pico-muted-color: #7b8495;
     --pico-muted-border-color: #202632;
-    --pico-primary: #4eb31b;
+    --pico-primary: #0ab1b1;
-    --pico-primary-background: #398712;
+    --pico-primary-background: #047878;
     --pico-primary-border: var(--pico-primary-background);
-    --pico-primary-underline: rgba(78, 179, 27, 0.5);
+    --pico-primary-underline: rgba(10, 177, 177, 0.5);
-    --pico-primary-hover: #5dd121;
+    --pico-primary-hover: #0ccece;
-    --pico-primary-hover-background: #409614;
+    --pico-primary-hover-background: #058686;
     --pico-primary-hover-border: var(--pico-primary-hover-background);
     --pico-primary-hover-underline: var(--pico-primary-hover);
-    --pico-primary-focus: rgba(78, 179, 27, 0.375);
+    --pico-primary-focus: rgba(10, 177, 177, 0.375);
     --pico-primary-inverse: #fff;
     --pico-secondary: #969eaf;
     --pico-secondary-background: #525f7a;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -457,18 +469,18 @@ input:not([type=submit],
   color-scheme: dark;
   --pico-background-color: rgb(19, 22.5, 30.5);
   --pico-color: #c2c7d0;
-  --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
+  --pico-text-selection-color: rgba(10, 177, 177, 0.1875);
   --pico-muted-color: #7b8495;
   --pico-muted-border-color: #202632;
-  --pico-primary: #4eb31b;
+  --pico-primary: #0ab1b1;
-  --pico-primary-background: #398712;
+  --pico-primary-background: #047878;
   --pico-primary-border: var(--pico-primary-background);
-  --pico-primary-underline: rgba(78, 179, 27, 0.5);
+  --pico-primary-underline: rgba(10, 177, 177, 0.5);
-  --pico-primary-hover: #5dd121;
+  --pico-primary-hover: #0ccece;
-  --pico-primary-hover-background: #409614;
+  --pico-primary-hover-background: #058686;
   --pico-primary-hover-border: var(--pico-primary-hover-background);
   --pico-primary-hover-underline: var(--pico-primary-hover);
-  --pico-primary-focus: rgba(78, 179, 27, 0.375);
+  --pico-primary-focus: rgba(10, 177, 177, 0.375);
   --pico-primary-inverse: #fff;
   --pico-secondary: #969eaf;
   --pico-secondary-background: #525f7a;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.cyan.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.fuchsia.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.green.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.grey.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.indigo.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.jade.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.lime.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.orange.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.pink.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.pumpkin.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.purple.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.red.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.sand.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.slate.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.violet.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.yellow.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.classless.zinc.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -186,6 +186,10 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -229,6 +233,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -365,6 +373,10 @@ input:not([type=submit],
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -491,6 +503,10 @@ input:not([type=submit],
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2108,7 +2124,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2123,7 +2139,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3278,57 +3294,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
+[role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+[role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-section[role=region] details > div {
+[role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -3350,52 +3387,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;

css/pico.colors.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 :root,

css/pico.conditional.amber.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -219,6 +219,10 @@ nav details.dropdown summary:focus-visible {
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -262,6 +266,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -413,6 +421,10 @@ nav details.dropdown summary:focus-visible {
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -564,6 +576,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2806,7 +2822,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2821,7 +2837,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3147,11 +3163,6 @@ main {
   background-repeat: no-repeat;
   content: "";
 }
-
-.pico nav details.dropdown {
-  margin-bottom: 0;
-}
-
 .pico details.dropdown > summary:not([role]) {
   height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
@@ -3186,19 +3197,6 @@ main {
   --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
   --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
 }
-
-.pico nav details.dropdown {
-  display: inline;
-  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
-}
-.pico nav details.dropdown > summary:not([role]) {
-  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
-  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-.pico nav details.dropdown > summary:not([role]):focus-visible {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
 .pico details.dropdown > summary + ul {
   display: flex;
   z-index: 99;
@@ -3261,17 +3259,9 @@ main {
 .pico details.dropdown > summary + ul li:has(label):hover {
   background-color: var(--pico-dropdown-hover-background-color);
 }
-
 .pico details.dropdown[open] > summary {
   margin-bottom: 0;
 }
-
-.pico details.dropdown[open] > summary + ul {
-  transform: scaleY(1);
-  opacity: 1;
-  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
-}
-
 .pico details.dropdown[open] > summary::before {
   display: block;
   z-index: 1;
@@ -3283,6 +3273,24 @@ main {
   content: "";
   cursor: default;
 }
+.pico details.dropdown[open] > summary + ul {
+  transform: scaleY(1);
+  opacity: 1;
+  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
+}
+
+.pico nav details.dropdown {
+  display: inline;
+  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
+  margin-bottom: 0;
+}
+.pico nav details.dropdown > summary:not([role]) {
+  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
+  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
+}
+.pico nav details.dropdown > summary:not([role]):focus-visible {
+  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+}
 
 .pico label > details.dropdown {
   margin-top: calc(var(--pico-spacing) * 0.25);
@@ -4192,57 +4200,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -4264,52 +4293,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.conditional.azure.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -219,6 +219,10 @@ nav details.dropdown summary:focus-visible {
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -262,6 +266,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -413,6 +421,10 @@ nav details.dropdown summary:focus-visible {
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -564,6 +576,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2806,7 +2822,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2821,7 +2837,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3147,11 +3163,6 @@ main {
   background-repeat: no-repeat;
   content: "";
 }
-
-.pico nav details.dropdown {
-  margin-bottom: 0;
-}
-
 .pico details.dropdown > summary:not([role]) {
   height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
@@ -3186,19 +3197,6 @@ main {
   --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
   --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
 }
-
-.pico nav details.dropdown {
-  display: inline;
-  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
-}
-.pico nav details.dropdown > summary:not([role]) {
-  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
-  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-.pico nav details.dropdown > summary:not([role]):focus-visible {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
 .pico details.dropdown > summary + ul {
   display: flex;
   z-index: 99;
@@ -3261,17 +3259,9 @@ main {
 .pico details.dropdown > summary + ul li:has(label):hover {
   background-color: var(--pico-dropdown-hover-background-color);
 }
-
 .pico details.dropdown[open] > summary {
   margin-bottom: 0;
 }
-
-.pico details.dropdown[open] > summary + ul {
-  transform: scaleY(1);
-  opacity: 1;
-  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
-}
-
 .pico details.dropdown[open] > summary::before {
   display: block;
   z-index: 1;
@@ -3283,6 +3273,24 @@ main {
   content: "";
   cursor: default;
 }
+.pico details.dropdown[open] > summary + ul {
+  transform: scaleY(1);
+  opacity: 1;
+  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
+}
+
+.pico nav details.dropdown {
+  display: inline;
+  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
+  margin-bottom: 0;
+}
+.pico nav details.dropdown > summary:not([role]) {
+  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
+  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
+}
+.pico nav details.dropdown > summary:not([role]):focus-visible {
+  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+}
 
 .pico label > details.dropdown {
   margin-top: calc(var(--pico-spacing) * 0.25);
@@ -4192,57 +4200,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -4264,52 +4293,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.conditional.blue.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -219,6 +219,10 @@ nav details.dropdown summary:focus-visible {
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -262,6 +266,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -413,6 +421,10 @@ nav details.dropdown summary:focus-visible {
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -564,6 +576,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2806,7 +2822,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2821,7 +2837,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3147,11 +3163,6 @@ main {
   background-repeat: no-repeat;
   content: "";
 }
-
-.pico nav details.dropdown {
-  margin-bottom: 0;
-}
-
 .pico details.dropdown > summary:not([role]) {
   height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
@@ -3186,19 +3197,6 @@ main {
   --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
   --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
 }
-
-.pico nav details.dropdown {
-  display: inline;
-  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
-}
-.pico nav details.dropdown > summary:not([role]) {
-  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
-  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-.pico nav details.dropdown > summary:not([role]):focus-visible {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
 .pico details.dropdown > summary + ul {
   display: flex;
   z-index: 99;
@@ -3261,17 +3259,9 @@ main {
 .pico details.dropdown > summary + ul li:has(label):hover {
   background-color: var(--pico-dropdown-hover-background-color);
 }
-
 .pico details.dropdown[open] > summary {
   margin-bottom: 0;
 }
-
-.pico details.dropdown[open] > summary + ul {
-  transform: scaleY(1);
-  opacity: 1;
-  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
-}
-
 .pico details.dropdown[open] > summary::before {
   display: block;
   z-index: 1;
@@ -3283,6 +3273,24 @@ main {
   content: "";
   cursor: default;
 }
+.pico details.dropdown[open] > summary + ul {
+  transform: scaleY(1);
+  opacity: 1;
+  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
+}
+
+.pico nav details.dropdown {
+  display: inline;
+  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
+  margin-bottom: 0;
+}
+.pico nav details.dropdown > summary:not([role]) {
+  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
+  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
+}
+.pico nav details.dropdown > summary:not([role]):focus-visible {
+  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+}
 
 .pico label > details.dropdown {
   margin-top: calc(var(--pico-spacing) * 0.25);
@@ -4192,57 +4200,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -4264,52 +4293,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.conditional.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -219,6 +219,10 @@ nav details.dropdown summary:focus-visible {
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -228,18 +232,18 @@ nav details.dropdown summary:focus-visible {
   color-scheme: light;
   --pico-background-color: #fff;
   --pico-color: #373c44;
-  --pico-text-selection-color: rgba(148, 134, 225, 0.25);
+  --pico-text-selection-color: rgba(71, 164, 23, 0.25);
   --pico-muted-color: #646b79;
   --pico-muted-border-color: rgb(231, 234, 239.5);
-  --pico-primary: #655cd6;
+  --pico-primary: #33790f;
-  --pico-primary-background: #524ed2;
+  --pico-primary-background: #398712;
   --pico-primary-border: var(--pico-primary-background);
-  --pico-primary-underline: rgba(101, 92, 214, 0.5);
+  --pico-primary-underline: rgba(51, 121, 15, 0.5);
-  --pico-primary-hover: #4040bf;
+  --pico-primary-hover: #265e09;
-  --pico-primary-hover-background: #4040bf;
+  --pico-primary-hover-background: #33790f;
   --pico-primary-hover-border: var(--pico-primary-hover-background);
   --pico-primary-hover-underline: var(--pico-primary-hover);
-  --pico-primary-focus: rgba(148, 134, 225, 0.5);
+  --pico-primary-focus: rgba(71, 164, 23, 0.5);
   --pico-primary-inverse: #fff;
   --pico-secondary: #5d6b89;
   --pico-secondary-background: #525f7a;
@@ -262,6 +266,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -379,18 +387,18 @@ nav details.dropdown summary:focus-visible {
     color-scheme: dark;
     --pico-background-color: rgb(19, 22.5, 30.5);
     --pico-color: #c2c7d0;
-    --pico-text-selection-color: rgba(162, 148, 229, 0.1875);
+    --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
     --pico-muted-color: #7b8495;
     --pico-muted-border-color: #202632;
-    --pico-primary: #a294e5;
+    --pico-primary: #4eb31b;
-    --pico-primary-background: #524ed2;
+    --pico-primary-background: #398712;
     --pico-primary-border: var(--pico-primary-background);
-    --pico-primary-underline: rgba(162, 148, 229, 0.5);
+    --pico-primary-underline: rgba(78, 179, 27, 0.5);
-    --pico-primary-hover: #bdb2ec;
+    --pico-primary-hover: #5dd121;
-    --pico-primary-hover-background: #655cd6;
+    --pico-primary-hover-background: #409614;
     --pico-primary-hover-border: var(--pico-primary-hover-background);
     --pico-primary-hover-underline: var(--pico-primary-hover);
-    --pico-primary-focus: rgba(162, 148, 229, 0.375);
+    --pico-primary-focus: rgba(78, 179, 27, 0.375);
     --pico-primary-inverse: #fff;
     --pico-secondary: #969eaf;
     --pico-secondary-background: #525f7a;
@@ -413,6 +421,10 @@ nav details.dropdown summary:focus-visible {
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -530,18 +542,18 @@ nav details.dropdown summary:focus-visible {
   color-scheme: dark;
   --pico-background-color: rgb(19, 22.5, 30.5);
   --pico-color: #c2c7d0;
-  --pico-text-selection-color: rgba(162, 148, 229, 0.1875);
+  --pico-text-selection-color: rgba(78, 179, 27, 0.1875);
   --pico-muted-color: #7b8495;
   --pico-muted-border-color: #202632;
-  --pico-primary: #a294e5;
+  --pico-primary: #4eb31b;
-  --pico-primary-background: #524ed2;
+  --pico-primary-background: #398712;
   --pico-primary-border: var(--pico-primary-background);
-  --pico-primary-underline: rgba(162, 148, 229, 0.5);
+  --pico-primary-underline: rgba(78, 179, 27, 0.5);
-  --pico-primary-hover: #bdb2ec;
+  --pico-primary-hover: #5dd121;
-  --pico-primary-hover-background: #655cd6;
+  --pico-primary-hover-background: #409614;
   --pico-primary-hover-border: var(--pico-primary-hover-background);
   --pico-primary-hover-underline: var(--pico-primary-hover);
-  --pico-primary-focus: rgba(162, 148, 229, 0.375);
+  --pico-primary-focus: rgba(78, 179, 27, 0.375);
   --pico-primary-inverse: #fff;
   --pico-secondary: #969eaf;
   --pico-secondary-background: #525f7a;
@@ -564,6 +576,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2806,7 +2822,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2821,7 +2837,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3147,11 +3163,6 @@ main {
   background-repeat: no-repeat;
   content: "";
 }
-
-.pico nav details.dropdown {
-  margin-bottom: 0;
-}
-
 .pico details.dropdown > summary:not([role]) {
   height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
@@ -3186,19 +3197,6 @@ main {
   --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
   --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
 }
-
-.pico nav details.dropdown {
-  display: inline;
-  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
-}
-.pico nav details.dropdown > summary:not([role]) {
-  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
-  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-.pico nav details.dropdown > summary:not([role]):focus-visible {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
 .pico details.dropdown > summary + ul {
   display: flex;
   z-index: 99;
@@ -3261,17 +3259,9 @@ main {
 .pico details.dropdown > summary + ul li:has(label):hover {
   background-color: var(--pico-dropdown-hover-background-color);
 }
-
 .pico details.dropdown[open] > summary {
   margin-bottom: 0;
 }
-
-.pico details.dropdown[open] > summary + ul {
-  transform: scaleY(1);
-  opacity: 1;
-  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
-}
-
 .pico details.dropdown[open] > summary::before {
   display: block;
   z-index: 1;
@@ -3283,6 +3273,24 @@ main {
   content: "";
   cursor: default;
 }
+.pico details.dropdown[open] > summary + ul {
+  transform: scaleY(1);
+  opacity: 1;
+  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
+}
+
+.pico nav details.dropdown {
+  display: inline;
+  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
+  margin-bottom: 0;
+}
+.pico nav details.dropdown > summary:not([role]) {
+  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
+  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
+}
+.pico nav details.dropdown > summary:not([role]):focus-visible {
+  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+}
 
 .pico label > details.dropdown {
   margin-top: calc(var(--pico-spacing) * 0.25);
@@ -4192,57 +4200,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -4264,52 +4293,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;

css/pico.conditional.cyan.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -219,6 +219,10 @@ nav details.dropdown summary:focus-visible {
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -262,6 +266,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -413,6 +421,10 @@ nav details.dropdown summary:focus-visible {
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -564,6 +576,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2806,7 +2822,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2821,7 +2837,7 @@ main {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3147,11 +3163,6 @@ main {
   background-repeat: no-repeat;
   content: "";
 }
-
-.pico nav details.dropdown {
-  margin-bottom: 0;
-}
-
 .pico details.dropdown > summary:not([role]) {
   height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
@@ -3186,19 +3197,6 @@ main {
   --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
   --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
 }
-
-.pico nav details.dropdown {
-  display: inline;
-  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
-}
-.pico nav details.dropdown > summary:not([role]) {
-  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
-  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-.pico nav details.dropdown > summary:not([role]):focus-visible {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
 .pico details.dropdown > summary + ul {
   display: flex;
   z-index: 99;
@@ -3261,17 +3259,9 @@ main {
 .pico details.dropdown > summary + ul li:has(label):hover {
   background-color: var(--pico-dropdown-hover-background-color);
 }
-
 .pico details.dropdown[open] > summary {
   margin-bottom: 0;
 }
-
-.pico details.dropdown[open] > summary + ul {
-  transform: scaleY(1);
-  opacity: 1;
-  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
-}
-
 .pico details.dropdown[open] > summary::before {
   display: block;
   z-index: 1;
@@ -3283,6 +3273,24 @@ main {
   content: "";
   cursor: default;
 }
+.pico details.dropdown[open] > summary + ul {
+  transform: scaleY(1);
+  opacity: 1;
+  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
+}
+
+.pico nav details.dropdown {
+  display: inline;
+  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
+  margin-bottom: 0;
+}
+.pico nav details.dropdown > summary:not([role]) {
+  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
+  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
+}
+.pico nav details.dropdown > summary:not([role]):focus-visible {
+  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+}
 
 .pico label > details.dropdown {
   margin-top: calc(var(--pico-spacing) * 0.25);
@@ -4192,57 +4200,78 @@ body:has(dialog[open]) {
 }
 
 /**
- * Tab region
+ * Tabs
- * styling help from: https://github.com/picocss/pico/discussions/608
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
  */
-.pico section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+.pico [role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-.pico section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-.pico section[role=region] details summary {
+.pico [role=tablist] button {
   flex-grow: 1;
-  order: 0;
+  order: 1;
-  margin: 0;
+  padding: calc(var(--pico-spacing) * 0.625);
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
+  border: 0;
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--pico-primary-background);
-  background-color: var(--pico-card-sectioning-background-color);
+  border-bottom-right-radius: 0;
-  list-style-type: none;
+  border-bottom-left-radius: 0;
-  touch-action: manipulation;
+  background: transparent;
-  transition: all var(--pico-transition);
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-.pico section[role=region] details summary:hover {
+.pico [role=tablist] button[aria-selected=true] {
-  border-bottom-color: var(--pico-primary-border);
+  background: var(--pico-primary-background);
-  background-color: var(--pico-card-background-color);
+  color: var(--pico-primary-inverse);
 }
-.pico section[role=region] details summary::after {
+.pico [role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
+}
+.pico [role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
+}
+.pico [role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
+}
+.pico [role=tablist] [role=tabpanel][hidden] {
   display: none;
 }
-.pico section[role=region] details > div {
+.pico [role=tablist] [role=tabpanel] > *:last-of-type {
-  opacity: 0;
+  margin-bottom: 0;
-}
-.pico section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
-}
-.pico section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
-}
-.pico section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
 }
 
+@media (max-width: 45em) {
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button,
+  .pico [role=tablist] label {
+    order: initial;
+  }
+  .pico [role=tablist] label,
+  .pico [role=tablist] [role=tabpanel],
+  .pico [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 .pico [popover] {
   border-color: var(--pico-primary);
 }
@@ -4264,52 +4293,6 @@ body:has(dialog[open]) {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-.pico dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.pico dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-.pico dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-.pico dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .pico .timeline {
   position: relative;
   max-width: 100%;