nimiq-vitepress-theme
Version:
Nimiq UI theme for VitePress
1,199 lines (1,057 loc) • 132 kB
CSS
/* layer: layers */
@layer preflights, theme, utilities;
/* layer: preflights */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Remove default margins and padding
3. Reset all borders.
*/
*,
::after,
::before,
::backdrop,
::file-selector-button {
box-sizing: border-box; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 2 */
border: 0 solid; /* 3 */
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS.
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
tab-size: 4; /* 3 */
font-family: var(
--defaults-font-family,
ui-sans-serif,
system-ui,
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji'
); /* 4 */
font-feature-settings: var(--defaults-font-featureSettings, normal); /* 5 */
font-variation-settings: var(--defaults-font-variationSettings, normal); /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
/*
Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
line-height: inherit;
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Reset the default border style to a 1px solid border.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: var(
--defaults-monoFont-family,
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
'Liberation Mono',
'Courier New',
monospace
); /* 1 */
font-feature-settings: var(--defaults-monoFont-featureSettings, normal); /* 2 */
font-variation-settings: var(--defaults-monoFont-variationSettings, normal); /* 3 */
font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Make lists unstyled by default.
*/
ol,
ul,
menu {
list-style: none;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/*
1. Inherit font styles in all browsers.
2. Remove border radius in all browsers.
3. Remove background color in all browsers.
4. Ensure consistent opacity for disabled states in all browsers.
*/
button,
input,
select,
optgroup,
textarea,
::file-selector-button {
font: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
letter-spacing: inherit; /* 1 */
color: inherit; /* 1 */
border-radius: 0; /* 2 */
background-color: transparent; /* 3 */
opacity: 1; /* 4 */
}
/*
Restore default font weight.
*/
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
/*
Restore indentation.
*/
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
/*
Restore space after button.
*/
::file-selector-button {
margin-inline-end: 4px;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to a semi-transparent version of the current text color.
*/
::placeholder {
opacity: 1; /* 1 */
color: color-mix(in oklab, currentColor 50%, transparent); /* 2 */
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Ensure date/time inputs have the same height when empty in iOS Safari.
2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/
::-webkit-date-and-time-value {
min-height: 1lh; /* 1 */
text-align: inherit; /* 2 */
}
/*
Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/
::-webkit-datetime-edit {
display: inline-flex;
}
/*
Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Correct the inability to style the border radius in iOS Safari.
*/
button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
appearance: button;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
Make elements with the HTML hidden attribute stay hidden by default.
*/
[hidden]:where(:not([hidden='until-found'])) {
display: none !important;
}
@property --un-gradient-fn-from {
syntax: "<color>";
inherits: false;
initial-value: #000
}
@property --un-gradient-fn-to {
syntax: "<color>";
inherits: false;
initial-value: #000
}
@property --un-gradient-fn-color-space {
syntax: "<custom-ident>";
inherits: false;
initial-value: in oklch;
}
@keyframes reka-down { from{ height: 0 } to { height: var(--reka-accordion-content-height)} }
@keyframes reka-up { from{ height: var(--reka-accordion-content-height)} to { height: 0 } }
@keyframes reka-collapsible-down { from{ height: 0 } to { height: var(--reka-collapsible-content-height)} }
@keyframes reka-collapsible-up { from{ height: var(--reka-collapsible-content-height)} to { height: 0 } }
:root {
--unit: 1em;
/*
The children of `.nq-prose` will have font-sizes and margins proportional fluid value depending on the value that
the element has.
For example, if we set `font-size: 24px` to `.nq-prose`:
- h1: will have (3 * 24)px for desktop and (2.75 * 24)px for mobile
- p: will have (24)px for desktop and (2.75 * 24)px for mobile
*/
--nq-screen-width-min-lh: 20;
--nq-screen-width-max-lh: 72;
--f-screen-range-lh: calc(var(--nq-screen-width-max-lh) - var(--nq-screen-width-min-lh));
--nq-screen-width-min-em: 20;
--nq-screen-width-max-em: 72;
--f-screen-range-em: calc(var(--nq-screen-width-max-em) - var(--nq-screen-width-min-em));
--font-size-min-em: 1;
--font-size-max-em: 1;
--margin-min-lh: 0;
--margin-max-lh: 0;
}
/**
* Make sure to import also nimiq-colors layer found in this package
**/
.nq-prose,
[nq-prose],
.nq-prose-compact,
[nq-prose-compact] {
font-size: 16px;
/* Default font-size */
margin-trim: block;
&:not(:where(.nq-prose-compact, [nq-prose-compact])) {
> *:not(:where(.nq-raw, .nq-raw *, .nq-not-prose, .nq-not-prose *, .shiki *)) {
padding-right: 2rem;
padding-left: 2rem;
&:last-child {
padding-bottom: 6rem;
@media (min-width: 1153px) {
padding-bottom: 8rem;
}
}
}
}
* {
--lh-unit: 1lh;
--f-factor-margin: calc((100vw - (var(--lh-unit) * var(--nq-screen-width-min-lh))) / var(--f-screen-range-lh));
--f-factor: calc((100vw - (var(--unit) * var(--nq-screen-width-min-em))) / var(--f-screen-range-em));
/* Margin calculation */
--nq-m-range: calc(var(--margin-max-lh) - var(--margin-min-lh));
--nq-m-fluid: calc(var(--lh-unit) * var(--margin-min-lh) + var(--nq-m-range) * var(--f-factor-margin));
--nq-m-size: clamp(
calc(var(--lh-unit) * var(--margin-min-lh)),
var(--nq-m-fluid),
calc(var(--margin-max-lh) * var(--lh-unit))
);
/* derived values */
--font-size-range: calc(var(--font-size-max-em) - var(--font-size-min-em));
--font-size-fluid: calc(var(--unit) * var(--font-size-min-em) + var(--font-size-range) * var(--f-factor));
--font-size: clamp(
var(--unit) * var(--font-size-min-em),
var(--font-size-fluid),
var(--unit) * var(--font-size-max-em)
);
font-size: var(--font-size);
}
> *:first-child {
margin-top: 0;
/* TODO Remove margin-top and margin-bottom on last element when margin-trim is widely supported */
}
> *:last-child {
margin-bottom: 0;
}
*:not(:where(.nq-raw, .nq-raw *, .nq-not-prose, .nq-not-prose *, .shiki *)) {
line-height: 1.5;
max-width: var(--nq-prose-max-width, 780px);
margin-left: auto;
margin-right: auto;
font-family: var(--nq-font-sans, 'Mulish');
&:where(h1) {
--font-size-min-em: 2.75;
--font-size-max-em: 3;
line-height: 1.5;
font-weight: 700;
}
&:where(h1 + *:not(:where(h1, h2, h3, h4))) {
--margin-min-lh: 4.6667;
--margin-max-lh: 5;
margin-top: var(--nq-m-size);
}
&:where(h2) {
--font-size-min-em: 2;
--font-size-max-em: 2.375;
line-height: 1.3;
font-weight: 700;
margin-top: var(--nq-m-size);
margin-bottom: 24px;
--margin-min-lh: 4.2308;
--margin-max-lh: 4.6154;
&:where(h1 + h2) {
--margin-min-lh: 1.9231;
--margin-max-lh: 2.3077;
}
}
&:where(h3) {
--font-size-min-em: 1.625;
--font-size-max-em: 1.875;
line-height: 1.3;
font-weight: 700;
margin-bottom: 24px;
margin-top: var(--nq-m-size);
--margin-min-lh: 4.2308;
--margin-max-lh: 4.6154;
&:where(h2 + h3) {
--margin-min-lh: 1.5385;
--margin-max-lh: 1.7308;
}
}
&:where(h4) {
--font-size-min-em: 1.375;
--font-size-max-em: 1.625;
line-height: 1.3;
font-weight: 700;
margin-top: var(--nq-m-size);
margin-bottom: 24px;
--margin-min-lh: 4.2308;
--margin-max-lh: 4.6154;
}
&:where(h3 + h4) {
--margin-min-lh: 1.5385;
--margin-max-lh: 1.7308;
}
/* Anchors in headings */
&:where(h1, h2, h3, h4, h5, h6)[id] {
position: relative;
margin-left: -1.25rem;
padding-left: 1rem;
padding-right: 1rem;
width: 100%;
min-height: 1em;
color: var(--colors-neutral);
&::after {
content: '#';
opacity: 0;
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
transition: 50ms opacity var(--nq-ease, ease-in-out);
pointer-events: none;
}
@media (min-width: 769px) {
:where(&, &::after):hover {
&::after {
opacity: 0.5;
}
}
}
&:has(a:focus-visible) {
outline: 0.125rem solid var(--colors-blue);
outline-offset: 0.125rem;
}
> a {
position: absolute;
inset: 0;
padding-left: 20px;
font-size: inherit;
font-weight: inherit;
top: -6px;
color: var(--colors-neutral);
&::after {
position: absolute;
inset: 0;
}
}
}
&:where(p) {
margin-top: 0;
margin-bottom: 0;
line-height: 1.5;
--font-size-min-em: 0.9;
--font-size-max-em: 1;
& + p {
margin-top: 16px;
}
}
&:where(figure) {
figcaption {
color: var(--colors-neutral-700);
--font-size-min-em: 0.75;
--font-size-max-em: 0.875;
font-weight: 700;
line-height: 1.3125;
:where(.dark, [data-theme='dark']) & {
color: color-mix(in oklch, var(--colors-white) 80%, transparent);
}
}
}
&:where(blockquote) {
background: var(--colors-green-400);
--margin-min-lh: 0.5833;
--margin-max-lh: 0.6667;
padding: var(--nq-m-size);
border-radius: 6px;
box-shadow: 0 0 0 1.5px var(--colors-green-600);
font-weight: 600;
transform: translateX(-8px);
width: calc(100% + 16px);
--font-size-min-em: 0.75;
--font-size-max-em: 0.875;
}
&:where(img, video, iframe) {
border-radius: 6px;
--margin-min-lh: 0.75;
--margin-max-lh: 0.9167;
margin-top: var(--nq-m-size);
&:has(+ figcaption) {
--margin-min-lh: 0.5;
--margin-max-lh: 0.6667;
margin-bottom: var(--nq-m-size);
}
&:not(:has(+ figcaption)) {
--margin-min-lh: 0.75;
--margin-max-lh: 0.9167;
margin-bottom: var(--nq-m-size);
}
}
/* Rules to use a wider container (8px on the sides). Mainly for phones */
&:where(img, video, iframe, table),
/* Select code and pre that are not child of p,ul,ol... */
&:where(code, pre):not(:where(:where(p, ul, ol, pre, code, table) :where(pre, code))) {
margin-left: -1.5rem;
width: min(calc(100% + 3rem), 700px);
@media (min-width: 768px) {
margin-left: 0;
width: 100%;
max-width: 100%;
}
}
&:where(ul) {
list-style: none;
margin-top: 24px;
margin-bottom: 24px;
li {
display: block;
position: relative;
margin: 16px 0 16px 20px;
@media screen and (min-width: 769px) {
margin-left: 32px;
}
@media screen and (min-width: 1153px) {
margin-left: 40px;
}
> ol li {
margin-left: 0;
}
:not(ul ol) &::before {
content: '';
width: 6px;
height: 6px;
border-radius: 3px;
background-color: currentColor;
opacity: 0.2;
display: inline-block;
margin-right: 12px;
position: absolute;
left: -20px;
top: 8px;
}
}
}
&:where(ol) {
list-style: none;
counter-reset: item;
margin-top: 24px;
margin-bottom: 24px;
li {
counter-increment: item;
position: relative;
margin: 16px 0 16px 20px;
@media screen and (min-width: 769px) {
margin-left: 32px;
}
@media screen and (min-width: 1153px) {
margin-left: 40px;
}
&::before {
content: counters(item, '.');
font-weight: 700;
display: inline-block;
margin-right: 12px;
position: absolute;
left: -20px;
color: currentColor;
opacity: 0.5;
top: 2px;
}
> ol {
counter-reset: subitem;
li {
counter-increment: subitem;
&::before {
content: counters(item, '.') '.' counter(subitem);
top: 0;
left: -32px;
}
}
}
}
}
:where(ol, ul) ol,
ul ul {
margin-top: 8px;
margin-bottom: 16px;
padding-left: 20px;
li {
margin-top: 0;
margin-left: 12px;
}
}
&:where(code, pre, kbd, pre *, code *) {
font-family: var(--nq-font-mono, 'Fira Code');
/* font-size-adjust: from-font;
TODO
Remove all font-sizes for Fira Code and instead using font-size-adjust to adjust the font-size to the parent element.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust
*/
}
&:where(code) {
--font-size-min-em: 0.75;
--font-size-max-em: 0.875;
border-radius: 4px;
}
:where(:where(h1, h2, h3, h4, h5, h6, p, li, span, a) > code) {
padding: 0 0.25em;
}
&:where(pre) {
width: 100%;
--font-size-min-em: 0.75;
--font-size-max-em: 0.875;
--margin-min-lh: 0.8333;
--margin-max-lh: 1;
margin-top: var(--nq-m-size);
margin-bottom: var(--nq-m-size);
padding: 20px 24px;
border-radius: 6px;
outline: 1.5px solid color-mix(in oklch, var(--colors-neutral) 8%, transparent);
}
kbd {
padding: 0.25em 0.125em;
--font-size-min: 0.75;
--font-size-max: 0.875;
color: var(--colors-neutral-800);
background-color: var(--colors-neutral-200);
border-radius: 0.25em;
box-shadow: 0 0 0 1px var(--colors-neutral-400);
margin: 0 0.25em -0.25em 0.25em;
white-space: nowrap;
line-height: 1;
}
&:where(pre, code):where(h1, h2, h3, h4 &) {
font-size: 0.8em;
padding: 2px 0.5rem;
position: relative;
top: -1px;
}
&:where(a) {
font-weight: 600;
text-decoration: none;
color: var(--colors-blue);
}
table {
--margin-min-lh: 1;
--margin-max-lh: 1.3333;
margin-bottom: var(--nq-m-size);
margin-top: var(--nq-m-size);
display: block;
overflow-x: auto;
border-spacing: 0;
border-collapse: separate;
border-radius: 6px;
border: 1px solid var(--colors-neutral-300);
max-height: 90dvh;
max-width: max-content;
scroll-behavior: smooth;
code,
pre {
--line-height: 1.3;
padding: 4px 0.25rem;
position: relative;
}
th,
td {
padding: 12px 0.75rem;
}
thead th {
z-index: 1;
position: sticky;
top: -1px;
text-wrap: balance;
white-space: nowrap;
font-weight: 400;
color: var(--colors-neutral-800);
background-color: var(--colors-neutral-100);
}
tbody {
td {
vertical-align: initial;
text-wrap: balance;
}
> tr:not(:last-child) td {
border-bottom: 1px solid var(--colors-neutral-300);
}
}
/* Apply a border to the right of all but the last column */
th:not(:last-child),
td:not(:last-child) {
border-right: 1px solid var(--colors-neutral-300);
}
}
hr {
--margin-min-lh: 0.8333;
--margin-max-lh: 1;
margin: var(--nq-m-size) auto;
width: 128px;
border-color: var(--colors-neutral-500);
}
details {
/* TODO Animate open/closing https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_the_details_element */
border-radius: 6px;
background-color: var(--colors-neutral-200);
--margin-min-lh: 0.75;
--margin-max-lh: 0.9167;
margin-top: var(--nq-m-size);
margin-bottom: var(--nq-m-size);
color: var(--colors-neutral-900);
box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--colors-neutral) 10%, transparent);
::marker {
color: transparent;
}
summary {
padding: 14px 2rem 14px calc(0.7rem + 2.3em);
--font-size-min-em: 0.9;
--font-size-max-em: 1;
position: relative;
display: flex;
align-items: center;
cursor: pointer;
&::before {
content: '';
--icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTIgMS40MTNBLjguOCAwIDAxMy4yMTIuNzI3bDcuNjQ1IDQuNTg3YS44LjggMCAwMTAgMS4zNzJsLTcuNjQ1IDQuNTg3QS44LjggMCAwMTIgMTAuNTg3eiIvPjwvc3ZnPg==);
-webkit-mask: var(--icon) no-repeat;
mask: var(--icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
background-color: currentColor;
color: inherit;
width: 0.622em;
height: 0.622em;
transition: transform 100ms ease-out;
display: inline-block;
position: absolute;
left: 0;
padding-left: 4rem;
}
}
&[open] summary {
&::before {
transform: rotate(90deg);
}
}
> *:not(summary) {
padding: 0 1rem 14px 1rem;
}
}
}
}
/* layer: icons */
.i-tabler\:align-left,
[i-tabler\:align-left=""]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h10M4 18h14'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}
.i-tabler\:arrow-down,
[i-tabler\:arrow-down=""]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 5v14m6-6l-6 6m-6-6l6 6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}
.i-tabler\:arrow-up,
[i-tabler\:arrow-up=""]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 5v14m6-8l-6-6m-6 6l6-6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}
.i-tabler\:home,
[i-tabler\:home=""]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}
.i-tabler\:menu-2,
[i-tabler\:menu-2=""]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}
.dark .dark\:i-nimiq\:logos-nimiq-white-horizontal{background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='18' viewBox='0 0 76 18'%3E%3Cg fill='none'%3E%3Cpath fill='url(%23IconifyId1973535ae698969a73)' d='M19.964 8.156 15.758.844A1.69 1.69 0 0014.299 0H5.887c-.6 0-1.156.32-1.456.844L.225 8.156c-.3.523-.3 1.165 0 1.688l4.206 7.312c.3.523.856.844 1.456.844h8.412c.6 0 1.156-.32 1.456-.844l4.206-7.312a1.69 1.69 0 00.003-1.688'/%3E%3Cpath fill='%23fff' d='M34.91 3.656h1.829v10.688H35.33L29.582 6.89v7.453H27.76V3.656h1.403l5.748 7.453zm5.47 10.688V3.656h1.962v10.688zM54.82 3.656h1.543v10.688H54.68v-6.61l-2.874 6.61h-1.262l-2.874-6.61v6.61h-1.683V3.656h1.542l3.646 8.368zm5.189 10.688V3.656h1.962v10.688zm15.075-2.436c-.572 1.14-1.461 1.809-2.25 2.135.093.214.528.81.856 1.153s.673.692 1.11 1.046l-1.332 1.055c-.49-.343-.917-.754-1.351-1.232a9 9 0 01-1.142-1.595 9 9 0 01-.451.014c-1.085 0-1.991-.222-2.773-.663a4.4 4.4 0 01-1.792-1.913c-.379-.756-.623-1.766-.623-2.908s.21-2.076.628-2.908a4.44 4.44 0 011.8-1.913c.783-.444 1.697-.663 2.76-.663s1.991.222 2.773.663a4.4 4.4 0 011.792 1.913c.415.832.623 1.766.623 2.908s-.25 2.154-.628 2.908m-6.935.009q.849 1.02 2.375 1.02 1.528 0 2.375-1.02c.567-.684.85-1.646.85-2.917 0-1.263-.283-2.247-.85-2.922q-.849-1.014-2.375-1.016-1.528 0-2.375 1.007c-.567.673-.85 1.66-.85 2.931s.283 2.233.85 2.917'/%3E%3Cdefs%3E%3CradialGradient id='IconifyId1973535ae698969a73' cx='0' cy='0' r='1' gradientTransform='matrix(20.1956 0 0 20.2552 15.188 17.766)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EC991C'/%3E%3Cstop offset='1' stop-color='%23E9B213'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/g%3E%3C/svg%3E") no-repeat;background-size:100% 100%;background-color:transparent;width:4.222222222222222em;height:1em;}
.dark [dark\:i-nimiq\:logos-nimiq-white-horizontal=""]{background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='18' viewBox='0 0 76 18'%3E%3Cg fill='none'%3E%3Cpath fill='url(%23IconifyId1973535ae698969a75)' d='M19.964 8.156 15.758.844A1.69 1.69 0 0014.299 0H5.887c-.6 0-1.156.32-1.456.844L.225 8.156c-.3.523-.3 1.165 0 1.688l4.206 7.312c.3.523.856.844 1.456.844h8.412c.6 0 1.156-.32 1.456-.844l4.206-7.312a1.69 1.69 0 00.003-1.688'/%3E%3Cpath fill='%23fff' d='M34.91 3.656h1.829v10.688H35.33L29.582 6.89v7.453H27.76V3.656h1.403l5.748 7.453zm5.47 10.688V3.656h1.962v10.688zM54.82 3.656h1.543v10.688H54.68v-6.61l-2.874 6.61h-1.262l-2.874-6.61v6.61h-1.683V3.656h1.542l3.646 8.368zm5.189 10.688V3.656h1.962v10.688zm15.075-2.436c-.572 1.14-1.461 1.809-2.25 2.135.093.214.528.81.856 1.153s.673.692 1.11 1.046l-1.332 1.055c-.49-.343-.917-.754-1.351-1.232a9 9 0 01-1.142-1.595 9 9 0 01-.451.014c-1.085 0-1.991-.222-2.773-.663a4.4 4.4 0 01-1.792-1.913c-.379-.756-.623-1.766-.623-2.908s.21-2.076.628-2.908a4.44 4.44 0 011.8-1.913c.783-.444 1.697-.663 2.76-.663s1.991.222 2.773.663a4.4 4.4 0 011.792 1.913c.415.832.623 1.766.623 2.908s-.25 2.154-.628 2.908m-6.935.009q.849 1.02 2.375 1.02 1.528 0 2.375-1.02c.567-.684.85-1.646.85-2.917 0-1.263-.283-2.247-.85-2.922q-.849-1.014-2.375-1.016-1.528 0-2.375 1.007c-.567.673-.85 1.66-.85 2.931s.283 2.233.85 2.917'/%3E%3Cdefs%3E%3CradialGradient id='IconifyId1973535ae698969a75' cx='0' cy='0' r='1' gradientTransform='matrix(20.1956 0 0 20.2552 15.188 17.766)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EC991C'/%3E%3Cstop offset='1' stop-color='%23E9B213'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/g%3E%3C/svg%3E") no-repeat;background-size:100% 100%;background-color:transparent;width:4.222222222222222em;height:1em;}
.i-nimiq\:chevron-down,
[i-nimiq\:chevron-down=""]{--nq-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 4 6 9 1 4'/%3E%3C/svg%3E");-webkit-mask:var(--nq-icon) no-repeat;mask:var(--nq-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;color:inherit;}
.i-nimiq\:chevron-right,
[i-nimiq\:chevron-right=""]{--nq-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3.5 1 5 5-5 5'/%3E%3C/svg%3E");-webkit-mask:var(--nq-icon) no-repeat;mask:var(--nq-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;color:inherit;}
.i-nimiq\:chevron-top-down,
[i-nimiq\:chevron-top-down=""]{--nq-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M.778 3.889 3.888.778 7 3.888m0 6.223-3.111 3.111-3.111-3.11'/%3E%3C/svg%3E");-webkit-mask:var(--nq-icon) no-repeat;mask:var(--nq-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;color:inherit;}
.i-nimiq\:cross,
[i-nimiq\:cross=""]{--nq-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 10 10m0-10L1 11'/%3E%3C/svg%3E");-webkit-mask:var(--nq-icon) no-repeat;mask:var(--nq-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;color:inherit;}
.i-nimiq\:logos-nimiq-horizontal{background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='18' viewBox='0 0 76 18'%3E%3Cg fill='none'%3E%3Cpath fill='url(%23IconifyId1973535ae698969a72)' d='M19.964 8.156 15.758.844A1.69 1.69 0 0014.299 0H5.887c-.6 0-1.156.32-1.456.844L.225 8.156c-.3.523-.3 1.165 0 1.688l4.206 7.312c.3.523.856.844 1.456.844h8.412c.6 0 1.156-.32 1.456-.844l4.206-7.312a1.69 1.69 0 00.003-1.688'/%3E%3Cpath fill='%231F2348' d='M34.91 3.656h1.829v10.688H35.33L29.582 6.89v7.453H27.76V3.656h1.403l5.748 7.453zm5.47 10.688V3.656h1.962v10.688zM54.82 3.656h1.543v10.688H54.68v-6.61l-2.874 6.61h-1.262l-2.874-6.61v6.61h-1.683V3.656h1.542l3.646 8.368zm5.189 10.688V3.656h1.962v10.688zm15.075-2.436c-.572 1.14-1.461 1.809-2.25 2.135.093.214.528.81.856 1.153s.673.692 1.11 1.046l-1.332 1.055c-.49-.343-.917-.754-1.351-1.232a9 9 0 01-1.142-1.595 9 9 0 01-.451.014c-1.085 0-1.991-.222-2.773-.663a4.4 4.4 0 01-1.792-1.913c-.379-.756-.623-1.766-.623-2.908s.21-2.076.628-2.908a4.44 4.44 0 011.8-1.913c.783-.444 1.697-.663 2.76-.663s1.991.222 2.773.663a4.4 4.4 0 011.792 1.913c.415.832.623 1.766.623 2.908s-.25 2.154-.628 2.908m-6.935.009q.849 1.02 2.375 1.02 1.528 0 2.375-1.02c.567-.684.85-1.646.85-2.917 0-1.263-.283-2.247-.85-2.922q-.849-1.014-2.375-1.016-1.528 0-2.375 1.007c-.567.673-.85 1.66-.85 2.931s.283 2.233.85 2.917'/%3E%3Cdefs%3E%3CradialGradient id='IconifyId1973535ae698969a72' cx='0' cy='0' r='1' gradientTransform='matrix(20.1956 0 0 20.2552 15.188 17.766)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EC991C'/%3E%3Cstop offset='1' stop-color='%23E9B213'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/g%3E%3C/svg%3E") no-repeat;background-size:100% 100%;background-color:transparent;width:4.222222222222222em;height:1em;}
.i-nimiq\:magnifying-glass,
[i-nimiq\:magnifying-glass=""]{--nq-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath fill='currentColor' d='M9.652 8.548 9.1 7.997 7.997 9.1l.551.552zm2.017 4.224a.78.78 0 101.102-1.104zM5.46 10.92a5.46 5.46 0 005.46-5.46H9.36a3.9 3.9 0 01-3.9 3.9zm5.46-5.46A5.46 5.46 0 005.46 0v1.56a3.9 3.9 0 013.9 3.9zM5.46 0A5.46 5.46 0 000 5.46h1.56a3.9 3.9 0 013.9-3.9zM0 5.46a5.46 5.46 0 005.46 5.46V9.36a3.9 3.9 0 01-3.9-3.9zm8.548 4.192 3.12 3.12 1.104-1.104-3.12-3.12z'/%3E%3C/svg%3E");-webkit-mask:var(--nq-icon) no-repeat;mask:var(--nq-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;color:inherit;}
.i-nimiq\:watch-1-50{--nq-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none'%3E%3Cg stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' clip-path='url(%23IconifyId1973535ae698969a70)'%3E%3Cpath d='M6 11.25A5.25 5.25 0 106 .75a5.25 5.25 0 000 10.5'/%3E%3Cpath d='M4.5 4 6 6l1.5-1'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='IconifyId1973535ae698969a70'%3E%3Cpath fill='%23fff' d='M0 0h12v12H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--nq-icon) no-repeat;mask:var(--nq-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;color:inherit;}
.i-nimiq\:widget,
[i-nimiq\:widget=""]{--nq-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' d='M.5 2.5a2 2 0 012-2h2A.5.5 0 015 1v2.5a.5.5 0 01-.5.5H1a.5.5 0 01-.5-.5zM7 1a.5.5 0 01.5-.5h2a2 2 0 012 2v4a.5.5 0 01-.5.5H7.5a.5.5 0 01-.5-.5zM.5 6.5A.5.5 0 011 6h3.5a.5.5 0 01.5.5V11a.5.5 0 01-.5.5h-2a2 2 0 01-2-2zm6.5 3a.5.5 0 01.5-.5H11a.5.5 0 01.5.5 2 2 0 01-2 2h-2A.5.5 0 017 11z'/%3E%3C/svg%3E");-webkit-mask:var(--nq-icon) no-repeat;mask:var(--nq-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;color:inherit;}
[i-nimiq\:logos-nimiq-horizontal=""]{background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='18' viewBox='0 0 76 18'%3E%3Cg fill='none'%3E%3Cpath fill='url(%23IconifyId1973535ae698969a74)' d='M19.964 8.156 15.758.844A1.69 1.69 0 0014.299 0H5.887c-.6 0-1.156.32-1.456.844L.225 8.156c-.3.523-.3 1.165 0 1.688l4.206 7.312c.3.523.856.844 1.456.844h8.412c.6 0 1.156-.32 1.456-.844l4.206-7.312a1.69 1.69 0 00.003-1.688'/%3E%3Cpath fill='%231F2348' d='M34.91 3.656h1.829v10.688H35.33L29.582 6.89v7.453H27.76V3.656h1.403l5.748 7.453zm5.47 10.688V3.656h1.962v10.688zM54.82 3.656h1.543v10.688H54.68v-6.61l-2.874 6.61h-1.262l-2.874-6.61v6.61h-1.683V3.656h1.542l3.646 8.368zm5.189 10.688V3.656h1.962v10.688zm15.075-2.436c-.572 1.14-1.461 1.809-2.25 2.135.093.214.528.81.856 1.153s.673.692 1.11 1.046l-1.332 1.055c-.49-.343-.917-.754-1.351-1.232a9 9 0 01-1.142-1.595 9 9 0 01-.451.014c-1.085 0-1.991-.222-2.773-.663a4.4 4.4 0 01-1.792-1.913c-.379-.756-.623-1.766-.623-2.908s.21-2.076.628-2.908a4.44 4.44 0 011.8-1.913c.783-.444 1.697-.663 2.76-.663s1.991.222 2.773.663a4.4 4.4 0 011.792 1.913c.415.832.623 1.766.623 2.908s-.25 2.154-.628 2.908m-6.935.009q.849 1.02 2.375 1.02 1.528 0 2.375-1.02c.567-.684.85-1.646.85-2.917 0-1.263-.283-2.247-.85-2.922q-.849-1.014-2.375-1.016-1.528 0-2.375 1.007c-.567.673-.85 1.66-.85 2.931s.283 2.233.85 2.917'/%3E%3Cdefs%3E%3CradialGradient id='IconifyId1973535ae698969a74' cx='0' cy='0' r='1' gradientTransform='matrix(20.1956 0 0 20.2552 15.188 17.766)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EC991C'/%3E%3Cstop offset='1' stop-color='%23E9B213'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/g%3E%3C/svg%3E") no-repeat;background-size:100% 100%;background-color:transparent;width:4.222222222222222em;height:1em;}
[i-nimiq\:watch-1-50=""]{--nq-icon:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none'%3E%3Cg stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' clip-path='url(%23IconifyId1973535ae698969a71)'%3E%3Cpath d='M6 11.25A5.25 5.25 0 106 .75a5.25 5.25 0 000 10.5'/%3E%3Cpath d='M4.5 4 6 6l1.5-1'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='IconifyId1973535ae698969a71'%3E%3Cpath fill='%23fff' d='M0 0h12v12H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--nq-icon) no-repeat;mask:var(--nq-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;color:inherit;}
/* layer: theme */
:root, :host {
--spacing: 1px;
--font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-serif: ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;
--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--colors-white: light-dark(oklch(1 0 90), oklch(1 0 90));
--colors-darkblue: light-dark(oklch(0.2737 0.068 276.29), oklch(0.2737 0.068 276.29));
--colors-darkerblue: light-dark(oklch(0.2182 0.0371 280.55), oklch(0.2182 0.0371 280.55));
--colors-neutral-0: light-dark(oklch(1 0 90), oklch(0.2737 0.068 276.29));
--colors-neutral-50: light-dark(oklch(0.9881 0 89.88), oklch(0.2388 0.0344 281));
--colors-neutral-100: light-dark(oklch(0.9791 0 89.88), oklch(0.2472 0.0341 281.14));
--colors-neutral-200: light-dark(oklch(0.9677 0.0027 286.35), oklch(0.2679 0.0334 281.42));
--colors-neutral-300: light-dark(oklch(0.95 0.004 286.32), oklch(0.2842 0.033 281.61));
--colors-neutral-400: light-dark(oklch(0.9203 0.0067 286.27), oklch(0.3117 0.0304 281.85));
--colors-neutral-500: light-dark(oklch(0.8681 0.0096 279.67), oklch(0.3991 0.0252 282.18));
--colors-neutral-600: light-dark(oklch(0.8347 0.0125 281.04), oklch(0.4429 0.0229 282.19));
--colors-neutral-700: light-dark(oklch(0.6613 0.0281 280.83), oklch(0.64 0.0148 285.97));
--colors-neutral-800: light-dark(oklch(0.5889 0.0335 281.21), oklch(0.7168 0.0101 279.62));
--colors-neutral-900: light-dark(oklch(0.4374 0.0495 279.71), oklch(0.8619 0.0055 286.28));
--colors-neutral-DEFAULT: light-dark(oklch(0.2737 0.068 276.29), oklch(1 0 90));
--colors-neutral-gradient-from: light-dark(oklab(0.2737 0.0075 -0.0676), oklab(0.1553 0.0542 -0.0519));
--colors-neutral-gradient-to: light-dark(oklab(0.2018 0.0685 -0.0675), oklab(0.2221 0.0059 -0.0521));
--colors-neutral-gradient-darkened-from: light-dark(, );
--colors-neutral-gradient-darkened-to: light-dark(, );
--colors-blue-400: light-dark(oklch(0.9545 0.0167 236.69), oklch(0.2716 0.0521 257.92));
--colors-blue-500: light-dark(oklch(0.9109 0.0327 232.24), oklch(0.3193 0.0701 251.54));
--colors-blue-600: light-dark(oklch(0.8885 0.0428 231.75), oklch(0.3477 0.0771 249.07));
--colors-blue-1100: light-dark(oklch(0.481 0.1164 243.72), oklch(0.6982 0.1694 243.83));
--colors-blue-DEFAULT: light-dark(oklch(0.5849 0.1438 244.29), oklch(0.6982 0.1694 243.83));
--colors-blue-gradient-from: light-dark(oklab(0.5849 -0.0624 -0.1296), oklab(0.6982 -0.0747 -0.1520));
--colors-blue-gradient-to: light-dark(oklab(0.5849 -0.0624 -0.1296), oklab(0.6982 -0.0747 -0.1520));
--colors-blue-gradient-darkened-from: light-dark(oklab(0.4857 -0.0220 -0.1807), oklab(0.5755 -0.0480 -0.1764));
--colors-blue-gradient-darkened-to: light-dark(oklab(0.5404 -0.0523 -0.1438), oklab(0.6546 -0.0695 -0.1422));
--colors-green-400: light-dark(oklch(0.9637 0.017 187.9), oklch(0.2764 0.0331 242.34));
--colors-green-500: light-dark(oklch(0.9307 0.034 185.2), oklch(0.333 0.0416 210.14));
--colors-green-600: light-dark(oklch(0.9154 0.0432 185.62), oklch(0.3622 0.0475 203.62));
--colors-green-1100: light-dark(oklch(0.5564 0.0992 178.59), oklch(0.755 0.1426 170.23));
--colors-green-DEFAULT: light-dark(oklch(0.6932 0.1245 178.48), oklch(0.755 0.1426 170.23));
--colors-green-gradient-to: light-dark(oklab(0.6932 -0.1245 0.0033), oklab(0.7550 -0.1405 0.0242));
--colors-green-gradient-from: light-dark(oklab(0.6000 -0.1198 0.0072), oklab(0.6500 -0.1659 0.0372));
--colors-green-gradient-darkened-from: light-dark(oklab(0.6231 -0.0909 0.0017), oklab(0.7142 -0.1422 0.0319));
--colors-green-gradient-darkened-to: light-dark(oklab(0.6873 -0.1184 -0.0011), oklab(0.6971 -0.1282 0.0212));
--colors-orange-400: light-dark(oklch(0.951 0.0221 74.1), oklch(0.2755 0.014 3.07));
--colors-orange-500: light-dark(oklch(0.9396 0.0436 71.7), oklch(0.3344 0.0381 61.07));
--colors-orange-600: light-dark(oklch(0.9251 0.0549 71.49), oklch(0.3634 0.0513 63.86));
--colors-orange-1100: light-dark(oklch(0.6769 0.1633 57), oklch(0.772 0.1738 64.55));
--colors-orange-DEFAULT: light-dark(oklch(0.7387 0.179 56.67), oklch(0.772 0.1738 64.55));
--colors-orange-gradient-from: light-dark(oklab(0.6500 0.1657 0.1447), oklab(0.7000 0.1105 0.1667));
--colors-orange-gradient-to: light-dark(oklab(0.7387 0.0984 0.1496), oklab(0.7720 0.0747 0.1569));
--colors-orange-gradient-darkened-from: light-dark(oklab(0.6387 0.1530 0.1288), oklab(0.7442 0.1001 0.1509));
--colors-orange-gradient-darkened-to: light-dark(oklab(0.7115 0.1244 0.1440), oklab(0.7438 0.0703 0.1509));
--colors-red-400: light-dark(oklch(0.9544 0.0166 26.65), oklch(0.2655 0.0357 328.64));
--colors-red-500: light-dark(oklch(0.9112 0.0328 27.11), oklch(0.3103 0.0508 358.44));
--colors-red-600: light-dark(oklch(0.8878 0.0422 25.25), oklch(0.3368 0.0603 6.45));
--colors-red-1100: light-dark(oklch(0.515 0.1713 30.54), oklch(0.6881 0.2018 30.03));
--colors-red-DEFAULT: light-dark(oklch(0.598 0.1886 30.3), oklch(0.6881 0.2018 30.03));
--colors-red-gradient-from: light-dark(oklab(0.5000 0.2088 0.0692), oklab(0.6000 0.2142 0.1288));
--colors-red-gradient-to: light-dark(oklab(0.5980 0.1628 0.0952), oklab(0.6881 0.1747 0.1010));
--colors-red-gradient-darkened-from: light-dark(oklab(0.5344 0.1734 0.0523), oklab(0.6515 0.2016 0.1213));
--colors-red-gradient-darkened-to: light-dark(oklab(0.5653 0.1770 0.0874), oklab(0.6633 0.1597 0.0937));
--colors-gold-400: light-dark(oklch(0.9765 0.022 89.79), oklch(0.2916 0.009 340.92));
--colors-gold-500: light-dark(oklch(0.9556 0.0434 91.27), oklch(0.3564 0.0252 69.32));
--colors-gold-600: light-dark(oklch(0.9434 0.0539 92.15), oklch(0.3918 0.0369 76.19));
--colors-gold-1100: light-dark(oklch(0.6642 0.1329 85.55), oklch(0.8517 0.1579 83.77));
--colors-gold-DEFAULT: light-dark(oklch(0.7924 0.1593 85.61), oklch(0.8517 0.1579 83.77));
--colors-gold-gradient-from: light-dark(oklab(0.7000 0.0595 0.1592), oklab(0.7800 0.0503 0.1624));
--colors-gold-gradient-to: light-dark(oklab(0.7924 0.0122 0.1588), oklab(0.8517 0.0171 0.1570));
--colors-gold-gradient-darkened-from: light-dark(oklab(0.7143 0.0695 0.1390), oklab(0.8163 0.0458 0.1479));
--colors-gold-gradient-darkened-to: light-dark(oklab(0.7575 0.0315 0.1515), oklab(0.8221 0.0167 0.1498));
--colors-purple-400: light-dark(oklch(0.9494 0.0083 301.35), oklch(0.2524 0.0591 291.66));
--colors-purple-500: light-dark(oklch(0.8984 0.0181 300.04), oklch(0.2869 0.0801 296.38));
--colors-purple-600: light-dark(oklch(0.8725 0.0224 300.16), oklch(0.3037 0.0894 298.08));
--colors-purple-1100: light-dark(oklch(0.3841 0.0825 296.42), oklch(0.5483 0.2189 304.41));
--colors-purple-DEFAULT: light-dark(oklch(0.4629 0.1027 296.59), oklch(0.5483 0.2189 304.41));
--text-xs-fontSize: 3px;
--text-xs-lineHeight: 4px;
--text-sm-fontSize: 3.5px;
--text-sm-lineHeight: 5px;
--text-base-fontSize: 4px;
--text-base-lineHeight: 6px;
--text-lg-fontSize: 4.5px;
--text-lg-lineHeight: 7px;
--text-xl-fontSize: 5px;
--text-xl-lineHeight: 7px;
--text-2xl-fontSize: 6px;
--text-2xl-lineHeight: 8px;
--text-3xl-fontSize: 7.5px;
--text-3xl-lineHeight: 9px;
--text-4xl-fontSize: 9px;
--text-4xl-lineHeight: 10px;
--text-5xl-fontSize: 12px;
--text-5xl-lineHeight: 1;
--text-6xl-fontSize: 15px;
--text-6xl-lineHeight: 1;
--text-7xl-fontSize: 18px;
--text-7xl-lineHeight: 1;
--text-8xl-fontSize: 24px;
--text-8xl-lineHeight: 1;
--text-9xl-fontSize: 32px;
--text-9xl-lineHeight: 1;
--fontWeight-thin: 100;
--fontWeight-extralight: 200;
--fontWeight-light: 300;
--fontWeight-normal: 400;
--fontWeight-medium: 500;
--fontWeight-semibold: 600;
--fontWeight-bold: 700;
--fontWeight-extrabold: 800;
--fontWeight-black: 900;
--tracking-tighter: -0.05em;
--tracking-tight: -0.025em;
--tracking-normal: 0em;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
--textStrokeWidth-DEFAULT: 6px;
--textStrokeWidth-none: 0;
--textStrokeWidth-sm: thin;
--textStrokeWidth-md: medium;
--textStrokeWidth-lg: thick;
--radius-DEFAULT: 1px;
--radius-none: 0;
--radius-xs: 0.5px;
--radius-sm: 1px;
--radius-md: 1.5px;
--radius-lg: 2px;
--radius-xl: 3px;
--radius-2xl: 4px;
--radius-3xl: 6px;
--radius-4xl: 8px;
--ease-DEFAULT: var(--nq-ease);
--blur-DEFAULT: 8px;
--blur-xs: 4px;
--blur-sm: 8px;
--blur-md: 12px;
--blur-lg: 16px;
--blur-xl: 24px;
--blur-2xl: 40px;
--blur-3xl: 64px;
--perspective-dramatic: 100px;
--perspective-near: 300px;
--perspective-normal: 500px;
--perspective-midrange: 800px;
--perspective-distant: 1200px;
--defaults-transition-duration: 150ms;
--defaults-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1);
--defaults-font-family: var(--font-sans);
--defaults-font-featureSettings: var(--font-sans--font-feature-settings);
--defaults-font-variationSettings: var(--font-sans--font-variation-settings);
--defaults-monoFont-family: var(--font-mono);
--defaults-monoFont-featureSettings: var(--font-mono--font-feature-settings);
--defaults-monoFont-variationSettings: var(--font-mono--font-variation-settings);
--container-3xs: 64px;
--container-2xs: 72px;
--container-xs: 80px;
--container-sm: 96px;
--container-md: 112px;
--container-lg: 128px;
--container-xl: 144px;
--container-2xl: 168px;
--container-3xl: 192px;
--container-4xl: 224px;
--container-5xl: 256px;
--container-6xl: 288px;
--container-7xl: 320px;
--container-prose: 65ch;
--transitionProperty-colors: color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-fn-from,--un-gradient-fn-to;
}
/* layer: cssvar-property */
@property --un-text-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
@property --un-leading{syntax:"*";inherits:false;}
@property --un-outline-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
@property --un-outline-style{syntax:"*";inherits:false;initial-value:solid;}
@property --un-border-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
@property --un-ring-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
@property --un-inset-ring-color{syntax:"*";inherits:false;}
@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-inset-shadow-color{syntax:"*";inherits:false;}
@property --un-ring-color{syntax:"*";inherits:false;}
@property --un-ring-inset{syntax:"*";inherits:false;}
@property --un-ring-offset-color{syntax:"*";inherits:false;}
@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0px;}
@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-shadow-color{syntax:"*";inherits:false;}
@property --un-translate-x{syntax:"*";inherits:false;initial-value:0;}
@property --un-translate-y{syntax:"*";inherits:false;initial-value:0;}
@property --un-translate-z{syntax:"*";inherits:false;initial-value:0;}
@property --un-scale-x{syntax:"*";inherits:false;initial-value:1;}
@property --un-scale-y{syntax:"*";inherits:false;initial-value:1;}
@property --un-scale-z{syntax:"*";inherits:false;initial-value:1;}
@property --un-ease{syntax:"*";inherits:false;}
@property --un-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000;}
@property --un-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%;}
@property --un-gradient-position{syntax:"*";inherits:false;}
@property --un-gradient-stops{syntax:"*";inherits:false;}
@property --un-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000;}
@property --un-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%;}
@property --un-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000;}
@property --un-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%;}
@property --un-gradient-via-stops{syntax:"*";inherits:false;}
@property --un-to-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
/* layer: nq-colors