aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/releases/_artifacts/v1.0.5/missing.css
diff options
context:
space:
mode:
Diffstat (limited to 'releases/_artifacts/v1.0.5/missing.css')
-rw-r--r--releases/_artifacts/v1.0.5/missing.css2382
1 files changed, 2382 insertions, 0 deletions
diff --git a/releases/_artifacts/v1.0.5/missing.css b/releases/_artifacts/v1.0.5/missing.css
new file mode 100644
index 0000000..35c468e
--- /dev/null
+++ b/releases/_artifacts/v1.0.5/missing.css
@@ -0,0 +1,2382 @@
+/* Document
+ * ========================================================================== */
+
+/**
+ * 1. Add border box sizing in all browsers (opinionated).
+ * 2. Backgrounds do not repeat by default (opinionated).
+ */
+
+*,
+::before,
+::after {
+ box-sizing: border-box; /* 1 */
+ background-repeat: no-repeat; /* 2 */
+}
+
+/**
+ * 1. Add text decoration inheritance in all browsers (opinionated).
+ * 2. Add vertical alignment inheritance in all browsers (opinionated).
+ */
+
+::before,
+::after {
+ text-decoration: inherit; /* 1 */
+ vertical-align: inherit; /* 2 */
+}
+
+/**
+ * 1. Use the default cursor in all browsers (opinionated).
+ * 3. Breaks words to prevent overflow in all browsers (opinionated).
+ * 5. Remove the grey highlight on links in iOS (opinionated).
+ * 6. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+:root {
+ cursor: default; /* 1 */
+ overflow-wrap: break-word; /* 3 */
+ -webkit-tap-highlight-color: transparent; /* 5 */
+ text-size-adjust: none;
+ -webkit-text-size-adjust: none;
+}
+
+/* Text-level semantics
+ * ========================================================================== */
+
+/**
+ * Add the correct text decoration in Safari.
+ */
+
+abbr[title] {
+ text-decoration: underline;
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+strong, b {
+ font-weight: bolder;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/* Embedded content
+ * ========================================================================== */
+
+/*
+ * Change the alignment on media elements in all browsers (opinionated).
+ */
+
+audio, canvas, iframe, img, svg, video {
+ vertical-align: middle;
+}
+
+/**
+ * Change the fill color to match the text color in all browsers (opinionated).
+ */
+
+svg:not([fill]) {
+ fill: currentColor;
+}
+
+/* Tabular data
+ * ========================================================================== */
+
+/**
+ * 1. Collapse border spacing in all browsers (opinionated).
+ * 2. Correct table border color in Chrome, Edge, and Safari.
+ * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
+ */
+
+table {
+ border-collapse: collapse; /* 1 */
+ border-color: currentColor; /* 2 */
+ text-indent: 0; /* 3 */
+}
+
+/* Forms
+ * ========================================================================== */
+
+/**
+ * Remove the margin on controls in Safari.
+ */
+
+button, input, select {
+ margin: 0;
+}
+
+/**
+ * Correct the inability to style buttons in iOS and Safari.
+ */
+
+button, [type="button"], [type="reset"], [type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Change the inconsistent appearance in all browsers (opinionated).
+ */
+
+fieldset {
+ border: 1px solid #a0a0a0;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Edge, and Firefox.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * 1. Remove the margin in Firefox and Safari.
+ */
+
+textarea {
+ margin: 0; /* 1 */
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome, Edge, and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Safari.
+ */
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+ block-size: auto;
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+ color: inherit;
+ opacity: 0.54;
+}
+
+/**
+ * Remove the inner padding in Chrome, Edge, and Safari on macOS.
+ */
+
+::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style upload buttons in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ * ========================================================================== */
+
+[hidden] {
+ display: none !important;
+}
+
+:focus-visible {
+ outline: .2em solid var(--accent);
+ z-index: 32;
+}
+
+iframe:focus-visible,
+ html:focus-visible,
+ body:focus-visible {
+ outline: none;
+ }
+
+:target {
+ outline: .2em solid var(--fg);
+ z-index: 2;
+}
+
+/*
+ * Add the correct display in Safari.
+ */
+
+details > summary:first-of-type {
+ display: list-item;
+}
+
+/* Accessibility
+ * ========================================================================== */
+
+/**
+ * Change the cursor on busy elements in all browsers (opinionated).
+ */
+
+[aria-busy="true"] {
+ cursor: progress;
+}
+
+/*
+ * Change the cursor on disabled, not-editable, or otherwise
+ * inoperable elements in all browsers (opinionated).
+ */
+
+[aria-disabled="true"], [disabled] {
+ cursor: not-allowed;
+}
+
+datalist {
+ display: none !important;
+}
+
+/* https://github.com/fchristant/colar/ */
+
+:root {
+ --gray-0: #f8fafb;
+ --gray-1: #f2f4f6;
+ --gray-2: #ebedef;
+ --gray-3: #e0e4e5;
+ --gray-4: #d1d6d8;
+ --gray-5: #b1b6b9;
+ --gray-6: #979b9d;
+ --gray-7: #7e8282;
+ --gray-8: #666968;
+ --gray-9: #50514f;
+ --gray-10: #3a3a37;
+ --gray-11: #252521;
+ --gray-12: #121210;
+
+ --red-0: #fff5f5;
+ --red-1: #ffe3e3;
+ --red-2: #ffc9c9;
+ --red-3: #ffa8a8;
+ --red-4: #ff8787;
+ --red-5: #ff6b6b;
+ --red-6: #fa5252;
+ --red-7: #f03e3e;
+ --red-8: #e03131;
+ --red-9: #c92a2a;
+ --red-10: #b02525;
+ --red-11: #962020;
+ --red-12: #7d1a1a;
+
+ --pink-0: #fff0f6;
+ --pink-1: #ffdeeb;
+ --pink-2: #fcc2d7;
+ --pink-3: #faa2c1;
+ --pink-4: #f783ac;
+ --pink-5: #f06595;
+ --pink-6: #e64980;
+ --pink-7: #d6336c;
+ --pink-8: #c2255c;
+ --pink-9: #a61e4d;
+ --pink-10: #8c1941;
+ --pink-11: #731536;
+ --pink-12: #59102a;
+
+ --purple-0: #f8f0fc;
+ --purple-1: #f3d9fa;
+ --purple-2: #eebefa;
+ --purple-3: #e599f7;
+ --purple-4: #da77f2;
+ --purple-5: #cc5de8;
+ --purple-6: #be4bdb;
+ --purple-7: #ae3ec9;
+ --purple-8: #9c36b5;
+ --purple-9: #862e9c;
+ --purple-10: #702682;
+ --purple-11: #5a1e69;
+ --purple-12: #44174f;
+
+ --violet-0: #f3f0ff;
+ --violet-1: #e5dbff;
+ --violet-2: #d0bfff;
+ --violet-3: #b197fc;
+ --violet-4: #9775fa;
+ --violet-5: #845ef7;
+ --violet-6: #7950f2;
+ --violet-7: #7048e8;
+ --violet-8: #6741d9;
+ --violet-9: #5f3dc4;
+ --violet-10: #5235ab;
+ --violet-11: #462d91;
+ --violet-12: #3a2578;
+
+ --indigo-0: #edf2ff;
+ --indigo-1: #dbe4ff;
+ --indigo-2: #bac8ff;
+ --indigo-3: #91a7ff;
+ --indigo-4: #748ffc;
+ --indigo-5: #5c7cfa;
+ --indigo-6: #4c6ef5;
+ --indigo-7: #4263eb;
+ --indigo-8: #3b5bdb;
+ --indigo-9: #364fc7;
+ --indigo-10: #2f44ad;
+ --indigo-11: #283a94;
+ --indigo-12: #21307a;
+
+ --blue-0: #e7f5ff;
+ --blue-1: #d0ebff;
+ --blue-2: #a5d8ff;
+ --blue-3: #74c0fc;
+ --blue-4: #4dabf7;
+ --blue-5: #339af0;
+ --blue-6: #228be6;
+ --blue-7: #1c7ed6;
+ --blue-8: #1971c2;
+ --blue-9: #1864ab;
+ --blue-10: #145591;
+ --blue-11: #114678;
+ --blue-12: #0d375e;
+
+ --cyan-0: #e3fafc;
+ --cyan-1: #c5f6fa;
+ --cyan-2: #99e9f2;
+ --cyan-3: #66d9e8;
+ --cyan-4: #3bc9db;
+ --cyan-5: #22b8cf;
+ --cyan-6: #15aabf;
+ --cyan-7: #1098ad;
+ --cyan-8: #0c8599;
+ --cyan-9: #0b7285;
+ --cyan-10: #095c6b;
+ --cyan-11: #074652;
+ --cyan-12: #053038;
+
+ --teal-0: #e6fcf5;
+ --teal-1: #c3fae8;
+ --teal-2: #96f2d7;
+ --teal-3: #63e6be;
+ --teal-4: #38d9a9;
+ --teal-5: #20c997;
+ --teal-6: #12b886;
+ --teal-7: #0ca678;
+ --teal-8: #099268;
+ --teal-9: #087f5b;
+ --teal-10: #066649;
+ --teal-11: #054d37;
+ --teal-12: #033325;
+
+ --green-0: #ebfbee;
+ --green-1: #d3f9d8;
+ --green-2: #b2f2bb;
+ --green-3: #8ce99a;
+ --green-4: #69db7c;
+ --green-5: #51cf66;
+ --green-6: #40c057;
+ --green-7: #37b24d;
+ --green-8: #2f9e44;
+ --green-9: #2b8a3e;
+ --green-10: #237032;
+ --green-11: #1b5727;
+ --green-12: #133d1b;
+
+ --lime-0: #f4fce3;
+ --lime-1: #e9fac8;
+ --lime-2: #d8f5a2;
+ --lime-3: #c0eb75;
+ --lime-4: #a9e34b;
+ --lime-5: #94d82d;
+ --lime-6: #82c91e;
+ --lime-7: #74b816;
+ --lime-8: #66a80f;
+ --lime-9: #5c940d;
+ --lime-10: #4c7a0b;
+ --lime-11: #3c6109;
+ --lime-12: #2c4706;
+
+ --yellow-0: #fff9db;
+ --yellow-1: #fff3bf;
+ --yellow-2: #ffec99;
+ --yellow-3: #ffe066;
+ --yellow-4: #ffd43b;
+ --yellow-5: #fcc419;
+ --yellow-6: #fab005;
+ --yellow-7: #f59f00;
+ --yellow-8: #f08c00;
+ --yellow-9: #e67700;
+ --yellow-10: #b35c00;
+ --yellow-11: #804200;
+ --yellow-12: #663500;
+
+ --orange-0: #fff4e6;
+ --orange-1: #ffe8cc;
+ --orange-2: #ffd8a8;
+ --orange-3: #ffc078;
+ --orange-4: #ffa94d;
+ --orange-5: #ff922b;
+ --orange-6: #fd7e14;
+ --orange-7: #f76707;
+ --orange-8: #e8590c;
+ --orange-9: #d9480f;
+ --orange-10: #bf400d;
+ --orange-11: #99330b;
+ --orange-12: #802b09;
+
+ --choco-0: #fff8dc;
+ --choco-1: #fce1bc;
+ --choco-2: #f7ca9e;
+ --choco-3: #f1b280;
+ --choco-4: #e99b62;
+ --choco-5: #df8545;
+ --choco-6: #d46e25;
+ --choco-7: #bd5f1b;
+ --choco-8: #a45117;
+ --choco-9: #8a4513;
+ --choco-10: #703a13;
+ --choco-11: #572f12;
+ --choco-12: #3d210d;
+
+ --brown-0: #faf4eb;
+ --brown-1: #ede0d1;
+ --brown-2: #e0cab7;
+ --brown-3: #d3b79e;
+ --brown-4: #c5a285;
+ --brown-5: #b78f6d;
+ --brown-6: #a87c56;
+ --brown-7: #956b47;
+ --brown-8: #825b3a;
+ --brown-9: #6f4b2d;
+ --brown-10:#5e3a21;
+ --brown-11:#4e2b15;
+ --brown-12: #422412;
+
+ --sand-0: #f8fafb;
+ --sand-1: #e6e4dc;
+ --sand-2: #d5cfbd;
+ --sand-3: #c2b9a0;
+ --sand-4: #aea58c;
+ --sand-5: #9a9178;
+ --sand-6: #867c65;
+ --sand-7: #736a53;
+ --sand-8: #5f5746;
+ --sand-9: #4b4639;
+ --sand-10:#38352d;
+ --sand-11:#252521;
+ --sand-12: #121210;
+
+ --camo-0: #f9fbe7;
+ --camo-1: #e8ed9c;
+ --camo-2: #d2df4e;
+ --camo-3: #c2ce34;
+ --camo-4: #b5bb2e;
+ --camo-5: #a7a827;
+ --camo-6: #999621;
+ --camo-7: #8c851c;
+ --camo-8: #7e7416;
+ --camo-9: #6d6414;
+ --camo-10: #5d5411;
+ --camo-11: #4d460e;
+ --camo-12: #36300a;
+
+ --jungle-0: #ecfeb0;
+ --jungle-1: #def39a;
+ --jungle-2: #d0e884;
+ --jungle-3: #c2dd6e;
+ --jungle-4: #b5d15b;
+ --jungle-5: #a8c648;
+ --jungle-6: #9bbb36;
+ --jungle-7: #8fb024;
+ --jungle-8: #84a513;
+ --jungle-9: #7a9908;
+ --jungle-10: #658006;
+ --jungle-11: #516605;
+ --jungle-12: #3d4d04;
+}
+
+/***
+ 4.1 The document element
+ https://html.spec.whatwg.org/multipage/semantics.html#the-root-element
+
+ 4.3 Sections
+ https://html.spec.whatwg.org/multipage/sections.html
+ ***/
+
+html {
+ font-family: var(--main-font);
+ line-height: var(--rhythm);
+
+ background: var(--bg);
+ color: var(--fg);
+ scroll-padding-block-start: calc(4 * var(--gap));
+}
+
+body {
+ margin: 0;
+}
+
+header, footer, section + section {
+ margin-block: calc(2 * var(--gap));
+}
+
+nav a {
+ text-decoration: none;
+ color: var(--accent);
+ }
+
+/* SEE components/box.css */
+
+aside h1,
+ aside h2,
+ aside h3,
+ aside h4,
+ aside h5,
+ aside h6 {
+ font-size: 1em;
+ text-transform: none;
+ letter-spacing: none;
+ }
+
+aside.big {
+ /* Pull quote */
+ background: none;
+ border: none;
+ border-inline-start: 1px solid var(--muted-fg);
+ border-radius: 0;
+ padding: 0;
+ padding-inline-start: var(--rhythm);
+ font-style: italic;
+ color: var(--accent);
+ }
+
+h1, h2, h3, h4, h5, h6,
+.\<h1\>, .\<h2\>, .\<h3\>, .\<h4\>, .\<h5\>, .\<h6\> {
+ margin-block-end: var(--gap);
+ font-family: var(--secondary-font);
+ font-size: 1em;
+ margin-block-start: calc(2 * var(--gap));
+ position: relative;
+}
+
+h1, .\<h1\> {
+ font-size: 2em;
+ text-transform: none;
+ line-height: calc(2 * var(--rhythm));
+ letter-spacing: 0;
+}
+
+h2, .\<h2\> {
+ font-size: 1.6em;
+ text-transform: none;
+ line-height: calc(1.5 * var(--rhythm));
+ letter-spacing: 0;
+}
+
+h3, .\<h3\> {
+ font-size: 1.17em;
+ line-height: calc(1 * var(--rhythm));
+}
+
+h4, .\<h4\>, h5, .\<h5\>, h6, .\<h6\> {
+ font-size: 1em;
+ text-transform: none;
+ line-height: calc(1 * var(--rhythm));
+ letter-spacing: 0;
+ margin-block-start: var(--gap);
+}
+
+h1 + h2,
+h2 + h3,
+h3 + h4,
+h4 + h5,
+h5 + h6,
+h1:first-child,
+h2:first-child,
+h3:first-child,
+h4:first-child,
+h5:first-child,
+h6:first-child {
+ margin-block-start: var(--gap);
+}
+
+h1:target,
+h2:target,
+h3:target,
+h4:target,
+h5:target,
+h6:target {
+ outline: none
+}
+
+h1:target::before, h2:target::before, h3:target::before, h4:target::before, h5:target::before, h6:target::before {
+ content: "";
+ display: block;
+ position: absolute;
+ left: -.5em;
+ width: 4px;
+ height: 100%;
+ background: var(--accent);
+ }
+
+header {
+ font-family: var(--secondary-font);
+ border-block-end: 1px solid var(--graphical-fg);
+}
+
+footer {
+ font-family: var(--secondary-font);
+ border-block-start: 1px solid var(--graphical-fg);
+}
+
+body > header,
+body > footer,
+main + footer {
+ padding: var(--rhythm) calc((100% - var(--eff-line-length)) / 2)
+}
+
+address {
+ --density: 0;
+}
+
+/***
+ 4.4 Grouping content
+ https://html.spec.whatwg.org/multipage/grouping-content.html
+ ***/
+
+p {
+ margin-block: var(--gap);
+}
+
+hr {
+ color: inherit;
+ margin-inline: 0;
+ margin-block: var(--gap);
+
+ flex: 0 1 0px;
+ border-inline-start: 1px solid var(--accent);
+ block-size: auto;
+ border-block-start: 1px solid var(--accent);
+ border-block-end: none;
+ border-inline-end: none;
+}
+
+pre {
+ font-family: var(--mono-font);
+ font-size: .9em;
+ line-height: var(--rhythm);
+ -o-tab-size: 2;
+ tab-size: 2;
+
+ margin: var(--gap) 0;
+
+ overflow-x: auto;
+ scrollbar-width: thin;
+ scrollbar-color: var(--accent) transparent;
+}
+
+blockquote {
+ margin-inline: 0 var(--gap);
+ padding-inline: var(--gap) 0;
+ margin-block: var(--gap);
+
+ font-size: 1.1em;
+ line-height: var(--rhythm);
+ font-style: italic;
+
+ border-inline-start: 1px solid var(--graphical-fg);
+ color: var(--muted-fg)
+}
+
+blockquote em, blockquote cite, blockquote dfn, blockquote var, blockquote i, blockquote address {
+ font-style: normal;
+ }
+
+blockquote footer {
+ text-align: right;
+ text-align: end;
+ }
+
+ul, ol {
+ padding-inline-start: var(--rhythm)
+}
+
+ul ul, ul ol, ol ul, ol ol {
+ padding-inline-start: var(--gap);
+ }
+
+ul[role="list"], ol[role="list"], ul[role="listbox"], ol[role="listbox"] {
+ padding-inline-start: 0;
+ list-style: none;
+ }
+
+ul {
+}
+
+ol {
+ list-style: decimal;
+}
+
+dl {
+ margin-block: var(--gap);
+}
+
+dt {
+ font-weight: bold;
+ }
+
+dd {
+ margin-inline-start: var(--rhythm);
+ }
+
+li::marker {
+ font-family: var(--secondary-font);
+}
+
+figure {
+ max-width: 100%;
+ margin-inline: 0;
+
+ /* SEE components/box.css */
+}
+
+figcaption {
+ margin-block: var(--gap);
+
+ font-family: var(--secondary-font);
+
+ color: var(--muted-fg);
+}
+
+main {
+ max-inline-size: var(--eff-line-length);
+ inline-size: 100%;
+ margin-inline: auto
+}
+
+main:first-child { padding-top: var(--gap); }
+
+/***
+ 4.5 Text-level semantics
+ https://html.spec.whatwg.org/multipage/text-level-semantics.html
+
+ 4.7 Edits
+ https://html.spec.whatwg.org/multipage/edits.html
+ ***/
+
+/* Text-level semantics */
+
+a, .\<a\> {
+ color: var(--link-fg, var(--accent));
+ font-family: var(--secondary-font);
+ border-radius: var(--border-radius);
+ outline-offset: 1px;
+ background: none;
+ border: none;
+ font-size: 1em
+}
+
+.list-of-links :is(a,.\<a\>) {
+ text-decoration: none
+}
+
+:is(a,.\<a\>):hover, :is(a,.\<a\>):focus {
+ text-decoration: none;
+ outline: 1px solid;
+ transition: outline-offset .1s ease-in-out;
+ }
+
+:is(a,.\<a\>):active {
+ outline-offset: 0;
+ }
+
+small[role="note"] {
+ /***
+ Sidenote
+ ***/
+ display: block;
+ float: inline-end;
+ clear: inline-end;
+
+ --sidenote-width: 20ch;
+
+ max-inline-size: var(--sidenote-width);
+ padding-inline: 1.5ch 1ch;
+
+ margin-inline-end: calc(1em - var(--sidenote-width));
+ margin-block-end: var(--rhythm);
+
+ font-family: var(--secondary-font);
+
+ background: var(--bg);
+ border: 1px solid transparent;
+
+ transition: transform .1s ease-in-out
+ }
+
+small[role="note"]:hover, small[role="note"]:focus-within {
+ border: 1px solid var(--graphical-fg);
+ border-radius: var(--border-radius);
+ transform: translateX(calc(
+ 0px - var(--sidenote-width)
+ + min(var(--gutter-width), var(--sidenote-width))
+ ))
+ }
+
+small, .\<small\> {
+ font-size: .8em;
+}
+
+s {
+ color: var(--bad-fg);
+}
+
+q {
+ font-style: italic
+}
+
+q em, q cite, q dfn, q var, q i, q address {
+ font-style: normal;
+ }
+
+time {
+ font-variant-numeric: tabular-nums;
+}
+
+code, samp, kbd {
+ font-family: var(--mono-font);
+ font-style: normal;
+}
+
+samp {
+ color: var(--ok-fg);
+}
+
+kbd kbd /*
+ We apply the key-like styling to a nested kbd element, a pattern shown in
+ WHATWG HTML for marking up keyboard input:
+
+ > Here the kbd element is used to indicate keys to press:
+ > ~~~ html
+ > <p>To make George eat an apple, press <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd></p>
+ > ~~~
+
+ The plain kbd element can also be used for clicking menus (<kbd>File |
+ New...</kbd>) or voice input (<kbd>Hey Siri, </kbd>)
+*/ {
+ display: inline-block;
+
+ padding: 0 .3em;
+ font-size: .8em;
+ line-height: 1.1em;
+
+ background: var(--interactive-bg);
+ border: 1px outset var(--graphical-fg);
+ border-block-end-width: 3px;
+ border-radius: var(--border-radius);
+}
+
+sub {
+ vertical-align: bottom;
+ line-height: 1;
+}
+
+sup {
+ vertical-align: top;
+ line-height: 1;
+}
+
+mark {
+ background: var(--warn-bg);
+ color: var(--warn-fg);
+}
+
+/* Edits */
+
+ins {
+ background: var(--ok-bg);
+ color: var(--ok-fg);
+}
+
+del {
+ background: var(--bad-bg);
+ color: var(--bad-fg);
+}
+
+/***
+ 4.8 Embedded content
+ https://html.spec.whatwg.org/multipage/embedded-content.html
+ ***/
+
+img, video, audio, iframe, object, embed {
+ max-inline-size: 100%;
+ inline-size: max-content;
+ block-size: auto;
+}
+
+/***
+ 4.9 Tabular data
+ https://html.spec.whatwg.org/multipage/tables.html
+ ***/
+
+table {
+ font-variant-numeric: tabular-nums;
+ font: inherit;
+}
+
+caption {
+ text-align: start;
+ font-family: var(--secondary-font);
+ font-style: italic;
+}
+
+tbody {
+ border-block: 1px solid var(--faded-fg);
+}
+
+thead {
+}
+
+tfoot {
+}
+
+tr {
+
+}
+
+td, th {
+ vertical-align: top
+}
+
+td:not(:last-child), th:not(:last-child) {
+ padding-inline-end: var(--rhythm);
+ }
+
+td {
+ }
+
+th {
+ font-family: var(--secondary-font);
+ text-align: start;
+ }
+
+/***
+ 4.10 Forms
+ https://html.spec.whatwg.org/multipage/forms.html
+ ***/
+
+input { display: block; }
+
+label input:not([specificity-hack]) { display: inline; padding-block: 0; }
+
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input::file-selector-button,
+.\<button\> {
+ display: inline-block;
+ padding: 0 calc(var(--rhythm) / 4);
+ vertical-align: middle;
+
+ font-size: .8rem;
+ line-height: 1.125em;
+ font-family: var(--secondary-font);
+ min-height: var(--rhythm);
+
+ background: var(--interactive-bg);
+ color: var(--fg);
+ border: 1px solid var(--muted-fg);
+ box-sizing: border-box;
+ border-radius: var(--border-radius);
+
+ /* a-specific resets */
+ color: var(--fg);
+ text-decoration: none;
+ display: inline-flex;
+ place-items: center
+}
+
+:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>):hover, :is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>):focus-visible {
+ filter: brightness(1.1);
+
+ /* a-specific resets */
+ text-decoration: none;
+ }
+
+:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>):active {
+ filter: brightness(.8);
+ }
+
+[aria-pressed="true"]:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>), [aria-expanded="true"]:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) {
+ box-shadow: 0 .05em var(--accent) inset;
+ background: var(--pressed-interactive-bg);
+ }
+
+[disabled]:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) {
+ color: var(--muted-fg);
+ }
+
+strong > :is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) {
+ background: var(--accent);
+ color: var(--bg);
+ border: none;
+ font-weight: bold
+}
+
+strong > [disabled]:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) {
+ color: var(--muted-accent);
+ }
+
+.big:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) {
+ min-block-size: calc(1.5 * var(--rhythm));
+ font-size: 1rem;
+ padding-inline: calc(.5 * var(--rhythm));
+ line-height: var(--rhythm)
+}
+
+input:not([type]),
+input[type="text"],
+input[type="search"],
+input[type="tel"],
+input[type="url"],
+input[type="email"],
+input[type="password"],
+input[type="date"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="number"],
+select,
+textarea {
+ padding: calc(var(--rhythm) / 4);
+ vertical-align: top;
+
+ font-size: 1rem;
+ line-height: inherit;
+ font-family: var(--main-font);
+
+ background: var(--bg);
+ color: var(--fg);
+ border: 1px solid var(--graphical-fg);
+ border-radius: var(--border-radius);
+
+ vertical-align: top
+}
+
+:is(input:not([type]),input[type="text"],input[type="search"],input[type="tel"],input[type="url"],input[type="email"],input[type="password"],input[type="date"],input[type="month"],input[type="week"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="number"],select,textarea):focus-visible {
+ border: 1px solid var(--accent);
+ }
+
+:is(input:not([type]),input[type="text"],input[type="search"],input[type="tel"],input[type="url"],input[type="email"],input[type="password"],input[type="date"],input[type="month"],input[type="week"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="number"],select,textarea)::placeholder {
+ color: var(--muted-fg);
+ opacity: 1;
+ text-align: end;
+ }
+
+input[type="range"] {
+ width: 100%;
+ padding: calc(var(--gap) / 4);
+}
+
+input[type="color"] {
+ padding: 0;
+ margin: 0;
+ height: calc(1.5 * var(--rhythm));
+
+ border: none;
+ background: none;
+}
+
+input[type="file"] {
+ padding: calc(var(--gap) / 4) 0;
+ font: inherit;
+ line-height: calc(var(--rhythm) / 2)
+}
+
+input[type="file"]::file-selector-button {
+ margin-block: .1em 0;
+ margin-inline-end: 1ch;
+ }
+
+select[multiple] {
+ vertical-align: top;
+}
+
+optgroup::before {
+ color: var(--muted-fg);
+ font-style: normal;
+}
+
+progress {
+ /* TODO */
+}
+
+meter {
+ /* TODO */
+}
+
+label[for] {
+ display: block;
+ padding-block: calc(var(--gap) / 4);
+}
+
+fieldset {
+ position: relative;
+
+ padding: var(--gap);
+ margin: var(--gap) 0;
+ width: 100%;
+ border-radius: var(--border-radius);
+}
+
+fieldset > legend + * { margin-block-start: 0 }
+
+fieldset {
+
+ border: 1px solid var(--graphical-fg);
+}
+
+/***
+ 4.11 Interactive elements
+ https://html.spec.whatwg.org/multipage/interactive-elements.html#interactive-elements
+ ***/
+
+details:not(specificity-hack) {
+ /* SEE components/box.css */
+
+ padding-block-start: 0
+}
+
+details:not(specificity-hack):not([open]) { padding-block-end: 0; }
+
+summary {
+ margin: calc(0px - var(--gap));
+ margin-top: calc(0px - var(--gap));
+ margin-bottom: 0;
+ padding-inline: var(--gap);
+
+ font-family: var(--secondary-font);
+ font-weight: bold;
+
+ cursor: pointer
+}
+
+summary:focus-visible, summary:active {
+ filter: brightness(.8);
+ outline: none;
+ }
+
+dialog {
+ /* SEE components/box.css */
+
+ inline-inset: 0;
+
+ block-size: -moz-fit-content;
+
+ block-size: fit-content;
+ inline-size: -moz-fit-content;
+ inline-size: fit-content;
+
+ margin: auto !important;
+
+ background-color: var(--bg);
+ color: var(--fg);
+ border-color: var(--accent);
+}
+
+dialog[open]::backdrop {
+ display: block;
+ background: black;
+ opacity: .4;
+ animation: bg 2s;
+}
+
+@keyframes bg {
+ from { background: transparent; }
+}
+
+dialog:not([open]) {
+ display: none;
+}
+
+.box,
+/* defined elsewhere */
+[role=menu],
+.sidebar-layout > header,
+[role=tabpanel],
+figure,
+details,
+dialog,
+aside {
+ margin: var(--gap) 0;
+ padding: var(--gap);
+ overflow: clip;
+
+ border-radius: var(--border-radius);
+ background: var(--box-bg);
+ border: 1px solid var(--graphical-fg);
+}
+
+.titlebar {
+ margin-inline: calc(0px - var(--gap));
+ margin-block-end: calc(0px - var(--gap));
+ padding-inline: var(--gap);
+
+ font: inherit;
+ font-family: var(--secondary-font);
+ font-weight: bold;
+
+ translate: 0 calc(-1px - var(--gap));
+
+ background: var(--graphical-fg);
+ color: var(--bg);
+}
+
+.sub-title, sub-title {
+ /***
+ Meant for use in headings. Make sure to also use visually-hidden punctuation
+ to mark the subtitle as shown below:
+
+ 1 | <h1>
+ 2 | Foo Bar<v-h>:</v-h>
+ 3 | <sub-title>How I Learned To Stop Worrying and Love Baz</sub-title>
+ 4 | </h1>
+
+ 1 | <h1>
+ 2 | <sub-title class="-allcaps">Breaking News</sub-title><v-h>:</v-h>
+ 3 | Bad Thing Happens
+ 4 | <h1>
+ ***/
+
+ display: block;
+
+ font-weight: normal;
+
+ color: var(--muted-fg);
+}
+
+.tool-bar, [role=toolbar] {
+ display: flex;
+ flex-flow: row wrap;
+ gap: calc(var(--gap) / 2)
+}
+
+.tool-bar > *, [role=toolbar] > * { margin: 0; }
+
+.sidebar-layout header li {
+ margin-block: calc(.5 * var(--gap));
+ }
+
+.sidebar-layout header a {
+ font-weight: bold;
+ }
+
+@media (min-width: 75ch) {
+
+.sidebar-layout {
+ display: grid;
+ grid-template-columns: 25ch auto;
+ inset: 0
+}
+
+ .sidebar-layout > header {
+ border-block: none;
+ border-inline-start: none;
+ margin: 0;
+ }
+
+ .sidebar-layout > :nth-child(2) {
+ overflow: auto;
+ --full-width: calc(100vw - 25ch);
+ margin-top: var(--gap);
+ }
+ }
+
+.breadcrumbs[aria-label] {
+ font-family: var(--secondary-font)
+}
+
+.breadcrumbs[aria-label] ul, .breadcrumbs[aria-label] ol {
+ list-style: none;
+ padding-inline-start: 0;
+ }
+
+.breadcrumbs[aria-label] li {
+ display: inline
+ }
+
+:is(.breadcrumbs[aria-label] li)+li::before {
+ content: ' / ' / '';
+ content: ' / ';
+ display: inline;
+ }
+
+.breadcrumbs[aria-label] [aria-current="page"] {
+ font-weight: bold;
+ }
+
+.chip, chip {
+ font-family: var(--secondary-font);
+ border: 1px solid var(--accent);
+ background: var(--box-bg);
+ border-radius: calc(var(--rhythm) / 2);
+ padding-inline: calc(var(--rhythm) / 2);
+}
+
+.navbar {
+ padding: var(--rhythm);
+
+ font-family: var(--secondary-font);
+
+ background: var(--box-bg);
+ border-block-end: 1px solid var(--accent);
+
+ overflow-x: auto;
+ scrollbar-width: thin;
+
+ position: sticky;
+ z-index: 5;
+ top: 0;
+ left: 0;
+ right: 0;
+
+ /* Inner layout */
+ display: flex;
+ flex-flow: row;
+ align-items: center;
+ gap: var(--gap)
+}
+
+.navbar.expanded {
+ flex-flow: column;
+ align-items: start;
+
+ max-height: 90vh;
+ overflow-y: auto
+ }
+
+.navbar.expanded ul[role="list"] { flex-flow: column; }
+
+.navbar * {
+ flex-shrink: 0;
+ margin-block: 0;
+ }
+
+.navbar:not(.expanded) > :first-child, .navbar:not(.expanded) nav > :first-child { margin-inline-start: auto; }
+
+.navbar:not(.expanded) > :last-child, .navbar:not(.expanded) nav > :last-child { margin-inline-end: auto; }
+
+.navbar hr { align-self: stretch; }
+
+.navbar nav ul[role="list"] {
+ display: flex;
+ flex-flow: row;
+ gap: var(--rhythm)
+ }
+
+.navbar nav ul[role="list"] * { flex-shrink: 0 }
+
+.navbar nav ul[role="list"] {
+ padding-inline-start: 0;
+ }
+
+.navbar a {
+ font-weight: bold;
+ text-decoration: none;
+ padding-inline: .2em;
+ }
+
+.navbar a:hover, .navbar a:focus {
+ text-decoration: underline;
+ }
+
+.navbar [aria-current=page] {
+ position: relative;
+ }
+
+.navbar [aria-current=page]::after {
+ width: 100%;
+ height: 6px;
+ content: "";
+ display: block;
+ position: absolute;
+ bottom: calc(-1 * var(--gap));
+ background: currentcolor;
+ }
+
+.navbar.expanded [aria-current=page]::after {
+ width: 6px;
+ height: 100%;
+ position: absolute;
+ left: calc(-1 * var(--gap));
+ top: 0;
+ }
+
+.permalink-anchor {
+ display: none
+}
+
+*:hover > .permalink-anchor {
+ display: initial
+}
+
+button.iconbutton {
+ border: none;
+ background: none;
+ color: currentcolor;
+ padding: 0;
+ line-height: var(--rhythm);
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ display: inline-block;
+ text-align: center;
+ border-radius: 50%;
+ transition: font-weight .2s ease-in-out
+}
+
+button.iconbutton:hover, button.iconbutton:focus-visible {
+ outline: 1px solid var(--accent);
+ outline-offset: 6px;
+ }
+
+button.iconbutton:active {
+ outline-offset: 3px;
+ background: none;
+ }
+
+button.iconbutton[aria-pressed=true] {
+ box-shadow: none;
+ transform: none;
+ }
+
+[role="tablist"] {
+ display: flex;
+ gap: .5ch;
+ scrollbar-width: thin;
+}
+
+[role="tab"][role="tab"] {
+ all: initial;
+
+ font-family: var(--secondary-font);
+
+ padding: 0 calc(var(--rhythm) / 4);
+ margin: 0;
+ min-height: var(--rhythm);
+
+ color: var(--fg);
+ border: solid var(--graphical-fg);
+ border-width: 1px 1px 0 1px;
+ border-block-end-color: transparent;
+ background: var(--interactive-bg);
+
+ border-start-start-radius: .4em;
+ border-start-end-radius: .4em
+}
+
+[role="tab"][role="tab"]:active, [role="tab"][role="tab"][aria-selected="true"] {
+ transform: none;
+ bottom: -1px;
+ position: relative;
+ background: var(--box-bg);
+ border-block-end: 1px solid var(--box-bg);
+ }
+
+[role="tab"][role="tab"]:hover {
+ background-color: var(--box-bg);
+ }
+
+[role="tab"][role="tab"]:focus {
+ background-color: var(--box-bg);
+ border-color: var(--accent);
+ outline: 1px solid var(--accent);
+ }
+
+[role="tabpanel"] {
+ /* SEE components/box.css */
+
+ margin-block-start: 0;
+ border-start-start-radius: 0;
+ border-start-end-radius: 0;
+ z-index: 1;
+}
+
+[role="menu"] {
+ /* SEE components/box.css */
+ position: absolute;
+
+ z-index: 10;
+
+ padding: calc(var(--gap) / 2) 0;
+ margin: 1px 0 0 0;
+
+ display: flex;
+ flex-flow: column nowrap;
+}
+
+[role=menuitem] {
+ padding: 0 calc(var(--gap) / 2);
+
+ display: block;
+
+ text-decoration: none;
+ border-radius: 0;
+
+ color: var(--fg)
+}
+
+[role=menuitem]:focus, [role=menuitem]:active {
+ background: var(--accent);
+ color: var(--bg);
+ }
+
+[role=listbox] {
+ list-style: none
+}
+
+[role=listbox] [role=option] {
+ margin-inline: calc(-1 * var(--gap));
+ padding-inline: var(--gap);
+ }
+
+[role=listbox] [role=option][aria-selected=true] {
+ background: var(--interactive-bg);
+ }
+
+[role=listbox] .active[role=option] {
+ --temporary-bg: var(--accent);
+ --temporary-fg: var(--bg);
+ --temporary-accent: parent-var(--muted-accent);
+ --temporary-muted-accent: parent-var(--box-bg);
+
+ background: var(--temporary-bg);
+ color: var(--temporary-fg)
+ }
+
+[role=listbox] .active[role=option] > * {
+ --bg: var(--temporary-bg);
+ --fg: var(--temporary-fg);
+ --accent: var(--temporary-accent);
+ --muted-accent: var(--temporary-muted-accent);
+ }
+
+[aria-orientation="vertical"] {
+ flex-direction: column;
+ width: -moz-fit-content;
+ width: fit-content;
+ text-align: center;
+}
+
+.plain {
+ --box-bg: var(--plain-bg);
+ --accent: var(--plain-fg);
+ --graphical-fg: var(--plain-graphical-fg);
+}
+
+.info {
+ --box-bg: var(--info-bg);
+ --accent: var(--info-fg);
+ --graphical-fg: var(--info-graphical-fg);
+}
+
+.ok {
+ --box-bg: var(--ok-bg);
+ --accent: var(--ok-fg);
+ --graphical-fg: var(--ok-graphical-fg);
+}
+
+.warn {
+ --box-bg: var(--warn-bg);
+ --accent: var(--warn-fg);
+ --graphical-fg: var(--warn-graphical-fg);
+}
+
+.bad {
+ --box-bg: var(--bad-bg);
+ --accent: var(--bad-fg);
+ --graphical-fg: var(--bad-graphical-fg);
+}
+
+.color {
+ color: var(--accent);
+}
+
+.bg {
+ background: var(--box-bg);
+}
+
+.border {
+ border-style: solid;
+ border-color: var(--graphical-fg);
+}
+
+:root {
+ /* Colors */
+ --fg: var(--gray-12); /* Text. */
+ --muted-fg: var(--gray-10); /* Secondary text color. Will be
+ used with a background of --c-bg and --c-bg-2 -- check contrast! */
+ --faded-fg: var(--gray-6); /* Disabled text color. */
+ --graphical-fg: var(--plain-graphical-fg); /* Graphical elements. Will not
+ be used as a text color. */
+
+ --plain-fg: var(--blue-10);
+ --info-fg: var(--blue-11);
+ --ok-fg: var(--green-11);
+ --bad-fg: var(--red-11);
+ --warn-fg: var(--yellow-11);
+
+ --plain-graphical-fg: var(--gray-6);
+ --info-graphical-fg: var(--blue-6);
+ --ok-graphical-fg: var(--green-6);
+ --bad-graphical-fg: var(--red-6);
+ --warn-graphical-fg: var(--yellow-6);
+
+ --bg: var(--gray-0); /* Page background. */
+ --box-bg: var(--plain-bg); /* Background for blocks: cards, admonitions etc. */
+ --interactive-bg: var(--gray-4); /* Background for interactive elements */
+
+ --plain-bg: var(--gray-1);
+ --info-bg: var(--blue-1);
+ --ok-bg: var(--green-1);
+ --bad-bg: var(--red-1);
+ --warn-bg: var(--yellow-1);
+
+ --accent: var(--blue-10); /* Accent color. Will be used *as a text color* with a
+ background of --c-bg and --c-bg-2 -- check contrast! */
+ --muted-accent: var(--blue-7); /* Muted accent color. Will not be used for text. */
+
+ /* Lengths */
+ --rhythm: 1.4rem; /* Vertical rhythm, line height. */
+ --line-length: 40rem; /* Maximum line length for prose. */
+ --border-radius: .2rem;
+
+ /* Fonts */
+ --main-font: 'Source Sans 3', 'Source Sans Pro', -apple-system, system-ui, sans-serif;
+ --secondary-font: var(--main-font); /* Headings etc. */
+ --mono-font: 'M Plus Code Latin', monospace, monospace; /* monospace twice stops browsers from
+ shrinking this */
+
+ /* Density */
+ --density: 1;
+
+ /* Width */
+ --full-width: 100vw;
+
+ /* Do not set these. */
+ --eff-line-length: /* Effective line length for prose. */
+ min(
+ calc( var(--full-width) - (2 * var(--rhythm)) ),
+ var(--line-length)
+ );
+
+ --gutter-width: /* Width of spaces at each side of page content. */
+ calc(
+ (
+ var(--full-width) /* Viewport width */
+ - var(--eff-line-length) /* minus line width */
+ ) / 2); /* Divide by 2: there are two page margins */
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:not(.-no-dark-theme) {
+ --fg: var(--gray-0);
+ --muted-fg: var(--gray-2);
+ --faded-fg: var(--gray-7);
+
+ --plain-bg: var(--gray-11);
+ --info-bg: var(--blue-12);
+ --ok-bg: var(--green-12);
+ --bad-bg: var(--red-12);
+ --warn-bg: var(--yellow-12);
+
+ --plain-faded-fg: var(--blue-6);
+ --info-faded-fg: var(--blue-6);
+ --ok-faded-fg: var(--green-6);
+ --bad-faded-fg: var(--red-6);
+ --warn-faded-fg: var(--yellow-6);
+
+ --bg: var(--gray-12);
+ --box-bg: var(--gray-10);
+ --interactive-bg: var(--gray-8);
+
+ --plain-fg: (--blue-3);
+ --info-fg: var(--blue-3);
+ --ok-fg: var(--green-3);
+ --bad-fg: var(--red-3);
+ --warn-fg: var(--yellow-3);
+
+ --accent: var(--blue-3);
+ --muted-accent: var(--blue-5);
+ }
+}
+
+* {
+ --gap: calc(var(--rhythm) * var(--density));
+ accent-color: var(--accent);
+}
+
+.textcolumns {
+ --col-width: 30ch;
+ column-width: var(--col-width);
+ column-gap: var(--gap);
+ margin-block: var(--gap)
+}
+
+.textcolumns :first-child { margin-block-start: 0 !important }
+
+.text-align\:center {
+ text-align: center;
+}
+
+.center {
+ display: grid;
+ place-items: center;
+}
+
+/**/
+
+.container {
+ max-inline-size: var(--eff-line-length);
+ margin-inline: auto;
+}
+
+.fullbleed {
+ position: relative;
+ width: var(--full-width);
+ left: 50%;
+ transform: translateX(calc(-.5 * var(--full-width)));
+
+ border-radius: 0;
+ border-inline: none;
+}
+
+.fullscreen {
+ height: 100vh;
+
+ position: relative;
+ width: 100vw;
+ left: 50%;
+ transform: translateX(-50vw);
+
+ border-radius: 0;
+ border-inline: none;
+}
+
+.width\:100\% { width:100%; max-width: 100% }
+
+.height\:100\% { height:100%; max-height: 100% }
+
+/**/
+
+/* margin-trim had better be implemented soon */
+
+:is(
+ body,
+ .box,
+ [role=menu],
+ .sidebar-layout > header,
+ [role=tabpanel],
+ figure,
+ details,
+ dialog,
+ aside,
+ fieldset,
+ dd,
+ td,
+ th
+)>:first-child:first-child:first-child:first-child,
+ :is(
+ body,
+ .box,
+ [role=menu],
+ .sidebar-layout > header,
+ [role=tabpanel],
+ figure,
+ details,
+ dialog,
+ aside,
+ fieldset,
+ dd,
+ td,
+ th
+)>:first-child>:first-child:first-child:first-child,
+ :is(
+ body,
+ .box,
+ [role=menu],
+ .sidebar-layout > header,
+ [role=tabpanel],
+ figure,
+ details,
+ dialog,
+ aside,
+ fieldset,
+ dd,
+ td,
+ th
+)>:first-child>:first-child>:first-child:first-child,
+ :is(
+ body,
+ .box,
+ [role=menu],
+ .sidebar-layout > header,
+ [role=tabpanel],
+ figure,
+ details,
+ dialog,
+ aside,
+ fieldset,
+ dd,
+ td,
+ th
+)>:first-child>:first-child>:first-child>:first-child { margin-block-start: 0; }
+
+:is(
+ body,
+ .box,
+ [role=menu],
+ .sidebar-layout > header,
+ [role=tabpanel],
+ figure,
+ details,
+ dialog,
+ aside,
+ fieldset,
+ dd,
+ td,
+ th
+)>:last-child:last-child:last-child:last-child,
+ :is(
+ body,
+ .box,
+ [role=menu],
+ .sidebar-layout > header,
+ [role=tabpanel],
+ figure,
+ details,
+ dialog,
+ aside,
+ fieldset,
+ dd,
+ td,
+ th
+)>:last-child>:last-child:last-child:last-child,
+ :is(
+ body,
+ .box,
+ [role=menu],
+ .sidebar-layout > header,
+ [role=tabpanel],
+ figure,
+ details,
+ dialog,
+ aside,
+ fieldset,
+ dd,
+ td,
+ th
+)>:last-child>:last-child>:last-child:last-child,
+ :is(
+ body,
+ .box,
+ [role=menu],
+ .sidebar-layout > header,
+ [role=tabpanel],
+ figure,
+ details,
+ dialog,
+ aside,
+ fieldset,
+ dd,
+ td,
+ th
+)>:last-child>:last-child>:last-child>:last-child { margin-block-end: 0; }
+
+/**/
+
+.padding { padding-inline: var(--gap) }
+
+.padding-block { padding-block: var(--gap) }
+
+.padding-block-start { padding-block-start: var(--gap) }
+
+.padding-block-end { padding-block-end: var(--gap) }
+
+.padding-inline { padding-inline: var(--gap) }
+
+.padding-inline-start { padding-inline-start: var(--gap) }
+
+.padding-inline-end { padding-inline-start: var(--gap) }
+
+.margin { margin: var(--gap) }
+
+.margin-block { margin-block: var(--gap) }
+
+.margin-block-start { margin-block-start: var(--gap) }
+
+.margin-block-end { margin-block-end: var(--gap) }
+
+.margin-inline { margin-inline: var(--gap) }
+
+.margin-inline-start { margin-inline-start: var(--gap) }
+
+.margin-inline-end { margin-inline-end: var(--gap) }
+
+.flow-gap > :not(:last-child) {
+ margin-bottom: 1em;
+ }
+
+/**/
+
+.inline { display: inline }
+
+.block { display: block }
+
+.contents { display: contents }
+
+.table {
+ display: table;
+ width: 100%;
+ margin: 0;
+}
+
+.row, .rows > * {
+ display: table-row
+}
+
+.row:not(:last-child):not([specificity-hack]) > *, .rows > *:not(:last-child):not([specificity-hack]) > * {
+ margin-bottom: var(--gap);
+ }
+
+.row > *:not([specificity-hack]), .rows > * > *:not([specificity-hack]) {
+ display: table-cell;
+ vertical-align: top;
+ }
+
+.row > * + *:not([specificity-hack]), :is(.rows > *) > * + *:not([specificity-hack]) {
+ margin-inline-start: var(--gap);
+ display: inline-block;
+ }
+
+/**/
+
+.big {
+ font-size: 1.4em;
+ line-height: calc(1.5 * var(--rhythm));
+}
+
+/**/
+
+.fixed { position: fixed }
+
+.sticky { position: sticky }
+
+.top { top: 0 }
+
+.right { right: 0 }
+
+.bottom { bottom: 0 }
+
+.left { left: 0 }
+
+.float\:left { float: left }
+
+.float\:right { float: right }
+
+.overflow\:auto { overflow: auto }
+
+.overflow\:scroll { overflow: scroll }
+
+.airy { --density: 3; }
+
+.spacious { --density: 2; }
+
+.dense { --density: 1; }
+
+.crowded { --density: .5; }
+
+.packed { --density: 0; }
+
+.autodensity {
+ --density: 1
+}
+
+@media (min-width: 768px) {
+
+.autodensity { --density: 2
+}}
+
+@media (min-width: 1024px) {
+
+.autodensity { --density: 3
+}}
+
+.vh, v-h {
+ clip: rect(0 0 0 0);
+ -webkit-clip-path: inset(50%);
+ clip-path: inset(50%);
+ block-size: 1px;
+ inline-size: 1px;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.all\:initial {
+ all: initial;
+}
+
+.bold { font-weight: bold }
+
+.italic {
+ font-style: italic
+}
+
+.italic em, .italic cite, .italic dfn, .italic var, .italic i, .italic address {
+ font-style: normal;
+ }
+
+.allcaps {
+ text-transform: uppercase;
+ letter-spacing: .1rem;
+}
+
+.primary-font { font-family: var(--primary-font) }
+
+.secondary-font { font-family: var(--secondary-font) }
+
+.display-font { font-family: var(--display-font) }
+
+.mono-font, .monospace { font-family: var(--mono-font) }
+
+.massivetext {
+ font-size: calc(.13 * var(--eff-line-length));
+ line-height: 1em;
+ letter-spacing: 0;
+}
+
+.aestheticbreak {
+ display: block;
+ margin: 0;
+ padding: 0;
+ height: calc(.5 * var(--gap));
+}
+
+.f-row {
+ display: flex;
+ flex-direction: row;
+ gap: var(--gap)
+}
+
+.f-row > * { margin: 0 }
+
+.f-col {
+ display: flex;
+ flex-direction: column;
+ gap: var(--gap)
+}
+
+.f-col > * { margin: 0 }
+
+.f-switch {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--gap);
+ --f-switch-threshold: 55ch
+}
+
+.f-switch > * {
+ margin: 0;
+
+ flex-grow: 1;
+ flex-basis: calc((var(--f-switch-threshold) - 100%) * 999);
+ }
+
+.justify-content\:start { justify-content: start }
+
+.justify-content\:end { justify-content: end }
+
+.justify-content\:baseline { justify-content: baseline }
+
+.justify-content\:center { justify-content: center }
+
+.justify-content\:stretch { justify-content: stretch }
+
+.justify-content\:space-between { justify-content: space-between }
+
+.justify-content\:space-around { justify-content: space-around }
+
+.justify-content\:space-evenly { justify-content: space-evenly }
+
+.align-items\:start { align-items: start }
+
+.align-items\:end { align-items: end }
+
+.align-items\:baseline { align-items: baseline }
+
+.align-items\:center { align-items: center }
+
+.align-items\:stretch { align-items: stretch }
+
+.align-self\:start { align-self: start }
+
+.align-self\:end { align-self: end }
+
+.align-self\:baseline { align-self: baseline }
+
+.align-self\:center { align-self: center }
+
+.align-self\:stretch { align-self: stretch }
+
+.flex-grow\:0 { flex-grow: 0 }
+
+.flex-grow\:1 { flex-grow: 1 }
+
+.flex-grow\:2 { flex-grow: 2 }
+
+.flex-grow\:3 { flex-grow: 3 }
+
+.flex-grow\:4 { flex-grow: 4 }
+
+.flex-grow\:5 { flex-grow: 5 }
+
+.flex-grow\:6 { flex-grow: 6 }
+
+.flex-grow\:7 { flex-grow: 7 }
+
+.flex-grow\:8 { flex-grow: 8 }
+
+.flex-grow\:9 { flex-grow: 9 }
+
+.flex-grow\:10 { flex-grow: 10 }
+
+.flex-grow\:11 { flex-grow: 11 }
+
+.flex-grow\:12 { flex-grow: 12 }
+
+.flex-wrap\:wrap { flex-wrap: wrap }
+
+.flex-wrap\:nowrap { flex-wrap: nowrap }
+
+.grid {
+ display: grid;
+ grid-auto-columns: var(--grid-col-width, 1fr);
+ grid-auto-rows: var(--grid-row-width, auto);
+ gap: var(--gap)
+}
+
+.grid > * { margin: 0 }
+
+.grid-even-rows { --grid-row-width: 1fr; }
+
+.grid-variable-cols { --grid-column-width: auto; }
+
+[data-cols^="1 " ] { grid-column-start: 1 }
+
+[data-cols$=" 1" ] { grid-column-end: 2 }
+
+[data-cols="1" ] { grid-column: 1 }
+
+[data-cols^="2 " ] { grid-column-start: 2 }
+
+[data-cols$=" 2" ] { grid-column-end: 3 }
+
+[data-cols="2" ] { grid-column: 2 }
+
+[data-cols^="3 " ] { grid-column-start: 3 }
+
+[data-cols$=" 3" ] { grid-column-end: 4 }
+
+[data-cols="3" ] { grid-column: 3 }
+
+[data-cols^="4 " ] { grid-column-start: 4 }
+
+[data-cols$=" 4" ] { grid-column-end: 5 }
+
+[data-cols="4" ] { grid-column: 4 }
+
+[data-cols^="5 " ] { grid-column-start: 5 }
+
+[data-cols$=" 5" ] { grid-column-end: 6 }
+
+[data-cols="5" ] { grid-column: 5 }
+
+[data-cols^="6 " ] { grid-column-start: 6 }
+
+[data-cols$=" 6" ] { grid-column-end: 7 }
+
+[data-cols="6" ] { grid-column: 6 }
+
+[data-cols^="7 " ] { grid-column-start: 7 }
+
+[data-cols$=" 7" ] { grid-column-end: 8 }
+
+[data-cols="7" ] { grid-column: 7 }
+
+[data-cols^="8 " ] { grid-column-start: 8 }
+
+[data-cols$=" 8" ] { grid-column-end: 9 }
+
+[data-cols="8" ] { grid-column: 8 }
+
+[data-cols^="9 " ] { grid-column-start: 9 }
+
+[data-cols$=" 9" ] { grid-column-end: 10 }
+
+[data-cols="9" ] { grid-column: 9 }
+
+[data-cols^="10 "] { grid-column-start: 10 }
+
+[data-cols$=" 10"] { grid-column-end: 11 }
+
+[data-cols="10"] { grid-column: 10 }
+
+[data-cols^="11 "] { grid-column-start: 11 }
+
+[data-cols$=" 11"] { grid-column-end: 12 }
+
+[data-cols="11"] { grid-column: 11 }
+
+[data-cols^="12 "] { grid-column-start: 12 }
+
+[data-cols$=" 12"] { grid-column-end: 13 }
+
+[data-cols="12"] { grid-column: 12 }
+
+[data-rows^="1 " ] { grid-row-start: 1 }
+
+[data-rows$=" 1" ] { grid-row-end: 2 }
+
+[data-rows="1" ] { grid-row: 1 }
+
+[data-rows^="2 " ] { grid-row-start: 2 }
+
+[data-rows$=" 2" ] { grid-row-end: 3 }
+
+[data-rows="2" ] { grid-row: 2 }
+
+[data-rows^="3 " ] { grid-row-start: 3 }
+
+[data-rows$=" 3" ] { grid-row-end: 4 }
+
+[data-rows="3" ] { grid-row: 3 }
+
+[data-rows^="4 " ] { grid-row-start: 4 }
+
+[data-rows$=" 4" ] { grid-row-end: 5 }
+
+[data-rows="4" ] { grid-row: 4 }
+
+[data-rows^="5 " ] { grid-row-start: 5 }
+
+[data-rows$=" 5" ] { grid-row-end: 6 }
+
+[data-rows="5" ] { grid-row: 5 }
+
+[data-rows^="6 " ] { grid-row-start: 6 }
+
+[data-rows$=" 6" ] { grid-row-end: 7 }
+
+[data-rows="6" ] { grid-row: 6 }
+
+[data-rows^="7 " ] { grid-row-start: 7 }
+
+[data-rows$=" 7" ] { grid-row-end: 8 }
+
+[data-rows="7" ] { grid-row: 7 }
+
+[data-rows^="8 " ] { grid-row-start: 8 }
+
+[data-rows$=" 8" ] { grid-row-end: 9 }
+
+[data-rows="8" ] { grid-row: 8 }
+
+[data-rows^="9 " ] { grid-row-start: 9 }
+
+[data-rows$=" 9" ] { grid-row-end: 10 }
+
+[data-rows="9" ] { grid-row: 9 }
+
+[data-rows^="10 "] { grid-row-start: 10 }
+
+[data-rows$=" 10"] { grid-row-end: 11 }
+
+[data-rows="10"] { grid-row: 10 }
+
+[data-rows^="11 "] { grid-row-start: 11 }
+
+[data-rows$=" 11"] { grid-row-end: 12 }
+
+[data-rows="11"] { grid-row: 11 }
+
+[data-rows^="12 "] { grid-row-start: 12 }
+
+[data-rows$=" 12"] { grid-row-end: 13 }
+
+[data-rows="12"] { grid-row: 12 }
+
+@media (max-width: 768px) {
+ [data-cols\@s^="1 " ] { grid-column-start: 1 } [data-cols\@s$=" 1" ] { grid-column-end: 2 } [data-cols\@s="1" ] { grid-column: 1 }
+ [data-cols\@s^="2 " ] { grid-column-start: 2 } [data-cols\@s$=" 2" ] { grid-column-end: 3 } [data-cols\@s="2" ] { grid-column: 2 }
+ [data-cols\@s^="3 " ] { grid-column-start: 3 } [data-cols\@s$=" 3" ] { grid-column-end: 4 } [data-cols\@s="3" ] { grid-column: 3 }
+ [data-cols\@s^="4 " ] { grid-column-start: 4 } [data-cols\@s$=" 4" ] { grid-column-end: 5 } [data-cols\@s="4" ] { grid-column: 4 }
+ [data-cols\@s^="5 " ] { grid-column-start: 5 } [data-cols\@s$=" 5" ] { grid-column-end: 6 } [data-cols\@s="5" ] { grid-column: 5 }
+ [data-cols\@s^="6 " ] { grid-column-start: 6 } [data-cols\@s$=" 6" ] { grid-column-end: 7 } [data-cols\@s="6" ] { grid-column: 6 }
+ [data-cols\@s^="7 " ] { grid-column-start: 7 } [data-cols\@s$=" 7" ] { grid-column-end: 8 } [data-cols\@s="7" ] { grid-column: 7 }
+ [data-cols\@s^="8 " ] { grid-column-start: 8 } [data-cols\@s$=" 8" ] { grid-column-end: 9 } [data-cols\@s="8" ] { grid-column: 8 }
+ [data-cols\@s^="9 " ] { grid-column-start: 9 } [data-cols\@s$=" 9" ] { grid-column-end: 10 } [data-cols\@s="9" ] { grid-column: 9 }
+ [data-cols\@s^="10 "] { grid-column-start: 10 } [data-cols\@s$=" 10"] { grid-column-end: 11 } [data-cols\@s="10"] { grid-column: 10 }
+ [data-cols\@s^="11 "] { grid-column-start: 11 } [data-cols\@s$=" 11"] { grid-column-end: 12 } [data-cols\@s="11"] { grid-column: 11 }
+ [data-cols\@s^="12 "] { grid-column-start: 12 } [data-cols\@s$=" 12"] { grid-column-end: 13 } [data-cols\@s="12"] { grid-column: 12 }
+
+ [data-rows\@s^="1 " ] { grid-row-start: 1 } [data-rows\@s$=" 1" ] { grid-row-end: 2 } [data-rows\@s="1" ] { grid-row: 1 }
+ [data-rows\@s^="2 " ] { grid-row-start: 2 } [data-rows\@s$=" 2" ] { grid-row-end: 3 } [data-rows\@s="2" ] { grid-row: 2 }
+ [data-rows\@s^="3 " ] { grid-row-start: 3 } [data-rows\@s$=" 3" ] { grid-row-end: 4 } [data-rows\@s="3" ] { grid-row: 3 }
+ [data-rows\@s^="4 " ] { grid-row-start: 4 } [data-rows\@s$=" 4" ] { grid-row-end: 5 } [data-rows\@s="4" ] { grid-row: 4 }
+ [data-rows\@s^="5 " ] { grid-row-start: 5 } [data-rows\@s$=" 5" ] { grid-row-end: 6 } [data-rows\@s="5" ] { grid-row: 5 }
+ [data-rows\@s^="6 " ] { grid-row-start: 6 } [data-rows\@s$=" 6" ] { grid-row-end: 7 } [data-rows\@s="6" ] { grid-row: 6 }
+ [data-rows\@s^="7 " ] { grid-row-start: 7 } [data-rows\@s$=" 7" ] { grid-row-end: 8 } [data-rows\@s="7" ] { grid-row: 7 }
+ [data-rows\@s^="8 " ] { grid-row-start: 8 } [data-rows\@s$=" 8" ] { grid-row-end: 9 } [data-rows\@s="8" ] { grid-row: 8 }
+ [data-rows\@s^="9 " ] { grid-row-start: 9 } [data-rows\@s$=" 9" ] { grid-row-end: 10 } [data-rows\@s="9" ] { grid-row: 9 }
+ [data-rows\@s^="10 "] { grid-row-start: 10 } [data-rows\@s$=" 10"] { grid-row-end: 11 } [data-rows\@s="10"] { grid-row: 10 }
+ [data-rows\@s^="11 "] { grid-row-start: 11 } [data-rows\@s$=" 11"] { grid-row-end: 12 } [data-rows\@s="11"] { grid-row: 11 }
+ [data-rows\@s^="12 "] { grid-row-start: 12 } [data-rows\@s$=" 12"] { grid-row-end: 13 } [data-rows\@s="12"] { grid-row: 12 }
+}
+
+@media (min-width: 1024px) {
+ [data-cols\@l^="1 " ] { grid-column-start: 1 } [data-cols\@l$=" 1" ] { grid-column-end: 2 } [data-cols\@l="1" ] { grid-column: 1 }
+ [data-cols\@l^="2 " ] { grid-column-start: 2 } [data-cols\@l$=" 2" ] { grid-column-end: 3 } [data-cols\@l="2" ] { grid-column: 2 }
+ [data-cols\@l^="3 " ] { grid-column-start: 3 } [data-cols\@l$=" 3" ] { grid-column-end: 4 } [data-cols\@l="3" ] { grid-column: 3 }
+ [data-cols\@l^="4 " ] { grid-column-start: 4 } [data-cols\@l$=" 4" ] { grid-column-end: 5 } [data-cols\@l="4" ] { grid-column: 4 }
+ [data-cols\@l^="5 " ] { grid-column-start: 5 } [data-cols\@l$=" 5" ] { grid-column-end: 6 } [data-cols\@l="5" ] { grid-column: 5 }
+ [data-cols\@l^="6 " ] { grid-column-start: 6 } [data-cols\@l$=" 6" ] { grid-column-end: 7 } [data-cols\@l="6" ] { grid-column: 6 }
+ [data-cols\@l^="7 " ] { grid-column-start: 7 } [data-cols\@l$=" 7" ] { grid-column-end: 8 } [data-cols\@l="7" ] { grid-column: 7 }
+ [data-cols\@l^="8 " ] { grid-column-start: 8 } [data-cols\@l$=" 8" ] { grid-column-end: 9 } [data-cols\@l="8" ] { grid-column: 8 }
+ [data-cols\@l^="9 " ] { grid-column-start: 9 } [data-cols\@l$=" 9" ] { grid-column-end: 10 } [data-cols\@l="9" ] { grid-column: 9 }
+ [data-cols\@l^="10 "] { grid-column-start: 10 } [data-cols\@l$=" 10"] { grid-column-end: 11 } [data-cols\@l="10"] { grid-column: 10 }
+ [data-cols\@l^="11 "] { grid-column-start: 11 } [data-cols\@l$=" 11"] { grid-column-end: 12 } [data-cols\@l="11"] { grid-column: 11 }
+ [data-cols\@l^="12 "] { grid-column-start: 12 } [data-cols\@l$=" 12"] { grid-column-end: 13 } [data-cols\@l="12"] { grid-column: 12 }
+
+ [data-rows\@l^="1 " ] { grid-row-start: 1 } [data-rows\@l$=" 1" ] { grid-row-end: 2 } [data-rows\@l="1" ] { grid-row: 1 }
+ [data-rows\@l^="2 " ] { grid-row-start: 2 } [data-rows\@l$=" 2" ] { grid-row-end: 3 } [data-rows\@l="2" ] { grid-row: 2 }
+ [data-rows\@l^="3 " ] { grid-row-start: 3 } [data-rows\@l$=" 3" ] { grid-row-end: 4 } [data-rows\@l="3" ] { grid-row: 3 }
+ [data-rows\@l^="4 " ] { grid-row-start: 4 } [data-rows\@l$=" 4" ] { grid-row-end: 5 } [data-rows\@l="4" ] { grid-row: 4 }
+ [data-rows\@l^="5 " ] { grid-row-start: 5 } [data-rows\@l$=" 5" ] { grid-row-end: 6 } [data-rows\@l="5" ] { grid-row: 5 }
+ [data-rows\@l^="6 " ] { grid-row-start: 6 } [data-rows\@l$=" 6" ] { grid-row-end: 7 } [data-rows\@l="6" ] { grid-row: 6 }
+ [data-rows\@l^="7 " ] { grid-row-start: 7 } [data-rows\@l$=" 7" ] { grid-row-end: 8 } [data-rows\@l="7" ] { grid-row: 7 }
+ [data-rows\@l^="8 " ] { grid-row-start: 8 } [data-rows\@l$=" 8" ] { grid-row-end: 9 } [data-rows\@l="8" ] { grid-row: 8 }
+ [data-rows\@l^="9 " ] { grid-row-start: 9 } [data-rows\@l$=" 9" ] { grid-row-end: 10 } [data-rows\@l="9" ] { grid-row: 9 }
+ [data-rows\@l^="10 "] { grid-row-start: 10 } [data-rows\@l$=" 10"] { grid-row-end: 11 } [data-rows\@l="10"] { grid-row: 10 }
+ [data-rows\@l^="11 "] { grid-row-start: 11 } [data-rows\@l$=" 11"] { grid-row-end: 12 } [data-rows\@l="11"] { grid-row: 11 }
+ [data-rows\@l^="12 "] { grid-row-start: 12 } [data-rows\@l$=" 12"] { grid-row-end: 13 } [data-rows\@l="12"] { grid-row: 12 }
+}