/*! Marx: the classless CSS reset (perfect for Communists) | MIT License | https://github.com/mblode/marx */
@layer marx.base {
  :where(:root) {
    color-scheme: light dark;
    --marx-leading: 1.5;
    --marx-flow: 1.25rem;
    --marx-measure: 42rem;
    --marx-radius: .5rem;
    --marx-space-2xs: .25rem;
    --marx-space-xs: .5rem;
    --marx-space-sm: .75rem;
    --marx-space-md: 1rem;
    --marx-space-lg: 1.25rem;
    --marx-space-xl: 2.5rem;
    --marx-text-sm: .875rem;
    --marx-text-base: 1rem;
    --marx-text-h1: 2.5rem;
    --marx-text-h2: 2rem;
    --marx-text-h3: 1.6rem;
    --marx-text-h4: 1.35rem;
    --marx-text-h5: 1.15rem;
    --marx-text-h6: 1rem;
    --marx-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
    --marx-font-serif: Georgia, Times, "Times New Roman", serif;
    --marx-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
    --marx-font-body: var(--marx-font-sans);
    --marx-bg: light-dark(oklch(100% 0 0), oklch(18% .01 260));
    --marx-text: light-dark(oklch(0% 0 0 / .8), oklch(100% 0 0 / .87));
    --marx-muted: light-dark(oklch(0% 0 0 / .54), oklch(100% 0 0 / .6));
    --marx-disabled: light-dark(oklch(0% 0 0 / .38), oklch(100% 0 0 / .42));
    --marx-border: light-dark(oklch(0% 0 0 / .12), oklch(100% 0 0 / .16));
    --marx-surface: light-dark(oklch(97.5% .002 280), oklch(24% .01 260));
    --marx-primary: oklch(54.6% .245 262.9);
    --marx-primary-strong: oklch(48.8% .243 264.4);
    --marx-on-primary: oklch(100% 0 0);
    --marx-link: light-dark(oklch(54.6% .245 262.9), oklch(70.7% .165 254.6));
    --marx-link-hover: light-dark(oklch(48.8% .243 264.4), oklch(80.9% .105 251.8));
    --marx-ring: light-dark(oklch(54.6% .245 262.9), oklch(70.7% .165 254.6));
    --marx-danger: light-dark(oklch(57.7% .245 27.3), oklch(70.4% .191 22.2));
    --marx-success: light-dark(oklch(60% .16 150), oklch(72% .16 152));
    --marx-warning: light-dark(oklch(70% .16 75), oklch(80% .14 80));
    --marx-mark: oklab(86% -.0148165 .169353 / .4);
  }

  *, :before, :after, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  :where(html, :host) {
    line-height: var(--marx-leading);
    font-family: var(--marx-font-body);
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    overflow-wrap: break-word;
    scrollbar-gutter: stable;
  }

  :where(b, strong) {
    font-weight: bolder;
  }

  :where(code, kbd, samp, pre) {
    font-family: var(--marx-font-mono);
    font-size: 1em;
  }

  :where(small) {
    font-size: 80%;
  }

  :where(sub, sup) {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  :where(sub) {
    inset-block-end: -.25em;
  }

  :where(sup) {
    inset-block-start: -.5em;
  }

  :where(abbr[title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  :where(hr) {
    block-size: 0;
    color: inherit;
    border-block-start-width: 1px;
  }

  :where(table) {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :where(img, svg, video, canvas, audio, iframe, embed, object) {
    vertical-align: middle;
    display: block;
  }

  :where(img, video) {
    block-size: auto;
    max-inline-size: 100%;
  }

  :where(svg:not([fill])) {
    fill: currentColor;
  }

  :where(button, input, select, optgroup, textarea) {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size]) optgroup) {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size]) optgroup option) {
    padding-inline-start: 20px;
  }

  :where(textarea) {
    resize: vertical;
  }

  :where(button, input:is([type="button"], [type="reset"], [type="submit"])) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  :where(:-moz-ui-invalid) {
    box-shadow: none;
  }

  ::-webkit-inner-spin-button {
    block-size: auto;
  }

  ::-webkit-outer-spin-button {
    block-size: auto;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-block-size: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  ::placeholder {
    opacity: 1;
  }

  :where(summary) {
    display: list-item;
  }

  :where(dialog) {
    margin: auto;
  }

  :where(progress) {
    vertical-align: baseline;
  }

  :where([aria-busy="true"]) {
    cursor: progress;
  }

  :where([aria-disabled="true"], [disabled]) {
    cursor: not-allowed;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer marx.content {
  :where(body) {
    background-color: var(--marx-bg);
    color: var(--marx-text);
    font-family: var(--marx-font-body);
    font-size: var(--marx-text-base);
    line-height: var(--marx-leading);
    min-block-size: 100svh;
  }

  :where(main) {
    max-inline-size: var(--marx-measure);
    padding-inline: var(--marx-space-md);
    margin-inline: auto;
    padding-block-end: var(--marx-space-md);
    display: block;
  }

  :where(header, footer, article, section, aside) {
    margin-block-start: var(--marx-flow);
  }

  :where(footer) {
    border-block-start: 1px solid var(--marx-border);
    padding-block: var(--marx-space-md);
    text-align: center;
  }

  :where(hr) {
    border: 0;
    border-block-start: 1px solid var(--marx-border);
    margin-block-start: calc(var(--marx-flow) * 2);
  }

  :where(img, video, iframe, embed, object) {
    margin-block-start: var(--marx-flow);
  }

  :where(img, video) {
    border-radius: var(--marx-radius);
  }

  :where(dialog) {
    background-color: canvas;
    background-color: var(--marx-bg);
    color: var(--marx-text);
    border: 1px solid var(--marx-border);
    border-radius: var(--marx-radius);
    padding: var(--marx-space-lg);
    max-inline-size: min(90vw, 32rem);
  }

  :where(dialog)::backdrop {
    background-color: oklab(0% none none / .4);
  }

  :where([popover]) {
    background-color: canvas;
    background-color: var(--marx-bg);
    color: var(--marx-text);
    border: 1px solid var(--marx-border);
    border-radius: var(--marx-radius);
    padding: var(--marx-space-lg);
    margin: auto;
  }

  :where(details) {
    margin-block-start: var(--marx-flow);
  }

  :where(summary) {
    cursor: pointer;
    font-weight: 500;
  }

  :where(summary):focus-visible {
    outline: 2px solid var(--marx-ring);
    outline-offset: 2px;
  }

  @media print {
    :where(pre, blockquote, table, figure, img) {
      break-inside: avoid;
    }

    :where(h1, h2, h3, h4, h5, h6) {
      break-after: avoid;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    :where(html) {
      scroll-behavior: smooth;
    }

    :where(dialog), :where([popover]) {
      opacity: 1;
      transition: opacity .2s ease,
      transform .2s ease,
      overlay .2s allow-discrete,
      display .2s allow-discrete;
      transform: scale(1);
    }

    :is(:where(dialog):not([open]), :where([popover]):not(:popover-open)) {
      opacity: 0;
      transform: scale(.97);
    }

    @starting-style {
      :where(dialog[open]), :where([popover]:popover-open) {
        opacity: 0;
        transform: scale(.97);
      }
    }

    :where(dialog[open])::backdrop {
      opacity: 1;
      transition: opacity .2s ease,
      overlay .2s allow-discrete,
      display .2s allow-discrete;
    }

    @starting-style {
      :where(dialog[open])::backdrop {
        opacity: 0;
      }
    }
  }

  :where(h1, h2, h3, h4, h5, h6) {
    color: inherit;
    text-wrap: balance;
    font-weight: 500;
    line-height: 1.2;
  }

  :where(h1) {
    font-size: var(--marx-text-h1);
  }

  :where(h2) {
    font-size: var(--marx-text-h2);
  }

  :where(h3) {
    font-size: var(--marx-text-h3);
  }

  :where(h4) {
    font-size: var(--marx-text-h4);
  }

  :where(h5) {
    font-size: var(--marx-text-h5);
  }

  :where(h6) {
    font-size: var(--marx-text-h6);
  }

  :where(h1, h2) {
    letter-spacing: -.01em;
    margin-block-start: calc(var(--marx-flow) * 1.5);
  }

  :where(h3, h4, h5, h6) {
    margin-block-start: var(--marx-flow);
  }

  :where(p) {
    text-wrap: pretty;
    margin-block-start: var(--marx-flow);
  }

  :where(a) {
    color: var(--marx-link);
    text-decoration-line: underline;
    -webkit-text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
    text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
    text-underline-offset: .15em;
  }

  :where(a:hover) {
    color: var(--marx-link-hover);
    text-decoration-color: currentColor;
  }

  :where(a:focus-visible) {
    outline: 2px solid var(--marx-ring);
    outline-offset: 2px;
    border-radius: var(--marx-radius);
  }

  :where(small) {
    color: var(--marx-muted);
  }

  :where(mark) {
    background-color: var(--marx-mark);
    color: inherit;
    border-radius: var(--marx-radius);
    padding-block: .05em;
    padding-inline: .15em;
  }

  :where(del, s) {
    color: var(--marx-muted);
    text-decoration-line: line-through;
  }

  :where(u, ins) {
    text-decoration-line: underline;
  }

  :where(abbr[title]) {
    text-underline-offset: .2em;
    cursor: help;
  }

  :where(ul) {
    list-style-type: disc;
  }

  :where(ul ul) {
    list-style-type: circle;
  }

  :where(ul ul ul) {
    list-style-type: square;
  }

  :where(ol) {
    list-style-type: decimal;
  }

  :where(ol[type="a" i]) {
    list-style-type: lower-alpha;
  }

  :where(ol[type="i" i]) {
    list-style-type: lower-roman;
  }

  :where(ol[type="A" s]) {
    list-style-type: upper-alpha;
  }

  :where(ol[type="I" s]) {
    list-style-type: upper-roman;
  }

  :where(ul, ol) {
    margin-block-start: var(--marx-flow);
    padding-inline-start: 1.5em;
  }

  :where(li) {
    margin-block-start: var(--marx-space-xs);
    padding-inline-start: .4em;
  }

  :where(li)::marker {
    color: var(--marx-muted);
  }

  :where(li > ul, li > ol) {
    margin-block-start: 0;
  }

  :where(nav) :where(ol, ul) {
    padding: 0;
    list-style-type: none;
  }

  :where(nav li):before {
    content: "​";
    float: inline-start;
  }

  :where(dl) {
    margin-block-start: var(--marx-flow);
  }

  :where(dt) {
    margin-block-start: var(--marx-space-md);
    font-weight: bold;
  }

  :where(dd) {
    color: var(--marx-muted);
    margin-block-start: var(--marx-space-2xs);
    margin-inline-start: var(--marx-space-md);
  }

  :where(blockquote) {
    border-inline-start: 2px solid var(--marx-border);
    font-family: var(--marx-font-serif);
    margin-block-start: var(--marx-flow);
    margin-inline: 0;
    padding-inline-start: var(--marx-space-md);
    font-style: italic;
  }

  :where(:not(pre) > code) {
    background-color: var(--marx-surface);
    border-radius: min(calc(var(--marx-radius) * .6), .35em);
    padding-block: .125em;
    padding-inline: .3em;
    font-size: .875em;
  }

  :where(:is(h1, h2, h3, h4) code) {
    font-size: .9em;
  }

  :where(pre) {
    background-color: var(--marx-surface);
    font-size: var(--marx-text-sm);
    tab-size: 2;
    border-radius: var(--marx-radius);
    padding-block: var(--marx-space-sm);
    padding-inline: var(--marx-space-md);
    margin-block-start: var(--marx-flow);
    margin-block-end: var(--marx-space-md);
    line-height: 1.5;
    overflow-x: auto;
  }

  :where(pre code) {
    font-size: inherit;
    background-color: #0000;
    border-radius: 0;
    padding: 0;
  }

  :where(kbd) {
    border: 1px solid var(--marx-border);
    border-radius: min(calc(var(--marx-radius) * .6), .35em);
    border-block-end-width: 2px;
    padding-block: .0625em;
    padding-inline: .35em;
    font-family: inherit;
    font-size: .85em;
  }

  :where(figure) {
    margin-block-start: var(--marx-flow);
    margin-inline: 0;
  }

  :where(figcaption) {
    color: var(--marx-muted);
    font-family: var(--marx-font-serif);
    font-size: var(--marx-text-sm);
    margin-block-start: var(--marx-space-xs);
  }

  :where([id]) {
    scroll-margin-block-start: var(--marx-flow);
  }

  :where(:is(h1, h2, h3, h4, h5, h6) + *), :where(:is(article, section) > header + *) {
    margin-block-start: var(--marx-space-md);
  }

  :where(table) {
    font-variant-numeric: tabular-nums;
    border-collapse: separate;
    border-spacing: 0;
    border-block-start: 1px solid var(--marx-border);
    border-block-end: 1px solid var(--marx-border);
    inline-size: 100%;
    margin-block-start: var(--marx-flow);
  }

  :where(caption) {
    caption-side: bottom;
    padding-block: var(--marx-space-sm);
    color: var(--marx-muted);
    font-size: var(--marx-text-sm);
  }

  :where(thead th) {
    text-align: start;
    border-block-end: 2px solid var(--marx-border);
  }

  :where(th, td) {
    padding-block: var(--marx-space-sm);
    padding-inline: var(--marx-space-md);
    text-align: start;
    vertical-align: top;
  }

  :where(tbody, tfoot) :where(td, th) {
    border-block-start: 1px solid var(--marx-border);
  }

  :where(tbody:first-of-type tr:first-child) :where(td, th) {
    border-block-start: 0;
  }

  :where(tfoot td) {
    color: var(--marx-muted);
    font-size: var(--marx-text-sm);
  }

  :where(th[align="center"], td[align="center"]) {
    text-align: center;
  }

  :where(th[align="right"], td[align="right"]) {
    text-align: end;
  }

  :where(dialog, [popover], td, th, li, dd, blockquote, figure, fieldset, footer) > :where(:first-child) {
    margin-block-start: 0;
  }
}

@layer marx.forms {
  :where(button, input[type="submit"], input[type="reset"], input[type="button"]) {
    appearance: none;
    background-color: var(--marx-primary);
    border-radius: var(--marx-radius);
    color: var(--marx-on-primary);
    block-size: calc((var(--marx-text-base) * var(--marx-leading)) + (2 * var(--marx-space-xs)) +
      2px);
    padding-block: 0;
    padding-inline: var(--marx-space-md);
    font-weight: 500;
    font-size: var(--marx-text-base);
    line-height: calc((var(--marx-text-base) * var(--marx-leading)) + (2 * var(--marx-space-xs)));
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    touch-action: manipulation;
    border: 1px solid #0000;
    display: inline-block;
  }

  :where(button:not(:disabled), input:not(:disabled):is([type="submit"], [type="reset"], [type="button"])):hover, :where(button:not(:disabled), input:not(:disabled):is([type="submit"], [type="reset"], [type="button"])):active {
    background-color: var(--marx-primary-strong);
    border-color: var(--marx-primary-strong);
  }

  :where(button, input[type="submit"], input[type="reset"], input[type="button"]):focus-visible {
    outline: 2px solid var(--marx-ring);
    outline-offset: 2px;
  }

  :where(button, input[type="submit"], input[type="reset"], input[type="button"]):disabled {
    opacity: .65;
    cursor: not-allowed;
  }

  @media (prefers-reduced-motion: no-preference) {
    :where(button, input[type="submit"], input[type="reset"], input[type="button"]) {
      transition: background-color .15s, border-color .15s, color .15s;
    }
  }

  :where(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="image"]), select, textarea) {
    inline-size: 100%;
    padding: var(--marx-space-xs) var(--marx-space-md);
    font-size: var(--marx-text-base);
    line-height: var(--marx-leading);
    color: var(--marx-text);
    background-color: var(--marx-bg);
    border: 1px solid var(--marx-border);
    border-radius: var(--marx-radius);
    display: block;

    &:user-invalid {
      border-color: var(--marx-danger);
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: border-color .15s;
    }
  }

  :where(input, select, textarea):focus-visible {
    outline: 2px solid var(--marx-ring);
    outline-offset: 2px;
  }

  :where(input, select, textarea):disabled {
    color: var(--marx-disabled);
    cursor: not-allowed;
    background-color: var(--marx-surface);
  }

  :where(input, select, textarea)[readonly] {
    color: var(--marx-muted);
    border-color: var(--marx-border);
  }

  :where(textarea) {
    field-sizing: content;
    min-block-size: 5lh;
  }

  :where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
    accent-color: var(--marx-primary);
  }

  :where(input[type="checkbox"], input[type="radio"]) {
    vertical-align: -.15em;
    block-size: 1em;
    inline-size: 1em;
  }

  :where(ul:has(input:is([type="checkbox"], [type="radio"]))) {
    padding-inline-start: 0;
    list-style: none;
  }

  :where(ul:has(input:is([type="checkbox"], [type="radio"])) > li) {
    padding-inline-start: 0;
  }

  :where(progress, meter) {
    appearance: none;
    inline-size: 100%;
    block-size: var(--marx-space-xs);
    border-radius: var(--marx-radius);
    background-color: var(--marx-surface);
    border: 0;
    display: block;
    overflow: hidden;
  }

  :where(progress)::-webkit-progress-bar {
    background-color: var(--marx-surface);
  }

  :where(progress)::-webkit-progress-value {
    background-color: var(--marx-primary);
  }

  :where(progress)::-moz-progress-bar {
    background-color: var(--marx-primary);
  }

  :where(meter)::-webkit-meter-bar {
    background-color: var(--marx-surface);
    border: 0;
  }

  :where(meter)::-webkit-meter-optimum-value {
    background-color: var(--marx-success);
  }

  :where(meter)::-webkit-meter-suboptimum-value {
    background-color: var(--marx-warning);
  }

  :where(meter)::-webkit-meter-even-less-good-value {
    background-color: var(--marx-danger);
  }

  :where(meter)::-moz-meter-bar {
    background-color: var(--marx-success);
  }

  :where(select:not([multiple], [size])) {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--marx-space-md) center;
    background-size: 1em;
    padding-inline-end: var(--marx-space-xl);
  }

  :where(input[type="color"]) {
    block-size: 2.5rem;
    inline-size: 3rem;
    padding: var(--marx-space-2xs);
    background-color: var(--marx-bg);
    border: 1px solid var(--marx-border);
    border-radius: var(--marx-radius);
  }

  :where(input[type="file"])::file-selector-button {
    padding: var(--marx-space-xs) var(--marx-space-md);
    color: var(--marx-on-primary);
    cursor: pointer;
    background-color: var(--marx-primary);
    border-radius: var(--marx-radius);
    border: 1px solid #0000;
    margin-inline-end: var(--marx-space-md);
  }

  :where(input[type="file"])::file-selector-button:hover {
    background-color: var(--marx-primary-strong);
  }

  @media (prefers-reduced-motion: no-preference) {
    :where(input[type="file"])::file-selector-button {
      transition: background-color .15s;
    }
  }

  ::placeholder {
    color: var(--marx-muted);
  }

  :where(label) {
    line-height: var(--marx-leading);
    vertical-align: middle;
    display: inline-block;
  }

  :where(label + :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea)) {
    margin-block-start: var(--marx-space-xs);
  }

  :where(label:has( > input:is([type="checkbox"], [type="radio"]))) {
    align-items: center;
    column-gap: var(--marx-space-2xs);
    display: inline-flex;
  }

  :where(fieldset) {
    padding: var(--marx-space-md);
    border: 1px solid var(--marx-border);
    border-radius: var(--marx-radius);
  }

  :where(legend) {
    padding-inline: var(--marx-space-xs);
    font-weight: 500;
  }
}