@anyblades/blades 2.4.9 → 3.0.0-alpha.1

package/css/blades.standalone.css

@@ -1,74 +1,51 @@
+/*!
+ * Blades CSS standalone kit v3 🥷
+ * Copyright 2026 (https://blades.ninja/css/standalone/)
+ * Licensed under MIT
+ */
 /*\3c !--section:code-->```css */
 
 /* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
 
-/* Layout */
-
-/*\3c !--section:columns-->
-
-`.columns` automatically creates columns with at least 30 characters each:
-
-<article class="columns">
-  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
-</article>
-
-The smaller the font size, the more columns will be created:
-
-<article class="columns" style="font-size: 65%">
-  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
-</article>
-
-Useful for tables of contents and long lists.
-
-How it works:
-```css */
-
-.columns {
-  -moz-columns: 25ch auto;
-  columns: 25ch auto; /* common container 65ch / 25ch => 2 columns max, with a buffer for list paddings */
-}
-
-/* Avoid breaking inside elements, such as nested lists */
-
-.columns > * {
-    -moz-column-break-inside: avoid;
-    break-inside: avoid;
-  }
-
-/*```\3c !--section:jump-->
-
-`data-jump-to="top"` fixes element to the corner and adds extra top padding to make it easy to click:
-```css */
-
-[data-jump-to="top"] {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  padding-top: 50vh;
+:scope,
+:host {
+  /**
+   * Design Tokens !!! NAMING NOT FINALIZED YET !!!
+   * `--in-pico: *` props below are for reference only (not to be used)
+   */
+  --blades-token-primary: var(--pico-primary, dodgerblue);
+  --in-pico: #01aaff;
+  --blades-token-secondary: var(--pico-secondary, lightslategray);
+  --in-pico: #969eaf;
+
+  /**
+   * Inherited Variables
+   */
+  --blades-timeline-border-color: color-mix(
+    in srgb,
+    var(--blades-token-secondary) 50%,
+    transparent
+  );
 }
 
+/* Layout */
 /*
 \3c !--section:code-->
 ```css */
-
 .breakout,
 .breakout-all {
   max-width: calc(10% + 65ch + 10%);
   /* Prepare the container for breakout elements */
   padding-inline: 10%;
 }
-
 @media (width < 768px) {
-
 .breakout,
 .breakout-all {
     max-width: calc(1rem + 65ch + 1rem);
     padding-inline: 1rem
 }
   }
-
 /* Breakout direct children only */
-
 .breakout > *:is(
       table,
       pre,
@@ -94,17 +71,14 @@ How it works:
       margin-left: 50%;
       transform: translateX(-50%);
     }
-
 /* Respect img/picture min-width */
-
 .breakout > *:is(img, picture):not(.does-not-exist), .breakout-all > *:is(img, picture):not(.does-not-exist) /* soft win specificity over .breakout-item above */ {
       min-width: auto;
     }
-
 /* Max out the width of the element */
-
 .breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
-      width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
+      width: min(125%, 100dvw) !important;
+      /* !important is for cases like figure.breakout-item-max @TODO */
     }
 
 .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
@@ -147,15 +121,10 @@ How it works:
       height: 100%;
       transform: translateX(-50%);
     }
-
 /*```
-\3c !--section:summary-->
-
-The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
-
 \3c !--section:docs-->
 
-### Demo \3c !-- inside parent .breakout -->
+The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
 
 Break out a wide image from the text flow:
 
@@ -189,10 +158,48 @@ Or anything else:
 <hr>
 
 \3c !--section--> */
+/*\3c !--section:docs-->
+
+`.columns` automatically creates columns with at least 30 characters each:
+
+<article class="columns">
+  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
+</article>
+
+The smaller the font size, the more columns will be created:
+
+<article class="columns" style="font-size: 65%">
+  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+</article>
+
+Useful for tables of contents and long lists.
+
+\3c !--section:code-->
+```css */
+.columns {
+  -moz-columns: 25ch auto;
+  columns: 25ch auto; /* common container 65ch / 25ch => 2 columns max, with a buffer for list paddings */
+}
+/* Avoid breaking inside elements, such as nested lists */
+.columns > * {
+    -moz-column-break-inside: avoid;
+    break-inside: avoid;
+  }
+/*```\3c !--section:docs-->
+
+`<a href="#top">` is automatically fixed to the bottom-right corner with extra top padding for easier clicking:
+```css */
+[href="#top"] {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  padding-top: 50vh;
+}
 
 /* Content */
+/*\3c !--section:docs-->
 
-/*\3c !--section:h-anchor-->
+## Heading anchors
 
 Links with `href="#..."` inside headings are automatically displayed as anchors:
 
@@ -202,7 +209,6 @@ Links with `href="#..."` inside headings are automatically displayed as anchors:
 
 How it works:
 ```css */
-
 h1,
 h2,
 h3,
@@ -211,7 +217,6 @@ h5,
 h6 {
   position: relative;
 }
-
 h1 a[aria-hidden="true"], h2 a[aria-hidden="true"], h3 a[aria-hidden="true"], h4 a[aria-hidden="true"], h5 a[aria-hidden="true"], h6 a[aria-hidden="true"] {
     visibility: hidden;
     position: absolute;
@@ -222,18 +227,14 @@ h1 a[aria-hidden="true"], h2 a[aria-hidden="true"], h3 a[aria-hidden="true"], h4
     color: silver;
     text-decoration: none;
   }
-
 @media /* to avoid double-tap on touch devices */ (hover: hover) {
       h1:hover a[aria-hidden="true"], h2:hover a[aria-hidden="true"], h3:hover a[aria-hidden="true"], h4:hover a[aria-hidden="true"], h5:hover a[aria-hidden="true"], h6:hover a[aria-hidden="true"] {
         visibility: visible;
       }
   }
+/*\3c !--section:docs-->
 
-/*```
-
-**PRO** example of automatic anchors for `11ty`+`markdown-it-anchor`: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
-
-\3c !--section:list-->
+## Custom markers
 
 Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
 
@@ -252,26 +253,21 @@ Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or eve
 
 How it works:
 ```css */
-
 ul[style*="--list-marker:"], ol[style*="--list-marker:"] {
     list-style-type: var(--list-marker);
   }
-
 ul[style*="--list-marker:"] > li, ol[style*="--list-marker:"] > li {
       list-style-type: inherit;
     }
-
 ul li[style*="--list-marker:"], ol li[style*="--list-marker:"] {
     list-style-type: var(--list-marker);
   }
-
 ul li[data-marker]::marker, ol li[data-marker]::marker {
     content: attr(data-marker) " "; /* ⚠️ Chrome and Firefox only */
   }
-
 /*```
 
-### Markerless
+## Markerless
 
 `.markerless` removes markers and reduces padding:
 
@@ -286,18 +282,15 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
 
 How it works:
 ```css */
-
 ul.markerless, ol.markerless {
     padding-inline-start: 1.25rem;
   }
-
 ul.markerless li, ol.markerless li {
       list-style: none;
     }
-
 /*```
 
-### Unlist
+## Unlist
 
 `.unlist` removes list styling at all:
 
@@ -314,7 +307,6 @@ ul.markerless li, ol.markerless li {
 
 How it works:
 ```css */
-
 ul.unlist,
   ul.unlist-all,
   .unlist-all ul,
@@ -323,80 +315,9 @@ ul.unlist,
   .unlist-all ol {
     padding-inline-start: 0;
   }
-
 ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unlist-all > li, .unlist-all ol > li {
       list-style: none;
     }
-
-/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
-\3c !--section:code-->
-```css */
-
-/* Use inline flex only if link contains an icon */
-
-a:not(.does-not-exist):has(> i) {
-    display: inline-flex;
-    overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
-    gap: 0.375ch; /* =3/8 */
-    text-wrap: balance;
-  }
-
-a:not(.does-not-exist) > i {
-    float: left; /*                 ✅ Chrome ❌ Safari */
-    font-style: normal;
-    text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
-  }
-
-/* Favicons */
-
-a:not(.does-not-exist) > i > img {
-      display: inline-block; /* for Tailwind CSS Typography */
-      max-width: none; /* to keep ratio safe */
-      height: 1.25em;
-      margin-block-start: calc(-0.25em / 2);
-    }
-
-a:not(.does-not-exist) > i[class^="fa-"],
-    a:not(.does-not-exist) > i[class*=" fa-"] {
-      line-height: inherit;
-      --fa-width: auto;
-    }
-
-/* Font Awesome */
-
-a:not(.does-not-exist) > i.fa-lg {
-      line-height: normal;
-    }
-
-/*```
-\3c !--section:summary-->
-
-Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
-It automatically handles sizing and alignment while preventing underline on icons.
-
-\3c !--section:docs-->
-
-<article class="breakout-item">
-
-| Use `<i>`-helper with                                                                 | Clean HTML without `<span>ning`      |
-| ------------------------------------------------------------------------------------- | ------------------------------------ |
-| [<i>🥷</i> Emojis](#)                                                                 | `<a><i>🥷</i> Text</a>`              |
-| [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Favicons](#) | `<a><i><img src="..."></i> Text</a>` |
-| [<i class="fa-brands fa-github fa-lg"></i> Font Awesome icons](#)                     | `<a><i class="fa-..."></i> Text</a>` |
-</article>
-
-Or even for:
-
-<article>
-  <a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
-</article>
-
-How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
-
-**PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
-
-\3c !--section--> */
-
 /*\3c !--section:docs-->
 
 ## Column expanders
@@ -418,22 +339,18 @@ Living examples of big tables with `<hr>`-expanders: \3c !--A-Z-->
 
 How it works:
 ```css */
-
 th hr {
     visibility: hidden;
     width: 12ch; /* min ~65/12 = ~5 cols */
     height: 0;
     margin: 0;
   }
-
 th hr.lg {
       width: 18ch;
     }
-
 th hr.x2 {
       width: 24ch;
     }
-
 /*```
 
 ## Borderless table
@@ -450,16 +367,13 @@ th hr.x2 {
 </article>
 
 \3c !--section-->*/
-
 table.borderless th,
   table.borderless td {
     border: none;
   }
-
 /*
 \3c !--section:code-->
 ```css */
-
 table.responsive,
 .breakout > table:not(.does-not-exist),
 .breakout-all > table:not(.does-not-exist) {
@@ -479,7 +393,6 @@ table.responsive,
   transform: translateX(-50%);
   -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
 }
-
 table.responsive th,
   table.responsive td,
   .breakout > table:not(.does-not-exist) th,
@@ -488,7 +401,6 @@ table.responsive th,
   .breakout-all > table:not(.does-not-exist) td {
     padding-inline-start: 0;
   }
-
 /*```
 `table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
 
@@ -516,23 +428,21 @@ Living examples: \3c !--A-Z-->
 - https://blades.ninja/ssg/
 
 \3c !--section--> */
-
 /*\3c !--section:docs-->
 
 The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
 
-```treeview {data-caption="Blades CSS:"}
-./css/
-├── blades.core.css     # reusable class-light utilities, unthemed
-├── blades.theme.css    # minimal opinionated theme
-└── blades.css          # above two together
+```treeview {data-caption="Blades CSS ships:"}
+/css/
+├── blades.css  (Pico CSS successor)
+├── blades.standalone.css  (framework-agnostic)
+├── ninja.css  (experimental add-ons)
+└── pico.css  (underlying fork)
 ```
 
 \3c !--section:code-->
 ```css */
-
 @media (width < 768px) {
-
 pre {
     border-radius: 0
 }
@@ -549,28 +459,43 @@ code[data-caption]::before {
     }
 
 /* Forms */
-
-/* Sources moved here from https://github.com/anyblades/float-label-css for easier maintenance
-\3c !--section:docs-->
+/*!
+ * Float Label CSS v2 by Blades CSS 🥷🏷️
+ * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
+ * Licensed under MIT
+ */
+/*\3c !--section:docs-->
 
 First, we target either:
 1. `<label>` which `:has` inner form inputs (classless approach)
 2. or explicit `.has-float-label` class (explicit approach)
 
 ```css */
-
-label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ),
 .has-float-label {
   display: block;
   position: relative;
+  /*```
+  Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
+  ```css */
 }
-
 /*```
   Then, we define the default/fallback state (when the float label should be minimized):
   ```css */
-
-label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
-  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) > span,
+  label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) label,
   .has-float-label > span,
   .has-float-label label {
     position: absolute;
@@ -579,46 +504,120 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
     font-size: 75%;
     cursor: text;
   }
-
-/*```
-  Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
-  ```css */
-
-label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
     opacity: 0;
   }
-
-label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
     opacity: 0;
   }
-
-label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
     opacity: 0;
   }
-
-label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
       font-size: inherit;
       opacity: 50%;
     }
-
-label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
-    label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ):has(*:placeholder-shown:not(:focus)) label,
     .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
     .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       font-size: inherit;
       opacity: 50%;
     }
-
 /*```
 
 The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
 
 Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
 
-\3c !--section-->*/
+*/
 
 /* Components */
+/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
+\3c !--section:code-->
+```css */
+/* Use inline flex only if link contains an icon */
+a:not(.does-not-exist):has(> i) {
+    display: inline-flex;
+    overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
+    gap: 0.375ch; /* =3/8 */
+    text-wrap: balance;
+  }
+a:not(.does-not-exist) > i {
+    float: left; /*                 ✅ Chrome ❌ Safari */
+    font-style: normal;
+    text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
+  }
+/* Favicons */
+a:not(.does-not-exist) > i > img {
+      display: inline-block; /* for Tailwind CSS Typography */
+      max-width: none; /* to keep ratio safe */
+      height: 1.25em;
+      margin-block-start: calc(-0.25em / 2);
+    }
+a:not(.does-not-exist) > i[class^="fa-"],
+    a:not(.does-not-exist) > i[class*=" fa-"] {
+      line-height: inherit;
+      --fa-width: auto;
+    }
+/* Font Awesome */
+a:not(.does-not-exist) > i.fa-lg {
+      line-height: normal;
+    }
+/*```
+\3c !--section:summary-->
+
+Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
+It automatically handles sizing and alignment while preventing underline on icons.
+
+\3c !--section:docs-->
+
+<article class="breakout-item">
 
+| Use `<i>`-helper with                                                                 | Clean HTML without `<span>ning`      |
+| ------------------------------------------------------------------------------------- | ------------------------------------ |
+| [<i>🥷</i> Emojis](#)                                                                 | `<a><i>🥷</i> Text</a>`              |
+| [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Favicons](#) | `<a><i><img src="..."></i> Text</a>` |
+| [<i class="fa-brands fa-github fa-lg"></i> Font Awesome icons](#)                     | `<a><i class="fa-..."></i> Text</a>` |
+</article>
+
+Or even for:
+
+<article>
+  <a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
+</article>
+
+How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
+
+\3c !--section--> */
 /*\3c !--section:docs-->
 
 Use `dl.timeline` or wrap a `<dl>` with `.has-timeline` to style it as a
@@ -635,18 +634,16 @@ Mar 15, 2025
 </article>
 
 \3c !--section:code-->```css */
-
 dl.timeline dd, .has-timeline > dl dd {
     margin-block: 0;
     padding: 0.25rem 0 0.75rem 1rem;
-    border-inline-start: 0.25rem solid gray;
+    border-inline-start: 0.25rem solid var(--blades-timeline-border-color);
   }
 
 /* Utilities */
-
 /*\3c !--section:docs-->
 
-## Auto-dark
+## Dark auto
 
 `.dark-auto` automatically creates a simple dark version of any element:
 
@@ -656,31 +653,23 @@ dl.timeline dd, .has-timeline > dl dd {
 
 How it works:
 ```css */
-
 /* Per https://picocss.com/docs/css-variables#css-variables-for-color-schemes */
-
 :root {
   --blades-dark-filter: invert(100%) hue-rotate(180deg);
 }
-
 .dark-auto {
   /* Dark color scheme (Forced) */
 }
-
 /* Dark color scheme (Auto) */
-
 @media (prefers-color-scheme: dark) {
-
 .dark-auto {
     filter: var(--blades-dark-filter)
 }
   }
-
 .dark-auto[data-theme="dark"],
   .dark-auto:where([data-theme="dark"] *) {
     filter: var(--blades-dark-filter);
   }
-
 /*```
 
 ## Faded
@@ -693,28 +682,21 @@ How it works:
 
 How it works:
 ```css */
-
 .faded {
   opacity: 50%;
 }
-
 .faded:hover {
     opacity: 87.5%;
   }
-
 /*```
 \3c !--section--> */
 
 /* Fix the scrollbar color when inverted by https://tailwindcss.com/docs/filter-invert */
-
 .invert ::-webkit-scrollbar {
     filter: invert(1) !important;
   }
-
 /*\3c !--section:code-->```css */
-
 /* Default/fallback state */
-
 label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
   label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
   .has-float-label > span,
@@ -724,7 +706,6 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
     opacity: 75%;
     transition: all 0.25s;
   }
-
 label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
   label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
   label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
@@ -735,24 +716,19 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
     padding-inline-start: 1rem; /* match Pico */
     padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
   }
-
 label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
       opacity: 100%;
       -moz-transition: all 0.25s;
       transition: all 0.25s;
     }
-
 label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
       opacity: 100%;
       transition: all 0.25s;
     }
-
 /* Enlarged state */
-
 label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
       padding-block: 0.75rem; /* match Pico */
     }
-
 label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
     label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
     .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
@@ -813,7 +789,6 @@ h5,
 h6 {
   text-wrap: balance;
 }
-
 h1 {
   margin-bottom: 1rem; /* for tw-typography */
   font-size: 2.5em; /* for pico.css & tw-typography */
@@ -858,15 +833,15 @@ table pre {
     margin-bottom: 0.25rem;
   }
 
-[data-jump-to="top"] {
+[href="#top"] {
   opacity: 25%;
 }
 
-[data-jump-to="top"]:hover {
+[href="#top"]:hover {
     opacity: 75%;
   }
 
-[data-jump-to="top"] > i {
+[href="#top"] > i {
     display: inline-block;
     margin: 0.5rem;
     padding: 0.25rem 0.375rem;