@anyblades/blades 2.4.9 → 3.0.0-alpha.1

package/css/blades.css

@@ -1,10 +1,10 @@
-@charset "UTF-8";
 /*!
- * Blades+Pico CSS ✨🥷
- * Copyright 2026 - Licensed under MIT
+ * Blades CSS v3 with Pico CSS 🥷✨
+ * Copyright 2026 (https://blades.ninja/)
+ * Licensed under MIT
  */
 /*!
- * Pico CSS ✨ v2.4
+ * Blades CSS' Pico fork v2.5 🥷✨
  * Copyright 2019-2025 (https://picocss.com)
  * Copyright 2026 (https://blades.ninja/css/pico/)
  * Licensed under MIT
@@ -12,7 +12,7 @@
 /**
  * Variables
  */
-:root,
+:scope,
 :host {
   --pico-font-family-emoji:
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -59,35 +59,36 @@
   --pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
 }
 @media (min-width: 576px) {
-  :root,
+  :scope,
   :host {
     --pico-font-size: 106.25%;
   }
 }
 @media (min-width: 768px) {
-  :root,
+  :scope,
   :host {
     --pico-font-size: 112.5%;
   }
 }
 @media (min-width: 1024px) {
-  :root,
+  :scope,
   :host {
     --pico-font-size: 118.75%;
   }
 }
 @media (min-width: 1280px) {
-  :root,
+  :scope,
   :host {
     --pico-font-size: 125%;
   }
 }
 @media (min-width: 1536px) {
-  :root,
+  :scope,
   :host {
     --pico-font-size: 131.25%;
   }
 }
+
 a {
   --pico-text-decoration: underline;
 }
@@ -95,9 +96,11 @@ a.secondary,
 a.contrast {
   --pico-text-decoration: underline;
 }
+
 small {
   --pico-font-size: 0.875em;
 }
+
 h1,
 h2,
 h3,
@@ -106,36 +109,43 @@ h5,
 h6 {
   --pico-font-weight: 700;
 }
+
 h1 {
   --pico-font-size: 2rem;
   --pico-line-height: 1.125;
   --pico-typography-spacing-top: 3rem;
 }
+
 h2 {
   --pico-font-size: 1.75rem;
   --pico-line-height: 1.15;
   --pico-typography-spacing-top: 2.625rem;
 }
+
 h3 {
   --pico-font-size: 1.5rem;
   --pico-line-height: 1.175;
   --pico-typography-spacing-top: 2.25rem;
 }
+
 h4 {
   --pico-font-size: 1.25rem;
   --pico-line-height: 1.2;
   --pico-typography-spacing-top: 1.874rem;
 }
+
 h5 {
   --pico-font-size: 1.125rem;
   --pico-line-height: 1.225;
   --pico-typography-spacing-top: 1.6875rem;
 }
+
 h6 {
   --pico-font-size: 1rem;
   --pico-line-height: 1.25;
   --pico-typography-spacing-top: 1.5rem;
 }
+
 thead th,
 thead td,
 tfoot th,
@@ -143,15 +153,18 @@ tfoot td {
   --pico-font-weight: 600;
   --pico-border-width: 0.1875rem;
 }
+
 pre,
 code,
 kbd,
 samp {
   --pico-font-family: var(--pico-font-family-monospace);
 }
+
 kbd {
   --pico-font-weight: bolder;
 }
+
 input:not(
   [type="submit"],
   [type="button"],
@@ -163,25 +176,32 @@ input:not(
 :where(select, textarea) {
   --pico-outline-width: 0.0625rem;
 }
+
 [type="search"] {
   --pico-border-radius: 5rem;
 }
+
 [type="checkbox"],
 [type="radio"] {
   --pico-border-width: 0.125rem;
 }
+
 [type="checkbox"][role="switch"] {
   --pico-border-width: 0.1875rem;
 }
+
 details.dropdown summary:not([role="button"]) {
   --pico-outline-width: 0.0625rem;
 }
+
 nav details.dropdown summary:focus-visible {
   --pico-outline-width: 0.125rem;
 }
+
 [role="search"] {
   --pico-border-radius: 5rem;
 }
+
 [role="search"]:has(
   button.secondary:focus,
   [type="submit"].secondary:focus,
@@ -222,9 +242,11 @@ nav details.dropdown summary:focus-visible {
 [role="group"] [role="button"] {
   --pico-form-element-spacing-horizontal: 2rem;
 }
+
 details summary[role="button"]:not(.outline)::after {
   filter: brightness(0) invert(1);
 }
+
 [aria-busy="true"]:not(input, select, textarea):is(
     button,
     [type="submit"],
@@ -234,11 +256,12 @@ details summary[role="button"]:not(.outline)::after {
   ):not(.outline)::before {
   filter: brightness(0) invert(1);
 }
+
 /**
  * Color schemes
  */
 [data-theme="light"],
-:root:not([data-theme="dark"]),
+:scope:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   color-scheme: light;
   --pico-background-color: #fff;
@@ -352,7 +375,7 @@ details summary[role="button"]:not(.outline)::after {
     [type="radio"],
     [type="file"]
   ),
-:root:not([data-theme="dark"])
+:scope:not([data-theme="dark"])
   input:is(
     [type="submit"],
     [type="button"],
@@ -372,8 +395,9 @@ details summary[role="button"]:not(.outline)::after {
   ) {
   --pico-form-element-focus-color: var(--pico-primary-focus);
 }
+
 @media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
+  :scope:not([data-theme]),
   :host(:not([data-theme])) {
     color-scheme: dark;
     --pico-background-color: rgb(19, 22.5, 30.5);
@@ -478,7 +502,7 @@ details summary[role="button"]:not(.outline)::after {
     --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
     --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
   }
-  :root:not([data-theme])
+  :scope:not([data-theme])
     input:is(
       [type="submit"],
       [type="button"],
@@ -498,11 +522,11 @@ details summary[role="button"]:not(.outline)::after {
     ) {
     --pico-form-element-focus-color: var(--pico-primary-focus);
   }
-  :root:not([data-theme]) details summary[role="button"].contrast:not(.outline)::after,
+  :scope:not([data-theme]) details summary[role="button"].contrast:not(.outline)::after,
   :host(:not([data-theme])) details summary[role="button"].contrast:not(.outline)::after {
     filter: brightness(0);
   }
-  :root:not([data-theme])
+  :scope:not([data-theme])
     [aria-busy="true"]:not(input, select, textarea).contrast:is(
       button,
       [type="submit"],
@@ -649,6 +673,7 @@ details summary[role="button"]:not(.outline)::after {
   ):not(.outline)::before {
   filter: brightness(0);
 }
+
 progress,
 [type="checkbox"],
 [type="radio"],
@@ -665,12 +690,14 @@ progress,
   box-sizing: border-box;
   background-repeat: no-repeat;
 }
+
 ::before,
 ::after {
   text-decoration: inherit;
   vertical-align: inherit;
 }
-:where(:root),
+
+:where(:scope),
 :where(:host) {
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
@@ -689,6 +716,7 @@ progress,
   -o-tab-size: 4;
   tab-size: 4;
 }
+
 /**
  * Landmarks
  */
@@ -696,20 +724,24 @@ body {
   width: 100%;
   margin: 0;
 }
+
 main {
   display: block;
 }
+
 body > header,
 body > main,
 body > footer {
   padding-block: var(--pico-block-spacing-vertical);
 }
+
 /**
  * Section
  */
 section {
   margin-bottom: var(--pico-block-spacing-vertical);
 }
+
 /**
  * Container
  */
@@ -721,6 +753,7 @@ section {
   padding-right: var(--pico-spacing);
   padding-left: var(--pico-spacing);
 }
+
 @media (min-width: 576px) {
   .container {
     max-width: 510px;
@@ -748,6 +781,7 @@ section {
     max-width: 1450px;
   }
 }
+
 /**
  * Grid
  * Minimal grid system with auto-layout columns
@@ -767,6 +801,7 @@ section {
   min-width: 0;
   margin-bottom: 0; /* https://github.com/picocss/pico/issues/738 */
 }
+
 /**
  * Overflow auto
  */
@@ -780,6 +815,7 @@ b,
 strong {
   font-weight: bolder;
 }
+
 sub,
 sup {
   position: relative;
@@ -787,12 +823,15 @@ sup {
   line-height: 0;
   vertical-align: baseline;
 }
+
 sub {
   bottom: -0.25em;
 }
+
 sup {
   top: -0.5em;
 }
+
 address,
 blockquote,
 dl,
@@ -807,6 +846,7 @@ ul {
   font-style: normal;
   font-weight: var(--pico-font-weight);
 }
+
 h1,
 h2,
 h3,
@@ -821,31 +861,40 @@ h6 {
   line-height: var(--pico-line-height);
   font-family: var(--pico-font-family);
 }
+
 h1 {
   --pico-color: var(--pico-h1-color);
 }
+
 h2 {
   --pico-color: var(--pico-h2-color);
 }
+
 h3 {
   --pico-color: var(--pico-h3-color);
 }
+
 h4 {
   --pico-color: var(--pico-h4-color);
 }
+
 h5 {
   --pico-color: var(--pico-h5-color);
 }
+
 h6 {
   --pico-color: var(--pico-h6-color);
 }
+
 :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul)
   ~ :is(h1, h2, h3, h4, h5, h6) {
   margin-top: var(--pico-typography-spacing-top);
 }
+
 p {
   margin-bottom: var(--pico-typography-spacing-vertical);
 }
+
 hgroup {
   margin-bottom: var(--pico-typography-spacing-vertical);
 }
@@ -858,22 +907,27 @@ hgroup > *:not(:first-child):last-child {
   --pico-font-weight: unset;
   font-size: 1rem;
 }
+
 :where(ol, ul) li {
   margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25);
 }
+
 :where(dl, ol, ul) :where(dl, ol, ul) {
   margin: 0;
   margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25);
 }
+
 ul li {
   list-style: square;
 }
+
 mark {
   padding: 0.125rem 0.25rem;
   background-color: var(--pico-mark-background-color);
   color: var(--pico-mark-color);
   vertical-align: baseline;
 }
+
 blockquote {
   display: block;
   margin: var(--pico-typography-spacing-vertical) 0;
@@ -887,24 +941,30 @@ blockquote footer {
   margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5);
   color: var(--pico-blockquote-footer-color);
 }
+
 abbr[title] {
   border-bottom: 1px dotted;
   text-decoration: none;
   cursor: help;
 }
+
 ins {
   color: var(--pico-ins-color);
   text-decoration: none;
 }
+
 del {
   color: var(--pico-del-color);
 }
+
 ::-moz-selection {
   background-color: var(--pico-text-selection-color);
 }
+
 ::selection {
   background-color: var(--pico-text-selection-color);
 }
+
 /**
  * Link
  */
@@ -982,9 +1042,11 @@ del {
   --pico-color: var(--pico-contrast-hover);
   --pico-underline: var(--pico-contrast-hover-underline);
 }
+
 a[role="button"] {
   display: inline-block;
 }
+
 /**
  * Button
  */
@@ -994,12 +1056,14 @@ button {
   font-family: inherit;
   text-transform: none;
 }
+
 button,
 [type="submit"],
 [type="reset"],
 [type="button"] {
   -webkit-appearance: button;
 }
+
 button,
 [type="submit"],
 [type="reset"],
@@ -1065,11 +1129,13 @@ button:is([aria-current]:not([aria-current="false"])):focus,
     var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
 }
+
 [type="submit"],
 [type="reset"],
 [type="button"] {
   margin-bottom: var(--pico-spacing);
 }
+
 :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
 [type="reset"],
 [type="file"]::file-selector-button {
@@ -1107,6 +1173,7 @@ button:is([aria-current]:not([aria-current="false"])):focus,
     var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
 }
+
 :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
   --pico-background-color: var(--pico-contrast-background);
   --pico-border-color: var(--pico-contrast-border);
@@ -1130,6 +1197,7 @@ button:is([aria-current]:not([aria-current="false"])):focus,
     var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
 }
+
 :is(button, [type="submit"], [type="button"], [role="button"]).outline,
 [type="reset"].outline {
   --pico-background-color: transparent;
@@ -1147,6 +1215,7 @@ button:is([aria-current]:not([aria-current="false"])):focus,
   --pico-color: var(--pico-primary-hover);
   --pico-border-color: var(--pico-primary-hover);
 }
+
 :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
 [type="reset"].outline {
   --pico-color: var(--pico-secondary);
@@ -1162,6 +1231,7 @@ button:is([aria-current]:not([aria-current="false"])):focus,
   --pico-color: var(--pico-secondary-hover);
   --pico-border-color: var(--pico-secondary-hover);
 }
+
 :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
   --pico-color: var(--pico-contrast);
   --pico-border-color: var(--pico-contrast);
@@ -1175,12 +1245,14 @@ button:is([aria-current]:not([aria-current="false"])):focus,
   --pico-color: var(--pico-contrast-hover);
   --pico-border-color: var(--pico-contrast-hover);
 }
+
 :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
 :where(fieldset[disabled])
   :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
   opacity: 0.5;
   pointer-events: none;
 }
+
 /**
  * Table
  */
@@ -1190,6 +1262,7 @@ button:is([aria-current]:not([aria-current="false"])):focus,
   border-spacing: 0;
   text-indent: 0;
 }
+
 th,
 td {
   padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
@@ -1199,46 +1272,57 @@ td {
   font-weight: var(--pico-font-weight);
   text-align: start;
 }
+
 tfoot th,
 tfoot td {
   border-top: var(--pico-border-width) solid var(--pico-table-border-color);
   border-bottom: 0;
 }
+
 table.striped tbody tr:nth-child(odd) th,
 table.striped tbody tr:nth-child(odd) td {
   background-color: var(--pico-table-row-stripped-background-color);
 }
+
 /**
  * Embedded content
  */
 :where(audio, canvas, iframe, img, svg, video) {
   vertical-align: middle;
 }
+
 audio,
 video {
   display: inline-block;
 }
+
 audio:not([controls]) {
   display: none;
   height: 0;
 }
+
 :where(iframe) {
   border-style: none;
 }
+
 img:not([height]) {
     max-width: 100%;
     height: auto;
   }
-img{
+
+img {
   border-style: none;
 }
+
 :where(svg:not([fill])) {
   fill: currentColor;
 }
-svg:not(:root),
+
+svg:not(:scope),
 svg:not(:host) {
   overflow: hidden;
 }
+
 /**
  * Code
  */
@@ -1250,15 +1334,18 @@ samp {
   font-size: 0.875em;
   font-family: var(--pico-font-family);
 }
+
 pre code,
 pre samp {
   font-size: inherit;
   font-family: inherit;
 }
+
 pre {
   -ms-overflow-style: scrollbar;
   overflow: auto;
 }
+
 pre,
 code,
 var,
@@ -1270,6 +1357,7 @@ samp {
   font-weight: var(--pico-font-weight);
   line-height: initial;
 }
+
 code,
 var,
 kbd,
@@ -1277,6 +1365,7 @@ samp {
   display: inline-block;
   padding: 0.375rem;
 }
+
 pre {
   display: block;
   margin-bottom: var(--pico-spacing);
@@ -1289,11 +1378,13 @@ pre > samp {
   background: none;
   line-height: var(--pico-line-height);
 }
+
 kbd {
   background-color: var(--pico-code-kbd-background-color);
   color: var(--pico-code-kbd-color);
   vertical-align: baseline;
 }
+
 /**
  * Figure
  */
@@ -1306,6 +1397,7 @@ figure figcaption {
   padding: calc(var(--pico-spacing) * 0.5) 0;
   color: var(--pico-muted-color);
 }
+
 /**
  * Misc
  */
@@ -1316,10 +1408,12 @@ hr {
   border-top: 1px solid var(--pico-muted-border-color);
   color: inherit;
 }
+
 [hidden],
 template {
   display: none !important;
 }
+
 canvas {
   display: inline-block;
 }
@@ -1336,64 +1430,80 @@ textarea {
   font-family: inherit;
   letter-spacing: inherit;
 }
+
 input {
   overflow: visible;
 }
+
 select {
   text-transform: none;
 }
+
 legend {
   max-width: 100%;
   padding: 0;
   color: inherit;
   white-space: normal;
 }
+
 textarea {
   overflow: auto;
 }
+
 [type="checkbox"],
 [type="radio"] {
   padding: 0;
 }
+
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
   height: auto;
 }
+
 [type="search"] {
   -webkit-appearance: textfield;
   outline-offset: -2px;
 }
+
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
+
 ::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit;
 }
+
 ::-moz-focus-inner {
   padding: 0;
   border-style: none;
 }
+
 :-moz-focusring {
   outline: none;
 }
+
 :-moz-ui-invalid {
   box-shadow: none;
 }
+
 ::-ms-expand {
   display: none;
 }
+
 [type="file"],
 [type="range"] {
   padding: 0;
   border-width: 0;
 }
+
 input:not([type="checkbox"], [type="radio"], [type="range"]) {
   height: calc(
     1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
       var(--pico-border-width) * 2
   );
 }
+
 fieldset {
   width: 100%;
   min-width: 0;
@@ -1402,6 +1512,7 @@ fieldset {
   padding: 0;
   border: 0;
 }
+
 label,
 fieldset legend {
   display: block;
@@ -1409,15 +1520,18 @@ fieldset legend {
   color: var(--pico-color);
   font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
 }
+
 fieldset legend {
   margin-bottom: calc(var(--pico-spacing) * 0.5);
 }
+
 input:not([type="checkbox"], [type="radio"]),
 button[type="submit"],
 select,
 textarea {
   width: 100%;
 }
+
 input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
 select,
 textarea {
@@ -1426,6 +1540,7 @@ textarea {
   appearance: none;
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
 }
+
 input,
 select,
 textarea {
@@ -1446,6 +1561,7 @@ textarea {
     color var(--pico-transition),
     box-shadow var(--pico-transition);
 }
+
 input:not(
     [type="submit"],
     [type="button"],
@@ -1457,6 +1573,7 @@ input:not(
 :where(select, textarea):not([readonly]):is(:active, :focus) {
   --pico-background-color: var(--pico-form-element-active-background-color);
 }
+
 input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(
     :active,
     :focus
@@ -1464,6 +1581,7 @@ input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [re
 :where(select, textarea):not([readonly]):is(:active, :focus) {
   --pico-border-color: var(--pico-form-element-active-border-color);
 }
+
 input:not(
     [type="submit"],
     [type="button"],
@@ -1475,6 +1593,7 @@ input:not(
 :where(select, textarea):not([readonly]):focus {
   --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
 }
+
 input:not([type="submit"], [type="button"], [type="reset"])[disabled],
 select[disabled],
 textarea[disabled],
@@ -1484,9 +1603,11 @@ label[aria-disabled="true"],
   opacity: var(--pico-form-element-disabled-opacity);
   pointer-events: none;
 }
+
 label[aria-disabled="true"] input[disabled] {
   opacity: 1;
 }
+
 :where(input, select, textarea):not(
     [type="checkbox"],
     [type="radio"],
@@ -1553,6 +1674,7 @@ label[aria-disabled="true"] input[disabled] {
   ) {
   --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
 }
+
 [dir="rtl"]
   :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is(
     [aria-invalid],
@@ -1561,6 +1683,7 @@ label[aria-disabled="true"] input[disabled] {
   ) {
   background-position: center left 0.75rem;
 }
+
 input::placeholder,
 input::-webkit-input-placeholder,
 textarea::placeholder,
@@ -1569,11 +1692,13 @@ select:invalid {
   color: var(--pico-form-element-placeholder-color);
   opacity: 1;
 }
+
 input:not([type="checkbox"], [type="radio"]),
 select,
 textarea {
   margin-bottom: var(--pico-spacing);
 }
+
 select::-ms-expand {
   border: 0;
   background-color: transparent;
@@ -1592,9 +1717,11 @@ select[multiple] option:checked {
   background: var(--pico-form-element-selected-background-color);
   color: var(--pico-form-element-color);
 }
+
 [dir="rtl"] select:not([multiple], [size]) {
   background-position: center left 0.75rem;
 }
+
 textarea {
   display: block;
   resize: vertical;
@@ -1607,6 +1734,7 @@ textarea[aria-invalid] {
   background-position: top right 0.75rem !important;
   background-size: 1rem var(--pico-icon-height) !important;
 }
+
 :where(input, select, textarea, fieldset, .grid) + small {
   display: block;
   width: 100%;
@@ -1620,9 +1748,11 @@ textarea[aria-invalid] {
 :where(input, select, textarea, fieldset, .grid)[aria-invalid="true"] + small {
   color: var(--pico-del-color);
 }
+
 label > :where(input, select, textarea) {
   margin-top: calc(var(--pico-spacing) * 0.25);
 }
+
 /**
  * Checkboxes, Radios and Switches
  */
@@ -1631,6 +1761,7 @@ label:has([type="checkbox"], [type="radio"]) {
   width: fit-content;
   cursor: pointer;
 }
+
 [type="checkbox"],
 [type="radio"] {
   -webkit-appearance: none;
@@ -1671,6 +1802,7 @@ label:has([type="checkbox"], [type="radio"]) {
 [type="radio"] ~ label:not(:last-of-type) {
   margin-inline-end: 1em;
 }
+
 [type="checkbox"]:indeterminate {
   --pico-background-color: var(--pico-primary-background);
   --pico-border-color: var(--pico-primary-border);
@@ -1679,6 +1811,7 @@ label:has([type="checkbox"], [type="radio"]) {
   background-size: 0.75em auto;
   background-repeat: no-repeat;
 }
+
 [type="radio"] {
   border-radius: 50%;
 }
@@ -1689,6 +1822,7 @@ label:has([type="checkbox"], [type="radio"]) {
   border-width: 0.35em;
   background-image: none;
 }
+
 [type="checkbox"][role="switch"] {
   --pico-background-color: var(--pico-switch-background-color);
   --pico-color: var(--pico-switch-color);
@@ -1727,6 +1861,7 @@ label:has([type="checkbox"], [type="radio"]) {
 [type="checkbox"][role="switch"][disabled] {
   --pico-background-color: var(--pico-border-color);
 }
+
 [type="checkbox"][aria-invalid="false"]:checked,
 [type="checkbox"][aria-invalid="false"]:checked:active,
 [type="checkbox"][aria-invalid="false"]:checked:focus,
@@ -1743,6 +1878,7 @@ label:has([type="checkbox"], [type="radio"]) {
 [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
   --pico-background-color: var(--pico-form-element-invalid-border-color);
 }
+
 [type="checkbox"][aria-invalid="false"]:checked,
 [type="checkbox"][aria-invalid="false"]:checked:active,
 [type="checkbox"][aria-invalid="false"]:checked:focus,
@@ -1765,6 +1901,7 @@ label:has([type="checkbox"], [type="radio"]) {
 [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
   --pico-border-color: var(--pico-form-element-invalid-border-color);
 }
+
 /**
  * Input type color
  */
@@ -1782,6 +1919,7 @@ label:has([type="checkbox"], [type="radio"]) {
   border: 0;
   border-radius: calc(var(--pico-border-radius) * 0.5);
 }
+
 /**
  * Input type datetime
  */
@@ -1804,6 +1942,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is(
 input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
   background-image: var(--pico-icon-time);
 }
+
 [type="date"]::-webkit-calendar-picker-indicator,
 [type="datetime-local"]::-webkit-calendar-picker-indicator,
 [type="month"]::-webkit-calendar-picker-indicator,
@@ -1814,6 +1953,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
   margin-left: var(--pico-icon-position);
   opacity: 0;
 }
+
 @-moz-document url-prefix() {
   [type="date"],
   [type="datetime-local"],
@@ -1828,6 +1968,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
   :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
   text-align: end;
 }
+
 /**
  * Input type file
  */
@@ -1854,6 +1995,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
     var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
 }
+
 /**
  * Input type range
  */
@@ -1963,6 +2105,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
 [type="range"]:active::-ms-thumb {
   transform: scale(1.25);
 }
+
 /**
  * Input type search
  */
@@ -2000,6 +2143,7 @@ input:not(
   )[type="search"][aria-invalid="true"] {
   background-image: var(--pico-icon-search), var(--pico-icon-invalid);
 }
+
 [dir="rtl"]
   :where(input):not(
     [type="checkbox"],
@@ -2086,6 +2230,7 @@ details[open] > summary:not([role]):not(:focus) {
 details[open] > summary::after {
   transform: rotate(0);
 }
+
 [dir="rtl"] details summary {
   text-align: end;
 }
@@ -2093,6 +2238,7 @@ details[open] > summary::after {
   float: left;
   background-position: left center;
 }
+
 /**
  * Card (<article>)
  */
@@ -2124,6 +2270,7 @@ article > footer {
   border-bottom-right-radius: var(--pico-border-radius);
   border-bottom-left-radius: var(--pico-border-radius);
 }
+
 /**
  * Dropdown (details.dropdown)
  */
@@ -2146,9 +2293,11 @@ 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 +
@@ -2191,6 +2340,7 @@ 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-block;
   margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
@@ -2206,6 +2356,7 @@ nav details.dropdown > summary:not([role]) {
 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;
@@ -2271,9 +2422,11 @@ 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;
@@ -2281,6 +2434,7 @@ details.dropdown[open] > summary + ul {
     opacity var(--pico-transition),
     transform 0s ease-in-out 0s;
 }
+
 details.dropdown[open] > summary::before {
   display: block;
   z-index: 1;
@@ -2292,9 +2446,11 @@ details.dropdown[open] > summary::before {
   content: "";
   cursor: default;
 }
+
 label > details.dropdown {
   margin-top: calc(var(--pico-spacing) * 0.25);
 }
+
 /**
  * Group ([role="group"], [role="search"])
  */
@@ -2453,6 +2609,7 @@ label > details.dropdown {
     box-shadow: none;
   }
 }
+
 [role="search"] > *:first-child {
   border-top-left-radius: 5rem;
   border-bottom-left-radius: 5rem;
@@ -2461,6 +2618,7 @@ label > details.dropdown {
   border-top-right-radius: 5rem;
   border-bottom-right-radius: 5rem;
 }
+
 /**
  * Loading ([aria-busy=true])
  */
@@ -2483,6 +2641,7 @@ label > details.dropdown {
 [aria-busy="true"]:not(input, select, textarea, html, form):empty {
   text-align: center;
 }
+
 button[aria-busy="true"],
 [type="submit"][aria-busy="true"],
 [type="button"][aria-busy="true"],
@@ -2491,13 +2650,15 @@ button[aria-busy="true"],
 a[aria-busy="true"] {
   pointer-events: none;
 }
+
 /**
  * Modal (<dialog>)
  */
-:root,
+:scope,
 :host {
   --pico-scrollbar-width: 0px;
 }
+
 dialog {
   display: flex;
   z-index: 999;
@@ -2587,6 +2748,7 @@ dialog:not([open]),
 dialog[open="false"] {
   display: none;
 }
+
 .modal-is-open {
   padding-right: var(--pico-scrollbar-width, 0px);
   overflow: hidden;
@@ -2597,6 +2759,7 @@ dialog[open="false"] {
   pointer-events: auto;
   touch-action: auto;
 }
+
 :where(.modal-is-opening, .modal-is-closing) dialog,
 :where(.modal-is-opening, .modal-is-closing) dialog > article {
   animation-duration: 0.2s;
@@ -2611,11 +2774,13 @@ dialog[open="false"] {
   animation-delay: 0.2s;
   animation-name: modal;
 }
+
 .modal-is-closing dialog,
 .modal-is-closing dialog > article {
   animation-delay: 0s;
   animation-direction: reverse;
 }
+
 @keyframes modal-overlay {
   from {
     backdrop-filter: none;
@@ -2635,10 +2800,12 @@ dialog[open="false"] {
   float: left;
   content: "​";
 }
+
 nav,
 nav ul {
   display: flex;
 }
+
 nav {
   justify-content: space-between;
   overflow: visible;
@@ -2713,6 +2880,7 @@ nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
   text-decoration: none;
   pointer-events: none;
 }
+
 aside nav,
 aside ol,
 aside ul,
@@ -2729,9 +2897,11 @@ aside li a {
 aside li [role="button"] {
   margin: inherit;
 }
+
 [dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child)::after {
   content: "\\";
 }
+
 /**
  * Progress
  */
@@ -2739,6 +2909,7 @@ progress {
   display: inline-block;
   vertical-align: baseline;
 }
+
 progress {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2783,11 +2954,13 @@ progress::-moz-progress-bar {
     background-color: transparent;
   }
 }
+
 @media (prefers-reduced-motion: no-preference) {
   [dir="rtl"] progress:indeterminate {
     animation-direction: reverse;
   }
 }
+
 @keyframes progress-indeterminate {
   0% {
     background-position: 200% 0;
@@ -2969,17 +3142,21 @@ progress::-moz-progress-bar {
 [aria-controls] {
   cursor: pointer;
 }
+
 [aria-disabled="true"],
 [disabled] {
   cursor: not-allowed;
 }
+
 [aria-hidden="false"][hidden] {
   display: initial;
 }
+
 [aria-hidden="false"][hidden]:not(:focus) {
   clip: rect(0, 0, 0, 0);
   position: absolute;
 }
+
 a,
 area,
 button,
@@ -2991,9 +3168,11 @@ textarea,
 [tabindex] {
   -ms-touch-action: manipulation;
 }
+
 [dir="rtl"] {
   direction: rtl;
 }
+
 /**
  * Reduce Motion Features
  */
@@ -3010,46 +3189,37 @@ textarea,
     transition-duration: 0s !important;
   }
 }
+/*!
+ * 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.
+/* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
 
-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 */
+: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
+  );
 }
-/* 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;
-}
+/* Layout */
 /*
 \3c !--section:code-->
 ```css */
@@ -3098,11 +3268,14 @@ How it works:
     }
 /* 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]) {
     position: relative;
   }
+
 .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class])::before {
       display: block;
       position: absolute;
@@ -3110,6 +3283,7 @@ How it works:
       content: "";
       opacity: 12.5%;
     }
+
 .breakout-all > *:is(h2, h3, h4, h5, h6):not([class])::before {
       top: 50%;
       right: 100%;
@@ -3119,15 +3293,19 @@ How it works:
       transform: translateY(-50%);
       background: linear-gradient(to left, gray, transparent);
     }
+
 /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
+
 .breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr + *)::before {
         display: none !important;
       }
+
 .breakout-all > *:is(hr) {
     height: 0.5rem;
     overflow: visible;
     border: none;
   }
+
 .breakout-all > *:is(hr)::before {
       left: 50%;
       width: 100dvw;
@@ -3135,13 +3313,9 @@ How it works:
       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:
 
@@ -3175,8 +3349,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:h-anchor-->
+/*\3c !--section:docs-->
+
+## Heading anchors
 
 Links with `href="#..."` inside headings are automatically displayed as anchors:
 
@@ -3209,11 +3423,9 @@ h1 a[aria-hidden="true"], h2 a[aria-hidden="true"], h3 a[aria-hidden="true"], h4
         visibility: visible;
       }
   }
-/*```
-
-**PRO** example of automatic anchors for `11ty`+`markdown-it-anchor`: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
+/*\3c !--section:docs-->
 
-\3c !--section:list-->
+## Custom markers
 
 Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
 
@@ -3246,7 +3458,7 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
   }
 /*```
 
-### Markerless
+## Markerless
 
 `.markerless` removes markers and reduces padding:
 
@@ -3269,7 +3481,7 @@ ul.markerless li, ol.markerless li {
     }
 /*```
 
-### Unlist
+## Unlist
 
 `.unlist` removes list styling at all:
 
@@ -3297,65 +3509,6 @@ ul.unlist,
 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
@@ -3470,11 +3623,12 @@ Living examples: \3c !--A-Z-->
 
 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-->
@@ -3484,7 +3638,9 @@ pre {
     border-radius: 0
 }
   }
+
 /* Code block caption via data-attr (to display filename, etc.) */
+
 code[data-caption]::before {
       display: block;
       margin-bottom: 1rem;
@@ -3492,25 +3648,45 @@ code[data-caption]::before {
       font-style: italic;
       opacity: 50%;
     }
+
 /* 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;
@@ -3519,24 +3695,49 @@ 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;
@@ -3548,8 +3749,66 @@ The `:has(*:placeholder-shown:not(:focus))` trick allows this input state inform
 
 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
@@ -3569,12 +3828,13 @@ Mar 15, 2025
 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:
 
@@ -3621,6 +3881,7 @@ How it works:
   }
 /*```
 \3c !--section--> */
+
 /* Fix the scrollbar color when inverted by https://tailwindcss.com/docs/filter-invert */
 .invert ::-webkit-scrollbar {
     filter: invert(1) !important;
@@ -3665,6 +3926,7 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
     .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       padding-block: 0.75rem; /* match Pico */
     }
+
 html {
   /* Prevent horizontal overflow and scrolling, modern way. */
   overflow-x: clip;
@@ -3673,6 +3935,7 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
 body {
 
   /* Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts. */
@@ -3686,23 +3949,29 @@ body {
   /* Enable global hyphenation */
   /* ... except for links and tables which are better (safer) without hyphenation */
 }
+
 body > main {
     flex-grow: 1;
   }
-body{
+
+body {
   hyphens: auto;
   text-wrap: pretty;
 }
+
 body a,
   body table {
     hyphens: none;
   }
+
 a:not([href^="#"]) {
     text-decoration-thickness: 1px;
   }
+
 a:not([href^="#"]):hover {
       text-decoration-thickness: 2px;
     }
+
 h1,
 h2,
 h3,
@@ -3715,43 +3984,55 @@ h1 {
   margin-bottom: 1rem; /* for tw-typography */
   font-size: 2.5em; /* for pico.css & tw-typography */
 }
+
 hr {
   margin-block: 2em; /* for pico.css & tw-typography */
 }
+
 ul ul {
     font-size: 87.5%;
   }
+
 dl dt {
     margin-block: 0.25rem;
     font-weight: 500;
   }
+
 dl dd {
     margin-block-end: 1rem;
   }
+
 pre small {
     font-weight: lighter;
     opacity: 75%;
   }
+
 pre:has(code) {
     background: #181c25 !important;
   }
+
 table th {
     font-weight: bold;
     vertical-align: bottom;
   }
+
 table td {
     vertical-align: top;
   }
+
 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;
@@ -3759,12 +4040,14 @@ table pre {
     color: black;
     font-size: 0.75rem;
   }
+
 .breakout > img,
   .breakout > figure,
   .breakout-all > img,
   .breakout-all > figure {
     margin-bottom: 1rem;
   }
+
 .faded a {
     text-decoration-style: dotted;
   }