@anyblades/blades 0.28.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/assets/blades.css CHANGED
@@ -1,9 +1,483 @@
1
+ @charset "UTF-8";
2
+ /*!
3
+ * Blades+Pico CSS ✨🥷
4
+ * Copyright 2026 - Licensed under MIT
5
+ */
6
+ /*!
7
+ * Pico CSS ✨ v2.2.*
8
+ * Copyright 2019-2025 (https://picocss.com)
9
+ * Copyright 2026 (https://blades.ninja/css/pico/)
10
+ * Licensed under MIT
11
+ */
12
+ :host,:root{--pico-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--pico-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji);--pico-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji);--pico-font-family:var(--pico-font-family-sans-serif);--pico-line-height:1.5;--pico-font-weight:400;--pico-font-size:100%;--pico-text-underline-offset:0.1rem;--pico-border-radius:0.25rem;--pico-border-width:0.0625rem;--pico-outline-width:0.125rem;--pico-transition:0.2s ease-in-out;--pico-spacing:1rem;--pico-typography-spacing-vertical:1rem;--pico-block-spacing-vertical:var(--pico-spacing);--pico-block-spacing-horizontal:var(--pico-spacing);--pico-grid-column-gap:var(--pico-spacing);--pico-grid-row-gap:var(--pico-spacing);--pico-form-element-spacing-vertical:0.75rem;--pico-form-element-spacing-horizontal:1rem;--pico-group-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);--pico-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--pico-form-element-border-color);--pico-modal-overlay-backdrop-filter:blur(0.375rem);--pico-nav-element-spacing-vertical:1rem;--pico-nav-element-spacing-horizontal:0.5rem;--pico-nav-link-spacing-vertical:0.5rem;--pico-nav-link-spacing-horizontal:0.5rem;--pico-nav-breadcrumb-divider:">";--pico-icon-checkbox: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(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-minus: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(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--pico-icon-chevron: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(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-date: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(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--pico-icon-time: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(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-search: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(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--pico-icon-close: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(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--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")}
13
+ @media (min-width:576px){:host,:root{--pico-font-size:106.25%}}
14
+ @media (min-width:768px){:host,:root{--pico-font-size:112.5%}}
15
+ @media (min-width:1024px){:host,:root{--pico-font-size:118.75%}}
16
+ @media (min-width:1280px){:host,:root{--pico-font-size:125%}}
17
+ @media (min-width:1536px){:host,:root{--pico-font-size:131.25%}}
18
+ a{--pico-text-decoration:underline}
19
+ a.contrast,a.secondary{--pico-text-decoration:underline}
20
+ small{--pico-font-size:0.875em}
21
+ h1,h2,h3,h4,h5,h6{--pico-font-weight:700}
22
+ h1{--pico-font-size:2rem;--pico-line-height:1.125;--pico-typography-spacing-top:3rem}
23
+ h2{--pico-font-size:1.75rem;--pico-line-height:1.15;--pico-typography-spacing-top:2.625rem}
24
+ h3{--pico-font-size:1.5rem;--pico-line-height:1.175;--pico-typography-spacing-top:2.25rem}
25
+ h4{--pico-font-size:1.25rem;--pico-line-height:1.2;--pico-typography-spacing-top:1.874rem}
26
+ h5{--pico-font-size:1.125rem;--pico-line-height:1.225;--pico-typography-spacing-top:1.6875rem}
27
+ h6{--pico-font-size:1rem;--pico-line-height:1.25;--pico-typography-spacing-top:1.5rem}
28
+ tfoot td,tfoot th,thead td,thead th{--pico-font-weight:600;--pico-border-width:0.1875rem}
29
+ code,kbd,pre,samp{--pico-font-family:var(--pico-font-family-monospace)}
30
+ kbd{--pico-font-weight:bolder}
31
+ :where(select,textarea),input:not(
32
+ [type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]
33
+ ){--pico-outline-width:0.0625rem}
34
+ [type=search]{--pico-border-radius:5rem}
35
+ [type=checkbox],[type=radio]{--pico-border-width:0.125rem}
36
+ [type=checkbox][role=switch]{--pico-border-width:0.1875rem}
37
+ details.dropdown summary:not([role=button]){--pico-outline-width:0.0625rem}
38
+ nav details.dropdown summary:focus-visible{--pico-outline-width:0.125rem}
39
+ [role=search]{--pico-border-radius:5rem}
40
+ [role=group]:has(
41
+ button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus
42
+ ),[role=search]:has(
43
+ button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus
44
+ ){--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-secondary-focus)}
45
+ [role=group]:has(
46
+ button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus
47
+ ),[role=search]:has(
48
+ button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus
49
+ ){--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-contrast-focus)}
50
+ [role=group] [role=button],[role=group] [type=button],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=submit],[role=search] button{--pico-form-element-spacing-horizontal:2rem}
51
+ details summary[role=button]:not(.outline)::after{filter:brightness(0) invert(1)}
52
+ [aria-busy=true]:not(input,select,textarea):is(
53
+ button,[type=submit],[type=button],[type=reset],[role=button]
54
+ ):not(.outline)::before{filter:brightness(0) invert(1)}
55
+ :host(:not([data-theme=dark])),:root:not([data-theme=dark]),[data-theme=light]{color-scheme:light;--pico-background-color:#fff;--pico-color:#373c44;--pico-text-selection-color:rgba(2, 154, 232, 0.25);--pico-muted-color:#646b79;--pico-muted-border-color:rgb(231, 234, 239.5);--pico-primary:#0172ad;--pico-primary-background:#0172ad;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(1, 114, 173, 0.5);--pico-primary-hover:#015887;--pico-primary-hover-background:#02659a;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(2, 154, 232, 0.5);--pico-primary-inverse:#fff;--pico-secondary:#5d6b89;--pico-secondary-background:#525f7a;--pico-secondary-border:var(--pico-secondary-background);--pico-secondary-underline:rgba(93, 107, 137, 0.5);--pico-secondary-hover:#48536b;--pico-secondary-hover-background:#48536b;--pico-secondary-hover-border:var(--pico-secondary-hover-background);--pico-secondary-hover-underline:var(--pico-secondary-hover);--pico-secondary-focus:rgba(93, 107, 137, 0.25);--pico-secondary-inverse:#fff;--pico-contrast:#181c25;--pico-contrast-background:#181c25;--pico-contrast-border:var(--pico-contrast-background);--pico-contrast-underline:rgba(24, 28, 37, 0.5);--pico-contrast-hover:#000;--pico-contrast-hover-background:#000;--pico-contrast-hover-border:var(--pico-contrast-hover-background);--pico-contrast-hover-underline:var(--pico-secondary-hover);--pico-contrast-focus:rgba(93, 107, 137, 0.25);--pico-contrast-inverse:#fff;--pico-box-shadow:0 0.5rem 2.5rem rgba(129, 145, 181, 0.2);--pico-h1-color:#2d3138;--pico-h2-color:#373c44;--pico-h3-color:#424751;--pico-h4-color:#4d535e;--pico-h5-color:#5c6370;--pico-h6-color:#646b79;--pico-mark-background-color:rgb(252.5, 230.5, 191.5);--pico-mark-color:#0f1114;--pico-ins-color:rgb(28.5, 105.5, 84);--pico-del-color:rgb(136, 56.5, 53);--pico-blockquote-border-color:var(--pico-muted-border-color);--pico-blockquote-footer-color:var(--pico-muted-color);--pico-button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-table-border-color:var(--pico-muted-border-color);--pico-table-row-stripped-background-color:rgba(111, 120, 135, 0.0375);--pico-code-background-color:rgb(243, 244.5, 246.75);--pico-code-color:#646b79;--pico-code-kbd-background-color:var(--pico-color);--pico-code-kbd-color:var(--pico-background-color);--pico-form-element-background-color:rgb(251, 251.5, 252.25);--pico-form-element-selected-background-color:#dfe3eb;--pico-form-element-border-color:#cfd5e2;--pico-form-element-color:#23262c;--pico-form-element-placeholder-color:var(--pico-muted-color);--pico-form-element-active-background-color:#fff;--pico-form-element-active-border-color:var(--pico-primary-border);--pico-form-element-focus-color:var(--pico-primary-border);--pico-form-element-disabled-opacity:0.5;--pico-form-element-invalid-border-color:rgb(183.5, 105.5, 106.5);--pico-form-element-invalid-active-border-color:rgb(200.25, 79.25, 72.25);--pico-form-element-invalid-focus-color:var(--pico-form-element-invalid-active-border-color);--pico-form-element-valid-border-color:rgb(76, 154.5, 137.5);--pico-form-element-valid-active-border-color:rgb(39, 152.75, 118.75);--pico-form-element-valid-focus-color:var(--pico-form-element-valid-active-border-color);--pico-switch-background-color:#bfc7d9;--pico-switch-checked-background-color:var(--pico-primary-background);--pico-switch-color:#fff;--pico-switch-thumb-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-range-border-color:#dfe3eb;--pico-range-active-border-color:#bfc7d9;--pico-range-thumb-border-color:var(--pico-background-color);--pico-range-thumb-color:var(--pico-secondary-background);--pico-range-thumb-active-color:var(--pico-primary-background);--pico-accordion-border-color:var(--pico-muted-border-color);--pico-accordion-active-summary-color:var(--pico-primary-hover);--pico-accordion-close-summary-color:var(--pico-color);--pico-accordion-open-summary-color:var(--pico-muted-color);--pico-card-background-color:var(--pico-background-color);--pico-card-border-color:var(--pico-muted-border-color);--pico-card-box-shadow:var(--pico-box-shadow);--pico-card-sectioning-background-color:rgb(251, 251.5, 252.25);--pico-dropdown-background-color:#fff;--pico-dropdown-border-color:#eff1f4;--pico-dropdown-box-shadow:var(--pico-box-shadow);--pico-dropdown-color:var(--pico-color);--pico-dropdown-hover-background-color:#eff1f4;--pico-loading-spinner-opacity:0.5;--pico-modal-overlay-background-color:rgba(232, 234, 237, 0.75);--pico-progress-background-color:#dfe3eb;--pico-progress-color:var(--pico-primary-background);--pico-tooltip-background-color:var(--pico-contrast-background);--pico-tooltip-color:var(--pico-contrast-inverse);--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(76, 154.5, 137.5)' 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(200.25, 79.25, 72.25)' 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")}
56
+ :host(:not([data-theme=dark])) input:is(
57
+ [type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]
58
+ ),:root:not([data-theme=dark]) input:is(
59
+ [type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]
60
+ ),[data-theme=light] input:is(
61
+ [type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]
62
+ ){--pico-form-element-focus-color:var(--pico-primary-focus)}
63
+ @media only screen and (prefers-color-scheme:dark){:host(:not([data-theme])),:root:not([data-theme]){color-scheme:dark;--pico-background-color:rgb(19, 22.5, 30.5);--pico-color:#c2c7d0;--pico-text-selection-color:rgba(1, 170, 255, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#01aaff;--pico-primary-background:#0172ad;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(1, 170, 255, 0.5);--pico-primary-hover:#79c0ff;--pico-primary-hover-background:#017fc0;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(1, 170, 255, 0.375);--pico-primary-inverse:#fff;--pico-secondary:#969eaf;--pico-secondary-background:#525f7a;--pico-secondary-border:var(--pico-secondary-background);--pico-secondary-underline:rgba(150, 158, 175, 0.5);--pico-secondary-hover:#b3b9c5;--pico-secondary-hover-background:#5d6b89;--pico-secondary-hover-border:var(--pico-secondary-hover-background);--pico-secondary-hover-underline:var(--pico-secondary-hover);--pico-secondary-focus:rgba(144, 158, 190, 0.25);--pico-secondary-inverse:#fff;--pico-contrast:#dfe3eb;--pico-contrast-background:#eff1f4;--pico-contrast-border:var(--pico-contrast-background);--pico-contrast-underline:rgba(223, 227, 235, 0.5);--pico-contrast-hover:#fff;--pico-contrast-hover-background:#fff;--pico-contrast-hover-border:var(--pico-contrast-hover-background);--pico-contrast-hover-underline:var(--pico-contrast-hover);--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-h1-color:#f0f1f3;--pico-h2-color:#e0e3e7;--pico-h3-color:#c2c7d0;--pico-h4-color:#b3b9c5;--pico-h5-color:#a4acba;--pico-h6-color:#8891a4;--pico-mark-background-color:#014063;--pico-mark-color:#fff;--pico-ins-color:#62af9a;--pico-del-color:rgb(205.5, 126, 123);--pico-blockquote-border-color:var(--pico-muted-border-color);--pico-blockquote-footer-color:var(--pico-muted-color);--pico-button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-table-border-color:var(--pico-muted-border-color);--pico-table-row-stripped-background-color:rgba(111, 120, 135, 0.0375);--pico-code-background-color:rgb(26, 30.5, 40.25);--pico-code-color:#8891a4;--pico-code-kbd-background-color:var(--pico-color);--pico-code-kbd-color:var(--pico-background-color);--pico-form-element-background-color:rgb(28, 33, 43.5);--pico-form-element-selected-background-color:#2a3140;--pico-form-element-border-color:#2a3140;--pico-form-element-color:#e0e3e7;--pico-form-element-placeholder-color:#8891a4;--pico-form-element-active-background-color:rgb(26, 30.5, 40.25);--pico-form-element-active-border-color:var(--pico-primary-border);--pico-form-element-focus-color:var(--pico-primary-border);--pico-form-element-disabled-opacity:0.5;--pico-form-element-invalid-border-color:rgb(149.5, 74, 80);--pico-form-element-invalid-active-border-color:rgb(183.25, 63.5, 59);--pico-form-element-invalid-focus-color:var(--pico-form-element-invalid-active-border-color);--pico-form-element-valid-border-color:#2a7b6f;--pico-form-element-valid-active-border-color:rgb(22, 137, 105.5);--pico-form-element-valid-focus-color:var(--pico-form-element-valid-active-border-color);--pico-switch-background-color:#333c4e;--pico-switch-checked-background-color:var(--pico-primary-background);--pico-switch-color:#fff;--pico-switch-thumb-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-range-border-color:#202632;--pico-range-active-border-color:#2a3140;--pico-range-thumb-border-color:var(--pico-background-color);--pico-range-thumb-color:var(--pico-secondary-background);--pico-range-thumb-active-color:var(--pico-primary-background);--pico-accordion-border-color:var(--pico-muted-border-color);--pico-accordion-active-summary-color:var(--pico-primary-hover);--pico-accordion-close-summary-color:var(--pico-color);--pico-accordion-open-summary-color:var(--pico-muted-color);--pico-card-background-color:#181c25;--pico-card-border-color:var(--pico-card-background-color);--pico-card-box-shadow:var(--pico-box-shadow);--pico-card-sectioning-background-color:rgb(26, 30.5, 40.25);--pico-dropdown-background-color:#181c25;--pico-dropdown-border-color:#202632;--pico-dropdown-box-shadow:var(--pico-box-shadow);--pico-dropdown-color:var(--pico-color);--pico-dropdown-hover-background-color:#202632;--pico-loading-spinner-opacity:0.5;--pico-modal-overlay-background-color:rgba(7.5, 8.5, 10, 0.75);--pico-progress-background-color:#202632;--pico-progress-color:var(--pico-primary-background);--pico-tooltip-background-color:var(--pico-contrast-background);--pico-tooltip-color:var(--pico-contrast-inverse);--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")}:host(:not([data-theme])) input:is(
64
+ [type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]
65
+ ),:root:not([data-theme]) input:is(
66
+ [type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]
67
+ ){--pico-form-element-focus-color:var(--pico-primary-focus)}:host(:not([data-theme])) details summary[role=button].contrast:not(.outline)::after,:root:not([data-theme]) details summary[role=button].contrast:not(.outline)::after{filter:brightness(0)}:host(:not([data-theme])) [aria-busy=true]:not(input,select,textarea).contrast:is(
68
+ button,[type=submit],[type=button],[type=reset],[role=button]
69
+ ):not(.outline)::before,:root:not([data-theme]) [aria-busy=true]:not(input,select,textarea).contrast:is(
70
+ button,[type=submit],[type=button],[type=reset],[role=button]
71
+ ):not(.outline)::before{filter:brightness(0)}}
72
+ [data-theme=dark]{color-scheme:dark;--pico-background-color:rgb(19, 22.5, 30.5);--pico-color:#c2c7d0;--pico-text-selection-color:rgba(1, 170, 255, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#01aaff;--pico-primary-background:#0172ad;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(1, 170, 255, 0.5);--pico-primary-hover:#79c0ff;--pico-primary-hover-background:#017fc0;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(1, 170, 255, 0.375);--pico-primary-inverse:#fff;--pico-secondary:#969eaf;--pico-secondary-background:#525f7a;--pico-secondary-border:var(--pico-secondary-background);--pico-secondary-underline:rgba(150, 158, 175, 0.5);--pico-secondary-hover:#b3b9c5;--pico-secondary-hover-background:#5d6b89;--pico-secondary-hover-border:var(--pico-secondary-hover-background);--pico-secondary-hover-underline:var(--pico-secondary-hover);--pico-secondary-focus:rgba(144, 158, 190, 0.25);--pico-secondary-inverse:#fff;--pico-contrast:#dfe3eb;--pico-contrast-background:#eff1f4;--pico-contrast-border:var(--pico-contrast-background);--pico-contrast-underline:rgba(223, 227, 235, 0.5);--pico-contrast-hover:#fff;--pico-contrast-hover-background:#fff;--pico-contrast-hover-border:var(--pico-contrast-hover-background);--pico-contrast-hover-underline:var(--pico-contrast-hover);--pico-contrast-focus:rgba(207, 213, 226, 0.25);--pico-contrast-inverse:#000;--pico-box-shadow:0 0.5rem 2.5rem rgba(7, 8.5, 12, 0.2);--pico-h1-color:#f0f1f3;--pico-h2-color:#e0e3e7;--pico-h3-color:#c2c7d0;--pico-h4-color:#b3b9c5;--pico-h5-color:#a4acba;--pico-h6-color:#8891a4;--pico-mark-background-color:#014063;--pico-mark-color:#fff;--pico-ins-color:#62af9a;--pico-del-color:rgb(205.5, 126, 123);--pico-blockquote-border-color:var(--pico-muted-border-color);--pico-blockquote-footer-color:var(--pico-muted-color);--pico-button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-table-border-color:var(--pico-muted-border-color);--pico-table-row-stripped-background-color:rgba(111, 120, 135, 0.0375);--pico-code-background-color:rgb(26, 30.5, 40.25);--pico-code-color:#8891a4;--pico-code-kbd-background-color:var(--pico-color);--pico-code-kbd-color:var(--pico-background-color);--pico-form-element-background-color:rgb(28, 33, 43.5);--pico-form-element-selected-background-color:#2a3140;--pico-form-element-border-color:#2a3140;--pico-form-element-color:#e0e3e7;--pico-form-element-placeholder-color:#8891a4;--pico-form-element-active-background-color:rgb(26, 30.5, 40.25);--pico-form-element-active-border-color:var(--pico-primary-border);--pico-form-element-focus-color:var(--pico-primary-border);--pico-form-element-disabled-opacity:0.5;--pico-form-element-invalid-border-color:rgb(149.5, 74, 80);--pico-form-element-invalid-active-border-color:rgb(183.25, 63.5, 59);--pico-form-element-invalid-focus-color:var(--pico-form-element-invalid-active-border-color);--pico-form-element-valid-border-color:#2a7b6f;--pico-form-element-valid-active-border-color:rgb(22, 137, 105.5);--pico-form-element-valid-focus-color:var(--pico-form-element-valid-active-border-color);--pico-switch-background-color:#333c4e;--pico-switch-checked-background-color:var(--pico-primary-background);--pico-switch-color:#fff;--pico-switch-thumb-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-range-border-color:#202632;--pico-range-active-border-color:#2a3140;--pico-range-thumb-border-color:var(--pico-background-color);--pico-range-thumb-color:var(--pico-secondary-background);--pico-range-thumb-active-color:var(--pico-primary-background);--pico-accordion-border-color:var(--pico-muted-border-color);--pico-accordion-active-summary-color:var(--pico-primary-hover);--pico-accordion-close-summary-color:var(--pico-color);--pico-accordion-open-summary-color:var(--pico-muted-color);--pico-card-background-color:#181c25;--pico-card-border-color:var(--pico-card-background-color);--pico-card-box-shadow:var(--pico-box-shadow);--pico-card-sectioning-background-color:rgb(26, 30.5, 40.25);--pico-dropdown-background-color:#181c25;--pico-dropdown-border-color:#202632;--pico-dropdown-box-shadow:var(--pico-box-shadow);--pico-dropdown-color:var(--pico-color);--pico-dropdown-hover-background-color:#202632;--pico-loading-spinner-opacity:0.5;--pico-modal-overlay-background-color:rgba(7.5, 8.5, 10, 0.75);--pico-progress-background-color:#202632;--pico-progress-color:var(--pico-primary-background);--pico-tooltip-background-color:var(--pico-contrast-background);--pico-tooltip-color:var(--pico-contrast-inverse);--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")}
73
+ [data-theme=dark] input:is(
74
+ [type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]
75
+ ){--pico-form-element-focus-color:var(--pico-primary-focus)}
76
+ [data-theme=dark] details summary[role=button].contrast:not(.outline)::after{filter:brightness(0)}
77
+ [data-theme=dark] [aria-busy=true]:not(input,select,textarea).contrast:is(
78
+ button,[type=submit],[type=button],[type=reset],[role=button]
79
+ ):not(.outline)::before{filter:brightness(0)}
80
+ [type=checkbox],[type=radio],[type=range],progress{accent-color:var(--pico-primary)}
81
+ *,::after,::before{box-sizing:border-box;background-repeat:no-repeat}
82
+ ::after,::before{text-decoration:inherit;vertical-align:inherit}
83
+ :where(:host),:where(:root){-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background-color:var(--pico-background-color);color:var(--pico-color);font-weight:var(--pico-font-weight);font-size:var(--pico-font-size);line-height:var(--pico-line-height);font-family:var(--pico-font-family);text-underline-offset:var(--pico-text-underline-offset);text-rendering:optimizeLegibility;overflow-wrap:break-word;-moz-tab-size:4;-o-tab-size:4;tab-size:4}
84
+ body{width:100%;margin:0}
85
+ main{display:block}
86
+ body>footer,body>header,body>main{padding-block:var(--pico-block-spacing-vertical)}
87
+ section{margin-bottom:var(--pico-block-spacing-vertical)}
88
+ .container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--pico-spacing);padding-left:var(--pico-spacing)}
89
+ @media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}
90
+ @media (min-width:768px){.container{max-width:700px}}
91
+ @media (min-width:1024px){.container{max-width:950px}}
92
+ @media (min-width:1280px){.container{max-width:1200px}}
93
+ @media (min-width:1536px){.container{max-width:1450px}}
94
+ .grid{grid-column-gap:var(--pico-grid-column-gap);grid-row-gap:var(--pico-grid-row-gap);display:grid;grid-template-columns:1fr}
95
+ @media (min-width:768px){.grid{grid-template-columns:repeat(auto-fit,minmax(0%,1fr))}}
96
+ .grid>*{min-width:0}
97
+ .overflow-auto{overflow:auto}
98
+ b,strong{font-weight:bolder}
99
+ sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}
100
+ sub{bottom:-.25em}
101
+ sup{top:-.5em}
102
+ address,blockquote,dl,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--pico-typography-spacing-vertical);color:var(--pico-color);font-style:normal;font-weight:var(--pico-font-weight)}
103
+ h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--pico-typography-spacing-vertical);color:var(--pico-color);font-weight:var(--pico-font-weight);font-size:var(--pico-font-size);line-height:var(--pico-line-height);font-family:var(--pico-font-family)}
104
+ h1{--pico-color:var(--pico-h1-color)}
105
+ h2{--pico-color:var(--pico-h2-color)}
106
+ h3{--pico-color:var(--pico-h3-color)}
107
+ h4{--pico-color:var(--pico-h4-color)}
108
+ h5{--pico-color:var(--pico-h5-color)}
109
+ h6{--pico-color:var(--pico-h6-color)}
110
+ :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)}
111
+ p{margin-bottom:var(--pico-typography-spacing-vertical)}
112
+ hgroup{margin-bottom:var(--pico-typography-spacing-vertical)}
113
+ hgroup>*{margin-top:0;margin-bottom:0}
114
+ hgroup>:not(:first-child):last-child{--pico-color:var(--pico-muted-color);--pico-font-weight:unset;font-size:1rem}
115
+ :where(ol,ul) li{margin-bottom:calc(var(--pico-typography-spacing-vertical) * .25)}
116
+ :where(dl,ol,ul) :where(dl,ol,ul){margin:0;margin-top:calc(var(--pico-typography-spacing-vertical) * .25)}
117
+ ul li{list-style:square}
118
+ mark{padding:.125rem .25rem;background-color:var(--pico-mark-background-color);color:var(--pico-mark-color);vertical-align:baseline}
119
+ blockquote{display:block;margin:var(--pico-typography-spacing-vertical) 0;padding:var(--pico-spacing);border-right:none;border-left:.25rem solid var(--pico-blockquote-border-color);border-inline-start:0.25rem solid var(--pico-blockquote-border-color);border-inline-end:none}
120
+ blockquote footer{margin-top:calc(var(--pico-typography-spacing-vertical) * .5);color:var(--pico-blockquote-footer-color)}
121
+ abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}
122
+ ins{color:var(--pico-ins-color);text-decoration:none}
123
+ del{color:var(--pico-del-color)}
124
+ ::-moz-selection{background-color:var(--pico-text-selection-color)}
125
+ ::selection{background-color:var(--pico-text-selection-color)}
126
+ :where(a:not([role=button])),[role=link]{--pico-color:var(--pico-primary);--pico-background-color:transparent;--pico-underline:var(--pico-primary-underline);outline:0;background-color:var(--pico-background-color);color:var(--pico-color);-webkit-text-decoration:var(--pico-text-decoration);text-decoration:var(--pico-text-decoration);text-decoration-color:var(--pico-underline);text-underline-offset:0.125em;transition:background-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition),-webkit-text-decoration var(--pico-transition);transition:background-color var(--pico-transition),color var(--pico-transition),text-decoration var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),color var(--pico-transition),text-decoration var(--pico-transition),box-shadow var(--pico-transition),-webkit-text-decoration var(--pico-transition)}
127
+ :where(a:not([role=button])):is(
128
+ [aria-current]:not([aria-current=false]),:hover,:active,:focus
129
+ ),[role=link]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-primary-hover);--pico-underline:var(--pico-primary-hover-underline);--pico-text-decoration:underline}
130
+ :where(a:not([role=button])):focus-visible,[role=link]:focus-visible{box-shadow:0 0 0 var(--pico-outline-width) var(--pico-primary-focus)}
131
+ :where(a:not([role=button])).secondary,[role=link].secondary{--pico-color:var(--pico-secondary);--pico-underline:var(--pico-secondary-underline)}
132
+ :where(a:not([role=button])).secondary:is(
133
+ [aria-current]:not([aria-current=false]),:hover,:active,:focus
134
+ ),[role=link].secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-secondary-hover);--pico-underline:var(--pico-secondary-hover-underline)}
135
+ :where(a:not([role=button])).contrast,[role=link].contrast{--pico-color:var(--pico-contrast);--pico-underline:var(--pico-contrast-underline)}
136
+ :where(a:not([role=button])).contrast:is(
137
+ [aria-current]:not([aria-current=false]),:hover,:active,:focus
138
+ ),[role=link].contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-contrast-hover);--pico-underline:var(--pico-contrast-hover-underline)}
139
+ a[role=button]{display:inline-block}
140
+ button{margin:0;overflow:visible;font-family:inherit;text-transform:none}
141
+ [type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
142
+ [role=button],[type=button],[type=file]::file-selector-button,[type=reset],[type=submit],button{--pico-background-color:var(--pico-primary-background);--pico-border-color:var(--pico-primary-border);--pico-color:var(--pico-primary-inverse);--pico-box-shadow:var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));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);outline:0;background-color:var(--pico-background-color);box-shadow:var(--pico-box-shadow);color:var(--pico-color);font-weight:var(--pico-font-weight);font-size:1rem;line-height:var(--pico-line-height);text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}
143
+ [role=button]:is(:hover,:active,:focus),[role=button]:is([aria-current]:not([aria-current=false])),[type=button]:is(:hover,:active,:focus),[type=button]:is([aria-current]:not([aria-current=false])),[type=file]::file-selector-button:is(:hover,:active,:focus),[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),[type=reset]:is(:hover,:active,:focus),[type=reset]:is([aria-current]:not([aria-current=false])),[type=submit]:is(:hover,:active,:focus),[type=submit]:is([aria-current]:not([aria-current=false])),button:is(:hover,:active,:focus),button:is([aria-current]:not([aria-current=false])){--pico-background-color:var(--pico-primary-hover-background);--pico-border-color:var(--pico-primary-hover-border);--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));--pico-color:var(--pico-primary-inverse)}
144
+ [role=button]:focus,[role=button]:is([aria-current]:not([aria-current=false])):focus,[type=button]:focus,[type=button]:is([aria-current]:not([aria-current=false])):focus,[type=file]::file-selector-button:focus,[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,[type=reset]:focus,[type=reset]:is([aria-current]:not([aria-current=false])):focus,[type=submit]:focus,[type=submit]:is([aria-current]:not([aria-current=false])):focus,button:focus,button:is([aria-current]:not([aria-current=false])):focus{--pico-box-shadow: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)}
145
+ [type=button],[type=reset],[type=submit]{margin-bottom:var(--pico-spacing)}
146
+ :is(button,[type=submit],[type=button],[role=button]).secondary,[type=file]::file-selector-button,[type=reset]{--pico-background-color:var(--pico-secondary-background);--pico-border-color:var(--pico-secondary-border);--pico-color:var(--pico-secondary-inverse);cursor:pointer}
147
+ :is(button,[type=submit],[type=button],[role=button]).secondary:is(
148
+ [aria-current]:not([aria-current=false]),:hover,:active,:focus
149
+ ),[type=file]::file-selector-button:is(
150
+ [aria-current]:not([aria-current=false]),:hover,:active,:focus
151
+ ),[type=reset]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-background-color:var(--pico-secondary-hover-background);--pico-border-color:var(--pico-secondary-hover-border);--pico-color:var(--pico-secondary-inverse)}
152
+ :is(button,[type=submit],[type=button],[role=button]).secondary:focus,:is(button,[type=submit],[type=button],[role=button]).secondary:is(
153
+ [aria-current]:not([aria-current=false])
154
+ ):focus,[type=file]::file-selector-button:focus,[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,[type=reset]:focus,[type=reset]:is([aria-current]:not([aria-current=false])):focus{--pico-box-shadow: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)}
155
+ :is(button,[type=submit],[type=button],[role=button]).contrast{--pico-background-color:var(--pico-contrast-background);--pico-border-color:var(--pico-contrast-border);--pico-color:var(--pico-contrast-inverse)}
156
+ :is(button,[type=submit],[type=button],[role=button]).contrast:is(
157
+ [aria-current]:not([aria-current=false]),:hover,:active,:focus
158
+ ){--pico-background-color:var(--pico-contrast-hover-background);--pico-border-color:var(--pico-contrast-hover-border);--pico-color:var(--pico-contrast-inverse)}
159
+ :is(button,[type=submit],[type=button],[role=button]).contrast:focus,:is(button,[type=submit],[type=button],[role=button]).contrast:is(
160
+ [aria-current]:not([aria-current=false])
161
+ ):focus{--pico-box-shadow: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)}
162
+ :is(button,[type=submit],[type=button],[role=button]).outline,[type=reset].outline{--pico-background-color:transparent;--pico-color:var(--pico-primary);--pico-border-color:var(--pico-primary)}
163
+ :is(button,[type=submit],[type=button],[role=button]).outline:is(
164
+ [aria-current]:not([aria-current=false]),:hover,:active,:focus
165
+ ),[type=reset].outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-background-color:transparent;--pico-color:var(--pico-primary-hover);--pico-border-color:var(--pico-primary-hover)}
166
+ :is(button,[type=submit],[type=button],[role=button]).outline.secondary,[type=reset].outline{--pico-color:var(--pico-secondary);--pico-border-color:var(--pico-secondary)}
167
+ :is(button,[type=submit],[type=button],[role=button]).outline.secondary:is(
168
+ [aria-current]:not([aria-current=false]),:hover,:active,:focus
169
+ ),[type=reset].outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-secondary-hover);--pico-border-color:var(--pico-secondary-hover)}
170
+ :is(button,[type=submit],[type=button],[role=button]).outline.contrast{--pico-color:var(--pico-contrast);--pico-border-color:var(--pico-contrast)}
171
+ :is(button,[type=submit],[type=button],[role=button]).outline.contrast:is(
172
+ [aria-current]:not([aria-current=false]),:hover,:active,:focus
173
+ ){--pico-color:var(--pico-contrast-hover);--pico-border-color:var(--pico-contrast-hover)}
174
+ :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:.5;pointer-events:none}
175
+ :where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}
176
+ td,th{padding:calc(var(--pico-spacing)/ 2) var(--pico-spacing);border-bottom:var(--pico-border-width) solid var(--pico-table-border-color);background-color:var(--pico-background-color);color:var(--pico-color);font-weight:var(--pico-font-weight);text-align:start}
177
+ tfoot td,tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}
178
+ table.striped tbody tr:nth-child(odd) td,table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}
179
+ :where(audio,canvas,iframe,img,svg,video){vertical-align:middle}
180
+ audio,video{display:inline-block}
181
+ audio:not([controls]){display:none;height:0}
182
+ :where(iframe){border-style:none}
183
+ img{max-width:100%;height:auto;border-style:none}
184
+ :where(svg:not([fill])){fill:currentColor}
185
+ svg:not(:host),svg:not(:root){overflow:hidden}
186
+ code,kbd,pre,samp{font-size:.875em;font-family:var(--pico-font-family)}
187
+ pre code,pre samp{font-size:inherit;font-family:inherit}
188
+ pre{-ms-overflow-style:scrollbar;overflow:auto}
189
+ code,kbd,pre,samp{border-radius:var(--pico-border-radius);background:var(--pico-code-background-color);color:var(--pico-code-color);font-weight:var(--pico-font-weight);line-height:initial}
190
+ code,kbd,samp{display:inline-block;padding:.375rem}
191
+ pre{display:block;margin-bottom:var(--pico-spacing);overflow-x:auto}
192
+ pre>code,pre>samp{display:block;padding:var(--pico-spacing);background:0 0;line-height:var(--pico-line-height)}
193
+ kbd{background-color:var(--pico-code-kbd-background-color);color:var(--pico-code-kbd-color);vertical-align:baseline}
194
+ figure{display:block;margin:0;padding:0}
195
+ figure figcaption{padding:calc(var(--pico-spacing) * .5) 0;color:var(--pico-muted-color)}
196
+ hr{height:0;margin:var(--pico-typography-spacing-vertical) 0;border:0;border-top:1px solid var(--pico-muted-border-color);color:inherit}
197
+ [hidden],template{display:none!important}
198
+ canvas{display:inline-block}
199
+ input,optgroup,select,textarea{margin:0;font-size:1rem;line-height:var(--pico-line-height);font-family:inherit;letter-spacing:inherit}
200
+ input{overflow:visible}
201
+ select{text-transform:none}
202
+ legend{max-width:100%;padding:0;color:inherit;white-space:normal}
203
+ textarea{overflow:auto}
204
+ [type=checkbox],[type=radio]{padding:0}
205
+ ::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}
206
+ [type=search]{-webkit-appearance:textfield;outline-offset:-2px}
207
+ [type=search]::-webkit-search-decoration{-webkit-appearance:none}
208
+ ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
209
+ ::-moz-focus-inner{padding:0;border-style:none}
210
+ :-moz-focusring{outline:0}
211
+ :-moz-ui-invalid{box-shadow:none}
212
+ ::-ms-expand{display:none}
213
+ [type=file],[type=range]{padding:0;border-width:0}
214
+ 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)}
215
+ fieldset{width:100%;margin:0;margin-bottom:var(--pico-spacing);padding:0;border:0}
216
+ fieldset legend,label{display:block;margin-bottom:calc(var(--pico-spacing) * .375);color:var(--pico-color);font-weight:var(--pico-form-label-font-weight,var(--pico-font-weight))}
217
+ fieldset legend{margin-bottom:calc(var(--pico-spacing) * .5)}
218
+ button[type=submit],input:not([type=checkbox],[type=radio]),select,textarea{width:100%}
219
+ input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal)}
220
+ input,select,textarea{--pico-background-color:var(--pico-form-element-background-color);--pico-border-color:var(--pico-form-element-border-color);--pico-color:var(--pico-form-element-color);--pico-box-shadow:none;border:var(--pico-border-width) solid var(--pico-border-color);border-radius:var(--pico-border-radius);outline:0;background-color:var(--pico-background-color);box-shadow:var(--pico-box-shadow);color:var(--pico-color);font-weight:var(--pico-font-weight);transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}
221
+ :where(select,textarea):not([readonly]):is(:active,:focus),input:not(
222
+ [type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]
223
+ ):is(:active,:focus){--pico-background-color:var(--pico-form-element-active-background-color)}
224
+ :where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(
225
+ :active,:focus
226
+ ){--pico-border-color:var(--pico-form-element-active-border-color)}
227
+ :where(select,textarea):not([readonly]):focus,input:not(
228
+ [type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]
229
+ ):focus{--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}
230
+ :where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea),input:not([type=submit],[type=button],[type=reset])[disabled],label[aria-disabled=true],select[disabled],textarea[disabled]{opacity:var(--pico-form-element-disabled-opacity);pointer-events:none}
231
+ label[aria-disabled=true] input[disabled]{opacity:1}
232
+ :where(input,select,textarea):not(
233
+ [type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range]
234
+ )[aria-invalid]{padding-right:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem)!important;padding-left:var(--pico-form-element-spacing-horizontal);padding-inline-start:var(--pico-form-element-spacing-horizontal)!important;padding-inline-end:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem)!important;background-position:center right .75rem;background-size:1rem auto;background-repeat:no-repeat}
235
+ :where(input,select,textarea):not(
236
+ [type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range]
237
+ )[aria-invalid=false]:not(select){background-image:var(--pico-icon-valid)}
238
+ :where(input,select,textarea):not(
239
+ [type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range]
240
+ )[aria-invalid=true]:not(select){background-image:var(--pico-icon-invalid)}
241
+ :where(input,select,textarea)[aria-invalid=false]{--pico-border-color:var(--pico-form-element-valid-border-color)}
242
+ :where(input,select,textarea)[aria-invalid=false]:is(:active,:focus){--pico-border-color:var(--pico-form-element-valid-active-border-color)!important}
243
+ :where(input,select,textarea)[aria-invalid=false]:is(:active,:focus):not(
244
+ [type=checkbox],[type=radio]
245
+ ){--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color)!important}
246
+ :where(input,select,textarea)[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-color)}
247
+ :where(input,select,textarea)[aria-invalid=true]:is(:active,:focus){--pico-border-color:var(--pico-form-element-invalid-active-border-color)!important}
248
+ :where(input,select,textarea)[aria-invalid=true]:is(:active,:focus):not(
249
+ [type=checkbox],[type=radio]
250
+ ){--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color)!important}
251
+ [dir=rtl] :where(input,select,textarea):not([type=checkbox],[type=radio]):is(
252
+ [aria-invalid],[aria-invalid=true],[aria-invalid=false]
253
+ ){background-position:center left .75rem}
254
+ input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--pico-form-element-placeholder-color);opacity:1}
255
+ input:not([type=checkbox],[type=radio]),select,textarea{margin-bottom:var(--pico-spacing)}
256
+ select::-ms-expand{border:0;background-color:transparent}
257
+ select:not([multiple],[size]){padding-right:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);padding-left:var(--pico-form-element-spacing-horizontal);padding-inline-start:var(--pico-form-element-spacing-horizontal);padding-inline-end:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);background-image:var(--pico-icon-chevron);background-position:center right .75rem;background-size:1rem auto;background-repeat:no-repeat}
258
+ select[multiple] option:checked{background:var(--pico-form-element-selected-background-color);color:var(--pico-form-element-color)}
259
+ [dir=rtl] select:not([multiple],[size]){background-position:center left .75rem}
260
+ textarea{display:block;resize:vertical}
261
+ textarea[aria-invalid]{--pico-icon-height:calc(
262
+ 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
263
+ var(--pico-border-width) * 2
264
+ );background-position:top right .75rem!important;background-size:1rem var(--pico-icon-height)!important}
265
+ :where(input,select,textarea,fieldset,.grid)+small{display:block;width:100%;margin-top:calc(var(--pico-spacing) * -.75);margin-bottom:var(--pico-spacing);color:var(--pico-muted-color)}
266
+ :where(input,select,textarea,fieldset,.grid)[aria-invalid=false]+small{color:var(--pico-ins-color)}
267
+ :where(input,select,textarea,fieldset,.grid)[aria-invalid=true]+small{color:var(--pico-del-color)}
268
+ label>:where(input,select,textarea){margin-top:calc(var(--pico-spacing) * .25)}
269
+ label:has([type=checkbox],[type=radio]){width:-moz-fit-content;width:fit-content;cursor:pointer}
270
+ [type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.25em;height:1.25em;margin-top:-.125em;margin-inline-end:.5em;border-width:var(--pico-border-width);vertical-align:middle;cursor:pointer}
271
+ [type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}
272
+ [type=checkbox]:checked,[type=checkbox]:checked:active,[type=checkbox]:checked:focus,[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--pico-background-color:var(--pico-primary-background);--pico-border-color:var(--pico-primary-border);background-image:var(--pico-icon-checkbox);background-position:center;background-size:.75em auto;background-repeat:no-repeat}
273
+ [type=checkbox]~label,[type=radio]~label{display:inline-block;margin-bottom:0;cursor:pointer}
274
+ [type=checkbox]~label:not(:last-of-type),[type=radio]~label:not(:last-of-type){margin-inline-end:1em}
275
+ [type=checkbox]:indeterminate{--pico-background-color:var(--pico-primary-background);--pico-border-color:var(--pico-primary-border);background-image:var(--pico-icon-minus);background-position:center;background-size:.75em auto;background-repeat:no-repeat}
276
+ [type=radio]{border-radius:50%}
277
+ [type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--pico-background-color:var(--pico-primary-inverse);border-width:.35em;background-image:none}
278
+ [type=checkbox][role=switch]{--pico-background-color:var(--pico-switch-background-color);--pico-color:var(--pico-switch-color);width:2.25em;height:1.25em;border:var(--pico-border-width) solid var(--pico-border-color);border-radius:1.25em;background-color:var(--pico-background-color);line-height:1.25em}
279
+ [type=checkbox][role=switch]:not([aria-invalid]){--pico-border-color:var(--pico-switch-background-color)}
280
+ [type=checkbox][role=switch]:before{display:block;aspect-ratio:1;height:100%;border-radius:50%;background-color:var(--pico-color);box-shadow:var(--pico-switch-thumb-box-shadow);content:"";transition:margin .1s ease-in-out}
281
+ [type=checkbox][role=switch]:focus{--pico-background-color:var(--pico-switch-background-color);--pico-border-color:var(--pico-switch-background-color)}
282
+ [type=checkbox][role=switch]:checked{--pico-background-color:var(--pico-switch-checked-background-color);--pico-border-color:var(--pico-switch-checked-background-color);background-image:none}
283
+ [type=checkbox][role=switch]:checked::before{margin-inline-start:calc(2.25em - 1.25em)}
284
+ [type=checkbox][role=switch][disabled]{--pico-background-color:var(--pico-border-color)}
285
+ [type=checkbox][aria-invalid=false]:checked,[type=checkbox][aria-invalid=false]:checked:active,[type=checkbox][aria-invalid=false]:checked:focus,[type=checkbox][role=switch][aria-invalid=false]:checked,[type=checkbox][role=switch][aria-invalid=false]:checked:active,[type=checkbox][role=switch][aria-invalid=false]:checked:focus{--pico-background-color:var(--pico-form-element-valid-border-color)}
286
+ [type=checkbox]:checked:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[aria-invalid=true]{--pico-background-color:var(--pico-form-element-invalid-border-color)}
287
+ [type=checkbox][aria-invalid=false]:checked,[type=checkbox][aria-invalid=false]:checked:active,[type=checkbox][aria-invalid=false]:checked:focus,[type=checkbox][role=switch][aria-invalid=false]:checked,[type=checkbox][role=switch][aria-invalid=false]:checked:active,[type=checkbox][role=switch][aria-invalid=false]:checked:focus,[type=radio][aria-invalid=false]:checked,[type=radio][aria-invalid=false]:checked:active,[type=radio][aria-invalid=false]:checked:focus{--pico-border-color:var(--pico-form-element-valid-border-color)}
288
+ [type=checkbox]:checked:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[aria-invalid=true],[type=radio]:checked:active[aria-invalid=true],[type=radio]:checked:focus[aria-invalid=true],[type=radio]:checked[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-color)}
289
+ [type=color]::-webkit-color-swatch-wrapper{padding:0}
290
+ [type=color]::-moz-focus-inner{padding:0}
291
+ [type=color]::-webkit-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}
292
+ [type=color]::-moz-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}
293
+ input:not([type=checkbox],[type=radio],[type=range],[type=file]):is(
294
+ [type=date],[type=datetime-local],[type=month],[type=time],[type=week]
295
+ ){--pico-icon-position:0.75rem;--pico-icon-width:1rem;padding-right:calc(var(--pico-icon-width) + var(--pico-icon-position));background-image:var(--pico-icon-date);background-position:center right var(--pico-icon-position);background-size:var(--pico-icon-width) auto;background-repeat:no-repeat}
296
+ input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=time]{background-image:var(--pico-icon-time)}
297
+ [type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{width:var(--pico-icon-width);margin-right:calc(var(--pico-icon-width) * -1);margin-left:var(--pico-icon-position);opacity:0}
298
+ @-moz-document url-prefix(){[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{padding-right:var(--pico-form-element-spacing-horizontal)!important;background-image:none!important}}
299
+ [dir=rtl] :is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]){text-align:end}
300
+ [type=file]{--pico-color:var(--pico-muted-color);margin-left:calc(var(--pico-outline-width) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) 0;padding-left:var(--pico-outline-width);border:0;border-radius:0;background:0 0}
301
+ [type=file]::file-selector-button{margin-right:calc(var(--pico-spacing)/ 2);padding:calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal)}
302
+ [type=file]:is(:hover,:active,:focus)::file-selector-button{--pico-background-color:var(--pico-secondary-hover-background);--pico-border-color:var(--pico-secondary-hover-border)}
303
+ [type=file]:focus::file-selector-button{--pico-box-shadow: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)}
304
+ [type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.25rem;background:0 0}
305
+ [type=range]::-webkit-slider-runnable-track{width:100%;height:.375rem;border-radius:var(--pico-border-radius);background-color:var(--pico-range-border-color);-webkit-transition:background-color var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),box-shadow var(--pico-transition)}
306
+ [type=range]::-moz-range-track{width:100%;height:.375rem;border-radius:var(--pico-border-radius);background-color:var(--pico-range-border-color);-moz-transition:background-color var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),box-shadow var(--pico-transition)}
307
+ [type=range]::-ms-track{width:100%;height:.375rem;border-radius:var(--pico-border-radius);background-color:var(--pico-range-border-color);-ms-transition:background-color var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),box-shadow var(--pico-transition)}
308
+ [type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-.4375rem;border:2px solid var(--pico-range-thumb-border-color);border-radius:50%;background-color:var(--pico-range-thumb-color);cursor:pointer;-webkit-transition:background-color var(--pico-transition),transform var(--pico-transition);transition:background-color var(--pico-transition),transform var(--pico-transition)}
309
+ [type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-.4375rem;border:2px solid var(--pico-range-thumb-border-color);border-radius:50%;background-color:var(--pico-range-thumb-color);cursor:pointer;-moz-transition:background-color var(--pico-transition),transform var(--pico-transition);transition:background-color var(--pico-transition),transform var(--pico-transition)}
310
+ [type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-.4375rem;border:2px solid var(--pico-range-thumb-border-color);border-radius:50%;background-color:var(--pico-range-thumb-color);cursor:pointer;-ms-transition:background-color var(--pico-transition),transform var(--pico-transition);transition:background-color var(--pico-transition),transform var(--pico-transition)}
311
+ [type=range]:active,[type=range]:focus-within{--pico-range-border-color:var(--pico-range-active-border-color);--pico-range-thumb-color:var(--pico-range-thumb-active-color)}
312
+ [type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}
313
+ [type=range]:active::-moz-range-thumb{transform:scale(1.25)}
314
+ [type=range]:active::-ms-thumb{transform:scale(1.25)}
315
+ input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search]{padding-inline-start:calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);background-image:var(--pico-icon-search);background-position:center left calc(var(--pico-form-element-spacing-horizontal) + .125rem);background-size:1rem auto;background-repeat:no-repeat}
316
+ input:not(
317
+ [type=checkbox],[type=radio],[type=range],[type=file]
318
+ )[type=search][aria-invalid]{padding-inline-start:calc(var(--pico-form-element-spacing-horizontal) + 1.75rem)!important;background-position:center left 1.125rem,center right .75rem}
319
+ input:not(
320
+ [type=checkbox],[type=radio],[type=range],[type=file]
321
+ )[type=search][aria-invalid=false]{background-image:var(--pico-icon-search),var(--pico-icon-valid)}
322
+ input:not(
323
+ [type=checkbox],[type=radio],[type=range],[type=file]
324
+ )[type=search][aria-invalid=true]{background-image:var(--pico-icon-search),var(--pico-icon-invalid)}
325
+ [dir=rtl] :where(input):not(
326
+ [type=checkbox],[type=radio],[type=range],[type=file]
327
+ )[type=search]{background-position:center right 1.125rem}
328
+ [dir=rtl] :where(input):not(
329
+ [type=checkbox],[type=radio],[type=range],[type=file]
330
+ )[type=search][aria-invalid]{background-position:center right 1.125rem,center left .75rem}
331
+ details{display:block;margin-bottom:var(--pico-spacing)}
332
+ details summary{line-height:1rem;list-style-type:none;cursor:pointer;transition:color var(--pico-transition)}
333
+ details summary:not([role]){color:var(--pico-accordion-close-summary-color)}
334
+ details summary::-webkit-details-marker{display:none}
335
+ details summary::marker{display:none}
336
+ details summary::-moz-list-bullet{list-style-type:none}
337
+ details summary::after{display:block;width:1rem;height:1rem;margin-inline-start:calc(var(--pico-spacing,1rem) * .5);float:right;transform:rotate(-90deg);background-image:var(--pico-icon-chevron);background-position:right center;background-size:1rem auto;background-repeat:no-repeat;content:"";transition:transform var(--pico-transition)}
338
+ details summary:focus{outline:0}
339
+ details summary:focus:not([role]){color:var(--pico-accordion-active-summary-color)}
340
+ details summary:focus-visible:not([role]){outline:var(--pico-outline-width) solid var(--pico-primary-focus);outline-offset:calc(var(--pico-spacing,1rem) * 0.5);color:var(--pico-primary)}
341
+ details summary[role=button]{width:100%;text-align:start}
342
+ details summary[role=button]::after{height:calc(1rem * var(--pico-line-height,1.5))}
343
+ details[open]>summary{margin-bottom:var(--pico-spacing)}
344
+ details[open]>summary:not([role]):not(:focus){color:var(--pico-accordion-open-summary-color)}
345
+ details[open]>summary::after{transform:rotate(0)}
346
+ [dir=rtl] details summary{text-align:end}
347
+ [dir=rtl] details summary::after{float:left;background-position:left center}
348
+ article{margin-bottom:var(--pico-block-spacing-vertical);padding:var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);border-radius:var(--pico-border-radius);background:var(--pico-card-background-color);box-shadow:var(--pico-card-box-shadow)}
349
+ article>footer,article>header{margin-right:calc(var(--pico-block-spacing-horizontal) * -1);margin-left:calc(var(--pico-block-spacing-horizontal) * -1);padding:calc(var(--pico-block-spacing-vertical) * .66) var(--pico-block-spacing-horizontal);background-color:var(--pico-card-sectioning-background-color)}
350
+ article>header{margin-top:calc(var(--pico-block-spacing-vertical) * -1);margin-bottom:var(--pico-block-spacing-vertical);border-bottom:var(--pico-border-width) solid var(--pico-card-border-color);border-top-right-radius:var(--pico-border-radius);border-top-left-radius:var(--pico-border-radius)}
351
+ article>footer{margin-top:var(--pico-block-spacing-vertical);margin-bottom:calc(var(--pico-block-spacing-vertical) * -1);border-top:var(--pico-border-width) solid var(--pico-card-border-color);border-bottom-right-radius:var(--pico-border-radius);border-bottom-left-radius:var(--pico-border-radius)}
352
+ details.dropdown{position:relative;border-bottom:none}
353
+ details.dropdown>a::after,details.dropdown>button::after,details.dropdown>summary::after{display:block;width:1rem;height:calc(1rem * var(--pico-line-height,1.5));margin-inline-start:.25rem;float:right;transform:rotate(0) translateX(.2rem);background-image:var(--pico-icon-chevron);background-position:right center;background-size:1rem auto;background-repeat:no-repeat;content:""}
354
+ nav details.dropdown{margin-bottom:0}
355
+ 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);border:var(--pico-border-width) solid var(--pico-form-element-border-color);border-radius:var(--pico-border-radius);background-color:var(--pico-form-element-background-color);color:var(--pico-form-element-placeholder-color);line-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}
356
+ details.dropdown>summary:not([role]):active,details.dropdown>summary:not([role]):focus{border-color:var(--pico-form-element-active-border-color);background-color:var(--pico-form-element-active-background-color)}
357
+ details.dropdown>summary:not([role]):focus{box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}
358
+ details.dropdown>summary:not([role]):focus-visible{outline:0}
359
+ details.dropdown>summary:not([role])[aria-invalid=false]{--pico-form-element-border-color:var(--pico-form-element-valid-border-color);--pico-form-element-active-border-color:var(--pico-form-element-valid-focus-color);--pico-form-element-focus-color:var(--pico-form-element-valid-focus-color)}
360
+ details.dropdown>summary:not([role])[aria-invalid=true]{--pico-form-element-border-color:var(--pico-form-element-invalid-border-color);--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)}
361
+ nav details.dropdown{display:inline-block;margin:calc(var(--pico-nav-element-spacing-vertical) * -1) 0}
362
+ nav details.dropdown>summary::after{transform:rotate(0) translateX(0)}
363
+ 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)}
364
+ nav details.dropdown>summary:not([role]):focus-visible{box-shadow:0 0 0 var(--pico-outline-width) var(--pico-primary-focus)}
365
+ details.dropdown>summary+ul{display:flex;z-index:99;position:absolute;left:0;flex-direction:column;width:100%;min-width:-moz-fit-content;min-width:fit-content;margin:0;margin-top:var(--pico-outline-width);padding:0;border:var(--pico-border-width) solid var(--pico-dropdown-border-color);border-radius:var(--pico-border-radius);background-color:var(--pico-dropdown-background-color);box-shadow:var(--pico-dropdown-box-shadow);color:var(--pico-dropdown-color);white-space:nowrap;opacity:0;transition:opacity var(--pico-transition),transform 0s ease-in-out 1s}
366
+ details.dropdown>summary+ul[dir=rtl]{right:0;left:auto}
367
+ details.dropdown>summary+ul li{width:100%;margin-bottom:0;padding:calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal);list-style:none}
368
+ details.dropdown>summary+ul li:first-of-type{margin-top:calc(var(--pico-form-element-spacing-vertical) * .5)}
369
+ details.dropdown>summary+ul li:last-of-type{margin-bottom:calc(var(--pico-form-element-spacing-vertical) * .5)}
370
+ details.dropdown>summary+ul li a{display:block;margin:calc(var(--pico-form-element-spacing-vertical) * -.5) calc(var(--pico-form-element-spacing-horizontal) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal);overflow:hidden;border-radius:0;color:var(--pico-dropdown-color);text-decoration:none;text-overflow:ellipsis}
371
+ details.dropdown>summary+ul li a:active,details.dropdown>summary+ul li a:focus,details.dropdown>summary+ul li a:focus-visible,details.dropdown>summary+ul li a:hover,details.dropdown>summary+ul li a[aria-current]:not([aria-current=false]){background-color:var(--pico-dropdown-hover-background-color)}
372
+ details.dropdown>summary+ul li label{width:100%}
373
+ details.dropdown>summary+ul li:has(label):hover{background-color:var(--pico-dropdown-hover-background-color)}
374
+ details.dropdown[open]>summary{margin-bottom:0}
375
+ details.dropdown[open]>summary+ul{transform:scaleY(1);opacity:1;transition:opacity var(--pico-transition),transform 0s ease-in-out 0s}
376
+ details.dropdown[open]>summary::before{display:block;z-index:1;position:fixed;width:100vw;height:100vh;inset:0;background:0 0;content:"";cursor:default}
377
+ label>details.dropdown{margin-top:calc(var(--pico-spacing) * .25)}
378
+ [role=group],[role=search]{display:inline-flex;position:relative;width:100%;margin-bottom:var(--pico-spacing);border-radius:var(--pico-border-radius);box-shadow:var(--pico-group-box-shadow,0 0 0 transparent);vertical-align:middle;transition:box-shadow var(--pico-transition)}
379
+ [role=group] input:not([type=checkbox],[type=radio]),[role=group] select,[role=group]>*,[role=search] input:not([type=checkbox],[type=radio]),[role=search] select,[role=search]>*{position:relative;flex:1 1 auto;margin-bottom:0}
380
+ [role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=group]>:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child),[role=search]>:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
381
+ [role=group] input:not([type=checkbox],[type=radio]):not(:last-child),[role=group] select:not(:last-child),[role=group]>:not(:last-child),[role=search] input:not([type=checkbox],[type=radio]):not(:last-child),[role=search] select:not(:last-child),[role=search]>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
382
+ [role=group] input:not([type=checkbox],[type=radio]):focus,[role=group] select:focus,[role=group]>:focus,[role=search] input:not([type=checkbox],[type=radio]):focus,[role=search] select:focus,[role=search]>:focus{z-index:2}
383
+ [role=group] [role=button]:not(:first-child),[role=group] [type=button]:not(:first-child),[role=group] [type=reset]:not(:first-child),[role=group] [type=submit]:not(:first-child),[role=group] button:not(:first-child),[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=search] [role=button]:not(:first-child),[role=search] [type=button]:not(:first-child),[role=search] [type=reset]:not(:first-child),[role=search] [type=submit]:not(:first-child),[role=search] button:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child){margin-left:calc(var(--pico-border-width) * -1)}
384
+ [role=group] [role=button],[role=group] [type=button],[role=group] [type=reset],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=reset],[role=search] [type=submit],[role=search] button{width:auto}
385
+ @supports selector(:has(*)){[role=group]:has(
386
+ button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus
387
+ ),[role=search]:has(
388
+ button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus
389
+ ){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-button)}[role=group]:has(
390
+ button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus
391
+ ) input:not([type=checkbox],[type=radio]),[role=group]:has(
392
+ button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus
393
+ ) select,[role=search]:has(
394
+ button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus
395
+ ) input:not([type=checkbox],[type=radio]),[role=search]:has(
396
+ button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus
397
+ ) select{border-color:transparent}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus),[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-input)}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=button],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=submit],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) button,[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=button],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=submit],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) button{--pico-button-box-shadow:0 0 0 var(--pico-border-width) var(--pico-primary-border);--pico-button-hover-box-shadow:0 0 0 var(--pico-border-width) var(--pico-primary-hover-border)}[role=group] [role=button]:focus,[role=group] [type=button]:focus,[role=group] [type=reset]:focus,[role=group] [type=submit]:focus,[role=group] button:focus,[role=search] [role=button]:focus,[role=search] [type=button]:focus,[role=search] [type=reset]:focus,[role=search] [type=submit]:focus,[role=search] button:focus{box-shadow:none}}
398
+ [role=search]>:first-child{border-top-left-radius:5rem;border-bottom-left-radius:5rem}
399
+ [role=search]>:last-child{border-top-right-radius:5rem;border-bottom-right-radius:5rem}
400
+ [aria-busy=true]:not(input,select,textarea,html,form){white-space:nowrap}
401
+ [aria-busy=true]:not(input,select,textarea,html,form)::before{display:inline-block;width:1em;height:1em;background-image:var(--pico-icon-loading);background-size:1em auto;background-repeat:no-repeat;content:"";vertical-align:-.125em}
402
+ [aria-busy=true]:not(input,select,textarea,html,form):not(:empty)::before{margin-inline-end:calc(var(--pico-spacing) * .5)}
403
+ [aria-busy=true]:not(input,select,textarea,html,form):empty{text-align:center}
404
+ [role=button][aria-busy=true],[type=button][aria-busy=true],[type=reset][aria-busy=true],[type=submit][aria-busy=true],a[aria-busy=true],button[aria-busy=true]{pointer-events:none}
405
+ :host,:root{--pico-scrollbar-width:0px}
406
+ dialog{display:flex;z-index:999;position:fixed;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;width:inherit;min-width:100%;height:inherit;min-height:100%;padding:0;border:0;backdrop-filter:var(--pico-modal-overlay-backdrop-filter);background-color:var(--pico-modal-overlay-background-color);color:var(--pico-color)}
407
+ dialog>article{width:100%;max-height:calc(100vh - var(--pico-spacing) * 2);margin:var(--pico-spacing);overflow:auto}
408
+ @media (min-width:576px){dialog>article{max-width:510px}}
409
+ @media (min-width:768px){dialog>article{max-width:700px}}
410
+ dialog>article>header>*{margin-bottom:0}
411
+ dialog>article>header .close,dialog>article>header :is(a,button)[rel=prev]{margin:0;margin-left:var(--pico-spacing);padding:0;float:right}
412
+ dialog>article>footer{text-align:end}
413
+ dialog>article>footer [role=button],dialog>article>footer button{margin-bottom:0}
414
+ dialog>article>footer [role=button]:not(:first-of-type),dialog>article>footer button:not(:first-of-type){margin-left:calc(var(--pico-spacing) * .5)}
415
+ dialog>article .close,dialog>article :is(a,button)[rel=prev]{display:block;width:1rem;height:1rem;margin-top:calc(var(--pico-spacing) * -1);margin-bottom:var(--pico-spacing);margin-left:auto;border:none;background-image:var(--pico-icon-close);background-position:center;background-size:auto 1rem;background-repeat:no-repeat;background-color:transparent;opacity:.5;transition:opacity var(--pico-transition)}
416
+ dialog>article .close:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),dialog>article :is(a,button)[rel=prev]:is(
417
+ [aria-current]:not([aria-current=false]),:hover,:active,:focus
418
+ ){opacity:1}
419
+ dialog:not([open]),dialog[open=false]{display:none}
420
+ .modal-is-open{padding-right:var(--pico-scrollbar-width,0);overflow:hidden;pointer-events:none;touch-action:none}
421
+ .modal-is-open dialog{pointer-events:auto;touch-action:auto}
422
+ :where(.modal-is-opening,.modal-is-closing) dialog,:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-duration:.2s;animation-timing-function:ease-in-out;animation-fill-mode:both}
423
+ :where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}
424
+ :where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.2s;animation-name:modal}
425
+ .modal-is-closing dialog,.modal-is-closing dialog>article{animation-delay:0s;animation-direction:reverse}
426
+ @keyframes modal-overlay{from{backdrop-filter:none;background-color:transparent}}
427
+ @keyframes modal{from{transform:translateY(-100%);opacity:0}}
428
+ :where(nav li)::before{float:left;content:"​"}
429
+ nav,nav ul{display:flex}
430
+ nav{justify-content:space-between;overflow:visible}
431
+ nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}
432
+ nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--pico-nav-element-spacing-horizontal) * -1)}
433
+ nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--pico-nav-element-spacing-horizontal) * -1)}
434
+ nav li{display:inline-block;margin:0;padding:var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal)}
435
+ nav li :where(a,[role=link]){display:inline-block;margin:calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);padding:var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);border-radius:var(--pico-border-radius)}
436
+ nav li :where(a,[role=link]):not(:hover){text-decoration:none}
437
+ nav li [role=button],nav li [type=button],nav li button,nav li input:not([type=checkbox],[type=radio],[type=range],[type=file]),nav li select{height:auto;margin-right:inherit;margin-bottom:0;margin-left:inherit;padding:calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal)}
438
+ nav[aria-label=breadcrumb]{align-items:center;justify-content:start}
439
+ nav[aria-label=breadcrumb] ul li:not(:first-child){margin-inline-start:var(--pico-nav-link-spacing-horizontal)}
440
+ nav[aria-label=breadcrumb] ul li a{margin:calc(var(--pico-nav-link-spacing-vertical) * -1) 0;margin-inline-start:calc(var(--pico-nav-link-spacing-horizontal) * -1)}
441
+ nav[aria-label=breadcrumb] ul li:not(:last-child)::after{display:inline-block;position:absolute;width:calc(var(--pico-nav-link-spacing-horizontal) * 4);margin:0 calc(var(--pico-nav-link-spacing-horizontal) * -1);content:var(--pico-nav-breadcrumb-divider);color:var(--pico-muted-color);text-align:center;text-decoration:none;white-space:nowrap}
442
+ nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]){background-color:transparent;color:inherit;text-decoration:none;pointer-events:none}
443
+ aside li,aside nav,aside ol,aside ul{display:block}
444
+ aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal)}
445
+ aside li a{display:block}
446
+ aside li [role=button]{margin:inherit}
447
+ [dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after{content:"\\"}
448
+ progress{display:inline-block;vertical-align:baseline}
449
+ progress{-webkit-appearance:none;-moz-appearance:none;display:inline-block;appearance:none;width:100%;height:.5rem;margin-bottom:calc(var(--pico-spacing) * .5);overflow:hidden;border:0;border-radius:var(--pico-border-radius);background-color:var(--pico-progress-background-color);color:var(--pico-progress-color)}
450
+ progress::-webkit-progress-bar{border-radius:var(--pico-border-radius);background:0 0}
451
+ progress[value]::-webkit-progress-value{background-color:var(--pico-progress-color);-webkit-transition:inline-size var(--pico-transition);transition:inline-size var(--pico-transition)}
452
+ progress::-moz-progress-bar{background-color:var(--pico-progress-color)}
453
+ @media (prefers-reduced-motion:no-preference){progress:indeterminate{background:var(--pico-progress-background-color) linear-gradient(to right,var(--pico-progress-color) 30%,var(--pico-progress-background-color) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}}
454
+ @media (prefers-reduced-motion:no-preference){[dir=rtl] progress:indeterminate{animation-direction:reverse}}
455
+ @keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}
456
+ [data-tooltip]{position:relative}
457
+ [data-tooltip]:not(a,button,input,[role=button]){border-bottom:1px dotted;text-decoration:none;cursor:help}
458
+ [data-tooltip]::after,[data-tooltip]::before,[data-tooltip][data-placement=top]::after,[data-tooltip][data-placement=top]::before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%,-.25rem);border-radius:var(--pico-border-radius);background:var(--pico-tooltip-background-color);content:attr(data-tooltip);color:var(--pico-tooltip-color);font-style:normal;font-weight:var(--pico-font-weight);font-size:.875rem;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none}
459
+ [data-tooltip]::after,[data-tooltip][data-placement=top]::after{padding:0;transform:translate(-50%,0);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;content:"";color:var(--pico-tooltip-background-color)}
460
+ [data-tooltip][data-placement=bottom]::after,[data-tooltip][data-placement=bottom]::before{top:100%;bottom:auto;transform:translate(-50%,.25rem)}
461
+ [data-tooltip][data-placement=bottom]:after{transform:translate(-50%,-.3rem);border:.3rem solid transparent;border-bottom:.3rem solid}
462
+ [data-tooltip][data-placement=left]::after,[data-tooltip][data-placement=left]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translate(-.25rem,-50%)}
463
+ [data-tooltip][data-placement=left]:after{transform:translate(.3rem,-50%);border:.3rem solid transparent;border-left:.3rem solid}
464
+ [data-tooltip][data-placement=right]::after,[data-tooltip][data-placement=right]::before{top:50%;right:auto;bottom:auto;left:100%;transform:translate(.25rem,-50%)}
465
+ [data-tooltip][data-placement=right]:after{transform:translate(-.3rem,-50%);border:.3rem solid transparent;border-right:.3rem solid}
466
+ [data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1}
467
+ @media (hover:hover) and (pointer:fine){[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{--pico-tooltip-slide-to:translate(-50%, -0.25rem);transform:translate(-50%,.75rem);animation-duration:.2s;animation-fill-mode:forwards;animation-name:tooltip-slide;opacity:0}[data-tooltip]:focus::after,[data-tooltip]:hover::after{--pico-tooltip-caret-slide-to:translate(-50%, 0rem);transform:translate(-50%,-.25rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:focus::before,[data-tooltip][data-placement=bottom]:hover::after,[data-tooltip][data-placement=bottom]:hover::before{--pico-tooltip-slide-to:translate(-50%, 0.25rem);transform:translate(-50%,-.75rem);animation-name:tooltip-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:hover::after{--pico-tooltip-caret-slide-to:translate(-50%, -0.3rem);transform:translate(-50%,-.5rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:focus::before,[data-tooltip][data-placement=left]:hover::after,[data-tooltip][data-placement=left]:hover::before{--pico-tooltip-slide-to:translate(-0.25rem, -50%);transform:translate(.75rem,-50%);animation-name:tooltip-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:hover::after{--pico-tooltip-caret-slide-to:translate(0.3rem, -50%);transform:translate(.05rem,-50%);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:focus::before,[data-tooltip][data-placement=right]:hover::after,[data-tooltip][data-placement=right]:hover::before{--pico-tooltip-slide-to:translate(0.25rem, -50%);transform:translate(-.75rem,-50%);animation-name:tooltip-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:hover::after{--pico-tooltip-caret-slide-to:translate(-0.3rem, -50%);transform:translate(-.05rem,-50%);animation-name:tooltip-caret-slide}}
468
+ @keyframes tooltip-slide{to{transform:var(--pico-tooltip-slide-to);opacity:1}}
469
+ @keyframes tooltip-caret-slide{50%{opacity:0}to{transform:var(--pico-tooltip-caret-slide-to);opacity:1}}
470
+ [aria-controls]{cursor:pointer}
471
+ [aria-disabled=true],[disabled]{cursor:not-allowed}
472
+ [aria-hidden=false][hidden]{display:initial}
473
+ [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}
474
+ [tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}
475
+ [dir=rtl]{direction:rtl}
476
+ @media (prefers-reduced-motion:reduce){:not([aria-busy=true])::after,:not([aria-busy=true])::before,:not([aria-busy=true]):not(.unreduce-motion){background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}
1
477
  /* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
2
-
3
478
  /* Layout */
4
-
5
479
  /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
6
- <!--section:docs-->
480
+ \3c !--section:docs,columns-->
7
481
 
8
482
  ### Auto-columns
9
483
 
@@ -21,52 +495,42 @@ The smaller the font size, the more columns will be created:
21
495
 
22
496
  Useful for tables of contents and long lists.
23
497
 
24
- <details>How it works:
498
+ How it works:
25
499
  ```css */
26
-
27
500
  .columns {
28
- -moz-columns: 30ch auto;
29
- columns: 30ch auto; /* 2 cols max for 65ch container */
501
+ -moz-columns: 25ch auto;
502
+ columns: 25ch auto; /* common container 65ch / 25ch => 2 columns max, with a buffer for list paddings */
30
503
  }
31
-
32
504
  /* Avoid breaking inside elements, such as nested lists */
33
-
34
505
  .columns > * {
35
506
  -moz-column-break-inside: avoid;
36
507
  break-inside: avoid;
37
508
  }
38
-
39
509
  /*```
40
- </details>
510
+ \3c !--section:docs,jump-->
41
511
 
42
512
  ### Jump to top
43
513
 
44
514
  `data-jump-to="top"` fixes element to the corner and adds extra top padding to make it easy to click:
45
515
  ```css */
46
-
47
516
  [data-jump-to="top"] {
48
517
  position: fixed;
49
518
  bottom: 0;
50
519
  right: 0;
51
520
  padding-top: 50vh;
52
521
  }
53
-
54
522
  /*```
55
- <!--section--> */
56
-
523
+ \3c !--section--> */
57
524
  /*
58
- <!--section:code-->
525
+ \3c !--section:code-->
59
526
  ```css */
60
-
61
527
  .breakout,
62
528
  .breakout-all {
63
529
  /* Prepare the container for breakout elements */
64
530
  padding-inline: 10%;
65
531
  max-width: calc(10% + 65ch + 10%);
66
532
  }
67
-
68
533
  /* Breakout direct children only */
69
-
70
534
  .breakout > *:is(
71
535
  table,
72
536
  pre,
@@ -92,23 +556,17 @@ Useful for tables of contents and long lists.
92
556
  margin-left: 50%;
93
557
  transform: translateX(-50%);
94
558
  }
95
-
96
559
  /* Respect img/picture min-width */
97
-
98
560
  .breakout > *:is(img, picture), .breakout-all > *:is(img, picture) {
99
561
  min-width: auto;
100
562
  }
101
-
102
563
  /* Max out the width of the element */
103
-
104
564
  .breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
105
565
  width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
106
566
  }
107
-
108
567
  .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
109
568
  position: relative;
110
569
  }
111
-
112
570
  .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class])::before {
113
571
  content: "";
114
572
  display: block;
@@ -116,7 +574,6 @@ Useful for tables of contents and long lists.
116
574
  background: gray;
117
575
  opacity: 12.5%;
118
576
  }
119
-
120
577
  .breakout-all > *:is(h2, h3, h4, h5, h6):not([class])::before {
121
578
  width: 10em;
122
579
  right: 100%;
@@ -126,38 +583,33 @@ Useful for tables of contents and long lists.
126
583
  transform: translateY(-50%);
127
584
  background: linear-gradient(to left, gray, transparent);
128
585
  }
129
-
130
586
  /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
131
-
132
587
  .breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr + *)::before {
133
588
  display: none !important;
134
589
  }
135
-
136
590
  .breakout-all > *:is(hr) {
137
591
  height: 0.5rem;
138
592
  border: none;
139
593
  overflow: visible;
140
594
  }
141
-
142
595
  .breakout-all > *:is(hr)::before {
143
596
  width: 100vw;
144
597
  left: 50%;
145
598
  height: 100%;
146
599
  transform: translateX(-50%);
147
600
  }
148
-
149
601
  /*```
150
- <!--section:summary-->
602
+ \3c !--section:summary-->
151
603
 
152
604
  The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
153
605
 
154
- <!--section:docs-->
606
+ \3c !--section:docs-->
155
607
 
156
- ### Demo <!-- inside parent .breakout -->
608
+ ### Demo \3c !-- inside parent .breakout -->
157
609
 
158
610
  Break out a wide image from the text flow:
159
611
 
160
- <div><!-- Dummy div to avoid p tag in Markdown --></div><img
612
+ <div>\3c !-- Dummy div to avoid p tag in Markdown --></div><img
161
613
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3000' height='300'><rect width='100%' height='100%' fill='gray'/></svg>">
162
614
 
163
615
  Or table:
@@ -186,12 +638,10 @@ Or anything else:
186
638
  <h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>
187
639
  <hr>
188
640
 
189
- <!--section--> */
190
-
641
+ \3c !--section--> */
191
642
  /* Content */
192
-
193
643
  /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
194
- <!--section:docs-->
644
+ \3c !--section:docs,h-anchor-->
195
645
 
196
646
  ### Heading anchors
197
647
 
@@ -201,9 +651,8 @@ Links with `href="#..."` inside headings are automatically displayed as anchors:
201
651
  <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a href="#hwa" style="visibility: visible">#</a></h2>
202
652
  </article>
203
653
 
204
- <details>How it works:
654
+ How it works:
205
655
  ```css */
206
-
207
656
  h1,
208
657
  h2,
209
658
  h3,
@@ -212,7 +661,6 @@ h5,
212
661
  h6 {
213
662
  position: relative;
214
663
  }
215
-
216
664
  h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="#"], h6 a[href^="#"] {
217
665
  position: absolute;
218
666
  right: 100%;
@@ -223,18 +671,17 @@ h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="
223
671
  text-decoration: none;
224
672
  visibility: hidden;
225
673
  }
226
-
227
674
  @media /* to avoid double-tap on touch devices */ (hover: hover) {
228
675
  h1:hover a[href^="#"], h2:hover a[href^="#"], h3:hover a[href^="#"], h4:hover a[href^="#"], h5:hover a[href^="#"], h6:hover a[href^="#"] {
229
676
  visibility: visible;
230
677
  }
231
678
  }
232
-
233
679
  /*```
234
- </details>
235
680
 
236
681
  **PRO** example of automatic anchors for `11ty`+`markdown-it-anchor`: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
237
682
 
683
+ \3c !--section:docs,list-->
684
+
238
685
  ### List markers
239
686
 
240
687
  Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
@@ -252,27 +699,21 @@ Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or eve
252
699
  {style="--list-marker:'→ '"}
253
700
  </article>
254
701
 
255
- <details>How it works:
702
+ How it works:
256
703
  ```css */
257
-
258
704
  ul[style*="--list-marker:"], ol[style*="--list-marker:"] {
259
705
  list-style-type: var(--list-marker);
260
706
  }
261
-
262
707
  ul[style*="--list-marker:"] > li, ol[style*="--list-marker:"] > li {
263
708
  list-style-type: inherit;
264
709
  }
265
-
266
710
  ul li[style*="--list-marker:"], ol li[style*="--list-marker:"] {
267
711
  list-style-type: var(--list-marker);
268
712
  }
269
-
270
713
  ul li[data-marker]::marker, ol li[data-marker]::marker {
271
714
  content: attr(data-marker) " "; /* ⚠️ Chrome and Firefox only */
272
715
  }
273
-
274
716
  /*```
275
- </details>
276
717
 
277
718
  ### Unlist
278
719
 
@@ -289,9 +730,8 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
289
730
 
290
731
  `.unlist-all` also removes styling from all nested lists.
291
732
 
292
- <details>How it works:
733
+ How it works:
293
734
  ```css */
294
-
295
735
  ul.unlist,
296
736
  ul.unlist-all,
297
737
  .unlist-all ul,
@@ -300,61 +740,48 @@ ul.unlist,
300
740
  .unlist-all ol {
301
741
  padding-inline-start: 0;
302
742
  }
303
-
304
743
  ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unlist-all > li, .unlist-all ol > li {
305
744
  list-style: none;
306
745
  }
307
-
308
746
  /*```
309
- </details>
310
- <!--section--> */
311
-
747
+ \3c !--section--> */
312
748
  /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
313
- <!--section:code-->
749
+ \3c !--section:code-->
314
750
  ```css */
315
-
316
751
  /* Use inline flex only if link contains an icon */
317
-
318
752
  a:has(> i) {
319
753
  display: inline-flex;
320
754
  gap: 0.375ch; /* =3/8 */
321
755
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
322
756
  }
323
-
324
757
  a > i {
325
758
  font-style: normal;
326
759
  float: left; /* ✅ Chrome ❌ Safari */
327
760
  text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
328
761
  }
329
-
330
762
  /* Favicons */
331
-
332
763
  a > i > img {
333
764
  height: 1.25em;
334
765
  margin-block-start: calc(-0.25em / 2);
335
766
  max-width: none; /* to keep ratio safe */
336
767
  display: inline-block; /* for Tailwind CSS Typography */
337
768
  }
338
-
339
769
  a > i[class^="fa-"],
340
770
  a > i[class*=" fa-"] {
341
771
  line-height: inherit;
342
772
  --fa-width: auto;
343
773
  }
344
-
345
774
  /* Font Awesome */
346
-
347
775
  a > i.fa-lg {
348
776
  line-height: normal;
349
777
  }
350
-
351
778
  /*```
352
- <!--section:summary-->
779
+ \3c !--section:summary-->
353
780
 
354
781
  Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
355
782
  It automatically handles sizing and alignment while preventing underline on icons.
356
783
 
357
- <!--section:docs-->
784
+ \3c !--section:docs-->
358
785
 
359
786
  <article class="breakout-item">
360
787
 
@@ -375,10 +802,9 @@ How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e
375
802
 
376
803
  **PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
377
804
 
378
- <!--section--> */
379
-
805
+ \3c !--section--> */
380
806
  /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
381
- <!--section:docs-->
807
+ \3c !--section:docs-->
382
808
 
383
809
  ### Column expanders
384
810
 
@@ -391,32 +817,27 @@ Place `<hr>` element inside `<th>` column to expand it horizontally:
391
817
  | (012) 345-6789 | (012) 345-6789 |
392
818
  </article>
393
819
 
394
- Living examples of big tables with `<hr>`-expanders: <!--A-Z-->
820
+ Living examples of big tables with `<hr>`-expanders: \3c !--A-Z-->
395
821
  - https://blades.ninja/ai/ide/
396
822
  - https://blades.ninja/build-awesome-11ty/starters/
397
823
  - https://blades.ninja/css/frameworks/
398
824
  - https://blades.ninja/ssg/
399
825
 
400
- <details>How it works:
826
+ How it works:
401
827
  ```css */
402
-
403
828
  th hr {
404
829
  width: 12ch; /* min ~65/12 = ~5 cols */
405
830
  height: 0;
406
831
  margin: 0;
407
832
  visibility: hidden;
408
833
  }
409
-
410
834
  th hr.lg {
411
835
  width: 18ch;
412
836
  }
413
-
414
837
  th hr.x2 {
415
838
  width: 24ch;
416
839
  }
417
-
418
840
  /*```
419
- </details>
420
841
 
421
842
  ### Borderless table
422
843
 
@@ -433,17 +854,14 @@ th hr.x2 {
433
854
 
434
855
  Living example: https://bladeswitch.com/#minimal-dependencies table
435
856
 
436
- <!--section--> */
437
-
857
+ \3c !--section--> */
438
858
  table.borderless th,
439
859
  table.borderless td {
440
860
  border: none;
441
861
  }
442
-
443
862
  /*
444
- <!--section:code-->
863
+ \3c !--section:code-->
445
864
  ```css */
446
-
447
865
  table.responsive,
448
866
  .breakout > table:not(.does-not-exist),
449
867
  .breakout-all > table:not(.does-not-exist) {
@@ -463,7 +881,6 @@ table.responsive,
463
881
  overflow-x: auto;
464
882
  -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
465
883
  }
466
-
467
884
  table.responsive th,
468
885
  table.responsive td,
469
886
  .breakout > table:not(.does-not-exist) th,
@@ -472,16 +889,15 @@ table.responsive th,
472
889
  .breakout-all > table:not(.does-not-exist) td {
473
890
  padding-inline-start: 0;
474
891
  }
475
-
476
892
  /*```
477
893
  `table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
478
894
 
479
- <!--section:summary-->
895
+ \3c !--section:summary-->
480
896
 
481
897
  `.responsive` makes a table full-bleed and scroll on mobile, without a need for a redundant wrapper (finally).
482
898
  Tables inside https://blades.ninja/css/breakout/ are responsive by default.
483
899
 
484
- <!--section:docs-->
900
+ \3c !--section:docs-->
485
901
 
486
902
  ### Demo table
487
903
 
@@ -493,16 +909,15 @@ Tables inside https://blades.ninja/css/breakout/ are responsive by default.
493
909
 
494
910
  ---
495
911
 
496
- Living examples: <!--A-Z-->
912
+ Living examples: \3c !--A-Z-->
497
913
  - https://blades.ninja/ai/ide/
498
914
  - https://blades.ninja/build-awesome-11ty/starters/
499
915
  - https://blades.ninja/css/frameworks/
500
916
  - https://blades.ninja/ssg/
501
917
 
502
- <!--section--> */
503
-
918
+ \3c !--section--> */
504
919
  /* Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
505
- <!--section:docs-->
920
+ \3c !--section:docs-->
506
921
 
507
922
  ### Code
508
923
 
@@ -514,23 +929,18 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
514
929
  ├── blades.theme.css # minimal opinionated theme
515
930
  └── blades.css # above two together
516
931
  ```
517
- <details>How it works:
932
+ How it works:
518
933
  ```css */
519
-
520
934
  pre {
521
935
  padding: 1rem 1.5rem;
522
936
  padding-inline-end: 2rem;
523
937
  }
524
-
525
938
  @media (max-width: 767px) {
526
-
527
939
  pre {
528
940
  border-radius: 0
529
941
  }
530
942
  }
531
-
532
943
  /* Code block caption via data-attr (to display filename, etc.) */
533
-
534
944
  code[data-caption]::before {
535
945
  content: attr(data-caption);
536
946
  display: block;
@@ -538,51 +948,39 @@ code[data-caption]::before {
538
948
  opacity: 50%;
539
949
  font-style: italic;
540
950
  }
541
-
542
951
  code:where(pre > *) {
543
952
  padding: 0;
544
953
  }
545
-
546
954
  /* Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css */
547
-
548
955
  .token.treeview-part .entry-line {
549
956
  width: 2.5em !important;
550
957
  opacity: 25%;
551
958
  }
552
-
553
959
  .token.treeview-part .entry-name:last-child {
554
960
  opacity: 50%;
555
961
  }
556
-
557
962
  .token.treeview-part .entry-name:last-child::before {
558
963
  display: none !important;
559
964
  }
560
-
561
965
  /*```
562
- </details>
563
- <!--section--> */
564
-
966
+ \3c !--section--> */
565
967
  /* Forms */
566
-
567
968
  /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
568
- <!--section:docs-->
969
+ \3c !--section:docs-->
569
970
 
570
971
  First, we target either:
571
972
  1. `<label>` which `:has` inner form inputs (classless approach)
572
973
  2. or explicit `.has-float-label` class (alternative approach)
573
974
  ```css */
574
-
575
975
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
576
976
  .has-float-label {
577
977
  display: block;
578
978
  position: relative;
579
979
  }
580
-
581
980
  /*
582
981
  ```
583
982
  Then, we define the default/fallback state (when the float label should be minimized):
584
983
  ```css */
585
-
586
984
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
587
985
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
588
986
  .has-float-label > span,
@@ -593,29 +991,23 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
593
991
  cursor: text;
594
992
  font-size: 75%;
595
993
  }
596
-
597
994
  /*
598
995
  ```
599
996
  Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
600
997
  ```css */
601
-
602
998
  label: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 {
603
999
  opacity: 0;
604
1000
  }
605
-
606
1001
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
607
1002
  opacity: 0;
608
1003
  }
609
-
610
1004
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
611
1005
  opacity: 0;
612
1006
  }
613
-
614
1007
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label: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 {
615
1008
  font-size: inherit;
616
1009
  opacity: 50%;
617
1010
  }
618
-
619
1011
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
620
1012
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
621
1013
  .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
@@ -623,18 +1015,15 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
623
1015
  font-size: inherit;
624
1016
  opacity: 50%;
625
1017
  }
626
-
627
1018
  /*
628
1019
  ```
629
1020
  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.
630
1021
 
631
1022
  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.
632
- <!--section--> */
633
-
1023
+ \3c !--section--> */
634
1024
  /* Utilities */
635
-
636
1025
  /* Extends https://github.com/picocss/pico/tree/main/scss/utilities
637
- <!--section:docs-->
1026
+ \3c !--section:docs-->
638
1027
 
639
1028
  ### Auto-dark
640
1029
 
@@ -644,35 +1033,26 @@ Historically, this was not possible: the float label had to be placed after the
644
1033
  <p>Look how cool <big class="dark-auto">🔥🕷️🐦‍⬛🐄🦓</big> can look in the dark!</p>
645
1034
  </article>
646
1035
 
647
- <details>How it works:
1036
+ How it works:
648
1037
  ```css */
649
-
650
1038
  /* Per https://picocss.com/docs/css-variables#css-variables-for-color-schemes */
651
-
652
1039
  :root {
653
1040
  --blades-dark-filter: invert(100%) hue-rotate(180deg);
654
1041
  }
655
-
656
1042
  .dark-auto {
657
1043
  /* Dark color scheme (Forced) */
658
1044
  }
659
-
660
1045
  /* Dark color scheme (Auto) */
661
-
662
1046
  @media (prefers-color-scheme: dark) {
663
-
664
1047
  .dark-auto {
665
1048
  filter: var(--blades-dark-filter)
666
1049
  }
667
1050
  }
668
-
669
1051
  .dark-auto[data-theme="dark"],
670
1052
  .dark-auto:where([data-theme="dark"] *) {
671
1053
  filter: var(--blades-dark-filter);
672
1054
  }
673
-
674
1055
  /*```
675
- </details>
676
1056
 
677
1057
  ### Faded
678
1058
 
@@ -682,33 +1062,24 @@ Historically, this was not possible: the float label had to be placed after the
682
1062
  Hover to unfade me!
683
1063
  </article>
684
1064
 
685
- <details>How it works:
1065
+ How it works:
686
1066
  ```css */
687
-
688
1067
  .faded {
689
1068
  opacity: 50%;
690
1069
  }
691
-
692
1070
  .faded:hover {
693
1071
  opacity: 87.5%;
694
1072
  }
695
-
696
1073
  /*```
697
- </details>
698
- <!--section--> */
699
-
1074
+ \3c !--section--> */
700
1075
  /* Fix the scrollbar color when inverted by https://tailwindcss.com/docs/filter-invert */
701
-
702
1076
  .invert ::-webkit-scrollbar {
703
1077
  filter: invert(1) !important;
704
1078
  }
705
-
706
1079
  /*
707
- <!--section:code-->
1080
+ \3c !--section:code-->
708
1081
  ```css */
709
-
710
1082
  /* Default/fallback state */
711
-
712
1083
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
713
1084
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
714
1085
  .has-float-label > span,
@@ -718,7 +1089,6 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
718
1089
  opacity: 75%;
719
1090
  transition: all 0.25s;
720
1091
  }
721
-
722
1092
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
723
1093
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
724
1094
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
@@ -729,31 +1099,25 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
729
1099
  padding-inline-start: 1rem; /* match Pico */
730
1100
  padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
731
1101
  }
732
-
733
1102
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label: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 {
734
1103
  opacity: 100%;
735
1104
  -moz-transition: all 0.25s;
736
1105
  transition: all 0.25s;
737
1106
  }
738
-
739
1107
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label: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 {
740
1108
  opacity: 100%;
741
1109
  transition: all 0.25s;
742
1110
  }
743
-
744
1111
  /* Enlarged state */
745
-
746
1112
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label: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 {
747
1113
  padding-block: 0.75rem; /* match Pico */
748
1114
  }
749
-
750
1115
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
751
1116
  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
752
1117
  .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
753
1118
  .has-float-label:has(*:placeholder-shown:not(:focus)) label {
754
1119
  padding-block: 0.75rem; /* match Pico */
755
1120
  }
756
-
757
1121
  html {
758
1122
  /* Prevent horizontal overflow and scrolling, modern way. */
759
1123
  overflow-x: clip;
@@ -762,7 +1126,6 @@ html {
762
1126
  -webkit-font-smoothing: antialiased;
763
1127
  -moz-osx-font-smoothing: grayscale;
764
1128
  }
765
-
766
1129
  body {
767
1130
  /* Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support). */
768
1131
  min-height: 100dvh;
@@ -776,68 +1139,52 @@ body {
776
1139
  /* Enable global hyphenation */
777
1140
  /* ... except for links and tables which are better (safer) without hyphenation */
778
1141
  }
779
-
780
1142
  body > main {
781
1143
  flex-grow: 1;
782
1144
  }
783
-
784
- body {
1145
+ body{
785
1146
  text-wrap: pretty;
786
- hyphens: auto;
787
- }
788
-
1147
+ hyphens: auto}
789
1148
  body a,
790
1149
  body table {
791
1150
  hyphens: none;
792
1151
  }
793
-
794
1152
  a:not([href^="#"]) {
795
1153
  text-decoration-thickness: 1px;
796
1154
  }
797
-
798
1155
  a:not([href^="#"]):hover {
799
1156
  text-decoration-thickness: 2px;
800
1157
  }
801
-
802
1158
  h1 {
803
1159
  font-size: 2.5em; /* for pico.css & tw-typography */
804
1160
  margin-bottom: 1rem; /* for tw-typography */
805
1161
  }
806
-
807
1162
  hr {
808
1163
  margin-block: 2em; /* for pico.css & tw-typography */
809
1164
  }
810
-
811
1165
  ul ul {
812
1166
  font-size: 87.5%;
813
1167
  }
814
-
815
1168
  pre small {
816
1169
  opacity: 75%;
817
1170
  font-weight: lighter;
818
1171
  }
819
-
820
1172
  table th {
821
1173
  vertical-align: bottom;
822
1174
  font-weight: bold;
823
1175
  }
824
-
825
1176
  table td {
826
1177
  vertical-align: top;
827
1178
  }
828
-
829
1179
  table pre {
830
1180
  margin-bottom: 0.25rem;
831
1181
  }
832
-
833
1182
  [data-jump-to="top"] {
834
1183
  opacity: 25%;
835
1184
  }
836
-
837
1185
  [data-jump-to="top"]:hover {
838
1186
  opacity: 75%;
839
1187
  }
840
-
841
1188
  [data-jump-to="top"] > i {
842
1189
  display: inline-block;
843
1190
  padding: 0.25rem 0.375rem;
@@ -846,17 +1193,14 @@ table pre {
846
1193
  color: black;
847
1194
  border-color: black;
848
1195
  }
849
-
850
1196
  .breakout > img,
851
1197
  .breakout > figure,
852
1198
  .breakout-all > img,
853
1199
  .breakout-all > figure {
854
1200
  margin-bottom: 1rem;
855
1201
  }
856
-
857
1202
  .faded a {
858
1203
  text-decoration-style: dotted;
859
1204
  }
860
-
861
1205
  /*```
862
- <!--section--> */
1206
+ \3c !--section--> */