/* * Bluelib Base * by */ :where(body) { --bhsl-background-hue: 0deg; --bhsl-background-saturation: 0%; --bhsl-background-lightness: 100%; --bhsl-foreground-hue: 0deg; --bhsl-foreground-saturation: 0%; --bhsl-foreground-lightness: 15%; --bhsl-primary-hue: 0deg; --bhsl-primary-saturation: 0%; --bhsl-primary-lightness: 0%; --bhsl-link-hue: 210deg; --bhsl-link-saturation: 100%; --bhsl-link-lightness: 30%; --bhsl-mark-foreground-hue: 0deg; --bhsl-mark-foreground-saturation: 0%; --bhsl-mark-foreground-lightness: 0%; --bhsl-mark-background-hue: 60deg; --bhsl-mark-background-saturation: 100%; --bhsl-mark-background-lightness: 75%; --bhsl-todo-foreground-hue: 204deg; --bhsl-todo-foreground-saturation: 11%; --bhsl-todo-foreground-lightness: 18%; --bhsl-todo-background-hue: 43deg; --bhsl-todo-background-saturation: 100%; --bhsl-todo-background-lightness: 65%; --bhsl-sample-input-hue: 0deg; --bhsl-sample-input-saturation: 100%; --bhsl-sample-input-lightness: 0%; --bhsl-sample-output-hue: 0deg; --bhsl-sample-output-saturation: 100%; --bhsl-sample-output-lightness: 100%; --bhsl-red-hue: 0deg; --bhsl-red-saturation: 100%; --bhsl-red-lightness: 30%; --bhsl-yellow-hue: 60deg; --bhsl-yellow-saturation: 100%; --bhsl-yellow-lightness: 30%; --bhsl-green-hue: 120deg; --bhsl-green-saturation: 100%; --bhsl-green-lightness: 30%; --bhsl-cyan-hue: 180deg; --bhsl-cyan-saturation: 100%; --bhsl-cyan-lightness: 30%; --bhsl-blue-hue: 240deg; --bhsl-blue-saturation: 100%; --bhsl-blue-lightness: 30%; --bhsl-magenta-hue: 300deg; --bhsl-magenta-saturation: 100%; --bhsl-magenta-lightness: 30%; --bhsl-inserted-hue: var(--bhsl-green-hue); --bhsl-inserted-saturation: var(--bhsl-green-saturation); --bhsl-inserted-lightness: var(--bhsl-green-lightness); --bhsl-deleted-hue: var(--bhsl-red-hue); --bhsl-deleted-saturation: var(--bhsl-red-saturation); --bhsl-deleted-lightness: var(--bhsl-red-lightness); --bfont-text-style: normal; --bfont-text-variant: normal; --bfont-text-weight: 400; --bfont-text-stretch: normal; --bfont-text-height: 1.3; --bfont-text-family: sans-serif; --bfont-header-style: normal; --bfont-header-variant: normal; --bfont-header-weight: 600; --bfont-header-stretch: normal; --bfont-header-height: 1.7; --bfont-header-family: sans-serif; --bfont-code-style: normal; --bfont-code-variant: normal; --bfont-code-weight: 400; --bfont-code-stretch: normal; --bfont-code-height: 1.3; --bfont-code-family: monospace; --bfont-boldcode-style: normal; --bfont-boldcode-variant: normal; --bfont-boldcode-weight: 700; --bfont-boldcode-stretch: normal; --bfont-boldcode-height: 1.3; --bfont-boldcode-family: monospace; --bfont-term-style: italic; --bfont-term-variant: normal; --bfont-term-weight: 700; --bfont-term-stretch: normal; --bfont-term-height: 1.3; --bfont-term-family: sans-serif; --bfont-summary-style: italic; --bfont-summary-variant: normal; --bfont-summary-weight: 400; --bfont-summary-stretch: normal; --bfont-summary-height: 1.3; --bfont-summary-family: sans-serif; --bfont-idiomatic-style: italic; --bfont-idiomatic-variant: normal; --bfont-idiomatic-weight: 400; --bfont-idiomatic-stretch: normal; --bfont-idiomatic-height: 1.3; --bfont-idiomatic-family: sans-serif; --bfont-emphasis-style: italic; --bfont-emphasis-variant: normal; --bfont-emphasis-weight: 400; --bfont-emphasis-stretch: normal; --bfont-emphasis-height: 1.3; --bfont-emphasis-family: sans-serif; --bfont-attention-style: normal; --bfont-attention-variant: normal; --bfont-attention-weight: 700; --bfont-attention-stretch: normal; --bfont-attention-height: 1.3; --bfont-attention-family: sans-serif; --bfont-strong-style: normal; --bfont-strong-variant: normal; --bfont-strong-weight: 700; --bfont-strong-stretch: normal; --bfont-strong-height: 1.3; --bfont-strong-family: sans-serif; --bfont-variable-style: normal; --bfont-variable-variant: normal; --bfont-variable-weight: 400; --bfont-variable-stretch: normal; --bfont-variable-height: 1.3; --bfont-variable-family: sans-serif; --bfont-citation-style: normal; --bfont-citation-variant: small-caps; --bfont-citation-weight: 400; --bfont-citation-stretch: normal; --bfont-citation-height: 1.3; --bfont-citation-family: sans-serif; --bfont-label-style: normal; --bfont-label-variant: normal; --bfont-label-weight: 400; --bfont-label-stretch: normal; --bfont-label-height: 1.3; --bfont-label-family: sans-serif; --bhsl-current-hue: var(--bhsl-foreground-hue); --bhsl-current-saturation: var(--bhsl-foreground-saturation); --bhsl-current-lightness: var(--bhsl-foreground-lightness); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); background-position: center; background-size: cover; background-attachment: fixed; width: 100%; height: 100%; font-style: var(--bfont-text-style); font-variant: var(--bfont-text-variant); font-weight: var(--bfont-text-weight); font-stretch: var(--bfont-text-stretch); line-height: var(--bfont-text-height); font-family: var(--bfont-text-family); } @media screen { :where(body) { background-image: var(--burl-background-full); } } @media screen and (max-width: 3840px) { :where(body) { background-image: var(--burl-background-3840); } } @media screen and (max-width: 1920px) { :where(body) { background-image: var(--burl-background-1920); } } @media screen and (max-width: 1366px) { :where(body) { background-image: var(--burl-background-1366); } } @media screen and (max-width: 640px) { :where(body) { background-image: var(--burl-background-640); } } @media screen and (max-width: 360px) { :where(body) { background-image: var(--burl-background-360); } } :where(body), :where(body) :where(*) { margin: 0; padding: 0; color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); border-width: 0; border-style: solid; scrollbar-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)) hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); } :where(body), :where(body) :where(*), :where(body)::before, :where(body) :where(*)::before, :where(body)::after, :where(body) :where(*)::after { box-sizing: border-box; } :where(body):focus-visible, :where(body) :where(*):focus-visible { outline-width: 4px; outline-style: solid; outline-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.3); } :where(body) :where(header), :where(body) :where(footer) { text-align: center; } :where(body) :where(footer) { margin: 1rem 0; font-size: x-small; } :where(body) :where(.float-top) { margin-bottom: auto; } :where(body) :where(.float-right) { margin-left: auto; } :where(body) :where(.float-bottom) { margin-top: auto; } :where(body) :where(.float-left) { margin-right: auto; } :where(body) :where(.float-hcenter) { margin-left: auto; margin-right: auto; } :where(body) :where(.float-vcenter) { margin-top: auto; margin-bottom: auto; } :where(body) :where(h1) { font-size: 2.5em; } :where(body) :where(h2) { font-size: 1.75em; } :where(body) :where(h1, h2, h3, h4, h5, h6) { text-align: center; --bhsl-current-hue: var(--bhsl-primary-hue); --bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-lightness: var(--bhsl-primary-lightness); font-style: var(--bfont-header-style); font-variant: var(--bfont-header-variant); font-weight: var(--bfont-header-weight); font-stretch: var(--bfont-header-stretch); line-height: var(--bfont-header-height); font-family: var(--bfont-header-family); } :where(body) :where(.panel) { padding-top: 8px; padding-right: 8px; padding-left: 8px; padding-bottom: 8px; border-width: 0; border-style: solid; width: 100%; display: flex; flex-direction: column; gap: 8px; background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); } @media (max-width: 492px) { :where(body) :where(.panel) { min-width: calc(100vw - 16px); } } @media (min-width: 493px) { :where(body) :where(.panel) { min-width: 476px; } } :where(body) :where(.panel):where(.border-top), :where(body) :where(.panel):where(.box) { border-top-width: 2px; padding-top: 6px; } :where(body) :where(.panel):where(.border-right), :where(body) :where(.panel):where(.box) { border-right-width: 2px; padding-right: 6px; } :where(body) :where(.panel):where(.border-left), :where(body) :where(.panel):where(.box), :where(body) :where(.panel):where(.dialog) { border-left-width: 2px; padding-left: 6px; } :where(body) :where(.panel):where(.border-bottom), :where(body) :where(.panel):where(.box) { border-bottom-width: 2px; padding-bottom: 6px; } :where(body) :where(.panel):where(.parenthesis) { font-size: smaller; } :where(body) :where(.panel) :where(.panel) { min-width: unset; } :where(body) :where(.chapter-0) { flex-wrap: nowrap; } :where(body) :where(.chapter-0) > :where(*) { flex-shrink: 1; } :where(body) :where(.chapter-1) > :where(*) { flex-basis: calc(100% / 2); } :where(body) :where(.chapter-2) > :where(*) { flex-basis: calc(100% / 3); } :where(body) :where(.chapter-3) > :where(*) { flex-basis: calc(100% / 4); } :where(body) :where(.chapter-4) > :where(*) { flex-basis: calc(100% / 5); } :where(body) :where(.chapter-5) > :where(*) { flex-basis: calc(100% / 6); } :where(body) :where(.chapter-6) > :where(*) { flex-basis: calc(100% / 7); } :where(body) :where(.chapter-7) > :where(*) { flex-basis: calc(100% / 8); } :where(body) :where(.chapter-8) > :where(*) { flex-basis: calc(100% / 9); } :where(body) :where(.chapter-9) > :where(*) { flex-basis: calc(100% / 10); } :where(body) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) { display: flex; flex-wrap: wrap; flex-direction: row; gap: 8px; justify-content: center; align-items: stretch; margin: 8px 0; } :where(body) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > :where(*) { flex-grow: 1; flex-shrink: 0; } :where(body) :where(.chapter-0, .chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > :where(h1, h2, h3, h4, h5, h6) { flex-basis: 100%; margin-top: 1.2em; } :where(body) :where(hr) { border-width: 1px; border-style: dashed; } :where(body) :where(.separator-light) { border-style: dotted; } :where(body) :where(.separator-heavy) { border-style: solid; } :where(body) :where(img) { display: block; max-width: 100%; object-fit: contain; } :where(body) :where(.image-limit-half) { max-height: max(28.2vw, 50vh); } :where(body) :where(.image-limit-quarter) { max-height: max(14.1vw, 25vh); } :where(body) :where(table) { border-collapse: collapse; } :where(body) :where(table) :where(th), :where(body) :where(table) :where(td) { padding: 3px 7px; border-width: 1px; } :where(body) :where(table) :where(caption) { border-width: 1px; font-style: var(--bfont-caption-style); font-variant: var(--bfont-caption-variant); font-weight: var(--bfont-caption-weight); font-stretch: var(--bfont-caption-stretch); line-height: var(--bfont-caption-height); font-family: var(--bfont-caption-family); } :where(body) :where(table) :where(caption):where(.table-caption-top) { caption-side: top; border-bottom-width: 0; } :where(body) :where(table) :where(caption):where(.table-caption-bottom) { caption-side: bottom; border-top-width: 0; } :where(body) :where(table):where(.panel) { display: table; } :where(body) :where(table):where(.panel) :where(th), :where(body) :where(table):where(.panel) :where(td) { padding: 8px; } :where(body) :where(table):where(.panel) :where(caption) { text-align: inherit; background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); padding: 8px; } :where(body) :where(table):where(.panel) :where(caption) :where(*) { margin-top: 8px; margin-bottom: 8px; } :where(body) :where(table):where(.panel) :where(caption) :where(*):first-child { margin-top: 0; } :where(body) :where(table):where(.panel) :where(caption) :where(*):last-child { margin-bottom: 0; } :where(body) :where(table):where(.box) :where(tr) { border-width: 1px; } :where(body) :where(table):where(.box) :where(th), :where(body) :where(table):where(.box) :where(td) { border-width: 1px; padding: 7px; } :where(body) :where(table):where(.box) :where(caption) { border-width: 2px; padding: 6px; } :where(body) :where(table):where(.box) :where(caption):where(.table-caption-top) { border-bottom-width: 0; } :where(body) :where(table):where(.box) :where(caption):where(.table-caption-bottom) { border-top-width: 0; } :where(body) :where(table):where(.dialog) :where(thead) > :where(tr) { border-bottom-width: 1px; } :where(body) :where(table):where(.dialog) :where(tbody) > :where(tr) { border-width: 0; } :where(body) :where(table):where(.dialog) :where(tfoot) > :where(tr) { border-top-width: 1px; } :where(body) :where(table):where(.dialog) :where(th), :where(body) :where(table):where(.dialog) :where(td) { border-width: 0 0 0 1px; padding: 8px 8px 8px 7px; } :where(body) :where(table):where(.dialog) :where(caption) { border-width: 0 0 0 2px; padding: 8px 8px 8px 6px; } :where(body) :where(.panel) > :where(ul), :where(body) :where(.panel) > :where(ol) { margin-left: 6ex; } :where(body) :where(dt) { margin-top: 0.5em; padding: 0.2em 0; --bhsl-current-hue: var(--bhsl-primary-hue); --bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-lightness: var(--bhsl-primary-lightness); font-style: var(--bfont-term-style); font-variant: var(--bfont-term-variant); font-weight: var(--bfont-term-weight); font-stretch: var(--bfont-term-stretch); line-height: var(--bfont-term-height); font-family: var(--bfont-term-family); } :where(body) :where(dd) { margin-left: 4.5ex; margin-bottom: 0.5em; } :where(body) :where(details) { margin-left: 4.5ex; } :where(body) :where(summary) { cursor: pointer; margin-left: -4ex; padding: 0.2em 0; font-style: var(--bfont-summary-style); font-variant: var(--bfont-summary-variant); font-weight: var(--bfont-summary-weight); font-stretch: var(--bfont-summary-stretch); line-height: var(--bfont-summary-height); font-family: var(--bfont-summary-family); user-select: none; } :where(body) :where(.fade) { opacity: 0.3; } :where(body) :where(mark, .mark) { font-style: var(--bfont-mark-style); font-variant: var(--bfont-mark-variant); font-weight: var(--bfont-mark-weight); font-stretch: var(--bfont-mark-stretch); line-height: var(--bfont-mark-height); font-family: var(--bfont-mark-family); background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness)); --bhsl-current-hue: var(--bhsl-mark-foreground-hue); --bhsl-current-saturation: var(--bhsl-mark-foreground-saturation); --bhsl-current-lightness: var(--bhsl-mark-foreground-lightness); } :where(body) :where(mark, .mark) :where(mark, .mark) { background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); --bhsl-current-hue: var(--bhsl-foreground-hue); --bhsl-current-saturation: var(--bhsl-foreground-saturation); --bhsl-current-lightness: var(--bhsl-foreground-lightness); } :where(body) :where(mark, .mark) :where(mark, .mark) :where(mark, .mark) { background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness)); --bhsl-current-hue: var(--bhsl-mark-foreground-hue); --bhsl-current-saturation: var(--bhsl-mark-foreground-saturation); --bhsl-current-lightness: var(--bhsl-mark-foreground-lightness); } :where(body) :where(.todo) { --bhsl-current-hue: var(--bhsl-todo-foreground-hue); --bhsl-current-saturation: var(--bhsl-todo-foreground-saturation); --bhsl-current-lightness: var(--bhsl-todo-foreground-lightness); } :where(body) :where(.todo), :where(body) :where(.todo) :where(.panel) { border-style: dashed; background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness)); } :where(body) :where([disabled]) { border-style: dashed; cursor: not-allowed; } :where(body) :where(.red) { --bhsl-current-hue: var(--bhsl-red-hue); --bhsl-current-saturation: var(--bhsl-red-saturation); --bhsl-current-lightness: var(--bhsl-red-lightness); } :where(body) :where(.yellow) { --bhsl-current-hue: var(--bhsl-yellow-hue); --bhsl-current-saturation: var(--bhsl-yellow-saturation); --bhsl-current-lightness: var(--bhsl-yellow-lightness); } :where(body) :where(.green) { --bhsl-current-hue: var(--bhsl-green-hue); --bhsl-current-saturation: var(--bhsl-green-saturation); --bhsl-current-lightness: var(--bhsl-green-lightness); } :where(body) :where(.cyan) { --bhsl-current-hue: var(--bhsl-cyan-hue); --bhsl-current-saturation: var(--bhsl-cyan-saturation); --bhsl-current-lightness: var(--bhsl-cyan-lightness); } :where(body) :where(.blue) { --bhsl-current-hue: var(--bhsl-blue-hue); --bhsl-current-saturation: var(--bhsl-blue-saturation); --bhsl-current-lightness: var(--bhsl-blue-lightness); } :where(body) :where(.magenta) { --bhsl-current-hue: var(--bhsl-magenta-hue); --bhsl-current-saturation: var(--bhsl-magenta-saturation); --bhsl-current-lightness: var(--bhsl-magenta-lightness); } :where(body) :where(input, textarea, select, button) { font: inherit; cursor: pointer; background-color: transparent; padding: 0.125em 0.75ex; vertical-align: middle; min-width: 0; border-width: 0; border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4); } :where(body) :where(input, textarea, select, button)::placeholder { opacity: 1; color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.4); } :where(body) :where(input, textarea, select, button):hover:not(:where([disabled])) { border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); } :where(body) :where(input, textarea, select, button):hover:not(:where([disabled]))::placeholder { color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7); } :where(body) :where(input, textarea, select, button):active:not(:where([disabled])), :where(body) :where(input, textarea, select, button):focus:not(:where([disabled])) { border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); } :where(body) :where(textarea) { resize: vertical; } :where(body) :where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"]), :where(body) :where(select:not([multiple])) { border-bottom-width: 2px; } :where(body) :where(textarea), :where(body) :where(select[multiple]) { border-left-width: 2px; } :where(body) :where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"]):not(:where([disabled])), :where(body) :where(textarea):not(:where([disabled])) { cursor: text; } :where(body) :where(select:not([multiple])):not(:where([disabled])), :where(body) :where(select[multiple]):not(:where([disabled])) { cursor: vertical-text; } :where(body) :where(input[type="range"]):not(:where([disabled])) { cursor: ew-resize; } :where(body) :where(input[type="radio"]):not(:where([disabled])), :where(body) :where(input[type="checkbox"]):not(:where([disabled])), :where(body) :where(input[type="button"], .input[type="submit"], .input[type="reset"], button):not(:where([disabled])), :where(body) :where(input[type="color"]):not(:where([disabled])) { cursor: pointer; } :where(body) :where(select:not([multiple])) optgroup, :where(body) :where(select[multiple]) optgroup { padding-bottom: 0.25em; font-style: var(--bfont-header-style); font-variant: var(--bfont-header-variant); font-weight: var(--bfont-header-weight); font-stretch: var(--bfont-header-stretch); line-height: var(--bfont-header-height); font-family: var(--bfont-header-family); } :where(body) :where(select:not([multiple])) optgroup option, :where(body) :where(select[multiple]) optgroup option { padding: 0.125em 0 0.125em 2ex; } :where(body) :where(select:not([multiple])) option, :where(body) :where(select[multiple]) option { font-style: var(--bfont-text-style); font-variant: var(--bfont-text-variant); font-weight: var(--bfont-text-weight); font-stretch: var(--bfont-text-stretch); line-height: var(--bfont-text-height); font-family: var(--bfont-text-family); } :where(body) :where(input[type="radio"]), :where(body) :where(input[type="checkbox"]) { appearance: none; width: 1em; height: 1em; padding: 2px; border-width: 2px; display: inline-flex; justify-content: center; align-items: center; } :where(body) :where(input[type="radio"])::before, :where(body) :where(input[type="checkbox"])::before { display: block; content: ""; width: 100%; height: 100%; } :where(body) :where(input[type="radio"]):checked::before, :where(body) :where(input[type="checkbox"]):checked::before { background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness)); } :where(body) :where(input[type="radio"]) { border-radius: 100%; } :where(body) :where(input[type="radio"])::before { border-radius: 100%; } :where(body) :where(input[type="range"]) { padding: 0; } :where(body) :where(input[type="button"], .input[type="submit"], .input[type="reset"], button) { border-width: 2px; border-style: outset; } :where(body) :where(input[type="button"], .input[type="submit"], .input[type="reset"], button):active { border-style: inset; } :where(body) :where(input[type="file"]), :where(body) :where(input[type="color"]) { padding: 0; } @media screen and (-webkit-min-device-pixel-ratio: 0) { :where(body) :where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"])::-webkit-calendar-picker-indicator { filter: invert(calc(calc(var(--bhsl-current-lightness) - 50%) * 1000)); } :where(body) :where(select:not([multiple])) optgroup, :where(body) :where(select:not([multiple])) option { background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); } :where(body) :where(select:not([multiple])) optgroup::before, :where(body) :where(select:not([multiple])) option::before { content: ""; } } :where(body) :where(.form-flex) { display: flex; flex-direction: column; justify-content: stretch; } :where(body) :where(.form-flex) > :where(.form-flex-content, p) { margin: 0.5em 0; } :where(body) :where(.form-flex) > :where(.form-flex-choice, label) { display: flex; gap: 1ex; min-height: 1.675em; } :where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*):first-child, :where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*):last-child { margin: auto 0; flex-basis: 15%; flex-grow: 0; flex-shrink: 0; font-style: var(--bfont-label-style); font-variant: var(--bfont-label-variant); font-weight: var(--bfont-label-weight); font-stretch: var(--bfont-label-stretch); line-height: var(--bfont-label-height); font-family: var(--bfont-label-family); --bhsl-current-hue: var(--bhsl-primary-hue); --bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-lightness: var(--bhsl-primary-lightness); } :where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*) { flex-grow: 1; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: stretch; gap: 1ex; } :where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*):first-child { text-align: right; display: block; } :where(body) :where(.form-flex) > :where(.form-flex-choice, label) > :where(*):last-child { text-align: left; display: block; } :where(body) :where(a) { --bhsl-current-hue: var(--bhsl-link-hue); --bhsl-current-saturation: var(--bhsl-link-saturation); --bhsl-current-lightness: var(--bhsl-link-lightness); } :where(body) :where(i) { font-style: var(--bfont-idiomatic-style); font-variant: var(--bfont-idiomatic-variant); font-weight: var(--bfont-idiomatic-weight); font-stretch: var(--bfont-idiomatic-stretch); line-height: var(--bfont-idiomatic-height); font-family: var(--bfont-idiomatic-family); } :where(body) :where(em) { font-style: var(--bfont-emphasis-style); font-variant: var(--bfont-emphasis-variant); font-weight: var(--bfont-emphasis-weight); font-stretch: var(--bfont-emphasis-stretch); line-height: var(--bfont-emphasis-height); font-family: var(--bfont-emphasis-family); } :where(body) :where(b) { font-style: var(--bfont-attention-style); font-variant: var(--bfont-attention-variant); font-weight: var(--bfont-attention-weight); font-stretch: var(--bfont-attention-stretch); line-height: var(--bfont-attention-height); font-family: var(--bfont-attention-family); } :where(body) :where(strong) { font-style: var(--bfont-strong-style); font-variant: var(--bfont-strong-variant); font-weight: var(--bfont-strong-weight); font-stretch: var(--bfont-strong-stretch); line-height: var(--bfont-strong-height); font-family: var(--bfont-strong-family); } :where(body) :where(ins) { --bhsl-current-hue: var(--bhsl-inserted-hue); --bhsl-current-saturation: var(--bhsl-inserted-saturation); --bhsl-current-lightness: var(--bhsl-inserted-lightness); } :where(body) :where(del) { --bhsl-current-hue: var(--bhsl-deleted-hue); --bhsl-current-saturation: var(--bhsl-deleted-saturation); --bhsl-current-lightness: var(--bhsl-deleted-lightness); } :where(body) :where(code), :where(body) :where(pre), :where(body) :where(kbd), :where(body) :where(samp) { font-style: var(--bfont-code-style); font-variant: var(--bfont-code-variant); font-weight: var(--bfont-code-weight); font-stretch: var(--bfont-code-stretch); line-height: var(--bfont-code-height); font-family: var(--bfont-code-family); } :where(body) :where(code) :where(b), :where(body) :where(pre) :where(b), :where(body) :where(kbd) :where(b), :where(body) :where(samp) :where(b) { font-style: var(--bfont-boldcode-style); font-variant: var(--bfont-boldcode-variant); font-weight: var(--bfont-boldcode-weight); font-stretch: var(--bfont-boldcode-stretch); line-height: var(--bfont-boldcode-height); font-family: var(--bfont-boldcode-family); } :where(body) :where(pre) { overflow-x: scroll; } :where(body) :where(kbd), :where(body) :where(samp) { padding: 0 0.35ex; border-width: 1px; border-style: solid; } :where(body) :where(kbd) :where(kbd), :where(body) :where(samp) :where(kbd), :where(body) :where(kbd) :where(samp), :where(body) :where(samp) :where(samp) { border-width: 0; } :where(body) :where(kbd) { background-color: hsl(var(--bhsl-sample-output-hue) var(--bhsl-sample-output-saturation) var(--bhsl-sample-output-lightness)); border-color: hsl(var(--bhsl-sample-input-hue) var(--bhsl-sample-input-saturation) var(--bhsl-sample-input-lightness)); --bhsl-current-hue: var(--bhsl-sample-input-hue); --bhsl-current-saturation: var(--bhsl-sample-input-saturation); --bhsl-current-lightness: var(--bhsl-sample-input-lightness); } :where(body) :where(kbd) :where(kbd) { font-style: var(--bfont-boldcode-style); font-variant: var(--bfont-boldcode-variant); font-weight: var(--bfont-boldcode-weight); font-stretch: var(--bfont-boldcode-stretch); line-height: var(--bfont-boldcode-height); font-family: var(--bfont-boldcode-family); } :where(body) :where(samp) { background-color: hsl(var(--bhsl-sample-input-hue) var(--bhsl-sample-input-saturation) var(--bhsl-sample-input-lightness)); border-color: hsl(var(--bhsl-sample-output-hue) var(--bhsl-sample-output-saturation) var(--bhsl-sample-output-lightness)); --bhsl-current-hue: var(--bhsl-sample-output-hue); --bhsl-current-saturation: var(--bhsl-sample-output-saturation); --bhsl-current-lightness: var(--bhsl-sample-output-lightness); } :where(body) :where(samp) :where(samp) { font-style: var(--bfont-boldcode-style); font-variant: var(--bfont-boldcode-variant); font-weight: var(--bfont-boldcode-weight); font-stretch: var(--bfont-boldcode-stretch); line-height: var(--bfont-boldcode-height); font-family: var(--bfont-boldcode-family); } :where(body) :where(var) { font-style: var(--bfont-variable-style); font-variant: var(--bfont-variable-variant); font-weight: var(--bfont-variable-weight); font-stretch: var(--bfont-variable-stretch); line-height: var(--bfont-variable-height); font-family: var(--bfont-variable-family); } :where(body) :where(cite) { font-style: var(--bfont-citation-style); font-variant: var(--bfont-citation-variant); font-weight: var(--bfont-citation-weight); font-stretch: var(--bfont-citation-stretch); line-height: var(--bfont-citation-height); font-family: var(--bfont-citation-family); } :where(body) :where(dfn) { font-style: var(--bfont-term-style); font-variant: var(--bfont-term-variant); font-weight: var(--bfont-term-weight); font-stretch: var(--bfont-term-stretch); line-height: var(--bfont-term-height); font-family: var(--bfont-term-family); --bhsl-current-hue: var(--bhsl-primary-hue); --bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-lightness: var(--bhsl-primary-lightness); } :where(body) :where(abbr) { cursor: help; }